/* eniggma skins — чёрный + оранжевый

   Палитра ENIGGMA (design/master-kit/design-system/TOKENS.md). Чёрный —
   холст, оранжевый — свет. Ключевое отличие от прежней палитры: подтон ушёл
   из фиолетового в графитово-синий, а поверхности стали на два шага темнее.
   Оранжевый почти не изменился — он и был верным. */

:root {
  --bg:        #050608;
  --space:     #080b10;   /* фон под слоем атмосферы */
  --bg-2:      #080b10;
  --panel:     #0b0e14;
  --panel-2:   #11151d;
  --panel-3:   #171c26;
  --card:      #0f1218;

  /* Границы полупрозрачные, а не серые: край панели — это отражённый свет,
     и на разной подложке он обязан быть разным. Сплошной #26262f выдавал
     себя ровно там, где панель лежала на панели. */
  --line:      rgba(255, 255, 255, .08);
  --line-2:    rgba(255, 255, 255, .14);

  --or:        #ff7a00;
  --or-2:      #ff9d1c;
  /* --or-3 — ТЁМНЫЙ конец оранжевых градиентов (--or-2 -> --or-3), таких в
     файле два десятка. Светлый оттенок живёт отдельно, в --or-hot: если
     подменить здесь, все градиенты вывернутся наизнанку. */
  --or-3:      #ff5c00;
  --or-hot:    #ffb52e;
  /* Опорный оранжевый интерфейса, снятый пипеткой с референса: обводки
     капсул с ценой, активные чипы, заполнение ползунка — там везде #fc6c05,
     а не яркий --or-2. Разница на глаз заметная: светлый оранжевый на
     тёмном читается как подсветка, тёмный — как краска по металлу, и весь
     хром референса сделан именно им. */
  --or-deep:   #fc6c05;
  --or-soft:   rgba(255, 122, 0, .14);
  --or-glow:   rgba(255, 122, 0, .45);

  --tx:        #f3f4f6;
  --tx-2:      #8a909d;
  --tx-3:      #5f6571;

  --green:     #35d07f;
  --red:       #ff4d5e;
  --blue:      #4b9bff;

  /* Радиусы сдержаннее прежних: у ENIGGMA угол держится срезом и уголковым
     кронштейном, а не скруглением в четырнадцать пикселей. */
  --r:   10px;
  --r-s: 6px;

  --shadow: 0 12px 34px rgba(0, 0, 0, .55);

  /* ---- свет ----
     Свечение всегда имеет источник и всегда узкое. Три ступени, чтобы
     «посветить» не означало каждый раз выдумывать новое размытие. */
  --glow-soft: 0 0 14px -2px rgba(255, 122, 0, .30);
  --glow-mid:  0 0 22px -2px rgba(255, 122, 0, .45), 0 0 0 1px rgba(255, 122, 0, .38);
  --glow-hot:  0 0 34px -4px rgba(255, 122, 0, .60), 0 0 0 1px rgba(255, 157, 28, .55);

  /* ---- поверхность ----
     Металл: вертикальный градиент плюс блик по верхней кромке. Одним
     набором, потому что «сделать как у той панели» должно быть подстановкой
     переменной, а не копированием четырёх строк. */
  --metal:  linear-gradient(180deg, #11151d 0%, #0b0e14 100%);
  --metal-2: linear-gradient(180deg, #171c26 0%, #0f1218 100%);
  --edge:   inset 0 1px 0 rgba(255, 255, 255, .06);
  /* Полупрозрачные версии тех же поверхностей. Панель не закрашивает сцену
     наглухо, а стоит в ней: сквозь неё чуть виден космос, и интерфейс
     перестаёт выглядеть наклеенным поверх картинки. Прозрачности ровно
     столько, чтобы текст не потерял контраст. */
  --panel-a:   rgba(11, 14, 20, .84);
  --panel-2a:  rgba(17, 21, 29, .86);
  --metal-a: linear-gradient(180deg, rgba(17, 21, 29, .88) 0%, rgba(11, 14, 20, .82) 100%);

  /* ---- время ----
     Микро — отклик на курсор, UI — появление и переключение, кино — смена
     сцены. Разнобой в 120/150/200/250 мс по файлу читался как неряшливость. */
  --t-micro: 150ms;
  --t-ui:    220ms;
  --t-cine:  480ms;
}

* { box-sizing: border-box; }

/* Атрибут hidden обязан прятать элемент — всегда.
   Браузерное правило [hidden] { display: none } живёт в UA-таблице, и ЛЮБОЕ
   авторское display его перебивает: `.card { display: flex }` тихо оставляет
   на экране элемент, которому JS выставил hidden. Хуже всего, когда такой
   элемент растянут по inset: 0 — он невидим, но собирает все клики, и экран
   выглядит просто «неработающим».
   В этом файле ловушка сработала пять раз и пять раз чинилась поштучно
   (.gate[hidden], .gfld[hidden], .inv-sellbar[hidden] и так далее). Одно
   правило закрывает её для всей разметки разом. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--tx);
  font: var(--fs-ui)/1.5 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Оранжевых пятен на самом body больше нет: подсвет переехал в слой
   атмосферы (.sky-neb), где он живёт и движется. Здесь остаётся только
   базовый чёрный — холст, на котором стоит сцена. */
body { min-height: 100vh; background: var(--bg); }

::selection { background: var(--or); color: #000; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: #2a2a34; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a48; }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: .01em; }

/* ============================================================ шапка сайта

   Одна на весь сайт, одинаковой высоты на всех страницах. Липкая и с
   размытием: содержимое уезжает ПОД неё, а не наезжает на логотип. Высота
   вынесена в переменную, потому что от неё зависят и боковое меню (оно
   липнет под шапкой), и верхний отступ содержимого. */

:root {
  --tb-h: 64px;
  /* Ширина панели ставки — одна на все игры. Раньше число стояло в трёх
     правилах, и «ужать панель» означало найти все три. */
  --gm-side-w: 340px;
  /* Потолок рабочей области — один на весь сайт: игры, апгрейдер, кабинет.
     Раньше это число стояло в каждом разделе своим литералом, и разделы
     потихоньку разъезжались; теперь «сделать как везде» — это подставить
     переменную, а не искать все 1400 по файлу. На мониторе 2560 без потолка
     страница расползается на две тысячи пикселей и читается хуже. */
  --page-max: 1400px;
  /* Нижняя граница высоты поля «Краша». Обычно поле выше: оно тянется до
     низа панели ставки — см. .cr-board. Это число работает только там, где
     панель почему-то оказалась совсем низкой (короткий режим, узкий экран),
     чтобы график не сплющило в полоску. */
  --cr-board-min: 300px;
  /* Колонки «Краша»: слева форма ставки (верхняя строка), справа чужие
     ставки (нижняя). Числа рядом, потому что вместе они и определяют,
     сколько остаётся игровому кадру и инвентарю. */
  --cr-bet-w: 320px;
  --gm-rail-w: 296px;
  /* Высота нижней строки: инвентарь и блоки ставок ровняются по ней и
     прокручиваются внутри себя. Одно число на обе колонки — иначе они
     разъедутся, и между ними появится ступенька. */
  --gm-low-h: 470px;
  /* Высота ленты прошлых множителей над кадром. Ею же отодвинуты вниз
     показания раунда, чтобы лента и цифра не наехали друг на друга. */
  --cr-hx-h: 46px;
  /* Внешний отступ между блоками игры — один на все зоны: панель, поле,
     полоса скинов, ставки игроков. Одно число вместо разнобоя, и оно же
     задаёт «одинаковые отступы» из требований раскладки. */
  --gm-gap: 20px;
  /* Отступ между шапкой и первым блоком отдельный и заметно больше: контент
     не должен прилипать к логотипу. */
  --content-top: 28px;
}

.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--tb-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  background: rgba(9, 9, 12, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.tb-logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit; flex: none;
  padding: 4px 6px; border-radius: var(--r-s);
  transition: background .15s;
}
.tb-logo:hover { background: rgba(255, 122, 24, .08); }
/* ---- разделы в шапке ----

   Как в референсе: тонкие контурные значки, компактные подписи в верхнем
   регистре, приглушённый серый в покое и оранжевый у активного. Ведут
   только на существующие страницы — пункт, ведущий в никуда, хуже, чем
   отсутствие пункта. */
.tb-nav { display: flex; align-items: center; gap: 4px; flex: none; margin-left: 10px; }
.tb-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border: 0; border-radius: var(--r-s);
  background: none; color: var(--tx-2); cursor: pointer;
  font: 700 var(--fs-micro)/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--t-micro), background var(--t-micro);
}
.tb-link svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.tb-link:hover { color: var(--tx); background: rgba(255, 255, 255, .05); }
.tb-link.on { color: var(--or-2); }
.tb-link.on svg { opacity: 1; }
/* Значков в шапке нет (владелец, 2026-10-20): на узком экране подписи
   остаются, ужимаются только отступы. */
@media (max-width: 1100px) { .tb-link { padding: 8px; letter-spacing: .06em; } }
@media (max-width: 720px) { .tb-nav { display: none; } }

.tb-word {
  font-weight: 900; font-size: var(--fs-body); letter-spacing: .13em; line-height: 1.1;
  white-space: nowrap;
}
.tb-word small {
  display: block; color: var(--tx-3); font-size: 9px;
  letter-spacing: .24em; font-weight: 700;
}

.tb-mid { flex: 1; min-width: 0; display: flex; justify-content: center; }
.tb-mid .page-title {
  font-size: var(--fs-body); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-right { display: flex; align-items: center; gap: 10px; flex: none; }
.tb-bal {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 12px; border-radius: var(--r-s);
  background: var(--panel); border: 1px solid var(--line);
}
.tb-bal .k {
  font-size: 9px; letter-spacing: .14em; color: var(--tx-3);
  text-transform: uppercase; font-weight: 700;
}
.tb-bal .v { font-size: var(--fs-ui); font-weight: 800; color: var(--or-2); }
.tb-bal-row { display: flex; align-items: baseline; gap: 5px; }
.tb-bal .c {
  font: 700 10px/1 inherit; letter-spacing: .1em; color: var(--tx-3);
  font-style: normal;
}

/* Переключатель валюты витрины. Форма та же, что у .seg, но своя: этот
   стоит в шапке, где кегль мельче и высота задана соседями. */
.tb-cur {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-s);
}
.cur-b {
  background: transparent; border: 0; color: var(--tx-3); cursor: pointer;
  padding: 5px 9px; border-radius: 6px; transition: .15s;
  font: 800 var(--fs-micro)/1 inherit; letter-spacing: .05em;
}
.cur-b:hover:not(.on) { color: var(--or-2); }
.cur-b.on { background: var(--or); color: #180a00; }
/* Тот же переключатель в кабинете, под балансом. */
.pra-cur { margin-top: 10px; align-self: flex-start; }

/* Тот же переключатель в мобильном листе: там он строка списка, а не
   элемент шапки, и подписан словом — места на подпись хватает. */
.sh-cur { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.sh-cur .sh-cur-k { color: var(--tx-3); font: 700 var(--fs-cap)/1 inherit; }
.tb-burger {
  display: none; width: 38px; height: 38px; border-radius: var(--r-s);
  background: var(--panel); border: 1px solid var(--line);
  color: var(--tx); font-size: 17px; cursor: pointer;
}

/* ============================================================ раскладка игры

   Четыре зоны, одинаковые у «Краша» и «Минного поля»:
   панель ставки слева, поле справа, полоса скинов под ними, ставки внизу.
   Панель фиксированной ширины, поле забирает остаток: игровое поле обязано
   растягиваться, а панель — нет, у неё содержимое постоянной ширины. */

/* Потолок общий на все четыре зоны сразу — панель с полем, полосу скинов и
   ставки игроков. Раньше он висел на одной строке .cr-main, и полоса со
   ставками под полем уходила шире него на всю оставшуюся ширину монитора. */
.gm {
  display: flex; flex-direction: column; gap: var(--gm-gap);
  max-width: var(--page-max); margin-inline: auto; width: 100%;
}
.gm-main {
  display: grid; grid-template-columns: var(--gm-side-w) minmax(0, 1fr);
  gap: var(--gm-gap); align-items: start;
}
.gm-side { position: sticky; top: calc(var(--tb-h) + 14px); }
/* «Минное поле» и «Краш» разложены одинаково: панель ставки и поле. Третья
   колонка с показаниями у «Минного поля» была и убрана — всё, что в ней
   стояло, дублировало кнопку ставки и подписи строк поля. */
.gm-field { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* ---- игра обязана помещаться в экран целиком ----

   Высота игровой зоны бралась из содержимого: у «Минного поля» её задаёт
   панель ставки, у «Краша» — пропорция кадра 16/7.6 с полом в 420px. Ни
   там, ни там не спрашивалось, сколько на экране места, и на ноутбучных
   1280x650 поле выходило 686 и 795 пикселей соответственно. Играть
   приходилось прокруткой: часть поля всегда оставалась за краем, а колесо
   мыши уносило за пределы игры, в блоки под ней.

   Потолок считается от окна: шапка, отступы страницы и небольшой запас,
   чтобы под полем была видна кромка следующего блока — иначе непонятно,
   что страница вообще продолжается. Ниже 520px не опускаемся: на совсем
   низком окне лучше честная прокрутка, чем поле в две клетки. */
:root { --gm-vh: max(520px, calc(100vh - var(--tb-h) - 52px)); }
.gm-main { max-height: var(--gm-vh); }
/* Панель ставки не обрезается, а прокручивается внутри себя: её содержимое
   это органы управления, и прятать их за краем нельзя. */
.gm-side { max-height: var(--gm-vh); overflow-y: auto; overscroll-behavior: contain; }
.gm-field { max-height: var(--gm-vh); }
/* Поле «Минного поля» занимает свою клетку строки ЦЕЛИКОМ: слева до панели
   ставки, справа до края страницы, вниз до нижней строки — отступы между
   зонами задаёт грид, и добирать их полями внутри блока не нужно.

   Раньше подложка была ровно по размеру сетки и стояла по центру колонки, а
   под ней жила полоса инструментов. Получалась рамка неизвестного размера,
   висящая в воздухе: справа и снизу от неё оставался фон страницы, и край
   игры не совпадал ни с одним другим краем на экране. */
.mn-main { align-items: stretch; }
/* Панель при этом НЕ тянется: её содержимое имеет свою высоту, и резиновый
   низ выглядел бы дырой в форме. */
.mn-main .gm-side { align-self: start; }
.mn-main .gm-field { min-height: 0; }
.gm-strip { min-width: 0; }

/* ---- нижняя строка игры: инвентарь + рельс ----

   Общая для «Краша» и «Минного поля». Слева инвентарь сеткой, справа то,
   что относится к ставкам: у «Краша» — чужие ставки раунда и топ выплат, у
   «Минного поля» — свои прошлые раунды. Разное содержимое, одна раскладка.

   Обе колонки одной высоты (--gm-low-h) и прокручиваются ВНУТРИ себя.
   Высота задана здесь, а не компонентами: рядом их поставила раскладка,
   ей их и равнять. Отсюда же главное свойство строки — страница вниз не
   растёт, сколько бы вещей в инвентаре и ставок ни было, и до игрового
   поля всегда один экран, а не десять. */

.gm-low {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--gm-rail-w);
  gap: 14px; align-items: stretch;
}

.gm-inv {
  display: flex; flex-direction: column; min-width: 0;
  height: var(--gm-low-h);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 14px 10px;
  box-shadow: var(--edge);
  /* Тот же запрет, что у коробок рельса: внутри прокручиваемая сетка
     инвентаря, и на сотне предметов её высота так же утекала бы в
     документ. См. .gm-rail-box ниже. */
  contain: paint;
}
/* Прокручивается сетка, а не блок: шапка с фильтрами обязана остаться на
   месте — иначе поиск уезжает вверх ровно тогда, когда он нужен. */
.gm-inv .ss { flex: 1 1 auto; min-height: 0; }
.gm-inv .ss-lane { flex: 1 1 auto; min-height: 0; }

/* Подсветка на переход из «ДОБАВИТЬ СКИН»: без неё прыжок к инвентарю
   выглядит случайным скроллом. */
.gm-inv.ss-flash { animation: ssFlash .9s ease; }
@keyframes ssFlash {
  0%, 100% { box-shadow: var(--edge); border-color: var(--line); }
  30%      { box-shadow: var(--glow-mid); border-color: var(--or); }
}

/* В рельсе только ставки — свои или чужие. Ни магазина, ни настроек: они
   уводят с полосы ставки, а она здесь главная. */
.gm-rail {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0; height: var(--gm-low-h);
}
.gm-rail-box {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); overflow: clip; box-shadow: var(--edge);
  /* contain: paint — не украшение и не оптимизация. Внутри коробки лежит
     прокручиваемый список (ставки раунда, история), и его прокручиваемая
     высота ПРОСАЧИВАЕТСЯ в документ мимо overflow: clip: на сорока ставках
     страница вырастала с 1557 до 2465 пикселей, то есть под игрой
     появлялись девять сотен пустоты, по которым можно было листать.
     Проверено перебором: ни overflow: hidden на коробке, ни overflow:
     hidden на самом списке этого не лечат — лечит только запрет на вынос
     отрисовки за пределы коробки. */
  contain: paint;
}
/* Блоки рельса делят высоту поровну и не схлопываются ниже своей шапки:
   пустой раунд не должен съедать соседа, а длинный список — прятать его.
   Один блок в рельсе занимает его целиком — это тот же случай. */
.gm-rail > .gm-rail-box { flex: 1 1 0; min-height: 132px; }
.gm-rail .bb-list, .gm-rail .tw-list { overflow-y: auto; min-height: 0; }

/* overflow: clip, а не hidden. Внутри блока топ-10 закреплён (position:
   sticky), а hidden делает из предка прокручиваемый контейнер — и липкость
   молча перестаёт работать, потому что прокручивать этот контейнер некуда.
   clip обрезает по скруглению ровно так же, но контейнером прокрутки не
   становится, и топ липнет к окну, как и задумано. */
.gm-bets { padding: 0; overflow: clip; }

/* ============================================================ панель ставки */

.bp {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px;
}
.bp.locked .bp-box { opacity: .72; }

.bp-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 4px;
}
.bp-tab {
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--tx-3); padding: 8px 4px;
  font: 700 var(--fs-micro)/1 inherit; letter-spacing: .12em;
}
.bp-tab.on { background: var(--panel-2); color: var(--or-2); box-shadow: var(--shadow); }
.bp-tab:disabled { opacity: .5; cursor: not-allowed; }

.bp-box {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 11px 12px;
}
.bp-box h4 {
  margin: 0 0 9px; font-size: 10px; font-weight: 800;
  letter-spacing: .18em; color: var(--tx-3); text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bp-count {
  background: var(--or-soft); color: var(--or-2); border-radius: 20px;
  padding: 1px 7px; font-size: 10px; letter-spacing: 0;
}

.bp-bal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bp-bal-v { font-size: 20px; font-weight: 900; color: var(--or-2); }
.bp-topup {
  background: rgba(53, 208, 127, .12); border: 1px solid rgba(53, 208, 127, .32);
  color: var(--green); border-radius: 7px; padding: 6px 11px; cursor: pointer;
  font: 700 var(--fs-cap)/1 inherit;
}
.bp-topup:hover { background: rgba(53, 208, 127, .2); }

/* Номиналы стоят ПОД полем суммы: сначала точное число, потом готовые
   ступени к нему — так же, как у автовывода ниже. */
.bp-chips, .bp-mines-quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
/* Наборов номиналов два: долларовый из четырёх кнопок и рублёвый из пяти.
   auto-fit раскладывает оба, не оставляя пятую кнопку одну в строке. */
.bp-chips { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); }
.bp-chips { margin-top: 8px; }
.bp-mines-quick { grid-template-columns: repeat(5, 1fr); margin-top: 8px; }
.bp-chip {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--tx-2);
  border-radius: 7px; padding: 7px 2px; cursor: pointer;
  font: 700 var(--fs-cap)/1 inherit; font-variant-numeric: tabular-nums;
}
.bp-chip:hover:not(:disabled) { border-color: var(--or); color: var(--or-2); }
.bp-chip.on { background: var(--or); border-color: var(--or); color: #180a00; }
.bp-chip:disabled { opacity: .35; cursor: not-allowed; }

.bp-amount { display: grid; grid-template-columns: 38px 1fr 38px; gap: 6px; }
.bp-step {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--tx);
  border-radius: 7px; cursor: pointer; font-size: 17px; line-height: 1;
}
.bp-step:hover:not(:disabled) { border-color: var(--or); color: var(--or-2); }
.bp-step:disabled { opacity: .35; cursor: not-allowed; }
.bp-amount input {
  text-align: center; font-weight: 800; font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}
/* Стрелки числового поля тут лишние: рядом стоят свои, крупные и понятные. */
.bp-amount input::-webkit-outer-spin-button,
.bp-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bp-amount input { -moz-appearance: textfield; }

/* ---- ползунок суммы ----

   Ходит от нуля: в совмещённом режиме ноль означает «деньгами не ставлю,
   только предметами». Своего состояния у ползунка нет — он пишет в то же
   поле суммы и от него же красится, поэтому разойтись с ним не может.

   Дорожку красим градиентом по --fill, а не двумя элементами: у range
   ::-webkit-slider-runnable-track и ::-moz-range-track не пересекаются в
   одном правиле, и общий фон самого input — единственное, что видно в обоих
   движках одинаково. */
.bp-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin-top: 10px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background:
    linear-gradient(90deg, var(--or) 0 var(--fill, 0%), var(--line-2) var(--fill, 0%) 100%);
}
.bp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(180deg, #ffb865, var(--or));
  border: 2px solid #1a1206; box-shadow: 0 2px 8px rgba(255, 122, 24, .5);
}
.bp-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(180deg, #ffb865, var(--or));
  border: 2px solid #1a1206; box-shadow: 0 2px 8px rgba(255, 122, 24, .5);
}
.bp-range:disabled { opacity: .4; cursor: not-allowed; }

.bp-limits, .bp-note {
  margin-top: 7px; font-size: var(--fs-micro); color: var(--tx-3); line-height: 1.4;
}
.bp-note.bad { color: var(--red); }
.bp-main-note { margin: -4px 2px 0; text-align: center; }

/* ---- шапка панели ---- */

.bp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 2px 2px 0;
}
.bp-head h3 { font-size: var(--fs-label); letter-spacing: .18em; color: var(--tx); }

.bp-tab-ic {
  display: grid; place-items: center; width: 15px; height: 15px;
  font-style: normal; font-size: var(--fs-label); font-weight: 800;
}
.bp-tab { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ---- выбранные вещи ----

   Строками, а не плитками: в плитку помещается только картинка, а
   «AK-47 | Fire Serpent, Field-Tested» на ней не читается вовсе — и две
   похожие винтовки в ставке становятся неразличимы.

   Пустой блок сжат до одной пунктирной строки: раздутая пустота над полем
   суммы выглядит поломкой, а не приглашением. */
.bp-picked.rows h4 { align-items: baseline; }
.bp-picked-sum { font-size: var(--fs-label); font-weight: 900; color: var(--or-2); letter-spacing: 0; }
.bp-picked.rows.empty h4 > span { color: var(--tx-3); }
.bp-picked.rows .bp-picked-list { max-height: 268px; }

/* Строка «ДОБАВИТЬ СКИН» — она же пустое состояние. */
.bp-padd {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 8px; cursor: pointer;
  border: 1px dashed var(--line-2); border-radius: 8px;
  background: rgba(255, 255, 255, .015); color: var(--tx-3);
  font: 800 var(--fs-micro)/1 inherit; letter-spacing: .1em;
  transition: border-color .15s, color .15s, background .15s;
}
.bp-padd:hover:not(:disabled) {
  border-color: var(--or); color: var(--or-2); background: var(--or-soft);
}
.bp-padd:disabled { opacity: .45; cursor: not-allowed; }
.bp-padd-x { font-size: var(--fs-body); line-height: 1; font-weight: 400; }

/* ---- полоса автовывода ----

   Значение крупно и с кнопками по краям, ступени отдельной строкой. Одной
   полосой, как было, поле сжималось до трёх символов на узкой панели: это
   главное число блока, и метить в него пальцем игрок обязан без
   прицеливания.

   Ступени пишут в то же поле, а не держат своё состояние — иначе поле и
   кнопки однажды разойдутся, и игрок заберёт не там, где видел. */

.bp-auto-unit { font-size: 10px; color: var(--tx-3); letter-spacing: .1em; }

.bp-auto-bar {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px;
  height: 44px; padding: 3px;
  background: rgba(16, 11, 2, .8); border: 1px solid var(--line);
  border-radius: 11px;
}
.bp-auto-nudge {
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--panel-3); color: var(--tx);
  font: 400 19px/1 inherit;
  transition: background .13s, color .13s;
}
.bp-auto-nudge:hover:not(:disabled) { background: var(--line-2); color: var(--or-2); }
.bp-auto-nudge:disabled { opacity: .4; cursor: not-allowed; }
.bp-auto-in { display: flex; align-items: center; justify-content: center; min-width: 0; }
.bp-auto-in input {
  width: 100%; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--tx); font: 800 17px/1 inherit; text-align: center;
  font-variant-numeric: tabular-nums; outline: none;
}
.bp-auto-in input::placeholder {
  color: var(--tx-3); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .12em;
}
.bp-auto-in input::-webkit-outer-spin-button,
.bp-auto-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bp-auto-in input[type=number] { -moz-appearance: textfield; }

.bp-auto-steps {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px; margin-top: 8px;
}
.bp-auto-step {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; padding: 8px 2px;
  border: 1px solid var(--line-2); border-radius: 7px; cursor: pointer;
  background: var(--panel-2); color: var(--tx-2);
  font: 700 var(--fs-micro)/1 inherit; font-variant-numeric: tabular-nums;
  transition: background .13s, color .13s, border-color .13s;
}
.bp-auto-step:hover:not(:disabled) { border-color: var(--or); color: var(--tx); }
.bp-auto-step.on {
  background: var(--or-soft); border-color: var(--or); color: var(--or-2);
}
.bp-auto-step:disabled { opacity: .45; cursor: default; }
/* «Без лимита» — не ступень, а её отмена: значок вместо числа. */
.bp-auto-step.off { font-size: var(--fs-body); font-weight: 400; }

/* ---- границы ставки под кнопкой ---- */

.bp-limits-low {
  margin: 0; text-align: center; letter-spacing: .04em;
  text-transform: uppercase; font-size: 10px;
}

.bp-main {
  width: 100%; padding: 15px 12px; border: 0; border-radius: var(--r-s);
  cursor: pointer; font: 900 var(--fs-ui)/1 inherit; letter-spacing: .1em;
  color: #180a00; background: linear-gradient(135deg, var(--or-2), var(--or-3));
  box-shadow: 0 8px 26px rgba(255, 122, 24, .28);
  transition: filter .15s, transform .08s;
}
.bp-main:hover:not(:disabled) { filter: brightness(1.08); }
.bp-main:active:not(:disabled) { transform: translateY(1px); }
.bp-main:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.bp-main.cash {
  background: linear-gradient(135deg, #58e39b, #17a862); color: #04180d;
  box-shadow: 0 8px 26px rgba(53, 208, 127, .3);
}
.bp-main.cancel {
  background: var(--panel-2); color: var(--tx-2);
  border: 1px solid var(--line-2); box-shadow: none;
}
.bp-main.wait, .bp-main.done {
  background: var(--panel-2); color: var(--tx-3);
  border: 1px solid var(--line-2); box-shadow: none;
}
/* Гостю кнопка не «выключена», а переназначена: она ведёт ко входу, и
   выглядеть должна живой — серую с надписью «Авторизуйтесь» не нажимают. */
.bp-main.auth {
  background: linear-gradient(135deg, #3a3a48, #22222b);
  color: var(--or-2); border: 1px solid rgba(255, 122, 24, .45);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.bp-main.auth:hover { filter: none; border-color: var(--or); color: #fff; }

.bp-picked-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.bp-pick {
  display: grid; grid-template-columns: 34px 1fr auto 22px;
  align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--rc, var(--line-2));
  border-radius: 7px; padding: 5px 7px;
}
.bp-pick-art { display: block; width: 34px; height: 26px; overflow: hidden; line-height: 0; }
.bp-pick-art img, .bp-pick-art svg { width: 100%; height: 100%; object-fit: contain; }
.bp-pick-txt { min-width: 0; display: flex; flex-direction: column; }
.bp-pick-txt b { font-size: var(--fs-cap); font-weight: 700; }
.bp-pick-txt small { font-size: 10px; color: var(--tx-3); }
.bp-pick-txt b, .bp-pick-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-pick-p { font-size: var(--fs-cap); font-weight: 800; color: var(--or-2); }
.bp-pick-x {
  background: none; border: 0; color: var(--tx-3); cursor: pointer;
  font-size: var(--fs-cap); line-height: 1; padding: 3px;
}
.bp-pick-x:hover { color: var(--red); }
.bp-empty { font-size: var(--fs-cap); color: var(--tx-3); padding: 6px 2px; }

.bp-total { display: flex; align-items: center; justify-content: space-between; }
.bp-total h4 { margin: 0; }
.bp-total-v { font-size: 19px; font-weight: 900; color: var(--or-2); }

/* ============================================================ полоса скинов */

.ss { display: flex; flex-direction: column; gap: 10px; }
.ss-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.ss-cats { display: flex; gap: 5px; flex-wrap: wrap; }
.ss-cat {
  background: var(--panel); border: 1px solid var(--line); color: var(--tx-3);
  border-radius: 20px; padding: 6px 12px; cursor: pointer;
  font: 700 var(--fs-micro)/1 inherit; letter-spacing: .08em;
}
.ss-cat:hover { color: var(--tx); border-color: var(--line-2); }
.ss-cat.on { background: var(--or-soft); border-color: var(--or); color: var(--or-2); }

.ss-tools-r { display: flex; align-items: center; gap: 7px; }
.ss-search { width: 190px; padding: 7px 11px; font-size: var(--fs-label); }
.ss-sort { padding: 7px 9px; font-size: var(--fs-cap); }
.ss-icon {
  width: 34px; height: 34px; flex: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--tx-2);
  border-radius: 8px; cursor: pointer; font-size: var(--fs-body); line-height: 1;
}
.ss-icon:hover { border-color: var(--or); color: var(--or-2); }
.ss-icon.spin { animation: ssSpin .8s linear infinite; }
@keyframes ssSpin { to { transform: rotate(360deg); } }

.ss-lane { position: relative; }
.ss-track {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; padding: 2px 2px 12px;
}
/* Firefox дальше цвета и толщины ручку не пускает — берём что дают. Правила
   стоят под @supports, а не рядом с webkit-ными, потому что Chrome с 121-й
   версии при заданном scrollbar-width ИГНОРИРУЕТ ::-webkit-scrollbar
   целиком: два способа в одном правиле — это молча отменённый первый. */
@supports not selector(::-webkit-scrollbar) {
  .ss-track { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
}
/* Свой ползунок вместо системного: он тонкий, лежит В отступе ленты, а не
   отъедает от неё высоту, и подсвечивается оранжевым под курсором — как
   всё остальное, за что можно тянуть. Правила локальные, а не глобальные
   из шапки файла: там полоса в 10 пикселей на вертикальные списки, здесь
   она горизонтальная и должна быть заметно тоньше карточек. */
.ss-track::-webkit-scrollbar { height: 8px; }
.ss-track::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .04); border-radius: 99px;
}
.ss-track::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
.ss-track::-webkit-scrollbar-thumb:hover {
  background: var(--or); background-clip: content-box;
}
.ss-track::-webkit-scrollbar-thumb:active {
  background: var(--or-2); background-clip: content-box;
}
.ss-track:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 8px; }

.ss-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 32px; height: 56px; border-radius: 9px;
  background: rgba(12, 12, 16, .9); border: 1px solid var(--line-2);
  color: var(--tx); cursor: pointer; font-size: 19px; line-height: 1;
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.ss.scrollable .ss-arrow { opacity: 1; pointer-events: auto; }
.ss-arrow:disabled { opacity: .25 !important; pointer-events: none; }
.ss-arrow.l { left: -6px; }
.ss-arrow.r { right: -6px; }
.ss-arrow:hover:not(:disabled) { border-color: var(--or); color: var(--or-2); }

.ss-card {
  position: relative; flex: none;
  width: 148px; padding: 9px;
  background: var(--panel); border: 1px solid var(--line);
  border-top: 2px solid var(--rc, var(--line-2));
  border-radius: 10px; cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.ss[data-size="sm"] .ss-card { width: 108px; padding: 7px; }
.ss-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ss-card.on {
  border-color: var(--or);
  box-shadow: 0 0 0 1px var(--or), 0 10px 26px rgba(255, 122, 24, .22);
}
.ss-tick {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--or); color: #180a00; font-size: var(--fs-micro); font-weight: 900;
  transform: scale(0); transition: transform .14s;
}
.ss-card.on .ss-tick { transform: scale(1); }
.ss-st {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: 8px; font-weight: 900; color: #ff9330; letter-spacing: .06em;
}
.ss-art { height: 76px; display: grid; place-items: center; margin-bottom: 6px; }
.ss[data-size="sm"] .ss-art { height: 56px; }
.ss-art img, .ss-art svg { max-width: 100%; max-height: 100%; object-fit: contain; }
.ss-skel {
  width: 100%; height: 100%; border-radius: 7px;
  background: linear-gradient(100deg, var(--panel-2) 30%, var(--panel-3) 50%, var(--panel-2) 70%);
  background-size: 220% 100%; animation: ssSkel 1.2s ease-in-out infinite;
}
@keyframes ssSkel { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.ss-name { font-size: var(--fs-micro); font-weight: 700; }
.ss-sub { font-size: 10px; color: var(--tx-3); }
.ss-name, .ss-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: 6px;
}
.ss-wear { font-size: 10px; color: var(--tx-3); letter-spacing: .06em; }
.ss-price { font-size: var(--fs-cap); font-weight: 800; color: var(--or-2); }
.ss-empty { padding: 30px 12px; color: var(--tx-3); font-size: var(--fs-label); }
.ss-foot { font-size: var(--fs-micro); color: var(--tx-3); }

/* ---- инвентарь сеткой ----

   Вторая форма того же компонента (opt.grid). Разметка та же, меняется
   только раскладка дорожки: вместо одной строки с горизонтальной прокруткой
   — авто-сетка с вертикальной, как в апгрейдере.

   Зачем. Полоса хороша под игровым полем, где на счету каждый пиксель
   высоты. Но в блоке высотой в пол-экрана она показывает шесть вещей из
   двухсот, и нужную приходится искать листанием вслепую; сетка в той же
   высоте показывает два десятка.

   Высоту компонент себе НЕ задаёт — её задаёт контейнер (.gm-inv), потому
   что рядом стоят другие блоки, и ровнять их должен тот, кто их рядом и
   поставил. */

.ss-as-grid .ss-track {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  align-content: start; gap: 10px;
  overflow-x: hidden; overflow-y: auto;
  height: 100%; padding: 2px 6px 2px 2px;
}
.ss-as-grid[data-size="sm"] .ss-track {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
}
/* Карточка занимает ячейку целиком: фиксированная ширина из полосы оставила
   бы справа рваный край. */
.ss-as-grid .ss-card,
.ss-as-grid[data-size="sm"] .ss-card { width: auto; }
/* Ползунок вертикальный и обычной толщины — горизонтальные правила полосы
   тут не подходят. */
.ss-as-grid .ss-track::-webkit-scrollbar { width: 8px; height: 8px; }
/* Пустое состояние занимает всю сетку, а не первую ячейку. */
.ss-as-grid .ss-empty { grid-column: 1 / -1; }
/* Подпись «N из M» прижата к низу блока, чтобы не прыгать вместе с сеткой. */
.ss-as-grid .ss-foot { margin-top: auto; padding-top: 6px; }

/* ============================================================ ставки игроков */

.bb { display: flex; flex-direction: column; }
.bb-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.bb-head h3 { font-size: var(--fs-cap); letter-spacing: .16em; color: var(--or-2); }
.bb-head-2 { border-top: 1px solid var(--line); }
.bb-head-2 h3 { color: var(--tx-3); }
.bb-sum { font-size: var(--fs-cap); color: var(--tx-3); }
.bb-sum b { color: var(--tx); }

.bb-cols, .bb-row {
  display: grid; grid-template-columns: 34px minmax(0, 1.6fr) 1fr 1fr 1fr;
  align-items: center; gap: 8px; padding: 8px 16px;
}
.bb-cols {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 700; border-bottom: 1px solid var(--line);
}
.bb-cols span:nth-child(n+3), .bb-row span:nth-child(n+3) { text-align: right; }

/* Топ закреплён: он отвечает на вопрос «кто главный» независимо от того,
   куда игрок пролистал страницы ниже. */
.bb-top { position: sticky; top: var(--tb-h); z-index: 2; background: var(--panel); }
.bb-rest { min-height: 40px; }

.bb-row {
  border-bottom: 1px solid rgba(38, 38, 47, .5);
  font-size: var(--fs-label); transition: background .2s, opacity .2s;
}
.bb-row.in { animation: bbIn .3s ease; }
@keyframes bbIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bb-row.won { background: linear-gradient(90deg, rgba(53, 208, 127, .12), transparent 65%); }
.bb-row.won .bb-pay, .bb-row.won .bb-x { color: var(--green); }
.bb-row.lost { opacity: .45; }
.bb-row.me {
  background: linear-gradient(90deg, rgba(255, 122, 24, .16), transparent 70%);
  box-shadow: inset 2px 0 0 var(--or);
}
.bb-row.pinned { position: sticky; bottom: 0; z-index: 1; background: var(--panel-2); }

.bb-place {
  font-size: var(--fs-micro); font-weight: 800; color: var(--tx-3);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
}
.bb-row.gold   .bb-place { background: linear-gradient(135deg, #ffd970, #d99a12); color: #241800; }
.bb-row.silver .bb-place { background: linear-gradient(135deg, #e6e9f0, #9aa2b1); color: #1b1d22; }
.bb-row.bronze .bb-place { background: linear-gradient(135deg, #e2a271, #a2632f); color: #22140a; }

.bb-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bb-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bb-ava {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--panel-3);
}
.bb-ava.faux {
  display: grid; place-items: center; font-size: var(--fs-micro);
  font-weight: 800; color: var(--tx-3);
}
.bb-tag {
  font-size: 9px; font-style: normal; letter-spacing: .08em;
  color: var(--tx-3); border: 1px solid var(--line-2);
  border-radius: 20px; padding: 1px 6px; flex: none;
}
.bb-tag.me { color: var(--or-2); border-color: rgba(255, 122, 24, .4); }
.bb-empty { padding: 22px 16px; color: var(--tx-3); font-size: var(--fs-cap); }

.bb-pager {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 16px;
}
.bb-pager:empty { display: none; }
.bb-pager button {
  min-width: 30px; height: 30px; padding: 0 8px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--tx-2);
  border-radius: 7px; cursor: pointer; font: 700 var(--fs-cap)/1 inherit;
}
.bb-pager button:hover:not(:disabled) { border-color: var(--or); color: var(--or-2); }
.bb-pager button.on { background: var(--or); border-color: var(--or); color: #180a00; }
.bb-pager button:disabled { opacity: .3; cursor: not-allowed; }

/* ---- ставки раунда в узком рельсе ----

   Одна лента вместо «топ-10 + страницы». Две секции с пагинацией нужны там,
   где блок лежит во всю ширину и в нём помещается таблица из пяти колонок; в
   рельсе шириной в триста пикселей от такой таблицы остаются обрубки, а
   страницы под ней листать некому — раунд живёт восемь секунд. */

.bb-slim { min-height: 0; }
.bb-slim .bb-head { padding: 12px 14px 8px; border-bottom: 0; }
.bb-slim .bb-head h3 { font-size: var(--fs-micro); letter-spacing: .16em; color: var(--or-2); }

.bb-tally {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 0 14px 10px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-cap); color: var(--tx-3);
}
.bb-tally-n b { color: var(--or-2); font-weight: 800; font-size: var(--fs-label); }
.bb-tally-s { color: var(--tx); font-weight: 800; font-size: var(--fs-label); }

.bb-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bb-list::-webkit-scrollbar { width: 6px; }
.bb-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }

/* Место, сумма и выигрыш из широкой таблицы здесь не помещаются и не нужны:
   в рельсе отвечают на вопрос «кто в раунде и на сколько», а исход виден по
   цвету строки и множителю. */
.bb-slim .bb-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px; padding: 8px 14px; font-size: var(--fs-cap);
}
.bb-slim .bb-place, .bb-slim .bb-pay { display: none; }
.bb-slim .bb-x { font-size: var(--fs-cap); color: var(--tx-3); }
.bb-slim .bb-sum-c { font-weight: 800; }
.bb-slim .bb-empty { padding: 26px 14px; text-align: center; }

/* ---- топ выплат ----

   Read-only витрина по журналу ставок: строка появляется в ней только после
   успешного забора, то есть когда деньги уже выплачены. Пусто — значит на
   сайте ещё никто не забрал ни одного раунда, так и написано. */

#crTop .bb-head { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
#crTop .bb-head h3 { font-size: var(--fs-micro); letter-spacing: .16em; color: var(--or-2); }
#crTop .bb-empty { padding: 18px 14px; font-size: var(--fs-cap); line-height: 1.5; }

.tw-list { display: flex; flex-direction: column; }
.tw-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px; width: 100%; padding: 8px 14px;
  border: 0; border-top: 1px solid rgba(255, 255, 255, .04);
  background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; transition: background .15s;
}
.tw-row:first-child { border-top: 0; }
.tw-row:hover { background: rgba(255, 255, 255, .035); }
.tw-row.me { box-shadow: inset 2px 0 0 var(--or); }
.tw-row .bb-ava { width: 24px; height: 24px; }
.tw-who {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-cap); color: var(--tx-2);
}
.tw-x { font-size: var(--fs-cap); font-weight: 800; }
.tw-x.bust, .tw-x.low { color: var(--tx-3); }
.tw-x.mid  { color: #ffd27a; }
.tw-x.high { color: var(--or-2); }
.tw-x.top  { color: var(--or); }
.tw-pay { font-size: var(--fs-label); font-weight: 800; color: var(--green); }

/* ---- инвентарь под игрой ---- */

.ss-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 2px;
}
.ss-head h3 { font-size: var(--fs-cap); letter-spacing: .16em; color: var(--or-2); }
.ss-worth { font-size: var(--fs-body); font-weight: 900; color: var(--tx); }

/* ============================================================ выбор выигрыша */

.wp { display: flex; flex-direction: column; gap: 13px; }
.wp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wp-title { display: flex; flex-direction: column; gap: 2px; }
.wp-kicker {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 700;
}
.wp-amount {
  font-size: 34px; font-weight: 900; color: var(--or-2);
  text-shadow: 0 0 30px var(--or-glow); line-height: 1.05;
}
/* Часы срока выбора. Стоят в шапке рядом с суммой и подписаны тем, что
   произойдёт по истечении: голый обратный отсчёт над выигрышем читается как
   «сейчас отнимут», хотя деньги уже на балансе и отнимать нечего. */
.wp-timer {
  margin-left: auto; display: flex; align-items: baseline; gap: 8px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: var(--fs-micro); color: var(--tx-3); line-height: 1.2;
}
.wp-timer b { font-size: var(--fs-body); color: var(--tx); font-variant-numeric: tabular-nums; }
.wp-timer.soon { border-color: rgba(255, 92, 52, .5); background: rgba(255, 92, 52, .10); }
.wp-timer.soon b { color: #ff8f9a; }
/* Монета и число суммы — одно целое: в тесной шапке монета уезжала строкой выше. */
.wp-amount { white-space: nowrap; }
/* Телефон: сумма, часы и «Закрыть» в одну строку не влезают (одной строкой
   шапка помещается с 640 px) — часы сжимались в пилюлю на четыре строки.
   Сумма и «Закрыть» остаются наверху, часы с подписью — строкой под ними
   во всю ширину (владелец, 2026-09-30). */
@media (max-width: 680px) {
  .wp-head { flex-wrap: wrap; row-gap: 10px; }
  .wp-timer { order: 3; flex: 1 1 100%; margin-left: 0; border-radius: 12px; }
}

.wp-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wp-cats { display: flex; gap: 5px; flex-wrap: wrap; }
.wp-cat {
  background: var(--panel); border: 1px solid var(--line); color: var(--tx-3);
  border-radius: 20px; padding: 5px 11px; cursor: pointer;
  font: 700 10px/1 inherit; letter-spacing: .08em;
}
.wp-cat.on { background: var(--or-soft); border-color: var(--or); color: var(--or-2); }
.wp-tools-r { display: flex; gap: 7px; }
.wp-search { width: 180px; padding: 7px 11px; font-size: var(--fs-label); }
.wp-sort { padding: 7px 9px; font-size: var(--fs-cap); }

.wp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 9px; max-height: 46vh; overflow-y: auto; padding: 2px;
}
.wp-skel {
  height: 168px; border-radius: 10px;
  background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%);
  background-size: 220% 100%; animation: ssSkel 1.2s ease-in-out infinite;
}
/* Слишком дорогое не прячем, а гасим: спрятанный предмет читается как
   «его нет в каталоге», и игрок ищет его снова и снова. */
.wp-grid .item.wp-over { opacity: .35; cursor: not-allowed; filter: grayscale(.5); }
.wp-grid .item.wp-over .item-p { background: var(--red); color: #fff; }
.wp-empty { grid-column: 1 / -1; padding: 32px 12px; text-align: center; color: var(--tx-3); }

.wp-bill {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: var(--r-s);
  background: var(--bg-2); border: 1px solid var(--line); font-size: var(--fs-label);
}
.wp-bill b { color: var(--or-2); }
.wp-bill-left b { color: var(--green); }
.wp-bill-sep { color: var(--tx-3); }
.wp-bill-dim { color: var(--tx-3); }
.wp-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 9px; }
.wp-note { font-size: var(--fs-micro); color: var(--tx-3); line-height: 1.45; }

/* ============================================================ инструменты поля

   Строка под сеткой «Минного поля»: правила, проверка раунда, звук, лимиты.

   Здесь же стояла правая колонка с крупным множителем, суммой «заберёшь
   сейчас» и лесенкой шагов — она убрана целиком. Множитель и сумма слово в
   слово написаны на кнопке ставки («ЗАБРАТЬ ×N») и в подписи под ней («в
   игре $X · заберёшь $Y»), а лесенка — это подписи слева от строк самого
   поля, на той же высоте, что и шаги, которые они оценивают. Копий одного
   числа на экране было три. */
.mn-read-tools {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.mn-read-tools .mn-sound { display: flex; align-items: center; gap: 6px; }
.mn-read-tools .mn-sound input[type=range] { width: 74px; flex: none; }
/* Лимиты дописываются в ту же строку и переносятся на свою, когда кнопки
   заняли всю ширину: они пояснение к раунду, а не отдельный блок. */
.mn-read-tools .mn-sub { margin: 0 0 0 auto; }

/* ============================================================ каркас */

.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.side {
  background: linear-gradient(180deg, #0c0c10, #0a0a0d);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 18px;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--or-2), var(--or-3));
  display: grid; place-items: center;
  font-weight: 900; color: #120800; font-size: 18px;
  box-shadow: 0 0 20px var(--or-glow);
}
.brand-name { font-weight: 900; font-size: var(--fs-body); letter-spacing: .12em; line-height: 1.15; }
.brand-name small { display: block; color: var(--tx-3); font-size: 9px; letter-spacing: .22em; font-weight: 700; }

.nav-btn {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-s);
  color: var(--tx-2); cursor: pointer; border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-ui);
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
}
.nav-btn:hover { background: var(--panel); color: var(--tx); }
.nav-btn.on {
  background: linear-gradient(90deg, var(--or-soft), transparent);
  color: var(--or-2); border-color: rgba(255, 122, 24, .3);
}
.nav-btn .ic { width: 18px; text-align: center; font-size: var(--fs-body); }
.nav-sep { height: 1px; background: var(--line); margin: 10px 6px; }
.nav-note { margin-top: auto; padding: 10px; color: var(--tx-3); font-size: var(--fs-micro); line-height: 1.45; }

.main { display: flex; flex-direction: column; min-width: 0; }

/* ============================================================ шапка */

.top {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: rgba(10, 10, 13, .82); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 40;
}
.page-title { font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.top-spacer { flex: 1; }

.stat-chip {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 13px; border-radius: var(--r-s);
  background: var(--panel); border: 1px solid var(--line);
  min-width: 96px;
}
.stat-chip .k { font-size: 10px; letter-spacing: .14em; color: var(--tx-3); text-transform: uppercase; font-weight: 700; }
.stat-chip .v { font-size: var(--fs-body); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-chip.bal .v { color: var(--or-2); }

/* overflow-x: clip, а не hidden: он не делает из контента прокручиваемый
   блок и не ломает position: sticky внутри. Нужен из-за декоративных
   свечений апгрейдера — они намеренно вылезают за края блока и на узком
   окне добавляли странице сорок пикселей горизонтальной прокрутки. */
.content { padding: 20px; flex: 1; overflow-x: clip; }
.page { display: none; animation: fade .22s ease; }
.page.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================ примитивы */

/* ---- кнопки ----

   Три материала, а не восемь оттенков: тёмный металл по умолчанию,
   оранжевая энергия у главного действия, прозрачная у второстепенного.
   Всё остальное — размеры.

   Отклик на наведение — яркость и свечение, а не размер: по DESIGN-SYSTEM
   кнопка отвечает светом, панель — рамкой, и прыгать в ответ на курсор не
   должно ничего. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-s); cursor: pointer;
  background: var(--metal-2); color: var(--tx);
  border: 1px solid var(--line-2); font-weight: 700; font-size: var(--fs-label);
  box-shadow: var(--edge);
  transition: filter var(--t-micro), transform 80ms,
              border-color var(--t-micro), box-shadow var(--t-micro);
  user-select: none; white-space: nowrap;
}
.btn:hover { filter: brightness(1.18); border-color: rgba(255, 255, 255, .22); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.off { opacity: .42; pointer-events: none; }

/* Главное действие. Оранжевый плотный, тот же, что снят пипеткой с макета
   (#e56b09), а не светлый: светлый читается подсветкой, плотный — краской
   по металлу. Внутренний блик сверху добавляет объём без единой картинки. */
.btn.primary {
  background: linear-gradient(180deg, #f0770a, #d95f04);
  color: #150a01; border-color: transparent;
  box-shadow: var(--glow-soft), inset 0 1px 0 rgba(255, 255, 255, .26);
}
.btn.primary:hover { filter: brightness(1.08); box-shadow: var(--glow-mid); }
/* Заблокированное главное действие. Общий приём «opacity: .42» на оранжевой
   заливке давал грязно-коричневое пятно — на чёрной странице это была самая
   мутная вещь в кадре. Гасим не прозрачностью, а материалом: тёмное стекло,
   приглушённая оранжевая кромка и такая же подпись. Кнопка сразу читается
   выключенной, но остаётся главным действием, а не грязью. */
.btn.primary[disabled], .btn.primary.off {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .22));
  color: color-mix(in oklab, var(--or-deep) 82%, var(--tx-2));
  border-color: color-mix(in oklab, var(--or-deep) 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Подтверждающее действие — оранжевая обводка. Раньше здесь был зелёный
   (#35d07f), и он стоял на двух десятках кнопок в кабинете: у ENIGGMA
   зелёного нет вовсе, а «сохранить» и «вывести» — это тоже энергия. */
.btn.ok {
  background: rgba(252, 108, 5, .07);
  border-color: color-mix(in srgb, var(--or-deep) 62%, transparent);
  color: var(--or-deep);
}
.btn.ok:hover { color: var(--or-2); box-shadow: var(--glow-soft); }

/* Красный остаётся: опасное действие обязано читаться опасным, и это
   единственный цвет, который в этой роли понимают без объяснений. */
.btn.danger { border-color: rgba(255, 77, 94, .45); color: #ff8f9a; background: rgba(255, 77, 94, .06); }
.btn.ghost { background: transparent; box-shadow: none; }

/* Скошенная форма из ui_reference_03 — для ставки и других «рычагов». */
.btn.cut {
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding-inline: 26px;
}
.btn.sm { padding: 6px 11px; font-size: var(--fs-cap); }
.btn.big { padding: 14px 28px; font-size: var(--fs-body); letter-spacing: .06em; text-transform: uppercase; }
.btn.wide { width: 100%; }

.card {
  background: var(--metal-a); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px;
  box-shadow: var(--edge);
}
.card h3 {
  font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3); margin-bottom: 12px; font-weight: 800;
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.muted { color: var(--tx-2); }
.dim { color: var(--tx-3); }
.or { color: var(--or-2); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: 'Cascadia Code', Consolas, 'Courier New', monospace; }

/* ---------------------------------------------------- монета и цены

   Монета стоит вместо знака валюты во ВСЕХ ценах и в обеих валютах: не
   «$1 000,00» и не «84 150 ₽», а монета и число. Знак валюты как символ на
   сайте больше не встречается — код валюты пишется словом там, где сумму
   можно спутать: рядом с балансом, на переключателе и у полей ввода.

   Размер в em, а не в пикселях. Цены набраны кеглями от 11 до 28: значок в
   фиксированных пикселях на мелком тексте выглядит наклейкой, а на крупном
   тонет. В em он растёт вместе с числом и остаётся с ним одного роста.

   Выравнивание. vertical-align считается от базовой линии, а цифры стоят на
   ней и тянутся вверх примерно на 0.7em — середина числа, значит, лежит на
   0.35em выше базовой. Опускаем коробку монеты на 0.15em, и её центр
   совпадает с серединой цифр. С align: baseline монета проваливалась бы
   вниз на четверть своего роста.

   Высота строки от монеты не растёт: коробка ровно в кегль, а выступающие
   вниз 0.15em укладываются в место, которое строка и так держит под
   хвосты «р» и «у». */
.coin {
  display: inline-block; width: 1em; height: 1em;
  margin-right: .26em; vertical-align: -.15em;
  background: no-repeat center / contain url("/assets/ui/coin.png");
  /* @2x отдельной строкой: браузер без image-set() возьмёт правило выше и
     покажет обычную картинку, а не пустоту. */
  background-image: image-set(url("/assets/ui/coin.png") 1x,
                              url("/assets/ui/coin@2x.png") 2x);
}

/* Название валюты для скринридера: «1 000 рублей» вместо «1 000». Символ у
   доллара и рубля на витрине один и тот же, поэтому число без валюты
   неоднозначно — но занимать этим место на экране незачем. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}

input[type=text], input[type=number], input[type=search], select {
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--tx);
  padding: 9px 11px; border-radius: var(--r-s); font: inherit; outline: none;
  transition: border-color .15s;
}
input:focus, select:focus { border-color: var(--or); }
label.fld { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-cap); color: var(--tx-2); }

input[type=range] {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px;
  background: var(--panel-3); outline: none; width: 100%;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--or-2), var(--or-3));
  cursor: pointer; box-shadow: 0 0 12px var(--or-glow); border: 2px solid #1a1a20;
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #1a1a20;
  background: var(--or); cursor: pointer;
}

.switch { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: var(--fs-label); }
.switch input { display: none; }
.switch .track {
  width: 40px; height: 22px; border-radius: 12px; background: var(--panel-3);
  border: 1px solid var(--line-2); position: relative; transition: background .18s;
  flex: none;
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--tx-3); transition: transform .18s, background .18s;
}
.switch input:checked + .track { background: var(--or-soft); border-color: var(--or); }
.switch input:checked + .track::after { transform: translateX(18px); background: var(--or-2); }

.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 3px; gap: 3px; }
.seg button {
  background: transparent; border: 0; color: var(--tx-2); padding: 6px 13px;
  border-radius: 6px; cursor: pointer; font: 700 var(--fs-cap)/1 inherit; transition: .15s;
}
.seg button.on { background: var(--or); color: #180a00; }

/* Капсулы сортировки кейсов — отдельная форма от обычного .seg: рамка на
   каждой кнопке, значок слева, активная в тёмно-оранжевой обводке. */
.quick-filter .seg {
  background: none; border: 0; padding: 0; gap: 8px; flex-wrap: wrap;
}
.quick-filter .seg button {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 18px; border-radius: var(--r-s);
  background: rgba(5, 6, 8, .55); border: 1px solid var(--line);
  color: var(--tx-2); font: 700 var(--fs-label)/1 inherit;
  transition: color var(--t-micro), border-color var(--t-micro), background var(--t-micro);
}
.quick-filter .seg button svg { width: 16px; height: 16px; opacity: .75; }
.quick-filter .seg button:hover { color: var(--tx); border-color: var(--line-2); }
.quick-filter .seg button.on {
  background: rgba(252, 108, 5, .07);
  border-color: color-mix(in srgb, var(--or-deep) 70%, transparent);
  color: var(--or-deep);
}
.quick-filter .seg button.on svg { opacity: 1; }
.seg button:hover:not(.on) { color: var(--tx); }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: var(--fs-micro);
  font-weight: 800; letter-spacing: .06em; background: var(--panel-3); color: var(--tx-2);
}

/* ============================================================ предмет */

/* ---- карточка предмета ----

   Разобрана по слоям с макета (крупный кадр полосы скинов из
   ui_reference_08). Их семь, и раньше у нас было два:

     1. рамка ЦВЕТОМ РЕДКОСТИ — не серая; по ней класс читается сразу
     2. подложка: почти-чёрный сверху, слабый оттенок редкости снизу
     3. узкое наружное свечение цветом редкости
     4. арт вверху, вписан целиком, с тенью под стволом
     5. семейство оружия — приглушённым, название — белым
     6. износ мелко слева, цена оранжевым справа
     7. выбранное: оранжевая рамка и свечение поверх редкости

   Ключевое: у выбранного предмета оранжевый ПЕРЕБИВАЕТ редкость. Так в
   макете, и так правильно — «я это взял» важнее, чем «это фиолетовое», а
   иначе выбор теряется среди двух десятков цветных карточек. */

.item {
  position: relative; overflow: hidden;
  /* Подложка НЕЙТРАЛЬНАЯ. Цвет класса кладёт единственный слой — ::after
     ниже по файлу; раньше редкость шла двумя слоями сразу (14% здесь плюс
     подложка там), и на замере низ фиолетовой карточки давал #42213c против
     #1b0f24 в макете — вдвое ярче. Один слой проще держать в границах. */
  background: linear-gradient(180deg, #0b0e14 42%, #0d1017 100%);
  /* Рамка 30%, а не 55%: в макете она замерена как #4b315f, у нас выходила
     #591965 — почти чистый неон. */
  border: 1.5px solid color-mix(in srgb, var(--rc, #666) 30%, transparent);
  border-radius: 10px;
  padding: 8px; cursor: pointer; user-select: none;
  box-shadow: 0 0 12px -3px color-mix(in srgb, var(--rc, #666) 45%, transparent);
  transition: transform var(--t-micro), border-color var(--t-micro),
              box-shadow var(--t-micro);
  display: flex; flex-direction: column;
}
/* Полоски сверху больше нет: цвет несут рамка и подложка, а третья точка
   того же цвета в макете отсутствует и только дробит карточку. */
.item::before { content: none; }
.item::after {
  content: ''; position: absolute; left: 50%; top: 30%;
  width: 140%; height: 120%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--rc, #666), transparent 62%);
  opacity: .16; pointer-events: none;
}
.item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--rc, #666) 85%, transparent);
  box-shadow: 0 0 18px -3px color-mix(in srgb, var(--rc, #666) 60%, transparent);
}
.item.sel {
  border-color: var(--or);
  box-shadow: 0 0 0 1px var(--or), 0 0 24px -3px var(--or-glow);
}
/* Галочка выбора — оранжевый квадрат в правом верхнем углу, как в макете.
   Раньше выбор читался только по рамке, и на пёстрой сетке его приходилось
   искать. */
.item.sel::before {
  content: '✓'; position: absolute; right: 6px; top: 6px; z-index: 4;
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--or); color: #150a01;
  font-size: var(--fs-cap); font-weight: 900; line-height: 1;
}
.item.dis { opacity: .35; pointer-events: none; }

/* Бокс выше исходного: снимки Steam квадратные, и при contain предмет
   упирается в высоту. Кадрировать нельзя — у ножей и длинных стволов
   срезало концы, из-за чего «оружие не помещалось в карточку». */
.item-art {
  position: relative; height: 92px; padding: 2px 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.item-art .skin-svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.item-name { position: relative; font-size: var(--fs-micro); color: var(--tx-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-skin { position: relative; font-size: var(--fs-label); font-weight: 700; margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-foot {
  position: relative; display: flex; align-items: center;
  justify-content: space-between; gap: 6px; margin-top: auto;
}
.item-foot .item-wear { font-size: 10px; color: var(--tx-3); font-weight: 700; }
.item-foot .item-price {
  font-size: var(--fs-label); font-weight: 800; color: var(--or-2);
  font-variant-numeric: tabular-nums;
}
.item-wear { font-size: 10px; font-weight: 800; color: var(--tx-3); letter-spacing: .05em; }
.item-price { font-size: var(--fs-label); font-weight: 800; color: var(--or-2); font-variant-numeric: tabular-nums; }
.item-st { position: absolute; top: 6px; left: 8px; z-index: 2; font-size: 9px; font-weight: 900;
  color: #ff8a1f; letter-spacing: .04em; }
.item-p { position: absolute; top: 6px; right: 8px; z-index: 2; font-size: 10px; font-weight: 800;
  color: var(--tx-2); background: rgba(0,0,0,.5); padding: 1px 5px; border-radius: 4px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }
.grid.sm { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 8px; }
.grid.sm .item-art { height: 76px; }
.grid.sm .item-skin { font-size: var(--fs-cap); }

.empty { padding: 34px; text-align: center; color: var(--tx-3); font-size: var(--fs-label); }

/* ============================================================ рулетка кейса */

.reel-wrap {
  position: relative; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, #0e0e13, #08080b); overflow: hidden;
  padding: 14px 0; margin-bottom: 12px;
}
.reel-wrap::before, .reel-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 3; pointer-events: none;
}
.reel-wrap::before { left: 0; background: linear-gradient(90deg, #08080b, transparent); }
.reel-wrap::after { right: 0; background: linear-gradient(270deg, #08080b, transparent); }
.reel-mark {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; z-index: 4;
  background: linear-gradient(180deg, transparent, var(--or), var(--or), transparent);
  transform: translateX(-50%); box-shadow: 0 0 16px var(--or-glow);
}
.reel-mark::before, .reel-mark::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.reel-mark::before { top: 0; border-top: 9px solid var(--or); }
.reel-mark::after { bottom: 0; border-bottom: 9px solid var(--or); }
.reel { display: flex; gap: 8px; will-change: transform; }
.reel .item { width: 132px; flex: none; pointer-events: none; }
.reel .item-art { height: 66px; }

/* ============================================================ фильтры */

.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filters input[type=search] { min-width: 190px; }
.rar-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.rar-pill {
  padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: var(--fs-micro); font-weight: 800;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--tx-2); user-select: none;
}
.rar-pill.on { color: #0a0a0c; }

/* ============================================================ баттл */

.battle-board { display: grid; gap: 12px; }
@keyframes pop { from { transform: scale(.5) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes slidein { from { transform: translateX(-24px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================ прочее */

.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column;
  gap: 8px; z-index: 200; }
.toast {
  background: var(--panel-2); border: 1px solid var(--line-2); border-left: 3px solid var(--or);
  border-radius: 9px; padding: 11px 15px; box-shadow: var(--shadow); font-size: var(--fs-label);
  animation: toastin .25s ease; max-width: 340px;
}
.toast.err { border-left-color: var(--red); }
.toast.win { border-left-color: var(--green); }
@keyframes toastin { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-bg {
  position: fixed; inset: 0; background: rgba(4, 4, 6, .82); backdrop-filter: blur(6px);
  display: none; place-items: center; z-index: 150; padding: 20px;
}
.modal-bg.on { display: grid; }
.modal {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 20px; max-width: 900px; width: 100%; max-height: 86vh; overflow-y: auto;
  box-shadow: var(--shadow); animation: fade .2s ease;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.result-banner {
  border-radius: var(--r); padding: 14px 18px; margin-bottom: 12px; font-weight: 800;
  display: flex; align-items: center; gap: 12px; animation: fade .3s;
}
.result-banner.win { background: rgba(53, 208, 127, .12); border: 1px solid rgba(53, 208, 127, .4); color: #8ceab8; }
.result-banner.lose { background: rgba(255, 77, 94, .1); border: 1px solid rgba(255, 77, 94, .35); color: #ff9aa4; }
.result-banner .big { font-size: 21px; }

table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
table.tbl th {
  text-align: left; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3); padding: 8px 10px; border-bottom: 1px solid var(--line); font-weight: 800;
}
table.tbl td { padding: 8px 10px; border-bottom: 1px solid #1b1b22; }
table.tbl tr:hover td { background: #14141a; }

.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 1fr 58px; gap: 10px; align-items: center; font-size: var(--fs-cap); }
.bar-track { height: 20px; background: #0e0e13; border-radius: 5px; overflow: hidden; position: relative;
  border: 1px solid var(--line); }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--rc, var(--or)), transparent); }
.bar-label { position: absolute; left: 8px; top: 0; line-height: 18px; font-size: var(--fs-micro); font-weight: 700;
  white-space: nowrap; }

.shake { animation: shk .5s; }
@keyframes shk {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-7px, 0, 0); }
  40%, 60% { transform: translate3d(7px, 0, 0); }
}

.conf { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.conf i {
  position: absolute; width: 9px; height: 14px; opacity: .95;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(760deg); opacity: 0; }
}

.help { font-size: var(--fs-cap); color: var(--tx-3); line-height: 1.6; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* На узком экране боковое меню стало выдвижным ящиком (см. раздел «шапка
   сайта»), а не горизонтальной лентой пунктов поверх содержимого. Прежнее
   правило разворачивало .side в строку и ломало ящик: пункты уезжали за
   правый край, а половина меню становилась недостижимой. */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .nav-note { display: none; }
}

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.tile .t { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); font-weight: 800; }
.tile .n { font-size: 24px; font-weight: 900; margin-top: 5px; font-variant-numeric: tabular-nums; }

/* ============================================================ промо */


/* ============================================================ витрина кейсов */

/* Ровно три в ряд: двенадцать кейсов дают четыре полных ряда. */
/* Раскладку ленты задаёт правило ниже, в секции «лента кейсов». Здесь
   остаётся только объявление сетки. */
.case-grid { display: grid; gap: 16px; }

/* Карточка кейса по референсу: имя сверху, арт крупно, цена в капсуле
   снизу. Ключевое отличие от прежней — у карточки появилась поверхность.
   Раньше арт, подпись и цена висели прямо на фоне страницы, ряд читался
   не сеткой, а россыпью, а свечение кейса заходило на название.

   Подсветка цветом кейса (--ac) осталась, но ушла с площади под сам ящик:
   она теперь лужа света ПОД предметом, а не заливка карточки. Из-за
   заливки во всю площадь витрина читалась фиолетовой. */

.case-card {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  padding: 16px 14px 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal-a);
  box-shadow: var(--edge);
  transition: transform var(--t-ui) cubic-bezier(.2, .9, .3, 1.2),
              border-color var(--t-ui), box-shadow var(--t-ui);
}
/* Лужа света под ящиком — как площадка под объектом в макетах. */
.case-card::after {
  content: ''; position: absolute; left: 50%; top: 34%;
  width: 116%; height: 62%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 55%, var(--ac), transparent 66%);
  opacity: .20; pointer-events: none; transition: opacity var(--t-ui);
}
/* Световой прогон при наведении: узкая скошенная полоса едет по карточке.
   Полностью прозрачна в покое, поэтому в статике ничего не стоит. */
.case-card::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255, 255, 255, .07) 48%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 620ms cubic-bezier(.3, .7, .3, 1);
}
.case-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6),
              0 0 26px -6px color-mix(in srgb, var(--ac) 45%, transparent);
}
.case-card:hover::after { opacity: .34; }
.case-card:hover::before { transform: translateX(120%); }
.case-card.on { border-color: var(--or); box-shadow: var(--glow-mid); }

@media (prefers-reduced-motion: reduce) {
  .case-card, .case-card::before { transition: none; }
  .case-card:hover { transform: none; }
}

/* Шапка карточки: имя и строка отдачи. Обе стоят НАД артом, поэтому им
   нужен свой слой — иначе свечение ящика их перекрывает. */
.case-head { position: relative; z-index: 3; }

.case-art {
  position: relative; z-index: 2;
  /* flex: 1 — арт забирает всю высоту, оставшуюся от имени и цены, поэтому
     карточки в ряду выравниваются по цене независимо от длины названия. */
  flex: 1 1 auto; min-height: 150px;
  display: grid; place-items: center; margin: 10px 0 14px;
}
.case-svg { width: 100%; height: 100%; }
.case-photo {
  /* inset:0, а не height:100%: у .case-art выравнивание place-items:center,
     ячейка сетки по высоте не растягивается, и процент разрешать не от
     чего — картинка выходила натуральным размером и накрывала цену. */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.case-photo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6));
}
.case-card:hover .case-art { animation: bob 1.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }

.case-tier-pip {
  position: absolute; top: 10px; left: 12px; z-index: 3;
  font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ac); background: rgba(0,0,0,.5); border: 1px solid color-mix(in srgb, var(--ac) 45%, transparent);
  padding: 2px 7px; border-radius: 5px;
}
.case-owned {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  font-size: 10px; font-weight: 900; color: #180a00;
  background: var(--or-2); padding: 2px 7px; border-radius: 5px;
}
.case-name {
  position: relative; text-align: center; font-weight: 800; font-size: 16px;
  letter-spacing: .06em; text-transform: uppercase;
}
.case-sub {
  position: relative; text-align: center; font-size: 10px; color: var(--tx-3);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-top: 4px;
}
.case-price-tag { position: relative; display: flex; justify-content: center; margin-top: 10px; }
.case-price-tag span {
  font-size: 16px; font-weight: 900; color: #180a00;
  background: linear-gradient(135deg, var(--or-2), var(--or-3));
  padding: 5px 18px; font-variant-numeric: tabular-nums;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.case-actions { position: relative; display: flex; gap: 6px; margin-top: 10px; }

/* ============================================================ лента кейса */

.reel-wrap {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, #101017, #07070a); overflow: hidden;
  padding: 14px 0; margin-top: 14px;
}
.reel-wrap::before, .reel-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 3; pointer-events: none;
}
.reel-wrap::before { left: 0; background: linear-gradient(90deg, #07070a, transparent); }
.reel-wrap::after { right: 0; background: linear-gradient(270deg, #07070a, transparent); }

/* ============================================================ апгрейдер */

/* Активное окно живёт в колонке фиксированной ширины — как поле Ракеты и
   Минного поля. Развёрнутая во всю ширину сцена растаскивала ставку, кольцо
   и цель к краям монитора: три части одного действия читались как три
   отдельных блока, и глаз проходил между ними полэкрана. */
.upg-stage {
  display: grid; grid-template-columns: 1fr minmax(280px, 360px) 1fr;
  gap: 18px; align-items: stretch;
  max-width: var(--page-max); margin: 0 auto 18px;
}
@media (max-width: 1180px) { .upg-stage { grid-template-columns: 1fr; } }

/* Панели источника и цели закодированы цветом: слева холодный сине-стальной,
   справа тёплый янтарный. Так в макете, и это не украшение — игрок мгновенно
   понимает, где что, ещё до того, как прочитает подписи. Раньше обе были
   одинаково серыми. Оттенок слабый: он подсказка, а не заливка. */
.slot {
  position: relative;
  --plate-w: 34px;
  min-height: 210px;
  display: flex; flex-direction: column; gap: 6px;
  /* Размер кадра скина задан долей блока, а долю в CSS можно взять только
     у контейнера. Высоту слот берёт из ряда сетки, а не из содержимого
     (тело прокручивается), поэтому size-контейнер здесь безопасен. */
  container-type: size;
}
/* Косой срез снят: силуэт теперь даёт сам рендер рамки, а clip-path
   обрезал бы его углы вместе с кронштейнами. Классы остались — по ним
   разводятся цвет подсветки и сторона кронштейнов. */
/* Пока слот пуст, подсветка изнутри рамки нейтральная: у источника
   холодная, у цели тёплая — видно, где что, без подписей. */
.slot.notch-l { --plate-c: #3f7fd6; }
.slot.notch-r { --plate-c: #ff8a1c; }
/* Свет панели НЕ берёт цвет редкости. Это отмена прежнего решения, и вот
   замер, из-за которого: с вещью классифайда низ левой панели давал
   #2a0f29 — маджента во всю ширину сцены, — тогда как в макете то же место
   #0b0a0d, почти чёрное, и цвет там вообще не зависит от предмета: слева
   холодный, справа тёплый, всегда.

   Редкость и так названа трижды — рамкой карточки, подложкой под ней и
   строкой класса. Четвёртый раз, размером в половину сцены, делал ровно
   то, что бриф называет фиолетовым киберпанком.

   Что вещь легла, панель говорит яркостью собственного света, а не сменой
   цвета: --plate-a поднимает ту же холодную или тёплую подсветку. */
/* Замер после правки: на 44% холодный низ левой панели давал #161d2b —
   ровно та же яркость, что была у мадженты, только синяя. В макете там
   #0b0a0d. Берём 24/34: свет всё ещё поднимается, когда вещь легла, но
   панель остаётся тёмной, как в макете. */
.slot { --plate-a: 32%; }
.slot.filled { --plate-a: 40%; }

/* Слоты берут рендер ЦЕЛИКОМ, а не нарезку.

   Нарезка сохраняет углы на любом размере, но ради этого выбрасывает
   середины сторон — а там вся уникальность: индикаторные полосы по бокам,
   разъёмы сверху и снизу, мелкие накладки. На нарезке от них не остаётся
   ничего, и рамка становится безликой.

   Плата за это — картинка тянется по обеим осям и пропорции углов слегка
   плывут. На слоте, который близок к квадрату, а исходник — 1,57:1, сжатие
   по горизонтали примерно на треть. Заметно только если знать, а деталей
   возвращается на порядок больше. */
.slot {
  border: 0;
  background-image: url('/assets/frame/plate-full.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Содержимое отступает от рейки: рамка нарисована внутрь картинки, и без
     отступа текст лёг бы прямо на металл. */
  padding: 30px 34px 26px;
}
/* Свечение и разъёмы у слотов теперь на самой картинке — свои гасим,
   иначе поверх нарисованных встанут вторые. */
.slot > .eg-edge::before, .slot > .eg-edge::after { content: none; }
/* Кроме нижней полосы света: она красится цветом редкости и дышит, а
   нарисованная на картинке всегда оранжевая и неподвижная. */
.slot > .eg-edge > i { bottom: 14px; width: 40%; }

/* ---- разряды между панелями и кольцом ----

   SVG растягивается по ширине промежутка сетки, поэтому preserveAspectRatio
   отключён: важна только форма зигзага, а не его пропорции.

   Два пути один поверх другого: нижний размыт и даёт ореол, верхний тонкий
   и яркий — это ядро разряда. Одним путём получается светящаяся линия, а
   нужен именно разряд с ядром. */
/* Разряд перекрывает ВЕСЬ промежуток между панелью и кольцом, поэтому
   ширина задана в vw, а не долей обёртки: сама обёртка узкая, и 34% от неё
   давали огрызок, висящий в пустоте. Заходит под кольцо и под панель на
   десяток пикселей — так у него нет видимых концов. */
.upg-arc {
  position: absolute; top: 50%; translate: 0 -50%;
  width: clamp(90px, 13vw, 230px); height: 46px;
  z-index: 0; pointer-events: none; overflow: visible;
}
.upg-arc.l { right: 92%; margin-right: -14px; }
.upg-arc.r { left: 92%; margin-left: -14px; }
.upg-arc path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ua-glow { stroke-width: 5; filter: blur(3px); opacity: .55; }
.ua-core { stroke-width: 1.4; }
.upg-arc.l .ua-glow, .upg-arc.l .ua-core { stroke: #7fb2ff; }
.upg-arc.r .ua-glow, .upg-arc.r .ua-core { stroke: var(--or-2); }
.upg-arc.l .ua-core { stroke: #dceaff; }
.upg-arc.r .ua-core { stroke: #ffd7a1; }
/* Разряд бежит к кольцу: пунктир едет по пути. Периоды у сторон разные —
   синхронный бег читался бы как одна анимация на две панели. */
.ua-core { stroke-dasharray: 14 26; animation: uaRun 1.9s linear infinite; }
.upg-arc.r .ua-core { animation-duration: 2.4s; }
@keyframes uaRun { to { stroke-dashoffset: -40; } }
/* Пока в слоте пусто, разряду неоткуда идти. */
.upg-arc { opacity: 0; transition: opacity var(--t-ui); }
.upg-stage:has(.slot.filled) .upg-arc { opacity: .9; }

@media (prefers-reduced-motion: reduce) { .ua-core { animation: none; } }
@media (max-width: 900px) { .upg-arc { display: none; } }
.slot-clear {
  position: absolute; top: 10px; left: 12px; z-index: 4;
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  background: var(--panel-3); border: 1px solid var(--line-2); color: var(--tx-3);
  font-weight: 900; line-height: 1;
}
.slot.notch-r .slot-clear { left: auto; right: 12px; }
/* В пустом слоте чистить нечего, а кнопка всё равно висела в углу сцены
   серым квадратом. Появляется вместе с вещью. */
.slot:not(.filled) .slot-clear { display: none; }
.slot-clear:hover { color: var(--red); border-color: rgba(255,77,94,.5); }
/* Содержимое стоит по центру блока — и один предмет, и пять. Раньше сетка
   прижимала всё к левому верхнему углу, и одинокий скин висел в углу.
   Потолка по высоте нет намеренно: тело растягивается на всё свободное
   место и тем самым опускает плашку цены к низу слота. Без этого плашка
   слева уезжала на 145 пикселей ниже правой — её отжимала строка
   «доложить с баланса», которой в правом слоте нет. */
/* Прокрутка — только по вертикали и только когда вещей несколько.

   overflow-y: auto в одиночку не работает так, как читается: по
   спецификации visible на другой оси при этом становится auto, то есть
   горизонтальная прокрутка включалась сама собой. А арт одинокого скина нарочно
   шире тела на 10% (см. ниже, .slot-body > :only-child .item-art) — вот и
   вылезала серая полоса ползунка ровно под скином.

   Пишем обе оси явно, а для единственной вещи прокрутку снимаем совсем:
   такая карточка растянута по высоте слота и переполнить его не может, а
   вылет арта за края подрезает сам слот (у него overflow: hidden). */
.slot-body {
  flex: 1; min-height: 0; overflow: hidden auto;
  display: flex; flex-wrap: wrap; gap: 7px;
  align-content: center; justify-content: center;
}
.slot-body:has(> :only-child) { overflow: visible; }
.slot-body > * { flex: 0 1 clamp(92px, 34cqw, 132px); }
/* Кадр скина — 15% высоты блока. */
.slot-body .item-art { height: 15cqh; min-height: 38px; }
.slot-body .item-skin { font-size: var(--fs-micro); }
.slot-body:empty { display: none; }
/* Подсказка в пустом слоте. Была 12.5 самым тусклым цветом на площади
   400x340 — в снимке её приходилось искать. Крупнее и на тон светлее:
   это единственное, что слот в простое говорит. */
.slot-hint {
  display: grid; place-items: center; color: var(--tx-2); font-size: var(--fs-ui);
  text-align: center; flex: 1; line-height: 1.8;
}

.ribbon {
  display: flex; align-items: baseline; gap: 10px; margin-top: auto;
  background: linear-gradient(135deg, var(--or-2), var(--or-3));
  color: #180a00; padding: 8px 20px; align-self: flex-start;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.ribbon.right { align-self: flex-end; }
/* Пока слот пуст, плашка не горит. На снимке «ставка $0,00» и «цель $0,00»
   были двумя самыми яркими пятнами сцены — оранжевый кричал ровно там, где
   ничего нет. Оранжевым он становится, когда в плашке появляется число. */
.slot:not(.filled) .ribbon {
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .22));
  color: var(--tx-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.slot:not(.filled) .ribbon .rv { color: color-mix(in oklab, var(--or-deep) 55%, var(--tx-3)); }
.ribbon .rk { font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.ribbon .rv { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---- кольцо ---- */

/* Ореолу реактора нужно место за пределами круга: svg рисует с
   overflow: visible, но обёртка без запаса всё равно его срезала. */
.ring-wrap { display: grid; place-items: center; padding: 22px 4px 4px; }
.ring { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.ring-val {
  font-size: 40px; font-weight: 900; line-height: 1; color: var(--or-2);
  text-shadow: 0 0 40px var(--or-glow); font-variant-numeric: tabular-nums;
}
.ring-sub {
  font-size: var(--fs-micro); letter-spacing: .17em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 800; margin-top: 7px;
}
/* Множитель под шансом. Это второе число сделки — во сколько раз растёт
   ставка, — а стояло служебно-серым в 14. Крупнее и светлее: не спорит с
   шансом, но перестаёт выглядеть сноской. */
.ring-note { font-size: 17px; font-weight: 800; color: var(--tx); margin-top: 6px; }
/* Исход апгрейда. Зелёного у ENIGGMA нет — его уже выпиливали из кнопок
   кабинета, а здесь, в самом заметном месте игры, он оставался: и число, и
   подпись победы горели #35d07f. Победа теперь горячая оранжевая, то есть
   тем же светом, что и вся энергия на странице, только ярче. Красный у
   проигрыша остаётся: это не украшение, а единственный сигнал «мимо». */
.ring.win .ring-val { color: var(--or-hot); text-shadow: 0 0 46px rgba(255, 138, 28, .7); }
.ring.lose .ring-val { color: var(--red); text-shadow: 0 0 46px rgba(255,77,94,.5); }
.ring.win .ring-note { color: var(--or-2); }
.ring.lose .ring-note { color: var(--red); }

/* ---- средняя панель ---- */

.upg-mid {
  display: grid; grid-template-columns: 140px 1fr 140px; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px;
  background: linear-gradient(180deg, #121219, #0b0b0f);
  margin-bottom: 16px;
}
@media (max-width: 1080px) { .upg-mid { grid-template-columns: 1fr; } .mascot { display: none; } }
.mascot { width: 100%; }
.mascot .mascot-svg, .mascot .mascot-img { width: 100%; height: 156px; object-fit: contain; }
.mascot.right { transform: scaleX(-1); }

.upg-controls-core { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.seg.big-seg button { padding: 9px 22px; font-size: var(--fs-label); }

.preset-line { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.pl-side { text-align: center; min-width: 108px; }
.pl-k { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--tx-3); font-weight: 800; }
.pl-v { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Зазор между группами — тот самый, что в макете. */
.preset-row {
  position: relative; z-index: 1;
  display: flex; gap: 14px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.preset {
  position: relative; cursor: pointer; user-select: none;
  min-width: 70px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(23, 28, 38, .58), rgba(11, 14, 20, .62));
  border-radius: 999px; padding: 6px 16px; text-align: center;
  transition: border-color var(--t-micro), box-shadow var(--t-micro), transform 90ms;
}
.preset:hover { border-color: var(--or-deep); transform: translateY(-1px); }
/* Выбранная капсула — оранжевая обводка со свечением, а не сплошная заливка:
   в макете залитых кнопок в этой полосе нет, а залитая ярким оранжевым
   перетягивала внимание с самого кольца. */
.preset.on {
  border-color: var(--or-deep);
  box-shadow: var(--glow-soft), inset 0 0 14px -6px var(--or);
  background: linear-gradient(180deg, rgba(45, 27, 10, .62), rgba(20, 12, 5, .66));
}
.preset .p-ch {
  font-size: var(--fs-body); font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
/* Подпись под кнопкой — не декор: это то, что кнопка даёт. В --tx-3 при
   9.5 она на снимке сливалась с фоном капсулы, и полоса читалась пятью
   голыми числами без смысла. */
.preset .p-mu {
  font-size: 10px; font-weight: 700; color: var(--tx-2);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.preset.on .p-ch { color: var(--or-2); }
.preset.on .p-mu { color: var(--or-deep); }

.bet-line { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 620px; }
.bl-k { font-size: var(--fs-cap); color: var(--tx-2); white-space: nowrap; }
.bl-num { width: 104px; text-align: right; }
.mini { padding: 5px 9px !important; font-size: var(--fs-cap) !important; }

/* ---- две колонки предметов ---- */

/* Потолок тот же, что у сцены: без него низ растекался на всю ширину
   контента — на мониторе 1920 это 1638 против 1400 у сцены, и страница
   разъезжалась ступенькой. Теперь оба блока стоят одной колонкой. */
.upg-columns {
  display: grid;
  /* Колонки поровну — по решению игрока. В макете они разные (500 против
     790, то есть 39/61), и на 44/56 сетка целей показывала пять столбцов
     против четырёх слева. Равные блоки этот пятый столбец забирают: на
     692 пикселя ширины при шаге 122 их помещается четыре. Размен принят
     сознательно — два одинаковых блока держат низ страницы ровнее. */
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: var(--page-max); margin: 0 auto;
}
@media (max-width: 980px) { .upg-columns { grid-template-columns: 1fr; } }
.scroll-col { max-height: 470px; overflow-y: auto; padding-right: 4px; align-content: start; }
/* Нижние сетки апгрейдера держат высоту ПОСТОЯННОЙ, а не «до 470».
   С max-height коробка росла по мере того, как приезжали карточки: инвентарь
   и цели грузятся отдельными запросами и в разное время, поэтому страница
   успевала дёрнуться дважды, и клик уезжал из-под курсора.

   Пустое место, пока сеток нет, — осознанный размен: неподвижная страница
   дороже плотной. Пустое состояние в такой коробке стоит по центру, так что
   выглядит она не дырой, а местом, которое сейчас заполнят. */
/* Сетка занимает ВСЮ высоту, оставшуюся в блоке после шапки и фильтров.
   Раньше высота была задана числом, и колонка с тремя предметами оставляла
   внутри рамки треть пустоты, а рамка выглядела великоватой для своего
   содержимого.

   Прыжок раскладки при этом не вернулся: высоту задаёт не количество
   предметов, а сам блок, а его — более длинная из двух колонок. Подгрузка
   целей внутри собственной прокрутки ничего снаружи не двигает. */
#myItems, #targetGrid {
  /* flex: 1 1 0 с min-height: 0 — сетка занимает ровно остаток блока и
     прокручивается внутри. С basis auto (первая попытка) она росла по
     содержимому, и шестьдесят целей вытягивали страницу на три с половиной
     тысячи пикселей. Ноль в basis и означает «не смотри на содержимое». */
  flex: 1 1 0; min-height: 0; max-height: none;
  overflow-y: auto;
  /* max-content обязателен вместе с фиксированной высотой. Ряды auto в
     контейнере с ОПРЕДЕЛЁННОЙ высотой перестают считаться по содержимому и
     делят её между собой: восемь рядов по 32 пикселя вместо 162, карточка
     сплющивается в полоску, а картинка внутри ужимается флексом с 84
     пикселей до четырёх. С max-height такого не было — высота была
     неопределённой, и ряды считались как обычно. */
  grid-auto-rows: max-content;
  /* Нижний ряд гаснет у кромки. Без этого прокрутка резала карточки ровно
     пополам, и обрез читался браком вёрстки, а не «дальше есть ещё».
     Полоса короткая: она должна намекать на продолжение, а не съедать ряд. */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
}
/* Кнопка догрузки целей — во всю ширину под сеткой: она продолжение списка,
   а не действие рядом с ним.

   Прячется видимостью, а не hidden: с hidden она пропадала из раскладки, и
   блок дёргался на её высоту ровно в тот момент, когда приезжали цели. Место
   под неё занято всегда. */
/* Высота фиксирована: пустая кнопка (до первой загрузки целей у неё нет
   подписи) складывалась в одни padding и была вдвое ниже. Это и оставалось
   последним источником скачка — 14 пикселей ровно один раз за загрузку. */
.target-more { width: 100%; margin-top: 10px; min-height: 28px; }
.target-more.away { visibility: hidden; pointer-events: none; }
/* Строка «показано N из M» появляется вместе с целями. Пустой она схлопывалась
   в ноль — ещё один источник того же скачка. Высота ровно в строку своего
   кегля: меньше — блок всё равно подрастает, когда текст появится. */
#targetRange { min-height: 17px; }

.kv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 18px; }

/* ============================================================ эффекты выигрыша */

.burst { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible; }
.burst-flash {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 var(--bc);
  animation: flash .6s ease-out forwards;
}
@keyframes flash {
  0% { box-shadow: 0 0 0 0 var(--bc); opacity: .85; }
  100% { box-shadow: 0 0 0 130px transparent; opacity: 0; }
}
.burst i {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 16px; border-radius: 2px;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(0);
  animation: ray var(--d) cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes ray {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-6px) scaleY(.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-92px) scaleY(1.5); }
}
.pop-win { animation: popwin .8s cubic-bezier(.2,1.5,.4,1); }
@keyframes popwin {
  0% { transform: scale(1); } 28% { transform: scale(1.09); } 100% { transform: scale(1); }
}

.conf.coins b {
  position: absolute; width: 15px; height: 15px; border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.28);
  animation: fall linear forwards;
}

.win-glow { box-shadow: 0 0 0 1px var(--green), 0 0 44px rgba(53,208,127,.32) !important; }

/* ============================================================ реактор

   Кольцо шанса на апгрейде. Механика (дуги, хвост, головка) осталась
   прежней — здесь только слои вокруг неё, которых в макете восемь, а у нас
   было два: серые засечки и заливка.

   Что добавилось: технический ореол снаружи, металлический безель с
   сегментацией, тёмное стекло внутри, точки разряда по бокам, ромб-эмблема
   сверху и маскот в нижней точке. Разбор — в ui.js, class Ring.

   Ореол медленно вращается, разряды дышат. Скорости разные и некратные:
   синхронное мигание сразу читается как анимация, а должно читаться как
   работающая машина. */

.r-halo { transform-origin: 110px 110px; animation: rHalo 90s linear infinite; }
@keyframes rHalo { to { transform: rotate(360deg); } }

.r-spark { transform-origin: 110px 110px; }
.r-spark.l { animation: rSpark 3.7s ease-in-out infinite; }
.r-spark.r { animation: rSpark 2.9s ease-in-out infinite; }
@keyframes rSpark {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.r-mark { transform-origin: 110px 110px; animation: rMark 4.3s ease-in-out infinite; }
@keyframes rMark { 50% { opacity: .35; } }

/* Маскот в нижней точке. Позиционируется в процентах от обёртки кольца,
   поэтому переживает любой её размер. */
/* Маскот в нижней точке кольца. Был 17% ширины и почти чёрный на чёрном —
   в пустом кольце, где больше ничего нет, его приходилось искать. Крупнее
   и с более плотным ореолом: пока ставки нет, он единственное, что держит
   центр сцены. */
.ring-mascot {
  position: absolute; left: 50%; bottom: 10%;
  width: 21%; translate: -50% 0;
  opacity: 1; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 0 16px rgba(255, 122, 0, .55));
  animation: rFloat 5.5s ease-in-out infinite;
}
@keyframes rFloat { 50% { translate: -50% -4%; } }

@media (prefers-reduced-motion: reduce) {
  .r-halo, .r-spark, .r-mark, .ring-mascot { animation: none; }
}

/* ============================================================ выпуклое стекло

   Материал управляющих элементов из макета: кнопки, поля и тумблеры
   выглядят выпуклыми стеклянными плитками, а не плоскими прямоугольниками.

   Собирается тремя вещами, и все три обязательны:
     1. светлая кромка ПО ВЕРХНЕМУ КРАЮ ИЗНУТРИ — блик,
     2. тёмная по нижнему изнутри — тень от собственной толщины,
     3. градиент сверху вниз от почти-прозрачного к затемнению.
   Уберите любую — и остаётся плоский блок с рамкой.

   Плюс размытие подложки: сквозь стекло видно сцену, и элемент читается
   лежащим НА странице, а не вырезанным из неё. */

.glass, .btn, .mini, .fld-search, .switch.glassy .track,
input[type=search], input[type=number], input[type=text], select {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .085) 0%,
      rgba(255, 255, 255, .015) 46%,
      rgba(0, 0, 0, .20) 100%),
    rgba(11, 14, 20, .46);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .34),
    0 2px 7px rgba(0, 0, 0, .35);
  backdrop-filter: blur(7px);
}
.glass:hover, .btn:hover {
  border-color: rgba(255, 255, 255, .2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(0, 0, 0, .34),
    0 3px 10px rgba(0, 0, 0, .4);
}

/* Оранжевое стекло — тот же материал, только подсвеченный изнутри. */
.glass.on, .btn.primary {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .22) 0%,
      rgba(255, 157, 28, .10) 44%,
      rgba(0, 0, 0, .16) 100%),
    linear-gradient(180deg, #f0770a, #d95f04);
  border-color: rgba(255, 190, 120, .38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(90, 34, 0, .55),
    var(--glow-soft);
}

/* Поле поиска с лупой — как в макете: значок внутри слева, поле-таблетка. */
.fld-search {
  position: relative; display: inline-flex; align-items: center;
  height: 36px; border-radius: 999px; padding: 0 14px 0 34px;
  min-width: 210px;
}
.fld-search svg {
  position: absolute; left: 12px; width: 15px; height: 15px;
  color: var(--tx-3); pointer-events: none;
}
.fld-search input {
  width: 100%; height: 100%; padding: 0; font-size: var(--fs-label);
  background: none; border: 0; box-shadow: none; backdrop-filter: none;
  color: var(--tx);
}
.fld-search input:focus { outline: none; }
.fld-search input::placeholder { color: var(--tx-3); }
.fld-search:focus-within { border-color: rgba(255, 122, 0, .40); }

/* Тумблер в стеклянной оболочке: сам переключатель и подпись стоят в общей
   таблетке, а не висят на фоне. */
.switch.glassy {
  height: 36px; padding: 0 14px 0 8px; border-radius: 999px;
  gap: 8px; font-size: var(--fs-cap); color: var(--tx-2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18)),
    rgba(11, 14, 20, .46);
  border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(7px);
}
.switch.glassy .track { width: 34px; height: 19px; }
.switch.glassy .track::after { width: 13px; height: 13px; }
.switch.glassy input:checked + .track::after { transform: translateX(15px); }

/* Заголовок блока со счётчиком под ним. */
.blk-h { display: grid; gap: 2px; }
.blk-h h3 { margin: 0; }
.blk-h .dim { font-size: var(--fs-cap); }

/* ============================================================ рендер-рамка

   Настоящий корпус из набора ENIGGMA вместо нарисованного на CSS. Причина
   простая: фаску со спекуляром, ступенчатые накладки и винты CSS не умеет —
   получается силуэт, а не деталь. Рендер умеет, потому что это рендер.

   Растянуть картинку целиком нельзя: она нарисована под 1573x1000, а панели
   бывают и вытянутыми, и почти квадратными, и углы от растяжения плющатся.
   Поэтому border-image с девятислойной нарезкой — углы ставятся как есть на
   любом размере, стороны тянутся. Саму нарезку собирает
   tools/design/nineslice.py: он же выбивает чёрную подложку в прозрачность и
   заменяет середины сторон чистым куском рейки, иначе разъёмы из центра
   каждой стороны размазало бы во всю её длину.

   Разъёмы возвращаются сюда отдельными слоями — и потому светятся и дышат,
   чего у растянутой картинки не вышло бы. */

.eg-plate {
  position: relative;
  border-style: solid;
  border-width: var(--plate-w, 30px);
  border-image: url('/assets/frame/plate.webp') 200 / var(--plate-w, 30px) stretch;
  border-radius: 0;
  /* Подложка живёт внутри рейки: без padding-box она вылезала бы под
     прозрачные части рамки и гасила космос по её краю. */
  background-clip: padding-box;
  background-color: transparent;
  background-image:
    radial-gradient(120% 78% at 50% 118%,
      color-mix(in oklab, var(--plate-c, var(--or)) var(--plate-a, 34%), transparent) 0%,
      transparent 62%),
    radial-gradient(100% 70% at 50% 0%, rgba(30, 40, 58, .5), transparent 70%),
    linear-gradient(180deg, rgba(9, 13, 20, .72), rgba(5, 7, 11, .80));
}
/* Нижние блоки берут ТУ ЖЕ рамку, что и слоты, только со свечением
   холодного синего. Отдельный рендер с горизонтом отсюда убран: на широком
   блоке его собственный синий градиент спорил с рейкой, а одна и та же
   рамка на всех четырёх блоках держит страницу собранной.

   Файл plate-wide.webp удалён как неиспользуемый. Если понадобится вернуть:
     .venv/Scripts/python.exe tools/design/nineslice.py        "design/master-kit/assets/ui/upgrader block back.png"        frontend/assets/frame/plate-wide.webp --corner 200 --sample 420,250 */
.eg-plate.wide {
  --plate-c: #2f6ee0;
  --plate-w: 30px;
}
/* .card задаёт свои рамку, фон и скругление — у панели с рендер-рамкой их
   быть не должно, иначе поверх кронштейнов ляжет серый прямоугольник. */
.card.eg-plate {
  border-radius: 0;
  box-shadow: none;
  padding: 6px 14px 14px;
  /* Рамка рисуется ШИРЕ, чем занимает в раскладке: border-width отдаёт под
     неё 30 пикселей, а border-image-width рисует на 70 и налезает внутрь.
     Рейка получается массивной, как на рендере, но не съедает 140 пикселей
     полезной ширины блока. */
  border-image-width: 70px;
}
/* Высота теперь на самом БЛОКЕ, а не на сетке внутри него. Так сетка
   дотягивается до нижнего края рамки (пустоты внутри не остаётся), блок не
   растёт от количества предметов (раскладка не прыгает), а лишнее уезжает в
   собственную прокрутку сетки. */
.upg-columns > .card {
  display: flex; flex-direction: column;
  height: clamp(430px, 58vh, 640px);
}

/* Узкий экран. Правило стоит ЗДЕСЬ, а не выше по файлу вместе с остальной
   раскладкой колонок: и высоту, и --plate-w, и border-image-width задают
   правила прямо над ним, той же специфичности. Медиазапрос выше них молча
   не работал — проверено вычисленным стилем, а не глазами по исходнику.

   Что чиним. Замер на 480: блок стоит от 12 до 468, border-width отдаёт
   рейке 30 пикселей, а border-image-width рисует её на 70 — справа рамка
   закрашивает всё от 398. Третья карточка инвентаря кончалась на 420, поле
   поиска на 424: обе уезжали ПОД рейку. На широком экране этот запас
   незаметен, на 480 он съедает 17% ширины.

   И высота: 70vh при одном ряде карточек давали 580 пикселей на 160
   полезных. Выравнивать на узком экране нечего — блоки идут друг под
   другом, а не колонками, — поэтому высота по содержимому с потолком. */
@media (max-width: 900px) {
  .upg-columns > .card {
    height: auto; max-height: 78vh;
    --plate-w: 20px;
    border-image-width: 34px;
  }
  /* Вместе с height: auto сетке нужна и другая база. flex: 1 1 0 означает
     «не смотри на содержимое» — при определённой высоте блока это ровно то,
     что нужно, а при height: auto сетка складывалась в ноль, и от блока
     оставалась одна шапка (замер: cardH 199, gridH 0). Здесь база по
     содержимому, а потолок блока по-прежнему загоняет лишнее в прокрутку. */
  #myItems, #targetGrid { flex: 0 1 auto; }
}

/* Разъёмы. Сверху три белые точки, снизу три цветные и полоса света под
   ними — как на рендере. Стоят абсолютом и не тянутся вместе с рамкой. */
.eg-plate > .eg-edge {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  clip-path: none; background: none; padding: 0;
  -webkit-mask: none; mask: none;
}
.eg-plate > .eg-edge::before,
.eg-plate > .eg-edge::after {
  content: ''; position: absolute; left: 50%; translate: -50% 0;
  width: 34px; height: 4px; border: 0;
  /* Три точки одной строкой: повторяющийся радиальный градиент дешевле трёх
     узлов и не может с ними разъехаться. */
  background-image: radial-gradient(circle at 3px 2px,
    currentColor 0 1.6px, transparent 1.9px);
  background-size: 12px 4px; background-repeat: repeat-x;
  opacity: .85;
}
.eg-plate > .eg-edge::before {
  top: calc(var(--plate-w, 30px) * -.42);
  color: #b9c3d1;
}
.eg-plate > .eg-edge::after {
  bottom: calc(var(--plate-w, 30px) * -.42);
  color: var(--plate-c, var(--or));
  filter: drop-shadow(0 0 5px var(--plate-c, var(--or)));
}
/* Полоса света у нижнего разъёма — то, что на рендере светит из-под рамки.
   Дышит: медленно, на пределе заметности, чтобы панель читалась включённой,
   а не нарисованной. */
.eg-plate > .eg-edge > i {
  position: absolute; left: 50%; bottom: 0; translate: -50% 40%;
  display: block; width: 52%; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    var(--plate-c, var(--or)) 0%, transparent 68%);
  filter: blur(5px); opacity: .75;
  animation: plateBreath 4.6s ease-in-out infinite;
}
@keyframes plateBreath { 50% { opacity: .38; } }
@media (prefers-reduced-motion: reduce) { .eg-plate > .eg-edge > i { animation: none; } }

/* ============================================================ подписи и числа

   Две вещи, которые в макетах повторяются на каждом экране и у нас были
   расписаны по месту десяток раз с разными размерами.

   HUD-подпись — компактный верхний регистр с трекингом: «БАЛАНС», «СТАВКА»,
   «ОТКРЫТО КЕЙСОВ». Она служебная и должна уходить на второй план, поэтому
   мелкая и приглушённая.

   Число — табличное. Это не косметика: множитель в «Краше» пересчитывается
   каждый кадр, и на пропорциональных цифрах строка дёргается по ширине на
   каждой смене разряда. То же у баланса и у цен в ленте. */

.hud {
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3);
}
.num, .hud-num { font-variant-numeric: tabular-nums; }
.hud-num { font-weight: 800; letter-spacing: .01em; }

/* Крупное число с ореолом — множитель, шанс, выигрыш. Ореол послойный: одна
   тень даёт плоское пятно, три с разным радиусом — свечение с ядром. */
.hud-num.hot {
  color: var(--or-2);
  text-shadow: 0 0 10px rgba(255, 122, 0, .55),
               0 0 34px rgba(255, 122, 0, .35),
               0 0 72px rgba(255, 122, 0, .18);
}

/* ============================================================ площадка

   Лужа света под объектом. Кейс, маскот, ракета — всё, что стоит на экране,
   стоит НА чём-то: без площадки предмет выглядит наклеенным, а не
   находящимся в сцене. Два слоя: широкое мягкое пятно и узкий яркий эллипс
   у самого основания — так читается контакт с поверхностью. */

.eg-stage { position: relative; }
.eg-stage::before, .eg-stage::after {
  content: ''; position: absolute; left: 50%; translate: -50% 0;
  pointer-events: none; z-index: 0;
}
/* Рассеянный подсвет вокруг объекта. */
.eg-stage::before {
  bottom: 2%; width: 96%; height: 62%;
  background: radial-gradient(ellipse at 50% 78%,
    var(--stage-c, var(--or)) 0%, transparent 68%);
  opacity: var(--stage-a, .20); filter: blur(6px);
}
/* Узкая полоса контакта. */
.eg-stage::after {
  bottom: 4%; width: 56%; height: 12%;
  background: radial-gradient(ellipse at 50% 50%,
    var(--stage-c, var(--or-2)) 0%, transparent 70%);
  opacity: calc(var(--stage-a, .20) * 1.6); filter: blur(4px);
}
.eg-stage > * { position: relative; z-index: 1; }

/* ============================================================ инженерная рамка

   Корпус со срезанными углами и уголковыми кронштейнами — тот самый, что в
   макетах у каждой панели (эталон — ui_reference_03). Именно он отличает
   «сделанную вещь» от свёрстанного прямоугольника, и именно его у нас не
   было нигде.

   Как это сделано и почему так.

   Силуэт даёт clip-path по шестиугольнику: срез слева сверху и справа снизу.
   Беда в том, что clip-path режет и рамку тоже — по диагонали граница просто
   исчезает. Поэтому граница рисуется отдельным слоем .eg-edge: он залит
   цветом рамки, обрезан тем же путём и выеден маской изнутри, так что от
   заливки остаётся полоса в один пиксель, идущая ровно по срезу.

   Отдельным узлом, а не псевдоэлементом: у карточки кейса ::before и ::after
   уже заняты лужей света и световым прогоном, а третьего псевдоэлемента у
   элемента не бывает.

   --cut задаёт размер среза, --edge-c — цвет границы. Оба переопределяются
   на месте: у героя срез крупнее, у мелкой карточки мельче. */

:root { --cut: 12px; }

.eg-cut {
  --cutpath: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut));
  clip-path: var(--cutpath);
  border-radius: 0 !important;      /* скругление и срез вместе не читаются */
  border: 0 !important;
}
.eg-edge {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  clip-path: var(--cutpath);
  background: var(--edge-c, var(--line-2));
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: background var(--t-ui);
}
/* Кронштейны: короткие штрихи в двух срезанных углах. Не по всем четырём —
   в макете отмечены именно те, где идёт срез, и асимметрия здесь намеренная,
   она и читается как «деталь», а не как «рамочка». */
.eg-edge::before, .eg-edge::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 0 solid var(--or-deep); opacity: .75;
}
.eg-edge::before { left: 0; top: var(--cut); border-left-width: 2px; }
.eg-edge::after  { right: var(--cut); bottom: 0; border-bottom-width: 2px; }

/* ============================================================ слой атмосферы

   Космос под всем интерфейсом. Раньше здесь лежало тиснение — мотив логотипа
   в повторе, — и оно решало ту же задачу неверным способом: обои из
   собственной эмблемы читаются как обои, а нужна сцена. Атмосферу даёт
   космос, логотипу место в шапке.

   Пять слоёв, разбор и стоимость — в frontend/js/sky.js. Здесь только их
   внешний вид. Все они fixed и с pointer-events: none, поэтому ни кликов, ни
   прокрутки не перехватывают. */

.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; contain: strict;
}
.sky > * { position: absolute; inset: 0; }

/* 1. Снимок космоса. Сцену подставляет sky.js, смена — плавная: резкий
      перескок картинки при переходе между разделами читается как моргание. */
.sky-img {
  background: no-repeat center / cover;
  opacity: .78;
  transition: opacity var(--t-cine) ease, background-image 0s;
  /* Дальний план размыт на пиксель: передний край интерфейса от этого
     становится резким без единой правки в самом интерфейсе. */
  filter: blur(1px) saturate(.9);
  transform: scale(1.04);          /* компенсируем края, съеденные размытием */
}

/* 2. Туманность: четыре пятна под сильным размытием, каждое по своему
      некратному циклу. Свечение складывается по screen, поэтому пятна не
      перекрывают друг друга, а суммируются как свет. */
.sky-neb { mix-blend-mode: screen; opacity: .8; }
.sky-neb i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.sky-neb i:nth-child(1) {
  width: 46vw; height: 46vw; left: 58%; top: -14%;
  background: radial-gradient(closest-side, rgba(255, 122, 0, .20), transparent 70%);
  animation: neb-a 83s ease-in-out infinite alternate;
}
.sky-neb i:nth-child(2) {
  width: 38vw; height: 38vw; left: -10%; top: 42%;
  background: radial-gradient(closest-side, rgba(255, 92, 0, .13), transparent 70%);
  animation: neb-b 97s ease-in-out infinite alternate;
}
.sky-neb i:nth-child(3) {
  width: 52vw; height: 34vw; left: 22%; top: 66%;
  background: radial-gradient(closest-side, rgba(120, 80, 200, .07), transparent 70%);
  animation: neb-c 131s ease-in-out infinite alternate;
}
.sky-neb i:nth-child(4) {
  width: 30vw; height: 30vw; left: 74%; top: 52%;
  background: radial-gradient(closest-side, rgba(255, 181, 46, .10), transparent 70%);
  animation: neb-d 109s ease-in-out infinite alternate;
}
@keyframes neb-a { to { transform: translate3d(-7vw, 5vh, 0) scale(1.15); } }
@keyframes neb-b { to { transform: translate3d(6vw, -8vh, 0) scale(1.22); } }
@keyframes neb-c { to { transform: translate3d(-9vw, -4vh, 0) scale(.88); } }
@keyframes neb-d { to { transform: translate3d(4vw, 7vh, 0) scale(1.10); } }

/* 3. Звёзды — канвас, см. sky.js. */
.sky-stars { width: 100%; height: 100%; }

/* 4. Зерно. Тот самый слой, без которого градиенты на почти-чёрном идут
      полосами. feTurbulence рисует браузер — ни файла, ни запроса; плитка
      маленькая и повторяется, поэтому растеризуется один раз. */
.sky-grain {
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* 5. Виньетка. Края уходят в чёрный, центр остаётся открытым — иначе
      интерфейс у границ экрана висит в пустоте. */
.sky-vig {
  background:
    radial-gradient(120% 85% at 50% 0%, transparent 40%, rgba(5, 6, 8, .55) 100%),
    linear-gradient(180deg, transparent 55%, rgba(5, 6, 8, .70) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .sky-neb i { animation: none; }
}

/* Интерфейс лежит НАД сценой. Шапка и боковое меню при этом остаются
   полупрозрачными: сквозь них видно космос, и это ровно то, чего просят
   референсы — интерфейс внутри мира, а не поверх картинки. */
.shell { position: relative; z-index: 1; }
.side, .top { background-color: rgba(8, 11, 16, .72); backdrop-filter: blur(10px); }
.content { position: relative; }

/* ============================================================ логотип */

.brand-mark {
  background: none; box-shadow: none; padding: 0;
  width: 90px; height: 90px;
  filter: drop-shadow(0 0 12px rgba(255, 122, 24, .45));
}
.brand-mark svg, .brand-mark img { display: block; width: 100%; height: 100%; }

/* ============================================================ витрина */

/* ---- строка фильтров ----

   По референсу: слева капсулы сортировки со значками, справа диапазон цены
   и поиск с лупой. Всё одной высоты в 46 пикселей — в макете ряд ровный, а
   разнобой по высоте первое, что выдаёт «сделано на глаз».

   Активная капсула — ТЁМНО-ОРАНЖЕВАЯ ОБВОДКА, а не заливка. Заливка ярким
   оранжевым (как было) тянет на себя внимание сильнее, чем сами кейсы, а по
   брифу оранжевый — это свет вокруг важного, а не краска по кнопке. */

/* Две строки: сверху разделы и сортировка, снизу диапазон и поиск. Одной
   строкой они не помещаются на 1600 — поиск срывался на перенос и вставал
   под разделы, ломая ряд. Разбиение явное, а не по остаточному принципу. */
.quick-filter {
  display: grid; gap: 10px 12px; margin-bottom: 18px;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "tabs tabs tabs" "sort range search";
  align-items: center;
}
.quick-filter .shelf-tabs { grid-area: tabs; }
.quick-filter .seg        { grid-area: sort; }
.quick-filter .price-range { grid-area: range; }
.quick-filter .case-search { grid-area: search; }

@media (max-width: 1200px) {
  .quick-filter {
    grid-template-columns: 1fr auto;
    grid-template-areas: "tabs tabs" "sort search";
  }
}
.quick-filter .seg { margin-right: auto; }

.case-search {
  position: relative; display: flex; align-items: center;
  height: 46px; flex: 0 1 280px;
}
.case-search input[type=search] {
  width: 100%; height: 100%; padding: 0 40px 0 16px;
  background: rgba(5, 6, 8, .55); border: 1px solid var(--line);
  border-radius: var(--r-s); color: var(--tx); font-size: var(--fs-label);
}
.case-search input::placeholder { color: var(--tx-3); }
.case-search input:focus { outline: none; border-color: var(--line-2); }
.case-search svg {
  position: absolute; right: 14px; width: 16px; height: 16px;
  color: var(--tx-3); pointer-events: none;
}

/* ---- диапазон цены ----

   Два <input type=range> лежат друг на друге в одной капсуле: у HTML нет
   ползунка с двумя ручками, а рисовать свой на указателях — это своя
   обработка касания, клавиатуры и доступности. Здесь всё это уже есть от
   браузера, а перекрытие снимается тем, что дорожки прозрачны и события
   ловят только сами ручки. */
.price-range {
  display: flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 18px;
  background: rgba(5, 6, 8, .55); border: 1px solid var(--line);
  border-radius: var(--r-s);
}
.price-range .pr-lo, .price-range .pr-hi {
  font-size: var(--fs-cap); font-weight: 700; color: var(--tx-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pr-track {
  position: relative; width: clamp(120px, 18vw, 260px); height: 4px;
  border-radius: 999px; background: var(--line-2);
}
/* Заполненная часть между ручками — фон самой дорожки через градиент по
   двум переменным, которые пишет JS. Отдельного элемента не нужно. */
.pr-track::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg,
    transparent var(--a, 0%), var(--or-deep) var(--a, 0%),
    var(--or-deep) var(--b, 100%), transparent var(--b, 100%));
}
.pr-track input[type=range] {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: 20px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: none; pointer-events: none;   /* ловят только ручки */
}
.pr-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
  background: var(--or-deep); border: 2px solid #140a02;
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .55);
}
.pr-track input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 12px; height: 12px; border-radius: 50%; cursor: pointer;
  background: var(--or-deep); border: 2px solid #140a02;
}
@media (max-width: 1000px) { .price-range { display: none; } }

.section-title {
  display: flex; align-items: center; gap: 16px; margin: 6px 0 20px;
}
.section-title::before, .section-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.section-title span {
  font-size: var(--fs-label); font-weight: 900; letter-spacing: .26em; text-transform: uppercase;
  color: var(--tx-2); white-space: nowrap;
}

/* карточка кейса: подпись сверху, арт в середине, цена в рамке снизу

   Поверхность здесь ВОССТАНОВЛЕНА. Раньше в этом правиле стояло
   background: none; border: 0 — и оно перекрывало определение выше, из-за
   чего арт, подпись и цена висели прямо на фоне страницы: ряд читался
   россыпью, а не сеткой, и свечение соседнего ящика заходило на подпись.
   В референсе у карточки есть корпус, и без него композиция рассыпается. */
.case-card {
  padding: 14px 12px 16px;
  background: var(--metal-a);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
/* Ореол — лужа света под самим ящиком, а не заливка всей карточки: из-за
   заливки во всю площадь витрина читалась фиолетовой, хотя палитра
   чёрно-оранжевая. */
.case-card::after {
  left: 0; width: 100%; transform: none;
  top: 22%; height: 58%; opacity: .18;
}
.case-card:hover { transform: translateY(-4px); }
.case-card.on { border-color: var(--or); box-shadow: var(--glow-mid); }
.case-card.on .case-price-box > span { border-color: var(--or); color: var(--or-2); }

.case-head { position: relative; padding: 0 2px 8px; }
.case-name {
  text-align: left; font-size: var(--fs-ui); font-weight: 800; margin: 0;
  text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.case-sub {
  text-align: left; margin: 3px 0 0; font-size: var(--fs-cap); letter-spacing: 0;
  text-transform: none; font-weight: 600; color: var(--tx-3);
  display: flex; align-items: center; gap: 6px;
}
.case-tag {
  font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ac); border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent);
  padding: 1px 5px; border-radius: 4px;
}
.case-owned {
  position: static; font-size: 10px; font-weight: 900; color: #180a00;
  background: var(--or-2); padding: 1px 6px; border-radius: 4px;
}
.case-card .case-art { height: 158px; }
.case-card:hover .case-art { animation: bob 1.6s ease-in-out infinite; }

.case-price-box {
  position: relative; z-index: 3; display: flex; justify-content: center; margin-top: auto;
}
/* Именно > span, а не span. Со второй валютой внутрь капсулы приехали
   вложенные <span class="coin"> и <span class="vh">, и селектор-потомок
   красил их тоже: монета получала min-width 104px и padding 7px 20px, из-за
   чего капсула раздувалась в чёрную полосу вдвое выше нормальной. */
.case-price-box > span {
  min-width: 96px; text-align: center; padding: 8px 20px;
  font-size: var(--fs-body); font-weight: 800; font-variant-numeric: tabular-nums;
  /* Тёмно-оранжевая обводка на почти-чёрном, а не светлая заливка: в
     референсе капсула цены именно такая. */
  color: var(--or-deep); background: rgba(5, 6, 8, .78);
  border: 1px solid color-mix(in srgb, var(--or-deep) 62%, transparent);
  border-radius: var(--r-s);
  transition: color var(--t-micro), box-shadow var(--t-micro), border-color var(--t-micro);
}
.case-card:hover .case-price-box > span {
  color: var(--or-2); border-color: var(--or-deep);
}

/* мини-сетки (баттл, апгрейд кейсов) остаются компактными */

/* ============================================================ строка ролла */

.roll-out {
  margin-top: 12px; min-height: 22px; text-align: center;
  font-size: var(--fs-ui); font-variant-numeric: tabular-nums; color: var(--tx-2);
}
/* Сумма — громкая часть строки. Было наоборот: «Успешный апгрейд!» кричал,
   а то, СКОЛЬКО игрок выиграл, стояло рядом обычным серым. */
.roll-out b { color: var(--tx); font-weight: 900; }
.roll-out .ro-sum {
  font-size: 17px; font-weight: 900; margin-left: 4px;
  color: var(--or-hot); font-variant-numeric: tabular-nums;
}
.roll-out.lose .ro-sum { color: var(--red); }
.roll-out.win b { color: var(--or-2); }
.roll-out.lose b { color: var(--red); }

/* ============================================================ левый блок управления */

.ctl-block {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  background: linear-gradient(180deg, #14141b, #0d0d12);
}
.ctl-line { display: flex; gap: 14px; justify-content: space-around; margin-bottom: 12px; }
.ctl-line .pl-side { min-width: 0; }
.ctl-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.ctl-filters input[type=search] { flex: 1; min-width: 130px; }

/* ============================================================ личный кабинет */

.me-head {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; align-items: center;
  border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px;
  background: linear-gradient(115deg, #17171f, #0c0c11 62%);
  position: relative; overflow: hidden;
}
.me-head::before {
  content: ''; position: absolute; right: -4%; top: -80%; width: 40%; height: 260%;
  background: radial-gradient(ellipse at center, var(--or-glow), transparent 62%);
  opacity: .35; pointer-events: none;
}
.me-ava {
  width: 96px; height: 96px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(150deg, #23232e, #101016);
  border: 1px solid rgba(255, 122, 24, .4);
}
.me-ava svg, .me-ava img { width: 68px; height: 68px; }
.me-id { position: relative; min-width: 0; }
.me-id h1 { font-size: clamp(20px, 2.4vw, 30px); text-transform: uppercase; }
.me-money { position: relative; text-align: right; }
.me-bal { display: flex; flex-direction: column; align-items: flex-end; }
.me-bal .k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 800; }
.me-bal .v { font-size: 30px; font-weight: 900; line-height: 1.05; }
@media (max-width: 820px) { .me-head { grid-template-columns: 1fr; }
  .me-money { text-align: left; } .me-bal { align-items: flex-start; } }

.me-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 980px) { .me-cols { grid-template-columns: 1fr; } }

.sell-row {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.sell-row:last-of-type { border-bottom: 0; }
.sell-k { font-weight: 700; font-size: var(--fs-label); }

/* ============================================================ коллекции */


/* ---- лента кейсов ----

   В референсе кейсы стоят ОДНОЙ ГОРИЗОНТАЛЬНОЙ ЛЕНТОЙ, а не сеткой в три
   колонки: витрина читается как полка с товаром, а не как таблица. Каждый
   раздел («Наши сборки», «Кейсы CS» и прочие) — своя лента.

   Прокрутка горизонтальная с прилипанием: кейсов полторы сотни, и заворачивать
   их в сетку означало страницу на десять экранов. Полоса прокрутки своя —
   системная поверх тёмного фона выглядит инородно. */
.case-grid {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(178px, 13.8vw, 212px);
  grid-template-columns: none;
  gap: 14px;
  max-width: var(--page-max); margin: 0 auto;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(252, 108, 5, .45) transparent;
}
.case-grid > * { scroll-snap-align: start; }
/* Chrome с версии 121 игнорирует ::-webkit-scrollbar, если задан
   scrollbar-width, поэтому оба набора правил стоят рядом намеренно: старым
   сборкам достаётся первый, новым — второй. */
.case-grid::-webkit-scrollbar { height: 8px; }
.case-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 999px; }
.case-grid::-webkit-scrollbar-thumb {
  background: rgba(252, 108, 5, .45); border-radius: 999px;
}
.case-grid::-webkit-scrollbar-thumb:hover { background: rgba(252, 108, 5, .7); }

/* Пропорции по макету: 0.82 против прежних 0.65, арт занимает две трети
   высоты, а не половину. Между ящиком и ценой было шестьдесят пикселей
   воздуха ни подо что — главный объект экрана получал меньше места, чем
   отступы вокруг него. */
.case-card { padding: 13px 10px 14px; --cut: 11px; --edge-c: var(--line-2); }
.case-card .case-art { height: 208px; margin: 8px 0 12px; }

/* Метка линейки и счётчик владения — в углах арта, поверх картинки. */
.case-art .case-tag {
  position: absolute; left: 6px; top: 4px; z-index: 3;
  background: rgba(5, 6, 8, .72); backdrop-filter: blur(3px);
}
.case-art .case-owned { position: absolute; right: 6px; top: 4px; z-index: 3; }

/* Счётчик открытий — в нижнем углу арта. Рядом с ценой он ложился прямо на
   капсулу: та по центру, а счётчик абсолютом справа, и на сорока пикселях
   высоты они не расходятся. */
.case-art .case-opens {
  position: absolute; right: 8px; bottom: 2px; z-index: 3;
  font-size: var(--fs-micro); opacity: .6;
}

.case-card:hover { --edge-c: color-mix(in srgb, var(--ac) 60%, transparent); }

.case-top {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 7px;
  min-height: 20px; padding: 0 2px;
}
.case-opens {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-cap); font-weight: 700; color: var(--tx-3); font-variant-numeric: tabular-nums;
}
.case-opens i { font-style: normal; color: var(--ac); font-size: 10px; }
.case-top .case-tag { margin-left: auto; }

.case-card .case-name {
  text-align: center; font-size: 16px; margin-top: 10px; letter-spacing: .04em;
}
.case-card .case-sub { text-align: center; justify-content: center; font-size: var(--fs-micro); }
.case-card .case-price-box { margin-top: 10px; }
.case-card .case-price-box > span { min-width: 104px; font-size: 16px; padding: 7px 20px; }

/* Аура крутится всегда, но на ховере разгорается. */
.case-aura { opacity: .55; transition: opacity .25s; }
.case-card:hover .case-aura { opacity: 1; }

/* Мини-сетки (баттл, апгрейд кейсов) остаются компактными. */

/* ============================================================ страница кейса */

/* Плиты за ящиком больше нет: сплошная заливка закрывала космос, и кейс
   стоял не в сцене, а на сером прямоугольнике. Осталась только рамка и
   лужа света под самим ящиком — как площадка под объектом в макетах. */
.case-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 26px 26px;
  background: linear-gradient(180deg, rgba(11, 14, 20, .55), rgba(5, 6, 8, .25) 70%);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* Свет под ящиком даёт примитив .eg-stage (класс на .case-hero-art) — своя
   копия того же градиента здесь была третьей по счёту в файле. */
.case-hero > * { position: relative; }
.case-hero h1 {
  font-size: clamp(20px, 2.4vw, 30px); text-transform: uppercase; letter-spacing: .04em;
  text-align: center;
}
.case-back { position: absolute; top: 18px; right: 22px; z-index: 5; }
.case-hero-art {
  /* position обязателен. Внутри лежит .case-photo с position:absolute и
     inset:0 — без опоры здесь он привязывался к .case-slot, а тот высотой
     во всю сцену. Растровая обложка растягивалась по слоту и наезжала на
     ряд выбора количества. */
  position: relative;
  width: min(420px, 76vw); height: 260px;
  --stage-c: var(--ac, var(--or)); --stage-a: .30;
}
.case-hero-art .case-svg { width: 100%; height: 100%; }
/* Обложка держится в коробке арта, а не в своей натуральной высоте.
   Базовое .case-photo задаёт absolute+inset, но на этой странице до него
   дело не доходило: картинка 720x938 разворачивалась на 547px при коробке
   в 260 и ложилась на ряд выбора количества. Здесь это закрыто адресно. */
.case-hero-art .case-photo {
  position: absolute; inset: 0; height: auto;
  display: flex; align-items: center; justify-content: center;
}
.case-hero-art .case-photo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .7));
}
.case-hero .ribbon-row { justify-content: center; margin: 0; }

.count-row { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.count-row button {
  min-width: 54px; padding: 10px 0; cursor: pointer; user-select: none;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px;
  color: var(--tx-2); font: 800 var(--fs-body)/1 inherit; font-variant-numeric: tabular-nums;
  transition: .15s;
}
.count-row button:hover { border-color: var(--or); color: var(--tx); }
.count-row button.on {
  background: linear-gradient(135deg, var(--or-2), var(--or-3));
  border-color: transparent; color: #180a00;
  box-shadow: 0 6px 18px rgba(255, 92, 0, .3);
}

.open-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.open-bar .btn b { color: inherit; font-weight: 900; }

/* ---- ленты ---- */

.reels { width: 100%; display: grid; gap: 10px; }
.reels.md, .reels.sm { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.reels .reel-wrap { margin: 0; }
.reels.lg .reel .item { width: 132px; }
.reels.lg .reel .item-art { height: 66px; }
.reels.md .reel .item { width: 110px; }
.reels.md .reel .item-art { height: 54px; }
.reels.md .reel .item-skin { font-size: var(--fs-micro); }
.reels.sm .reel .item { width: 92px; }
.reels.sm .reel .item-art { height: 44px; }
.reels.sm .reel .item-skin { font-size: 10px; }
.reels.sm .reel .item-name { font-size: 10px; }
.reels.sm .reel-wrap { padding: 8px 0; }

#caseResult { margin-top: 16px; }
#caseResult .result-banner { margin-bottom: 12px; }

/* ============================================================ картинки скинов

   Настоящие изображения предметов из CDN Steam. Габариты те же, что у
   векторного запасного варианта, чтобы карточки не прыгали при подмене. */

/* Снимки Steam квадратные, а оружие лежит узкой полосой посередине —
   вокруг него пустое поле. Поэтому в широких боксах кадрируем по ширине
   (cover срезает только прозрачные поля), а в высоких вписываем целиком.

   Раньше это выходило случайно: контейнеры были grid со строкой auto,
   проценты считались от самой картинки, и она распирала бокс, а overflow
   её обрезал. В трофее обрезать было нечему — и ствол ложился на подпись. */
.skin-img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
}
.item-art .skin-img { padding: 1px; }

/* ============================================================ кабинет в шапке */

.account {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 5px 14px 5px 6px; border-radius: 12px;
  background: linear-gradient(135deg, #1c1c25, #121218);
  border: 1px solid var(--line-2); color: var(--tx);
  transition: border-color .18s, transform .12s, box-shadow .18s;
}
.account:hover {
  border-color: var(--or); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 122, 24, .22);
}
.account-ava {
  width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  border-radius: 9px; background: #0d0d12; border: 1px solid rgba(255, 122, 24, .35);
}
.account-ava svg, .account-ava img { width: 22px; height: 22px; }
.account-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.account-txt b { font-size: var(--fs-label); font-weight: 800; }
.account-txt small { font-size: var(--fs-micro); color: var(--or-2); font-variant-numeric: tabular-nums; }

/* Гостю эта кнопка — единственный вход на сайт, поэтому она не «ещё один
   пункт шапки», а призыв: оранжевая кромка и заметная подсветка. */
.account.guest {
  border-color: rgba(255, 122, 24, .55);
  background: linear-gradient(135deg, rgba(255, 122, 24, .18), rgba(255, 92, 0, .07));
  box-shadow: 0 4px 18px rgba(255, 122, 24, .18);
}
.account.guest .account-txt b { color: var(--or-2); }

/* ============================================================ витрина по центру */


.quick-filter { max-width: var(--page-max); margin-left: auto; margin-right: auto; }

/* На широких экранах карточки не растягиваются, а держат размер и центруются. */
@media (min-width: 1500px) {
}

/* ============================================================ кейс: арт ⇄ лента */

.case-slot { position: relative; width: 100%; display: grid; place-items: center; }
/* Переключение без анимаций: ящик просто уступает место ленте, а лента —
   тому, что выпало. Раньше ящик ужимался и таял, а лента разворачивалась
   из полоски, и на быстрых открытиях это только мешало. */
.case-slot #caseReels, .case-slot #caseDrop { width: 100%; }
.case-slot:not(.opening) #caseReels,
.case-slot.done #caseReels { display: none; }
.case-slot.opening .case-hero-art { display: none; }
.case-slot:not(.done) #caseDrop { display: none; }

/* ============================================================ крупные карточки */

.grid.lg { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px; }
.grid.lg .item { padding: 10px; }
.grid.lg .item-art { height: 118px; }
.grid.lg .item-name { font-size: var(--fs-label); }
.grid.lg .item-skin { font-size: var(--fs-ui); margin-bottom: 7px; }
.grid.lg .item-price { font-size: var(--fs-ui); }

/* ============================================================ ставка в слоте */

.cash-line {
  display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: center;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
}
.cl-k {
  grid-column: 1 / -1; font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 800;
}
.cl-num { width: 96px; text-align: right; padding: 6px 9px !important; font-size: var(--fs-label) !important; }
/* Плашка цены стоит у нижнего края обоих слотов — так «Ставка» и «Цель»
   читаются одной строкой, а не лесенкой. */
.slot .ribbon { margin-top: 0; }
.cash-line { margin-top: 0; }

.ring-wrap #btnUpgrade { margin-top: 12px; max-width: 340px; }

/* ============================================================ анимации */

/* Появление карточек в сетках — короткой волной, без назойливости. */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.grid .item, .case-grid .case-card {
  animation: cardIn .34s cubic-bezier(.2, .8, .3, 1) both;
}
.grid .item:nth-child(1),  .case-grid .case-card:nth-child(1)  { animation-delay: .00s; }
.grid .item:nth-child(2),  .case-grid .case-card:nth-child(2)  { animation-delay: .03s; }
.grid .item:nth-child(3),  .case-grid .case-card:nth-child(3)  { animation-delay: .06s; }
.grid .item:nth-child(4),  .case-grid .case-card:nth-child(4)  { animation-delay: .09s; }
.grid .item:nth-child(5),  .case-grid .case-card:nth-child(5)  { animation-delay: .12s; }
.grid .item:nth-child(6)  { animation-delay: .15s; }
.grid .item:nth-child(7)  { animation-delay: .18s; }
.grid .item:nth-child(n+8) { animation-delay: .2s; }
/* В ленте прокрутки анимация появления только мешает. */
.reel .item { animation: none !important; }

/* Блик по кнопке действия */
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after {
  content: ''; position: absolute; top: -60%; left: -30%; width: 26%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: rotate(18deg); pointer-events: none;
  animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine {
  0%, 62% { left: -30%; }
  86%, 100% { left: 125%; }
}

/* Панели въезжают при смене страницы */
.page.on > * { animation: fade .3s ease both; }
/* Кроме тех, что показывает JS, когда придут данные. У анимации
   fill-mode both: до старта она держит НАЧАЛЬНОЕ состояние, то есть
   прозрачность ноль. Для блока, который появляется позже входа на
   страницу, это значит, что не доигравшая по любой причине анимация
   оставляет его невидимым навсегда. Решать, виден ли кабинет,
   декоративный эффект не должен. */
.page.on > .no-enter { animation: none; }
.page.on > *:nth-child(2) { animation-delay: .04s; }
.page.on > *:nth-child(3) { animation-delay: .08s; }

.nav-btn { position: relative; }
.nav-btn.on::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px;
  border-radius: 2px; background: var(--or);
  animation: navIn .25s ease both;
}
@keyframes navIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.stat-chip .v { transition: color .2s; }
.item:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================ живая лента

   Карточки въезжают слева и раздвигают соседей: лента читается как поток,
   а не как застывший ряд. */

@keyframes feedIn {
  0%   { opacity: 0; transform: translateX(-118px) scale(.82); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* Строка с ником — своя высота и своё место в колонке. Раньше она наезжала
   на картинку: у карточки flex-колонка, и картинка сжималась под ник. */
.fi-user {
  display: flex; align-items: center; gap: 5px;
  flex: none; height: 20px; margin-bottom: 4px;
  font-size: 10px; color: var(--tx-3); font-weight: 700;
  overflow: hidden;
}
@keyframes feedPulse {
  50% { box-shadow: 0 0 0 1px var(--rc), 0 0 34px -2px var(--rc); }
}

/* ============================================================ промо-блок */

@keyframes rays { to { transform: rotate(360deg); } }


/* ============================================================ маскоты */

.mascot .mascot-svg, .mascot .mascot-img { height: 190px; }

/* ============================================================ трофей

   Картинка слева, подписи справа. Раньше было столбиком, и снимок предмета
   в 256px не помещался в бокс на 132px: он вылезал вниз и ложился прямо на
   название. Теперь у бокса свои размеры, а у картинки жёсткий потолок. */

.trophy { margin-top: 16px; }
.trophy-empty {
  width: 100%; text-align: center; padding: 26px; color: var(--tx-3); font-size: var(--fs-label);
  border: 1px dashed var(--line-2); border-radius: 16px;
}
.trophy-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 18px 24px;
  border: 1px solid var(--rc, var(--line-2)); border-radius: 18px;
  background: linear-gradient(110deg, #16161f, #0b0b10 68%);
}
.trophy-card::after {
  content: ''; position: absolute; left: 90px; top: 50%;
  width: 320px; height: 320px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--rc), transparent 62%);
  opacity: .16; pointer-events: none;
}
.trophy-card > * { position: relative; }

.trophy-art {
  flex: 0 0 168px; width: 168px; height: 116px;
  display: flex; align-items: center; justify-content: center;
}
.trophy-art .skin-svg { width: 100%; height: 100%; }

.trophy-body { flex: 1; min-width: 210px; }
.trophy-label {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 800; margin-bottom: 3px;
}
.trophy-name { font-size: var(--fs-cap); color: var(--tx-3); font-weight: 700; text-transform: uppercase; }
.trophy-name b { display: block; font-size: 20px; color: var(--tx); text-transform: none; }
.trophy-stats { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.trophy-stats .ts {
  display: flex; flex-direction: column; gap: 1px; min-width: 86px;
  padding: 7px 13px; background: #0e0e14; border: 1px solid var(--line);
  border-radius: 10px;
}
.trophy-stats .k {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 800;
}
.trophy-stats .v { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.trophy-from { margin-top: 10px; font-size: var(--fs-cap); color: var(--tx-3); }

/* Личный Steam рядом с именем в шапке кабинета. */
.me-steam {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 7px;
  padding: 4px 10px 4px 5px; border-radius: 999px; text-decoration: none;
  background: var(--panel-3); border: 1px solid var(--line-2);
  font-size: var(--fs-cap); color: var(--tx);
  transition: border-color .15s;
}
.me-steam:hover { border-color: #4b9bff; }
.me-steam img { border-radius: 50%; display: block; }
.me-steam .dim { font-size: 10px; }

/* ============================================================ инвентарь в кабинете */

.inv-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv-bar input[type=search] { min-width: 150px; }
.sel-info { font-size: var(--fs-label); color: var(--tx-2); }

/* ============================================================ шапка без чипов */

.top { padding: 10px 20px; }
.account { padding: 6px 16px 6px 7px; }

/* ============================================================ задания дня */

.quests {
  margin-top: 14px; padding: 12px 10px;
  border: 1px solid rgba(255, 122, 24, .28); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 122, 24, .07), transparent 70%);
}
.quests-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--or-2); font-weight: 900; margin-bottom: 10px;
}
.quests-ready {
  min-width: 18px; height: 18px; border-radius: 9px; display: none;
  place-items: center; font-size: var(--fs-micro); letter-spacing: 0;
  background: var(--or); color: #180a00;
}
.quests-ready.on { display: grid; animation: questPop .4s cubic-bezier(.2,1.5,.4,1); }
@keyframes questPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.quest { padding: 8px 0; border-bottom: 1px solid rgba(255, 122, 24, .12); }
.quest:last-child { border-bottom: 0; padding-bottom: 0; }
.q-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.q-title { font-size: var(--fs-cap); font-weight: 700; color: var(--tx); line-height: 1.3; }
.q-num { font-size: var(--fs-micro); font-weight: 800; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.q-bar {
  height: 4px; border-radius: 3px; background: #1c1c24; overflow: hidden; margin: 6px 0 5px;
}
.q-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--or-2), var(--or-3));
  transition: width .5s cubic-bezier(.2, .8, .3, 1);
}
.q-reward, .q-got { font-size: var(--fs-micro); color: var(--tx-3); }
.quest.done .q-title { color: var(--or-2); }
.quest.claimed { opacity: .5; }
.q-got { color: var(--green); }
.q-claim {
  width: 100%; margin-top: 2px; padding: 5px 8px; cursor: pointer;
  border: 0; border-radius: 7px; font: 800 var(--fs-cap)/1 inherit;
  background: linear-gradient(135deg, var(--or-2), var(--or-3)); color: #180a00;
  animation: claimPulse 1.8s ease-in-out infinite;
}
@keyframes claimPulse {
  50% { box-shadow: 0 0 0 4px rgba(255, 122, 24, .16); }
}

/* ============================================================ правки раскладки */

/* Ровно четыре кейса в ряд, с понижением на узких экранах. */

/* Лучи вращались вокруг центра блока, а исходили из точки сбоку — картинка
   болталась. Теперь это отдельный круг за персонажем: центр вращения и
   центр градиента совпадают. */
@keyframes spinRays { to { transform: rotate(360deg); } }

/* Скин в живой ленте по центру карточки, а не прижат книзу. */

/* ============================================================ онлайн */

.online {
  display: flex; align-items: center; gap: 7px;
  margin: -10px 8px 14px; font-size: var(--fs-cap); color: var(--tx-3); font-weight: 600;
}
.online b { color: var(--tx); font-variant-numeric: tabular-nums; }
.online-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: pulse 2s infinite;
}

/* ============================================================ блокировка на время ролла */

.page.rolling .slot-body,
.page.rolling .grid,
.page.rolling .preset-row,
.page.rolling .case-grid,
.page.rolling .cash-line,
.page.rolling .ctl-filters { pointer-events: none; opacity: .55; filter: saturate(.6); }
/* Пустое состояние из-под блокировки выведено: пока крутится ролл, сетка
   глохнет целиком, и ссылка «открыть пару кейсов» вместе с ней. Менять там
   нечего — предметов нет, — а уйти за кейсами игрок должен мочь всегда. */
.page.rolling .up-empty { pointer-events: auto; opacity: 1; filter: none; }
.page.rolling .ring-wrap { pointer-events: none; }

/* ============================================================ ленты кейсов */

/* ============================================================ результат открытия */

/* Ровно четыре предмета в ряд — 10 дропов ложатся как 4 + 4 + 2. */
.drop-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  max-width: 900px; margin: 0 auto;
}
@media (max-width: 720px) { .drop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.drop-grid .item-art { height: 84px; }
.drop-sell {
  position: relative; z-index: 3; width: 100%; margin-top: 8px; padding: 6px 8px;
  cursor: pointer; border: 1px solid rgba(53, 208, 127, .45); border-radius: 7px;
  background: rgba(53, 208, 127, .1); color: #8ceab8;
  font: 800 var(--fs-cap)/1 inherit; transition: background .15s, color .15s;
}
.drop-sell:hover { background: var(--green); color: #06210f; }
.drop-grid .item.sold { opacity: .35; pointer-events: none; }
.drop-grid .item.sold .drop-sell { visibility: hidden; }
.drop-foot { display: flex; justify-content: center; margin-top: 14px; }
@keyframes hitIn {
  from { opacity: 0; transform: translateY(-16px) scale(.8); }
  to { opacity: 1; transform: none; }
}

/* ============================================================ размеры лент

   Чем больше кейсов открывается разом, тем мельче карточки: десять полос
   обычного размера не влезали на экран и требовали прокрутки во время
   анимации. Шаги здесь должны совпадать с REEL_TIERS в cases.js. */

.reels { grid-template-columns: 1fr; max-height: none; overflow: visible; }

.reels.r1 .reel .item { width: 132px; }
.reels.r1 .reel .item-art { height: 66px; }

.reels.r2 .reel-wrap { padding: 10px 0; }
.reels.r2 .reel .item { width: 108px; padding: 6px; }
.reels.r2 .reel .item-art { height: 50px; }
.reels.r2 .reel .item-skin { font-size: var(--fs-micro); margin-bottom: 3px; }

/* ============================================================ подвал результата */

.drop-foot { gap: 10px; }

/* ============================================================ бонусное кольцо

   Внутреннее колесо на пять секторов. Крутится первым, добавляет проценты
   к основному шансу — бонусная часть дуги рисуется другим цветом. */

.r-bonus { transition: opacity .35s ease; }
.r-bonus-disc { transform-origin: 110px 110px; }
.r-bonus .bs path { transition: filter .2s, opacity .2s; }
.r-bonus .bs-label {
  font: 900 var(--fs-body)/1 'Segoe UI', system-ui, sans-serif;
  fill: var(--tx-2); pointer-events: none;
}
.r-bonus .bs.wild .bs-label { fill: #2a1400; }
/* Попадание подсвечивается СВЕЧЕНИЕМ, а не яркостью. brightness(1.6) на
   оранжевом секторе загонял его в лимонно-белый (#f3f299 на замере) — то
   есть цвет попадания задавал не градиент, а фильтр, и это был цвет не из
   палитры. Теперь жар даёт ореол, а сектор остаётся оранжевым. */
.r-bonus .bs.hit path {
  filter: brightness(1.12) saturate(1.1) drop-shadow(0 0 8px var(--or));
}
.r-bonus .bs.hit .bs-label { fill: #fff; }
.r-bonus-ptr { filter: drop-shadow(0 0 5px rgba(0, 0, 0, .8)); }

/* Пока идёт бонус, крупное число ужимается — ровно настолько, чтобы
   помещаться в дыру барабана.

   Прятать его я пробовал и отказался: по журналу фаз bonus-flow приходит
   ЕЩЁ ДО того, как барабан уедет с экрана, а именно на нём число и должно
   вернуться — прятать было бы нечем, любое :not(.bonus-flow) снова
   открывает число поверх секторов.

   Числа. Дыра барабана — 36 единиц радиуса при viewBox 220, то есть на
   кольце в 300 пикселей это 98 пикселей в поперечнике. «35.58%» в 38
   пикселях занимает около 130 — не лезет по ширине, хотя по высоте
   помещается с запасом. В 26 выходит около 89 и умещается целиком.

   В исходе ужимание снимается: там число — это ответ, и оно возвращается к
   своему полному размеру. */
.ring.bonus-spin .ring-val,
.ring.bonus-on:not(.win):not(.lose) .ring-val { font-size: 22px; }
.ring-note .bn-base { color: var(--tx-2); font-variant-numeric: tabular-nums; }
.ring-note .bn-plus {
  color: #ff7a18; font-weight: 900;
  animation: bnPop .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.ring-note .bn-eq { color: var(--or-2); font-weight: 900; }
@keyframes bnPop {
  0% { opacity: 0; transform: translateY(8px) scale(.6); }
  100% { opacity: 1; transform: none; }
}

.bonus-hint {
  margin-top: 6px; text-align: center; font-size: var(--fs-cap); color: var(--tx-3);
  line-height: 1.5;
}
.bonus-hint b { color: var(--tx-2); font-weight: 800; }

/* ============================================================ два кольца вместе

   Внутреннее колесо появляется с наездом и уходит, «передавая» проценты
   внешнему кольцу. Пока крутится бонус, внешнее приглушено — взгляд там,
   где сейчас событие. */

.r-bonus {
  transform-origin: 110px 110px;
  transform: scale(.62);
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, 1.4, .4, 1);
}
.r-bonus.in { transform: scale(1); }

.ring.bonus-spin .r-zone,
.ring.bonus-spin .r-zone-glow { opacity: .28; transition: opacity .3s; }
.ring.bonus-spin .ring-val { opacity: .45; transition: opacity .3s; }

/* Попадание в сектор: вспышка внутри кольца */
.ring.bonus-hit .r-bonus .bs.hit path {
  animation: sectorHit .7s cubic-bezier(.2, 1.4, .4, 1);
}
/* Та же причина, что и выше: brightness(3) выбеливал сектор в белый лист.
   Вспышку теперь делает ореол, который гаснет, а не потеря цвета. */
@keyframes sectorHit {
  0% { filter: brightness(1.5) saturate(1.2) drop-shadow(0 0 22px var(--or-hot)); }
  100% { filter: brightness(1.12) saturate(1.1) drop-shadow(0 0 8px var(--or)); }
}

/* Перелив: внутреннее кольцо раздувается и тает, внешнее подхватывает */
.ring.bonus-flow .r-bonus {
  transform: scale(1.24); opacity: 0;
  transition: opacity .55s ease, transform .55s cubic-bezier(.3, 0, .2, 1);
}
/* Только drop-shadow: между url(#…) и drop-shadow браузер интерполировать
   не умеет и переключается скачком, а в конце оставлял на дуге гауссов
   блюр — из-за этого она после ролла выглядела размытой. */
.ring.bonus-flow .r-zone-bonus { animation: bonusPulse .9s ease; }
@keyframes bonusPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 122, 24, .5)); }
  40% { filter: drop-shadow(0 0 16px #ff7a18); }
}
.ring.bonus-flow .ring-val { opacity: 1; }

/* ============================================================ экран входа

   Витрина слева, форма справа. Всё, что шевелится, крутится на CSS: экран
   висит до входа сколько угодно, и держать ради него rAF-цикл незачем. */

.gate {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 28px; overflow: auto;
  /* Не глухая заливка: окно поднимается ПОВЕРХ того, что гость смотрел, и
     сайт обязан оставаться на месте — иначе закрытие крестиком читается как
     переход куда-то ещё, а не как «вернулись, откуда пришли». */
  background: rgba(8, 8, 10, .93);
  backdrop-filter: blur(9px);
}

/* Прокрутку страницы под окном придерживаем: колесо должно листать окно. */
body.locked { overflow: hidden; }

/* Крестик: одного размера с окном, а не с текстом — по нему промахиваются. */
.gate-close {
  position: absolute; top: 18px; right: 20px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1; color: var(--tx-2);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2);
  cursor: pointer; transition: .16s;
}
.gate-close:hover {
  color: var(--tx); background: rgba(255, 255, 255, .1);
  border-color: var(--or); transform: rotate(90deg);
}

/* Зачем окно открылось — первой строкой карточки, до кнопки Steam. */
.gate-note {
  margin: 0 0 14px; padding: 10px 13px; border-radius: 11px;
  font-size: var(--fs-label); line-height: 1.45; color: var(--or-2);
  background: var(--or-soft); border: 1px solid rgba(255, 122, 24, .3);
}

/* ---------------------------------------------------------- гостевой режим

   Подписи кнопок подменяет guest.js, а класс ниже говорит глазу, что кнопка
   не сломана и не отключена: она просто ведёт в другое место. Нарочно не
   серая — выключенную кнопку не нажимают, а нам нужно ровно нажатие. */

.auth-cta {
  color: var(--or-2) !important;
  background: linear-gradient(135deg, rgba(255, 122, 24, .16),
                                      rgba(255, 122, 24, .06)) !important;
  border: 1px solid rgba(255, 122, 24, .45) !important;
  box-shadow: none !important;
  letter-spacing: .02em;
  cursor: pointer;
  opacity: 1 !important;
}
.auth-cta:hover { color: #fff !important; border-color: var(--or) !important; }

/* Подсказка на месте того, что гостю показать нечем: инвентарь, задания,
   партнёрский кабинет. Пустой блок читается как поломка, а не как «сначала
   войди» — поэтому текст, а не пустота. */
.guest-hint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 14px; border-radius: var(--r-s);
  font-size: var(--fs-label); line-height: 1.5; color: var(--tx-2);
  background: var(--panel-2); border: 1px dashed var(--line-2);
}
/* В узкой колонке (боковое меню) кнопка уходит на свою строку во всю ширину:
   иначе текст сминается в четыре слова по строке, а кнопка — в столбик букв. */
.guest-hint > span { flex: 1 1 150px; min-width: 0; }
.guest-hint b { color: var(--or-2); font-weight: 800; }
/* На месте плиток подсказка занимает всю строку сетки, а не одну ячейку. */
.stat-tiles .guest-hint { grid-column: 1 / -1; }
/* Выходить гостю неоткуда: кнопка в кабинете есть только у вошедшего. */
body.guest .me-out { display: none; }
/* Двух одинаковых «Авторизуйтесь» рядом быть не должно: гостю разница между
   обычным открытием и быстрым не нужна, ему нужен вход. */
body.guest #caseOpenFast { display: none; }
.guest-hint button {
  /* Растёт до потолка: в боковом меню занимает строку целиком, на широкой
     карточке остаётся кнопкой, а не полосой во весь блок. */
  flex: 1 0 auto; max-width: 240px; margin-left: auto;
  padding: 8px 14px; border-radius: var(--r-s);
  font: 800 var(--fs-cap)/1 inherit; color: #180a00; cursor: pointer; border: 0;
  background: linear-gradient(135deg, var(--or-2), var(--or-3));
}
.guest-hint button:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------- фон */

.gate-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.gate-orb {
  position: absolute; border-radius: 50%; filter: blur(90px);
  will-change: transform;
}
.gate-orb.o1 {
  width: 640px; height: 640px; top: -240px; left: -140px;
  background: radial-gradient(circle, rgba(255,122,24,.30), transparent 68%);
  animation: orb-a 26s ease-in-out infinite;
}
.gate-orb.o2 {
  width: 560px; height: 560px; bottom: -220px; right: -120px;
  background: radial-gradient(circle, rgba(255,92,0,.24), transparent 68%);
  animation: orb-b 32s ease-in-out infinite;
}
.gate-orb.o3 {
  width: 420px; height: 420px; top: 42%; left: 46%;
  background: radial-gradient(circle, rgba(255,180,60,.14), transparent 70%);
  animation: orb-c 22s ease-in-out infinite;
}
@keyframes orb-a { 50% { transform: translate(120px, 90px) scale(1.15); } }
@keyframes orb-b { 50% { transform: translate(-110px, -70px) scale(1.1); } }
@keyframes orb-c { 50% { transform: translate(-90px, 60px) scale(1.2); } }

/* Сетка арены: уходит в перспективу и медленно плывёт на зрителя. */
.gate-grid {
  position: absolute; inset: 38% -60% -30%;
  background-image:
    linear-gradient(rgba(255,122,24,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,122,24,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(64deg);
  mask-image: linear-gradient(transparent, #000 45%, transparent);
  animation: grid-run 3.6s linear infinite;
}
@keyframes grid-run { to { background-position: 0 64px, 0 0; } }

/* Угли: элементы создаёт JS, каждому свои задержка и дрейф. */
.embers { position: absolute; inset: 0; }
.ember {
  position: absolute; bottom: -14px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--or-2); box-shadow: 0 0 8px 2px rgba(255,138,31,.55);
  animation: ember-up linear infinite;
}
@keyframes ember-up {
  0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
  12%  { opacity: .9; }
  75%  { opacity: .55; }
  100% { transform: translate(var(--dx, 30px), -104vh) scale(1); opacity: 0; }
}

/* ---------------------------------------------------------- раскладка */

.gate-wrap {
  position: relative; display: grid; gap: 44px;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: center; width: 100%; max-width: 1060px;
}

/* Появление: блоки въезжают по очереди, а не все разом. */
.gate-show, .gate-card { animation: gate-in .7s cubic-bezier(.2, .8, .25, 1) both; }
.gate-show { animation-delay: .05s; }
.gate-card { animation-delay: .18s; }
@keyframes gate-in {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
}

.gate-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.gate-brand svg { display: block; }

.gate-claim {
  margin: 20px 0 10px; font-size: 40px; line-height: 1.06;
  font-weight: 800; letter-spacing: -.02em; color: var(--tx);
}
.gate-claim em {
  font-style: normal;
  background: linear-gradient(96deg, var(--or-2), var(--or), var(--or-3), var(--or-2));
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: claim-sweep 5s linear infinite;
}
@keyframes claim-sweep { to { background-position: 260% 0; } }

.gate-sub { margin: 0; max-width: 380px; font-size: var(--fs-ui); line-height: 1.55; color: var(--tx-2); }

/* ---------------------------------------------------------- сцена маскота */

.gate-stage {
  position: relative; height: 250px; margin: 4px 0 2px;
  display: flex; align-items: flex-end; justify-content: center;
}

/* Кольца вокруг маскота — намёк на кольцо ролла с главного экрана. */
.gate-ring {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,122,24,.18);
}
.gate-ring.r1 {
  width: 232px; height: 232px;
  border-top-color: var(--or); border-right-color: rgba(255,122,24,.5);
  animation: ring-spin 14s linear infinite;
}
.gate-ring.r2 {
  width: 292px; height: 292px; border-style: dashed;
  border-color: rgba(255,122,24,.12); border-bottom-color: rgba(255,168,56,.4);
  animation: ring-spin 26s linear infinite reverse;
}
@keyframes ring-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.gate-pedestal {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 190px; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,122,24,.34), transparent 70%);
  animation: ped-pulse 3.6s ease-in-out infinite;
}
@keyframes ped-pulse { 50% { width: 158px; opacity: .7; } }

/* Маскот следит за курсором — сдвиг задаёт JS в переменных. */
.gate-hero {
  position: relative; height: 100%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .5s cubic-bezier(.2, .8, .25, 1);
}
.hero-mascot { height: 100%; width: auto; display: block; overflow: visible; }

#hm-float { animation: hm-float 4.2s ease-in-out infinite; transform-origin: 120px 150px; }
@keyframes hm-float {
  50% { transform: translateY(-11px) rotate(1.2deg); }
}

.hm-halo { animation: hm-halo 4.2s ease-in-out infinite; transform-origin: 120px 120px; }
@keyframes hm-halo { 50% { opacity: .55; transform: scale(1.09); } }

#hm-shadow { animation: hm-shadow 4.2s ease-in-out infinite; }
@keyframes hm-shadow { 50% { rx: 48; opacity: .16; } }

#hm-core { animation: hm-core 2.6s ease-in-out infinite; transform-origin: 120px 161px; }
@keyframes hm-core { 50% { transform: scale(1.16); opacity: .82; } }

/* Зрачки ведёт JS, поэтому им нужен только плавный переход. */
#hm-pupils { transition: transform .35s cubic-bezier(.2, .8, .25, 1); }

/* Веки: моргание — раскрытие прямоугольников сверху. */
#hm-lids rect { animation: hm-blink 6.4s ease-in-out infinite; }
#hm-lids rect:nth-child(2) { animation-delay: .04s; }
@keyframes hm-blink {
  0%, 92%, 100% { height: 0; }
  95%, 97%      { height: 30px; }
}

/* Искры: каждая по своей орбите. */
#hm-sparks .sp { animation: sp-drift 5s ease-in-out infinite; transform-origin: 120px 140px; }
.sp.s1 { animation-duration: 5.4s; }
.sp.s2 { animation-duration: 6.8s; animation-delay: -1.2s; }
.sp.s3 { animation-duration: 4.6s; animation-delay: -2.4s; }
.sp.s4 { animation-duration: 7.4s; animation-delay: -.7s; }
.sp.s5 { animation-duration: 5.9s; animation-delay: -3.1s; }
.sp.s6 { animation-duration: 6.2s; animation-delay: -1.8s; }
@keyframes sp-drift {
  50% { transform: translateY(-16px) scale(1.5); opacity: .35; }
}

/* Руки к глазам — пароль. Ради этого маскот тут и стоит.

   fill-box: поворот идёт вокруг центра самой руки, а не угла всего SVG.
   Сдвиги посчитаны так, чтобы ладонь после поворота села ровно на глаз. */
#hm-armL, #hm-armR {
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: transform .42s cubic-bezier(.34, 1.5, .5, 1);
}
#hm.shy  #hm-armL { transform: translate(12px, -82px) rotate(-14deg); }
#hm.shy  #hm-armR { transform: translate(-12px, -82px) rotate(14deg); }
/* Подглядывает: правая ладонь съехала со щели. */
#hm.peek #hm-armL { transform: translate(12px, -82px) rotate(-14deg); }
#hm.peek #hm-armR { transform: translate(2px, -56px) rotate(30deg); }

#hm.win #hm-armL { transform: translate(-24px, -105px) rotate(-44deg); }
#hm.win #hm-armR { transform: translate(24px, -105px) rotate(44deg); }
#hm.win #hm-float { animation: hm-cheer .55s cubic-bezier(.3, 1.6, .5, 1) 2; }
@keyframes hm-cheer { 50% { transform: translateY(-26px) scale(1.05); } }
#hm.win #hm-sparks .sp { animation: sp-burst .8s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes sp-burst {
  0%   { transform: scale(.4); opacity: 1; }
  100% { transform: scale(3.4) translateY(-30px); opacity: 0; }
}

#hm.oops #hm-float { animation: hm-shake .42s ease-in-out both; }
@keyframes hm-shake {
  20%, 60% { transform: translateX(-9px) rotate(-3deg); }
  40%, 80% { transform: translateX(9px) rotate(3deg); }
}
#hm.oops #hm-core { fill: #ff4d5e; }

/* Реплики маскота: короткие, появляются над сценой. */
.gate-bubble {
  position: absolute; top: 2px; left: 50%; transform: translate(-50%, -8px) scale(.9);
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(20, 20, 26, .92); border: 1px solid var(--line-2);
  color: var(--tx); font-size: var(--fs-cap); font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.34, 1.5, .5, 1);
}
.gate-bubble.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.gate-bubble.err { border-color: rgba(255, 77, 94, .5); color: #ffb3ba; }

/* ---------------------------------------------------------- цифры и лента */

.gate-stats { display: flex; gap: 26px; margin: 22px 0 18px; }
.gs { display: flex; flex-direction: column; gap: 2px; }
.gs b {
  font-size: 21px; font-weight: 800; color: var(--or-2);
  font-variant-numeric: tabular-nums;
}
.gs span { font-size: var(--fs-micro); color: var(--tx-3); }

/* Лента настоящих предметов из каталога: едет бесконечно, дублируясь. */
.gate-strip { position: relative; overflow: hidden; height: 66px; mask-image: none; }
.gate-strip-fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--bg), transparent 12%,
                               transparent 88%, var(--bg));
}
.gate-strip-track {
  display: flex; gap: 10px; width: max-content;
  animation: strip-run 42s linear infinite;
}
.gate-strip:hover .gate-strip-track { animation-play-state: paused; }
@keyframes strip-run { to { transform: translateX(-50%); } }

.gitem {
  display: flex; align-items: center; gap: 9px; padding: 8px 13px 8px 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 2px solid var(--gc, var(--or)); border-radius: 10px;
}
.gitem img { width: 42px; height: 32px; object-fit: contain; }
.gitem-tx { display: flex; flex-direction: column; line-height: 1.25; }
.gitem-tx i { font-style: normal; font-size: 10px; color: var(--tx-3); }
.gitem-tx b { font-size: var(--fs-cap); font-weight: 600; color: var(--tx); }
.gitem-pr { font-size: var(--fs-cap); font-weight: 700; color: var(--or-2); white-space: nowrap; }

/* ---------------------------------------------------------- карточка формы */

.gate-card {
  position: relative; padding: 32px 30px 22px; border-radius: 22px;
  background: linear-gradient(170deg, rgba(28,28,36,.94), rgba(16,16,21,.97));
  border: 1px solid var(--line-2);
  box-shadow: 0 26px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}
/* Тонкая оранжевая кромка сверху — как подсветка на карточках кейсов. */
.gate-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: 22px; padding: 1px;
  background: linear-gradient(160deg, rgba(255,122,24,.55), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.gate-card form > *, .gate-foot { animation: fld-in .5s ease both; }
.gate-card [data-i="1"] { animation-delay: .30s; }
.gate-card [data-i="2"] { animation-delay: .36s; }
.gate-card [data-i="3"] { animation-delay: .42s; }
.gate-card [data-i="4"] { animation-delay: .48s; }
.gate-card [data-i="5"] { animation-delay: .54s; }
@keyframes fld-in { from { opacity: 0; transform: translateY(9px); } }

/* Переключатель: подложка-таблетка едет под активную вкладку. */
.gate-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin-bottom: 22px; padding: 4px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.gate-tabs-pill {
  position: absolute; top: 4px; left: 4px; height: calc(100% - 8px);
  width: calc(50% - 6px); border-radius: 9px;
  background: linear-gradient(180deg, var(--or-2), var(--or-3));
  box-shadow: 0 4px 14px rgba(255,92,0,.35);
  transition: transform .34s cubic-bezier(.34, 1.4, .5, 1);
}
.gate-tabs.reg .gate-tabs-pill { transform: translateX(calc(100% + 4px)); }
.gate-tabs button {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
  padding: 10px 0; border-radius: 9px; color: var(--tx-2);
  font: 600 var(--fs-label)/1 inherit; transition: color .2s;
}
.gate-tabs button.on { color: #170800; }
.gate-tabs button:not(.on):hover { color: var(--tx); }

/* ---------------------------------------------------------- поля */

.gfld { position: relative; display: block; margin-bottom: 15px; }
.gfld input {
  width: 100%; box-sizing: border-box; padding: 20px 42px 9px 14px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px;
  color: var(--tx); font: var(--fs-ui)/1.2 inherit; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.gfld input:focus { border-color: var(--or); box-shadow: 0 0 0 3px var(--or-soft); }
.gfld input:-webkit-autofill {
  -webkit-text-fill-color: var(--tx);
  -webkit-box-shadow: 0 0 0 40px #14141a inset;
}

/* Подпись уезжает наверх, когда в поле что-то есть или оно в фокусе. */
.gfld-lb {
  position: absolute; left: 15px; top: 15px; pointer-events: none;
  font-size: var(--fs-ui); color: var(--tx-3);
  transform-origin: left top;
  transition: transform .2s cubic-bezier(.2,.8,.25,1), color .2s;
}
.gfld input:focus ~ .gfld-lb,
.gfld input:not(:placeholder-shown) ~ .gfld-lb {
  transform: translateY(-9px) scale(.76);
}
.gfld input:focus ~ .gfld-lb { color: var(--or-2); }

.gfld-ic, .gfld-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: var(--fs-body); color: var(--tx-3); line-height: 1;
}
.gfld-eye {
  border: 0; background: transparent; cursor: pointer; padding: 4px;
  transition: color .2s;
}
.gfld-eye:hover, .gfld-eye.on { color: var(--or); }

/* ---------------------------------------------------------- кнопка и подвал */

.gate-err {
  min-height: 18px; margin: 2px 0 12px; font-size: var(--fs-cap); color: var(--red);
  opacity: 0; transform: translateY(-3px); transition: opacity .2s, transform .2s;
}
.gate-err.on { opacity: 1; transform: none; }

.gate-go {
  position: relative; width: 100%; padding: 14px 0; border: 0; border-radius: 12px;
  cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, var(--or-2), var(--or-3));
  color: #170800; font: 700 var(--fs-ui)/1 inherit; letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(255,92,0,.3);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.gate-go:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,92,0,.42); }
.gate-go:active { transform: translateY(0) scale(.99); }
.gate-go:disabled { filter: grayscale(.5) brightness(.8); cursor: default; transform: none; }
.gate-go-tx { position: relative; z-index: 1; }
/* Блик пробегает по кнопке — она не выглядит мёртвой в ожидании. */
.gate-go-sh {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: go-shine 3.6s ease-in-out infinite;
}
@keyframes go-shine { 30%, 100% { transform: translateX(100%); } }
.gate-go:disabled .gate-go-sh { animation-duration: 1s; }

.gate-foot {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); color: var(--tx-3); text-align: center;
}

/* ---------------------------------------------------------- узкие экраны */

@media (max-width: 940px) {
  .gate { padding: 18px; align-items: flex-start; }
  .gate-wrap { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 420px; }
  /* На телефоне витрина ужимается до маскота и лозунга: цифры и лента
     тут только отодвигали бы форму за край экрана. */
  .gate-show { text-align: center; }
  .gate-brand { justify-content: center; }
  .gate-stage { height: 172px; }
  .gate-claim { font-size: 28px; }
  .gate-sub, .gate-stats, .gate-strip { display: none; }
  .gate-card { padding: 26px 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .gate *, .gate *::before, .gate *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Цель нашлась поиском, но под текущую ставку недостижима: показываем
   приглушённо и вместо процента пишем, с какой ставки её можно брать. */
.item.far { opacity: .42; filter: saturate(.35); cursor: not-allowed; }
.item.far:hover { opacity: .68; filter: saturate(.6); transform: none; }
.item.far .item-p {
  background: var(--panel-3); color: var(--tx-2);
  font-size: 10px; letter-spacing: 0;
}

/* ---------------------------------------------------------- партнёрам */

.pt-hero {
  display: flex; align-items: center; gap: 26px; margin-bottom: 14px;
  overflow: hidden; position: relative;
}
.pt-hero-tx { flex: 1; min-width: 0; }
.pt-hero h2 { margin: 0 0 8px; font-size: 22px; }
.pt-hero-art { width: 132px; flex: 0 0 132px; height: 148px; }
.pt-hero-art svg { width: 100%; height: 100%; }

.pt-steps { margin: 0; padding-left: 20px; color: var(--tx-2); line-height: 1.8; }
.pt-steps b { color: var(--tx); }

.pt-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.pt-tile {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.pt-tile .k { font-size: var(--fs-micro); color: var(--tx-3); }
.pt-tile .v { font-size: 20px; font-weight: 800; color: var(--or-2);
  font-variant-numeric: tabular-nums; }

.pt-copy {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.pt-copy:last-of-type { border-bottom: 0; }
.pt-lb { width: 78px; flex: 0 0 78px; font-size: var(--fs-cap); color: var(--tx-3); }
.pt-copy code {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 9px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--tx); font-size: var(--fs-label); overflow-x: auto; white-space: nowrap;
}
.pt-copy code.big { font-size: 17px; font-weight: 800; color: var(--or-2);
  letter-spacing: .06em; flex: 0 0 auto; }

.pt-banners {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: 12px;
}
.pt-ban { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px; }
/* Баннеры разного формата: рамка держит пропорции, картинка вписывается. */
.pt-ban-box {
  display: flex; align-items: center; justify-content: center;
  max-height: 240px; overflow: hidden; border-radius: 9px;
}
.pt-ban-box img { max-width: 100%; max-height: 240px; object-fit: contain; }
.pt-ban-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; font-size: var(--fs-micro); color: var(--tx-3);
}

.pt-media {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin-top: 12px;
}
.pt-card { padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line);
  border-left: 2px solid var(--or); border-radius: var(--r); }
.pt-card-h { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; }
.pt-card-h b { font-size: var(--fs-ui); }
.pt-card-h span { font-size: var(--fs-micro); color: var(--tx-3); }
.pt-card p { margin: 0; font-size: var(--fs-label); line-height: 1.55; color: var(--tx-2); }

@media (max-width: 700px) {
  .pt-hero { flex-direction: column-reverse; text-align: center; }
  .pt-hero-art { width: 104px; flex: 0 0 104px; height: 118px; }
  .pt-lb { width: auto; flex: none; }
}

/* Верх кабинета: код со ссылкой слева, QR справа. */
.pt-top { display: flex; gap: 20px; align-items: center; margin-bottom: 14px; }
.pt-top-main { flex: 1; min-width: 0; }
.pt-rate { margin-top: 12px; font-size: var(--fs-label); color: var(--tx-2); }
.pt-rate b { color: var(--or-2); }
.pt-qr {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 6px; font-size: var(--fs-micro);
}
.pt-qr img {
  width: 150px; height: 150px; border-radius: 9px; background: #fff;
  padding: 4px; box-sizing: border-box;
}

/* Заголовок блока с кнопкой справа. */
.pt-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.pt-h h3 { margin: 0; }

/* Крупная карточка выплаты: она — цель всей страницы, и отделена от плиток. */
.pt-pay {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
  border-color: var(--or-soft);
}
.pt-pay-sum { display: flex; flex-direction: column; gap: 2px; }
.pt-pay-sum .k { font-size: var(--fs-micro); color: var(--tx-3); }
.pt-pay-sum .v {
  font-size: 30px; font-weight: 800; color: var(--or-2);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* Полоса до следующей ступени. */
.pt-bar {
  height: 8px; border-radius: 999px; background: var(--bg-2);
  border: 1px solid var(--line); overflow: hidden;
}
.pt-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--or-3), var(--or-hot));
  transition: width .4s ease;
}

/* График. Ломаные нормируются каждая по своему максимуму, поэтому легенда
   объясняет цвет, а не масштаб: сравнивать высоту разных линий нельзя. */
.pt-chart { margin-top: 4px; }
.pt-svg { width: 100%; height: 180px; display: block; }
.pt-xaxis {
  display: flex; justify-content: space-between;
  font-size: var(--fs-micro); color: var(--tx-3); margin-top: 4px;
}
.pt-legend { display: flex; gap: 14px; font-size: var(--fs-micro); color: var(--tx-3); }
.pt-key::before {
  content: ''; display: inline-block; width: 10px; height: 2px;
  margin-right: 5px; vertical-align: middle; border-radius: 2px;
}
.pt-key[data-k="hits"]::before { background: #5f6571; }
.pt-key[data-k="signups"]::before { background: #ff9d1c; }
.pt-key[data-k="earned"]::before { background: #3ddc84; }

/* Предупреждения в блоке выплат: причина холда и перенос убытка. */
.pt-warn {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 9px;
  background: var(--or-soft); border: 1px solid var(--or-soft);
  font-size: var(--fs-label); line-height: 1.55; color: var(--tx-2);
}

/* Условия программы. */
.pt-terms .tbl { margin-bottom: 14px; }
.pt-terms tr.on td { color: var(--or-2); font-weight: 700; }
.pt-dl { margin: 0; font-size: var(--fs-label); line-height: 1.6; }
.pt-dl dt { color: var(--tx); font-weight: 700; margin-top: 10px; }
.pt-dl dd { margin: 2px 0 0; color: var(--tx-2); }

/* Окна «запросить выплату» и «новый код». */
.pt-ask { min-width: 300px; max-width: 420px; }
.pt-ask h3 { margin: 0 0 6px; }

@media (max-width: 700px) {
  .pt-top { flex-direction: column; align-items: stretch; }
  .pt-qr { align-self: center; }
  .pt-pay { justify-content: center; text-align: center; }
}


/* ---------------------------------------------------------- партнёры оператору */

/* Шире прежних 620px: в карточке появилось раскрытие начисления — четыре
   колонки, из которых «событие» длиннее остальных трёх вместе взятых. */
.ap-card { min-width: 320px; max-width: 780px; }
.ap-card h4 { margin: 0; font-size: var(--fs-label); color: var(--tx-2); }
.ap-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin: 10px 0;
}
/* Деньги партнёра в карточке: четыре числа, по которым принимается решение.
   Стоят рядом намеренно — «начислено» без «выплачено» ничего не значит. */
.ap-money {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-top: 12px;
}
.ap-money div {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
}
.ap-money .k { font-size: var(--fs-micro); color: var(--tx-3); }
.ap-money b { font-size: 16px; font-variant-numeric: tabular-nums; }
/* Причина, по которой «к выплате» меньше «начислено». Своей строкой под
   числом: приписанная сбоку, она читается как часть суммы. */
.ap-note { display: block; font-size: var(--fs-micro); line-height: 1.35; font-weight: 400; }

/* Метка «начислено без игры». Индикатор, а не приговор: начисление при
   нулевом обороте рефералов означает, что деньги пришли не из RevShare,
   и разбираться с этим человеку, а не панели. */
.pt-nomark {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
  color: #ffb765; background: rgba(255, 138, 0, .12);
  border: 1px solid rgba(255, 138, 0, .45); cursor: help;
}
/* Строка начисления, которую не написал ни один известный механизм. */
.ap-odd td { background: rgba(255, 77, 94, .06); }
.ap-card tfoot td { border-top: 1px solid var(--line-2); font-weight: 700; }
/* Счётчик очереди в названии подвкладки: заявка, ждущая решения, не должна
   требовать захода на вкладку, чтобы о себе сообщить. */
.ap-badge {
  display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 999px;
  font-size: 10px; font-weight: 900; line-height: 16px; text-align: center;
  color: #180a00; background: var(--or);
}
.ap-q {
  padding: 5px 10px; border-radius: 9px; background: var(--bg-2);
  border: 1px solid var(--line-2); color: var(--tx); font-size: var(--fs-cap);
  min-width: 240px;
}

/* Пачка кодов. Объекта у кампании в схеме нет — коды связаны только общим
   началом строки, и группировка живёт на фронте. Свёрнутая строка отвечает
   на вопрос «что в пачке», не разворачивая её. */
.ap-pack { cursor: pointer; }
.ap-pack td { background: var(--panel-3); font-weight: 600; }
.ap-pack:hover td { background: var(--panel-2); }
.ap-caret { display: inline-block; width: 12px; color: var(--tx-3); }
.ap-in-pack td:first-child { padding-left: 26px; }
.ap-in-pack td { background: rgba(255, 255, 255, .012); }

/* Активный код без награды: игрок вводит его и получает ничего. */
.ap-nor {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 800; white-space: nowrap;
  color: #ff9aa4; background: rgba(255, 77, 94, .12);
  border: 1px solid rgba(255, 77, 94, .45);
}
.ap-alarm {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px; border-radius: var(--r);
  background: rgba(255, 77, 94, .08); border: 1px solid rgba(255, 77, 94, .35);
  font-size: var(--fs-label); color: var(--tx-2);
}

.ap-out {
  width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 9px;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--tx);
  font-family: var(--mono, monospace); font-size: var(--fs-cap); resize: vertical;
}
#apSearch {
  padding: 7px 12px; border-radius: 9px; background: var(--bg-2);
  border: 1px solid var(--line-2); color: var(--tx); font-size: var(--fs-label);
  min-width: 220px;
}

/* ---------------------------------------------------------- игра под контролем */

.safety { margin-bottom: 14px; border-left: 2px solid var(--green); }
.safety-h { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.safety-h h3 { margin: 0; }
.safety-h .dim { font-size: var(--fs-cap); }

.safety-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-top: 12px;
}
.safety-grid .fld { margin: 0; }
.safety-grid input { width: 100%; }

.safety-long { margin-top: 12px; }
/* Шесть полей — по три в ряд (7 и 30 дней), на узком экране — столбцом. */
.safety-long .safety-grid { grid-template-columns: repeat(auto-fit, minmax(max(160px, 30%), 1fr)); }
.safety-long summary {
  cursor: pointer; font-size: var(--fs-cap); color: var(--tx-2); padding: 4px 0;
}
.safety-long summary:hover { color: var(--tx); }
.safety-sess { margin: 12px 0 0; max-width: 320px; }
/* Напоминание о времени в игре: тост с двумя строками. */
.toast .rg-check { display: grid; gap: 2px; text-align: left; }
.safety-sess select { width: 100%; }

.safety-break {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.safety-break b { font-size: var(--fs-label); }

.safety-log { margin-top: 14px; }
.safety-log summary {
  cursor: pointer; font-size: var(--fs-cap); color: var(--tx-2); padding: 6px 0;
}
.safety-log summary:hover { color: var(--tx); }

/* ---------------------------------------------------------- steam */

.gate-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px; font-size: var(--fs-micro); color: var(--tx-3);
}
.gate-or::before, .gate-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line-2);
}

.gate-steam {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 12px 0; border-radius: 12px; text-decoration: none;
  background: linear-gradient(180deg, #2a3f5a, #1b2838);
  border: 1px solid #3a5a80; color: #cfe0f0;
  font: 600 var(--fs-ui)/1 inherit;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.gate-steam:hover {
  transform: translateY(-2px); border-color: #5b8bb8;
  box-shadow: 0 10px 26px rgba(40, 80, 130, .38);
}
.gate-steam:active { transform: none; }

.steam { margin-bottom: 14px; border-left: 2px solid #4b9bff; }
.steam-h { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.steam-h h3 { margin: 0; }
.steam-h .dim { font-size: var(--fs-cap); }

.steam-who {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.steam-who img { border-radius: 10px; background: var(--panel-3); }
.steam-id { display: flex; flex-direction: column; gap: 2px; }
.steam-id b { font-size: var(--fs-body); }
.steam-id a { font-size: var(--fs-micro); text-decoration: none; }
.steam-id a:hover { color: var(--or); }
.steam-val { margin-left: auto; display: flex; flex-direction: column; text-align: right; }
.steam-val .k { font-size: var(--fs-micro); color: var(--tx-3); }
.steam-val .v { font-size: 19px; font-weight: 800; }
.steam-val .dim { font-size: var(--fs-micro); }

.steam-trade {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
.steam-trade .fld { margin: 0; }
.steam-trade input { width: 100%; }
.steam-trade .fld > span i { font-style: normal; color: var(--tx-3); }

.steam-tabs {
  display: flex; gap: 4px; margin: 16px 0 10px; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px;
  width: max-content; max-width: 100%;
}
.steam-tabs button {
  border: 0; background: transparent; cursor: pointer; padding: 8px 16px;
  border-radius: 8px; color: var(--tx-2); font: 600 var(--fs-label)/1 inherit;
  transition: background .15s, color .15s;
}
.steam-tabs button.on { background: var(--or); color: #170800; }

.steam-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: var(--fs-cap); color: var(--tx-2);
}
.steam-bar .grow { flex: 1; }
.steam-bar b { color: var(--tx); }

/* Выбранный к обмену предмет: рамка и галочка, как в инвентаре сайта. */
#stGrid .item { cursor: pointer; }
#stGrid .item.sel { outline: 2px solid var(--or); outline-offset: -2px; }
#stGrid .item.sel::after {
  content: '✓'; position: absolute; right: 6px; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--or); color: #170800;
  font-size: var(--fs-cap); font-weight: 800; line-height: 18px; text-align: center;
}

.steam-log { margin-top: 14px; }
.steam-log summary { cursor: pointer; font-size: var(--fs-cap); color: var(--tx-2); padding: 6px 0; }
.steam-log summary:hover { color: var(--tx); }

@media (max-width: 620px) {
  .steam-val { margin-left: 0; text-align: left; }
}

/* Предмет Steam без картинки: чтобы карточка не проваливалась. */
.item-noart {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--tx-3); font-size: 20px; font-weight: 800; opacity: .5;
}
/* Курс обмена в строке итогов не должен слипаться с суммой. */
.steam-bar .dim + span { white-space: nowrap; }

/* Панель над сеткой предметов Steam: поиск, фильтр, массовый выбор. */
.steam-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.steam-tools .grow { flex: 1; }
.steam-tools input[type=search] { width: 190px; }
.switch.sm { font-size: var(--fs-cap); }

/* ---------------------------------------------------------- продажа скинов */

.sell-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 14px;
}
.sell-head h3 { margin: 0 0 6px; }
.sell-head .help { max-width: 620px; margin: 0; }
.sell-rate {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 22px; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid var(--or);
}
.sell-rate b { font-size: 28px; font-weight: 800; color: var(--or-2); line-height: 1; }
.sell-rate span { font-size: var(--fs-micro); color: var(--tx-3); }
#page-sell .grid { max-height: 62vh; }

/* ---------------------------------------------------------- плитки кабинета */

.me-tiles-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.card.mt { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mt-h { display: flex; align-items: center; gap: 11px; }
.mt-h div { display: flex; flex-direction: column; min-width: 0; }
.mt-h b { font-size: var(--fs-ui); }
.mt-h small { font-size: var(--fs-micro); color: var(--tx-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mt-ic {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-ui); font-weight: 800;
  background: var(--panel-3); color: var(--tx-3);
  border: 1px solid var(--line-2); transition: background .2s, color .2s, border-color .2s;
}
/* Заполненная плитка отмечается зелёным: видно с одного взгляда, чего не хватает. */
.card.mt.done .mt-ic { background: rgba(53, 208, 127, .14); color: var(--green);
  border-color: rgba(53, 208, 127, .45); }
.card.mt.done .mt-h small { color: var(--green); }
.mt-help { font-size: var(--fs-micro); color: var(--tx-3); text-decoration: none; }
a.mt-help:hover { color: var(--or); text-decoration: underline; }
.card.mt input:disabled { opacity: .5; }

/* ============================================================ фон редкости

   Раньше класс подсвечивался внешней тенью, и ореол вылезал за карточку —
   в плотной сетке кейса соседи перекрывали друг друга. Теперь всё внутри
   рамки: подложка от цвета класса снизу вверх и его же полоска сверху.
   --rg задаёт, насколько густой получается подложка.

   Значения скромные: на витрине кейса семнадцать карточек рядом, и при
   сильной заливке сетка выглядит пёстрой, а не выделяет редкое. */

/* Плотность подложки урезана вдвое против прежней. Причина видна на
   снимке страницы кейса: при густой заливке семнадцать карточек рядом
   давали сплошную золото-фиолетово-красную стену, и витрина переставала
   быть чёрно-оранжевой — ровно то, что бриф ENIGGMA называет «purple/blue
   cyberpunk» и запрещает.

   Цвет класса остался — он данные, а не оформление, — но теперь он читается
   рамкой и узкой полосой снизу, а не заливкой во всю площадь. */

/* Плотность подложки снята с макета пипеткой, по низу карточек:

     золото (rare)      #3d250d над #121010  -> ~.20
     красное (covert)   #200e0c              -> ~.09
     фиолетовое         #1c0f25              -> ~.08
     синее              #181412              -> почти ноль

   Отсюда и шкала. Она НЕ линейная по редкости, и это главное: тёплое
   золото макет разрешает светить в полную силу — оно совпадает с брендом,
   — а холодные классы держит у самого порога заметности. Раньше шкала
   росла ровно, и фиолетовый с красным светили наравне с золотым; ровно из
   этого и получалась «фиолетовая» нижняя половина страницы. */

.item { --rg: .04; }

.r-consumer   { --rg: .03; }
.r-industrial { --rg: .04; }
.r-milspec    { --rg: .05; }
.r-restricted { --rg: .07; }
.r-classified { --rg: .08; }
.r-covert     { --rg: .10; }
.r-rare       { --rg: .20; }

/* Подложка прижата к нижней трети: середина карточки остаётся тёмной, и
   на ней читается сам предмет, а не цветовое пятно под ним. */
.item::after {
  left: 0; top: auto; bottom: 0; width: 100%; height: 46%;
  transform: none; border-radius: 0;
  background: linear-gradient(0deg, var(--rc), transparent 88%);
  opacity: var(--rg);
}
/* Цвет рамки задан в основном правиле .item — здесь остаётся только
   плотность подложки. */
.item {
  box-shadow: none;
  transition: transform .13s, border-color .13s, background .18s;
}
.item:hover {
  border-color: var(--rc);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.item::before { box-shadow: none; }
/* Отдельная поблажка ковертам и золоту больше не нужна: рамка у всех
   классов теперь 30%, и красное с золотым перестали быть громче прочих
   сами собой. */

/* ---------------------------------------------------------- лента: редкость */

/* Полоски сверху мало: добавляем цветную подложку и свечение по классу,
   чтобы редкий дроп читался в бегущей строке, а не только в карточке. */


/* ============================================================ кабинет: раскладка

   Верх делится надвое: слева кто ты и сколько у тебя, справа лучший выигрыш.
   Раньше трофей шёл полосой во всю ширину и читался как рекламный баннер. */

/* Потолок разделов, у которых нет своей внутренней обёртки.

   Правилом по странице, а не обёрткой в разметке: обёртка — лишний узел в
   каждом разделе и ещё одно место, где о ней можно забыть.

   Витрины кейсов в списке нет, и это не забывчивость: её блоки — баннер,
   полосы вкладок, сетка ящиков — ограничены каждый сам, потому что между
   ними разные отступы и фоны, и общая обёртка их бы склеила. Все они
   считают потолок от той же переменной, так что край всё равно один.

   Battle Pass в списке тоже нет, и это решение автора: раздел живёт во всю
   ширину. Лента уровней от этого только выигрывает — на широком мониторе в
   неё влезает вдвое больше карточек, и прокручивать полсотни уровней
   приходится вдвое реже. */
#page-me, #page-stats, #page-partner, #page-sell,
#page-case, #page-fair, #page-settings {
  max-width: var(--page-max); margin-inline: auto;
}

.me-top {
  display: grid; grid-template-columns: minmax(340px, 1.05fr) minmax(320px, 1fr);
  gap: 14px; align-items: stretch; margin-bottom: 14px;
}
.me-top .trophy { margin: 0; display: flex; }
/* Трофей тянется на высоту левой колонки: иначе рядом с ней он выглядел
   обрезком, а во всю ширину — рекламным баннером. */
.me-top .trophy-card, .me-top .trophy-empty {
  flex: 1; box-sizing: border-box; align-content: center;
}

.card.me-head { display: flex; flex-direction: column; gap: 14px; }
.me-who { display: flex; align-items: center; gap: 14px; }
.me-who .me-ava { flex: none; }
.me-who .me-id { flex: 1; min-width: 0; }
.me-who h1 { margin: 0; font-size: 21px; }
.me-who .dim { font-size: var(--fs-micro); }
.me-out { flex: none; align-self: flex-start; }

.me-head .me-bal {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid var(--line);
}
.me-head .me-bal .k { font-size: var(--fs-micro); color: var(--tx-3); }
.me-head .me-bal .v { font-size: 26px; font-weight: 800; margin-left: auto; }

.me-dep { display: flex; gap: 8px; }
.me-dep input { flex: 1; min-width: 0; }

.stat-tiles.sm { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-tiles.sm .tile { padding: 10px 12px; }
.stat-tiles.sm .tile .n { font-size: 17px; }

/* ------------------------------------------------ верх кабинета: по ширине

   Карта .me-head раскладывается колонкой (.card.me-head выше), но
   align-items: center приехало сюда из прежней сеточной раскладки — и в
   колонке оно означает не «по центру строки», а «сожми каждого ребёнка до
   его содержимого и поставь посередине». Отсюда и пустота: полоса опыта,
   кнопки и плитки стояли столбиком шириной в текст, с полями по бокам в
   полкарты. Растягиваем — карта занята содержимым, а не воздухом. */
.card.me-head { align-items: stretch; justify-content: space-between; }
/* Две кнопки пополам во всю ширину: слева от них не должно оставаться
   поля шире, чем сами кнопки. */
.me-head .me-dep { flex-wrap: nowrap; }
.me-head .me-dep .btn { flex: 1 1 0; min-width: 0; }

/* ------------------------------------------------- верх кабинета: трофей

   Трофей стоит рядом с картой профиля и тянется на её высоту, а содержимого
   у него на треть этой высоты: картинка 168x116 у левого края, узкий
   столбец текста у правого, и между ними — воздух во весь рост. Раскладка
   «арт слева, текст справа» задумана для широкой полосы во всю страницу; в
   колонке шириной в 470 она не работает.

   Поэтому в верхнем блоке кабинета карточка складывается по-другому: арт
   сверху во всю ширину и с запасом по высоте, под ним название с ценой,
   а плитки характеристик — строкой по низу. Свободная высота уходит арту,
   а не пустоте, и три плитки становятся в ряд вместо башни. */
.me-top .trophy-card {
  flex-direction: column; flex-wrap: nowrap;
  align-items: stretch; align-content: stretch; justify-content: flex-start;
  gap: 14px; padding: 18px 20px;
}
/* Арт забирает остаток высоты, но в пределах: без потолка он на длинной
   карте растягивается в полосу, где скин теряется посередине. А базис
   нулевой, а не auto: с auto арт просит себе высоту картинки и вытягивает
   карточку под себя — рядом стоит карта профиля, которой такая высота не
   нужна, и пустота просто переезжает в неё. Ноль означает «беру только то,
   что осталось». */
.me-top .trophy-art {
  flex: 1 1 0; width: auto; height: auto;
  min-height: 118px; max-height: 300px;
}
.me-top .trophy-art .skin-svg, .me-top .trophy-art img {
  width: 100%; height: 100%; object-fit: contain;
}
/* Тело перестаёт быть колонкой справа: оно нижняя половина карточки и
   разводит название и плитки по своим краям. */
.me-top .trophy-body {
  flex: 0 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
}
.me-top .trophy-top { margin-bottom: 0; }
.me-top .trophy-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px; margin-top: 0;
}
.me-top .trophy-stats .ts { min-width: 0; padding: 8px 12px; }
.me-top .trophy-stats .v { overflow-wrap: anywhere; }
/* Подсветка редкости висела слева, под артом; теперь арт сверху — и пятно
   уезжает за ним, иначе оно светит в угол мимо картинки. */
.me-top .trophy-card::after { left: 50%; top: 30%; }

@media (max-width: 900px) {
  .me-top { grid-template-columns: 1fr; }
  /* Колонки схлопнулись, трофей снова во всю ширину страницы — а это ровно
     та широкая полоса, под которую раскладка «арт слева, текст справа» и
     задумана. Вертикальная здесь дала бы картинку в полэкрана. */
  .me-top .trophy-card {
    flex-direction: row; align-items: center; align-content: center;
    flex-wrap: wrap; gap: 22px; padding: 18px 24px;
  }
  .me-top .trophy-art {
    flex: 0 0 168px; width: 168px; height: 116px; min-height: 0; max-height: none;
  }
  .me-top .trophy-body { flex: 1 1 210px; justify-content: center; }
  .me-top .trophy-card::after { left: 90px; top: 50%; }
}

/* ---------------------------------------------------------- плитки: воздух

   Поле и кнопка стояли встык в одну строку, отчего блок выглядел слипшимся.
   Теперь ввод занимает всю ширину, а подпись и кнопка разведены по краям. */

.me-tiles-row { gap: 14px; }
.card.mt { gap: 12px; padding: 18px 20px; }
.card.mt input { width: 100%; box-sizing: border-box; }
.mt-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 2px;
}
.mt-foot .mt-help { flex: 1; min-width: 0; line-height: 1.35; }
.mt-h { gap: 12px; }

/* ============================================================ инвентарь

   Сводки над сеткой здесь нет вовсе: и «всё добро», и счётчики скинов с
   кейсами живут плитками наверху кабинета, а «самое дорогое» — в трофее там
   же. Всё, что стояло в этой полосе, было вторым экземпляром чего-то, что
   уже написано выше на той же странице. */

.card.inv-panel { margin-bottom: 14px; }
.inv-sellbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  animation: fade .22s ease;
}
.isb-n, .isb-s { font-size: var(--fs-label); color: var(--tx-2); }
.isb-n b { font-size: 16px; color: var(--tx); }
.isb-s b { font-size: var(--fs-body); }

/* ============================================================ свои поля ввода

   Браузерные поля выбиваются из тёмной темы: своя стрелка у select, серые
   кнопки-крутилки у number, крестик у search. Здесь всё это заменено —
   вид одинаковый в Chrome и Firefox. */

.fld-x { position: relative; display: flex; align-items: center; }
.fld-x > input, .fld-x > select { width: 100%; }

/* Через :not, а не перечислением типов: у части полей атрибут type не
   выставлен вовсе, и селектор по типу их не ловил — они оставались
   системными посреди своей темы. */
/* :where вместо :not — у него нулевая специфичность. С :not каждое из
   четырёх условий добавляло вес, правило перебивало даже .fld-money input,
   и знак валюты налезал на цифры: отступ слева просто не применялся. */
input:where(:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file])),
select, textarea {
  background: linear-gradient(180deg, #101016, var(--bg-2));
  border: 1px solid var(--line-2); color: var(--tx);
  padding: 11px 13px; border-radius: 11px; font: inherit; outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:hover, select:hover, textarea:hover { border-color: #3f3f4e; }
input:focus, select:focus, textarea:focus {
  border-color: var(--or);
  box-shadow: 0 0 0 3px var(--or-soft);
  background: linear-gradient(180deg, #14141b, #0e0e14);
}
input::placeholder { color: var(--tx-3); }
input:disabled, select:disabled { opacity: .45; cursor: not-allowed; }

/* Крутилки у числового поля только мешают: значение вводят руками. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Свой крестик поиска вместо системного. */
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none; height: 14px; width: 14px; cursor: pointer;
  background: var(--tx-3);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
input[type=search]::-webkit-search-cancel-button:hover { background: var(--or); }

/* Своя стрелка у выпадающего списка. */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 34px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%23a2a2b2' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #101016, var(--bg-2));
  background-repeat: no-repeat, no-repeat;
  background-position: right 13px center, 0 0;
  background-size: 11px auto, auto;
}
select:focus {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%23ff7a18' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #14141b, #0e0e14);
}
select option { background: var(--panel); color: var(--tx); }

/* Поле с приставкой: монета живёт внутри рамки, а не подписью сбоку. Тот
   же значок, что и в ценах, — поле ввода и цена рядом обязаны говорить об
   одних деньгах. Код валюты словом стоит справа от поля: там, где сумму
   вводят руками, цена ошибки максимальная. */
.fld-money { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.fld-money::before {
  content: ""; position: absolute; left: 13px; width: 14px; height: 14px;
  background: no-repeat center / contain url("/assets/ui/coin.png");
  background-image: image-set(url("/assets/ui/coin.png") 1x,
                              url("/assets/ui/coin@2x.png") 2x);
  pointer-events: none;
}
.fld-money input { flex: 1; min-width: 0; width: 100%; padding-left: 34px; }

/* Код валюты в подписи поля: «Пополнение за сутки, RUB». Курсив у <i>
   здесь не нужен — это код, а не выделение. */
.sf-cur, .dep-cur { font-style: normal; }

/* Код валюты у поля ввода. Не сжимается: подпись, из которой видно
   «RU», хуже, чем её отсутствие. */
.fld-cur {
  flex: 0 0 auto; align-self: center; margin-left: 8px;
  color: var(--tx-3); font: 700 var(--fs-cap)/1 inherit; font-style: normal;
  letter-spacing: .04em; white-space: nowrap;
}

.mini { padding: 8px 11px !important; border-radius: 9px !important; font-size: var(--fs-label); }
select.mini { padding-right: 30px !important; background-position: right 11px center, 0 0; }

/* ---------------------------------------------------- разворот списка

   Нативный <select> открывает список силами браузера, а не страницы: ни
   фона, ни шрифта, ни скругления, ни анимации ему задать нельзя. Правило
   «select option { background }» выше — это ровно всё, что вообще
   принимается, и то не везде. Посреди тёмной темы список вываливался
   светлой системной табличкой с системным же шрифтом.

   appearance: base-select переводит и кнопку, и сам список в обычные
   элементы страницы: их можно красить, скруглять и анимировать, а разметка,
   клавиатура, поиск по первой букве и скринридер остаются нативными —
   ничего этого руками писать не пришлось.

   Весь блок под @supports. Где базовой отрисовки нет (Firefox, Safari),
   список остаётся системным и работает как работал — это запасной вариант,
   а не поломка. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }

  /* Фоновая стрелка больше не нужна: её место занял ::picker-icon, который,
     в отличие от картинки в background, умеет поворачиваться. Сбрасываем
     обоими правилами — у :focus своя, оранжевая. */
  select {
    background: linear-gradient(180deg, #101016, var(--bg-2));
    gap: 10px; justify-content: space-between;
    /* Место под фоновую стрелку больше не нужно — стрелка стоит в потоке
       и занимает своё сама. Оставленные 34 (и 30 у .mini) отодвигали её от
       края на треть кнопки. */
    padding-right: 13px;
    /* Подпись кнопки живёт во внутреннем <selectedcontent>, который движок
       не отдаёт ни селектору, ни querySelector, — обрезать её на нём нельзя.
       Поэтому страховка стоит на самой кнопке: длинное название она
       обрежет, а не разъедет по раскладке. Всплывающий список это не
       трогает — он в верхнем слое, а не внутри кнопки. */
    overflow: hidden;
  }
  /* И положение фона: у .mini он был сдвинут на 11 пикселей, чтобы уступить
     место картинке-стрелке — без неё оставалась голая полоска у правого
     края кнопки. */
  select.mini { padding-right: 11px !important; background-position: 0 0; }
  select:focus { background: linear-gradient(180deg, #14141b, #0e0e14); }

  select::picker-icon {
    color: var(--tx-3);
    transition: rotate .24s cubic-bezier(.2, .8, .3, 1), color .18s;
  }
  select:hover::picker-icon { color: var(--tx-2); }
  select:open::picker-icon { rotate: 180deg; color: var(--or-2); }

  /* Сам список. Разворачивается сверху вниз: появляется приподнятым и
     чуть сплюснутым и «садится» на место. transform-origin сверху — иначе
     он растёт из середины и читается как всплытие, а не как разворот. */
  ::picker(select) {
    border: 1px solid var(--line-2); border-radius: 12px;
    background: linear-gradient(180deg, #14141b, #0e0e14);
    box-shadow: 0 20px 44px -14px #000, inset 0 1px 0 rgba(255, 255, 255, .04);
    padding: 6px;
    /* margin-block, а не margin-top: браузер сам решает, разворачивать список
       вниз или вверх (когда снизу не помещается или когда выбранный пункт
       выше середины), и односторонний отступ в половине случаев прижимал бы
       список вплотную к кнопке. */
    margin-block: 6px;
    max-height: 320px; overflow-y: auto;
    transform-origin: top center;
    opacity: 0; translate: 0 -6px; scale: 1 .94;
    /* overlay и display с allow-discrete — без них список исчезал бы
       мгновенно на закрытии: он живёт в верхнем слое, и обе эти дискретные
       величины переключаются в самом начале анимации, обрывая её. */
    transition:
      opacity .18s ease,
      translate .22s cubic-bezier(.2, .8, .3, 1),
      scale .22s cubic-bezier(.2, .8, .3, 1),
      overlay .22s allow-discrete,
      display .22s allow-discrete;
  }
  ::picker(select):popover-open { opacity: 1; translate: 0 0; scale: 1; }
  /* Стартовое состояние объявляется отдельно: к элементу, которого секунду
     назад не было в раскладке, обычный переход не применяется. */
  @starting-style {
    ::picker(select):popover-open { opacity: 0; translate: 0 -6px; scale: 1 .94; }
  }

  /* Пункты списка — селектором БЕЗ префикса ::picker(select).
     «::picker(select) option» Chrome не разбирает вовсе: правило молча не
     срабатывает, хотя сам ::picker(select) стилизуется нормально. Проверено
     подстановкой — padding через префикс не доходит, без префикса доходит.
     Вынести их из-под @supports нельзя: где базовой отрисовки нет, option
     вообще не элемент страницы и красить в нём нечего.

     «select option», а не просто «option»: выше по файлу стоит запасное
     правило «select option { background; color }» для браузеров без базовой
     отрисовки, и оно тяжелее на один селектор. Голое option проигрывало ему
     цвет — падинги доходили, а текст оставался белым. */
  select option {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 11px; border-radius: 8px;
    font: inherit; font-size: var(--fs-label); color: var(--tx-2);
    background: none; cursor: pointer;
    transition: background .13s, color .13s;
  }
  select option:hover,
  select option:focus { background: var(--panel-2); color: var(--tx); }
  /* Выбранный красится последним: иначе наведение перебивало бы его цвет
     просто потому, что стоит ниже по файлу. */
  select option:checked { color: var(--or-2); font-weight: 700; }
  /* Своя рамка фокуса вместо системной: Chrome рисует её своим акцентным
     цветом, к теме отношения не имеющим. Совсем убирать нельзя — по списку
     ходят стрелками, и без рамки не видно, где стоишь. */
  select option:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; }
  /* Галочка выбранного уезжает вправо: слева она сдвигала бы все подписи,
     и список читался бы лесенкой. */
  option::checkmark { order: 1; margin-left: auto; color: var(--or); }

  /* Прокрутка длинных списков — своя, как у полосы скинов: системная в
     каталоге на сто пятьдесят кейсов резала бы бок панели. */
  ::picker(select)::-webkit-scrollbar { width: 8px; }
  ::picker(select)::-webkit-scrollbar-track { background: none; }
  ::picker(select)::-webkit-scrollbar-thumb {
    background: var(--line-2); border-radius: 99px;
    border: 2px solid transparent; background-clip: content-box;
  }
  ::picker(select)::-webkit-scrollbar-thumb:hover {
    background: var(--or); background-clip: content-box;
  }
}

/* ---------------------------------------------------------- профиль вдоль */

/* Строго в одну линию: аватар — имя — баланс — выход. Раньше это был flex
   с переносом, и на узкой колонке кнопка уезжала под остальное. */
.me-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.me-line .me-ava { width: 52px; height: 52px; }
.me-line .me-ava svg { width: 100%; height: 100%; }
.me-line .me-id { min-width: 0; }
.me-line h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-line .me-bal {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  padding: 0; background: none; border: 0;
}
.me-line .me-bal .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 800; }
.me-line .me-bal .v { font-size: 25px; font-weight: 800; line-height: 1; margin: 0; }
.me-line .me-out { flex: none; align-self: center; }

.me-dep { display: flex; gap: 10px; }

/* ---------------------------------------------------------- трофей вдоль */

.trophy-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.trophy-price {
  flex: none; font-size: 24px; font-weight: 900; color: var(--or-2);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.trophy-stats .v.sm { font-size: var(--fs-label); font-weight: 700; }
.trophy-stats .ts { min-width: 78px; }

/* Второй ряд быстрых кнопок — те же величины, но заданные множителем. */
/* Разделитель групп. Раньше тянулся во всю высоту строки и на фоне полосы
   пропадал; теперь короткая волосяная черта, гаснущая к концам, — как в
   макете. Отступы по 10, иначе он липнет к соседней капсуле. */
/* Разделитель убран: группы теперь разнесены зазором, черта между ними
   была бы третьим способом сказать одно и то же. */
.preset-sep { display: none; }
.preset.mul .p-ch { color: var(--or-2); }
.preset.mul.on .p-ch { color: var(--or-hot); }

/* ============================================================ выпавшее

   Дроп встаёт на место ленты и живёт по своим правилам: рамка карточки
   здесь только мешает — предмет и так один в кадре. Вместо неё цвет
   редкости уходит в фон, а сам предмет крупнее и по центру. */

#caseDrop { display: flex; justify-content: center; }
#caseDrop .drop-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  max-width: 100%; margin: 0;
}

#caseDrop .item {
  width: 190px; padding: 14px 12px 12px;
  border: 0; border-radius: 16px; overflow: visible;
  background: radial-gradient(ellipse at 50% 42%,
              color-mix(in srgb, var(--rc) 30%, transparent), transparent 68%);
  text-align: center;
}
#caseDrop .item:hover { transform: none; box-shadow: none; }
/* Полоска сверху и подложка снизу — это оформление карточки в сетке. */
#caseDrop .item::before { display: none; }
#caseDrop .item::after {
  left: 50%; top: 50%; bottom: auto; width: 240px; height: 240px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, var(--rc), transparent 62%);
  opacity: calc(var(--rg) * .8);
  filter: blur(6px);
}

#caseDrop .item-art { height: 130px; }
#caseDrop .item-name { font-size: var(--fs-cap); }
#caseDrop .item-skin { font-size: var(--fs-body); margin-bottom: 8px; }
#caseDrop .item-foot { justify-content: center; gap: 10px; }
#caseDrop .item-price { font-size: 17px; }
#caseDrop .item-wear { font-size: var(--fs-micro); }
#caseDrop .item-st { left: 50%; transform: translateX(-50%); top: 0; }

/* Несколько предметов сразу: те же правила, только компактнее. */
#caseDrop .drop-grid.many .item { width: 132px; padding: 10px 8px; }
#caseDrop .drop-grid.many .item-art { height: 84px; }
#caseDrop .drop-grid.many .item-skin { font-size: var(--fs-label); }
#caseDrop .drop-grid.many .item-price { font-size: var(--fs-ui); }
#caseDrop .drop-grid.many .item::after { width: 150px; height: 150px; }

/* ============================================================ баннер кейсов

   Слоёный фон целиком на CSS: три дрейфующих пятна, медленный конический
   свет, перспективная сетка и мелкое зерно поверх. Ни одного кадра в rAF —
   баннер висит на экране всё время, и держать ради него цикл незачем. */

.promo {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 26px;
  /* Одна колонка вместо двух: арт героя лежит слоем на всю площадь баннера,
     а текст занимает левую половину поверх него. Так композиция совпадает с
     референсом — сцена уходит под текст, а не стоит рядом отдельной
     картинкой. Ширину текста держит max-width у .promo-text. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "stats" "ticker";
  grid-template-rows: 1fr auto auto;
  align-items: start;
  max-width: var(--page-max); margin: 0 auto 16px;
  border-radius: var(--r);
  /* Полупрозрачная подложка вместо плотной: за героем стоит слой атмосферы,
     и блок работает окном в сцену, а не плитой поверх неё. Фиолетовый
     подтон, что был здесь раньше, уехал — палитра чёрно-оранжевая. */
  background: rgba(5, 6, 8, .35);
  border: 1px solid var(--line-2);
  /* Высота подобрана под пропорции арта: у рендера 2,25:1, у баннера при
     1400 в ширину получается 3:1, и cover срезает по 12% сверху и снизу.
     Ниже 400 срезалась макушка маскота, выше 460 планета уезжала за край. */
  min-height: 430px;
  padding: 34px 38px 0;
  gap: 0;
  --cut: 22px; --edge-c: var(--line-2);
}
/* Кронштейны у героя длиннее: блок крупный, и короткие штрихи на нём
   теряются. */
.promo > .eg-edge::before, .promo > .eg-edge::after { width: 34px; height: 34px; }
/* Живая кромка: градиент медленно ползёт по периметру. */
.promo::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r); padding: 1px;
  background: conic-gradient(from var(--a, 0deg),
    transparent 0deg, var(--or) 40deg, transparent 110deg,
    transparent 250deg, rgba(255,168,56,.75) 300deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 3;
  animation: promoEdge 14s linear infinite;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes promoEdge { to { --a: 360deg; } }

.promo-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pb-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.pb-orb.o1 {
  width: 460px; height: 460px; top: -220px; left: -80px;
  background: radial-gradient(circle, rgba(255,122,24,.34), transparent 68%);
  animation: pbA 22s ease-in-out infinite;
}
.pb-orb.o2 {
  width: 380px; height: 380px; bottom: -200px; left: 34%;
  background: radial-gradient(circle, rgba(177,76,255,.22), transparent 68%);
  animation: pbB 28s ease-in-out infinite;
}
.pb-orb.o3 {
  width: 420px; height: 420px; top: -140px; right: -60px;
  background: radial-gradient(circle, rgba(255,92,0,.26), transparent 70%);
  animation: pbC 19s ease-in-out infinite;
}
@keyframes pbA { 50% { transform: translate(90px, 70px) scale(1.15); } }
@keyframes pbB { 50% { transform: translate(-70px, -50px) scale(1.2); } }
@keyframes pbC { 50% { transform: translate(-60px, 60px) scale(1.1); } }

/* Конический свет из-за маскота — медленный, чтобы не мельтешил. */
.pb-sweep {
  position: absolute; right: 6%; top: 50%; width: 620px; height: 620px;
  transform: translateY(-50%);
  background: conic-gradient(from 0deg,
    transparent 0deg 20deg, rgba(255,122,24,.16) 34deg, transparent 52deg 180deg,
    rgba(255,122,24,.10) 200deg, transparent 226deg 360deg);
  mask-image: radial-gradient(circle, #000 8%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 62%);
  animation: pbSpin 48s linear infinite;
}
@keyframes pbSpin { to { transform: translateY(-50%) rotate(360deg); } }

.pb-grid {
  position: absolute; inset: 40% -30% -40%;
  background-image:
    linear-gradient(rgba(255,122,24,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,122,24,.10) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(340px) rotateX(66deg);
  mask-image: linear-gradient(transparent, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 55%, transparent);
  animation: pbGrid 4.4s linear infinite;
}
@keyframes pbGrid { to { background-position: 0 54px, 0 0; } }

/* Зерно: убирает «пластиковость» больших градиентов. */
.pb-grain {
  position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- текст баннера */

.promo-text {
  grid-area: text; position: relative; z-index: 2; padding-bottom: 26px;
  /* Половина баннера: правее начинается арт, и заходить на него текстом
     нельзя — там маскот и кейс, главный объект экрана. */
  max-width: 54%;
}
@media (max-width: 900px) { .promo-text { max-width: 100%; } }

.promo-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgba(255, 122, 24, .10); border: 1px solid rgba(255, 122, 24, .32);
  color: var(--or-2); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(6px);
}
.promo-kicker i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--or);
  box-shadow: 0 0 0 0 var(--or-glow); animation: kickPulse 2.2s ease-out infinite;
}
@keyframes kickPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,24,.7); }
  100% { box-shadow: 0 0 0 9px rgba(255,122,24,0); }
}

/* Заголовок выкладывается по словам: каждое всплывает со своей задержкой. */
.promo-h {
  margin: 16px 0 0; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02;
  font-weight: 800; letter-spacing: -.03em;
}
.promo-h .w {
  display: inline-block; margin-right: .28em;
  animation: wordUp .7s cubic-bezier(.2, .85, .25, 1) both;
}
.promo-h .w:nth-child(2) { animation-delay: .09s; }
.promo-h .w:nth-child(3) { animation-delay: .18s; }
@keyframes wordUp {
  from { opacity: 0; transform: translateY(26px) rotate(2deg); filter: blur(6px); }
}
.promo-h .accent {
  background: linear-gradient(96deg, var(--or-2), var(--or), #ff9d5a, var(--or-2));
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wordUp .7s cubic-bezier(.2,.85,.25,1) .18s both,
             promoSweep 6s linear 1s infinite;
}
@keyframes promoSweep { to { background-position: 280% 0; } }

.promo-text p {
  margin: 14px 0 0; max-width: 520px; font-size: var(--fs-ui); line-height: 1.6;
  color: var(--tx-2);
  animation: wordUp .7s cubic-bezier(.2,.85,.25,1) .26s both;
}

/* Стеклянные плашки: у чисел свой слой, чтобы фон под ними не рябил. */
/* ---- лидеры открытий ----

   Полоса под баннером: самые дорогие предметы за последние открытия.
   Карточка — арт слева, текст справа, как в референсе.

   Тонировка цветом редкости слабая и уходит слева направо. Заливать ею всю
   карточку нельзя: у нас редкости фиолетовые, синие и розовые, и от заливки
   во всю площадь витрина перестаёт быть чёрно-оранжевой. Цвет здесь —
   данные, а не оформление. */

.leaders {
  position: relative; --cut: 14px;
  max-width: var(--page-max); margin: 0 auto 16px; padding: 14px 16px 16px;
  background: var(--metal-a); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--edge);
}
.leaders-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: var(--fs-micro); font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or-2);
}
.leaders-head i { font-style: normal; font-size: var(--fs-label); }

/* Один ряд, как в макете. Вторая строка из трёх карточек обрывалась и
   читалась остатком, а не продолжением. Лишнее уезжает горизонтальной
   прокруткой — той же, что у ленты кейсов над ней. */
.leaders-row {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(196px, 1fr);
  gap: 8px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(252, 108, 5, .35) transparent;
}
.leaders-row::-webkit-scrollbar { height: 6px; }
.leaders-row::-webkit-scrollbar-thumb {
  background: rgba(252, 108, 5, .35); border-radius: 999px;
}
.ld {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 8px; border-radius: var(--r-s);
  border: 1px solid color-mix(in srgb, var(--rc) 38%, transparent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rc) 18%, #0b0e14) 0%, #0b0e14 62%);
  transition: transform var(--t-micro), border-color var(--t-micro);
}
.ld:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rc) 70%, transparent);
}
.ld-art { flex: 0 0 62px; height: 44px; display: grid; place-items: center; }
.ld-art svg, .ld-art img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
}
.ld-txt { display: grid; gap: 1px; min-width: 0; }
.ld-txt b {
  font-size: var(--fs-label); font-weight: 700; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ld-txt small { font-size: var(--fs-micro); color: var(--tx-3); }
.ld-p { font-size: var(--fs-label); font-weight: 800; color: var(--or-2); }
.ld-txt time {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-3);
}

@media (prefers-reduced-motion: reduce) { .ld { transition: none; } }

/* ---- полоса счётчиков ----

   Одна рамка на все числа, ячейки разделены волосяной линией — как в
   референсе. Раньше это были четыре отдельные плашки с наведением и
   размытием: они читались как кнопки, хотя нажимать там нечего.

   Числа настоящие, из site_totals(): открыто кейсов, собрано апгрейдов,
   игроков, выплачено и сыграно в каждом режиме. «Выплачено» — ценность,
   вернувшаяся игрокам, а не выводы со счёта.

   Ряды, а не перенос строки. Счётчиков семь, в один ряд они не встают: при
   читаемой подписи ряду нужно под девятьсот пикселей, и полоса заезжала бы
   на маскота. Перенос по flex-wrap эту задачу не решает — у первой ячейки
   второго ряда остаётся левая граница, потому что «начало ряда» в CSS не
   выражается. Поэтому ряды размечает cases.js, а колонки внутри рядов
   общие: разделители первого и второго ряда стоят на одних вертикалях. */

.promo-stats {
  grid-area: stats; position: relative; z-index: 2;
  display: flex; flex-direction: column;
  width: min(100%, 620px);
  margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: rgba(5, 6, 8, .55);
  backdrop-filter: blur(6px);
  animation: wordUp .7s cubic-bezier(.2, .85, .25, 1) .34s both;
}
.promo-stats .ps-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.promo-stats .ps-row + .ps-row { border-top: 1px solid var(--line); }
.promo-stats .ps {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 16px; min-width: 0;
}
/* Разделитель рисуем границей соседа, а не отдельным узлом: так он сам
   исчезает у первой ячейки ряда. */
.promo-stats .ps + .ps { border-left: 1px solid var(--line); }
/* Кегль подписи мельче примитива .hud: в ячейке шириной в четверть полосы
   «ОТКРЫТО КЕЙСОВ» на десяти пикселях не помещается, а переносить подпись
   на вторую строку — значит развалить высоту ряда по соседям. */
.promo-stats .k {
  font-size: 9px; letter-spacing: .14em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.promo-stats .v {
  font-size: 19px; font-weight: 800; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- кнопка героя ---- */

.promo-cta {
  margin-top: 24px; padding: 14px 30px;
  border: 0; border-radius: var(--r-s); cursor: pointer;
  /* Плотный тёмно-оранжевый, снятый с референса (#e56b09), а не яркий
     градиент: у ENIGGMA оранжевый это краска по металлу, а не подсветка. */
  background: linear-gradient(180deg, #f0770a, #d95f04);
  color: #150a01; font: 800 var(--fs-label)/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: var(--glow-soft), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: filter var(--t-micro), box-shadow var(--t-micro), transform var(--t-micro);
}
.promo-cta:hover { filter: brightness(1.09); box-shadow: var(--glow-mid); }
.promo-cta:active { transform: translateY(1px); }

/* ---------------------------------------------------------- арт героя

   Рендер ENIGGMA во всю площадь баннера: маскот над открытым кейсом справа,
   метеориты и туманность по центру, планета у горизонта. Левая треть у
   картинки почти пустая — туда и ложится текст, ровно как в референсе.

   Колец вокруг маскота больше нет: они дорисовывали свечение туда, где
   художник его уже нарисовал, и спорили с ним. */

.promo-scene {
  /* Слой шириной ровно под объект и прижат вправо. Прежде он занимал всю
     ширину баннера, а картинка внутри стояла у правого края — и маска,
     заданная в процентах ОТ СЛОЯ, срабатывала левее самого арта, то есть
     впустую. Когда слой и объект совпадают, растушёвка всегда попадает в
     край картинки, на любой ширине экрана. */
  position: absolute; top: 0; bottom: 0; right: 0; width: 54%;
  z-index: 0; pointer-events: none;
  /* Арт — ОБЪЕКТ справа, а не подложка на всю ширину. Полная композиция
     растянутая по баннеру тащила яркую туманность под заголовок, и её
     приходилось глушить плотной вуалью. В референсе за текстом просто
     тёмный фон, а маскот с кейсом стоит отдельным объектом у правого края —
     здесь так же: hero-art это вырезанная правая часть того же рендера. */
  background: url('/assets/space/hero-art.webp') no-repeat right center;
  background-size: auto 116%;
  /* Смещение за курсором задаёт JS; scale даёт запас, чтобы сдвиг не
     оголял край. */
  transform: scale(1.06) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
/* Текст читается поверх арта: слева картинка притемняется, справа остаётся
   как есть. Без этого подзаголовок ложится на туманность и теряется. */
/* Левый край объекта растворяется МАСКОЙ, а не тёмной плашкой поверх.
   Разница принципиальная: плашка кладёт прямоугольник поверх сцены и её
   собственный край всё равно видно, а маска убирает сами пиксели картинки,
   и объект уходит в фон без единой линии. */
.promo-scene {
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 44%);
  mask-image: linear-gradient(90deg, transparent 2%, #000 44%);
}
/* Низ слегка притемнён — под полосой счётчиков не должно быть свечения. */
.promo-scene::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(5, 6, 8, .55) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .promo-scene { transition: none; }
}


/* ---------------------------------------------------------- бегущая строка

   Внизу баннера едут настоящие кейсы с ценами. Лента дублируется и уезжает
   ровно на половину — стык приходится сам на себя, шва не видно. */

.promo-ticker {
  grid-area: ticker; position: relative; z-index: 2;
  margin: 0 -38px; padding: 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.pt-fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #0d0d12, transparent 10%,
                              transparent 90%, #0a0a0e);
}
.pt-track {
  display: flex; width: max-content;
  /* Длительность ставит paintTicker по фактической длине ряда:
     с постоянной лента ускорялась каждый раз, когда кейсов
     становилось больше. Запасное значение — на случай, если
     замерить не удалось. */
  animation: ptRun var(--pt-dur, 60s) linear infinite;
}
/* Остановки по наведению здесь НЕТ намеренно. Пауза имеет смысл, когда в
   ленте есть что взять — ссылку, кнопку, — а тут декоративная строка из
   span'ов: кликать в ней нечего, читать построчно незачем. Зато мышь над
   баннером оказывается постоянно (кнопка «Открыть кейс» рядом), и лента
   замирала ровно тогда, когда на неё смотрят, — выглядело поломкой. */
@keyframes ptRun { to { transform: translateX(-50%); } }

.pt-item {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 18px; white-space: nowrap;
  border-right: 1px solid var(--line);
  font-size: var(--fs-cap); color: var(--tx-2);
}
.pt-item b { color: var(--tx); font-weight: 700; }
.pt-item .pt-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--pc, var(--or)); box-shadow: 0 0 8px 1px var(--pc, var(--or));
}
.pt-item .pt-price { color: var(--or-2); font-weight: 800; }
.pt-item .pt-n { color: var(--tx-3); font-size: var(--fs-micro); }

@media (max-width: 860px) {
  .promo {
    grid-template-columns: minmax(0, 1fr);
    /* Полоса счётчиков остаётся В сетке героя. Её здесь не было — и до
       760, где узел переносит cases.js, она попадала в неявную колонку:
       вставала у правого края поверх ленты. С одним рядом это выглядело
       случайностью, с двумя стало видно. */
    grid-template-areas: "text" "stats" "ticker";
    padding: 24px 20px 0; gap: 14px;
  }
  /* На узком экране текст ложится не сбоку от арта, а поверх него, поэтому
     притемнение разворачивается: сверху плотно под заголовок и плашки,
     снизу открыто — там видно кейс и планету. Прежняя горизонтальная
     растяжка оставляла «СКИНОВ 1615» ровно на светящемся кейсе. */
  .promo-scene {
    width: 100%; background-position: right 34%;
    -webkit-mask-image: none; mask-image: none;
  }
  .promo-scene::after {
    background: linear-gradient(180deg,
      rgba(5, 6, 8, .93) 0%, rgba(5, 6, 8, .88) 46%,
      rgba(5, 6, 8, .55) 74%, rgba(5, 6, 8, .35) 100%);
  }
  .promo-ticker { margin: 0 -20px; }
  .promo-text { padding-bottom: 20px; }
}

/* На телефоне баннер не должен съедать пол-экрана: описание прячем, плашки
   ужимаем в два ряда по две. */
@media (max-width: 560px) {
  .promo-text p { display: none; }
  .promo-h { margin-top: 12px; }
  .promo-stats { margin-top: 14px; gap: 8px; }
  /* min-width: 0 обязателен: иначе плашка не ужимается ниже своего текста
     и ряды по две не складываются. */
  .promo-stats .ps { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 8px 12px; }
  .promo-stats .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .promo-stats .v { font-size: var(--fs-body); }
  .pt-item { padding: 9px 14px; font-size: var(--fs-cap); }
}

@media (prefers-reduced-motion: reduce) {
  .promo *, .promo::after { animation: none !important; }
}

/* На узких экранах три колонки не помещаются — уходим на две, потом на одну. */
@media (max-width: 880px) { .case-grid { grid-auto-columns: 168px; } }
/* Явной колонки на узком экране здесь БЫТЬ НЕ ДОЛЖНО. Стояло
   «grid-template-columns: minmax(0, 1fr)» — видимо, в расчёте на один кейс
   в ряд. Но полка так и осталась горизонтальной каруселью (grid-auto-flow:
   column), а в контейнере с прокруткой свободного места нет, и 1fr
   разрешается в НОЛЬ: первая карточка получала колонку шириной 0 и
   ужималась до 20 пикселей, торча из-за левого края обрубком. Остальные
   уходили в неявные колонки по 168 и выглядели нормально — потому и
   держалось так долго. Замер: grid-template-columns = «0px 168px 168px…».

   Карусель на телефоне работает как задумано: две карточки в кадре,
   остальные смахиванием. */
@media (max-width: 600px) { .case-grid { grid-template-columns: none; } }
/* Внутри кейса лента содержимого живёт по своим правилам. */

/* ============================================================ пополнение */

.dep { max-width: 560px; }
.dep-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.dep-h h3 { margin: 0; font-size: 19px; }
.modal-x {
  border: 0; background: transparent; cursor: pointer; color: var(--tx-3);
  font-size: 16px; line-height: 1; padding: 6px; border-radius: 8px;
  transition: color .15s, background .15s;
}
.modal-x:hover { color: var(--tx); background: var(--panel-3); }

.dp-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dp-way {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--bg-2); color: var(--tx);
  transition: border-color .16s, background .16s, transform .16s;
}
.dp-way:hover { transform: translateY(-2px); border-color: var(--line-2); }
.dp-way.on { border-color: var(--or); background: rgba(255, 122, 24, .08); }
.dw-ic {
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 4px;
  display: grid; place-items: center; font-size: var(--fs-body);
  background: var(--panel-3); color: var(--tx-2);
}
.dp-way.on .dw-ic { background: var(--or); color: #170800; }
.dp-way b { font-size: var(--fs-ui); }
.dw-note { font-size: var(--fs-micro); color: var(--tx-3); }
/* Подсказка честно говорит, что провайдера нет, а выкуп скинов работает. */
.dw-hint { font-size: 10px; color: var(--tx-3); margin-top: 4px; }
.dp-way.live .dw-hint { color: var(--green); }

.dep-body { margin-top: 18px; }
.dep-body .help { margin: 0 0 14px; }
.dep-body .btn.big { width: 100%; justify-content: center; }

.dp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dp-chip {
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--tx-2);
  font: 700 var(--fs-label)/1 inherit; transition: border-color .15s, color .15s;
}
.dp-chip:hover { border-color: var(--or); color: var(--or-2); }

.dep-sum { display: flex; gap: 10px; }
.dep-sum .fld-money { flex: 1; }

.dep-promo {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: var(--fs-cap); color: var(--tx-2);
}
.dp-row { display: flex; gap: 8px; }
.dp-row input { flex: 1; min-width: 0; }

@media (max-width: 560px) {
  .dp-ways { grid-template-columns: 1fr; }
  .dp-way { flex-direction: row; align-items: center; gap: 12px; }
  .dw-ic { margin-bottom: 0; }
}

/* ---- пополнение в крипте ---------------------------------------------
   Два экрана внутри того же окна: список «монета в сети» и реквизиты.
   Всё, что игрок переписывает или сканирует, набрано моноширинным и с
   переносом по символам: адрес в сорок символов обязан помещаться
   целиком, а не уезжать за край. */

.cp-list { display: flex; flex-direction: column; gap: 8px; }
.cp-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); color: var(--tx);
  transition: border-color .15s, background .15s, transform .15s;
}
.cp-row:hover { border-color: var(--or); transform: translateX(2px); }
.cp-sym {
  min-width: 54px; padding: 5px 0; text-align: center; font: 800 var(--fs-cap)/1 inherit;
  border-radius: var(--r-s); background: var(--panel-3); color: var(--or-2);
}
.cp-mid { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cp-mid b { font-size: var(--fs-ui); }
.cp-mid i { font-size: var(--fs-micro); color: var(--tx-3); font-style: normal; }
.cp-eta { font-size: var(--fs-micro); color: var(--tx-3); white-space: nowrap; }

.cp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.cp-what b { font-size: var(--fs-ui); }
.cp-what i { font-size: var(--fs-cap); color: var(--tx-2); font-style: normal; }

.cp-req { display: flex; gap: 16px; align-items: flex-start; }
.cp-qr {
  padding: 8px; border-radius: var(--r); background: #fff; line-height: 0;
  flex: 0 0 auto;
}
.cp-qr img { width: 180px; height: 180px; display: block; }
.cp-fields { flex: 1; min-width: 0; }

.cp-fld-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; font-size: var(--fs-cap); color: var(--tx-2);
}
.cp-must {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: #170800; background: var(--or); border-radius: 999px; padding: 2px 8px;
}
/* Кнопка под полем, а не рядом: адрес EVM — сорок два символа, и рядом с
   кнопкой он не помещается в строку ни при каком размере окна. Разорванный
   пополам адрес игрок читает как ошибку и идёт сверять по символам. */
.cp-copy { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.cp-copy code {
  align-self: stretch; min-width: 0; padding: 9px 11px; font-size: var(--fs-cap);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* Перенос по символам, а не по словам: в адресе пробелов нет вовсе, и
     без этого он вылезает за окно на телефоне. */
  word-break: break-all; line-height: 1.45;
  border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: var(--panel); color: var(--tx);
}
.cp-copy .btn { white-space: nowrap; }
.cp-copy .btn.ok { border-color: var(--green); color: var(--green); }

.cp-warn { margin: 8px 0 0; font-size: var(--fs-cap); color: var(--tx-2); }
.cp-warn b { color: var(--tx); }
.cp-also { margin: 8px 0 0; font-size: var(--fs-cap); color: var(--tx-3); }
.cp-also b { color: var(--tx-2); }

/* Блок комментария не менее заметен, чем адрес: без него платёж в TON не
   привязывается к игроку, и это самая частая ошибка memo-сетей. */
.cp-memo {
  margin-top: 16px; padding: 13px 14px; border-radius: var(--r);
  border: 1px solid var(--or); background: var(--or-soft);
}

.cp-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin: 16px 0 0; padding: 13px 0 0;
  border-top: 1px solid var(--line);
}
.cp-facts dt { font-size: var(--fs-micro); color: var(--tx-3); margin-bottom: 3px; }
.cp-facts dd { margin: 0; font: 700 var(--fs-label)/1.3 inherit; }
.cp-facts dd i { display: block; font: 400 var(--fs-micro)/1.3 inherit; color: var(--tx-3); }
.cp-rate-off { color: var(--red); font-weight: 400; font-size: var(--fs-cap); }

.cp-hist { margin-top: 18px; }
.cp-hist-h {
  font-size: var(--fs-micro); color: var(--tx-3); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 7px;
}
.cp-empty { margin: 14px 0 0; font-size: var(--fs-cap); color: var(--tx-3); }
.cp-hrow {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--r-s); background: var(--panel); font-size: var(--fs-cap);
  border-left: 2px solid var(--line-2);
}
.cp-hrow + .cp-hrow { margin-top: 5px; }
.cp-hrow.ok { border-left-color: var(--green); }
.cp-hrow.bad { border-left-color: var(--red); }
.cp-hrow.warn { border-left-color: var(--or); }
.cp-hrow.wait { border-left-color: var(--blue); }
.cp-hsum { font-weight: 700; }
.cp-hnet { color: var(--tx-3); }
.cp-hst { margin-left: auto; color: var(--tx-2); }
.cp-hlink { color: var(--tx-3); text-decoration: none; border-bottom: 1px dotted; }
.cp-hlink:hover { color: var(--or-2); }

@media (max-width: 560px) {
  .cp-req { flex-direction: column; align-items: stretch; }
  .cp-qr { align-self: center; }
  .cp-hrow { flex-wrap: wrap; }
  .cp-hst { margin-left: 0; width: 100%; }
}

/* ---- приём крипты в админке ------------------------------------------
   Экран плотный намеренно: оператор разбирает очередь глазами, и чем
   больше строк помещается без прокрутки, тем меньше он теряет контекст.
   Цвет здесь несёт смысл, а не оформление: красным отмечено то, из-за чего
   деньги не доходят, — незаданный кошелёк, отставший сканер, отклонение от
   привязки. */

.btn.xs { padding: 4px 9px; font-size: var(--fs-micro); border-radius: var(--r-s); }
#page-deposits_admin .nowrap { white-space: nowrap; }
#page-deposits_admin .tbl td { vertical-align: top; }
#page-deposits_admin .tbl .mono { font-size: var(--fs-micro); }

#page-deposits_admin td.ok,
#page-deposits_admin span.ok { color: var(--green); }
#page-deposits_admin td.bad,
#page-deposits_admin span.bad,
#page-deposits_admin i.bad { color: var(--red); font-style: normal; }
#page-deposits_admin td.warn,
#page-deposits_admin span.warn { color: var(--or-2); }
#page-deposits_admin tr.row-bad { background: rgba(255, 77, 94, .06); }

#page-deposits_admin .adm + .adm { margin-top: 18px; }

.ad-ex {
  color: var(--tx-3); text-decoration: none; font-size: var(--fs-micro);
  border-bottom: 1px dotted; margin-right: 8px;
}
.ad-ex:hover { color: var(--or-2); }

.ad-todo { margin: 0; padding-left: 18px; font-size: var(--fs-cap); color: var(--tx-2); }
.ad-todo li { margin: 5px 0; }
.ad-todo b { color: var(--tx); }

/* Итоги истории над «Переводами»: каждое число — ссылка на свой фильтр. */
.ad-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  font-size: var(--fs-cap); }
.ad-sum a { color: var(--tx-2); text-decoration: none; }
.ad-sum a b { color: var(--tx); font-variant-numeric: tabular-nums; }
.ad-sum a:hover, .ad-sum a.on { color: var(--or-2); }
/* Сверка с цепью — строкой под своей сетью, мельче таблицы. */
#page-deposits_admin tr.ad-chain td { font-size: var(--fs-cap); color: var(--tx-2);
  padding-top: 0; }
#page-deposits_admin tr.ad-chain div { margin-top: 4px; }

.ad-alerts { display: flex; flex-direction: column; gap: 6px; }
.ad-alert {
  display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-cap);
  padding: 7px 10px; border-radius: var(--r-s); background: var(--panel);
  border-left: 2px solid var(--or);
}
.ad-alert b { color: var(--or-2); white-space: nowrap; }
.ad-alert span { flex: 1; min-width: 0; color: var(--tx-2); }
.ad-alert i { font-style: normal; white-space: nowrap; }

/* Поля в окнах правки — те же, что в модалке пополнения: подпись сверху,
   поле снизу. Чекбоксу ширина поля не нужна, поэтому он ложится в строку. */
#modal .dep-promo input[type="checkbox"] { width: 18px; height: 18px; }
#modal .dep-promo select {
  width: 100%; padding: 9px 11px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: var(--panel); color: var(--tx);
  font: inherit; font-size: var(--fs-label);
}

/* Состояние подключения: три факта в строку, чтобы «почему не сканирует»
   читалось одним взглядом — ключ провайдера, ключ TRON, ключи адресов. */
.ad-keys {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.ad-keys > div {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  border-radius: var(--r-s); background: var(--panel); font-size: var(--fs-cap);
}
.ad-keys b { font-size: var(--fs-micro); color: var(--tx-3); text-transform: uppercase;
             letter-spacing: .06em; }
.ad-keys i { font-style: normal; font-size: var(--fs-micro); }



/* ---------------------------------------------------------- вход: Steam первым */

.gate-steam.big { padding: 15px 0; font-size: var(--fs-body); }
.gate-why {
  margin: 12px 0 0; text-align: center; font-size: var(--fs-cap); line-height: 1.5;
  color: var(--tx-3);
}
.gate-toggle {
  display: block; width: 100%; margin-top: 16px; padding: 9px 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--tx-3); font: 600 var(--fs-cap)/1 inherit;
  border-top: 1px solid var(--line);
  transition: color .15s;
}
.gate-toggle:hover { color: var(--or); }
#gateForm { margin-top: 14px; }

/* ============================================================ барабаны

   С трёх кейсов ленты встают колонками — вращающимися барабанами.

   Слои снизу вверх:
     .reel-port    окно, обрезает ленту и держит затемнение соседей
     .reel-streak  полосы скорости, видны только во время вращения
     .reel-mark    рамка выигрыша с усиками по краям
     .reel-glass   стекло: блик по диагонали и виньетка по бокам
     .reel-burst   ударная волна в момент остановки

   Геометрия кратна ячейке: окно ровно полторы, значит сверху и снизу видно
   по четверти соседа, а затемнение занимает ровно эти четверти и никогда
   не заезжает на середину. Зазора между ячейками нет — иначе кратность
   ломается и накладка наползает на выпавший предмет. */

.reels.vert {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 14px; width: 100%; perspective: 1200px;
}

.reel-wrap.v {
  position: relative; flex: 0 0 var(--cellw); min-width: 0;
  padding: 10px; border-radius: 20px;
  background: linear-gradient(160deg, #23232d, #101016 58%, #0a0a0e);
  border: 1px solid #34343f;
  box-shadow: 0 18px 40px -18px #000, inset 0 1px 0 rgba(255,255,255,.06);
  transition: box-shadow .45s, border-color .45s, transform .45s;
}
/* Пока крутится — барабан чуть подан вперёд и покачивается. */
.reel-wrap.v.spin { animation: drumIdle 1.6s ease-in-out infinite; }
@keyframes drumIdle { 50% { transform: translateY(-3px); } }

/* --- окно ---
   Селекторы уточнены до .reel-wrap.v: ниже в файле живёт свой .reel-port
   для горизонтальной ленты, и без уточнения он бы всё перебил. */

.reel-wrap.v .reel-port {
  position: relative; height: var(--viewh); overflow: hidden;
  border-radius: 13px; padding: 0; width: 100%;
  background: radial-gradient(120% 100% at 50% 50%, #14141c, #06060a 78%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .9);
}
/* Затемнение соседей: ровно по четверти сверху и снизу. */
.reel-wrap.v .reel-port::before, .reel-wrap.v .reel-port::after {
  content: ''; position: absolute; left: 0; right: 0; top: auto; bottom: auto;
  width: auto; height: calc((100% - var(--cellh)) / 2);
  z-index: 3; pointer-events: none;
}
.reel-wrap.v .reel-port::before {
  top: 0; background: linear-gradient(180deg, #06060a, rgba(6,6,10,.35) 88%, transparent);
}
.reel-wrap.v .reel-port::after {
  bottom: 0; background: linear-gradient(0deg, #06060a, rgba(6,6,10,.35) 88%, transparent);
}

.reel-wrap.v .reel {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; will-change: transform;
}
.reel-wrap.v .reel .item {
  flex: 0 0 var(--cellh); width: 100%; height: var(--cellh);
  margin: 0; padding: 8px; cursor: default;
  border-radius: 0; border-left: 0; border-right: 0;
  border-top: 1px solid rgba(255,255,255,.05); border-bottom: 0;
}
.reel-wrap.v .reel .item::before { display: none; }
.reel-wrap.v .reel .item .item-art { height: calc(var(--cellh) * 0.46); }
.reel-wrap.v .reel .item-name { font-size: 10px; }
.reel-wrap.v .reel .item-skin { font-size: var(--fs-cap); margin-bottom: 3px; }
.reel-wrap.v .reel .item-price { font-size: var(--fs-label); }
.reel-wrap.v .reel .item-wear { font-size: 10px; }
/* ============================================================ смотровой люк

   Горизонтальная лента оформлена как корабельный иллюминатор: толстая
   стальная рама с заклёпками по краю, утопленное окно с фаской и блик по
   стеклу. Раньше это была просто тёмная полоса с градиентами по бокам —
   на светлых скинах края выглядели грязным пятном. */

/* min-width: 0 обязателен. У грид-элемента минимальный размер по умолчанию
   считается от содержимого, а внутри лежит лента в одиннадцать тысяч
   пикселей — рама растягивалась под неё вместо того, чтобы держать окно.
   Раньше это скрывал overflow: hidden, который сам обнуляет минимум. */
.reel-wrap.h {
  position: relative; overflow: visible;
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 17px 20px; margin-bottom: 12px;
  border: 1px solid #3c3c49; border-radius: 22px;
  background: linear-gradient(180deg, #2c2c36 0%, #1b1b23 16%,
                                      #17171e 84%, #262630 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .65),
    0 14px 34px rgba(0, 0, 0, .55);
}

/* Заклёпки: ряд одинаковых кружков сверху и снизу рамы. */
.reel-wrap.h::before, .reel-wrap.h::after {
  content: ''; position: absolute; left: 26px; right: 26px; height: 7px;
  z-index: 2; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 45%, #545464 0 2px, transparent 2.6px),
    radial-gradient(circle at 50% 62%, rgba(0, 0, 0, .8) 0 2px, transparent 2.6px);
  background-size: 34px 7px; background-position: center;
}
.reel-wrap.h::before { top: 5px; }
.reel-wrap.h::after { bottom: 5px; }

/* Окно: утоплено в раму, по краям уходит в темноту, поверх лежит блик. */
.reel-port {
  position: relative; overflow: hidden; width: 100%; min-width: 0;
  border-radius: 13px; padding: 14px 0;
  background:
    linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .05) 50%,
                    transparent 60%),
    linear-gradient(180deg, #06060a, #0c0c12 60%, #08080d);
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 8px 20px rgba(0, 0, 0, .9),
    inset 0 -6px 16px rgba(0, 0, 0, .8);
}
.reel-port::before, .reel-port::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 108px;
  z-index: 3; pointer-events: none;
}
.reel-port::before { left: 0; background: linear-gradient(90deg, #08080d, transparent); }
.reel-port::after { right: 0; background: linear-gradient(270deg, #08080d, transparent); }

/* Указатель середины: фрезерованная риска с флажками сверху и снизу. */
.reel-wrap.h .reel-mark {
  position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; z-index: 5;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--or) 16%,
                              var(--or) 84%, transparent);
  box-shadow: 0 0 18px var(--or-glow);
}
.reel-wrap.h .reel-mark::before,
.reel-wrap.h .reel-mark::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  filter: drop-shadow(0 0 6px var(--or-glow));
}
.reel-wrap.h .reel-mark::before { top: -2px; border-top: 11px solid var(--or); }
.reel-wrap.h .reel-mark::after { bottom: -2px; border-bottom: 11px solid var(--or); }

/* Карточки крупнее: шаги совпадают с REEL_TIERS в cases.js. */
.reel { gap: 10px; }
.reels.r1 .reel .item { width: 168px; padding: 10px; }
.reels.r1 .reel .item-art { height: 96px; }
.reels.r1 .reel .item-skin { font-size: var(--fs-ui); }
.reels.r1 .reel .item-price { font-size: var(--fs-body); }

.reels.r2 .reel .item { width: 140px; padding: 8px; }
.reels.r2 .reel .item-art { height: 80px; }
.reels.r2 .reel .item-skin { font-size: var(--fs-label); }

@media (max-width: 760px) {
  .reel-wrap.h { padding: 13px 12px; border-radius: 16px; }
  .reel-wrap.h::before, .reel-wrap.h::after { left: 16px; right: 16px; }
  .reel-port::before, .reel-port::after { width: 56px; }
}

/* Слот повыше: карточкам стало тесно, когда их несколько. Растягивать
   одиночный предмет на весь блок больше не пробуем — сетка ровнее.
   Потолка по высоте у тела нет: он мешал ему занять свободное место, из-за
   чего плашки цены в двух слотах вставали на разной высоте. */
.slot { min-height: 268px; }

/* ---------------------------------------------------------- фон апгрейдера

   Сцена была ровным тёмным полем: два слота и кольцо между ними висели на
   пустоте. Теперь под ними тлеет пара пятен, а от кольца в стороны идёт
   слабый свет — движения ровно столько, чтобы страница не выглядела мёртвой. */

.upg-stage { position: relative; isolation: isolate; }
.upg-stage::before, .upg-stage::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(70px);
}
.upg-stage::before {
  width: 46%; height: 150%; left: -8%; top: -25%;
  background: radial-gradient(circle, rgba(255, 122, 24, .16), transparent 68%);
  animation: upgDrift 19s ease-in-out infinite;
}
.upg-stage::after {
  width: 46%; height: 150%; right: -8%; top: -25%;
  background: radial-gradient(circle, rgba(177, 76, 255, .13), transparent 68%);
  animation: upgDrift 24s ease-in-out infinite reverse;
}
@keyframes upgDrift {
  50% { transform: translate(26px, 20px) scale(1.12); }
}

/* Сияние вокруг кольца: сильнее, когда ставка собрана. */
.ring-wrap { position: relative; }
.ring-wrap::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 288px; height: 288px; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--or-soft), transparent 62%);
  opacity: .7; transition: opacity .4s;
  animation: ringBreath 6s ease-in-out infinite;
}
.slot.filled ~ .ring-wrap::before { opacity: 1; }
@keyframes ringBreath {
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: .45; }
}

/* Цвет редкости лежит на верхней половине слота — там, где сама вещь, — а
   не пятном в углу: под карточкой он спорил с ценой и кнопкой доклада.

   Три слоя дают глубину: широкий купол сверху, узкий и более густой ореол
   прямо за предметом и тонкая цветная черта по верхней кромке. Пока слот
   пуст, всё это оранжевое, как остальной интерфейс; с выбранной вещью
   берёт её класс. Это и заменяет рамку на одинокой карточке. --rc ставит
   renderSlots по самой дорогой вещи слота. */
.slot { position: relative; overflow: hidden; }
/* Заливка идёт по диагонали от внешнего верхнего угла к середине — левый
   слот светит из своего угла, правый из своего, и оба тянутся к кольцу
   между ними. Угол задан переменной, чтобы правая половина зеркалила
   левую, а не повторяла её. */
.slot { --rg-angle: 128deg; }
.slot.notch-r { --rg-angle: 232deg; }
.slot::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 80%;
  pointer-events: none;
  background:
    linear-gradient(var(--rg-angle),
      color-mix(in oklab, var(--rc, var(--or)) 82%, transparent) 0%,
      color-mix(in oklab, var(--rc, var(--or)) 34%, transparent) 34%,
      color-mix(in oklab, var(--rc, var(--or)) 9%, transparent) 62%,
      transparent 86%),
    linear-gradient(var(--rc, var(--or)), transparent 3px);
  /* Без маски заливка кончалась ровной чертой поперёк слота — на скриншоте
     это читалось как шов. Маска уводит её в ноль плавно. */
  -webkit-mask-image: linear-gradient(#000 42%, transparent);
          mask-image: linear-gradient(#000 42%, transparent);
  opacity: .12; transition: opacity .35s, background .35s;
}
/* Купол редкости внутри слота убран совсем. У панели теперь своя
   подсветка от рендер-рамки — холодная у источника, тёплая у цели, — и
   второй цветной слой поверх неё делал ровно то, от чего мы уходили:
   заливал панель цветом предмета. Редкость и так видна на самой карточке. */
.slot::after { display: none; }
.slot.filled.one {
  border-color: color-mix(in oklab, var(--rc, var(--or)) 45%, var(--line-2));
}

@media (prefers-reduced-motion: reduce) {
  .upg-stage::before, .upg-stage::after, .ring-wrap::before { animation: none; }
}

/* ---------------------------------------------------------- выбранный скин

   Выбор было видно только по рамке. Теперь карточка чуть приподнимается,
   по краю бежит оранжевая искра, а в углу загорается галочка — сразу ясно,
   что уйдёт в ставку. */

#myItems .item.sel, .slot-body .item {
  transform: translateY(-2px);
  border-color: var(--or);
  box-shadow: 0 0 0 1px var(--or), 0 10px 22px -8px var(--or-glow);
}
#myItems .item.sel::after, .slot-body .item::after {
  opacity: calc(var(--rg) + .12);
}

/* Бегущая искра по кромке: тонкая полоска, обходящая карточку по кругу. */
#myItems .item.sel { position: relative; }
#myItems .item.sel .item-art::before {
  content: ''; position: absolute; inset: -40% -6%;
  background: conic-gradient(from var(--spin, 0deg),
    transparent 0deg 300deg, rgba(255, 168, 56, .55) 340deg, transparent 360deg);
  animation: selSpin 3.2s linear infinite;
  pointer-events: none; z-index: 0;
}
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes selSpin { to { --spin: 360deg; } }
#myItems .item.sel .item-art { position: relative; overflow: hidden; }
#myItems .item.sel .item-art img { position: relative; z-index: 1; }

/* Галочка в углу — та же метка, что на странице выкупа. */
#myItems .item.sel::before {
  background: var(--or);
  box-shadow: 0 0 10px var(--or-glow);
}

@media (prefers-reduced-motion: reduce) {
  #myItems .item.sel .item-art::before { animation: none; }
}

/* ---------------------------------------------------------- барабан: слои */

/* Полосы скорости. Их видно только пока крутится: движущаяся штриховка
   поверх ленты читается как смаз, которого CSS-фильтром не добиться —
   blur() размывает во все стороны, а нам нужно только по вертикали. */
.reel-streak {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px);
  transition: opacity .35s;
}
.reel-wrap.v.spin .reel-streak {
  opacity: 1; animation: streakRun .16s linear infinite;
}
@keyframes streakRun { to { transform: translateY(9px); } }

/* Рамка выигрыша с усиками по краям. Пока крутится — тускло-оранжевая,
   на остановке загорается цветом выпавшей редкости. */
.reel-wrap.v .reel-mark {
  position: absolute; left: 10px; right: 10px; z-index: 4; pointer-events: none;
  top: 50%; height: var(--cellh); transform: translateY(-50%);
  border-top: 2px solid var(--or); border-bottom: 2px solid var(--or);
  opacity: .45; transition: opacity .4s, border-color .4s, box-shadow .4s;
}
.reel-wrap.v .reel-mark i {
  position: absolute; width: 9px; height: 9px;
  border: 2px solid currentColor; color: var(--or);
  transition: color .4s;
}
.reel-wrap.v .reel-mark i:first-child {
  left: -1px; top: -1px; border-right: 0; border-bottom: 0;
}
.reel-wrap.v .reel-mark i:last-child {
  right: -1px; bottom: -1px; border-left: 0; border-top: 0;
}
.reel-wrap.v.stopped .reel-mark {
  opacity: 1; border-color: var(--win, var(--or));
  box-shadow: 0 0 26px -6px var(--win, var(--or)),
              inset 0 0 26px -12px var(--win, var(--or));
}
.reel-wrap.v.stopped .reel-mark i { color: var(--win, var(--or)); }

/* Стекло: косой блик и виньетка по бокам — окно выглядит закрытым, а не
   дыркой в панели. */
.reel-glass {
  position: absolute; inset: 10px; z-index: 5; pointer-events: none;
  border-radius: 13px;
  background:
    linear-gradient(104deg, transparent 38%, rgba(255,255,255,.055) 49%,
                    transparent 60%),
    radial-gradient(120% 96% at 50% 50%, transparent 52%, rgba(0,0,0,.55));
}

/* Ударная волна: кольцо расходится из середины в момент остановки. */
.reel-burst {
  position: absolute; left: 50%; top: 50%; z-index: 6; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 2px solid var(--win, var(--or)); opacity: 0;
}
.reel-wrap.v.stopped .reel-burst { animation: drumBurst .8s cubic-bezier(.2,.8,.3,1) both; }
@keyframes drumBurst {
  0%   { opacity: .9; transform: scale(.4); }
  100% { opacity: 0; transform: scale(7); }
}

/* Остановка: барабан оживает цветом выпавшего. */
.reel-wrap.v.stopped {
  border-color: color-mix(in srgb, var(--win, var(--or)) 42%, #34343f);
  box-shadow: 0 18px 44px -18px var(--win, var(--or)),
              inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: drumLand .5s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes drumLand {
  0%   { transform: translateY(4px) scale(.985); }
  100% { transform: none; }
}

/* Выпавшая карточка подсвечивается своим цветом. */
.reel-wrap.v .reel .item.hit { animation: cellHit .5s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes cellHit {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.reel-wrap.v .reel .item.hit::after { opacity: calc(var(--rg) * 2.6); }

@media (max-width: 980px) {
  .reels.vert { gap: 8px; }
  .reel-wrap.v { flex: 1 1 0; padding: 6px; }
  .reel-glass { inset: 6px; }
  .reel-wrap.v .reel-mark { left: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-wrap.v, .reel-wrap.v.stopped, .reel-streak,
  .reel-wrap.v.stopped .reel-burst { animation: none; }
}

/* ================================================================== РАКЕТА
   Мини-игра Crash. Палитра общая с сайтом: оранжевый акцент, тёмные панели.
   Зоны множителя (белый -> жёлтый -> оранжевый -> красный) задаются из JS
   инлайном, потому что порог зависит от настроек, а не от разметки. */

/* Живая точка в меню: раунды идут постоянно, и это стоит показать. */
.nav-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-left: auto;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, .6);
  animation: crLive 2s ease-out infinite;
}
@keyframes crLive {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 127, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

/* ---------------------------------------------------------- каркас «Краша»

   Три колонки вокруг игрового кадра: ставка слева, полёт по центру, чужие
   ставки справа. Раньше зоны стояли стопкой, и список ставок оказывался под
   инвентарём — в полёте до него было не доскроллить, а смотреть на него надо
   ровно тогда, когда смотришь на полёт.

   Высоту строки задаёт панель ставки — единственный блок с собственным
   ростом. Кадр растягивается за ней, правый рельс тоже, и низ у всех трёх
   колонок один. Никаких вычислений от высоты окна: они расходились с
   содержимым панели то на сотню пикселей вверх, то на сотню вниз. */

.cr {
  display: flex; flex-direction: column; gap: 14px;
  max-width: var(--page-max); margin-inline: auto; width: 100%;
}

/* ---- строка игры: ставка + кадр ----

   Шапки у игры нет. Марка, банк и счётчик игроков занимали первый экран
   целой полосой ради трёх чисел, два из которых стоят в блоке ставок раунда,
   а третье — в шапке сайта. Полосы не стало — кадр и панель поднялись на её
   место. */

.cr-grid {
  display: grid;
  grid-template-columns: var(--cr-bet-w) minmax(0, 1fr);
  gap: 14px; align-items: stretch;
}
/* Панель не растягивается вместе со строкой: её содержимое имеет свою
   высоту, и резиновый низ выглядел бы дырой в панели. */
.cr-betcol { align-self: start; }
/* Панель шире, когда в ставке есть вещи: строке скина нужно место под
   название, а пустой панели — нет. Переход по grid-template-columns: колонка
   разъезжается, а не прыгает. */
.cr-grid { transition: grid-template-columns var(--t-ui) ease; }
.cr-grid.wide { --cr-bet-w: 372px; }
.cr-stage { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* ---- прошлые множители поверх кадра ----

   Лента лежит НА поле, без подложки: собственный блок под неё занимал
   отдельную строку макета ради полутора десятков чисел, которые и так
   читаются как надпись на кадре. Плашки при этом свои границы сохраняют —
   без них цветные числа на звёздном небе сливаются с фоном.

   Прижата к верхнему краю; крупные показания раунда отодвинуты вниз ровно
   на её высоту (см. --cr-hx-h в .cr-overlay), поэтому пересечься они не
   могут ни при каком числе плашек. */

.cr-history {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0;
  display: flex; gap: 6px; padding: 10px 12px 4px;
  overflow-x: auto; scrollbar-width: none;
  /* Края растворяются: обрезанная пополам плашка читается как брак вёрстки,
     а растворённая — как «здесь ещё есть». */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px,
                      #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22px,
              #000 calc(100% - 22px), transparent 100%);
}
.cr-history::-webkit-scrollbar { display: none; }
.cr-hx {
  flex: none; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  font: 800 var(--fs-cap)/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255, 255, 255, .10); color: var(--tx);
  /* Полупрозрачная подложка вместо сплошной: кадр под плашкой должен
     оставаться кадром, иначе полоса снова превращается в блок. */
  background: rgba(10, 10, 14, .62); backdrop-filter: blur(6px);
  transition: transform .12s ease, filter .12s ease;
}
/* Появляется только САМАЯ НОВАЯ плашка — та, что слева. Анимация на всех
   сразу означала, что раз в раунд лента целиком мигает и на треть секунды
   исчезает: перерисовка списка перезапускает её каждому элементу. */
.cr-hx:first-child { animation: crHxIn .35s ease; }
.cr-hx:hover { transform: translateY(-2px); filter: brightness(1.25); }
.cr-hx.bust { color: #ff8f9a; border-color: rgba(255, 77, 94, .40); }
.cr-hx.low  { color: var(--tx-2); }
.cr-hx.mid  { color: #ffd27a; border-color: rgba(255, 210, 122, .35); }
.cr-hx.high { color: var(--or-2); border-color: rgba(255, 168, 56, .45);
              background: rgba(255, 122, 24, .16); }
.cr-hx.top  { color: #180a00; background: linear-gradient(180deg, var(--or-2), var(--or-3));
              border-color: transparent; }
.cr-hx-empty {
  align-self: center; font-size: var(--fs-cap); color: var(--tx-3);
}

@keyframes crHxIn { from { transform: scale(.6); opacity: 0; } }

/* ---- игровой кадр ---- */

.cr-board {
  /* Ширина — весь остаток строки, высота — весь остаток колонки. */
  position: relative; width: 100%;
  flex: 1 1 auto; min-height: var(--cr-board-min);
  border-radius: var(--r);
  border: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(255, 122, 24, .16), transparent 62%),
    linear-gradient(180deg, #0a0a0f 0%, var(--panel) 100%);
  box-shadow: var(--shadow);
}
.cr-board canvas { position: absolute; inset: 0; display: block; }

/* Показания прижаты к верху: ракета выводится в центр поля, и цифра посреди
   экрана оказалась бы ровно под ней. */
.cr-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  pointer-events: none; text-align: center;
}
.cr-readout {
  /* Отступ считается от высоты ленты множителей над ней, а не подобран на
     глаз: изменится размер плашек — показания уедут вместе с ними. */
  margin-top: var(--cr-hx-h); padding: 10px 26px 12px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(8, 8, 12, .55); border: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(7px);
}
.cr-mult {
  font: 800 clamp(40px, 5.4vw, 62px)/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  transition: color .25s ease;
}
.cr-mult.crashed { animation: crBoom .45s cubic-bezier(.2, .9, .3, 1); }
@keyframes crBoom {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.16) rotate(-1.5deg); }
  60%  { transform: scale(.97) rotate(.8deg); }
  100% { transform: scale(1); }
}
/* Разрядка была .16em — на строке из трёх слов это уже не подпись, а ребус.
   Оставили ровно столько, чтобы капс не слипался. */
.cr-status {
  font-size: var(--fs-cap); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-2);
}
.cr-status.flying  { color: var(--or-2); }
.cr-status.crashed { color: var(--red); }
.cr-status.betting { color: var(--green); }

/* Кольцо обратного отсчёта: заполняется через --p, который ставит JS. */
.cr-timer {
  --p: 0;
  margin-top: 5px; padding: 6px 16px; border-radius: 999px;
  font: 800 var(--fs-body)/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--tx);
  border: 1px solid var(--line-2);
  background:
    linear-gradient(90deg, var(--or-soft) calc(var(--p) * 100%),
                    rgba(18, 18, 24, .82) calc(var(--p) * 100%));
}

/* Низ поля одной строкой: подпись раунда слева, кнопки справа. Порознь,
   двумя абсолютами, они налезали друг на друга, как только поле стало ýже. */
.cr-bottom {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  pointer-events: none;                    /* канва под ним остаётся кликабельной */
}
/* Подпись раунда рядом скрыта (см. .cr-fair ниже), и без авто-поля кнопки
   уезжали в левый угол — под самую траекторию. */
.cr-badges { display: flex; gap: 8px; flex: none; margin-left: auto; pointer-events: auto; }
.cr-badge {
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-size: var(--fs-cap); font-weight: 700; color: var(--tx-2);
  border: 1px solid var(--line-2); background: rgba(13, 13, 17, .78);
  backdrop-filter: blur(6px);
}
.cr-badge:hover { color: var(--tx); border-color: var(--or); }

/* Подпись раунда с поля убрана: на неё остаётся тридцать пикселей, а это не
   подпись, а многоточие. Номер раунда, хэш и соль целиком открываются по
   кнопке «Проверить раунд» рядом и на странице «Честность». Элемент оставлен
   в разметке — его наполняет paintFair(), и прятать его надо стилем, а не
   вырезанием узла, иначе проверка сломается на первом же обращении. */
.cr-fair { display: none; }

/* ---- узкие экраны ----

   1240: цифры те же, места меньше — колонки просто худеют.
   1040: одна колонка. Порядок сверху вниз — ставка, игра, чужие ставки,
   инвентарь: ровно тот, в котором игрок ими пользуется. Инвентарь уходит
   последним намеренно — он самый высокий, и над ним не должно стоять ничего
   из того, что нужно в полёте. */

@media (max-width: 1400px) {
  :root { --cr-bet-w: 300px; --gm-rail-w: 268px; }
}

@media (max-width: 1240px) {
  :root { --gm-low-h: 430px; }
}

@media (max-width: 1040px) {
  .cr-grid { grid-template-columns: minmax(0, 1fr); }
  /* Панель не растягиваем на всю ширину: у её содержимого своя мера, и на
     девятистах пикселях поле суммы превращалось в полосу под одно число.
     Центрируем через justify-self, а не margin: auto — авто-поля у элемента
     грида отключают растягивание на узком экране. */
  .cr-betcol {
    align-self: stretch; justify-self: center;
    width: 100%; max-width: 560px;
  }
  .cr-grid.wide { --cr-bet-w: auto; }
  .cr-board { --cr-board-min: clamp(340px, calc(100vh - 320px), 520px); }

  /* Нижняя строка встаёт в одну колонку: чужие ставки идут ПЕРЕД
     инвентарём — они короче и нужны в полёте, а инвентарь длинный и нужен
     между раундами. */
  .gm-low { grid-template-columns: minmax(0, 1fr); }
  .gm-rail { order: 1; height: auto; flex-direction: row; }
  /* Высота задаётся напрямую, а не долей: у рельса тут высота auto, и при
     flex-basis: 0 блоки схлопывались до собственного минимума. */
  .gm-rail > .gm-rail-box {
    flex: 1 1 0; min-width: 0; height: 320px; min-height: 0;
  }
  .gm-inv { order: 2; }
}

@media (max-width: 720px) {
  .gm-rail { flex-direction: column; }
  /* Столбиком flex-basis считается по высоте, поэтому долю здесь отключаем
     совсем: высоту блокам задаёт своё число, а не остаток места. */
  .gm-rail > .gm-rail-box { flex: 0 0 auto; height: 260px; }
  .cr-board { --cr-board-min: 300px; }
  /* Отступ сверху НЕ переопределяем: он равен высоте ленты множителей
     (--cr-hx-h ниже), и своим числом показания заезжали прямо под неё. */
  .cr-readout { padding: 7px 16px 9px; }
  .cr-mult { font-size: 34px; }
  .cr-timer { font-size: var(--fs-ui); padding: 5px 13px; }
  .cr-badge { padding: 6px 10px; font-size: var(--fs-cap); }
  .gm-inv { padding: 11px 11px 8px; height: 420px; }
  /* Лента множителей на телефоне ниже: плашки мельче, и показания раунда
     не должны уезжать в середину кадра. */
  :root { --cr-hx-h: 38px; }
  .cr-history { padding: 7px 10px 4px; }
  .cr-hx { padding: 4px 8px; font-size: var(--fs-micro); }
}

/* ---------------------------------------------------------- панели ставок

   Панели держат свою ширину и стоят по центру. Раньше две панели делили всю
   ширину страницы: на широком мониторе поле «Сумма» растягивалось на треть
   стола, хотя в нём всегда пять символов. */

/* Ставка и игроки стоят рядом: слева одна панель ставки, справа живой
   список раунда. Раньше панели занимали всю ширину, а список висел под ними —
   в полёте приходилось выбирать, куда смотреть. */
.cr-play {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px; align-items: start;
}
.cr-panels { display: grid; gap: 12px; }

.cr-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cr-panel.flying { border-color: rgba(255, 168, 56, .5);
                   box-shadow: 0 0 0 1px rgba(255, 168, 56, .18), var(--shadow); }
.cr-panel.win    { border-color: rgba(53, 208, 127, .55); }
.cr-panel.lose   { border-color: rgba(255, 77, 94, .40); opacity: .82; }

.cr-panel-head { display: flex; align-items: center; justify-content: space-between; }
.cr-panel-n {
  font-size: var(--fs-cap); font-weight: 800; letter-spacing: .04em; color: var(--tx-2);
}
.cr-panel-state {
  font: 800 var(--fs-cap)/1 ui-monospace, Menlo, Consolas, monospace; color: var(--or-2);
}
.cr-panel.win  .cr-panel-state { color: var(--green); }
.cr-panel.lose .cr-panel-state { color: var(--red); }

.cr-fld { display: flex; flex-direction: column; gap: 5px; }
.cr-fld label {
  font-size: var(--fs-cap); font-weight: 700; letter-spacing: .02em; color: var(--tx-2);
  display: flex; align-items: center; gap: 5px;
}
.cr-fld label i {
  width: 15px; height: 15px; border-radius: 50%; font-style: normal;
  font-size: 10px; font-weight: 800; display: grid; place-items: center; cursor: help;
  background: var(--panel-3); color: var(--tx-2);
}
.cr-amount { position: relative; }
.cr-amount input {
  width: 100%; padding: 10px 30px 10px 12px; border-radius: var(--r-s);
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--tx);
  font: 800 16px/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; outline: none;
}
.cr-amount input::placeholder { color: var(--tx-3); font-weight: 600; }
.cr-amount input:focus { border-color: var(--or); }
.cr-amount input:disabled { opacity: .55; }
/* Стрелки числового поля здесь только мешают: шаг в один цент бесполезен. */
.cr-amount input::-webkit-outer-spin-button,
.cr-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cr-amount input[type=number] { -moz-appearance: textfield; }
.cr-cur {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  color: var(--tx-2); font-weight: 800; pointer-events: none;
}

.cr-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cr-quick button {
  padding: 7px 0; border-radius: var(--r-s); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--tx-2);
  font-size: var(--fs-label); font-weight: 700;
}
.cr-quick button:hover { color: var(--tx); border-color: var(--or); }
.cr-panel.busy .cr-quick button { opacity: .4; pointer-events: none; }

.cr-go {
  padding: 14px 12px; border-radius: var(--r-s); cursor: pointer; border: 0;
  font: 800 var(--fs-body)/1.15 inherit; letter-spacing: .02em;
  color: #180a00; background: linear-gradient(180deg, var(--or-2), var(--or-3));
  transition: filter .15s ease, transform .1s ease;
}
.cr-go:hover:not(:disabled) { filter: brightness(1.14); }
.cr-go:active:not(:disabled) { transform: translateY(1px); }
.cr-go:disabled { opacity: .45; cursor: default; }
.cr-go.cancel { background: transparent; border: 1px solid var(--line-2); color: var(--tx-2); }
.cr-go.done   { background: var(--panel-3); color: var(--tx-2); }
/* Забор — самая важная кнопка в игре, поэтому она и цветом, и пульсом
   отличается от всего остального на экране. */
.cr-go.cash {
  background: linear-gradient(180deg, #46e394, #16a862); color: #04240f;
  animation: crCash 1.05s ease-in-out infinite;
}
@keyframes crCash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
  50%      { box-shadow: 0 0 22px 0 rgba(53, 208, 127, .55); }
}

.cr-skin {
  padding: 9px; border-radius: var(--r-s); cursor: pointer;
  background: transparent; border: 1px dashed var(--line-2); color: var(--tx-2);
  font-size: var(--fs-label); font-weight: 700;
}
.cr-skin:hover { color: var(--or-2); border-color: var(--or); }
.cr-panel-note { min-height: 16px; font-size: var(--fs-label); color: var(--tx-2); }

/* ---------------------------------------------------------- список ставок */

.cr-bets-card { padding: 0; overflow: hidden; }
.cr-bets-head {
  display: flex; gap: 18px; flex-wrap: wrap; padding: 13px 16px;
  border-bottom: 1px solid var(--line); font-size: var(--fs-label); color: var(--tx-2);
}
.cr-bets-head b { color: var(--tx); margin-left: 5px; }
.cr-bets-head b.ok { color: var(--green); }
.cr-bets-cols, .cr-bet {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px;
  padding: 9px 16px; align-items: center;
}
.cr-bets-cols {
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tx-2);
  border-bottom: 1px solid var(--line);
}
.cr-bets-cols span:not(:first-child), .cr-bet span:not(:first-child) { text-align: right; }
.cr-bets { max-height: 300px; overflow-y: auto; }
.cr-bet {
  font-size: var(--fs-ui); color: var(--tx-2);
  border-bottom: 1px solid rgba(38, 38, 47, .5);
  animation: crBetIn .25s ease;
}
@keyframes crBetIn { from { opacity: 0; transform: translateX(-8px); } }
.cr-bet.won  { background: rgba(53, 208, 127, .07); color: var(--tx); }
.cr-bet.won .cr-bet-x, .cr-bet.won .cr-bet-pay { color: var(--green); font-weight: 800; }
.cr-bet.lost { opacity: .5; }
.cr-bet.me   { box-shadow: inset 3px 0 0 var(--or); }
.cr-bet-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-bet-who i {
  font-style: normal; font-size: 10px; padding: 2px 5px; border-radius: 4px;
  background: var(--panel-3); color: var(--tx-2); margin-left: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.cr-empty, .cr-bets-foot {
  padding: 18px 16px; text-align: center; font-size: var(--fs-label); color: var(--tx-2);
}
.cr-bets-foot { border-top: 1px solid var(--line); padding: 11px 16px; }

/* ---------------------------------------------------------- окна */

.cr-rules p { font-size: var(--fs-ui); line-height: 1.65; color: var(--tx-2); margin: 0 0 12px; }
.cr-rules-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 9px; margin: 14px 0 16px;
}
.cr-rules-grid div {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 11px; text-align: center;
}
.cr-rules-grid b {
  display: block; font-size: 20px; color: var(--or-2);
  font-variant-numeric: tabular-nums;
}
.cr-rules-grid span { font-size: var(--fs-cap); color: var(--tx-2); }
.cr-warn {
  border-left: 3px solid var(--or); padding-left: 12px; color: var(--tx-2) !important;
}

/* Таблица «на чём заберёшь — столько и вернётся»: считается из живых настроек
   и показывает, где потолок выплаты режет отдачу. */
.cr-rtp-table {
  width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: var(--fs-label);
}
.cr-rtp-table th, .cr-rtp-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right;
  font-variant-numeric: tabular-nums;
}
.cr-rtp-table th { color: var(--tx-2); font-size: var(--fs-cap); font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; }
.cr-rtp-table th:first-child, .cr-rtp-table td:first-child { text-align: left; }
.cr-rtp-table td:first-child { color: var(--tx); font-weight: 800; }
.cr-rtp-table td.cut { color: var(--red); }

.cr-verify h4 { margin: 18px 0 6px; font-size: var(--fs-ui); }
.cr-verify p { font-size: var(--fs-label); color: var(--tx-2); margin: 0 0 8px; }
.cr-vrow {
  display: grid; grid-template-columns: 128px 1fr; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid rgba(38, 38, 47, .6); font-size: var(--fs-label);
}
.cr-vrow span { color: var(--tx-2); }
.cr-vrow code {
  font: var(--fs-cap)/1.45 ui-monospace, Menlo, Consolas, monospace;
  color: var(--tx-2); word-break: break-all;
}
.cr-vrow.ok b  { color: var(--green); }
.cr-vrow.bad b { color: var(--red); }
.cr-code {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 12px; overflow-x: auto; max-height: 300px;
  font: var(--fs-cap)/1.55 ui-monospace, Menlo, Consolas, monospace;
  color: var(--tx-2); white-space: pre;
}

/* ---------------------------------------------------------- выбор скинов

   Колонка уже, чем окно: три квадрата в ряд при ширине окна 900 давали
   карточку размером с ладонь. Ширину держит .cr-skins, а не сама сетка,
   иначе фильтры и страничник разъехались бы с ней по разным краям. */

.cr-skins { max-width: 600px; margin: 0 auto; }
/* Окно подгоняется под колонку: 900 пикселей вокруг 600 выглядят как
   недоделанная вёрстка. */
.modal:has(.cr-skins) { max-width: 660px; }
.cr-skin-tools {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.cr-skin-range {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-label); font-weight: 700; color: var(--tx-2);
}
.cr-skin-range input { width: 84px; }
.cr-skin-sum {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; font-size: var(--fs-ui); color: var(--tx-2);
}
.cr-skin-sum b { color: var(--or-2); font-size: 18px; }
.cr-skin-sum span { font-size: var(--fs-cap); color: var(--tx-2); }

/* Ровно три в ряд и ровный квадрат: сетка на витрине подстраивается под
   ширину, здесь же нужен предсказуемый ряд. */
.cr-skin-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  max-height: 44vh; overflow-y: auto; padding: 2px;
}
.cr-skin-grid .item { aspect-ratio: 1; border-radius: 14px; padding: 9px; }
/* Картинке отдаём всё, что осталось от подписей: у квадрата высота задана
   извне, и фиксированные 92px её распирали. */
.cr-skin-grid .item-art { height: auto; flex: 1; min-height: 0; }
.cr-skin-grid .item-name { font-size: var(--fs-micro); }
.cr-skin-grid .item-skin { font-size: var(--fs-cap); margin-bottom: 3px; }
.cr-skin-grid .item-price { font-size: var(--fs-label); }
.cr-skin-empty {
  grid-column: 1 / -1; padding: 30px; text-align: center;
  color: var(--tx-2); font-size: var(--fs-label);
}

.cr-skin-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 0 4px; min-height: 22px;
}
.cr-skin-pager button {
  width: 34px; height: 34px; border-radius: var(--r-s); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--tx);
  font-size: var(--fs-body); font-weight: 800; line-height: 1;
}
.cr-skin-pager button:hover:not(:disabled) { border-color: var(--or); color: var(--or-2); }
.cr-skin-pager button:disabled { opacity: .35; cursor: default; }
.cr-skin-pager .cr-page-n {
  font: 800 var(--fs-ui)/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--tx); min-width: 84px;
  text-align: center;
}

/* ---------------------------------------------------------- телефон */

@media (max-width: 900px) {
  /* Узкий экран: список игроков уходит под ставку, а не жмётся сбоку.
     Центрируем через justify-self, а не через margin: auto — авто-поля у
     элемента грида отключают растягивание, и панель села бы по ширине
     своего содержимого. */
  .cr-play { grid-template-columns: minmax(0, 1fr); }
  .cr-panels { width: 100%; max-width: 420px; justify-self: center; }
  .cr-board { --cr-board-min: 300px; }
}
@media (max-width: 560px) {
  .cr-board { --cr-board-min: 244px; }
  /* На узком экране блок показаний съедал полполя: ракета приходит в центр,
     и цифра обязана оставить ей место. Верхний отступ при этом остаётся
     равен высоте ленты множителей над ним (--cr-hx-h) — своим числом
     показания заезжали прямо под плашки. */
  .cr-readout { padding: 7px 16px 9px; }
  .cr-mult { font-size: 34px; }
  .cr-timer { font-size: var(--fs-ui); padding: 5px 13px; }
  .cr-badges { right: 8px; bottom: 8px; }
  .cr-badge { padding: 6px 10px; font-size: var(--fs-cap); }
  .cr-fair { display: none; }
  /* Четыре колонки на узком экране превращаются в кашу: сумму игрок и так
     помнит, а важны множитель и выплата. */
  .cr-bets-cols, .cr-bet { grid-template-columns: 1.5fr 1fr 1fr; }
  .cr-bets-cols span:nth-child(2), .cr-bet .cr-bet-sum { display: none; }
  .cr-go { padding: 16px 12px; }
  .cr-skin-grid { gap: 8px; max-height: 40vh; }
  .cr-skin-range input { width: 68px; }
}

/* ============================================================ минное поле

   Игра наследует токены сайта: те же радиусы, тени, шрифты и акцент, что у
   апгрейдера и Ракеты. Локального набора переменных здесь нет намеренно —
   иначе режим выглядел бы встроенным виджетом, а не частью сайта. Ниже
   объявлено только то, чего в общей палитре нет: металл ячейки, зелёный
   «безопасно», красный «взрыв» и цвет светодиода заряда.

   Все анимации идут через transform и opacity. Ни одной анимации width,
   height или box-shadow в цикле: цель — 60 кадров на среднем телефоне. */

:root {
  --mines-cell-idle:  linear-gradient(180deg, #2b2d35, #1c1e24);
  --mines-cell-hover: linear-gradient(180deg, #343640, #23252c);
  --mines-safe:       #35d0a0;
  --mines-danger:     #ff5c34;
  --mines-led:        #ff2f3a;
  --mines-shard:      #ff9a3c;
  /* Шум поверх плитки: четыре процента непрозрачности, чтобы металл не был
     стерильно гладким. Растровой текстуры нет — генерируется фильтром. */
  --mines-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}


.mn-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mn-title { font-size: 22px; }
.mn-sub { color: var(--tx-3); font-size: var(--fs-cap); margin-top: 4px; display: flex; gap: 7px; flex-wrap: wrap; }
.mn-sub i { color: var(--line-2); font-style: normal; }
.mn-top-r { display: flex; gap: 8px; }
.mn-sound { display: flex; align-items: center; gap: 7px; }
.mn-sound input[type=range] { width: 64px; accent-color: var(--or); }
.mn-sound input[type=range]:disabled { opacity: .4; }
#mnSound.off { color: var(--tx-3); }

/* Панель слева, поле справа. На узких экранах панель уезжает ПОД сетку —
   порядком в гриде, без второй копии разметки. */
.mn-layout { display: grid; grid-template-columns: 268px 1fr; gap: 14px; align-items: start; }
.mn-panel { display: flex; flex-direction: column; gap: 12px; padding: 14px; }

.mn-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--panel-3); border-radius: var(--r-s); padding: 4px; }
.mn-tab { background: none; border: 0; color: var(--tx-2); padding: 7px 4px;
  border-radius: 7px; cursor: pointer; font: inherit; font-size: var(--fs-label); }
.mn-tab.on { background: var(--panel); color: var(--tx); box-shadow: var(--shadow); }
.mn-tab:disabled { opacity: .45; cursor: not-allowed; }

/* Баланс над ставкой. Цифра крупная и моноширинная: она меняется на ходу,
   и прыгающая ширина числа читается как дёрганье интерфейса. */
.mn-bal { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 9px 11px; border-radius: var(--r-s);
  background: var(--panel-3); border: 1px solid var(--line); }
.mn-bal-k { font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: .06em;
  color: var(--tx-3); }
.mn-bal-v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--tx); transition: color .2s; }
.mn-bal-v.off { color: var(--tx-3); }
.mn-bal-v.up { animation: mnBalUp .5s ease-out; }
.mn-bal-v.down { animation: mnBalDown .5s ease-out; }
@keyframes mnBalUp {
  0% { color: var(--mines-safe); transform: translateY(-2px); }
  100% { color: var(--tx); transform: none; }
}
@keyframes mnBalDown {
  0% { color: var(--or-2); transform: translateY(2px); }
  100% { color: var(--tx); transform: none; }
}

.mn-fld { display: flex; flex-direction: column; gap: 6px; }
.mn-fld label { font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: .06em; color: var(--tx-3); }
.mn-fld label i { display: inline-grid; place-items: center; width: 14px; height: 14px;
  border: 1px solid var(--line-2); border-radius: 50%; font-size: 9px; font-style: normal;
  color: var(--tx-3); cursor: help; vertical-align: middle; }

.mn-mines { display: grid; grid-template-columns: 1fr 62px; gap: 8px; align-items: center; }
.mn-mines input[type=range] { accent-color: var(--or); width: 100%; }
.mn-mines input[type=number] { width: 100%; background: var(--panel-3); border: 1px solid var(--line);
  color: var(--tx); border-radius: var(--r-s); padding: 8px; font: inherit; text-align: center; }
.mn-mines-quick { display: flex; gap: 5px; flex-wrap: wrap; }
.mn-mines-quick button { flex: 1; min-width: 34px; background: var(--panel-3); border: 1px solid var(--line);
  color: var(--tx-2); border-radius: 7px; padding: 5px 0; cursor: pointer; font: inherit; font-size: var(--fs-cap); }
.mn-mines-quick button.on { border-color: var(--or); color: var(--or-2); }
.mn-mines-quick button:disabled { opacity: .45; cursor: not-allowed; }

.mn-auto-note { font-size: var(--fs-cap); color: var(--tx-3); min-height: 15px; }
.mn-auto-note.bad { color: var(--red); }
.mn-skin-sum { font-size: var(--fs-cap); color: var(--tx-2); }

/* Список вещей в ставке. Панель узкая, поэтому предметы идут строками, а не
   карточками: в 268 пикселях карточка помещается одна, и три скина уже не
   видно целиком. Строка даёт рисунок, имя и цену — всё, что нужно, чтобы
   узнать свою вещь. */
.mn-skin-list { display: flex; flex-direction: column; gap: 5px; max-height: 188px;
  overflow-y: auto; }
.mn-skin-i {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 7px;
  align-items: center; padding: 4px 5px; border-radius: var(--r-s);
  background: var(--panel-3); border: 1px solid var(--line);
  border-left: 2px solid var(--rc, var(--line-2));
}
.mn-skin-a { display: block; height: 26px; }
.mn-skin-a img, .mn-skin-a svg { width: 100%; height: 100%; object-fit: contain; }
.mn-skin-n { font-size: var(--fs-cap); color: var(--tx-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mn-skin-w { color: var(--tx-3); margin-left: 5px; }
.mn-skin-p { font-size: var(--fs-cap); font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-skin-x {
  width: 18px; height: 18px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--panel-2); color: var(--tx-3); font: inherit; line-height: 1;
}
.mn-skin-x:hover { background: var(--red); color: #fff; }
.mn-skin-empty { font-size: var(--fs-cap); color: var(--tx-3); padding: 2px 0; }

/* Окно выбора выигрыша: та же сетка, что у выбора скинов в ставку, плюс
   строка остатка — она здесь главная. */
.mn-claim .cr-skin-tools input[type=search] { flex: 1; min-width: 160px; }
.mn-claim-note { font-size: var(--fs-cap); color: var(--tx-3); margin-top: 8px; text-align: center; }

.mn-go, .mn-cash { border: 0; border-radius: var(--r-s); cursor: pointer; font: inherit;
  font-weight: 800; letter-spacing: .02em; padding: 13px; transition: transform .08s, filter .15s; }
.mn-go { background: linear-gradient(180deg, var(--or-2), var(--or-3)); color: #180a00; font-size: var(--fs-body); }
.mn-go:disabled { background: var(--panel-3); color: var(--tx-3); cursor: not-allowed; }
.mn-go:not(:disabled):active { transform: translateY(1px); }
/* «Дыхание» кнопки: очень слабая пульсация свечения, только когда ставка
   задана и играть действительно можно. */
.mn-go.breathe { animation: mnBreathe 2s ease-in-out infinite; }
@keyframes mnBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 24, 0); }
  50%      { box-shadow: 0 0 18px 2px rgba(255, 122, 24, .35); }
}

.mn-cash { background: linear-gradient(180deg, #3ad9a5, #1f9c72); color: #052018;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mn-cash:disabled { background: var(--panel-3); color: var(--tx-3); cursor: not-allowed; }
.mn-cash-v { font-size: 16px; }
.mn-cash.hot { animation: mnPulse 1.6s ease-in-out infinite; }
@keyframes mnPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
.mn-cash:not(:disabled):active { transform: scale(.985); }

.mn-stats { display: flex; flex-direction: column; gap: 6px; }
.mn-stat { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-label); color: var(--tx-2); }
.mn-stat span:last-child { color: var(--tx); font-weight: 700; }
.mn-mult { color: var(--or-2); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
/* Наведение на поле подсвечивает цену следующего клика: игрок видит её
   до того, как кликнул. */
.mn-stats.hint .mn-stat:nth-child(3) span:last-child { color: var(--or-2); }
.mn-streak { align-self: flex-start; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .08em; color: var(--or-2); border: 1px solid rgba(255, 168, 56, .4);
  border-radius: 20px; padding: 2px 9px; }
.mn-note { font-size: var(--fs-cap); color: var(--tx-3); }

/* ---------------------------------------------------------- поле */

.mn-field { display: flex; flex-direction: column; gap: 10px; }
/* ---------------------------------------------------------- подложка поля

   Поле стоит на нарисованной подложке (assets/mines/mines-2.webp). Раньше она
   держала собственные пропорции и проценты отступов, снятые с картинки под
   сетку 5x5 — то есть подложка ДИКТОВАЛА размер поля. На 5x7 это перестало
   работать: поле стало шире и ниже, а окна на картинке остались
   квадратными.

   Теперь наоборот: размер задаёт сетка (--rows и --cols приходят с сервера),
   а подложка растягивается под неё как фон. Отступ вокруг сетки — обычный
   padding, а не проценты от чужой картинки; ячейки квадратные и с
   одинаковыми зазорами при ЛЮБОМ ROWS x COLS. */
/* Размеры поля живут ЗДЕСЬ, на обёртке, а не на самой сетке.

   Причина простая: подложка обязана быть размером с поле, а значит обёртке
   надо знать ширину поля до того, как сетка разложится. Переменные
   наследуются вниз, поэтому сетка берёт те же числа отсюда; обратно, снизу
   вверх, они бы не поднялись.

   --rows и --cols проставляет mines.js по ответу /api/mines/config — на этот
   же элемент. Значения ниже это лишь то, во что поле рисуется до первого
   ответа сервера.

   Ширину нельзя было отдать fit-content: колонки сетки заданы долями (1fr),
   их минимальная ширина равна нулю, и «по содержимому» схлопывало всё поле
   в стопку нулевых ячеек. Поэтому ширина считается явно — из размера ячейки,
   зазора и числа столбцов. */
.mn-grid-wrap {
  --rows: 5;
  --cols: 7;
  --mn-gap: clamp(4px, .9vw, 10px);
  /* Потолок ячейки. Подобран так, чтобы на 1920x1080 поле по высоте
     дотягивалось до панели ставки и под сеткой не оставалось пустой полосы.
     Выше поднимать нельзя: ячейка начнёт выглядеть плиткой, а поле — макетом. */
  --mn-cell-max: 118px;
  /* Строка под множители шагов — только в лесенке. Раньше это была колонка
     слева от каждой строки; после поворота поля влево-вправо шаг стал
     столбцом, и его цена встала НАД ним. */
  --mn-label: clamp(15px, 1.6vw, 22px);
  --mn-lead: 0px;
  /* Поле рамки вокруг сетки. Узкое намеренно: подложка обязана быть РАЗМЕРОМ
     С ПОЛЕ, а широкая рамка превращает её в самостоятельный блок с полем
     где-то посередине. */
  --mn-pad: clamp(8px, 1vw, 14px);
  /* Предельная ширина самой сетки и, следом, всей подложки. */
  --mn-grid-w: calc(var(--mn-lead) + var(--mn-cell-max) * var(--cols)
                    + var(--mn-gap) * (var(--cols) - 1));
  position: relative;
  /* Подложка — размером с КЛЕТКУ строки, а не с сетку: её края обязаны
     совпадать с краями панели ставки слева и блока «МОИ СТАВКИ» справа. */
  display: flex; flex-direction: column;
  width: 100%; height: 100%; min-width: 0; min-height: 0;
}
/* Сетка своей меры не теряет: ячейка выше --mn-cell-max выглядит плиткой, а
   поле — макетом. Лишнее место уходит в поля по краям, и там видно сцену. */
.mn-grid-wrap > .mn-grid {
  flex: none; margin: auto;
  max-width: var(--mn-grid-w);
}
/* Множитель шага стоит НАД столбцом и в ширину поля не входит — значит и
   --mn-lead в лесенке нулевой. Переменная оставлена: по ней считается ширина
   сетки, и обнулять её приходится явно, а не «само получится». */
.mn-grid-wrap.line { --mn-lead: 0px; }
.mn-grid-wrap.art {
  /* cover при почти совпадающих пропорциях: исходник 1485x1059 (1.40), поле
     на широком экране — 1.40 же. Кадрируется поэтому почти ничего, и якорь
     стоит по центру: сцена показывается целиком, как её и рисовали, а на
     узком экране обрезаются края, а не середина с площадкой.

     Меняешь картинку — сверь её пропорции с пропорциями поля. Разойдутся
     сильно, и cover снова начнёт резать. */
  background: url("../assets/mines/mines-2.webp") center / cover no-repeat;
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow: hidden;
  padding: var(--mn-pad);
}
/* Затемнение поверх картинки. Затемняем СТИЛЕМ, а не самим файлом: так
   исходник остаётся исходником — его можно поменять или пережать, не теряя
   правку, — а силу подобрать под ячейки можно за одну перезагрузку.

   Значения подняты под нынешний исходник: он приходит ярким полуденным
   кадром, без собственной виньетки, и на нём тонули и подсветка активного
   столбца, и белые подписи множителей. Книзу темнее, чем кверху: внизу
   кадра светлый камень площадки, вверху и так тень и небо. */
.mn-grid-wrap.art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 12, .46), rgba(8, 9, 12, .68));
}
.mn-grid-wrap.art .mn-grid,
.mn-grid-wrap.art .mn-grid.line {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
}
/* Внутри подложки ячейка остаётся квадратной: это требование раскладки, а не
   след от разметки картинки. */
.mn-grid-wrap.art .mn-cell { aspect-ratio: 1; width: 100%; height: auto; }
/* Столбец шага на подложке ведёт себя ровно так же, как без неё. Отдельной
   раскладки здесь нет намеренно — две разошлись бы на первой правке. */
.mn-grid-wrap.art .mn-col { position: relative; }
.mn-grid-wrap.art .mn-col-m { white-space: nowrap; }
.mn-grid-wrap.art .mn-col.now {
  background: none;
  box-shadow: none;
}
/* Текущий шаг подсвечивается по самим ячейкам: рамка вокруг столбца
   перекрыла бы окна подложки и разъехалась бы с ними на пиксель. */
.mn-grid-wrap.art .mn-col.now .mn-cell:not(.done) .mn-front {
  box-shadow: inset 0 0 0 1px rgba(255, 122, 24, .5), 0 0 16px rgba(255, 122, 24, .22);
}

/* Плитка на подложке — стекло, а не металл: на картинке ячейки нарисованы
   полупрозрачными окнами, и глухая плита поверх них стёрла бы всю сцену,
   ради которой подложку и ставили. Скругление задано в процентах, чтобы
   совпадать с нарисованным на любой ширине поля. */
.mn-grid-wrap.art .mn-front,
.mn-grid-wrap.art .mn-back {
  border-radius: 11%;
}
.mn-grid-wrap.art .mn-front {
  background: linear-gradient(180deg, rgba(48, 50, 60, .40), rgba(16, 17, 21, .55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13),
              inset 0 1px 0 rgba(255, 255, 255, .10),
              0 6px 14px rgba(0, 0, 0, .35);
  backdrop-filter: blur(1px);
}
.mn-grid-wrap.art .mn-cell:not(.done):hover .mn-front {
  background: linear-gradient(180deg, rgba(255, 122, 24, .18), rgba(24, 16, 10, .55));
  box-shadow: inset 0 0 0 1px rgba(255, 168, 56, .55), 0 0 18px var(--or-soft);
}
.mn-grid-wrap.art .mn-back { background: rgba(14, 16, 20, .82); }
/* Сетка поля.

   Размер — ДВА числа из настроек сервера: --rows и --cols проставляет
   mines.js по /api/mines/config. Значения ниже это лишь то, во что сетка
   рисуется до первого ответа.

   Квадратность ячеек обеспечена не пропорциями контейнера, а самими
   ячейками (aspect-ratio: 1) при равных зазорах по обеим осям: тогда высота
   сетки следует за шириной колонки, и никакой расчёт в JS не нужен.

   Ширина ограничена сверху так, чтобы ячейка не раздувалась на широком
   экране, и не ограничена снизу: на узком колонки просто сжимаются, но их
   по-прежнему --cols, и перенос строк невозможен в принципе — grid с
   фиксированным числом колонок не переносит. */
.mn-grid {
  --heat: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--mn-gap);
  width: 100%;
  padding: 12px;
  border-radius: var(--r);
  background: var(--panel);
  border: 1px solid var(--line);
  /* Свечение контура растёт вместе с серией — визуальный аналог растущей
     ставки. Значение --heat меняет только альфу, не размеры. */
  box-shadow: 0 0 calc(28px * var(--heat)) rgba(255, 122, 24, calc(.45 * var(--heat)));
}
/* ---------------------------------------------------------- подъём по строкам

   В пошаговом режиме сетка перестаёт быть однородным полем: шаги играются
   по очереди, поэтому каждый получает свой СТОЛБЕЦ, свой множитель сверху и
   своё состояние — пройден, текущий, заперт. Шаг 0 рисуется СЛЕВА, и игрок
   идёт по полю в ту же сторону, в какую читает. */
/* Лесенка: шаги идут строкой слева направо (порядок задаёт разметка).
   Столбцы равной ширины — grid, а не flex: при flex последний столбец с
   более длинной подписью множителя оказывался бы шире соседей. */
.mn-grid.line {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--mn-gap);
  align-items: start;
}
.mn-col {
  display: grid;
  grid-template-rows: var(--mn-label) repeat(var(--rows), auto);
  gap: var(--mn-gap);
  justify-items: stretch;
  border-radius: var(--r-s);
  padding: 0;
  transition: opacity .2s, background .2s;
}
.mn-col-m {
  font-size: var(--fs-cap); font-weight: 800; text-align: center; align-self: center;
  color: var(--tx-3); font-variant-numeric: tabular-nums;
}

/* Текущий шаг — единственный, куда можно ходить, и это видно без подписи. */
.mn-col.now { background: rgba(255, 122, 24, .07); box-shadow: inset 0 0 0 1px rgba(255, 122, 24, .28); }
.mn-col.now .mn-col-m { color: var(--or-2); }
/* Запертые шаги приглушены до 45% — то же значение, что у disabled-ячейки
   в классике: одинаковое состояние обязано выглядеть одинаково. */
.mn-col.locked { opacity: .45; }
.mn-col.locked .mn-cell { cursor: not-allowed; }
.mn-col.passed { opacity: .7; }
.mn-col.passed .mn-col-m { color: var(--mines-safe); }

/* Курсор сапёра имеет смысл только там, где можно копать. */
.mn-grid.line .mn-cell { cursor: default; }
.mn-grid.line .mn-col.now .mn-cell:not(.done) { cursor: inherit; }
/* Лесенка не приподнимает ячейки чужих шагов: ложный отклик хуже отсутствия. */
.mn-grid.line .mn-col:not(.now) .mn-cell:not(.done):hover { transform: none; }
.mn-grid.line .mn-col:not(.now) .mn-cell:not(.done):hover .mn-front {
  background: var(--mines-cell-idle); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .07),
    inset -1px -1px 0 rgba(0, 0, 0, .35);
}

@media (max-width: 900px) {
  .mn-col { gap: 6px; }
  .mn-col-m { font-size: var(--fs-micro); }
}

.mn-grid.danger { box-shadow: 0 0 34px rgba(255, 92, 52, .55); border-color: rgba(255, 92, 52, .5); }

.mn-cell {
  position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none;
  perspective: 640px; cursor: inherit;
}
.mn-cell:focus-visible { outline: 2px solid var(--or-2); outline-offset: 3px; border-radius: var(--r-s); }
.mn-inner { position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .26s cubic-bezier(.34, 1.3, .64, 1); }
.mn-cell.open .mn-inner { transform: rotateY(180deg); }
.mn-cell.instant .mn-inner { transition: none; }

.mn-front, .mn-back {
  position: absolute; inset: 0; border-radius: var(--r-s);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center; overflow: hidden;
}
.mn-front {
  background: var(--mines-cell-idle);
  /* Фаска по верхней и левой грани — плитка читается как крышка ящика,
     а не как кнопка формы. */
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .07), inset -1px -1px 0 rgba(0, 0, 0, .35);
}
/* Заряд на закрытой ячейке — растровая картинка (assets/mines/c4.webp) с
   готовой альфой. Отдельным слоем, а не фоном самой плитки: взрыв и
   обугливание крутят фильтры и масштаб именно заряда, а плитка при этом
   обязана остаться на месте. */
.mn-front::before {
  content: ''; position: absolute; inset: 9%;
  background: url("../assets/mines/c4.webp") center / contain no-repeat;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
  transition: transform .16s ease-out, filter .16s ease-out;
  will-change: transform;
}
.mn-front::after {
  content: ''; position: absolute; inset: 0; opacity: .04;
  background-image: var(--mines-noise); background-size: 64px 64px;
  pointer-events: none;
}
.mn-back { transform: rotateY(180deg); background: var(--panel-2); }
.mn-back svg { width: 74%; height: 74%; }

.mn-cell:not(.done):hover .mn-front { background: var(--mines-cell-hover);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 0 0 14px var(--or-soft); }
.mn-cell:not(.done):hover .mn-front::before {
  transform: scale(1.06); filter: drop-shadow(0 4px 10px rgba(255, 122, 24, .45)) brightness(1.12);
}
.mn-cell:not(.done):hover { transform: translateY(-2px); transition: transform .12s ease-out; }
.mn-cell:not(.done):active { transform: translateY(1px); transition: transform .06s; }
.mn-cell.wait .mn-front { opacity: .6; }
.mn-cell.wasfree .mn-front { opacity: .45; }
.mn-cell.fade { opacity: .4; transition: opacity .3s; }

.mn-cell.safe .mn-back { background: rgba(53, 208, 160, .12); box-shadow: inset 0 0 0 1px rgba(53, 208, 160, .45); }
.mn-cell.safe.flare .mn-back { animation: mnFlare .5s ease-out; }
@keyframes mnFlare {
  0%   { box-shadow: inset 0 0 0 1px rgba(53, 208, 160, 1), 0 0 22px rgba(53, 208, 160, .6); }
  100% { box-shadow: inset 0 0 0 1px rgba(53, 208, 160, .45); }
}
/* Мина НЕ переворачивается. Заряд уже лежит на лицевой стороне ячейки, и
   прятать его, чтобы показать с изнанки другой рисунок заряда, бессмысленно:
   переворот читался бы как «здесь была другая вещь». Вместо этого меняется
   состояние самой лицевой стороны — целый заряд, обугленный или подсвеченный
   в конце раунда. */
.mn-cell.mine .mn-front {
  background: rgba(255, 92, 52, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 92, 52, .5);
}
.mn-cell.mine.rest .mn-front {
  background: rgba(255, 92, 52, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 92, 52, .22);
}
.mn-cell.mine.rest .mn-front::before { filter: grayscale(.4) brightness(.62); opacity: .72; }
/* Сработавшая: обугленный корпус на выжженной плитке. */
.mn-cell.mine.blown .mn-front {
  background: radial-gradient(circle at 50% 55%, #3d1c0d, #130906 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 92, 52, .55), inset 0 0 24px rgba(255, 92, 52, .28);
}
.mn-cell.mine.blown .mn-front::before {
  filter: brightness(.3) contrast(1.35) sepia(.45);
  transform: scale(.9) rotate(-3deg);
}

/* Взрыв заряда: вспышка, огненный шар, ударное кольцо и дым. Всё живёт в
   одном узле поверх ячейки и убирается по таймеру — в разметке после
   анимации не остаётся ничего. */
.mn-cell.blast .mn-front::before { animation: mnChargeBlow .44s ease-out forwards; }
.mn-blast { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mn-blast i, .mn-blast b, .mn-blast u {
  position: absolute; left: 50%; top: 50%; width: 26%; height: 26%;
  margin: -13% 0 0 -13%; border-radius: 50%; display: block;
}
.mn-blast i {
  background: radial-gradient(circle, #fff 0%, #ffe6a8 22%, #ff9a3c 46%,
                              rgba(255, 92, 0, .7) 66%, rgba(255, 60, 0, 0) 72%);
  animation: mnBlastBall .5s cubic-bezier(.15, .7, .3, 1) forwards;
}
.mn-blast b {
  border: 2px solid rgba(255, 210, 122, .9); background: none;
  animation: mnBlastRing .55s cubic-bezier(.1, .8, .3, 1) forwards;
}
.mn-blast u {
  background: radial-gradient(circle, rgba(70, 62, 58, .85), rgba(40, 36, 34, 0) 70%);
  animation: mnBlastSmoke .8s ease-out .12s forwards; opacity: 0;
}
@keyframes mnChargeBlow {
  0%   { transform: scale(1);              filter: brightness(1); }
  16%  { transform: scale(1.22);           filter: brightness(6) saturate(.2); }
  52%  { transform: scale(.86) rotate(5deg);  filter: brightness(.55); }
  100% { transform: scale(.9) rotate(-3deg);  filter: brightness(.3) contrast(1.35) sepia(.45); }
}
@keyframes mnBlastBall {
  0%   { transform: scale(.25); opacity: 1; }
  40%  { transform: scale(2.6); opacity: 1; }
  100% { transform: scale(3.6); opacity: 0; }
}
@keyframes mnBlastRing {
  0%   { transform: scale(.3); opacity: .95; }
  100% { transform: scale(4.4); opacity: 0; }
}
@keyframes mnBlastSmoke {
  0%   { transform: scale(.6) translateY(0); opacity: 0; }
  25%  { opacity: .6; }
  100% { transform: scale(3.4) translateY(-16%); opacity: 0; }
}

/* Светодиод заряда: два такта мигания при раскрытии, затем ровное свечение.
   У остальных мин, раскрытых каскадом, класс live не ставится вовсе. */
.mn-led { opacity: .85; }
.mn-led.live { animation: mnLed .833s steps(1) 2; }
@keyframes mnLed { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }

.mn-pop {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  font-size: var(--fs-cap); font-weight: 800; font-style: normal; color: var(--mines-safe);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8); pointer-events: none; z-index: 2;
  animation: mnPop .6s ease-out forwards;
}
@keyframes mnPop {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -24px); }
}

/* Отклик на касание вместо курсора: кольцо от точки нажатия, 200 мс. */
.mn-ripple {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; border: 2px solid var(--or-2); pointer-events: none; z-index: 2;
  animation: mnRipple .2s ease-out forwards;
}
@keyframes mnRipple {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(4.5); opacity: 0; }
}

/* Идёт больше шести секунд без хода — по сетке проходит блик. */
.mn-grid.idle::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: mnShimmer 6s ease-in-out infinite;
}
@keyframes mnShimmer {
  0%   { background-position: 140% 0; opacity: 0; }
  3%   { opacity: 1; }
  20%  { background-position: -40% 0; opacity: 1; }
  21%, 100% { opacity: 0; }
}

.mn-grid.quake { animation: mnQuake .35s cubic-bezier(.36, .07, .19, .97); }
@keyframes mnQuake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-6px, 3px); }
  30% { transform: translate(5px, -4px); }
  45% { transform: translate(-4px, -2px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(-2px, 1px); }
}

/* width/height обязательны: canvas — замещаемый элемент, и для него inset: 0
   растяжку НЕ даёт. Без явных ста процентов канва остаётся в своём
   собственном размере 300x150, вылезает за поле и роняет вёрстку на
   телефоне горизонтальной прокруткой. */
.mn-fx { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; }
.mn-flash { position: absolute; inset: 0; border-radius: var(--r); background: #fff;
  opacity: 0; pointer-events: none; z-index: 4; }
.mn-flash.on { animation: mnFlash .06s ease-out; }
@keyframes mnFlash { 0% { opacity: 0; } 60% { opacity: .85; } 100% { opacity: 0; } }

.mn-ring { position: absolute; width: 140px; height: 140px; margin: -70px 0 0 -70px;
  border-radius: 50%; border: 3px solid var(--mines-danger); pointer-events: none; z-index: 3;
  animation: mnRing .4s ease-out forwards; }
@keyframes mnRing {
  0%   { transform: scale(.25); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ---------------------------------------------------------- поле до ставки

   Затемнение вешается на обёртку, а не на сетку: подложка — часть поля, и
   гасить надо доску целиком. Погашенные плитки на яркой картинке читались бы
   как поломка, а не как «раунд ещё не начат».

   Курсор и наведение снимаются вместе с затемнением: подсветка плитки, по
   которой нельзя ходить, — обещание хода, которого не будет. */
.mn-grid-wrap.off::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: rgba(6, 7, 10, .66); border-radius: var(--r);
}
.mn-grid-wrap.off .mn-cell { pointer-events: none; }
.mn-grid-wrap.off .mn-grid { cursor: default; }

.mn-idle {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center; padding: 0 16px;
}
/* Авторский display перебивает браузерное [hidden] { display: none } — без
   этой строки подсказка осталась бы висеть поверх поля весь раунд. Ровно на
   этом уже спотыкалась панель результата. */
.mn-idle[hidden] { display: none; }
.mn-idle-t {
  font-size: var(--fs-label); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--tx-2);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.mn-idle-s { font-size: var(--fs-label); color: var(--tx-3);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }

.mn-result {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; border-radius: var(--r);
  background: rgba(8, 8, 10, .82); backdrop-filter: blur(3px);
  animation: mnResult .3s ease-out;
}
@keyframes mnResult { from { opacity: 0; } to { opacity: 1; } }
.mn-result-t { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: var(--tx-3); }
.mn-result-v { font-size: 34px; font-weight: 900; }
.mn-result.win .mn-result-v { color: var(--mines-safe); }
.mn-result.lose .mn-result-v { color: var(--red); }
.mn-result-s { font-size: var(--fs-label); color: var(--tx-2); margin-bottom: 6px; }
/* «Ожидает получения»: выигрыш уже на балансе, но выбор вещи ещё открыт.
   Строка нужна затем, чтобы закрытое окно не выглядело потерей выигрыша. */
.mn-await {
  font-size: var(--fs-cap); color: var(--or-2); margin-bottom: 8px;
  padding: 7px 11px; border-radius: var(--r-s);
  background: var(--or-soft); border: 1px solid rgba(255, 122, 24, .32);
}

.mn-live {
  flex: none; position: relative; z-index: 2;
  min-height: 16px; margin-top: var(--mn-pad);
  font-size: var(--fs-cap); color: var(--tx-3); text-align: center;
}

/* ---------------------------------------------------------- низ страницы */

/* ---- честная игра ----

   Стоит под обеими строками и во всю ширину не растягивается: это форма из
   двух полей, а не блок данных, и на 1400 пикселях её поля разъезжались бы
   через весь экран. */

.mn-bottom { display: grid; grid-template-columns: minmax(0, 640px); gap: 14px; }
.mn-fair { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.mn-fair-head { font-weight: 800; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: .06em; color: var(--tx-3); }
.mn-fair-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-cap); }
.mn-fair-row code { color: var(--tx-2); font-size: var(--fs-micro); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 55%; }
.mn-fair-row input { background: var(--panel-3); border: 1px solid var(--line); color: var(--tx);
  border-radius: 7px; padding: 5px 8px; font: inherit; font-size: var(--fs-cap); max-width: 55%; }
.mn-fair-btns { display: flex; gap: 8px; }
.mn-fair-note { font-size: var(--fs-cap); color: var(--tx-3); line-height: 1.45; }

/* ---- «МОИ СТАВКИ» в рельсе ----

   Тот же короб, что у «Краша» под ставки раунда, только список свой:
   прошлые партии этого игрока. Прокручивается внутри себя — страница от
   сорока раундов вниз не растёт. */

.mn-mine-tally {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 0 14px 10px; font-size: var(--fs-cap); color: var(--tx-3);
}
.mn-mine-tally:empty { display: none; }
.mn-mine-n b { color: var(--tx); font-weight: 800; font-size: var(--fs-label); }
/* Итог по показанным раундам. Плюс зелёный, минус красный — иначе знак
   приходится вычитывать, а он тут главное. */
.mn-mine-net { font-weight: 800; font-size: var(--fs-label); }
.mn-mine-net.up   { color: var(--mines-safe); }
.mn-mine-net.down { color: var(--red); }

.mn-mine-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 0 14px 12px;
}
.mn-mine-list::-webkit-scrollbar { width: 6px; }
.mn-mine-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }

.mn-hx { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px;
  align-items: center; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 7px 10px; cursor: pointer; font: inherit;
  text-align: left; color: var(--tx-2); }
.mn-hx:hover { border-color: var(--line-2); }
.mn-hx-m { font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--fs-label); }
.mn-hx.win .mn-hx-m { color: var(--mines-safe); }
.mn-hx.lose .mn-hx-m { color: var(--red); }
.mn-hx-b { font-size: var(--fs-micro); color: var(--tx-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mn-hx-p { font-size: var(--fs-cap); font-variant-numeric: tabular-nums; }
.mn-hx-empty { padding: 20px 2px; text-align: center; font-size: var(--fs-cap); color: var(--tx-3); }

/* ---- полоса исходов поверх поля ----

   Тот же приём, что у ленты множителей «Краша»: своей подложки нет, под
   плашками видно сцену поля. Здесь она не абсолютная, а первой строкой
   внутри подложки — сетка занимает поле целиком, и наложенная полоса
   закрыла бы верхний ряд ячеек. Фон при этом общий с полем, отдельным
   блоком полоса не выглядит. */

.mn-hxbar {
  display: flex; gap: 5px; flex: none; margin-bottom: var(--mn-pad);
  overflow-x: auto; scrollbar-width: none; position: relative; z-index: 2;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%);
}
.mn-hxbar::-webkit-scrollbar { display: none; }
/* Пустая полоса не должна оставлять под собой пустое поле. */
.mn-hxbar:empty { display: none; }
.mn-hxc {
  flex: none; padding: 4px 9px; border-radius: 999px; cursor: pointer;
  font: 800 var(--fs-cap)/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  background: rgba(10, 10, 14, .62); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .10); color: var(--tx-2);
  transition: transform .12s ease, filter .12s ease;
}
.mn-hxc:hover { transform: translateY(-2px); filter: brightness(1.25); }
.mn-hxc.win  { color: var(--mines-safe); border-color: rgba(53, 208, 127, .38); }
.mn-hxc.lose { color: #ff8f9a; border-color: rgba(255, 77, 94, .38); }
.mn-hxc:first-child { animation: crHxIn .35s ease; }

.mn-rules { line-height: 1.6; font-size: var(--fs-ui); max-height: 70vh; overflow-y: auto; }
.mn-rules h4 { margin: 14px 0 4px; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: .06em; color: var(--or-2); }
.mn-rules p { margin: 0 0 8px; color: var(--tx-2); }
.mn-rules code { background: var(--panel-3); border-radius: 4px; padding: 1px 5px; font-size: var(--fs-cap); }
.mn-vrow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-cap); }
.mn-vrow code { overflow-wrap: anywhere; text-align: right; max-width: 62%; }
.mn-vres { margin-top: 10px; padding: 8px 10px; border-radius: var(--r-s); font-size: var(--fs-label); }
.mn-vres.ok { background: rgba(53, 208, 127, .12); color: #7ee7b4; }
.mn-vres.bad { background: rgba(255, 77, 94, .12); color: #ff9aa4; }
.mn-vnote { margin-top: 10px; font-size: var(--fs-cap); color: var(--tx-3); }
.mn-code { background: #0a0a0d; border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 12px; font-size: var(--fs-cap); line-height: 1.5; overflow-x: auto; white-space: pre; }

/* Бейдж NEW и точка незавершённого раунда в боковом меню. */
.nav-new { margin-left: auto; font-size: 9px; font-weight: 900; letter-spacing: .08em;
  color: #180a00; background: linear-gradient(180deg, var(--or-2), var(--or-3));
  border-radius: 4px; padding: 1px 4px; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--or);
  margin-left: 6px; box-shadow: 0 0 8px var(--or-glow); animation: mnDot 1.8s ease-in-out infinite; }
@keyframes mnDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Счётчик очереди выплат. Единственная цифра админки, которую видно, не
   заходя внутрь: пока заявка ждёт человека, деньги у игрока уже списаны, а
   он не получил ничего. Не мигает — мигание тут означало бы «срочно», а
   заявке положено ждать выдержку, и торопить оператора нечем. */
.nav-count { margin-left: auto; min-width: 18px; text-align: center;
  font-size: 10px; font-weight: 800; color: #180a00; background: var(--or);
  border-radius: 9px; padding: 1px 5px; }

/* ---------------------------------------------------------- адаптив */

@media (max-width: 900px) {
  /* Панель управления уходит ПОД сетку: на телефоне поле должно быть первым,
     иначе до него надо прокручивать полэкрана. */
  .mn-layout { grid-template-columns: 1fr; }
  .mn-field { order: 1; }
  .mn-panel { order: 2; }
  .mn-bottom { grid-template-columns: 1fr; }
  .mn-grid { gap: 7px; padding: 8px; }
  .mn-result-v { font-size: 28px; }
}

/* ---------------------------------------------------------- доступность

   prefers-reduced-motion: тряска, частицы, шиммер и пульсации выключаются
   целиком, переворот сокращается до 120 мс. Игра остаётся полностью
   функциональной: ни одна анимация не несёт информации, которой нет в
   тексте панели. */
@media (prefers-reduced-motion: reduce) {
  .mn-inner { transition-duration: .12s; }
  .mn-grid.idle::after,
  .mn-go.breathe, .mn-cash.hot, .mn-led.live, .mn-pop, .mn-ring, .mn-flash.on,
  .mn-grid.quake, .nav-dot, .mn-ripple { animation: none; }
  .mn-cell:not(.done):hover { transform: none; }
  .mn-result { animation: none; }
}

/* ============================================================ витрины кейсов

   Полторы сотни ящиков одной кучей не показать: наши сборки, all-in,
   настоящие кейсы CS2 и коллекции карт живут на отдельных вкладках.
   Вкладка крупная и с подписью — это выбор раздела, а не переключатель
   сортировки, и путать их нельзя. */

/* Тот же потолок и та же середина, что у баннера, фильтра и сетки кейсов:
   без них полоса вкладок расходилась на всю ширину контента и на широком
   мониторе торчала за края всего остального на полторы сотни пикселей с
   каждой стороны. */
/* Разделы витрины — капсулы в строке фильтров, той же высоты и формы, что
   сортировка. Прежняя полоса из четырёх плит с описаниями занимала 83
   пикселя и в макете отсутствует вовсе; описание уехало в подсказку. */
.shelf-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.shelf-tabs button {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 16px; border-radius: var(--r-s); cursor: pointer;
  background: rgba(5, 6, 8, .55); border: 1px solid var(--line);
  color: var(--tx-2); font: inherit;
  transition: border-color var(--t-micro), background var(--t-micro), color var(--t-micro);
}
.shelf-tabs button b { font-size: var(--fs-label); font-weight: 700; color: inherit; }
.shelf-tabs button small { display: none; }
.shelf-tabs button:hover { color: var(--tx); border-color: var(--line-2); }
.shelf-tabs button.on {
  background: rgba(252, 108, 5, .07);
  border-color: color-mix(in srgb, var(--or-deep) 70%, transparent);
  color: var(--or-deep);
}
/* Счётчик стоит В СТРОКЕ, а не абсолютом: в прежней плите он висел в углу
   и место под него было, в капсуле же он ложился прямо на название. */
.shelf-tabs button .st-n {
  position: static;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: var(--tx-3);
  font: 700 var(--fs-micro)/1.5 inherit; font-variant-numeric: tabular-nums;
}
.shelf-tabs button.on .st-n {
  background: rgba(252, 108, 5, .16); color: var(--or-deep);
}
.shelf-tabs button:hover:not(:disabled) { border-color: var(--line-2); transform: translateY(-1px); }

/* Активная вкладка подсвечена оранжевым и держит полосу у нижнего края. */
.shelf-tabs button.on {
  border-color: color-mix(in oklab, var(--or) 55%, var(--line));
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--or) 12%, var(--bg-2)), var(--bg-2));
}
.shelf-tabs button.on b { color: var(--or); }
.shelf-tabs button.on .st-n {
  background: color-mix(in oklab, var(--or) 22%, transparent); color: var(--or);
}
.shelf-tabs button.on::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}

/* ------------------------------------------- сообщение о том, чего пока нет

   Не тревога и не ошибка: это рассказ о том, что раздел ещё строится.
   Поэтому оранжевый только полосой слева, без заливки во весь блок — иначе
   он читается предупреждением о неполадке и пугает на ровном месте. */

.notice {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 16px; padding: 14px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--or);
  border-radius: var(--r);
  background: linear-gradient(100deg, var(--or-soft), transparent 42%), var(--panel);
}
.notice-ic {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: var(--fs-body);
  color: var(--or-2); background: var(--or-soft);
}
.notice b { display: block; font-size: var(--fs-ui); margin-bottom: 3px; }
.notice p {
  margin: 0; font-size: var(--fs-label); line-height: 1.55; color: var(--tx-2);
  max-width: 68ch;
}

/* ------------------------------------------- вывод в крипте

   Две колонки: слева сама заявка, справа адреса. Разделены намеренно —
   добавить кошелёк и вывести деньги это разные действия, и склеенные в одну
   форму они путают: игрок жмёт «Вывести», ожидая, что адрес заодно
   сохранится. */

/* Замочек «Игры под контролем» в шапке кабинета: рядом с выходом, тем же
   размером, но без заливки — это не действие, а вход в раздел. */
.me-lock {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  color: var(--tx-2); font-size: var(--fs-ui); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.me-lock:hover { border-color: var(--or); color: var(--or-2); }
.me-dep { display: flex; gap: 10px; flex-wrap: wrap; }

/* Заголовок внутри модалки: тот же вес, что у карточек кабинета. */
.modal-h { margin: 0 0 14px; font-size: 18px; }
/* Способы получения денег: список карточек, а не выпадашка. Недоступные
   видно сразу и не надо открывать список, чтобы выяснить, что там пусто. */
.pay-ways { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pay-way {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px;
  align-items: center; padding: 11px 14px; border-radius: var(--r-s);
  background: var(--bg-2); border: 1px solid var(--line); cursor: pointer;
}
.pay-way b { font-size: var(--fs-ui); }
.pay-way small { grid-column: 2; font-size: var(--fs-cap); color: var(--tx-3); }
.pay-way.on { border-color: var(--or); background: var(--or-soft); }
.pay-way.off { opacity: .45; cursor: not-allowed; }
.pay-add { align-self: flex-start; margin: 8px 0 4px; }

/* В окне нет колоночного контейнера, как на странице вывода, поэтому подпись
   и поле раскладываются вручную: <label> по умолчанию строчный и без этого
   становится в одну строку с полем. */
.modal .co-l { display: block; margin: 12px 0 5px; }
.modal .co-l:first-of-type { margin-top: 0; }
.modal select, .modal input[type=text], .modal input[type=search],
.modal input:not([type]) { width: 100%; }
.modal .pay-way input { width: auto; }

.co-m-sum { margin: 0 0 14px; font-size: var(--fs-ui); color: var(--tx-2); }
.co-m-sum b { color: var(--or-2); font-size: 18px; }
.co-m-note { min-height: 18px; margin: 10px 0 4px; font-size: var(--fs-label); }

/* История и обмены — одной строкой. Оба журнала открываются по требованию,
   и порознь каждый занимал полосу во всю ширину ради одной кнопки. */
/* ------------------------------------------- операторские страницы

   Плотнее игровых экранов и без украшений: сюда приходят работать, а не
   смотреть. Одна карта во всю ширину, таблица, действия в строке. */

/* Оператору не показываем игровое: заданий он не выполняет, играть не может. */
body.op .quests { display: none; }

/* А игроку — операторское. Курс валюты двигает цену на витрине сразу всем,
   поэтому карточка видна только там, где есть операторское меню. Это не
   защита, а уборка: правку всё равно отбивает сервер (money.OPERATOR_KEYS),
   и спрятанная вёрстка на это не влияет. */
.card-rate { display: none; }
body.op .card-rate { display: block; }

.adm {
  max-width: var(--page-max); margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px;
}
.adm-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.adm-h h2 { margin: 0; font-size: 20px; }
.adm .help { margin: 0 0 14px; }
.adm .tbl td { vertical-align: middle; }
.adm-act { display: flex; gap: 6px; justify-content: flex-end; }
/* Выплаты → «Скины» и «Отправить вручную». */
.pqs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.pqs-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-left: 3px solid rgba(255,255,255,.18); }
.pqs-tile span { font-size: var(--fs-cap); color: var(--tx-3); letter-spacing: .04em; }
.pqs-tile b { font-size: 20px; font-variant-numeric: tabular-nums; }
.pqs-tile small { color: var(--tx-3); font-size: var(--fs-cap); line-height: 1.35; }
.pqs-tile.ok { border-left-color: var(--green); }
.pqs-tile.warn { border-left-color: #ffcf6e; }
.adm .help.bad, .pqs .bad { color: var(--red); }
.pqs-tile.bad { border-left-color: var(--red); }
/* Выплаты → «Касса»: ручные остатки и выгрузки. */
.adm h3 { margin: 18px 0 6px; font-size: 16px; }
.cash-ms { display: grid; gap: 6px; max-width: 620px; margin-bottom: 8px; }
.cash-m { display: grid; grid-template-columns: 1fr 140px; gap: 6px; }
.cash-m input { min-width: 0; width: 100%; box-sizing: border-box; }
.cash-x { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 520px) { .cash-m { grid-template-columns: 1fr 100px; } }
.pqm-addr { word-break: break-all; max-width: 360px; }
.pqm-addr .btn { margin-left: 6px; }
#pqGate.warn { color: var(--red); }
/* Строка, от которой зависит цена кейса, помечена: с неё и начинают. */
.tbl tr.hot td { background: rgba(255, 122, 24, .06); }
.tag.red { color: var(--red); border-color: rgba(255, 77, 94, .4); }

.me-logs { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.me-logs > .card { flex: 1 1 320px; min-width: 0; }

.cashout { margin-top: 26px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; }
@media (max-width: 900px) { .co-grid { grid-template-columns: 1fr; } }
.co-form, .co-add { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.co-l {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 700;
}
.co-note { font-size: var(--fs-cap); min-height: 16px; }
.co-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.co-w {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-s);
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: var(--fs-label);
}
.co-w code { color: var(--tx-2); font-size: var(--fs-cap); overflow-wrap: anywhere; }
.co-x {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 6px;
  background: none; border: 1px solid var(--line-2); color: var(--tx-3); cursor: pointer;
}
.co-x:hover { border-color: var(--red); color: var(--red); }

.co-hist { margin-top: 18px; }
.co-hist-h {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 700; margin-bottom: 8px;
}
.co-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-label);
}
.co-when { color: var(--tx-3); font-size: var(--fs-cap); }
.co-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-sum { font-weight: 800; }
.co-st { font-size: var(--fs-micro); padding: 3px 9px; border-radius: 99px; background: var(--panel-2); }
.co-st.ok   { color: var(--green); }
.co-st.bad  { color: var(--red); }
.co-st.back { color: var(--tx-2); }
.co-st.wait { color: var(--or-2); }
/* Причина задержки переносится на свою строку во всю ширину: в колонку
   статуса она не влезает, а обрезать её нельзя — она и есть объяснение. */
.co-why {
  grid-column: 1 / -1; font-size: var(--fs-cap); color: var(--tx-3);
  margin-top: -2px;
}

/* ------------------------------------------- инвентарь внутри кабинета

   Отдельной вкладки у инвентаря больше нет. Внутри кабинета ему нужен
   собственный заголовок и воздух сверху, иначе он читается продолжением
   плиток с почтой и промокодом. */

.me-inv { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.me-inv-h {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.me-inv-h h2 { margin: 0; font-size: 20px; }


/* Подпись на карточке кейса: чем он отличается от соседа. У трёх верхних
   наших сборок разница в характере, а не в цене, и без строчки её не
   видно; настоящим ящикам CS2 подпись говорит, что состав настоящий. */
.case-note {
  margin: 2px 10px 0; min-height: 26px;
  font-size: var(--fs-micro); line-height: 1.3; color: var(--tx-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------- апгрейд: пять карточек в ряд

   Обе сетки апгрейдера — свои скины слева и цели справа — стояли на шаге
   auto-fill, то есть на широком мониторе набивали в ряд шесть и семь
   карточек, а на среднем растягивали четыре до неприличной ширины.

   Минимальный трек здесь равен пятой части свободной ширины, поэтому шестая
   колонка не влезает никогда: ряд упирается в пять. Запас в 112 пикселей
   держит нижнюю границу — на узком экране сетка честно сходит до четырёх и
   трёх вместо того, чтобы плющить карточки.

   Страница продажи остаётся на общем шаге .grid.sm: там пролистывают склад,
   а не выбирают одну вещь. */

#myItems, #targetGrid {
  grid-template-columns: repeat(auto-fill, minmax(max(112px, (100% - 32px) / 5), 1fr));
  gap: 8px;
}
#myItems .item-art, #targetGrid .item-art { height: 84px; }
#myItems .item-name, #targetGrid .item-name { font-size: var(--fs-micro); }
#myItems .item-skin, #targetGrid .item-skin { font-size: var(--fs-label); }
#myItems .item-price, #targetGrid .item-price { font-size: var(--fs-label); }

/* Одинокий предмет в слоте разворачивается во весь блок: когда апаешь одну
   вещь на одну, мельчить незачем — рядом ничего нет. Как только предметов
   становится двое, оба возвращаются к общему размеру.

   Рамки и подложки у него нет: одинокая карточка внутри слота выглядела
   коробкой в коробке. Вместо них — густой градиент редкости во весь слот,
   так предмет читается вписанным, а не вложенным. */
/* Единственная вещь в слоте — не карточка, а содержимое самого слота:
   ни рамки, ни подложки, ни полоски класса. Кольцо давал не border, а
   box-shadow «0 0 0 1px», и снаружи оно читалось точно такой же рамкой —
   его тоже снимаем. Цвет редкости несёт сам слот, см. .slot.one. */
.slot-body > :only-child {
  /* Высота задана явно: без неё карточка сжималась по содержимому, и арту,
     который берёт остаток, доставалось четыре пикселя. */
  flex: 1 1 100%; align-self: stretch; height: 100%;
  background: none; border: 0; border-radius: 0; padding: 0;
  box-shadow: none; transform: none; overflow: visible;
  display: flex; flex-direction: column;
}
.slot-body > :only-child::before,
.slot-body > :only-child::after { display: none; }
.slot-body > :only-child:hover { transform: none; box-shadow: none; }

/* Скин занимает всё, что осталось от подписей, но не выше 70% слота.
   Просто height: 70cqh не годился: cqh считается от слота, а тело левого
   слота ниже на строку доклада с баланса — карточка вылезала за край, и
   название со износом срезались. */
/* Арт заполняет слот, а не висит в его середине.

   Три вещи разом. Потолок поднят с 70 до 88 процентов высоты слота. Ширина
   выведена за края тела на десять процентов в каждую сторону: ствол —
   объект широкий, и при contain его размер упирался в ширину, а не в
   высоту, отчего сверху и снизу оставался воздух. И включён scale — он
   растягивает уже отрисованную картинку, поэтому работает и там, где у
   самого рендера есть свои поля. */
.slot-body > :only-child .item-art {
  flex: 1 1 0; min-height: 0; max-height: 88cqh; margin: 0 -5% 4px;
  width: 110%;
}
.slot-body > :only-child .item-art .skin-svg,
.slot-body > :only-child .item-art img {
  width: 100%; height: 100%; object-fit: contain;
  scale: 1.12;
}
.slot-body > :only-child .item-name { font-size: var(--fs-label); }
.slot-body > :only-child .item-skin { font-size: 19px; line-height: 1.15; }
.slot-body > :only-child .item-foot { justify-content: flex-start; }
/* Цена уже написана на плашке под слотом — на карточке она дублировалась. */
.slot-body > :only-child .item-price { display: none; }
/* И крестик тоже: у слота есть свой, а когда вещь одна, оба делают одно и
   то же и стоят рядом в углу. */
.slot-body > :only-child .item-p { display: none; }

/* Подписи уходят в свой нижний угол: ставка — в левый, цель — в правый,
   так же, как разведены плашки «Ставка» и «Цель». */
.notch-r .slot-body > :only-child { text-align: right; }
/* Арт цели держит тот же размер, что и арт источника.

   Считалось это от высоты СЛОТА (88cqh), а тела у слотов разные: в левом
   под артом ещё строка доклада с баланса, в правом её нет. На снимке MAG-7
   выходил в полтора раза мельче перчаток, подписи разъезжались по высоте на
   девяносто пикселей, и источник читался дешевле цели — из-за вёрстки, а не
   из-за цены. Потолок правого слота выставлен по фактической высоте левого;
   освободившееся место забирают подписи, уходя вниз, к своей плашке — как в
   макете. */
.notch-r .slot-body > :only-child .item-art { max-height: 54cqh; }
.notch-r .slot-body > :only-child .item-name { margin-top: auto; }
.notch-r .slot-body > :only-child .item-foot { justify-content: flex-end; }

/* ------------------------------------------- полоса шанса и быстрых кнопок

   Шанс, множитель и пресеты относятся к сделке целиком, а не к инвентарю,
   поэтому стоят отдельной полосой над обеими колонками и во всю их ширину.
   Внутри всё горизонтально: слева цифры сделки, справа кнопки. */

/* Центральная полоса шанса и множителя — по референсу.

   Главное отличие от прежней: полоса ОБЖИМАЕТ содержимое, а не растянута
   во всю ширину страницы. Растянутая, она читалась пустой панелью с горсткой
   кнопок посередине; обжатая — прибором.

   По краям свет, будто полоса подсвечена снаружи: в макете он есть с обеих
   сторон и как раз он делает её частью сцены, а не наклейкой. */
/* Полоса шанса и множителя — ДВЕ отдельные капсулы с зазором, а не одна с
   чертой посередине: в макете это два прибора, стоящих рядом. Сам .ctl-wide
   стал прозрачной обёрткой, вся отделка ушла на группы.

   Оболочки полупрозрачные: сквозь них видно космос, и полоса читается
   стеклом на сцене, а не наклейкой поверх неё. */
.ctl-wide {
  width: fit-content; max-width: var(--page-max);
  margin: 0 auto 14px; padding: 0;
  background: none; border: 0; box-shadow: none;
}
.preset-grp {
  position: relative; overflow: hidden;
  display: flex; gap: 10px; align-items: center;
  padding: 9px 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(11, 14, 20, .55);
  backdrop-filter: blur(8px);
  box-shadow: var(--edge);
}
/* Свет по внешним краям — как в макете: слева у левой группы, справа у
   правой. Внутренние края чистые, иначе зазор между ними засветится. */
.preset-grp::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px;
  pointer-events: none;
}
.preset-grp:first-child::before {
  left: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(252, 108, 5, .26), transparent 74%);
}
.preset-grp:last-child::before {
  right: 0;
  background: radial-gradient(ellipse at 100% 50%, rgba(252, 108, 5, .26), transparent 74%);
}
@media (max-width: 900px) { .ctl-wide { width: auto; } }

/* Цифры шанса и множителя из полосы убраны: они и так стоят на кольце и в
   разборе сделки внизу, а здесь занимали треть строки. Осталась одна
   ровная лента кнопок по центру. */
.ctl-wide .preset-row { justify-content: center; gap: 9px; row-gap: 8px; }
.ctl-wide .preset { padding: 9px 22px; }
.ctl-wide .preset .p-ch { font-size: 16px; }
.ctl-wide .preset .p-mu { font-size: var(--fs-micro); }

/* Подпись группы: объясняет, почему кнопок два ряда, и не спорит с ними
   за внимание. */
.preset-tag {
  align-self: center; margin-right: 2px;
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3);
}

/* Кнопка слегка приподнимается и наливается цветом под курсором, а выбранная
   держит мягкое свечение — полоса из одних кнопок не должна быть плоской. */
.ctl-wide .preset { transition: background .16s, border-color .16s, transform .12s, box-shadow .16s; }
.ctl-wide .preset:hover {
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--or) 10%, var(--bg-2));
}
.ctl-wide .preset.on { box-shadow: 0 6px 20px rgba(255, 92, 0, .34); }

@media (max-width: 620px) {
  /* Подписи групп остаются: без них два ряда кнопок читаются одним списком
     из пяти, и «50%» встаёт в один смысловой ряд с «×5». Места они просят
     немного — сокращаем кегль, а не выбрасываем. */
  .preset-tag { font-size: 9px; letter-spacing: .1em; margin-right: 0; }
  .ctl-wide .preset { padding: 8px 14px; }
  .ctl-wide .preset-row { gap: 7px; }
}

/* Фильтры инвентаря переехали под заголовок своей колонки.

   Отступы сжаты: на снимке шапка занимала 120 пикселей из 620 — впятеро
   больше, чем нужно трём строкам, — тогда как в макете на неё уходит 56 из
   455. Место отдано сетке, ради которой блок и существует. */
.upg-columns .ctl-filters { margin: 0 0 9px; }
.upg-columns .card > .row { margin-bottom: 8px !important; }
.upg-columns .blk-h { gap: 1px; }

/* Шапка блока на узком экране. В одну строку заголовок, поиск и тумблер не
   встают: поиск отжимал тумблер на второй ряд, и тот оказывался под
   заголовком, будто относится к нему. Разводим осознанно: заголовок своей
   строкой, под ним поиск с тумблером в одну. */
@media (max-width: 620px) {
  .upg-columns .card > .row { flex-wrap: wrap; }
  .upg-columns .blk-h { flex: 1 0 100%; }
  .upg-columns .card > .row > .grow { display: none; }
  .upg-columns .fld-search { flex: 1 1 auto; min-width: 0; }
}

/* Заголовок блока. В макете он белый и крупнее общего: замер по «YOUR
   LOADOUT» даёт #dae2ee, у нас стоял --tx-3 (#5f6571) — вдвое темнее
   собственной подписи под ним, из-за чего шапка читалась снизу вверх.
   Трекинг и регистр оставляем: они у макета такие же. */
.upg-columns .card h3 {
  font-size: var(--fs-label); color: var(--tx); letter-spacing: .15em;
}
.upg-columns .blk-h .dim { font-size: var(--fs-cap); }

/* ------------------------------------------- стекло нижних блоков

   Шапки обеих колонок — поиск, сортировки, тумблер, кнопки — стояли на том
   же плотном стекле, что и весь остальной сайт: тёмная заливка почти без
   прозрачности, нижняя тёмная кромка «от толщины» и падающая тень. На фоне
   космоса это читается как накладка из другой эпохи, вырезанная и
   положенная поверх сцены.

   Здесь материал тоньше: собственной заливки нет вовсе, остаётся световой
   градиент по верхней кромке и сильное размытие подложки. Сквозь кнопку
   видно звёзды — она лежит НА сцене, а не закрывает её.

   Правило берёт .mini, а не select: у списков фон уже и так задаётся этим
   классом (он специфичнее правила с фоновой стрелкой), так что стрелку
   тут стереть нечем. */

.upg-columns .btn,
.upg-columns .mini,
.upg-columns .fld-search,
.upg-columns .switch.glassy {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .075) 0%,
    rgba(255, 255, 255, .018) 100%);
  border-color: rgba(255, 255, 255, .11);
  /* Только верхний блик. Нижняя тёмная кромка и тень под элементом — ровно
     то, что делало кнопку толстой и пластмассовой. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  backdrop-filter: blur(14px) saturate(1.2);
}
.upg-columns .btn:hover,
.upg-columns .mini:hover,
.upg-columns .switch.glassy:hover,
.upg-columns .fld-search:focus-within {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .14) 0%,
    rgba(255, 255, 255, .045) 100%);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.upg-columns .fld-search:focus-within { border-color: rgba(255, 122, 0, .42); }

/* Фон самих блоков. Плита оставалась почти непрозрачной (.80 по низу), и
   космос под ней пропадал — две тёмные коробки на светящейся сцене. Теперь
   заливка вдвое легче, а подложка размыта: звёзды остаются видны, но текст
   и карточки стоят не на ряби, а на ровном стекле. */
.upg-columns > .card.eg-plate {
  background-image:
    /* Пол блока подсвечен сильнее подложки: при трёх карточках под ними
       остаётся половина блока, и на снимке это читалось дырой. Свет у
       нижней кромки превращает её в площадку — ровно то, чем занято то же
       место в макете. */
    radial-gradient(130% 62% at 50% 108%,
      color-mix(in oklab, var(--plate-c, var(--or)) 34%, transparent) 0%, transparent 66%),
    radial-gradient(100% 70% at 50% 0%, rgba(30, 40, 58, .26), transparent 70%),
    linear-gradient(180deg, rgba(9, 13, 20, .30), rgba(5, 7, 11, .44));
  backdrop-filter: blur(10px) saturate(1.05);
}

/* ------------------------------------------- пустой список целей

   Серая строчка по центру читалась как сбой загрузки. Теперь это
   полноценное состояние: знак в круге, заголовок, объяснение и подсказка,
   что сделать. Прицел медленно дышит — блок не выглядит замершим. */

.up-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 42px 24px; gap: 4px;
}
/* Знак пустого состояния приглушён. На снимке он был самым ярким пятном
   страницы — ярче реактора и ярче главной кнопки, — то есть взгляд первым
   делом падал на место, где ничего нет. Оранжевый тут остаётся, но
   плотный (--or-deep) и без заливки: контур и лёгкий свет внутри. */
.ue-mark {
  width: 76px; height: 76px; margin-bottom: 14px;
  display: grid; place-items: center; border-radius: 50%;
  color: color-mix(in oklab, var(--or-deep) 72%, var(--tx-3));
  background: radial-gradient(circle at 50% 42%,
    color-mix(in oklab, var(--or-deep) 7%, transparent), transparent 70%);
  border: 1px solid color-mix(in oklab, var(--or-deep) 16%, var(--line));
  animation: ueBreathe 3.4s ease-in-out infinite;
}
.ue-mark svg { width: 38px; height: 38px; display: block; }
@keyframes ueBreathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* Пустое состояние стоит ПО ЦЕНТРУ блока, а не под шапкой. Сетка прижимает
   ряды к верху (align-content: start у .scroll-col) — карточкам так и надо,
   а единственной заглушке нет: на снимке под ней оставалось полблока
   пустоты, и блок читался обрезанным, а не ждущим. */
#myItems:has(> .up-empty),
#targetGrid:has(> .up-empty) { align-content: center; }

.ue-title { font-size: var(--fs-body); color: var(--tx); }
.ue-text { margin: 0; max-width: 34ch; font-size: var(--fs-label); line-height: 1.55; color: var(--tx-2); }
.ue-hint {
  margin-top: 10px; padding: 5px 12px; border-radius: 999px;
  font-size: var(--fs-micro); color: var(--tx-3);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}

@media (prefers-reduced-motion: reduce) { .ue-mark { animation: none; } }

/* ------------------------------------------- продажа: карточки покрупнее

   Здесь смотрят на картинку и цену — что именно за вещь и сколько за неё
   дадут. На общем мелком шаге в 122 пикселя агенты и ножи различались с
   трудом. Шаг чуть шире, кадр выше; остальные сетки не трогаем. */

#sellGrid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
#sellGrid .item-art { height: 100px; }
#sellGrid .item-name { font-size: var(--fs-micro); }
#sellGrid .item-skin { font-size: var(--fs-label); }
#sellGrid .item-price { font-size: var(--fs-ui); }

/* Подсказка-ссылка в пустом состоянии: она не просто объясняет, что делать,
   а ведёт туда. Пустому инвентарю мало сказать «открой пару кейсов». */
.ue-hint.go {
  text-decoration: none; cursor: pointer;
  color: var(--or); border-color: color-mix(in oklab, var(--or) 40%, var(--line));
  transition: background .16s, border-color .16s, transform .12s;
}
.ue-hint.go:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--or) 14%, transparent);
  border-color: var(--or);
}

/* ============================================================ шапка: правки

   Стоят в самом конце файла намеренно. Они переопределяют .side и .content
   из раздела «каркас», а тот объявлен ниже блока шапки — при равной
   специфичности побеждает последнее правило, и раньше эти две строки просто
   не работали: боковое меню липло к верху окна и уезжало под логотип. */

/* Боковое меню липнет ПОД шапкой, а не под верхом окна. */
.side { top: var(--tb-h); height: calc(100vh - var(--tb-h)); }

/* Отступ между шапкой и первым блоком: контент не прилипает к логотипу. */
.content { padding-top: var(--content-top); }

/* ============================================================ адаптив игр

   Стоит в конце файла вместе с остальными правками каркаса, и по той же
   причине: при равной специфичности побеждает последнее правило, а базовые
   .shell и .side объявлены ниже блока шапки. Медиазапрос сам по себе
   приоритета не добавляет — раньше мобильная раскладка просто не включалась,
   и содержимое уезжало вправо за ширину бокового меню.

   Ниже 1200 px панель ставки уезжает НАВЕРХ, над игровым полем, а полоса
   скинов и блок ставок остаются под ним. Порядком в гриде, без второй
   разметки: дублировать панель значило бы дублировать и её обработчики. */

/* Промежуточная ступень: три колонки ещё помещаются, но боковым нужно
   ужаться, иначе всю разницу платит середина — на 1280 поле оставалось бы
   шириной в треть экрана с ячейками по 36 px. Отдаём место сетке: она здесь
   главная, а панель и показания читаются и в узком виде. */
@media (max-width: 1500px) {
  /* Поля игр здесь не правятся: ширину они берут остатком строки и
     сжимаются вместе с ней сами. Ужимаем только панель ставки. */
  :root { --gm-side-w: 300px; }
}

@media (max-width: 1200px) {
  .wp-grid { max-height: 40vh; }
}

/* Порог тот же, что у «Краша»: обе игры разложены одинаково, и ломаться в
   одну колонку они обязаны на одной ширине, а не каждая на своей. */
@media (max-width: 1040px) {
  .gm-main { grid-template-columns: minmax(0, 1fr); }
  /* В одну колонку панель стоит НАД полем: ставку делают до партии. Шире
     своей меры она при этом не растягивается — у полей формы своя ширина. */
  .gm-side { position: static; order: -1; max-width: 560px; width: 100%;
             justify-self: center; }
}

@media (max-width: 880px) {
  :root { --tb-h: 56px; }
  .tb-burger { display: block; }
  .topbar { gap: 8px; padding: 0 10px; }
  .account .account-txt { display: none; }
  .tb-bal { padding: 4px 9px; }
  /* Переключатель валюты в шапке телефона не помещается — он уезжает в лист
     профиля целиком, а не ужимается до нечитаемого. */
  .tb-cur { display: none; }
  .pra-cur { display: inline-flex; }

  /* Центр шапки ужимается первым: логотип и кнопки нужны всегда, а название
     раздела — то, чем можно пожертвовать по ширине. Без min-width: 0 флекс
     не даёт ему сжаться, и оно наезжает на логотип. */
  .tb-mid { min-width: 0; overflow: hidden; }
  .tb-mid .page-title { font-size: var(--fs-label); }

  /* Боковое меню уезжает за край и выдвигается бургером. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 18px 12px; }
  .side {
    position: fixed; top: var(--tb-h); left: 0; z-index: 55;
    width: 232px; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--shadow);
  }
  body.nav-open .side { transform: none; }
  body.nav-open::after {
    content: ''; position: fixed; inset: var(--tb-h) 0 0; z-index: 50;
    background: rgba(0, 0, 0, .5);
  }

  .gm-side { max-width: none; }
  .bb-cols, .bb-row { grid-template-columns: 28px minmax(0, 1.4fr) 1fr 1fr; }
  .bb-cols span:nth-child(4), .bb-row .bb-x { display: none; }
  .wp-actions { grid-template-columns: 1fr; }
  .wp-amount { font-size: 27px; }
}

@media (max-width: 560px) {
  /* Совсем узкий экран: номиналы в два ряда, а не в четыре колонки по
     сорок пикселей, куда не попасть пальцем. */
  .bp-chips { grid-template-columns: repeat(2, 1fr); }
  .bp-mines-quick { grid-template-columns: repeat(3, 1fr); }
  .ss-tools-r { width: 100%; }
  .ss-search { flex: 1; width: auto; }
}

/* ============================================================ МОБИЛЬНАЯ НАВИГАЦИЯ

   Панель вкладок внизу и выезжающий лист. Всё правило целиком живёт в конце
   файла и внутри медиазапроса: на широком экране навигация остаётся прежней,
   боковой, и ни одна строка отсюда её не касается.

   Почему панель, а не бургер. Ящик за бургером стоит игроку трёх касаний:
   открыть, выбрать, закрыть — и всё это в верхнем углу, куда большой палец
   на шестидюймовом телефоне не дотягивается. Панель внизу стоит одного
   касания и лежит в зоне, до которой палец достаёт не глядя. */

.tabbar { display: none; }
.sheet-wrap[hidden] { display: none; }

@media (max-width: 880px) {
  :root { --tabbar-h: 60px; }

  /* Панель во всю ширину — по макету «Eniggma Mobile». Плавающая таблетка,
     которую мы делали по CS.FAIL, отменена сознательно: игрок нарисовал
     полосу, прижатую к нижнему краю, с оранжевым волоском по верхней кромке.

     Высота в макете 88 при нижнем поле 26 — это место под полосу жестов
     айфона, которую рисует рамка превью. У нас её отдаёт env(safe-area), а
     собственная высота панели равна оставшимся 62. */
  .tabbar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; z-index: 75;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(9, 11, 16, .86);
    backdrop-filter: blur(18px) saturate(1.15);
    border-top: 1px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  /* Оранжевый волосок по верхней кромке — он и отделяет панель от сцены. */
  .tabbar::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 0, .6), transparent);
  }
  .tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; height: 100%;
    background: none; border: 0; cursor: pointer;
    color: var(--tx-3); font-size: 10px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    transition: color .16s;
    -webkit-tap-highlight-color: transparent;
  }
  .tab svg {
    width: 22px; height: 22px; fill: none;
    stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .tab.on { color: var(--or-2); }
  .tab.on::after {
    content: ''; position: absolute; bottom: 6px; left: 50%; translate: -50% 0;
    width: 20px; height: 3px; border-radius: 999px;
    background: var(--or); box-shadow: 0 0 10px rgba(255, 122, 0, .45);
  }
  .tab:active { color: var(--or-hot); }
  .tab-dot {
    position: absolute; top: 10px; right: 50%; margin-right: -15px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--or); box-shadow: 0 0 8px var(--or);
  }

  /* Содержимое не должно уезжать под панель. */
  /* Под таблетку и её воздух снизу. */
  .content { padding-bottom: calc(var(--tabbar-h) + 30px + env(safe-area-inset-bottom, 0px)); }

  /* Бургер и выдвижной ящик уходят совсем: их работу забрали вкладки, а два
     способа добраться до одного и того же — это не удобство, а выбор без
     разницы. «Задания дня» переезжают в лист профиля, их переносит
     mobilenav.js. */
  .tb-burger { display: none; }
  .side { display: none; }
  body.nav-open::after { content: none; }

  /* ---------------------------------------------------------- лист */

  .sheet-wrap { position: fixed; inset: 0; z-index: 70; }
  .sheet-back {
    position: absolute; inset: 0; background: rgba(0, 0, 0, .62);
    opacity: 0; transition: opacity .22s ease;
  }
  .sheet-wrap.in .sheet-back { opacity: 1; }
  /* Лист тоже плавающий и стоит НАД таблеткой, а не вылезает из-под нижнего
     края экрана: панель остаётся видна и подсказывает, откуда лист вызван. */
  .sheet {
    position: absolute; left: 10px; right: 10px;
    bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom, 0px));
    max-height: 68vh; overflow-y: auto;
    padding: 4px 10px 12px;
    border-radius: 22px;
    background: rgba(10, 13, 19, .92);
    backdrop-filter: blur(18px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .07),
      0 18px 44px rgba(0, 0, 0, .62);
    transform: translateY(calc(100% + 90px));
    transition: transform .28s cubic-bezier(.2, .9, .3, 1);
  }
  .sheet-wrap.in .sheet { transform: none; }
  .sheet-grip {
    display: block; width: 100%; height: 22px; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .sheet-grip::before {
    content: ''; display: block; width: 38px; height: 4px; margin: 9px auto 0;
    border-radius: 999px; background: rgba(255, 255, 255, .2);
  }
  .sh-title {
    font-size: 10px; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--tx-3); margin: 2px 0 9px 6px;
  }

  /* Игры — плиткой в две колонки: название слева, знак режима справа в своей
     ячейке. Список в одну колонку на пять режимов занимал бы весь лист, а
     плитка показывает их разом. */
  .sh-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .sh-row {
    /* Знак справа, название слева — как в образце: читаешь имя режима, а
       не разглядываешь сначала значок. row-reverse, а не перестановка в
       разметке: порядок в DOM важен для чтения с экрана вслух, там имя
       должно идти первым. */
    display: flex; flex-direction: row-reverse; align-items: center;
    gap: 8px; width: 100%;
    padding: 11px 10px; border-radius: 14px; cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .07);
    color: var(--tx); font-size: var(--fs-label); font-weight: 700; text-align: left;
    min-height: 58px;
  }
  .sh-row.on {
    border-color: color-mix(in oklab, var(--or) 48%, transparent);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--or) 17%, transparent), rgba(255, 255, 255, .02));
    color: var(--or-2);
  }
  .sh-tx { flex: 1; min-width: 0; line-height: 1.2; }
  /* Знак режима — в своей плитке, как иконка приложения. Художественных
     миниатюр под каждый режим в наборе нет, а рисовать их «похоже» бриф
     запрещает: берём тот же знак, что и в меню, и даём ему поверхность. */
  .sh-ic {
    flex: none; width: 34px; height: 34px; border-radius: 11px;
    display: grid; place-items: center; font-size: var(--fs-body);
    color: var(--or-2);
    background: radial-gradient(circle at 50% 30%,
      color-mix(in oklab, var(--or) 22%, transparent), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .07);
  }
  .sh-row.on .sh-ic {
    color: var(--or-hot);
    border-color: color-mix(in oklab, var(--or) 40%, transparent);
  }
  /* Метка NEW — в левом верхнем углу плитки, а не в правом: справа стоит
     знак режима, и метка ложилась прямо на него. Слева над названием
     свободно: имя стоит по центру высоты. */
  .sh-new {
    position: absolute; top: 5px; left: 10px;
    font-size: 8px; font-weight: 900; letter-spacing: .06em;
    padding: 2px 5px; border-radius: 5px;
    background: var(--or); color: #150a01;
  }
  .sh-row { position: relative; }
  .sh-live, .sh-dot {
    position: absolute; top: 9px; right: 9px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 8px var(--green);
  }
  .sh-dot { background: var(--or); box-shadow: 0 0 8px var(--or); }
  .sh-empty { padding: 16px 12px; color: var(--tx-2); font-size: var(--fs-ui); line-height: 1.6; }

  /* В профиле строки остаются в один столбец: там подпись из двух слов не
     помещается рядом со знаком, а сами пункты — не сетка режимов, а список. */
  .sheet.profile .sh-list { grid-template-columns: 1fr; }
  .sheet.profile .sh-row { min-height: 0; padding: 12px 12px; font-size: var(--fs-ui); }

  .sh-me {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 11px 12px; margin-bottom: 10px; border-radius: 16px; cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .09);
    color: var(--tx); text-align: left;
  }
  .sh-me.guest {
    border-color: color-mix(in oklab, var(--or) 50%, transparent);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--or) 18%, transparent), rgba(255, 255, 255, .02));
  }
  .sh-me-ava {
    width: 40px; height: 40px; flex: none; border-radius: 13px; overflow: hidden;
    display: grid; place-items: center; color: var(--or-2);
    background: rgba(255, 255, 255, .05);
  }
  .sh-me-ava img { width: 100%; height: 100%; object-fit: cover; }
  .sh-me-ava svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .sh-me-tx { display: grid; gap: 2px; min-width: 0; }
  .sh-me-tx b { font-size: var(--fs-body); }
  .sh-me-tx small { font-size: var(--fs-cap); color: var(--tx-3); }

  /* «Задания дня» переехали в лист профиля: в боковой панели их больше нет,
     а в списке игр им делать нечего. */
  .sheet .quests { display: none; }
  .sheet.profile .quests { display: block; margin: 14px 0 0; }
}

  /* «Слева» и «справа» в подсказках заменены на «ниже»: на телефоне колонки
     стоят не сбоку, а под переключателем, и указание в сторону врало. На
     широком экране «ниже» тоже верно — обе колонки под сценой. */
/* ============================================================ АПГРЕЙД НА ТЕЛЕФОНЕ

   Раскладка собрана по образцу, который принёс игрок: кольцо сверху во всю
   ширину, под ним два слота РЯДОМ, дальше действие, доклад с баланса и
   быстрые кнопки, и только потом сетки.

   Порядок не случайный, он повторяет ход мысли: сначала видно, чем кончится
   сделка (шанс), потом что в неё кладут (слоты), потом кнопку. Прежний
   порядок — слот, кольцо, слот — на телефоне растягивал сцену на три экрана
   и разводил источник с целью так далеко, что сравнить их было нельзя.

   Рейки с кронштейнами здесь сняты со всего. На широком экране рендер-рамка
   работает: у неё своя толщина, свет и разъёмы. На 390 пикселях она съедает
   пятую часть ширины, а её детали ужимаются до неразличимых точек — остаётся
   шум по краю. Вместо неё мягкая карточка: скруглённый тёмный прямоугольник
   с тонкой светлой кромкой сверху. Материал тот же, стеклянный, только без
   железа по периметру. */

.upg-switch { display: none; }

@media (max-width: 760px) {

  /* ---------------------------------------------------------- сцена

     По макету: кольцо — это вся сцена, а слоты ставки и цели лежат ВНУТРИ
     него, слева и справа. В центре кольца крутится бонусное колесо, шанс
     стоит у верхней кромки, множитель у нижней.

     Сцена поэтому не сетка из трёх ячеек, а квадрат 300x300 по центру, на
     котором слоты стоят абсолютом — ровно как в макете (left/right 24). */

  .upg-stage {
    position: relative; display: block;
    width: min(300px, 100%); height: min(300px, 82vw);
    margin: 0 auto 14px; padding: 0;
  }
  .page.on > .upg-stage { animation: none; }

  .ring-wrap { position: absolute; inset: 0; padding: 0; display: grid; place-items: center; }
  .ring { width: 100%; max-width: none; }

  /* Слот — маленькая карточка внутри кольца: кадр, название, цена. */
  .slot {
    position: absolute; top: 50%; translate: 0 -50%;
    width: 82px; height: 100px; min-height: 0; z-index: 4;
    padding: 6px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12); border-image: none;
    background: linear-gradient(180deg, rgba(17, 21, 29, .95), rgba(11, 14, 20, .92));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center;
  }
  /* Свет от слота холодный у источника и тёплый у цели — как в макете и как
     на широком экране. */
  .slot.notch-l { left: 24px; box-shadow: 0 0 18px -6px #4b9bff; }
  .slot.notch-r { right: 24px; box-shadow: 0 0 18px -6px var(--or); }
  .slot > .eg-edge { display: none; }
  .slot.filled.one { border-color: rgba(255, 255, 255, .14); }

  .slot-body { flex: 0 0 auto; min-height: 0; }
  .slot-hint { min-height: 0; font-size: 9px; line-height: 1.3; padding: 0; letter-spacing: .06em; }
  .slot-body > :only-child {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    height: auto; text-align: center;
  }
  .slot-body > :only-child .item-art {
    flex: 0 0 auto; width: 100%; height: 38px; max-height: none; margin: 0;
  }
  .slot-body > :only-child .item-art .skin-svg,
  .slot-body > :only-child .item-art img { scale: 1; }
  .slot-body > :only-child .item-name { display: none; }
  .slot-body > :only-child .item-skin {
    font-size: 10px; line-height: 1.15; margin: 0; max-width: 70px;
  }
  .slot-body > :only-child .item-foot { display: none; }

  /* Плашка ставки превращается в строчку цены под названием: параллелограмм
     во всю ширину в карточке 82 пикселя не живёт. */
  .slot .ribbon {
    margin: 0; padding: 0; background: none; box-shadow: none;
    clip-path: none; align-self: center; justify-content: center;
  }
  .slot .ribbon .rk { display: none; }
  .slot .ribbon .rv { font-size: 10px; font-weight: 800; color: var(--tx-2); }
  .slot.notch-r .ribbon .rv { color: var(--or-2); }
  .slot-clear { top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 6px; font-size: 10px; }
  .slot.notch-r .slot-clear { left: auto; right: 3px; }

  /* Шанс уходит к верхней кромке кольца, множитель — к нижней: середину
     занимает бонусное колесо. */
  .ring-center { padding: 0; }
  .ring-center > div { position: static; }
  /* Отступы больше макетных (26/22), и вот почему: там дуга нарисована
     маской по радиусам 100–117 из 150, а наша — обводкой SVG шириной 18 на
     радиусе 130, то есть занимает 118–142. Цифры по макетным числам легли
     бы прямо на дугу. 40 и 34 ставят их внутрь свободного круга. */
  .ring-val {
    position: absolute; left: 0; right: 0; top: 40px;
    font-size: 22px; line-height: 1;
  }
  .ring.bonus-on:not(.win):not(.lose) .ring-val { font-size: 22px; }
  .ring-sub {
    position: absolute; left: 0; right: 0; top: 66px;
    margin: 0; font-size: 9px; letter-spacing: .18em;
  }
  .ring-note {
    position: absolute; left: 0; right: 0; bottom: 34px;
    margin: 0; font-size: 30px; font-weight: 900; color: var(--or-2);
    text-shadow: 0 0 22px rgba(255, 157, 28, .5);
  }
  /* Маскот в центре уступает место бонусному колесу. */
  .ring-mascot { display: none; }

  /* ---------------------------------------------------------- действие */

  /* Кнопка стоит ПОД циферблатом, а не прибита к низу экрана.

     Прибитая всегда была под рукой, но перекрывала содержимое и жила
     отдельно от сделки; под кольцом она читается концом одной мысли:
     шанс -> ставка и цель -> действие.

     Позиционируется от .ring-wrap (он растянут на всю сцену), поэтому
     top: 100% и есть нижняя кромка циферблата. Ширину берёт по контенту,
     а не по сцене: сцена всего 300 пикселей, кнопка должна быть шире. */
  .ring-wrap #btnUpgrade {
    position: absolute; z-index: 5;
    top: calc(100% + 14px); left: 50%; translate: -50% 0;
    width: min(100vw - 28px, 360px); max-width: none; margin: 0;
    height: 50px;
  }
  /* Место под кнопку: сцена высотой в кольцо, а под ней 14 отступа плюс 50
     самой кнопки плюс 14 до пресетов. */
  .upg-stage { margin-bottom: 78px; }
  #page-upgrade { padding-bottom: 0; }
  .roll-out { margin-top: 8px; }

  /* Доклад с баланса вынесен из слота наружу (перенос делает upgrader.js) и
     здесь получает вид отдельной полосы во всю ширину. */
  .upg-stage + .cash-line {
    margin: 0 0 12px; padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    backdrop-filter: blur(10px);
  }

  /* ---------------------------------------------------------- сетки */

  .upg-switch {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    max-width: var(--page-max); margin: 0 auto 10px;
    padding: 5px; border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
  }
  .upg-switch button {
    padding: 10px 8px; border: 0; border-radius: 12px; cursor: pointer;
    background: none; color: var(--tx-2);
    font-size: var(--fs-label); font-weight: 800; letter-spacing: .02em;
    transition: background .16s, color .16s;
  }
  .upg-switch button.on {
    background: linear-gradient(180deg, #f0770a, #d95f04);
    color: #150a01;
    box-shadow: 0 4px 14px rgba(255, 92, 0, .3);
  }

  /* Быстрые кнопки на телефоне мельче: на 390 капсула в 70x52 занимала
     полосой два ряда и спорила по весу с кольцом, хотя это настройка, а не
     главное число экрана. */
  .ctl-wide { width: auto; margin: 0 0 14px; padding: 0; border: 0; background: none; }
  .ctl-wide::before, .ctl-wide::after { display: none; }
  .ctl-wide .preset-row {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    justify-content: flex-start; gap: 5px; row-gap: 5px;
    scrollbar-width: none; margin-inline: -12px; padding-inline: 12px;
  }
  .ctl-wide .preset-row::-webkit-scrollbar { display: none; }
  /* Капсула группы тоже ужимается: её собственные 24 пикселя по бокам съедали
     больше, чем сами кнопки, и в кадр помещалось две с половиной штуки. */
  .ctl-wide .preset-grp { flex: 0 0 auto; gap: 6px; padding: 5px 10px; }
  /* min-width: 70 у капсулы задан для широкого экрана — на телефоне он и
     держал ширину, сколько ни уменьшай кегль. Снимаем: пусть меряется по
     своему числу. */
  .ctl-wide .preset { flex: 0 0 auto; min-width: 0; padding: 5px 10px; }
  .ctl-wide .preset .p-ch { font-size: var(--fs-label); }
  .ctl-wide .preset .p-mu { font-size: 9px; }
  .preset-tag { flex: 0 0 auto; align-self: center; font-size: 9px; margin-right: 0; }

  .upg-columns .ctl-wide {
    width: auto; margin: 0 0 10px; padding: 0; border: 0; background: none;
  }
  .upg-columns .ctl-wide::before, .upg-columns .ctl-wide::after { display: none; }
  .upg-columns .ctl-wide .preset-row {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    justify-content: flex-start; gap: 6px;
    scrollbar-width: none;
    margin-inline: -12px; padding-inline: 12px;
  }
  .upg-columns .ctl-wide .preset-row::-webkit-scrollbar { display: none; }
  .upg-columns .ctl-wide .preset { flex: 0 0 auto; padding: 7px 14px; }
  .upg-columns .ctl-wide .preset .p-ch { font-size: var(--fs-ui); }
  .upg-columns .preset-tag { flex: 0 0 auto; align-self: center; }

  /* Блоки сеток — такие же карточки, без рейки. */
  .upg-columns { grid-template-columns: minmax(0, 1fr); }
  .upg-columns > .card {
    height: auto; max-height: 78vh;
    border: 1px solid rgba(255, 255, 255, .08);
    border-image: none;
    border-radius: 18px;
    padding: 12px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
      rgba(9, 12, 18, .5);
    backdrop-filter: blur(10px);
  }
  .upg-columns > .card > .eg-edge { display: none; }
  #myItems, #targetGrid { flex: 0 1 auto; }
  .upg-columns.show-mine > .card:nth-of-type(2),
  .upg-columns.show-targets > .card:nth-of-type(1) { display: none; }

  /* Шага сетки здесь НЕТ намеренно: у #myItems и #targetGrid выше по файлу
     стоит свой шаг с потолком в пять колонок и полом в 112 пикселей, он по
     идентификатору и специфичнее любого правила по классу. Проверено
     вычисленным стилем — моё правило просто не работало. */
}

@media (max-width: 380px) {
  .slot-body > :only-child .item-art { height: 84px; }
  .slot-body, .slot-hint { min-height: 106px; }
}

/* ============================================================ ГЛАВНАЯ НА ТЕЛЕФОНЕ

   Собрано по макету «Eniggma Mobile.dc.html» из Claude Design.

   Герой там НЕ во весь экран: срезанный корпус ровно 236 пикселей, арт
   уходит вправо за край, текст лежит на затемнении слева. Счётчики вынесены
   из героя отдельной полосой в своей рамке, витрина кейсов — сетка в две
   колонки вместо горизонтальной полки, лидеры внизу.

   Это отменяет две прежние правки: герой во весь экран и убранную плашку
   «Provably fair» — в макете и то и другое иначе. Скажи, если хочешь
   вернуть, обе правки на одну строку. */

@media (max-width: 760px) {
  /* ---------------------------------------------------------- герой */

  .promo {
    display: block; position: relative;
    height: 236px; min-height: 0;
    margin: 0 0 14px; padding: 16px 16px 0;
    background: rgba(5, 6, 8, .35);
    --cut: 18px; --edge-c: rgba(255, 255, 255, .14);
    overflow: hidden;
  }
  /* Кронштейны по макету: оранжевые уголки сверху слева и снизу справа. */
  .promo::before, .promo::after {
    content: ''; position: absolute; z-index: 3;
    width: 14px; height: 14px; opacity: .75; pointer-events: none;
    animation: none;
  }
  .promo::before { left: 0; top: 18px; border-left: 2px solid var(--or-deep); }
  .promo::after { right: 18px; bottom: 0; border-bottom: 2px solid var(--or-deep); }

  /* Арт — композиция hero-cases, уходящая за правый край, и градиент,
     который гасит её под текстом. В макете именно этот файл, а не вырезанный
     объект hero-art: на узком кадре нужна сцена целиком. */
  .promo-scene {
    inset: 0; width: auto; height: 100%;
    background-image: url('/assets/space/hero-cases.webp');
    background-position: right center;
    background-size: auto 118%;
    -webkit-mask-image: none; mask-image: none;
    transform: none;
  }
  .promo-scene::after {
    background: linear-gradient(90deg,
      rgba(5, 6, 8, .92) 0%, rgba(5, 6, 8, .75) 42%, rgba(5, 6, 8, .05) 75%);
  }
  .promo-bg { display: none; }

  .promo-text {
    position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: flex-start; gap: 10px; padding: 0; max-width: none;
  }
  .promo-kicker { font-size: 10px; padding: 5px 11px 5px 9px; }
  /* Кегль и потолок ширины из макета — 26 и 230. Потолок поднят до 262:
     у макета трекинг .01em, у нашего заголовка -.03em и своя гарнитура, и
     на 230 «новые горизонты» ломались на две строки вместо одной. */
  .promo-h { margin: 0; font-size: 26px; line-height: 1.05; max-width: 262px; }
  .promo-h .w { display: inline; margin-right: 0; }
  .promo-h .w.accent { display: block; }
  .promo-text p {
    display: block; margin: 0; max-width: 210px;
    font-size: var(--fs-cap); line-height: 1.4; color: var(--tx-2);
  }
  /* Кнопка и лента убраны — как в макете и как просил игрок раньше. */
  .promo-cta, .promo-ticker { display: none; }

  /* ------------------------------------------------------ счётчики */

  /* Полоса вынесена из героя (переносит cases.js) и получает свою рамку. */
  .promo + .promo-stats {
    /* Направление задаём явно: на широком экране полоса — колонка рядов, и
       без сброса ячейки встали бы на телефоне столбиком в семь этажей. */
    display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    margin: 0 0 14px; padding: 0; gap: 0; width: auto;
    border: 1px solid var(--line); border-radius: 6px;
    background: rgba(5, 6, 8, .55); backdrop-filter: blur(6px);
    scrollbar-width: none;
  }
  .promo + .promo-stats::-webkit-scrollbar { display: none; }
  /* Ряды нужны только сетке. Здесь полоса одна и прокручивается вбок, и
     display: contents отдаёт ячейки прямо в неё — вторым обёрткам иначе
     достались бы флекс-размеры вместо самих ячеек. */
  .promo + .promo-stats .ps-row { display: contents; }
  .promo + .promo-stats .ps {
    flex: none; min-width: 88px; display: flex; flex-direction: column; gap: 3px;
    padding: 10px 14px; border: 0; border-left: 1px solid var(--line);
    background: none; border-radius: 0;
  }
  /* Границы нет только у самой первой ячейки полосы. Просто :first-child
     сюда не годится: с display: contents первой в своём ряду оказывается и
     ячейка второго ряда, и разделитель посреди полосы пропадал бы. */
  .promo + .promo-stats .ps-row:first-child .ps:first-child { border-left: 0; }
  .promo + .promo-stats .k {
    font-size: 9px; letter-spacing: .16em; white-space: nowrap; overflow: visible;
  }
  .promo + .promo-stats .v { font-size: 18px; line-height: 1.1; }

  /* ------------------------------------------------------- фильтры */

  .quick-filter {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tabs" "sort" "search";
    gap: 8px; margin-bottom: 14px;
  }
  .quick-filter .price-range { display: none; }

  .shelf-tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    scrollbar-width: none; margin-inline: -12px; padding-inline: 12px;
  }
  .shelf-tabs::-webkit-scrollbar { display: none; }
  .shelf-tabs button { flex: none; height: 40px; padding: 0 14px; border-radius: 6px; }

  /* Сортировка — сегментом в одной рамке, как в макете: три кнопки делят
     ширину, а не разъезжаются по трём рядам. */
  .quick-filter .seg {
    display: flex; flex: 1; gap: 3px; margin-right: 0; padding: 3px;
    background: #080b10; border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
  }
  .quick-filter .seg button {
    flex: 1; height: 30px; min-width: 0; padding: 0 6px;
    border: 0; border-radius: 4px; white-space: nowrap;
    font-size: var(--fs-micro); font-weight: 700;
  }
  .quick-filter .seg button svg { display: none; }
  .case-search { width: 100%; height: 42px; flex: 1 1 auto; }

  /* -------------------------------------------------------- витрина */

  /* Сетка в две колонки вместо горизонтальной полки. Полка хороша, когда
     колонок много и кейсы листают вбок; на телефоне в кадр помещалось две
     карточки, и полка читалась обрезанной. */
  .case-grid {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: 1fr 1fr; gap: 12px;
    overflow: visible; padding-bottom: 0;
    scroll-snap-type: none;
  }
  .case-card { --cut: 11px; padding: 10px 10px 12px; }
  .case-card .case-art { height: 132px; margin: 6px 0 8px; }
  .case-card .case-name { font-size: var(--fs-label); }
  .case-card .case-meta { font-size: 10px; }

  /* --------------------------------------------------------- лидеры */

  .leaders { --cut: 14px; padding: 12px 0 14px 12px; margin-top: 4px; }
  .leaders-head { font-size: 10px; letter-spacing: .16em; margin-bottom: 10px; }
  .leaders-row { gap: 8px; padding-right: 12px; }
}

/* ============================================================ рамки аватара

   Одиннадцать тиров, один компонент. Размер задаётся ТОЛЬКО переменной --fs:
   40 px в шапке, 56 px в списках, 96 px в карточке профиля. Отдельного
   набора стилей под каждый размер нет — три копии одной рамки это три места,
   где её потом чинить.

   Толщина кольца --afw одна на все тиры. Это не мелочь: будь старший тир
   толще, картинка внутри стала бы меньше, и игрок, взявший уровень, увидел
   бы, как его аватар сжался — в награду за это.

   Вращение сделано на @property: анимируется угол conic-градиента, а не
   поворот коробки. Там, где @property не поддержан, переменная остаётся
   незарегистрированной, анимировать её нечем — и кольцо застывает красивым
   статичным градиентом. Это ровно то состояние, в которое его приводит
   prefers-reduced-motion, поэтому отдельного фолбэка не нужно. */

@property --af-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ava-frame {
  --afw: max(2px, calc(var(--fs) * .042));   /* толщина кольца от размера */
  --af-spin: 8s;
  position: relative;
  width: var(--fs); height: var(--fs);
  box-sizing: border-box;
  padding: var(--afw);
  border-radius: calc(var(--fs) * .21);
  flex: none;
  isolation: isolate;
}

/* Кольцо. Лежит подложкой, а не border: границей нельзя ни вращать градиент,
   ни пустить по ней блик. */
.af-ring {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: linear-gradient(150deg, #2a2f3a, #171b22);
}

/* Картинка внутри. Своя подложка перекрывает середину кольца — обычный приём
   градиентной рамки: снаружи градиент, внутри фон панели. */
.af-in {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  border-radius: calc(var(--fs) * .21 - var(--afw));
  overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #1a1e27, #0c0f15);
}
.af-in > img, .af-in > svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Блик: узкая косая полоса, проезжающая по кольцу и обрезанная его же
   скруглением. Полоса одна — вторая читалась бы как мигание, а не как
   отражение. */
.af-shine {
  position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.af-shine::before {
  content: ''; position: absolute; top: -60%; left: -120%;
  width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(14deg);
}

/* Искры. Восемь точек максимум и ОДИН вращающийся контейнер на все: восемь
   отдельных анимаций стоили бы восьми слоёв композитора на каждом аватаре в
   списке, а списки у нас длинные. */
.af-orbit {
  position: absolute; inset: calc(var(--afw) * -1.6); z-index: 3;
  pointer-events: none; will-change: transform;
  animation: af-orbit 9s linear infinite;
}
.af-orbit b {
  position: absolute; left: 50%; top: 50%;
  width: max(2px, calc(var(--fs) * .045)); height: max(2px, calc(var(--fs) * .045));
  margin: calc(var(--fs) * -.022) 0 0 calc(var(--fs) * -.022);
  border-radius: 50%;
  background: var(--af-spark, var(--or-2));
  box-shadow: 0 0 6px var(--af-spark, var(--or-2));
  transform: rotate(var(--a)) translateX(calc(var(--fs) * .52));
}
.af-orbit b:nth-child(1) { --a: 0deg; }
.af-orbit b:nth-child(2) { --a: 45deg; }
.af-orbit b:nth-child(3) { --a: 90deg; }
.af-orbit b:nth-child(4) { --a: 135deg; }
.af-orbit b:nth-child(5) { --a: 180deg; }
.af-orbit b:nth-child(6) { --a: 225deg; }
.af-orbit b:nth-child(7) { --a: 270deg; }
.af-orbit b:nth-child(8) { --a: 315deg; }

/* Бейдж уровня. Висит на кольце снизу слева — там, где он не перекрывает
   лицо на аватаре. */
.af-lvl {
  position: absolute; z-index: 4;
  left: calc(var(--fs) * -.06); bottom: calc(var(--fs) * -.06);
  min-width: calc(var(--fs) * .3); height: calc(var(--fs) * .3);
  padding: 0 calc(var(--fs) * .06); box-sizing: border-box;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: calc(var(--fs) * .17); font-weight: 900; line-height: 1;
  color: #120a02;
  background: linear-gradient(160deg, var(--or-hot), var(--or-3));
  border: max(1px, calc(var(--fs) * .014)) solid #0b0e14;
  box-shadow: 0 0 10px -2px var(--or-glow);
}

@keyframes af-spin { to { --af-angle: 360deg; } }
@keyframes af-orbit { to { transform: rotate(360deg); } }
@keyframes af-shine-run {
  from { left: -120%; }
  to { left: 220%; }
}
@keyframes af-pulse {
  50% { box-shadow: 0 0 calc(var(--fs) * .22) -2px var(--af-glow, var(--or-glow)); }
}
@keyframes af-ember {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--fs) * .52)) scale(.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--fs) * .64)) scale(1); }
}

/* ---- 0. Новобранец: матовое серое кольцо, ни свечения, ни движения ---- */
.ava-frame.t-0 .af-ring { background: linear-gradient(150deg, #333945, #1b1f28); }

/* ---- 1. Бронза: градиент и мягкое свечение ---- */
.ava-frame.t-1 { box-shadow: 0 0 14px -4px rgba(199, 139, 70, .55); }
.ava-frame.t-1 .af-ring { background: linear-gradient(150deg, #c78b46, #6d4319 60%, #3a2410); }

/* ---- 2. Сталь: градиент плюс медленный блик раз в шесть секунд ---- */
.ava-frame.t-2 { box-shadow: 0 0 14px -5px rgba(207, 216, 230, .45); }
.ava-frame.t-2 .af-ring { background: linear-gradient(150deg, #cfd8e6, #6d7789 55%, #333b49); }
.ava-frame.t-2 .af-shine { opacity: 1; }
.ava-frame.t-2 .af-shine::before { animation: af-shine-run 6s linear infinite; }

/* ---- 3. Золото: блик и слабая пульсация свечения ---- */
.ava-frame.t-3 {
  --af-glow: rgba(255, 199, 64, .6);
  box-shadow: 0 0 16px -5px rgba(255, 199, 64, .5);
  animation: af-pulse 3.4s ease-in-out infinite;
}
.ava-frame.t-3 .af-ring { background: linear-gradient(150deg, #ffe08a, #d79a1e 55%, #7a5407); }
.ava-frame.t-3 .af-shine { opacity: 1; }
.ava-frame.t-3 .af-shine::before { animation: af-shine-run 5s linear infinite; }

/* ---- 4. Изумруд: вращающийся conic, оборот за восемь секунд ---- */
.ava-frame.t-4 { --af-spin: 8s; box-shadow: 0 0 16px -5px rgba(45, 212, 145, .5); }
.ava-frame.t-4 .af-ring {
  background: conic-gradient(from var(--af-angle),
    #0f3d2c, #2dd491 25%, #a8ffd8 38%, #2dd491 52%, #0f3d2c 78%, #0f3d2c);
  animation: af-spin var(--af-spin) linear infinite;
}

/* ---- 5. Рубин: conic за шесть секунд и пульсирующее свечение внутри ---- */
.ava-frame.t-5 {
  --af-spin: 6s; --af-glow: rgba(255, 77, 94, .6);
  animation: af-pulse 2.6s ease-in-out infinite;
}
.ava-frame.t-5 .af-ring {
  background: conic-gradient(from var(--af-angle),
    #45060f, #e8253f 22%, #ff8f9a 36%, #e8253f 50%, #45060f 76%, #45060f);
  animation: af-spin var(--af-spin) linear infinite;
}
.ava-frame.t-5 .af-in { box-shadow: inset 0 0 14px -4px rgba(255, 77, 94, .75); }

/* ---- 6. Легенда: двойное кольцо, conic и шесть искр по орбите ----
   Второе кольцо сделано тенью, а не вторым элементом с отступом: отступ съел
   бы картинку внутри, а тень лежит снаружи и layout не двигает. */
.ava-frame.t-6 {
  --af-spin: 7s; --af-spark: var(--or-hot);
  box-shadow: 0 0 0 2px rgba(255, 157, 28, .28), 0 0 20px -4px var(--or-glow);
}
.ava-frame.t-6 .af-ring {
  background: conic-gradient(from var(--af-angle),
    #3a1a00, var(--or-3) 20%, var(--or-hot) 34%, var(--or-3) 48%, #3a1a00 74%, #3a1a00);
  animation: af-spin var(--af-spin) linear infinite;
}

/* ---- 7. Мифик: голографический conic из семи стопов и шум поверх ---- */
.ava-frame.t-7 {
  --af-spin: 9s; --af-spark: #d7b3ff;
  box-shadow: 0 0 20px -4px rgba(180, 120, 255, .55);
}
.ava-frame.t-7 .af-ring {
  background: conic-gradient(from var(--af-angle),
    #ff4d5e, #ffb52e 14%, #7dff9e 28%, #4bd9ff 43%, #7a6bff 58%, #e56bff 72%,
    #ff4d5e 86%, #ff4d5e);
  animation: af-spin var(--af-spin) linear infinite;
}
/* Шум — не картинка: повторяющийся микроградиент даёт ту же зернистость и не
   тянет ни байта по сети. */
.ava-frame.t-7 .af-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-image: repeating-conic-gradient(rgba(255, 255, 255, .10) 0 0.6deg,
                    transparent 0.6deg 1.6deg);
  mix-blend-mode: overlay; opacity: .8;
}

/* ---- 8. Пламя: огненный градиент и угольки, летящие наружу ---- */
.ava-frame.t-8 {
  --af-spin: 4.5s; --af-spark: #ffb52e;
  box-shadow: 0 0 22px -4px rgba(255, 92, 0, .6);
}
.ava-frame.t-8 .af-ring {
  background: conic-gradient(from var(--af-angle),
    #4a1200, #ff5c00 18%, #ffd24a 30%, #ff5c00 44%, #7a1f00 66%, #4a1200);
  animation: af-spin var(--af-spin) linear infinite;
}
.ava-frame.t-8 .af-orbit { animation-duration: 6s; }
.ava-frame.t-8 .af-orbit b { animation: af-ember 2.4s ease-out infinite; }
.ava-frame.t-8 .af-orbit b:nth-child(2) { animation-delay: .3s; }
.ava-frame.t-8 .af-orbit b:nth-child(3) { animation-delay: .7s; }
.ava-frame.t-8 .af-orbit b:nth-child(4) { animation-delay: 1.1s; }
.ava-frame.t-8 .af-orbit b:nth-child(5) { animation-delay: 1.5s; }
.ava-frame.t-8 .af-orbit b:nth-child(6) { animation-delay: 1.9s; }
.ava-frame.t-8 .af-orbit b:nth-child(7) { animation-delay: 2.2s; }

/* ---- 9. Космос: звёздное поле под маской и орбитальная точка ---- */
.ava-frame.t-9 {
  --af-spin: 14s; --af-spark: #cfe4ff;
  box-shadow: 0 0 20px -5px rgba(75, 155, 255, .55);
}
.ava-frame.t-9 .af-ring {
  background:
    radial-gradient(1.4px 1.4px at 22% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 68% 18%, #cfe4ff, transparent),
    radial-gradient(1.6px 1.6px at 82% 64%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 38% 78%, #9dc4ff, transparent),
    radial-gradient(1.3px 1.3px at 12% 62%, #fff, transparent),
    conic-gradient(from var(--af-angle), #0a1430, #1b3a6b 30%, #0a1430 60%, #142a52);
  animation: af-spin var(--af-spin) linear infinite;
}
.ava-frame.t-9 .af-orbit { animation-duration: 7s; }

/* ---- 10. ENIGGMA: всё вместе и эмблема в разрыве кольца ---- */
.ava-frame.t-10 {
  --af-spin: 5s; --af-spark: var(--or-hot); --af-glow: var(--or-glow);
  box-shadow: 0 0 0 2px rgba(255, 157, 28, .3), 0 0 26px -3px var(--or-glow);
  animation: af-pulse 3s ease-in-out infinite;
}
.ava-frame.t-10 .af-ring {
  background: conic-gradient(from var(--af-angle),
    #120a02, var(--or-3) 12%, var(--or-hot) 24%, #fff2d0 32%, var(--or-hot) 40%,
    var(--or-3) 55%, #120a02 78%, #120a02);
  animation: af-spin var(--af-spin) linear infinite;
}
.ava-frame.t-10 .af-shine { opacity: 1; }
.ava-frame.t-10 .af-shine::before { animation: af-shine-run 4s linear infinite; }
/* Разрыв кольца сверху и знак в нём. Ромб — тот же, что у логотипа и у
   маскота на баннере; отдельной картинки он не требует. */
.ava-frame.t-10 .af-mark {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--fs) * -.09);
  width: calc(var(--fs) * .26); height: calc(var(--fs) * .26);
  margin-left: calc(var(--fs) * -.13);
  background: linear-gradient(160deg, var(--or-hot), var(--or-3));
  border: max(1px, calc(var(--fs) * .012)) solid #0b0e14;
  transform: rotate(45deg);
  border-radius: calc(var(--fs) * .05);
  box-shadow: 0 0 12px -2px var(--or-glow);
}

/* Движение замирает, а не пропадает: статичный conic-градиент сам по себе
   красив, и рамка старшего тира остаётся отличимой от младшей. Убрать
   анимацию, оставив серое кольцо, значило бы отнять награду у того, кто как
   раз и просил поменьше движения. */
@media (prefers-reduced-motion: reduce) {
  .ava-frame,
  .ava-frame .af-ring,
  .ava-frame .af-orbit,
  .ava-frame .af-orbit b,
  .ava-frame .af-shine::before { animation: none !important; }
  .ava-frame .af-shine { opacity: .5; }
  .ava-frame .af-shine::before { left: 18%; }
}

/* ============================================================ лояльность

   Блок в карточке профиля, модалка прогрессии, колесо. Ничего из этого не
   переделывает существующие блоки кабинета: полоса опыта встаёт между
   строкой профиля и кнопками пополнения, всё остальное живёт в окнах. */

/* Аватар с рамкой тира отдаёт ей всё оформление: своя рамка .me-ava
   обвела бы кольцо тира вторым кольцом, и матовый серый «Новобранец»
   читался бы оранжевым — то есть заслуженным. */
.me-ava.has-frame {
  border: 0; background: none; width: auto; height: auto; padding: 0;
}

.me-loyalty {
  display: grid; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}

.loy-bar-head { display: flex; align-items: baseline; gap: 10px; }
.loy-lvl {
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase;
  font-weight: 900; color: var(--tx);
}
.loy-frame { font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; }
.loy-more {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-cap); font-weight: 700; color: var(--or-2);
}
.loy-more:hover { color: var(--or-hot); text-decoration: underline; }

/* Дорожка опыта. Подпись лежит ВНУТРИ дорожки справа, а не под ней: под
   ней она отъезжала от полосы на строку и читалась как отдельная мысль. */
.loy-track {
  position: relative; height: 22px; border-radius: 999px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
}
.loy-track > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--or-3), var(--or-hot));
  box-shadow: 0 0 16px -3px var(--or-glow);
  transition: width .5s cubic-bezier(.22, .8, .2, 1);
}
.loy-xp {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}
.loy-next { font-size: var(--fs-cap); }

.loy-tier {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-cap);
}
.loy-tier-name {
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  font-size: var(--fs-micro); color: var(--or-2);
  padding: 3px 9px; border-radius: 999px;
  background: var(--or-soft); border: 1px solid rgba(255, 122, 0, .3);
}
.loy-hold {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--tx-2); cursor: help;
  padding: 2px 7px; border-radius: 999px; border: 1px dashed var(--line-2);
}

/* Кнопки наград. Плитками, а не строкой: их бывает три — уровневая, тирная
   и колесо, — и строкой они на узком экране сминаются в кашу. */
.loy-claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.loy-claims:empty { display: none; }
/* Забранное за сегодня — строкой, а не рядом мёртвых кнопок. */
.loy-taken { font-size: var(--fs-micro); line-height: 1.4; }
.loy-claim {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 11px; border-radius: var(--r); cursor: pointer;
  background: var(--panel-2); border: 1px solid rgba(255, 122, 0, .38);
  color: var(--tx); font: inherit;
  box-shadow: 0 0 16px -6px var(--or-glow);
  transition: border-color .15s, transform .12s;
}
.loy-claim:hover { border-color: var(--or); transform: translateY(-1px); }
.loy-claim:active { transform: translateY(0); }
.loy-claim.taken, .loy-claim[disabled] {
  border-color: var(--line); box-shadow: none; opacity: .5;
  cursor: default; pointer-events: none;
}
.loy-claim .lc-art {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  color: var(--or-2);
}
.loy-claim .lc-art img, .loy-claim .lc-art svg {
  width: 100%; height: 100%; object-fit: contain;
}
.loy-claim .lc-txt { min-width: 0; display: grid; }
.loy-claim .lc-txt b { font-size: var(--fs-label); }
.loy-claim .lc-txt small {
  font-size: var(--fs-micro); color: var(--tx-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------- прогрессия */

.prog { display: grid; gap: 16px; }
.prog-head { display: flex; align-items: center; gap: 14px; }
.prog-head h3 { font-size: 17px; margin: 0 0 2px; }
.prog-head .dim { font-size: var(--fs-cap); line-height: 1.45; }
.prog-lvl {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 900; color: #120a02;
  background: linear-gradient(160deg, var(--or-hot), var(--or-3));
  box-shadow: 0 0 18px -4px var(--or-glow);
}

/* Рейка вех. Линия под точками залита до текущего уровня — заливка идёт
   переменной --fill, посчитанной от границ окна, а не от прибитых чисел:
   окно вех сдвигается вместе с игроком. */
.prog-rail {
  position: relative; display: flex; justify-content: space-between;
  padding: 0 4px; margin: 2px 0 4px;
}
.pr-line {
  position: absolute; left: 4px; right: 4px; top: 50%; height: 2px;
  transform: translateY(-50%); border-radius: 2px; z-index: 0;
  background: linear-gradient(90deg,
    var(--or) 0 var(--fill), var(--line-2) var(--fill) 100%);
}
.pr-dot {
  position: relative; z-index: 1;
  min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box;
  border-radius: 999px; display: grid; place-items: center;
  font-size: var(--fs-micro); font-weight: 800; color: var(--tx-3);
  background: var(--panel); border: 1px solid var(--line-2);
}
.pr-dot.on { color: var(--tx); border-color: rgba(255, 122, 0, .5); }
.pr-dot.now {
  width: 34px; height: 34px; font-size: var(--fs-label); color: #120a02;
  background: linear-gradient(160deg, var(--or-hot), var(--or-3));
  border-color: transparent; box-shadow: 0 0 14px -3px var(--or-glow);
}

.prog-sect {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; margin-bottom: -6px;
}
.prog-ready { display: grid; gap: 10px; }
.prog-ready-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px;
}
/* Плитка, на которую можно нажать, выглядит нажимаемой: курсор, отклик
   на наведение и настоящий <button>, а не div с обработчиком. */
.prog-card.ready { cursor: pointer; font: inherit; color: var(--tx); text-align: center; }
.prog-card.ready:hover { transform: translateY(-2px); border-color: var(--or); }
.prog-card.ready:active { transform: translateY(0); }
.prog-card.ready[disabled] { opacity: .5; pointer-events: none; }
.pc-pill.ready { color: #120a02; background: linear-gradient(160deg, var(--or-hot), var(--or-3)); }

.prog-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 860px) { .prog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .prog-grid { grid-template-columns: repeat(2, 1fr); } }

.prog-card {
  display: grid; gap: 5px; justify-items: center; text-align: center;
  padding: 12px 8px 10px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid var(--line);
}
.prog-card.active {
  border-color: rgba(255, 122, 0, .55);
  box-shadow: 0 0 20px -6px var(--or-glow);
  background: linear-gradient(180deg, rgba(255, 122, 0, .07), transparent 60%), var(--panel-2);
}
.prog-card.locked .pc-art { opacity: .32; filter: grayscale(1); }
.prog-card .pc-art { width: 54px; height: 54px; display: grid; place-items: center; }
.prog-card .pc-art img, .prog-card .pc-art svg {
  width: 100%; height: 100%; object-fit: contain;
}
.pc-title { font-size: var(--fs-cap); line-height: 1.25; }
.pc-sub { font-size: 10px; line-height: 1.3; }
.pc-pill {
  margin-top: 3px; font-size: 9px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.pc-pill.active { color: #120a02; background: linear-gradient(160deg, var(--or-hot), var(--or-3)); }
.pc-pill.replaced { color: #0b1a10; background: linear-gradient(160deg, #7dffb0, #35d07f); }
.pc-pill.locked { color: var(--tx-3); background: var(--panel-3); border: 1px solid var(--line); }

.prog-foot {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end;
  padding-top: 14px; border-top: 1px solid var(--line);
}
@media (max-width: 700px) { .prog-foot { grid-template-columns: 1fr; } }
.prog-hints h4 {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3); margin: 0 0 8px; font-weight: 800;
}
.prog-hints .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.prog-hints .chip {
  font-size: var(--fs-micro); padding: 4px 10px; border-radius: 999px;
  background: var(--or-soft); border: 1px solid rgba(255, 122, 0, .28);
  color: var(--or-2); font-weight: 700;
}
.prog-hints small { font-size: var(--fs-micro); line-height: 1.5; display: block; }
.prog-cta { white-space: nowrap; }

/* Награда, которую только что выдали. */
.loy-drop { display: grid; gap: 8px; justify-items: center; text-align: center; }
.loy-drop-art { width: 220px; max-width: 100%; height: 150px; display: grid; place-items: center; }
.loy-drop-art img, .loy-drop-art svg { max-width: 100%; max-height: 100%; }
.loy-drop-name { font-size: var(--fs-body); }
.loy-drop-price { font-size: 22px; font-weight: 900; }
.loy-drop .btn { margin-top: 8px; max-width: 260px; }

/* ---------------------------------------------------------- колесо */

.wheel-box { display: grid; gap: 16px; }

.wheel-stage {
  position: relative; width: min(360px, 82vw); aspect-ratio: 1;
  margin: 4px auto 0;
}

/* Барабан. Секторы — одинаковые клинья, повёрнутые на свой номер: разметка
   не знает, какой из них выиграет, и знать не должна — сектор выбирает
   сервер, а сюда приходит его номер. */
.wh-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #14100e 38%, #0b0e14 39%);
  border: 2px solid var(--or-deep);
  box-shadow: 0 0 40px -6px var(--or-glow), inset 0 0 30px -10px var(--or-glow);
  overflow: hidden;
}
.wh-sec {
  position: absolute; inset: 0;
  transform: rotate(calc(var(--i) * var(--step)));
}
/* Разделительная линия между секторами. Рисуется границей клина, а не
   отдельным элементом: элементов было бы вдвое больше при том же виде. */
.wh-sec::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 50%;
  width: 1px; background: rgba(255, 122, 0, .38);
}
/* Иконка стоит на середине клина и развёрнута обратно на весь накопленный
   поворот — сектора и своего полушага. Иначе она едет вместе с клином и на
   нижних секторах читается вверх ногами.

   Подписей в барабане нет намеренно: на референсе их тоже нет, а названия
   лежат в списке под колесом. Текст, повёрнутый на 240 градусов, не читает
   никто — он только сообщает, что тут что-то написано. */
.wh-sec-in {
  position: absolute; left: 50%; top: 15%;
  transform: translateX(-50%) rotate(calc(var(--step) / 2));
  transform-origin: 50% 240%;
  display: grid; place-items: center;
  width: 44px; height: 44px; color: var(--or-2);
}
/* Контр-поворот учитывает и положение сектора, и текущий доворот барабана:
   --turn ставит JS в тот же момент, когда запускает вращение диска. Без
   слагаемого --turn иконки стоят ровно ДО первого спина, а после остановки
   оказываются завалены на угол, на который повернулся барабан.

   Переход тот же по длительности и кривой, что у диска, поэтому иконка
   держится вертикально всю дорогу, а не доворачивается в конце рывком. */
.wh-ic {
  width: 30px; height: 30px; display: block;
  transform: rotate(calc(-1 * (var(--i) * var(--step) + var(--step) / 2 + var(--turn, 0deg))));
  transition: transform 4.6s cubic-bezier(.12, .72, .14, 1);
}
.wh-ic svg { width: 100%; height: 100%; }

/* Указатель. Стоит сверху и никуда не едет — едет барабан. */
.wh-mark {
  position: absolute; left: 50%; top: -2px; z-index: 3;
  width: 0; height: 0; margin-left: -9px;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 16px solid var(--or-hot);
  filter: drop-shadow(0 0 6px var(--or-glow));
}

.wh-go {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  border: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-body); font-weight: 900; line-height: 1.25; color: #120a02;
  background: radial-gradient(circle at 50% 35%, var(--or-hot), var(--or-3));
  box-shadow: 0 0 28px -4px var(--or-glow), inset 0 -6px 14px -6px rgba(0, 0, 0, .5);
  transition: filter .15s, transform .12s;
}
.wh-go span { font-size: 19px; }
.wh-go:hover:not([disabled]) { filter: brightness(1.08); }
.wh-go:active:not([disabled]) { transform: translate(-50%, -50%) scale(.97); }
.wh-go[disabled] { filter: grayscale(.7) brightness(.7); cursor: default; }

.wh-prizes h4 {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3); margin: 0 0 8px; font-weight: 800; text-align: center;
}
.wh-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 640px) { .wh-list { grid-template-columns: repeat(3, 1fr); } }
.wh-item {
  display: grid; justify-items: center; gap: 5px; text-align: center;
  padding: 10px 6px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--or-2);
}
.wh-item small { font-size: 10px; color: var(--tx-2); line-height: 1.25; }

.whr {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 14px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 122, 0, .1), transparent 70%), var(--panel-2);
  border: 1px solid rgba(255, 122, 0, .4);
  animation: fade .3s;
}
.whr:empty, .wh-result:empty { display: none; }
.whr-head {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 900; color: var(--or-2);
}
.whr-art { width: 150px; height: 100px; display: grid; place-items: center; }
.whr-art img, .whr-art svg { max-width: 100%; max-height: 100%; }
.whr .mono { font-size: 10px; }

/* ---------------------------------------------------------- /dev/frames */

.frames-demo { display: grid; gap: 10px; margin-top: 14px; }
/* Строка за пределами экрана не рисуется вовсе. Здесь это не микро-
   оптимизация: одиннадцать строк по три рамки — это тридцать три
   вращающихся conic-градиента, каждый из которых перерисовывается
   покадрово. Все разом они кладут композитор, и страница перестаёт
   отрисовываться совсем. */
.fd-row {
  content-visibility: auto; contain-intrinsic-size: auto 120px;
  display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: center;
  padding: 14px 16px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid var(--line);
}
@media (max-width: 700px) { .fd-row { grid-template-columns: 1fr; } }
.fd-name { display: grid; gap: 2px; }
.fd-name b { font-size: var(--fs-label); }
.fd-name small { font-size: var(--fs-micro); }
.fd-sizes { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.fd-cell { display: grid; justify-items: center; gap: 8px; }
.fd-cell small { font-size: 10px; }

/* ================================================================= акции

   Карточка акции устроена как карточка кейса на витрине: арт слева,
   содержимое посередине, действие внизу. Это не экономия — игрок уже знает
   эту форму, и учить его второй ради акций незачем. */

/* Чип в шапке. Скрыт, пока активировать нечего: кнопка с нулём — это
   приглашение в пустую комнату. */
.tb-promo {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--or-soft); border: 1px solid rgba(255, 122, 0, .38);
  color: var(--tx); font: inherit; font-size: var(--fs-cap); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .15s, box-shadow .15s;
}
.tb-promo:hover { border-color: var(--or); box-shadow: var(--glow-soft); }
.tb-promo .tbp-star { color: var(--or-2); font-size: var(--fs-label); }
.tb-promo .tbp-n {
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; display: grid; place-items: center;
  font-size: var(--fs-micro); color: #120a02;
  background: linear-gradient(160deg, var(--or-hot), var(--or-3));
}
@media (max-width: 900px) { .tb-promo .tbp-txt { display: none; } }

.promo-sect {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; margin: 16px 0 8px;
}
.promo-empty { padding: 26px; text-align: center; }

.promo-code-card { max-width: 520px; }

.promo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin-top: 10px;
}

.promo-card {
  --pa: var(--or);
  position: relative;
  display: grid; grid-template-columns: 56px 1fr; gap: 12px;
  align-content: start;
  padding: 14px; border-radius: var(--r);
  background: linear-gradient(150deg, rgba(255, 255, 255, .03), transparent 60%),
              var(--panel-2);
  border: 1px solid var(--line);
}
/* Акция, в которой игрок участвует, подсвечена своим акцентом: среди десяти
   карточек «моя» должна находиться взглядом, а не чтением. */
.promo-card.running {
  border-color: var(--pa);
  box-shadow: 0 0 22px -8px var(--pa);
}
.promo-card.used, .promo-card.over { opacity: .55; }

.promo-card .pm-art {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--r-s); background: var(--bg-2);
  border: 1px solid var(--line);
}
.promo-card .pm-art img, .promo-card .pm-art svg {
  width: 100%; height: 100%; object-fit: contain;
}
.pm-body { min-width: 0; display: grid; gap: 4px; align-content: start; }
.pm-title { font-size: var(--fs-ui); }
.pm-sub { font-size: var(--fs-cap); }
.pm-terms {
  font-size: var(--fs-cap); line-height: 1.5; color: var(--tx-2);
  padding: 7px 9px; border-radius: var(--r-s);
  background: var(--bg-2); border: 1px solid var(--line);
}
.pm-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pm-timer { font-size: var(--fs-micro); }
.promo-card .pm-go { grid-column: 1 / -1; width: 100%; }
.pm-code {
  position: absolute; right: 10px; top: 10px;
  font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  color: var(--or-2); background: var(--or-soft);
  border: 1px solid rgba(255, 122, 0, .3);
}

/* Идущее участие: полоса отыгрыша и точные суммы. Проценты без сумм не
   отвечают на единственный вопрос игрока — сколько ещё крутить. */
.promo-mine { display: grid; gap: 10px; }
.promo-run {
  display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid rgba(255, 122, 0, .38);
}
.pr-top { display: flex; align-items: center; gap: 10px; }
.pr-track {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
}
.pr-track > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--or-3), var(--or-hot));
  transition: width .4s ease;
}
.pr-note { font-size: var(--fs-cap); }

.promo-past { display: grid; gap: 6px; }
.promo-past-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-s);
  background: var(--panel); border: 1px solid var(--line);
  font-size: var(--fs-cap); opacity: .7;
}

.promo-ask { display: grid; gap: 10px; }
.promo-ask .row { margin-top: 6px; }

/* ---------------------------------------------------------- админка акций */

.pa-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pa-head .dim { font-size: var(--fs-cap); line-height: 1.4; }
/* На телефоне кнопка, поиск и пояснение не помещаются в строку и налезают
   друг на друга: у .pa-head не было переноса вовсе. */
@media (max-width: 700px) {
  #page-promos_admin .pa-head,
  #page-partners_admin .pa-head { flex-wrap: wrap; gap: 8px; }
  #page-promos_admin .pa-head > .dim,
  #page-partners_admin .pa-head > .dim,
  #page-partners_admin .pa-head > #apSearch { flex: 1 1 100%; }
  #page-partners_admin .pa-head > .seg { flex: 1 1 100%; }
}

/* Сколько роздано — строкой над списком. Числа оранжевые, потому что это
   расход: они должны читаться раньше названий акций, а не после. */
.pa-sum {
  font-size: var(--fs-cap); color: var(--tx-2); line-height: 1.5;
  margin: -6px 0 12px; padding: 9px 12px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid var(--line);
}
.pa-sum b { font-variant-numeric: tabular-nums; }

.pa-list { display: grid; gap: 8px; }
.pa-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px;
  align-items: center;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid var(--line);
}
@media (max-width: 1100px) { .pa-row { grid-template-columns: 1fr auto auto; } }
@media (max-width: 900px) { .pa-row { grid-template-columns: 1fr; } }
.pa-main { min-width: 0; display: grid; gap: 3px; }
.pa-main small { font-size: var(--fs-micro); }
.pa-terms { font-size: var(--fs-micro); }
.pa-when { font-size: var(--fs-micro); }
/* Пересечение с соседней акцией. Не ошибка и не запрет — законный сценарий,
   о котором список обязан сообщить, не дожидаясь, пока его откроют на правку. */
.pa-clash {
  font-size: var(--fs-micro); color: #ffb765; cursor: help;
  margin-top: 2px;
}
.pa-clash::before { content: "⚠ "; }

/* Три числа расхода в строке акции. Подпись над числом, а не рядом: в
   ряду одинаковых сумм без подписи не разобрать, где выдано, а где
   отыграно, а это два разных ответа на два разных вопроса. */
.pa-nums { display: flex; gap: 16px; }
.pa-nums span { display: grid; gap: 1px; justify-items: end; }
.pa-nums i {
  font-style: normal; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx-3);
}
.pa-nums b { font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .pa-nums { justify-content: flex-start; }
  .pa-nums span { justify-items: start; }
}
.pa-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.pa-status {
  font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  color: var(--tx-3); background: var(--panel-3); border: 1px solid var(--line);
}
.pa-status.active { color: #0b1a10; background: linear-gradient(160deg, #7dffb0, #35d07f); }
.pa-status.paused { color: #120a02; background: linear-gradient(160deg, var(--or-hot), var(--or-3)); }
.pa-row.archived { opacity: .5; }
/* Черновик приглушён, но читаем: он лежит в одном списке с боевой акцией
   и до сих пор выглядел так же. */
.pa-row.draft { opacity: .62; border-style: dashed; }
#page-promos_admin .pc-chips { margin-bottom: 12px; }

/* Предупреждение перед сохранением. Предупреждаем, не запрещаем:
   пересечение акций — законный сценарий, и решает его человек. */
.pa-warn {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r);
  background: rgba(255, 138, 0, .07); border: 1px solid rgba(255, 138, 0, .35);
}
.pa-warn p { margin: 0 0 6px; font-size: var(--fs-cap); line-height: 1.5; color: var(--tx-2); }
.pa-warn p:last-of-type { margin-bottom: 0; }

/* Полоса бюджета. Оранжевая с 90%, красная при исчерпании: цифру в ряду
   одинаковых строк не замечают, а цвет виден, не читая. */
.pa-budget {
  position: relative; margin-top: 4px; padding: 3px 7px; border-radius: 5px;
  overflow: hidden; background: var(--panel-3); border: 1px solid var(--line);
}
.pa-budget i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: linear-gradient(90deg, rgba(53, 208, 127, .30), rgba(53, 208, 127, .16));
}
.pa-budget span {
  position: relative; font-size: var(--fs-micro); color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}
.pa-budget.warn i {
  background: linear-gradient(90deg, rgba(255, 138, 0, .38), rgba(255, 138, 0, .18));
}
.pa-budget.over i {
  background: linear-gradient(90deg, rgba(255, 77, 94, .40), rgba(255, 77, 94, .20));
}
.pa-budget.over span { color: #ff9aa4; }

.pa-form { display: grid; gap: 10px; }
.pa-form .split { gap: 10px; }
/* Форма в две колонки. Двадцать полей одним столбцом на экране в 2500px —
   это прокрутка ради прокрутки; превью при этом лежало в самом низу и
   обновлялось там, куда не смотрят. */
.modal:has(.pa-form) { max-width: 1180px; }
.pa-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.pa-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.pa-side {
  display: grid; gap: 8px; align-content: start;
  position: sticky; top: 0; align-self: start;
}
@media (max-width: 1000px) {
  .pa-cols { grid-template-columns: 1fr; }
  .pa-side { position: static; }
}
/* Переключатель в форме. Галка слева от подписи, подсказка под ними обеими:
   в столбце числовых полей чекбокс без этого выглядит полем без значения. */
.pa-form .fld.chk {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 4px 8px; cursor: pointer;
}
.pa-form .fld.chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--or); }
.pa-form .fld.chk > span { font-size: var(--fs-cap); color: var(--tx-2); }
.pa-form .fld.chk small { grid-column: 2; }
.pa-sect {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; color: var(--tx-3); margin-top: 8px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.pa-hint { font-size: var(--fs-cap); line-height: 1.45; }
.pa-form .fld small { font-size: var(--fs-micro); line-height: 1.35; }
.pa-preview { max-width: 340px; }
.pa-stats { display: grid; gap: 10px; }

/* --------------------------------------------------- очередь на разбор */

.ab-list { display: grid; gap: 8px; }
.ab-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid var(--line);
}
/* Связка аккаунтов и возврат депозита — то, что стоит денег. Они выделены,
   потому что в очереди из полусотни строк оператор смотрит первые пять. */
.ab-row.multi_account, .ab-row.deposit_reversal {
  border-color: rgba(255, 77, 94, .38);
}
.ab-main { min-width: 0; display: grid; gap: 3px; }
.ab-main small { font-size: var(--fs-micro); }
.ab-detail { font-size: var(--fs-cap); color: var(--tx-2); }
.pa-status.confirmed { color: #2a0b0e; background: linear-gradient(160deg, #ff9aa4, #ff4d5e); }
.pa-status.cleared { color: #0b1a10; background: linear-gradient(160deg, #7dffb0, #35d07f); }

/* ================================================================ battle pass

   Сезонный прогресс. Пять блоков сверху вниз: герой с таймером, полоса
   прогресса с шестигранником уровня, лента из пятидесяти уровней в два ряда,
   витринные награды и панель заданий.

   Ни одного числа сезона в этом файле нет: и ширина полосы, и количество
   карточек приходят из API. Здесь только то, как это выглядит. */

.bp { display: flex; flex-direction: column; gap: 14px; }

.bp-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 46px 20px; text-align: center;
}
.bp-empty-mark { opacity: .5; }
.bp-empty small { max-width: 420px; }

/* ------------------------------------------------------------------ герой */

/* Герой — две колонки: слева сезон, справа задания. Задания живут здесь, а
   не отдельной панелью внизу: это то, чем игрок занят СЕГОДНЯ, и уводить их
   под пятьдесят карточек ленты значит прятать единственное, что можно
   сделать прямо сейчас. */
.bp-hero {
  position: relative; overflow: hidden;
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal-2);
  box-shadow: var(--edge), var(--shadow);
}
.bp-hero.has-side { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); }
/* Оранжевая заря по нижней кромке — тот же источник света, что у остальных
   панелей: он всегда снизу слева и всегда узкий. */
.bp-hero::after {
  content: ''; position: absolute; inset: auto -10% -60% -10%; height: 120%;
  background: radial-gradient(60% 60% at 20% 100%, var(--or-soft), transparent 70%);
  pointer-events: none;
}
.bp-hero-art {
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  height: 150%; opacity: .22; object-fit: contain; pointer-events: none;
}
/* Панель заданий стоит поверх арта, поэтому арт под ней приглушается ещё:
   иначе прогресс-полоски заданий читаются на роботе, а не на фоне. */
.bp-hero.has-side .bp-hero-art { opacity: .3; }
.bp-hero-in { position: relative; z-index: 1; min-width: 0; }
.bp-hero-side { position: relative; z-index: 1; min-width: 0; }
.bp-hero-tag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bp-code {
  font: 700 var(--fs-micro)/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em;
  color: var(--or-deep); border: 1px solid var(--or-soft);
  padding: 5px 8px; border-radius: var(--r-s);
}
.bp-paused {
  font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx-2); border: 1px dashed var(--line-2);
  padding: 4px 8px; border-radius: var(--r-s);
}
/* Название в две строки: первое слово обычным, остальное акцентом. Разбор
   в battlepass.js — оператор вводит одно название, а не два. */
.bp-title {
  margin: 10px 0 4px; font-size: 42px; line-height: .98; letter-spacing: -.01em;
  text-transform: uppercase;
}
.bp-title em {
  display: block; font-style: normal;
  background: linear-gradient(180deg, var(--or-2), var(--or-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bp-lvl-chip {
  font: 700 10px/1 var(--mono, ui-monospace, monospace); letter-spacing: .1em;
  text-transform: uppercase; color: #140b02;
  background: linear-gradient(180deg, var(--or-2), var(--or-3));
  padding: 5px 8px; border-radius: var(--r-s);
}
.bp-sub {
  font-size: var(--fs-cap); letter-spacing: .16em; text-transform: uppercase;
  color: var(--or-2);
}
.bp-intro { margin: 10px 0 0; max-width: 52ch; font-size: var(--fs-label); }
.bp-hero-row { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.bp-owned {
  display: flex; flex-direction: column; line-height: 1.25;
  padding: 9px 14px; border-radius: var(--r-s);
  border: 1px solid var(--or-soft); background: var(--or-soft);
}
.bp-about { white-space: nowrap; }

/* Таймер — чип под кнопками, а не колонка справа: справа теперь задания, а
   отдельный столбец под одно число забирал бы у героя треть ширины. */
.bp-timer {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding: 8px 14px 8px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(0, 0, 0, .28);
}
.bp-timer.claiming { border-color: var(--or-soft); }
.bp-timer-ic {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--or-soft); color: var(--or-2);
}
.bp-timer-ic svg { width: 18px; height: 18px; }
.bp-timer-in { display: flex; flex-direction: column; line-height: 1.15; }
.bp-timer-in small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.bp-timer-v {
  font: 800 20px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .04em; color: var(--or-2);
  /* Табличные цифры: без них таймер дёргается на каждой смене минуты. */
  font-variant-numeric: tabular-nums;
}
.bp-warn { color: var(--or-hot); font-size: var(--fs-micro); }

/* -------------------------------------------------------- полоса прогресса */

.bp-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal); box-shadow: var(--edge);
}
.bp-bar.guest { justify-content: center; text-align: center; padding: 22px; }

.bp-hex {
  flex: 0 0 auto; width: 62px; height: 70px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--or-2), var(--or-3));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: #140b02; font: 800 24px/1 system-ui, sans-serif;
}
.bp-bar-mid { flex: 1 1 400px; min-width: 0; }
.bp-bar-head { display: flex; gap: 10px; align-items: baseline; }
.bp-bar-head .grow { flex: 1; }
.bp-bar-cap {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--or-deep);
}
.bp-track {
  height: 10px; margin: 8px 0 6px; border-radius: 999px; overflow: hidden;
  background: var(--panel-3); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .5);
}
.bp-track > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--or-3), var(--or-hot));
  box-shadow: var(--glow-soft); transition: width .35s ease;
}
.bp-bar-foot { font-size: var(--fs-cap); margin-top: 8px; }
.bp-bar-side {
  flex: 1 1 360px; min-width: 0; max-width: 520px;
  display: flex; align-items: center;
}
.bp-cta { white-space: nowrap; }

/* Чипы статистики под полосой: подпись сверху, число и пояснение снизу.
   Одной строкой «30 всего в сезоне» число теряется среди слов. */
.bp-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bp-lvl-stat {
  flex: 1 1 96px; min-width: 0; max-width: 220px; display: flex; flex-direction: column; gap: 3px;
  padding: 7px 10px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--panel);
}
.bp-lvl-stat.hot { border-color: var(--or-soft); background: rgba(255, 122, 0, .08); }
.bp-lvl-stat-k {
  display: flex; align-items: center; gap: 5px;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3);
}
.bp-lvl-stat-k .bp-glyph { width: 13px; height: 13px; color: var(--or-deep); }
.bp-lvl-stat.hot .bp-lvl-stat-k { color: var(--or-hot); }
.bp-lvl-stat-v { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.bp-lvl-stat-v b { font-size: 17px; line-height: 1; }
.bp-lvl-stat-v small { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Награда к выдаче — картинкой и названием, а не одной кнопкой: иначе
   игрок идёт искать в ленте, ЧТО именно ему сейчас отдадут. */
.bp-rw-next {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 10px 12px; border-radius: var(--r);
  border: 1px solid var(--or-soft); background: rgba(255, 122, 0, .07);
}
.bp-rw-next.empty {
  flex-direction: column; align-items: stretch; gap: 6px; text-align: center;
  border-color: var(--line); background: var(--panel);
}
.bp-rw-next-art { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; }
.bp-rw-next-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bp-rw-next-art .bp-glyph { width: 32px; height: 32px; }
.bp-rw-next-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bp-rw-next-t > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-rw-next-t small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.bp-rw-next-t b { font-size: var(--fs-ui); }

/* ------------------------------------------------------------ лента уровней */

.bp-rail-wrap {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal); box-shadow: var(--edge); overflow: hidden;
  /* min-width: 0 — не украшение: лента внутри прокручивается по горизонтали,
     и без явного нуля она считает свою минимальную ширину по содержимому,
     то есть по всем пятидесяти карточкам сразу, и выталкивает страницу
     вбок мимо потолка --page-max. */
  min-width: 0;
}
.bp-rail-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.bp-rail-head .grow { flex: 1; }
.bp-nudge {
  width: 30px; height: 30px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--tx);
  font-size: 18px; line-height: 1;
}
.bp-nudge:hover { border-color: var(--or-soft); color: var(--or-2); }

/* Лента и её подпись стоят в строку: подпись не уезжает вместе с
   карточками, иначе игрок, пролиставший до сорокового уровня, перестаёт
   видеть, на какую дорожку смотрит. */
.bp-rail-body { display: flex; align-items: stretch; min-width: 0; }
.bp-rail-label {
  flex: 0 0 124px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 14px 10px; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), transparent);
}
.bp-rail-label b {
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-2); line-height: 1.35;
}
.bp-rail-mark {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; color: var(--or-2);
  background: var(--panel-3); border: 1px solid var(--line-2);
}

.bp-rail {
  flex: 1; min-width: 0;
  display: flex; gap: 8px; padding: 14px; overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Полоса прокрутки видима намеренно: без неё пятьдесят карточек выглядят
     обрезанными, и половина игроков не догадается листать. */
  scrollbar-width: thin;
}
.bp-col {
  flex: 0 0 118px; display: flex; flex-direction: column; gap: 6px;
  scroll-snap-align: center;
}
/* Порог уровня в опыте — шкала под номером. Число приходит не из вёрстки, а
   считается от xp_per_level сезона: оператор вправе поменять порог на живом
   сезоне, и подписанная руками шкала врала бы до первой жалобы. */
.bp-xp {
  font-size: 10px; letter-spacing: .04em; text-align: center;
  color: var(--tx-3); font-variant-numeric: tabular-nums;
}
.bp-col.done .bp-xp { color: var(--or-2); }
.bp-col.now .bp-xp { color: var(--or-hot); font-weight: 800; }

/* Карточка в обёртке: «i» и плашка с номиналом лежат ПОВЕРХ неё. Внутрь их
   класть нельзя — карточка сама бывает кнопкой. */
.bp-cell-wrap { position: relative; display: flex; }
.bp-cell-wrap > .bp-cell { flex: 1; }
.bp-info {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  width: 17px; height: 17px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel-3); color: var(--tx-3);
  font: 700 10px/1 var(--mono, ui-monospace, monospace);
}
.bp-info:hover { border-color: var(--or-soft); color: var(--or-2); }
.bp-badge {
  position: absolute; right: 0; top: 0; z-index: 2;
  padding: 3px 7px; border-radius: 0 var(--r-s) 0 8px;
  background: var(--panel-3); border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 800 10px/1.2 var(--mono, ui-monospace, monospace);
  color: var(--or-2); white-space: nowrap; pointer-events: none;
}
.bp-cell-wrap:has(.bp-cell.ready) .bp-badge { color: var(--or-hot); }

/* Окно «что это за награда» */
.bp-info-body { display: flex; gap: 16px; align-items: flex-start; padding: 4px 2px; }
.bp-info-art { flex: 0 0 72px; height: 72px; display: grid; place-items: center; }
.bp-info-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bp-info-body p { margin: 0 0 8px; font-size: var(--fs-label); line-height: 1.45; color: var(--tx-2); }
.bp-info-body p:last-child { margin-bottom: 0; color: var(--tx-3); font-size: var(--fs-cap); }

@media (max-width: 900px) {
  /* На узком экране подпись дорожки съедает треть ленты — уводим её в
     строку над карточками. */
  .bp-rail-body { flex-direction: column; }
  .bp-rail-label {
    flex: none; flex-direction: row; justify-content: flex-start;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 14px;
  }
  .bp-rail-label b { text-align: left; }
  .bp-rail-mark { width: 30px; height: 30px; border-radius: 9px; }
}
/* Нить с узлами под карточками. Рисуется КАЖДОЙ колонкой, а не одной линией
   на всю ленту: лента прокручивается, и линия, нарисованная поверх неё,
   осталась бы стоять на месте. Перекрытие в 5px закрывает зазор между
   колонками (gap: 8px), стыка не видно. */
.bp-lvl-node { position: relative; height: 16px; margin-top: 2px; }
.bp-lvl-node::before {
  content: ''; position: absolute; left: -5px; right: -5px; top: 50%;
  height: 2px; margin-top: -1px; background: var(--line-2);
}
.bp-lvl-node::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--panel-3); border: 2px solid var(--line-2);
}
.bp-col.done .bp-lvl-node::before { background: var(--or-deep); }
.bp-col.done .bp-lvl-node::after {
  background: var(--or-2); border-color: var(--or-2);
}
.bp-col.now .bp-lvl-node::after {
  background: var(--or-hot); border-color: #fff; box-shadow: var(--glow-soft);
}
.bp-lvl {
  display: grid; place-items: center; height: 26px; border-radius: var(--r-s);
  background: var(--panel-3); color: var(--tx-2);
  font: 700 var(--fs-cap)/1 var(--mono, ui-monospace, monospace);
}
.bp-col.done .bp-lvl { color: var(--tx); background: var(--panel-2); }
.bp-col.now .bp-lvl {
  color: #140b02; background: linear-gradient(180deg, var(--or-2), var(--or-3));
}
.bp-col.now .bp-cell { border-color: var(--or-soft); }

.bp-cell {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  align-items: center; text-align: center;
  padding: 10px 8px; min-height: 118px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--panel); color: var(--tx); font: inherit;
}
button.bp-cell { cursor: pointer; }
.bp-cell.empty { background: transparent; border-style: dashed; opacity: .35; }
.bp-cell.locked, .bp-cell.closed { opacity: .48; }
.bp-cell.taken { border-color: rgba(53, 208, 127, .35); }
.bp-cell.ready {
  border-color: var(--or-deep); box-shadow: var(--glow-mid);
  background: linear-gradient(180deg, rgba(255, 122, 0, .10), transparent);
}
.bp-cell.need_premium { border-style: dashed; border-color: var(--or-soft); }
.bp-cell.premium::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--or-3), var(--or-hot));
  border-radius: var(--r-s) var(--r-s) 0 0;
}
.bp-art { width: 46px; height: 46px; display: grid; place-items: center; }
.bp-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bp-glyph { width: 30px; height: 30px; color: var(--or-2); }
.bp-cell-t {
  font-size: var(--fs-micro); line-height: 1.2; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-cell-tag {
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-3);
}
.bp-cell-tag.ready { color: var(--or-hot); }
.bp-cell-tag.taken { color: var(--green); }
.bp-tick { width: 13px; height: 13px; display: block; }

/* Витринные награды (.bp-marquee) сняты вместе с блоком внизу страницы:
   он повторял карточки ленты второй раз, теми же словами и теми же
   кнопками. Круглые уровни отмечены прямо в ленте. */
.bp-tasks {
  display: flex; flex-direction: column; gap: 8px; margin: 0;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: rgba(10, 10, 12, .72); backdrop-filter: blur(3px);
}
.bp-tasks-head {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.bp-tasks-head b {
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--or-deep);
}
.bp-tasks-head .dim { font-size: 10px; }
.bp-task-list { max-height: 42vh; overflow-y: auto; scrollbar-width: thin; }
.bp-task-list { display: grid; gap: 8px; }
.bp-sect { font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.bp-week { display: grid; gap: 6px; }

.bp-task {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--panel);
}
.bp-task-top b { font-size: var(--fs-cap); }
.bp-task.done { border-color: rgba(53, 208, 127, .3); }
/* Перенесённое со вчера подсвечено намеренно: у него меньше суток на
   закрытие, и оно стоит первым в списке — метка объясняет, почему. */
.bp-task.carried { border-left: 2px solid var(--or-deep); }
.bp-task-top, .bp-task-foot { display: flex; align-items: center; gap: 8px; }
.bp-task-top .grow, .bp-task-foot .grow { flex: 1; }
.bp-task-xp { color: var(--or-2); font-weight: 700; font-size: var(--fs-cap); }
.bp-tag-y {
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--or-deep); border: 1px solid var(--or-soft);
  padding: 2px 5px; border-radius: 4px;
}
.bp-task-track {
  height: 6px; margin: 7px 0; border-radius: 999px; overflow: hidden;
  background: var(--panel-3);
}
.bp-task-track > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--or-3), var(--or-hot));
  transition: width .3s ease;
}
.bp-task.done .bp-task-track > i { background: var(--green); }
.bp-task-wait { font-size: var(--fs-micro); color: var(--tx-2); }

/* ------------------------------------------------------------------ модалки */

.bp-buy-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 14px 0; padding: 12px 14px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--panel-2);
}
.bp-buy-row b { font-size: 20px; color: var(--or-2); }
.bp-about-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 7px; font-size: var(--fs-label); }
.bp-about-list li { color: var(--tx-2); }
.bp-about-list b { color: var(--tx); }
.bp-unlocked {
  display: grid; gap: 4px; max-height: 46vh; overflow-y: auto; margin: 12px 0;
}
.bp-un {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-s); background: var(--panel-2);
}
.bp-un-lvl {
  flex: 0 0 30px; text-align: center; color: var(--or-deep);
  font: 700 var(--fs-cap)/1 var(--mono, ui-monospace, monospace);
}

/* ------------------------------------------------------------------ мобилка */

@media (max-width: 720px) {
  .bp-hero { padding: 18px 14px; gap: 12px; }
  .bp-title { font-size: 22px; }
  .bp-hero-art { opacity: .14; }
  /* Таймер и кнопка покупки остаются видны: это две вещи, ради которых
     раздел открывают с телефона. */
  .bp-timer { align-items: flex-start; text-align: left; min-width: 0; }
  .bp-timer-v { font-size: 21px; }
  .bp-hero-row .btn { flex: 1 1 auto; }
  .bp-bar { gap: 12px; padding: 12px; }
  .bp-bar-side { flex: 1 1 100%; }
  .bp-col { flex-basis: 104px; }
  .bp-rail { padding: 10px; }
  .bp-stats { gap: 10px; }
}

/* Свечения и переходы замирают: то же правило, что у анимированных рамок. */
@media (prefers-reduced-motion: reduce) {
  .bp-track > i, .bp-task-track > i { transition: none; }
  .bp-cell.ready { box-shadow: none; border-color: var(--or-deep); }
  .bp-rail { scroll-behavior: auto; }
}

/* Порог 1300, а не 1080: слева стоит боковое меню шириной около 230px, и
   рабочая область на мониторе 1280 это 818px — на две колонки с панелью
   заданий их не хватает, заголовок сезона перестаёт помещаться в свою.
   Медиазапрос считает ОКНО, а рабочую область он не знает, поэтому вычет
   меню сидит прямо в числе. */
@media (max-width: 1300px) {
  .bp-hero.has-side { grid-template-columns: minmax(0, 1fr); }
  .bp-hero-side { max-width: 520px; }
  .bp-title { font-size: 34px; }
  .bp-task-list { max-height: none; }
  .bp-bar-side { flex: 1 1 100%; }
  .bp-rw-next { flex: 1 1 100%; }
}

/* ------------------------------------------------- battle pass, оператору */

.bpa-list { display: grid; gap: 8px; }
.bpa-warn {
  padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-s);
  border: 1px solid var(--or-soft); background: var(--or-soft);
  font-size: var(--fs-cap); color: var(--or-hot);
}
.bpa-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
}
.bpa-row.live { border-color: var(--or-soft); }
.bpa-row.closed { opacity: .65; }
.bpa-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bpa-tag {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--tx-2);
}
.bpa-tag.live { color: var(--or-hot); border-color: var(--or-soft); }
.bpa-ops { display: flex; gap: 6px; flex-wrap: wrap; }

.bpa-form {
  display: grid; gap: 10px; margin: 12px 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.bpa-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-cap); color: var(--tx-2); }
.bpa-form label.wide { grid-column: 1 / -1; }
.bpa-note { font-size: var(--fs-cap); margin: 6px 0 0; }

/* Редактор сетки — ЭКРАН под списком сезонов, а не модалка: пятьдесят строк
   в модалке это прокрутка внутри прокрутки, и работать с ней нельзя. */
.bpa-grid-pane {
  display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal); box-shadow: var(--edge); min-width: 0;
}
.bpa-gh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bpa-gh .grow { flex: 1; }
.bpa-gh small { display: block; }

/* Живой бюджет. Пересчитывается на каждое изменение и БЕЗ сохранения: до
   этого узнать стоимость сезона можно было только запустив тест, и правка
   «поставим тут кейс подороже» делалась вслепую. */
.bpa-budget {
  padding: 10px 12px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: var(--panel-2);
  font-size: var(--fs-label); color: var(--tx-2);
}
.bpa-budget b { color: var(--tx); }
.bpa-budget.bad { border-color: var(--red); color: var(--red); }
.bpa-budget.bad b { color: var(--red); }

/* Профиль ценности: пятьдесят столбиков высотой по EV уровня. Один взгляд
   вместо прокрутки полусотни строк — видно, что кривая растёт к концу, и
   видно провал из трёх косметик подряд. */
.bpa-profile {
  position: relative; display: flex; align-items: flex-end; gap: 2px;
  height: 74px; padding: 6px 8px 18px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--panel);
}
.bpa-profile i {
  flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; cursor: pointer;
  background: linear-gradient(180deg, var(--or-2), var(--or-deep));
}
.bpa-profile i.mq { background: linear-gradient(180deg, #fff2d0, var(--or-hot)); }
.bpa-profile i.gap { background: var(--red); opacity: .55; }
.bpa-profile i:hover { outline: 1px solid var(--tx); }
.bpa-profile-note {
  position: absolute; left: 8px; bottom: 3px; font-size: 10px;
}

/* Проверки — человеческими фразами, а не кодами: их читает оператор. */
.bpa-problems { display: grid; gap: 3px; font-size: var(--fs-cap); color: var(--red); }
.bpa-problems .ok { color: var(--green); }

.bpa-rows { display: grid; gap: 4px; }
/* Строка уровня — таблица без <table>. Номер слева крупно, дальше вид,
   параметры, подписи, витрина, EV и две кнопки. Строки «добавить» нет:
   уровни не добавляются и не удаляются, их ровно levels штук. */
.bpa-gr {
  display: grid; gap: 6px; align-items: center; padding: 4px 6px;
  border: 1px solid transparent; border-radius: var(--r-s);
  grid-template-columns: 34px 140px minmax(180px, 1.6fr) 1fr 1fr auto 62px 32px 32px;
}
.bpa-gr:nth-child(2n) { background: rgba(255, 255, 255, .02); }
.bpa-gr.empty { border-color: var(--red); background: rgba(232, 67, 63, .07); }
.bpa-gr.bad { border-color: var(--red); }
.bpa-gr.flash { border-color: var(--or-2); background: rgba(255, 122, 0, .12); }
.bpa-gr-lvl {
  font: 700 var(--fs-ui)/1 var(--mono, ui-monospace, monospace); color: var(--tx-2);
  text-align: right;
}
.bpa-gr-params { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.bpa-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 90px; }
.bpa-f > span { font-size: 9px; letter-spacing: .04em; color: var(--tx-3); }
.bpa-gr-ev {
  font: 600 var(--fs-cap)/1 var(--mono, ui-monospace, monospace); color: var(--tx-2);
  text-align: right;
}
.bpa-gr-ev.bad { color: var(--red); }
.bpa-gr input, .bpa-gr select {
  min-width: 0; padding: 5px 7px; font-size: var(--fs-cap);
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--panel-2); color: var(--tx);
}
.bpa-gr input.bad { border-color: var(--red); }
.bpa-mq { display: flex; align-items: center; gap: 4px; font-size: var(--fs-micro); color: var(--tx-2); }

/* «Как увидит игрок»: настоящая карточка ленты рядом с пояснением. */
.bpa-peek { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0; }
.bpa-peek .bp-col { flex: 0 0 138px; }
.bpa-peek-side { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 1100px) {
  .bpa-gr { grid-template-columns: 30px 120px 1fr auto 56px 30px 30px; }
  .bpa-gr .bpa-gr-t { grid-column: 1 / -1; }
}

/* ========================================================= таблица лидеров

   Пьедестал: три колонки, средняя выше и шире. Порядок в разметке 2-1-3 —
   он же порядок на экране, поэтому grid ничего не переставляет, и вкладка
   ходит по местам слева направо.

   Ширины заданы долями, а не пикселями: на широком мониторе пьедестал
   растягивается вместе с колонкой, на узком складывается в столбец. */

.lb { display: grid; gap: 18px; }

.lb-podium {
  display: grid; grid-template-columns: 1fr 1.22fr 1fr;
  align-items: end; gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(18px, 3vw, 34px) clamp(12px, 2vw, 26px) 0;
  border: 1px solid var(--line); border-radius: var(--r);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 122, 0, .10), transparent 62%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  overflow: hidden;
}

.lb-load { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--tx-2); }

.lb-p { display: grid; align-content: end; gap: 12px; min-width: 0; }

/* ---- записи над тумбой ---- */

.lb-recs { display: grid; gap: 8px; min-width: 0; }
.lb-rec {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: rgba(5, 6, 8, .55); min-width: 0;
}
.lb-rec-k {
  font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tx-3); margin-bottom: 5px;
}
/* Скин в записи: картинка слева, подписи справа. minmax(0,1fr) обязателен —
   без него длинное имя распирает колонку вместо того, чтобы обрезаться. */
.lb-rec-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.lb-rec-meta { min-width: 0; }
.lb-rec-n {
  font-size: var(--fs-label); font-weight: 700; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Рамка под картинку скина. Фиксированный размер и у пустой тоже: иначе
   строки без картинки становятся ниже соседних и список рвётся. */
.lb-pic {
  display: grid; place-items: center; flex: none;
  border-radius: var(--r-s); background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line); overflow: hidden;
}
.lb-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-pic-mid { width: 56px; height: 42px; }
.lb-pic-sm  { width: 44px; height: 34px; }
.lb-pic-none { background: repeating-linear-gradient(45deg,
  rgba(255,255,255,.02) 0 6px, transparent 6px 12px); }
.lb-rec-v {
  font-size: 16px; font-weight: 900; color: var(--or-2);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.lb-rec-w { font-size: var(--fs-micro); color: var(--tx-3); margin-top: 2px; }
.lb-rec-empty { color: var(--tx-3); font-size: var(--fs-cap); text-align: center; }

/* ---- тумба ---- */

.lb-stand {
  position: relative; display: grid; justify-items: center; gap: 5px;
  padding: 46px 12px 14px;
  border: 1px solid var(--line-2); border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(180deg, var(--panel-3), var(--panel));
}
/* Высота тумбы и есть место: первое выше остальных, третье ниже второго.
   Разница в высоте — единственный способ показать порядок без подписей. */
.lb-p1 .lb-stand { padding-top: 58px; padding-bottom: 40px; }
.lb-p2 .lb-stand { padding-bottom: 22px; }
.lb-p3 .lb-stand { padding-bottom: 12px; }

.lb-name {
  font-size: var(--fs-label); font-weight: 800; color: var(--tx);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-won {
  display: grid; justify-items: center; font-size: var(--fs-body); font-weight: 900;
  color: var(--or-2); font-variant-numeric: tabular-nums;
}
.lb-won small {
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-3);
}
/* Номер места — крупной цифрой в основании тумбы. Не фоном: цифра в 5%
   белого читается как грязь на градиенте, а не как номер. */
.lb-place {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font: 900 clamp(26px, 3.4vw, 44px)/1 'Segoe UI', system-ui, sans-serif;
  color: rgba(255, 255, 255, .13); pointer-events: none; letter-spacing: -.02em;
}

/* ---- первое место ---- */

/* Золото не заливкой, а свечением по краю: сплошная золотая тумба спорит с
   оранжевым интерфейсом и вытягивает на себя весь экран. */
.lb-p1 .lb-stand {
  border-color: rgba(255, 199, 94, .45);
  background: linear-gradient(180deg, rgba(255, 181, 46, .16), var(--panel));
  box-shadow: 0 -18px 46px -12px rgba(255, 181, 46, .35),
              inset 0 1px 0 rgba(255, 214, 128, .35);
}
.lb-p1 .lb-place { color: rgba(255, 199, 94, .38); }
.lb-p1 .lb-won { color: #ffc75e; }
.lb-p1 .lb-rec { border-color: rgba(255, 199, 94, .26); }

/* ---- аватар ---- */

.lb-ava {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: var(--panel-3);
  border: 2px solid var(--line-2); line-height: 0;
}
.lb-ava img { width: 100%; height: 100%; object-fit: cover; }
.lb-ava-big { width: 88px; height: 88px; }
.lb-ava-mid { width: 68px; height: 68px; }
.lb-p1 .lb-ava {
  border-color: #ffc75e;
  box-shadow: 0 0 0 4px rgba(255, 199, 94, .16), 0 0 26px rgba(255, 181, 46, .45);
}
.lb-p2 .lb-ava { border-color: #c3ccd8; }
.lb-p3 .lb-ava { border-color: #cd8b52; }

/* Запасной кружок с буквой — для игрока без картинки Steam. */
.lb-ava-letter {
  font: 900 26px/1 'Segoe UI', system-ui, sans-serif; color: #fff;
  background: linear-gradient(160deg,
    hsl(var(--h) 45% 34%), hsl(var(--h) 45% 18%));
}
.lb-ava-big.lb-ava-letter { font-size: 34px; }

/* Свободное место: низкая тумба и приглушённая подпись. Полноразмерная
   пустая карточка перетягивала на себя внимание сильнее занятых. */
.lb-p-empty .lb-stand {
  padding: 18px 12px 26px; opacity: .5;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
  border-style: dashed;
}
.lb-p-empty .lb-name { color: var(--tx-3); font-weight: 600; font-size: var(--fs-cap); }

/* ------------------------------------------------------------ список */

.lb-rest h3 { margin-bottom: 12px; }
.lb-scroll { overflow-x: auto; }
.lb-tbl { min-width: 720px; }
.lb-r-num { width: 40px; color: var(--tx-3); font-weight: 800; }
.lb-r-who { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.lb-r-who .lb-ava { position: static; transform: none; }
.lb-ava-sm { width: 28px; height: 28px; border-width: 1px; }
.lb-ava-sm.lb-ava-letter { font-size: var(--fs-cap); }
.lb-r-skinbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; }
.lb-r-skinmeta { min-width: 0; }
.lb-r-skinmeta b {
  display: block; font-size: var(--fs-label); font-weight: 700; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-r-skin small, .lb-r-skinmeta small { display: block; color: var(--tx-3); font-size: var(--fs-micro); }
.lb-r-cash { white-space: nowrap; }
.lb-r-cash b { display: block; font-weight: 800; color: var(--or-2); font-variant-numeric: tabular-nums; }
.lb-r-cash small { display: block; color: var(--tx-3); font-size: var(--fs-micro); }
.lb-r-won { color: var(--or-2); font-weight: 800; }

/* ------------------------------------------------------- узкий экран */

/* Ниже 780px пьедестал не читается: три колонки по трети экрана обрезают и
   имена, и записи. Складываем в столбец по порядку мест — 1, 2, 3. */
@media (max-width: 780px) {
  .lb-podium { grid-template-columns: 1fr; padding-bottom: 18px; }
  .lb-p1 { order: -1; }
  .lb-stand, .lb-p1 .lb-stand, .lb-p2 .lb-stand, .lb-p3 .lb-stand {
    padding-bottom: 16px; border-radius: var(--r); border-bottom: 1px solid var(--line-2);
  }
  .lb-place { font-size: 30px; }
}

/* ============================================================ чат витрины

   Резерв под чат статический: на широком экране у контента всегда есть
   правый отступ в --chat-reserve, занят он или нет. Динамический отступ,
   стоявший здесь раньше, двигал вёрстку на каждом щелчке — пьедестал в
   «Топе» прыгал, карточки кейсов перестраивались.

   Резерв НЕ покрывает всю ширину панели, и это осознанно: развёрнутый чат
   слегка заходит на баннеры. Полный резерв под панель в 380px съедал бы у
   контента почти четыреста пикселей всё время, ради блока, который открыт
   не всегда. Наезд не мешает: чат сворачивается одним щелчком, и страница
   сразу видна целиком.

   Свёрнутая панель — это только шапка в углу, она не перекрывает ничего.
   Развёрнутая тянется вверх почти на всю высоту экрана: лента чата тем и
   полезна, что в ней видно много строк сразу.

   Слой 90 выбран осознанно: ниже модалки (150), тоста (200) и конфетти
   (300). Чат не имеет права перекрыть то, что игрок открыл сам, — а вот
   баннеры и карточки страницы лежат ниже, и над ними он висеть должен,
   иначе смысла в плавающей панели нет. */

:root {
  --chat-w: 380px;       /* по умолчанию — широкая панель */
  --chat-max: 460px;     /* потолок ползунка */
  --chat-min: 240px;
  /* Резерв заметно меньше ширины панели: остаток она перекрывает. См.
     пояснение выше — это компромисс в пользу ширины контента. */
  --chat-reserve: 200px;
  /* Высота ленты по умолчанию — почти весь экран. Панель прижата к низу и
     растёт вверх, поэтому упирается в шапку, а не вылезает за экран. */
  --chat-h-default: calc(100vh - 190px);
}

.chat {
  position: fixed; right: 16px; z-index: 90;
  /* Низ считается от таббара: на мобильном он есть и равен --tabbar-h, на
     десктопе переменной нет и остаётся один отступ. */
  bottom: calc(var(--tabbar-h, 0px) + 16px);
  width: var(--chat-w); max-width: calc(100vw - 32px);
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  overflow: hidden;
}

.ch-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  font: 800 var(--fs-micro)/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2);
  border-bottom: 1px solid var(--line-2);
}
.ch-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

/* Сворачивание идёт по max-height, а не по grid-треку 0fr: у fr-трека
   минимум по умолчанию — высота содержимого, и свёрнутая панель выходила
   ВЫШЕ развёрнутой. max-height ведёт себя предсказуемо и анимируется. */
.ch-log {
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 9px; align-content: start;
  max-height: 0; padding: 0 12px;
  transition: max-height var(--t-ui, .22s) ease, padding var(--t-ui, .22s) ease;
}
.chat.open .ch-log { max-height: var(--chat-h, var(--chat-h-default)); padding: 11px 12px; }

.ch-msg { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; }
.ch-ava {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 800 10px/1 'Segoe UI', system-ui, sans-serif; color: #fff;
  background: linear-gradient(160deg, hsl(var(--h) 45% 36%), hsl(var(--h) 45% 20%));
}
.ch-body { min-width: 0; }
.ch-nick {
  display: block; font-size: var(--fs-micro); font-weight: 800; color: var(--or-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-text { display: block; font-size: var(--fs-label); color: var(--tx-2); word-break: break-word; }
.ch-t { font-size: 10px; color: var(--tx-3); font-variant-numeric: tabular-nums; }

/* Своё сообщение: другой цвет ника и подсветка слева, чтобы в общей ленте
   было видно, где писал ты сам. */
.ch-msg.me .ch-nick { color: var(--green); }
.ch-msg.me { border-left: 2px solid var(--green); padding-left: 8px; margin-left: -10px; }

/* ---- поле ввода ----

   Форма живёт ВНЕ .ch-log, поэтому не уезжает вместе с прокруткой ленты и
   не участвует в сворачивании по max-height: свёрнутый чат прячет и её. */
.ch-form {
  display: none; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--line-2);
}
.chat.open .ch-form { display: flex; }
.ch-input {
  flex: 1; min-width: 0; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: rgba(0, 0, 0, .35); color: var(--tx);
  font: 500 var(--fs-label)/1.2 'Segoe UI', system-ui, sans-serif;
}
.ch-input::placeholder { color: var(--tx-3); }
.ch-input:focus { outline: none; border-color: var(--or-soft); }
.ch-send {
  flex: none; width: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: rgba(255, 122, 0, .12); color: var(--or-2); cursor: pointer;
  transition: background var(--t-micro), color var(--t-micro);
}
.ch-send svg { width: 15px; height: 15px; }
.ch-send:hover { background: rgba(255, 122, 0, .22); color: var(--or-hot); }

/* Пункт-действие в боковом меню (сейчас это «Колесо»). Выглядит как
   обычный пункт, но никуда не ведёт — подсветку активного не получает. */
.nav-btn.nav-act { cursor: pointer; }

/* Ручка размера — в левом верхнем углу. Именно там, потому что панель
   прижата к правому нижнему: тянуть за противоположный угол естественно, и
   якорь при этом не двигается. */
.ch-grip {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px;
  cursor: nwse-resize; z-index: 2; touch-action: none;
  background:
    linear-gradient(135deg, transparent 46%, var(--tx-3) 46%, var(--tx-3) 54%, transparent 54%),
    linear-gradient(135deg, transparent 66%, var(--tx-3) 66%, var(--tx-3) 74%, transparent 74%);
  opacity: .5; transition: opacity var(--t-micro);
}
.ch-grip:hover, .chat.resizing .ch-grip { opacity: 1; }
/* Пока тянут — переходы выключены, иначе панель едет за курсором с
   задержкой и «отстаёт» от руки. */
.chat.resizing, .chat.resizing .ch-log { transition: none; }

/* Стрелка внизу панели: рука уже там, когда лента дочитана. */
.ch-toggle {
  display: grid; place-items: center; height: 26px; width: 100%;
  border: 0; border-top: 1px solid var(--line-2); cursor: pointer;
  background: rgba(255, 255, 255, .02); color: var(--tx-2);
  transition: background var(--t-micro), color var(--t-micro);
}
.ch-toggle:hover { background: rgba(255, 255, 255, .06); color: var(--tx); }
.ch-toggle svg { width: 16px; height: 16px; transition: transform var(--t-ui, .22s); }
/* Развёрнут — стрелка вниз (свернуть), свёрнут — вверх (развернуть). */
.chat:not(.open) .ch-toggle svg { transform: rotate(180deg); }

/* Резерв под чат. Отступ у .content, а не у .shell: боковое меню прижато к
   левому краю и двигать его незачем.

   Ни transition, ни зависимости от класса: отступ постоянный, поэтому
   вёрстка не шевелится ни при открытии чата, ни при смене его размера. */
@media (min-width: 1200px) {
  .content { padding-right: var(--chat-reserve); }
}

/* Совсем узкий экран: панель во всю ширину, но по-прежнему над таббаром. */
@media (max-width: 480px) {
  .chat { right: 12px; left: 12px; width: auto; }
  .chat.open .ch-log { max-height: 38vh; }
}

/* Печать и «меньше движения»: анимация разворота не несёт информации. */
@media (prefers-reduced-motion: reduce) {
  .chat, .ch-log, .ch-toggle svg { transition: none; }
}

/* ====================================================== страница колеса

   Раскладка из макета: подпись сверху, маскот слева, барабан по центру,
   легенда карточками под ними. Барабан и легенда рисуются той же функцией,
   что и в модалке (loyalty.js, wheelInner) — здесь только обёртка. */

.whp { display: grid; gap: 18px; }

.whp-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r);
  background:
    radial-gradient(120% 90% at 10% 20%, rgba(255, 122, 0, .10), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}
.whp-title {
  margin: 0; font: 900 clamp(22px, 3.4vw, 34px)/1.05 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--or-hot), var(--or-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Маскот в своей колонке, барабан в своей. minmax(0,1fr) обязателен:
   без него барабан распирает сетку и уезжает под чат. */
.whp-stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px;
  align-items: center;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.whp-mascot { width: clamp(120px, 14vw, 210px); line-height: 0; }
.whp-mascot img, .whp-mascot svg { display: block; width: 100%; height: auto; }
.whp-wheel { min-width: 0; display: grid; gap: 16px; justify-items: center; }

/* Легенда: сетка карточек вместо тесного ряда в модалке. auto-fit — чтобы
   восемь призов сами перестроились на узком экране. */
.whp .wh-prizes { width: 100%; }
.whp .wh-prizes h4 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 700 var(--fs-micro)/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tx-2);
}
.whp .wh-list {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.whp .wh-item {
  display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: 16px 10px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: linear-gradient(180deg, var(--panel-2), var(--card));
  transition: border-color var(--t-micro), transform var(--t-micro);
}
.whp .wh-item:hover { border-color: var(--or-soft); transform: translateY(-2px); }
.whp .wh-item .wh-ic { width: 54px; height: 54px; }
.whp .wh-item small { color: var(--tx-2); font-size: var(--fs-cap); line-height: 1.35; }

.whp-empty {
  padding: 60px 20px; text-align: center; color: var(--tx-2);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
}

/* Ниже 900px маскот уходит: барабан занимает всю ширину, и фигура рядом с
   ним налезала бы на сектора. */
@media (max-width: 900px) {
  .whp-stage { grid-template-columns: 1fr; padding: 18px 14px; }
  .whp-mascot { display: none; }
}

/* =================================================== ставки сыгранного раунда

   Окно, которое открывается по клику на плашку истории. Раньше там сразу
   разворачивалась проверка честности — экран для спора о результате, а не
   для того, чтобы посмотреть, кто как сыграл. Проверка осталась кнопкой
   внизу. */

.crr { display: grid; gap: 12px; }
/* Таблица прокручивается внутри себя: раундов на тридцать игроков хватает,
   а окно модалки растягивать на весь экран нельзя. */
.crr-scroll { max-height: min(56vh, 460px); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); }
.crr-tbl { width: 100%; min-width: 440px; }
.crr-tbl th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); }
.crr-tbl td { vertical-align: middle; }
.crr-tbl tr.me { background: rgba(255, 122, 0, .07); }

.crr-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.crr-who img, .crr-ava {
  width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover;
}
.crr-ava {
  display: grid; place-items: center; font-style: normal;
  font: 800 var(--fs-micro)/1 'Segoe UI', system-ui, sans-serif; color: #fff;
  background: linear-gradient(160deg, var(--panel-3), var(--panel));
}
.crr-who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.crr-x {
  display: inline-block; padding: 4px 9px; border-radius: var(--r-s);
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  color: var(--green); font-weight: 800; font-variant-numeric: tabular-nums;
}
.crr-res.win { color: var(--green); font-weight: 800; }
.crr-res.lose { color: var(--tx-3); }

.crr-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.crr-sum {
  padding: 5px 10px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--panel-2);
  font: 700 var(--fs-micro)/1 'Segoe UI', system-ui, sans-serif; color: var(--tx-2);
  white-space: nowrap;
}

/* Предупреждение о лимите ставки. Стоит над кнопкой: причину отказа игрок
   обязан прочесть до нажатия, а не получить тостом после. */
.bp-warn {
  margin: 0; padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
  border-radius: var(--r-s);
  background: rgba(255, 77, 94, .10);
  color: var(--red); font-size: var(--fs-label); line-height: 1.35;
}

/* ============================================================ текстовые разделы

   Помощь, вопросы, правила, контакты, ответственная игра. Семь страниц с
   одной шапкой и одной сеткой: игрок, перешедший из «Политики cookie» в
   «Ответственную игру», не должен решать, что попал на другой сайт.

   Ширина строки ограничена сознательно. Правила, набранные во всю ширину
   монитора, не читаются: глаз теряет начало следующей строки. */

.page.info { max-width: 1120px; margin-inline: auto; }

.i-hero { text-align: center; padding: 26px 0 30px; }
.i-hero h1 {
  margin: 0; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06;
  font-weight: 900; letter-spacing: .01em; text-transform: uppercase;
}
/* Вторая строка заголовка — оранжевая и отдельной строкой: так набраны
   заголовки разделов в макете, и так же читается главное слово. */
.i-hero h1 em {
  display: block; font-style: normal;
  color: var(--or-deep);
  text-shadow: 0 0 34px rgba(252, 108, 5, .35);
}
.i-hero p {
  margin: 14px auto 0; max-width: 62ch;
  font-size: var(--fs-ui); line-height: 1.6; color: var(--tx-2);
}

.i-h2 {
  margin: 32px 0 16px;
  font-size: var(--fs-cap); font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx-3);
}

.i-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.i-notes .notice { margin: 0; }

.i-ic {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.i-link, .i-mail {
  color: var(--or-deep); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--or-deep) 40%, transparent);
  transition: color var(--t-micro), border-color var(--t-micro);
}
.i-link:hover, .i-mail:hover { color: var(--or-2); border-color: var(--or-2); }

.i-list { margin: 0; padding-left: 18px; color: var(--tx-2); line-height: 1.7; }
.i-list li { margin-bottom: 6px; }

.i-tbl { width: 100%; margin-top: 6px; }
.i-tbl td { vertical-align: top; line-height: 1.55; }

/* ---------------------------------------------------------- документ

   Оглавление слева липкое: в правилах четырнадцать разделов, и «вернуться к
   списку» прокруткой вверх — это лишняя работа на каждый переход. */

.i-doc {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px;
  align-items: start;
}
.dc-toc {
  position: sticky; top: calc(var(--tb-h) + 16px);
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal-a); box-shadow: var(--edge);
}
.dc-toc-h {
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3); margin-bottom: 8px;
}
.dc-link {
  padding: 6px 8px; border-radius: var(--r-s);
  color: var(--tx-2); text-decoration: none; font-size: var(--fs-label); line-height: 1.35;
  border-left: 2px solid transparent;
  transition: color var(--t-micro), background var(--t-micro),
              border-color var(--t-micro);
}
.dc-link:hover {
  color: var(--tx); background: var(--panel);
  border-left-color: var(--or-deep);
}
.dc-upd {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); color: var(--tx-3);
}

.dc-body {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px 26px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal-a); box-shadow: var(--edge);
}
.dc-sec { scroll-margin-top: calc(var(--tb-h) + 20px); }
.dc-sec h2 {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--tx);
}
/* Номер раздела — не украшение: по нему ссылаются в переписке с поддержкой,
   и он обязан быть виден рядом с заголовком, а не только в оглавлении. */
.dc-sec h2 i {
  font-style: normal; font-size: var(--fs-micro); font-weight: 900; letter-spacing: .08em;
  color: var(--or-deep);
}
.dc-sec p {
  margin: 0 0 10px; max-width: 78ch;
  font-size: var(--fs-ui); line-height: 1.72; color: var(--tx-2);
}
.dc-sec p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- вопросы и ответы

   Слева группы, справа список. Аккордеон на <details>: он открывается без
   единой строки скрипта, ищется браузерным поиском по странице и слушается
   клавиатуры — три вещи, которые самодельный аккордеон теряет первым же
   делом. */

.faq-body {
  display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 20px;
  align-items: start; margin-top: 18px;
}
.faq-rail { display: flex; flex-direction: column; gap: 8px; }
.faq-cat {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--metal-a);
  color: var(--tx-2); font: 700 var(--fs-ui)/1.2 'Segoe UI', system-ui, sans-serif;
  text-align: left; cursor: pointer;
  box-shadow: var(--edge);
  transition: color var(--t-micro), border-color var(--t-micro),
              background var(--t-micro);
}
.faq-cat:hover { color: var(--tx); border-color: var(--line-2); }
.faq-cat.on {
  color: var(--or-2);
  border-color: color-mix(in srgb, var(--or-deep) 55%, transparent);
  background: linear-gradient(90deg, var(--or-soft), transparent 70%), var(--panel-2);
  box-shadow: var(--glow-soft);
}
.faq-cat .i-ic { width: 18px; height: 18px; }

.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-q {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal-a); box-shadow: var(--edge);
  transition: border-color var(--t-micro);
}
.faq-q[open] {
  border-color: color-mix(in srgb, var(--or-deep) 45%, transparent);
  background: linear-gradient(180deg, rgba(252, 108, 5, .05), transparent 40%),
              var(--metal-a);
}
.faq-q summary {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; cursor: pointer; list-style: none;
  font-size: var(--fs-ui); color: var(--tx);
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary b { font-weight: 700; flex: 1; min-width: 0; }

/* Плюс превращается в минус поворотом одной палочки — и делает это тем же
   переходом, что и стрелка справа: два разных знака одного состояния обязаны
   меняться одновременно. */
.fq-sign {
  position: relative; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--or-deep) 50%, transparent);
  background: rgba(252, 108, 5, .1);
}
.fq-sign::before, .fq-sign::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  translate: -50% -50%; background: var(--or-deep);
}
.fq-sign::before { width: 11px; height: 1.6px; }
.fq-sign::after {
  width: 1.6px; height: 11px;
  transition: transform var(--t-ui), opacity var(--t-ui);
}
.faq-q[open] .fq-sign::after { transform: scaleY(0); opacity: 0; }
.faq-q[open] .fq-sign {
  background: var(--or-deep);
  border-color: var(--or-deep);
}
.faq-q[open] .fq-sign::before { background: #150a01; }

.fq-chev {
  flex: none; width: 8px; height: 8px;
  border-right: 1.6px solid var(--tx-3); border-bottom: 1.6px solid var(--tx-3);
  rotate: -45deg; transition: rotate var(--t-ui), border-color var(--t-micro);
}
.faq-q[open] .fq-chev { rotate: 45deg; border-color: var(--or-deep); }
.faq-q summary:hover .fq-chev { border-color: var(--tx-2); }

.fq-a {
  padding: 0 18px 16px 57px;
  animation: fade var(--t-ui) ease;
}
.fq-a p {
  margin: 0; max-width: 80ch;
  font-size: var(--fs-ui); line-height: 1.7; color: var(--tx-2);
}

/* ---------------------------------------------------------- ответственная игра

   Сверху правила, ниже инструменты, которые эти правила исполняют. Порядок
   не косметический: совет без кнопки — это листовка, а кнопка без совета —
   это настройка, до которой не доходят руки.

   Самоисключение отделено красным: это единственное действие на сайте,
   которое нельзя отменить ни игроку, ни поддержке. */

.rg-rules {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin-top: 8px;
}
.rg-card {
  padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal-a); box-shadow: var(--edge);
}
.rg-ic {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
  color: var(--or-deep); background: rgba(252, 108, 5, .12);
  border: 1px solid color-mix(in srgb, var(--or-deep) 32%, transparent);
}
.rg-ic .i-ic { width: 18px; height: 18px; }
.rg-card b { display: block; font-size: var(--fs-body); margin-bottom: 8px; color: var(--tx); }
.rg-card p { margin: 0; font-size: var(--fs-label); line-height: 1.6; color: var(--tx-2); }

.rg-tools {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-top: 14px;
}
.rg-tool {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--metal-2); box-shadow: var(--edge);
}
.rg-tool.danger { border-color: color-mix(in srgb, var(--red) 38%, transparent); }
/* Кнопка блокировки не растягивается на всю карточку: действие необратимое,
   и кнопка во всю ширину читается как «главное действие страницы», каким оно
   быть не должно. */
.rg-tool .btn.danger { align-self: flex-start; }
.rg-kind {
  font-size: 10px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--or-deep);
}
.rg-tool.danger .rg-kind { color: var(--red); }
.rg-tool h3 {
  margin: 0; font-size: 16px; font-weight: 800; color: var(--tx);
  letter-spacing: 0; text-transform: none;
}
.rg-tool p { margin: 0; font-size: var(--fs-label); line-height: 1.6; color: var(--tx-2); flex: 1; }
.rg-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rg-chip {
  padding: 9px 14px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: var(--panel);
  color: var(--tx); font: 700 var(--fs-label)/1 'Segoe UI', system-ui, sans-serif;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color var(--t-micro), color var(--t-micro),
              background var(--t-micro), box-shadow var(--t-micro);
}
.rg-chip:hover {
  color: var(--or-2); background: var(--panel-2);
  border-color: color-mix(in srgb, var(--or-deep) 60%, transparent);
  box-shadow: var(--glow-soft);
}
.rg-more {
  align-self: flex-start; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--tx-3); font-size: var(--fs-cap); text-align: left;
  border-bottom: 1px dashed var(--line-2);
  transition: color var(--t-micro), border-color var(--t-micro);
}
.rg-more:hover { color: var(--or-2); border-color: var(--or-2); }

.rg-low {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-top: 14px;
}
.rg-signs h3, .rg-age h3 {
  font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: var(--tx);
  margin-bottom: 12px;
}
.rg-signs ul { margin: 0; padding: 0; list-style: none; }
.rg-signs li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  font-size: var(--fs-label); line-height: 1.6; color: var(--tx-2);
}
/* Тире вместо точки: список признаков — это перечисление, а не шаги, и
   маркер-кружок читался бы как «сделай по порядку». */
.rg-signs li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 11px; height: 1.5px; background: var(--or-deep); opacity: .8;
}
.rg-age { position: relative; }
.rg-age-badge {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: 12px;
  font: 900 var(--fs-label)/1 'Segoe UI', system-ui, sans-serif; color: var(--or-deep);
  border: 2px solid var(--or-deep); background: rgba(252, 108, 5, .1);
}
.rg-age p { margin: 0 0 10px; font-size: var(--fs-label); line-height: 1.65; color: var(--tx-2); }
.rg-age p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- центр помощи */

.hl-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.hl-step {
  position: relative; padding: 20px 18px 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--metal-a); box-shadow: var(--edge);
}
/* Номер шага крупный и приглушённый: он задаёт порядок чтения, но не спорит
   с заголовком за внимание. */
.hl-n {
  position: absolute; right: 14px; top: 10px;
  font: 900 30px/1 'Segoe UI', system-ui, sans-serif;
  color: rgba(255, 255, 255, .05);
}
.hl-ic {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px; margin-bottom: 13px;
  color: var(--or-deep); background: rgba(252, 108, 5, .12);
}
.hl-ic .i-ic { width: 17px; height: 17px; }
.hl-step b { display: block; font-size: var(--fs-ui); margin-bottom: 7px; color: var(--tx); }
.hl-step p { margin: 0; font-size: var(--fs-label); line-height: 1.6; color: var(--tx-2); }

.hl-topics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.hl-topic {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--metal-a);
  color: var(--tx-2); cursor: pointer; text-align: left;
  box-shadow: var(--edge);
  transition: border-color var(--t-micro), background var(--t-micro),
              box-shadow var(--t-micro);
}
.hl-topic .i-ic { width: 20px; height: 20px; color: var(--or-deep); }
.hl-topic b { font-size: var(--fs-ui); color: var(--tx); }
.hl-topic span { font-size: var(--fs-cap); color: var(--tx-3); }
.hl-topic:hover {
  border-color: color-mix(in srgb, var(--or-deep) 50%, transparent);
  background: var(--panel-2); box-shadow: var(--glow-soft);
}

.hl-foot {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-top: 26px;
}
.hl-ask h3 { font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: var(--tx); }
.hl-ask p { margin: 0 0 14px; font-size: var(--fs-label); line-height: 1.65; color: var(--tx-2); }

/* ---------------------------------------------------------- контакты */

.ct-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 16px;
}
.ct-card { display: flex; flex-direction: column; gap: 10px; }
.ct-ic {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--or-deep); background: rgba(252, 108, 5, .12);
  border: 1px solid color-mix(in srgb, var(--or-deep) 30%, transparent);
}
.ct-ic .i-ic { width: 18px; height: 18px; }
.ct-card h3 { font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: var(--tx); margin: 0; }
.ct-card p { margin: 0; font-size: var(--fs-label); line-height: 1.6; color: var(--tx-2); flex: 1; }
.ct-mail {
  font-weight: 800; font-size: var(--fs-ui); color: var(--or-deep); text-decoration: none;
  transition: color var(--t-micro);
}
.ct-mail:hover { color: var(--or-2); }

.ct-low {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-top: 16px;
}
.ct-low h3 { font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: var(--tx); }
.ct-low p { margin: 0 0 8px; font-size: var(--fs-label); line-height: 1.65; color: var(--tx-2); }

.ct-soc {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3);
}
.ct-soc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ct-soc-link {
  padding: 7px 13px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--panel);
  color: var(--tx-2); text-decoration: none;
  font: 700 var(--fs-cap)/1 'Segoe UI', system-ui, sans-serif; letter-spacing: .04em;
  text-transform: none;
  transition: color var(--t-micro), border-color var(--t-micro);
}
.ct-soc-link:hover {
  color: var(--or-2);
  border-color: color-mix(in srgb, var(--or-deep) 50%, transparent);
}

@media (max-width: 1000px) {
  .rg-rules, .hl-steps, .hl-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-tools, .ct-grid { grid-template-columns: 1fr; }
  .i-doc { grid-template-columns: 1fr; }
  /* Оглавление перестаёт быть липким: на узком экране оно заняло бы весь
     первый экран и отодвинуло сам текст за край. */
  .dc-toc { position: static; }
  .faq-body { grid-template-columns: 1fr; }
  .faq-rail { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .faq-cat { flex: none; padding: 11px 14px; }
}

@media (max-width: 700px) {
  .i-notes, .rg-low, .ct-low, .hl-foot { grid-template-columns: 1fr; }
  .rg-rules, .hl-steps, .hl-topics { grid-template-columns: 1fr; }
  .dc-body { padding: 18px 16px; }
  .fq-a { padding-left: 18px; }
}

/* ============================================================ ALIVE · ОБОЛОЧКА

   Редизайн «Alive» (design_handoff_alive_redesign/): шапка, сайдбар,
   мобильный таббар, шторка «Ещё», модалки-шторки и тост. Значения сняты с
   инлайн-стилей референсов и с mobVals() — таблицы различий десктоп/мобиль.

   Секция стоит в конце файла сознательно: при равной специфичности здесь
   побеждает последнее правило, а базовые .topbar/.side/.nav-btn объявлены
   на тысячи строк выше. Единый брейкпоинт макета — 880 пикселей. */

:root {
  --f-ui: Inter, "Segoe UI", system-ui, sans-serif;
  /* Заголовки — старым системным шрифтом, как было до редизайна «Alive».
     Rajdhani/Play (узкий техно-шрифт) владелец на тайтлах не захотел; на
     кириллице у Rajdhani к тому же провал, и русские заголовки всё равно
     падали на подставной Play. Числа на канвасе Краша живут своим Rajdhani
     отдельно — это игровое табло, а не заголовок страницы. */
  --f-hd: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --al-bg: #07070a;
  --al-tx: #ececf2;
  --al-tx2: #a2a2b2;
  --al-tx3: #6a6a7a;
  --al-or: #ffa838;
  --al-or2: #ff7a18;
  --al-or3: #ff5c00;
}
body {
  background: var(--al-bg); color: var(--al-tx);
  font-family: var(--f-ui); -webkit-font-smoothing: antialiased;
}
@keyframes alPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes alSweep { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@keyframes alNavPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 24, .55); }
  70% { box-shadow: 0 0 0 12px rgba(255, 122, 24, 0); }
}
@keyframes alSheet { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes alToastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- шапка */

.topbar {
  height: var(--tb-h); gap: 16px; padding: 0 18px;
  background: rgba(9, 9, 12, .55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 122, 24, .16);
}
.tb-logo { gap: 11px; padding: 4px; border-radius: 9px; }
.tb-word {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--f-hd); font-weight: 700; line-height: 1;
  letter-spacing: 0; white-space: nowrap;
}
.tw-name { font-size: 22px; color: var(--al-tx); letter-spacing: -.02em; }
.tw-dot { font-size: 22px; color: var(--al-tx); margin-right: 2px; }
.tw-gg {
  display: inline-block; font-size: 24px; color: #ffcc33;
  -webkit-text-stroke: 1px #ff8a00; paint-order: stroke fill;
  text-shadow: 0 1px 0 #f08400, 0 2px 0 #c06200, 0 4px 6px rgba(0, 0, 0, .5);
  transform: skewX(-8deg);
}
.tb-nav {
  flex: 1; min-width: 0; gap: 6px; height: 34px;
  margin-left: 6px; padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.tb-link {
  gap: 8px; padding: 9px 14px; border-radius: 9px; border: 1px solid transparent;
  font: 600 var(--fs-ui)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: var(--al-tx2);
}
.tb-link svg { width: 14px; height: 14px; opacity: 1; }
.tb-link:hover { color: var(--al-tx); background: rgba(255, 255, 255, .05); }
.tb-link.on { color: var(--al-or); background: rgba(255, 122, 24, .12); }
/* Название раздела в шапке макет не показывает: где ты, говорит пункт меню. */
.tb-mid { display: none; }
.tb-right { gap: 10px; }

.tb-bal {
  flex-direction: row; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: 10px;
  background: rgba(18, 18, 24, .7);
  border: 1px solid rgba(255, 122, 24, .28);
  box-shadow: inset 0 0 18px rgba(255, 122, 24, .06);
}
.tb-bal .k { font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; color: var(--al-tx3); }
.tb-bal-row { align-items: center; gap: 10px; }
.tb-bal .v {
  font: 700 16px/1 var(--f-hd); color: var(--al-or);
  text-shadow: 0 0 14px rgba(255, 122, 24, .5);
}
.tb-bal .c { font: 700 var(--fs-cap)/1 var(--f-hd); letter-spacing: .08em; color: var(--al-tx3); }
.tb-dep {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; padding: 0;
  border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(53, 208, 127, .45);
  background: rgba(53, 208, 127, .12); color: #7ce4ae;
  font: 700 var(--fs-body)/1 var(--f-hd);
}
.tb-dep:hover { background: rgba(53, 208, 127, .22); }

.account {
  gap: 10px; padding: 5px 14px 5px 6px; border-radius: 12px;
  background: rgba(18, 18, 24, .7); border: 1px solid #26262f;
}
.account-ava {
  width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden;
  border-radius: 9px; background: #0d0d12; border: 1px solid rgba(255, 122, 24, .35);
}
.account-ava svg { width: 22px; height: 22px; }
.account-txt b { font: 700 var(--fs-ui)/1.15 var(--f-hd); }
.account-txt small { font-size: var(--fs-micro); color: var(--al-tx3); }

/* ---------------------------------------------------------- сайдбар */

.side {
  background: rgba(10, 10, 13, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, .05);
  padding: 18px 12px; gap: 6px;
}
.online {
  display: flex; align-items: center; gap: 7px;
  margin: -10px 8px 14px; font-size: var(--fs-cap); font-weight: 600; color: var(--al-tx3);
}
.online b { color: var(--al-tx); }
.online-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #35d07f;
  box-shadow: 0 0 8px #35d07f; animation: alPulse 2s infinite;
}
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-btn {
  position: relative; gap: 11px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid transparent;
  font: 600 var(--fs-body)/1.2 var(--f-hd); color: var(--al-tx2);
}
.nav-btn:hover { background: rgba(255, 255, 255, .04); color: var(--al-tx); }
.nav-btn.on {
  color: var(--al-or); border-color: rgba(255, 122, 24, .32);
  background: linear-gradient(90deg, rgba(255, 122, 24, .16), transparent);
  box-shadow: inset 0 0 24px -10px rgba(255, 122, 24, .5);
}
.nav-btn.on::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px;
  border-radius: 2px; background: #ff7a18; box-shadow: 0 0 10px #ff7a18;
}
.nav-btn .ic { width: 18px; font-size: var(--fs-body); }
.nav-live {
  width: 6px; height: 6px; margin-left: auto; background: #35d07f;
  box-shadow: 0 0 8px #35d07f; animation: alPulse 2s infinite;
}
.nav-sep { background: rgba(255, 255, 255, .06); }
.nav-note { color: #55556a; }

/* Карточка заданий — одна на «Задания пропуска» и «Задания дня»: в макете
   такой блок один, а наших дневных заданий в нём нет, но они остаются —
   это живая механика, выбрасывать её ради макета нельзя. */
.bp-side, .quests {
  position: relative; overflow: hidden;
  /* flex:0 0 auto — иначе в сжатой по высоте боковой колонке (зум, низкое
     окно) плашка ужимается flex'ом, а её overflow:hidden срезает описания и
     сами задания. С запретом сжатия колонка .side просто прокручивается. */
  flex: 0 0 auto;
  margin-top: 14px; padding: 12px 10px;
  border: 1px solid rgba(255, 122, 24, .28); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 122, 24, .08), rgba(255, 122, 24, .01) 70%);
}
.bp-side[hidden] { display: none; }
.bp-side::before, .quests::before {
  content: ""; position: absolute; top: 0; left: -40%; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 168, 56, .08), transparent);
  transform: skewX(-18deg); animation: alSweep 6s ease-in-out infinite; pointer-events: none;
}
.bps-head, .quests-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: var(--al-or);
}
.bps-n, .quests-ready {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: 0;
  background: #ff7a18; color: #180a00; box-shadow: 0 0 12px rgba(255, 122, 24, .6);
}
.bps-n:empty, .quests-ready:empty { display: none; }
/* Шапка блока — кнопка сворачивания: без своего фона и рамки, стрелка справа. */
.bps-head[data-fold] { width: 100%; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-family: inherit; }
.bps-head[data-fold]:hover { color: #ffa838; }
.bps-head[data-fold] > span:first-child { flex: 1; }
.bps-chev { width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; opacity: .8; }
.bp-side.closed .bps-chev { transform: rotate(-45deg) translateY(1px); }
.bp-side.closed .bps-head { margin-bottom: 0; }
.bp-side.closed .bps-body { display: none; }
.bps-task, .quests .quest { padding: 8px 0; border-bottom: 1px solid rgba(255, 122, 24, .12); }
.bps-task:last-child, .quests .quest:last-child { border-bottom: 0; }
.bps-top, .quests .q-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bps-t, .quests .q-title { font: 600 var(--fs-ui)/1.3 var(--f-hd); color: var(--al-tx); }
.bps-task.ok .bps-t, .quests .quest.done .q-title { color: var(--al-or); }
.bps-num, .quests .q-num { font: 700 var(--fs-label)/1 var(--f-hd); color: var(--al-tx3); white-space: nowrap; }
.bps-bar, .quests .q-bar {
  height: 4px; border-radius: 3px; background: #1c1c24; overflow: hidden; margin: 6px 0 5px;
}
.bps-bar i, .quests .q-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #ffa838, #ff5c00);
  box-shadow: 0 0 8px rgba(255, 122, 24, .6);
}
.bps-claim, .quests .q-claim {
  width: 100%; margin-top: 2px; padding: 5px 8px; border: 0; border-radius: 7px; cursor: pointer;
  font: 700 var(--fs-ui)/1 var(--f-hd); color: #180a00;
  background: linear-gradient(135deg, #ffa838, #ff5c00);
  box-shadow: 0 0 14px rgba(255, 122, 24, .35);
}
.bps-note, .quests .q-reward, .quests .q-got { font-size: var(--fs-micro); color: var(--al-tx3); }

/* ---------------------------------------------------------- тост

   Снизу по центру, как в макете: подтверждение читается там, где только
   что был палец, а не в углу экрана. */
.toasts {
  left: 50%; right: auto; bottom: 28px; transform: translateX(-50%);
  align-items: center; z-index: 200;
}
.toast {
  padding: 12px 18px; border-radius: 12px; max-width: min(92vw, 520px);
  border: 1px solid rgba(255, 122, 24, .5);
  background: rgba(20, 14, 10, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--al-tx); font: 600 var(--fs-ui)/1.3 var(--f-hd);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8), 0 0 30px -10px rgba(255, 122, 24, .7);
  animation: alToastIn .3s ease both;
}
.toast.err, .toast.bad { border-color: rgba(255, 92, 92, .55); }
/* Действие внутри тоста («Пополнить»): контейнер тостов прозрачен для кликов, кнопка — нет. */
.toast-act {
  pointer-events: auto; margin-left: 10px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255, 170, 90, .6); background: linear-gradient(180deg, #ff8a2a, #ff6a00);
  color: #180a00; font: 700 var(--fs-label)/1 var(--f-hd); letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
}
.toast.win, .toast.ok { border-color: rgba(53, 208, 127, .5); }

/* ---------------------------------------------------------- мобиль */

.mnd-wrap { display: none; }

@media (max-width: 880px) {
  :root { --tb-h: 64px; --tabbar-h: 68px; }
  /* Звёздный канвас на мобиле макет выключает: только ровный фон. */
  .sky { display: none; }

  .topbar { gap: 8px; padding: 0 12px; }
  .tb-logo { gap: 7px; }
  .tb-word { display: flex; }
  .tw-name, .tw-dot { font-size: 17px; }
  .tw-gg { font-size: 18px; }
  .topbar .tb-nav, .topbar .account, .topbar .tb-cur, .topbar .tb-promo { display: none !important; }
  .tb-right { margin-left: auto; gap: 8px; }
  .tb-bal {
    height: 38px; padding: 0 6px 0 12px; gap: 8px; border-radius: 11px;
    background: rgba(18, 18, 24, .85); border-color: rgba(255, 122, 24, .35);
    box-shadow: inset 0 0 16px rgba(255, 122, 24, .12);
  }
  .tb-bal .k, .tb-bal .c { display: none; }
  .tb-bal .v { font-size: var(--fs-body); text-shadow: none; }
  .tb-dep {
    width: 26px; height: 26px; border-radius: 8px; border: 0;
    background: linear-gradient(180deg, #4de08f, #2bb469); color: #06240f; font-size: 16px;
  }
  .content { padding: 12px 12px 20px; }
  /* Резерв под таббар — под всем содержимым вместе с подвалом. */
  .main { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

  /* ---- шторка меню ---- */
  .mnd-wrap { display: block; position: fixed; inset: 0; z-index: 90; }
  .mnd-wrap[hidden] { display: none; }
  .mnd {
    position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
    background: linear-gradient(180deg, #141419, #0b0b0f);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .75);
    transform: translateX(100%); transition: transform .26s cubic-bezier(.2, .8, .3, 1);
  }
  .mnd-wrap.in .mnd { transform: none; }
  body.mnd-open { overflow: hidden; }
  .mnd-head {
    flex: none; display: flex; align-items: flex-start; gap: 12px;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .mnd-ava {
    flex: none; width: 54px; height: 54px; padding: 2px; border-radius: 50%;
    background: linear-gradient(135deg, #ffd23b, #ff5c00);
    box-shadow: 0 0 20px rgba(255, 122, 24, .5);
  }
  .mnd-ava img {
    display: block; width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover; background: #15100c;
  }
  .mnd-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .mnd-who > b {
    font: 700 17px/1 var(--f-hd); color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mnd-who > span {
    font: 400 var(--fs-cap)/1 var(--f-ui); color: #8a8a9a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mnd-bal {
    display: flex; align-items: center; gap: 8px; width: max-content;
    height: 34px; margin-top: 6px; padding: 0 5px 0 11px; border-radius: 10px;
    background: rgba(8, 8, 10, .8); border: 1px solid rgba(255, 122, 24, .35);
  }
  .mnd-bal b { font: 700 var(--fs-ui)/1 var(--f-hd); color: var(--al-or); }
  .mnd-dep {
    width: 24px; height: 24px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 7px; cursor: pointer;
    background: linear-gradient(180deg, #4de08f, #2bb469); color: #06240f;
    font: 700 var(--fs-body)/1 var(--f-hd);
  }
  .mnd-login {
    align-self: flex-start; margin-top: 6px; min-height: 36px; padding: 0 14px;
    border: 0; border-radius: 10px; cursor: pointer;
    background: linear-gradient(180deg, #ffb44a, #ff7a18); color: #180a00;
    font: 700 var(--fs-label)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase;
  }
  .mnd-x {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06);
    color: var(--al-tx); font: 300 19px/1 var(--f-ui); cursor: pointer;
  }
  .mnd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 0; }
  .mnd-list { display: flex; flex-direction: column; gap: 2px; }
  .mnd-row {
    display: flex; align-items: center; gap: 13px; width: 100%;
    min-height: 48px; padding: 0 12px; border: 0; border-radius: 11px;
    background: transparent; color: var(--al-tx); cursor: pointer; text-align: left;
    font: 600 var(--fs-ui)/1 var(--f-ui);
  }
  .mnd-row:hover { background: rgba(255, 255, 255, .05); }
  .mnd-row.on { background: rgba(255, 122, 24, .12); color: var(--al-or); }
  .mnd-ic { flex: none; width: 22px; display: grid; place-items: center; font-size: 16px; color: #8a8a9a; }
  .mnd-row.on .mnd-ic { color: var(--al-or); }
  .mnd-tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mnd-chev { flex: none; color: #5a5a6a; font: 400 var(--fs-body)/1 var(--f-ui); }
  .mnd-cur {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 10px; padding: 12px; border-top: 1px solid rgba(255, 255, 255, .06);
  }
  .mnd-cur-k {
    font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #8a8a9a;
  }
  .mnd-cur .tb-cur { display: inline-flex; }
  .mnd-quests .quests { margin: 8px 0 0; }
  .mnd-bp {
    flex: none; display: flex; align-items: center; gap: 12px;
    margin: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 15px 16px; border-radius: 14px; cursor: pointer; text-align: left;
    border: 1px solid rgba(255, 168, 56, .45);
    background: linear-gradient(100deg, rgba(255, 122, 24, .22), rgba(255, 92, 0, .08));
    box-shadow: inset 0 0 30px -12px rgba(255, 138, 42, .7);
    color: var(--al-tx);
  }
  .mnd-bp[hidden] { display: none; }
  .mnd-bp-ic { flex: none; font-size: 20px; }
  .mnd-bp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .mnd-bp-tx b {
    font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffb44a;
  }
  .mnd-bp-tx span { font: 400 var(--fs-cap)/1.2 var(--f-ui); color: #b8b8c4; }
  .mnd-bp-go { flex: none; color: #ffb44a; font: 400 16px/1 var(--f-ui); }

  /* ---- модалки становятся нижними шторками ---- */
  .modal-bg { padding: 0; place-items: end stretch; }
  .modal {
    width: 100%; max-width: none; max-height: 90vh; overflow-y: auto;
    border: 0; border-top: 1px solid rgba(255, 122, 24, .32);
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, #17171d, #0b0b0f);
    padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .8);
    animation: alSheet .24s cubic-bezier(.2, .8, .3, 1) both;
  }
  .modal::before {
    content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 12px;
    border-radius: 2px; background: rgba(255, 255, 255, .18);
  }
  .toasts { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .online-dot, .nav-live, .bp-side::before, .quests::before { animation: none; }
  .mnd { transition: none; }
}

/* ============================================================ ALIVE · ПОДВАЛ

   По Footer.dc.html. Стоит после .shell во всю ширину окна: в макете это
   сцена с космосом от края до края. Три яруса: полоса платежей (только
   десктоп), бренд + колонки + карточка, нижняя строка. Размеры — из
   инлайн-стилей макета, различия для телефона — из его mobVals(). */

@keyframes ftFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.ftr {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; min-width: 0;
  /* Снизу запас под свёрнутую панель чата в правом нижнем углу: без него
     она ложится прямо на нижнюю строку с правилами. */
  padding: 0 0 84px;
  color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui);
  background:
    linear-gradient(180deg, #07070a 0%, rgba(7, 7, 10, .35) 14%,
      rgba(7, 7, 10, .25) 70%, rgba(7, 7, 10, .7) 100%),
    #07070a url('/assets/footer/space.webp') center top / cover no-repeat;
}
.ftr::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 24, .55) 30%,
    rgba(255, 122, 24, .55) 70%, transparent);
}
.ftr b, .ftr h4 { font-variant-numeric: tabular-nums; }

.ftr-top, .ftr-mid, .ftr-end {
  position: relative; z-index: 2;
  max-width: 1880px; margin: 0 auto; padding: 0 48px;
}
.ftr-top { padding-top: 44px; }
.ftr-mid { margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, .08); }
/* Без блока оплаты подвал начинается с колонок: черта над ними лишняя. */
.ftr > .ftr-mid:first-child { margin-top: 0; padding-top: 18px; border-top: 0; }

/* ---------------------------------------------------------- платежи */

.ftr-pay {
  display: flex; flex-wrap: wrap; align-items: center; min-height: 104px;
  border: 1px solid rgba(255, 122, 24, .32); border-radius: 10px;
  background: rgba(10, 10, 14, .62);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(255, 122, 24, .08) inset, 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.fp-h, .fp-safe > span:last-child {
  font: 600 var(--fs-label)/1.5 var(--f-hd); letter-spacing: .22em;
  text-transform: uppercase; color: #c4c4d0;
}
.fp-h {
  flex: none; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 0 28px; border-right: 1px solid rgba(255, 255, 255, .1);
}
.fp-h i { width: 22px; height: 2px; background: #ff7a18; border-radius: 2px; }
.fp-list {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly;
  gap: 12px 20px; padding: 0 20px;
  color: #b8b8c6; filter: grayscale(1); overflow: hidden;
  font-family: var(--f-hd); font-weight: 700; line-height: 1;
}
.fp-m { user-select: none; white-space: nowrap; }
.fp-visa { font-size: 24px; font-style: italic; letter-spacing: -.02em; }
.fp-mc { display: flex; }
.fp-mc i { width: 22px; height: 22px; border-radius: 50%; background: #e6e6ee; opacity: .9; }
.fp-mc i + i { background: #9a9aa8; margin-left: -8px; }
.fp-blik { font-size: 24px; letter-spacing: -.04em; }
.fp-sofort { font-size: 19px; font-style: italic; letter-spacing: .02em; }
.fp-trustly { font-size: 21px; letter-spacing: -.01em; }
.fp-paypal { font-size: 21px; font-style: italic; }
.fp-btc, .fp-usdt, .fp-ton {
  width: 30px; height: 30px; display: grid; place-items: center; box-sizing: content-box;
}
.fp-btc { border-radius: 50%; background: #d8d8e6; color: #111; font-size: 17px; }
.fp-eth { font-size: 26px; color: #d8d8e6; }
.fp-usdt { border-radius: 8px; background: #d8d8e6; color: #111; font-size: 16px; }
.fp-ton { border-radius: 8px; border: 2px solid #d8d8e6; color: #d8d8e6; font-size: var(--fs-ui); }
.fp-safe {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, .1);
}
.fp-lock {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px;
  border: 1px solid rgba(255, 122, 24, .55); color: #ffa838;
  box-shadow: 0 0 16px -4px rgba(255, 122, 24, .6);
}

/* ---------------------------------------------------------- середина */

.ftr-main {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 44px 32px; padding: 46px 0 52px;
}

.ft-brand { flex: 0 1 300px; display: flex; flex-direction: column; min-width: 0; }
.ft-logo {
  display: flex; align-items: center; gap: 18px;
  color: inherit; width: max-content; max-width: 100%; text-decoration: none;
}
.ft-word { display: flex; flex-direction: column; gap: 4px; }
.ft-wm {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--f-hd); font-weight: 700; line-height: 1; white-space: nowrap;
}
.ft-n { font-size: 34px; color: #ececf2; letter-spacing: .08em; text-transform: uppercase; }
.ft-d { font-size: 34px; color: #ececf2; margin-right: 2px; }
.ft-gg {
  display: inline-block; font-size: 36px; color: #ffcc33;
  -webkit-text-stroke: 1px #ff8a00; paint-order: stroke fill;
  text-shadow: 0 1px 0 #f08400, 0 2px 0 #c06200, 0 4px 6px rgba(0, 0, 0, .5);
  transform: skewX(-8deg);
}
.ft-tag {
  font: 600 var(--fs-label)/1.5 var(--f-hd); letter-spacing: .44em;
  text-transform: uppercase; color: #7a7a8c; padding-left: 2px;
}
.ft-claim { margin: 18px 0 0; font-size: 17px; line-height: 1.35; color: #ececf2; }
.ft-soc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ft-soc a {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14);
  color: #ececf2; transition: border-color .15s, color .15s;
}
.ft-soc a:hover { border-color: rgba(255, 122, 24, .6); color: #ffa838; }
.ft-soc svg { display: block; fill: currentColor; }
.ft-note { margin: 30px 0 0; font-size: var(--fs-body); line-height: 1.45; color: #a2a2b2; }

/* ---- колонки ссылок ---- */

.ftr-cols {
  flex: 1 1 600px; min-width: 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.ft-col { display: flex; flex-direction: column; min-width: 0; }
.ft-col h4 {
  margin: 0; font: 700 19px/1 var(--f-hd); letter-spacing: .16em;
  text-transform: uppercase; color: #ececf2;
}
.ft-col > i { width: 36px; height: 2px; margin-top: 10px; background: #ff7a18; border-radius: 2px; }
.ft-col ul {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.ft-col li { display: flex; align-items: center; gap: 12px; }
.ft-link {
  font-size: var(--fs-body); font-weight: 400; line-height: 1.3; color: #c4c4d0;
  text-decoration: none; text-wrap: pretty; transition: color .15s;
}
.ft-link:hover { color: #ffa838; }
.ft-badge {
  font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .2em; text-transform: uppercase;
  color: #ffa838; border: 1px solid rgba(255, 122, 24, .55); border-radius: 6px;
  padding: 3px 7px; white-space: nowrap;
}

/* ---- карточка с маскотом ---- */

.ftr-promo {
  flex: 0 0 300px; margin-left: auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
}
.fpr-card { position: relative; width: 100%; max-width: 400px; aspect-ratio: 400 / 315; }
.fpr-glass, .fpr-shade {
  position: absolute; inset: 0;
  clip-path: polygon(0 8%, 4% 0, 100% 0, 100% 92%, 96% 100%, 0 100%);
}
.fpr-glass {
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 40%,
    rgba(255, 122, 24, .08));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fpr-shade {
  pointer-events: none;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(255, 122, 24, .6);
}
.fpr-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fpr-art {
  position: absolute; right: 3%; bottom: 3%; width: 66%; height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 122, 24, .45));
  animation: ftFloat 5s ease-in-out infinite;
}
.fpr-words {
  position: absolute; left: 8%; top: 14%; pointer-events: none;
  display: flex; flex-direction: column; gap: 5px;
  font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .36em;
  text-transform: uppercase; color: #a2a2b2;
}
.fpr-words span:last-child { color: #ececf2; }
.fpr-brand { position: absolute; left: 8%; bottom: 9%; display: flex; flex-direction: column; gap: 6px; }
.fpr-brand b {
  font: 700 var(--fs-ui)/1.5 var(--f-hd); letter-spacing: .3em;
  text-transform: uppercase; color: #ececf2;
}
.fpr-brand i, .fpr-cap i { height: 2px; background: #ff7a18; border-radius: 2px; }
.fpr-brand i { width: 22px; }
.fpr-cap {
  margin: 26px 0 0; display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-body); line-height: 1.35; color: #c4c4d0; text-align: center; font-style: italic;
}
.fpr-cap i { width: 18px; flex: none; }

/* ---------------------------------------------------------- нижняя строка */

.ftr-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  padding: 30px 0 38px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.fb-copy { flex: 1 1 260px; font-size: var(--fs-ui); line-height: 1.55; color: #a2a2b2; }
.fb-c { color: #ececf2; }
.fb-c b { font-family: var(--f-hd); font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.fb-links { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px 0; flex-wrap: wrap; }
.fb-links a {
  font-size: var(--fs-ui); color: #c4c4d0; padding: 0 18px; white-space: nowrap;
  border-left: 1px solid rgba(255, 255, 255, .14); text-decoration: none; transition: color .15s;
}
.fb-links a:hover { color: #ffa838; }
.fb-end {
  flex: 1 1 auto; margin-left: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 32px;
}
.fb-lang {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 9px; border: 1px solid transparent;
  color: #ececf2; font: 600 17px/1 var(--f-hd); letter-spacing: .06em; cursor: default;
}
.fb-lang svg { display: block; }
.fb-reach { display: flex; align-items: center; gap: 22px; }
.fb-slash { display: flex; gap: 7px; height: 16px; }
.fb-slash i { width: 2px; height: 100%; background: #ff7a18; transform: skewX(-30deg); }
.fb-slash i:nth-child(1) { opacity: .35; }
.fb-slash i:nth-child(2) { opacity: .5; }
.fb-slash i:nth-child(3) { opacity: .65; }
.fb-slash i:nth-child(4) { opacity: .8; }
.fb-reach b {
  font: 600 var(--fs-ui)/1.5 var(--f-hd); letter-spacing: .36em;
  text-transform: uppercase; color: #ffa838;
}

/* ---------------------------------------------------------- телефон

   mobVals(): полосы платежей нет, поля 16px, колонки по две, нижняя строка
   столбиком. Рост «flex: 1 1 0» у нижних блоков в столбце снимаем: в
   макете он раздувал пустоту между копирайтом и правилами на полэкрана. */

@media (max-width: 880px) {
  .ftr {
    /* Таббар и над ним свёрнутый чат — оба лежат поверх последней строки. */
    padding-bottom: calc(var(--tabbar-h, 68px) + 100px + env(safe-area-inset-bottom, 0px));
  }
  .ftr-top { display: none; }
  .ftr-mid, .ftr-end { padding: 0 16px; }
  .ftr-main { gap: 24px 18px; padding: 26px 0 30px; }
  .ftr-cols { flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .ftr-bottom {
    flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 0 28px;
  }
  .ftr-bottom > * { flex: none; }
  .fb-links { gap: 8px 0; }
  .fb-links a { padding: 0 18px; }
  .fb-end { margin-left: 0; justify-content: flex-start; gap: 14px 18px; }
  /* Запас под таббар держит подвал, а не содержимое. */
  .main, .content { padding-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .fpr-art { animation: none; }
}

/* ============================================================ ALIVE · ПОПОЛНЕНИЕ

   Шторка пополнения из MobileNav.dc.html. На телефоне модалка и так
   становится нижней шторкой (см. «ALIVE · ОБОЛОЧКА»), на десктопе то же
   содержимое стоит окном по центру — в том же материале. Значения — из
   инлайн-стилей макета; разметку собирает openDeposit() в profile.js. */

.dep {
  display: flex; flex-direction: column; gap: 14px;
  max-width: none; font-family: var(--f-ui); color: #ececf2;
}
.dep [hidden] { display: none !important; }

.dep-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.dep-h b {
  font: 700 17px/1 var(--f-hd); letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
}
.dep-x {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: #ececf2; font: 300 19px/1 var(--f-ui);
}
.dep-x:hover { background: rgba(255, 255, 255, .1); }

/* ---- способ ---- */
.dep-seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border-radius: 12px; background: rgba(8, 8, 10, .7); border: 1px solid rgba(255, 255, 255, .07);
}
.dep-seg-b {
  min-height: 42px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: #a2a2b2;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em;
}
.dep-seg-b.on { background: rgba(255, 122, 24, .2); color: #ffa838; }

/* ---- секции ---- */
.dep-sec { display: flex; flex-direction: column; gap: 9px; }
.dep-k {
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .12em;
  text-transform: uppercase; color: #8a8a9a;
}
.dep-body { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.dep-body:empty { display: none; }
.dep-note { margin: 0; font: 400 var(--fs-cap)/1.45 var(--f-ui); color: #8a8a9a; }
/* Окно вывода: «Криптой | Скином» и витрина скинов. */
.pwd-modes { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); align-self: flex-start; }
.pwd-modes button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 7px;
  font: 600 var(--fs-cap)/1.2 var(--f-ui); color: #8a8a9a; }
.pwd-modes button.on { background: rgba(255,255,255,.09); color: #f2f2f7; }
.pwd-modes button:focus-visible { outline: 2px solid #7c6cff; outline-offset: 1px; }
.wds { display: flex; flex-direction: column; gap: 10px; }
.wds-top { display: flex; flex-direction: column; gap: 6px; }
.wds-top input { font: 400 var(--fs-body, 14px)/1.3 var(--f-ui); color: #f2f2f7; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 9px 12px; }
.wds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px;
  max-height: 340px; overflow: auto; }
.wds-grid > p { grid-column: 1 / -1; margin: 0; }
.wds-it { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.wds-it img, .wds-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; }
.wds-it .n { font: 400 var(--fs-cap)/1.3 var(--f-ui); color: #c9c9d6; overflow-wrap: anywhere; }
.wds-go { all: unset; cursor: pointer; margin-top: auto; text-align: center; padding: 6px 8px; border-radius: 7px;
  background: rgba(255,255,255,.08); color: #f2f2f7; font: 600 var(--fs-cap)/1.2 var(--f-ui);
  font-variant-numeric: tabular-nums; }
.wds-go.sure { background: #2f8f5b; }
.wds-go:disabled { opacity: .5; cursor: default; }
.wds-go:focus-visible { outline: 2px solid #7c6cff; outline-offset: 1px; }
/* Пополнение скинами: шаги и последние пополнения. */
.dps-steps { margin: 0; padding-left: 18px; display: grid; gap: 6px;
  font: 400 var(--fs-cap)/1.45 var(--f-ui); color: #c9c9d6; }
.dps-hist { display: grid; gap: 4px; }
.dps-r { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline;
  font: 400 var(--fs-cap)/1.4 var(--f-ui); color: #8a8a9a; font-variant-numeric: tabular-nums; }
.dps-r b { color: #e8e8f0; font-weight: 600; }
.dps-r .s.ok { color: #7ce4ae; }
.dps-r .s.wait { color: #ffcf6e; }
.dps-r .s.bad { color: #ff9a9a; }

/* ---- сумма ---- */
.dep-amts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dep-amt {
  min-height: 46px; border-radius: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
  color: #a2a2b2; font: 700 var(--fs-body)/1 var(--f-hd); font-variant-numeric: tabular-nums;
}
.dep-amt.on { border-color: rgba(255, 168, 56, .75); background: rgba(255, 122, 24, .14); color: #ffa838; }
.dep-own {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  border-radius: 11px; background: rgba(8, 8, 10, .7); border: 1px solid rgba(255, 255, 255, .1);
}
.dep-own.on { border-color: rgba(255, 168, 56, .7); }
.dep-own-c { flex: none; display: grid; place-items: center; color: #ffa838; }
.dep-own input, .dep-own input:hover, .dep-own input:focus {
  flex: 1; min-width: 0; width: auto; padding: 0; border: 0; outline: none;
  background: transparent; box-shadow: none;
  color: #ececf2; font: 600 var(--fs-body)/1 var(--f-hd);
}

/* ---- провайдер ---- */
.dep-pvs { display: flex; flex-direction: column; gap: 8px; }
.dep-pv {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px;
  border-radius: 12px; cursor: pointer; text-align: left; color: #ececf2;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
}
.dep-pv.on { border-color: rgba(255, 168, 56, .75); background: rgba(255, 122, 24, .1); }
.dep-pv-chip { flex: none; width: 38px; height: 26px; border-radius: 6px; }
.dep-pv-chip.visa { background: linear-gradient(135deg, #1a1f71, #f79e1b); }
.dep-pv-chip.mir { background: linear-gradient(135deg, #0f754e, #37a72e); }
.dep-pv-chip.sbp { background: linear-gradient(135deg, #5b57a2, #ef5da8); }
.dep-pv-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dep-pv-tx b { font: 700 var(--fs-ui)/1 var(--f-hd); }
.dep-pv-tx span { font: 400 var(--fs-micro)/1 var(--f-ui); color: #8a8a9a; }
.dep-pv-dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .25); background: transparent;
}
.dep-pv.on .dep-pv-dot { border-color: #ffa838; background: #ffa838; }

/* ---- сеть и адрес ---- */
.dep-nets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dep-net {
  display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 46px; padding: 0 12px;
  border-radius: 11px; cursor: pointer; text-align: left; color: #ececf2;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
}
.dep-net.on { border-color: rgba(255, 168, 56, .75); background: rgba(255, 122, 24, .1); }
.dep-net i {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot); box-shadow: 0 0 8px var(--dot);
}
.dep-net b { flex: none; font: 700 var(--fs-label)/1 var(--f-hd); }
.dep-net span {
  min-width: 0; font: 400 var(--fs-micro)/1 var(--f-ui); color: #8a8a9a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dep-addr {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  border-radius: 12px; background: rgba(8, 8, 10, .7); border: 1px solid rgba(255, 255, 255, .08);
}
.dep-addr-main { display: flex; align-items: flex-start; gap: 12px; }
.dep-addr-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dep-addr-k { font: 600 var(--fs-micro)/1.3 var(--f-ui); color: #8a8a9a; }
.dep-addr-row { display: flex; align-items: center; gap: 8px; }
.dep-addr-row code {
  flex: 1; min-width: 0; padding: 0; background: none;
  font: 600 var(--fs-micro)/1.3 var(--f-hd); color: #ececf2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dep-copy {
  flex: none; min-height: 34px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 122, 24, .4); background: rgba(255, 122, 24, .1);
  color: #ffa838; font: 700 var(--fs-cap)/1 var(--f-hd);
}
.dep-copy.ok { border-color: rgba(77, 224, 143, .5); background: rgba(77, 224, 143, .08); color: #7ce4ae; }
.dep-qr { flex: none; width: 96px; height: 96px; padding: 4px; border-radius: 8px; background: #fff; }
.dep-addr-li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 400 var(--fs-cap)/1.2 var(--f-ui); color: #8a8a9a;
}
.dep-addr-li b { color: #ececf2; font: 700 var(--fs-label)/1 var(--f-hd); font-variant-numeric: tabular-nums; }
.dep-addr-li > span:last-child {
  color: #c9c9d6; text-align: right; display: inline-flex; align-items: center; gap: 4px;
}
.dep-addr .cp-warn, .dep-addr .cp-also { margin: 0; font-size: var(--fs-micro); line-height: 1.4; }
.dep .cp-hist { margin-top: 0; }
.dep .cp-hist:empty { display: none; }

/* ---- промокод ---- */
.dep-promo {
  display: flex; flex-direction: row; align-items: stretch; gap: 8px;
  margin: 0; padding: 0; border: 0;
}
.dep-promo input, .dep-promo input:hover, .dep-promo input:focus {
  flex: 1; min-width: 0; width: auto; min-height: 46px; padding: 0 14px;
  border-radius: 11px; background: rgba(8, 8, 10, .7); box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .1); outline: none;
  color: #ececf2; font: 600 var(--fs-ui)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase;
}
.dep-promo input:focus { border-color: rgba(255, 168, 56, .7); }
.dep-promo button {
  flex: none; min-height: 46px; padding: 0 16px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(255, 122, 24, .45); background: rgba(255, 122, 24, .1);
  color: #ffa838; font: 700 var(--fs-label)/1 var(--f-hd);
}
.dep-pmsg { font: 400 var(--fs-cap)/1.3 var(--f-ui); color: #8a8a9a; }
.dep-pmsg.ok { color: #7ce4ae; }
.dep-pmsg.bad { color: #ff9a9a; }

/* ---- сводка и кнопка ---- */
.dep-sum {
  display: flex; flex-direction: column; gap: 7px; padding: 12px 14px;
  border-radius: 12px; background: rgba(255, 122, 24, .07); border: 1px solid rgba(255, 122, 24, .24);
}
.dep-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 400 var(--fs-cap)/1 var(--f-ui); color: #a2a2b2;
}
.dep-row b {
  display: inline-flex; align-items: center; gap: 4px;
  color: #ececf2; font: 700 var(--fs-label)/1 var(--f-hd); font-variant-numeric: tabular-nums;
}
.dep-row b.bn { color: #7ce4ae; }
.dep-row b.fee { color: #ff9a9a; }
.dep-rule { height: 1px; background: rgba(255, 255, 255, .08); }
.dep-row.tot { font: 600 var(--fs-label)/1 var(--f-ui); color: #ececf2; }
.dep-row.tot b { color: #ffa838; font-size: 17px; }
.dep-cta {
  width: 100%; min-height: 54px; border: 0; border-radius: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #ffb44a, #ff7a18); color: #180a00;
  font: 700 16px/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 14px 30px -12px rgba(255, 122, 24, .8);
}
.dep-cta:disabled { opacity: .5; cursor: default; box-shadow: none; }
.dep-msg { text-align: center; font: 600 var(--fs-label)/1.3 var(--f-ui); color: #7ce4ae; }
.dep-msg.warn { color: #ffa838; }
.dep-msg.err { color: #ff9a9a; }

/* Десктоп: то же содержимое окном по центру, в материале шторки. На
   телефоне правила не действуют — там модалку ведёт «ALIVE · ОБОЛОЧКА». */
@media (min-width: 881px) {
  .modal:has(.dep) {
    max-width: 460px; padding: 18px 18px 20px;
    border: 1px solid rgba(255, 122, 24, .32); border-radius: 20px;
    background: linear-gradient(180deg, #17171d, #0b0b0f);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
  }
}
@media (max-width: 880px) {
  .dep-qr { display: none; }
}

/* ============================================================ ALIVE · ВИТРИНА КЕЙСОВ

   По «Cases Showcase — Alive.dc.html»: герой в рамке hero-frame, лента
   «Сейчас выпало», строка фильтров, полки «Бюджет · Средние · Премиум» и
   карточки с наклоном за курсором. Телефон — по mobVals(): свой герой-
   карточка, заголовок «Кейсы» с полкой и порядком, сетка в две колонки,
   догрузка порциями. Префикс cs- — чтобы не спорить со старыми .case-*,
   которые живут на странице кейса. */

@keyframes csDrift { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.07) translate(-1.2%, -1%); } }
@keyframes csSweep { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@keyframes csRing {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .8; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes csFeedIn {
  0% { opacity: 0; transform: translateX(-90px) scale(.86); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes csPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes csSpin { to { transform: rotate(360deg); } }

#page-cases.on { display: flex; flex-direction: column; gap: 18px; }
#page-cases [hidden] { display: none !important; }

/* ---------------------------------------------------------- герой */

.cs-hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto;
  gap: 0 16px; align-items: center; min-height: 340px; padding: 38px 44px 34px;
}
.cs-hero-bg {
  position: absolute; inset: 14px 22px; z-index: 0; border-radius: 6px; overflow: hidden;
  background: #0a0705; pointer-events: none;
}
.cs-hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: csDrift 22s ease-in-out infinite alternate;
}
.cs-hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 6, 5, .9) 0%, rgba(8, 6, 5, .72) 34%, rgba(8, 6, 5, .25) 58%, rgba(8, 6, 5, .05) 100%),
    linear-gradient(180deg, rgba(8, 6, 5, .25), transparent 30%, transparent 70%, rgba(8, 6, 5, .55));
}
.cs-hero-sweep {
  position: absolute; top: 0; left: -40%; width: 22%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 168, 56, .06), transparent);
  transform: skewX(-18deg); animation: csSweep 9s ease-in-out infinite;
}
.cs-hero-frame {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; box-sizing: border-box;
  border: 24px solid transparent; border-width: 24px 120px;
  border-image: url('/assets/hero-frame.webp') 60 300 60 300 / 24px 120px stretch;
  filter: drop-shadow(0 0 18px rgba(255, 122, 24, .35));
}
/* Текст кончается раньше маскота: он стоит на 64% ширины героя, и в рабочей
   колонке уже, чем в макете, длинный заголовок иначе заезжал ему на лицо. */
.cs-hero { container-type: inline-size; }
.cs-hero-text {
  position: relative; z-index: 2; grid-column: 1; grid-row: 1;
  max-width: calc(64cqw - 150px);
}
.cs-hero-space { grid-column: 2; grid-row: 1; height: 290px; }
.cs-hero-h {
  margin: 14px 0 0; font: 700 46px/1.02 var(--f-hd); letter-spacing: -.03em; color: #ececf2;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .8);
}
.cs-hero-p {
  margin: 10px 0 0; font: 700 30px/1.1 var(--f-hd); letter-spacing: -.01em; color: #f2f2f6;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .8);
}
.cs-hero-p span {
  background: linear-gradient(96deg, #ffa838, #ff7a18, #ffd23b, #ffa838);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 122, 24, .45)); text-shadow: none;
}
.cs-hero-mascot {
  position: absolute; z-index: 2; left: 64%; top: 59%; width: 200px; height: 200px;
  transform: translate(-50%, -93%); display: grid; place-items: center; pointer-events: none;
}
.cs-hero-mascot i {
  position: absolute; left: 50%; top: 56%; width: 220px; height: 220px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 122, 24, .28), transparent 65%);
  animation: csRing 5s ease-in-out infinite;
}
.cs-hero-mascot img {
  position: relative; width: 200px; height: 200px; object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .8)) drop-shadow(0 0 22px rgba(255, 122, 24, .4));
}
.cs-hero-row {
  position: relative; z-index: 2; grid-column: 1 / -1; grid-row: 2;
  display: flex; align-items: stretch; gap: 14px; margin-top: 22px;
}
.cs-stats {
  display: grid; grid-template-columns: repeat(3, max-content); overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(8, 6, 5, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cs-stats:empty { display: none; }
.cs-stat {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 13px 18px 13px 14px; border-right: 1px solid rgba(255, 255, 255, .08);
  transition: background .2s;
}
.cs-stat:last-child { border-right-color: transparent; }
.cs-stat:hover { background: rgba(255, 122, 24, .06); }
.cs-stat-k {
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: #8a8a9a; white-space: nowrap;
}
.cs-stat-v {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 700 19px/1 var(--f-hd); color: #ececf2; font-variant-numeric: tabular-nums;
}
.cs-top {
  position: relative; width: 212px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 22px 20px 16px 30px;
}
.cs-top-bg {
  position: absolute; left: 10px; top: 12px; width: 161px; height: 58px; border-radius: 6px;
  background: rgba(8, 6, 5, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cs-top-frame {
  position: absolute; left: 9px; top: -19px; z-index: 3; width: 164px; height: 105px;
  object-fit: fill; pointer-events: none; filter: drop-shadow(0 0 10px rgba(255, 122, 24, .35));
}
.cs-top-ava {
  position: relative; z-index: 2; flex: none; width: 38px; height: 38px; border-radius: 50%;
  padding: 2px; box-sizing: border-box;
  background: linear-gradient(135deg, #ffd23b, #ff5c00); box-shadow: 0 0 16px rgba(255, 122, 24, .55);
}
.cs-top-ava img {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #15100c;
}
.cs-top-tx { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-top-tx > span {
  font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: #ffa838; white-space: nowrap;
}
.cs-top-tx b {
  max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  font: 700 16px/1 var(--f-hd); color: #ffd23b; text-shadow: 0 0 14px rgba(255, 168, 56, .6);
}
.cs-top-tx small {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font: 600 var(--fs-label)/1 var(--f-hd); color: #a2a2b2; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- лента */

.cs-feed {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(13, 13, 18, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cs-feed::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #ffa838, #ff5c00); box-shadow: 0 0 10px rgba(255, 122, 24, .7);
}
.cs-feed-k {
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: #ffa838; white-space: nowrap;
}
.cs-feed-track {
  flex: 1; min-width: 0; display: flex; gap: 8px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.cs-drop {
  flex: none; display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 8px;
  border-radius: 10px; background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06); border-left: 3px solid var(--rc);
  box-shadow: inset 0 0 20px -12px var(--rc);
}
.cs-drop.in { animation: csFeedIn .55s cubic-bezier(.2, .8, .3, 1) both; }
.cs-drop-art { flex: none; width: 38px; height: 28px; display: grid; place-items: center; overflow: hidden; }
.cs-drop-art > * { width: 100%; height: 100%; }
.cs-drop-art img, .cs-drop-art svg { width: 100%; height: 100%; object-fit: contain; }
.cs-drop-tx { display: flex; flex-direction: column; line-height: 1.15; }
.cs-drop-tx b { font: 600 var(--fs-label)/1.15 var(--f-hd); color: #ececf2; white-space: nowrap; }
.cs-drop-tx small { font-size: 10px; color: var(--tx-3); white-space: nowrap; }
.cs-drop-who { cursor: pointer; }
.cs-drop-who:hover { color: #ffa838; text-decoration: underline; }
.cs-drop-p {
  margin-left: 4px; display: inline-flex; align-items: center; gap: 3px;
  font: 700 var(--fs-ui)/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- фильтры */

.cs-bar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 6px;
  border-radius: 14px; border: 1px solid rgba(255, 122, 24, .14);
  background: rgba(13, 13, 18, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.cs-search {
  flex: none; display: flex; align-items: center; gap: 8px; width: 160px; height: 36px;
  padding: 0 10px; box-sizing: border-box; border-radius: 9px;
  background: rgba(8, 8, 10, .7); border: 1px solid #26262f;
  transition: width .25s cubic-bezier(.2, .8, .3, 1), border-color .2s;
}
.cs-search:focus-within { border-color: #ff7a18; }
.cs-search:focus-within, .cs-search:has(input:not(:placeholder-shown)) { width: 240px; }
.cs-search > span { color: var(--tx-3); font-size: var(--fs-ui); }
.cs-search input, .cs-search input:hover, .cs-search input:focus {
  flex: 1; min-width: 0; width: auto; height: auto; padding: 0; border: 0; outline: none;
  box-shadow: none; background: transparent; color: #ececf2; font: 400 var(--fs-label)/1 var(--f-ui);
}
.cs-bar .cs-range {
  display: flex; flex: none; align-items: center; gap: 10px; width: 220px; height: 36px;
  padding: 0 12px; box-sizing: border-box; border-radius: 9px;
  background: rgba(8, 8, 10, .7); border: 1px solid #26262f;
}
.cs-range .pr-lo, .cs-range .pr-hi {
  flex: none; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font: 800 var(--fs-cap)/1 var(--f-ui); color: #ffa838; font-variant-numeric: tabular-nums;
}
.cs-range .pr-lo { min-width: 34px; }
.cs-range .pr-hi { min-width: 40px; justify-content: flex-end; }
.cs-range .pr-track {
  position: relative; flex: 1; min-width: 0; width: auto; height: 3px;
  border: 0; border-radius: 2px; background: #26262f; overflow: visible;
}
.cs-range .pr-track::before {
  border-radius: 2px;
  background: linear-gradient(90deg, transparent var(--a, 0%), #ffa838 var(--a, 0%),
    #ff5c00 var(--b, 100%), transparent var(--b, 100%));
  box-shadow: 0 0 8px rgba(255, 122, 24, .35);
}
.cs-range .pr-track input[type=range]::-webkit-slider-thumb {
  width: 14px; height: 14px; background: #ffa838; border: 2px solid #180a00;
  box-shadow: 0 0 10px rgba(255, 122, 24, .7);
}
.cs-range .pr-track input[type=range]::-moz-range-thumb {
  width: 10px; height: 10px; background: #ffa838; border: 2px solid #180a00;
  box-shadow: 0 0 10px rgba(255, 122, 24, .7);
}
/* Серии — остаток строки фильтров. Ряд не переносится: что не влезло,
   уезжает вправо, полоса прокрутки скрыта — колесо и свайп работают. */
.cs-groups {
  display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cs-groups::-webkit-scrollbar { display: none; }
.cs-groups button {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border-radius: 9px; cursor: pointer; border: 1px solid transparent; background: transparent;
  color: #a2a2b2; font: 600 var(--fs-ui)/1 var(--f-hd); white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.cs-groups button b { font: inherit; }
.cs-groups button:hover { color: #ececf2; }
.cs-groups button .st-n {
  padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .06);
  color: #a2a2b2; font: 700 var(--fs-micro)/1.4 var(--f-hd); font-variant-numeric: tabular-nums;
}
.cs-groups button.on {
  color: #ffa838; border-color: rgba(255, 122, 24, .45);
  background: linear-gradient(180deg, rgba(255, 122, 24, .16), rgba(255, 122, 24, .04));
  box-shadow: 0 0 18px -6px rgba(255, 122, 24, .6);
}
.cs-groups button.on .st-n { background: rgba(255, 122, 24, .22); color: #ffa838; }

/* ---------------------------------------------------------- полки и карточки */

#caseSections { display: flex; flex-direction: column; gap: 18px; }
#caseSections:empty { display: none; }
.cs-shelf { display: flex; flex-direction: column; gap: 12px; }
.cs-shelf-h { display: flex; align-items: baseline; gap: 10px; padding: 2px 2px 0; }
.cs-shelf-h > i { display: none; }
.cs-shelf-h h3 {
  margin: 0; font: 700 18px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #ececf2;
}
.cs-shelf-note {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font: 600 var(--fs-cap)/1 var(--f-ui); color: var(--tx-3);
}
.cs-shelf-line {
  flex: 1; height: 1px; align-self: center;
  background: linear-gradient(90deg, rgba(255, 122, 24, .35), transparent);
}
.cs-shelf-n { display: none; }
.cs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.cs-card {
  position: relative; overflow: hidden; cursor: pointer; outline: none;
  padding: 12px 14px 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(178deg, rgba(24, 24, 32, .72), rgba(12, 12, 17, .7) 60%, rgba(9, 9, 13, .75));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .2s, box-shadow .25s;
}
.cs-card:hover, .cs-card:focus-visible {
  border-color: color-mix(in srgb, var(--ac) 60%, transparent);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .65), 0 0 0 1px color-mix(in srgb, var(--ac) 33%, transparent),
    0 0 40px -10px var(--ac);
}
.cs-card-glow {
  position: absolute; left: 50%; top: -30%; width: 120%; height: 110%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 40%, var(--ac), transparent 62%);
  opacity: .14; transition: opacity .25s; pointer-events: none;
}
.cs-card:hover .cs-card-glow { opacity: .34; }
.cs-card-line {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: .7;
  background: linear-gradient(90deg, transparent, var(--ac), transparent);
}
.cs-card-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 7px; min-height: 20px; }
.cs-card-opens {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 var(--fs-label)/1 var(--f-hd); color: var(--tx-3); font-variant-numeric: tabular-nums;
}
.cs-card-opens i { font-style: normal; font-size: 10px; color: var(--ac); text-shadow: 0 0 8px var(--ac); }
.cs-card-hot {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #ffd23b;
}
.cs-card-hot i {
  width: 5px; height: 5px; border-radius: 50%; background: #ffd23b; box-shadow: 0 0 8px #ffd23b;
  animation: csPulse 1.4s infinite;
}
.cs-card-tag {
  margin-left: auto; padding: 2px 6px; border-radius: 4px;
  font: 600 var(--fs-micro)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ac); border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent);
  background: rgba(0, 0, 0, .35); text-shadow: 0 0 8px var(--ac);
}
.cs-card-art {
  position: relative; height: 212px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
}
.cs-card-art::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(255, 255, 255, .022) 13px 14px, transparent 14px 31px),
    repeating-linear-gradient(-45deg, transparent 0 47px, rgba(0, 0, 0, .3) 47px 52px, transparent 52px 89px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, rgba(0, 0, 0, .9), transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 60%, rgba(0, 0, 0, .9), transparent 75%);
}
.cs-card-art > * { position: relative; }
.cs-card-art .case-photo {
  /* Абсолютом по боксу и с явной строкой сетки: проценты у картинки
     считаются от области сетки, а не от контейнера, и при auto-строке им
     не от чего считаться — вертикальный арт (Хеллоуин, 0.85) выходил
     натуральной высотой и ложился на название и цену. */
  position: absolute; inset: 0; width: auto; height: auto;
  display: grid; grid-template: 100% / 100%; place-items: center;
}
.cs-card-art .case-photo img, .cs-card-art > svg {
  /* Высота — ведущая: все арты занимают одинаковую высоту бокса (94%)
     независимо от пропорций, поэтому высокий «Помогите» и широкий «Boss»
     смотрятся одного размера. Ширина по месту, с потолком, чтобы широкий арт
     не вылезал из карточки. Наезда на название нет — высота ограничена боксом. */
  width: auto; height: 94%; max-width: 100%; max-height: 94%; object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .68));
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.cs-card-art > svg { width: 78%; height: auto; }
/* Ленивая картинка кейса (art.js, lazyCases): пока не приехала — прозрачна
   и чуть ниже, потом проявляется и встаёт на подставку. Прозрачная заглушка
   1×1 держит место в карточке. */
.case-photo img.lazy-wait { opacity: 0; transform: translateY(14px) scale(.94); }
.cs-card-art .case-photo img {
  transition: transform .45s cubic-bezier(.2, .8, .3, 1), opacity .45s ease;
}
@media (prefers-reduced-motion: reduce) {
  .case-photo img.lazy-wait { transform: none; }
}
.cs-card:hover .cs-card-art .case-photo img, .cs-card:hover .cs-card-art > svg {
  transform: translateY(-8px) scale(1.06);
}
.cs-card-own {
  position: absolute; right: 2px; top: 2px; z-index: 2; padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent);
  color: #ececf2; font: 700 var(--fs-micro)/1.4 var(--f-hd);
}
.cs-card-name {
  position: relative; z-index: 3; margin-top: 14px; text-align: center; color: #ececf2;
  font: 700 16px/1.2 var(--f-hd); letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-card-foot {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px;
}
.cs-card-price {
  display: inline-flex; align-items: center; gap: 4px; padding: 7px 16px; border-radius: 6px;
  font: 700 16px/1 var(--f-hd); font-variant-numeric: tabular-nums; color: #ffa838;
  background: rgba(10, 10, 14, .75); border: 1px solid rgba(255, 122, 24, .55);
  text-shadow: 0 0 12px rgba(255, 122, 24, .5); box-shadow: inset 0 0 14px rgba(255, 122, 24, .08);
}
.cs-card-go {
  padding: 8px 16px; border-radius: 6px; white-space: nowrap;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00;
  font: 600 var(--fs-ui)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(255, 92, 0, .35);
  opacity: 0; transform: translateX(10px); transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .3, 1);
}
.cs-card:hover .cs-card-go, .cs-card:focus-visible .cs-card-go { opacity: 1; transform: none; }

/* Узкий десктоп: четыре колонки в рабочей области меньше тысячи пикселей
   сжимали карточку так, что имя кейса резалось на половине. */
@media (max-width: 1320px) { .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-hero { grid-template-columns: minmax(0, 1fr) 200px; }
  .cs-hero-mascot { left: 72%; }
}

/* ---------------------------------------------------------- телефон */

.cs-mhero, .cs-mhead { display: none; }
.cs-mhero {
  position: relative; overflow: hidden; min-height: 218px; align-items: center;
  border-radius: 18px; border: 1px solid rgba(255, 138, 42, .28);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9);
}
.cs-mhero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 60% 50%;
}
.cs-mhero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 6, 5, .95) 0%, rgba(8, 6, 5, .82) 38%, rgba(8, 6, 5, .35) 66%, rgba(8, 6, 5, .1) 100%);
}
.cs-mhero-mascot {
  position: absolute; right: -6px; bottom: -2px; width: 172px; height: 172px; object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .85)) drop-shadow(0 0 22px rgba(255, 122, 24, .35));
}
.cs-mhero-tx {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px;
  padding: 20px 16px 34px; max-width: 64%;
}
.cs-mhero-h { display: flex; flex-direction: column; gap: 1px; }
.cs-mhero-h span {
  font: 700 25px/1.04 var(--f-hd); letter-spacing: -.01em; color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
}
.cs-mhero-h span.ac { color: #ffa838; text-shadow: 0 0 20px rgba(255, 122, 24, .6); }
.cs-mhero-p { font: 600 var(--fs-ui)/1.28 var(--f-ui); color: #dcdce4; }
.cs-mhero-p b { font-family: var(--f-ui); color: #ffa838; font-weight: 700; }
.cs-mhero-go {
  align-self: flex-start; display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 18px; margin-top: 2px; border: 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, #ffb44a, #ff7a18); color: #180a00;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 12px 26px -10px rgba(255, 122, 24, .8);
}
.cs-mhero-go span:last-child { font-size: var(--fs-body); letter-spacing: 0; }
.cs-mhead { align-items: center; gap: 10px; margin-top: 6px; }
.cs-mhead h2 {
  margin: 0; flex: 1; font: 700 22px/1 var(--f-hd); letter-spacing: .02em;
  text-transform: uppercase; color: #fff;
}
.cs-msort {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(20, 20, 26, .85);
  color: #dcdce4;
}
.cs-msort svg { width: 16px; height: 16px; transition: transform .2s; }
.cs-msort.desc svg { transform: scaleY(-1); }
.cs-more {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 64px; cursor: pointer; border-radius: 14px;
  border: 1px dashed rgba(255, 122, 24, .25); background: rgba(255, 122, 24, .04);
  color: #8a8a9a; font: 600 var(--fs-label)/1 var(--f-ui);
}
.cs-more i {
  width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255, 168, 56, .3); border-top-color: #ffa838; animation: csSpin .9s linear infinite;
}

@media (max-width: 880px) {
  #page-cases.on { gap: 14px; }
  .cs-hero, .cs-feed, .cs-rail { display: none !important; }
  .cs-mhero, .cs-mhead { display: flex; }
  /* От строки фильтров на телефоне остаются витрины — лентой с прокруткой. */
  .cs-bar { padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cs-bar > :not(.cs-groups) { display: none; }
  .cs-groups { width: 100%; }
  .cs-groups button { border-color: rgba(255, 255, 255, .08); background: rgba(20, 20, 26, .6); }

  #caseSections { gap: 22px; }
  .cs-shelf-h { align-items: center; gap: 9px; padding: 0; }
  .cs-shelf-h > i {
    display: block; flex: none; width: 3px; height: 16px; border-radius: 2px;
    background: linear-gradient(180deg, #ffa838, #ff5c00); box-shadow: 0 0 10px rgba(255, 122, 24, .7);
  }
  .cs-shelf-h h3 { font-size: var(--fs-body); letter-spacing: .08em; color: #f2f2f6; }
  .cs-shelf-note { font: 400 var(--fs-cap)/1 var(--f-ui); }
  .cs-shelf-line { background: linear-gradient(90deg, rgba(255, 122, 24, .3), transparent); }
  .cs-shelf-n { display: block; flex: none; font: 700 var(--fs-cap)/1 var(--f-hd); color: var(--tx-3); }
  .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .cs-card {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 13px 15px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(24, 24, 32, .96), rgba(13, 13, 18, .98));
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transform: none !important;
  }
  .cs-card-glow {
    top: 22%; width: 150%; height: 78%; transform: translate(-50%, -50%); opacity: 1;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ac) 16%, transparent), transparent 66%);
  }
  .cs-card-line, .cs-card-top, .cs-card-go { display: none; }
  /* Арт задаёт высоту сам: бокс в 104px с процентной max-height у картинки
     не держал — процент от авто-строки сетки не считается, и вертикальные
     арты (Хеллоуин, 0.85) вылезали на название и цену. Карточка как в
     макете: арт во всю ширину, под ним имя по центру и плашка цены. */
  .cs-card-art { height: auto; margin: 0; display: grid; place-items: center; }
  .cs-card-art::before { display: none; }
  .cs-card-art .case-photo { position: relative; inset: auto; width: 100%; height: auto; }
  .cs-card-art .case-photo img, .cs-card-art > svg {
    width: 100%; height: auto; max-width: 100%; max-height: none;
    transform: none !important;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .8)) drop-shadow(0 0 22px color-mix(in srgb, var(--ac) 50%, transparent));
  }
  .cs-card-name {
    margin: 4px 0 0; text-align: center; text-transform: none; letter-spacing: 0;
    font: 700 var(--fs-body)/1.15 var(--f-hd); color: #f2f2f6;
  }
  .cs-card-foot { margin: 2px 0 0; justify-content: center; }
  .cs-card-price { padding: 7px 18px; border-radius: 12px; font: 700 17px/1 var(--f-hd); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero-bg img, .cs-hero-sweep, .cs-hero-mascot i, .cs-drop.in, .cs-card-hot i, .cs-more i { animation: none; }
  .cs-card:hover, .cs-card:focus-visible { transform: none; }
}

/* ============================================================ ALIVE · СТРАНИЦА КЕЙСА

   По «Case Open — Alive v2.dc.html»: крошки с числом открытий, сцена в
   рамке hero-frame (ящик → лента → выпавшее на одном месте), маскот с
   репликой, кнопки открытия и содержимое сеткой в шесть колонок. Телефон
   — по mobVals(): шапка «назад · имя и цена · звук», сцена на арте win-bg,
   шестигранная кнопка, лента самых редких и окно «Поздравляем!». Префикс
   copen-: у .case-* и .co-* на сайте уже есть другие хозяева. */

@keyframes copFloat { 50% { transform: translateY(-12px); } }
@keyframes copFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes copSkinIn {
  0% { opacity: 0; transform: translateY(24px) scale(.7); filter: blur(8px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes copRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes copBreath { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes copRing {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .8; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes copJoy {
  0%, 100% { transform: none; } 25% { transform: translateY(-14px) rotate(-6deg); }
  50% { transform: translateY(0) scale(1.08); } 75% { transform: translateY(-10px) rotate(6deg); }
}
@keyframes copCry {
  0%, 100% { transform: none; } 30% { transform: translateY(6px) rotate(-3deg) scale(.96); }
  70% { transform: translateY(6px) rotate(3deg) scale(.96); }
}
@keyframes copIdle { 50% { transform: translateY(-6px); } }
@keyframes copPop { 0% { opacity: 0; transform: translateY(18px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes copWinIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes copWinArt { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes copSweep { 0%, 60% { left: -40%; } 100% { left: 130%; } }

#page-case.on { display: flex; flex-direction: column; gap: 16px; }
#page-case [hidden] { display: none !important; }
.copen-mhead, .copen-mbg, .copen-rays, .copen-dots, .copen-rare, .copen-all, .copen-item-sp { display: none; }

/* ---------------------------------------------------------- крошки */

.copen-crumbs { display: flex; align-items: center; gap: 12px; font: 600 var(--fs-label)/1.2 var(--f-ui); color: var(--tx-3); }
.copen-crumb {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: #a2a2b2; font: 600 var(--fs-label)/1.2 var(--f-hd);
}
.copen-crumb:hover { color: #ffa838; }
.copen-crumb-now { color: #ececf2; }
.copen-opens { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.copen-opens i { font-style: normal; color: var(--ac, #ffa838); text-shadow: 0 0 8px var(--ac, #ffa838); }
.copen-opens b { color: #ececf2; font-family: var(--f-hd); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- сцена */

.copen-stage {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 30px 40px 34px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(16, 18, 26, .7), rgba(8, 8, 12, .6) 70%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -24px var(--ac);
  transition: box-shadow .5s;
}
.copen-stage.busy { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 90px -24px var(--ac); }
.copen-frame {
  position: absolute; inset: -8px -12px; z-index: 9; pointer-events: none; box-sizing: border-box;
  border: 24px solid transparent; border-width: 24px 120px;
  border-image: url('/assets/hero-frame.webp') 60 300 60 300 / 24px 120px stretch;
  filter: drop-shadow(0 0 18px rgba(255, 122, 24, .35));
}
.copen-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--ac) 12%, transparent), transparent 62%);
}
.copen-hatch {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(255, 255, 255, .018) 13px 14px, transparent 14px 31px),
    repeating-linear-gradient(-45deg, transparent 0 47px, rgba(0, 0, 0, .28) 47px 52px, transparent 52px 89px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .85), transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .85), transparent 80%);
}
.copen-line {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: .8;
  background: linear-gradient(90deg, transparent, var(--ac), transparent);
}
.copen-flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 40%, var(--flash, rgba(255, 168, 56, .4)), transparent 65%);
}
.copen-stage.flash .copen-flash { animation: copFlash 1.1s ease-out both; }
.copen-h {
  position: relative; z-index: 2; margin: 0; text-align: center; color: #ececf2;
  font: 700 30px/1.05 var(--f-hd); letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .7);
}
.copen-slot { position: relative; z-index: 2; width: 100%; min-height: 300px; display: grid; place-items: center; }
.copen-art {
  position: relative; display: grid; place-items: center; width: min(420px, 100%); height: 280px; cursor: pointer;
}
.copen-art::before {
  content: ''; position: absolute; left: 50%; bottom: 2%; width: 96%; height: 62%;
  transform: translateX(-50%); border-radius: 50%; opacity: .3; filter: blur(6px);
  background: radial-gradient(ellipse at 50% 78%, var(--ac), transparent 68%);
}
.copen-art::after {
  content: ''; position: absolute; left: 50%; bottom: 4%; width: 56%; height: 12%;
  transform: translateX(-50%); border-radius: 50%; opacity: .48; filter: blur(4px);
  background: radial-gradient(ellipse, var(--ac), transparent 70%);
}
.copen-art > * { position: relative; z-index: 1; }
.copen-art .case-photo { width: 270px; height: 270px; display: grid; place-items: center; }
.copen-art .case-photo img, .copen-art > svg {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .7)) drop-shadow(0 0 26px color-mix(in srgb, var(--ac) 33%, transparent));
  animation: copFloat 5s ease-in-out infinite;
}
.copen-art > svg { width: 240px; height: auto; }
.case-slot.opening .copen-art { display: none; }

/* Лента на странице кейса: ячейки — только арт со свечением и полосой
   редкости снизу, как в макете. Подписи прячутся — пока лента летит, их
   всё равно не прочесть. У ленты Battle Pass свой вид, её не трогаем. */
#page-case #caseReels .reel-wrap.h .item {
  background:
    linear-gradient(var(--rc), var(--rc)) no-repeat 50% calc(100% - 6px) / 72% 2px,
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 66%);
  border-color: transparent; box-shadow: none; justify-content: center;
}
#page-case #caseReels .reel-wrap.h .item::before { display: none; }
#page-case #caseReels .reel-wrap.h .item .item-name,
#page-case #caseReels .reel-wrap.h .item .item-skin,
#page-case #caseReels .reel-wrap.h .item .item-foot,
#page-case #caseReels .reel-wrap.h .item .item-st { display: none; }
#page-case #caseReels.r1 .reel .item-art { height: 128px; }
#page-case #caseReels.r2 .reel .item-art { height: 104px; }
#page-case #caseReels .reel-wrap.h .item-art img {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 6px var(--rc));
}

/* ---------------------------------------------------------- выпавшее */

.copen-drops {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 32px; width: 100%; margin: 0 auto;
}
.copen-drops.nm { gap: 18px; }
.copen-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 300px;
  animation: copSkinIn .6s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0s);
  transition: opacity .3s;
}
.copen-drops.n2 .copen-drop { width: 260px; }
.copen-drops.nm .copen-drop { width: 210px; }
.copen-drop.sold { opacity: .35; }
.copen-drop-art { position: relative; width: 100%; height: 150px; display: grid; place-items: center; }
.copen-drops.n2 .copen-drop-art { height: 130px; }
.copen-drops.nm .copen-drop-art { height: 110px; }
.copen-drop-rays {
  position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%);
  pointer-events: none; opacity: .35; animation: copRays 24s linear infinite;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 14%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 60%);
  mask-image: radial-gradient(circle, #000 20%, transparent 60%);
}
.copen-drop.up .copen-drop-rays { opacity: .9; }
.copen-drop-glow {
  position: absolute; left: 50%; top: 52%; width: 96%; height: 74%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; filter: blur(10px);
  background: radial-gradient(ellipse, var(--rc), transparent 66%);
  animation: copBreath 2.4s ease-in-out infinite;
}
.copen-drop:not(.up) .copen-drop-glow { filter: blur(10px) opacity(.55); }
.copen-drop-floor {
  position: absolute; left: 50%; bottom: 0; width: 70%; height: 10%; transform: translateX(-50%);
  border-radius: 50%; filter: blur(4px); opacity: .7;
  background: radial-gradient(ellipse, var(--rc), transparent 70%);
}
.copen-drop-art > :last-child { position: relative; width: 92%; height: 92%; display: grid; place-items: center; }
.copen-drop-art img, .copen-drop-art svg {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .75)) drop-shadow(0 0 22px var(--rc));
}
.copen-drop-rar {
  position: relative; margin-top: 6px; color: var(--rc); text-shadow: 0 0 10px var(--rc);
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
}
.copen-drop-ww {
  position: relative; margin-top: 4px; color: #a2a2b2;
  font: 600 var(--fs-label)/1.2 var(--f-hd); letter-spacing: .05em; text-transform: uppercase;
}
.copen-drop-n {
  position: relative; text-align: center; color: #ececf2;
  font: 700 18px/1.1 var(--f-hd); text-shadow: 0 0 18px color-mix(in srgb, var(--rc) 53%, transparent);
}
.copen-drops:not(.n1) .copen-drop-n { font-size: var(--fs-ui); }
.copen-drop-p {
  position: relative; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px;
  font: 700 22px/1 var(--f-hd); color: #ffa838; text-shadow: 0 0 14px rgba(255, 122, 24, .45);
  font-variant-numeric: tabular-nums;
}
.copen-drops:not(.n1) .copen-drop-p { font-size: 16px; }
.copen-drop-sell {
  position: relative; z-index: 3; margin-top: 8px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid rgba(53, 208, 127, .45); background: rgba(53, 208, 127, .1); color: #8ceab8;
  font: 700 var(--fs-ui)/1 var(--f-hd); transition: background .15s, color .15s;
}
.copen-drop-sell:hover { background: #35d07f; color: #06210f; }
.copen-drop.sold .copen-drop-sell { visibility: hidden; }

/* ---------------------------------------------------------- количество и кнопки */

.copen-count { position: relative; z-index: 2; display: flex; gap: 9px; justify-content: center; }
.copen-count button {
  min-width: 54px; padding: 10px 0; border-radius: 9px; cursor: pointer; user-select: none;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(18, 18, 24, .7); color: #a2a2b2;
  font: 700 16px/1 var(--f-hd); font-variant-numeric: tabular-nums; transition: all .15s;
}
.copen-count button:hover { border-color: #ff7a18; color: #ececf2; }
.copen-count button.on {
  border-color: transparent; background: linear-gradient(135deg, #ffa838, #ff5c00);
  color: #180a00; box-shadow: 0 6px 18px rgba(255, 92, 0, .3);
}
.copen-actions {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: center;
}
.copen-open {
  position: relative; overflow: hidden; height: 52px; padding: 0 28px; border: 0; border-radius: 11px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00;
  font: 700 16px/1 var(--f-hd); letter-spacing: .04em;
  box-shadow: 0 10px 28px -6px rgba(255, 92, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .15s, opacity .2s;
}
.copen-open::before {
  content: ''; position: absolute; top: 0; left: -40%; width: 30%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg); animation: copSweep 3.2s ease-in-out infinite;
}
.copen-open:hover { transform: translateY(-1px); }
.copen-open:active { transform: translateY(1px); }
.copen-open b, .copen-fast b { position: relative; display: inline-flex; align-items: center; gap: 4px; font: inherit; }
.copen-fast {
  height: 52px; padding: 0 20px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255, 122, 24, .4); background: rgba(255, 122, 24, .08); color: #ffa838;
  font: 700 var(--fs-body)/1 var(--f-hd);
}
.copen-fast:hover { background: rgba(255, 122, 24, .16); }
.copen-open.off, .copen-fast.off { opacity: .55; cursor: wait; pointer-events: none; }
.copen-sellall {
  height: 52px; padding: 0 18px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid rgba(53, 208, 127, .45); background: rgba(53, 208, 127, .1); color: #8ceab8;
  font: 700 var(--fs-body)/1 var(--f-hd); transition: background .15s, color .15s;
}
.copen-sellall:hover { background: #35d07f; color: #06210f; }
.copen-owned { position: relative; z-index: 2; margin-top: -6px; font-size: var(--fs-cap); color: #8a8a9a; text-align: center; }
.copen-owned:empty { display: none; }
.copen-owned b { color: #ffa838; }

/* ---------------------------------------------------------- маскот */

.copen-mascot {
  --mg: rgba(255, 122, 24, .35);
  position: absolute; right: 14px; bottom: 8px; z-index: 5; width: 140px; height: 140px;
  display: grid; place-items: center; pointer-events: none;
}
.copen-mascot.joy { --mg: rgba(53, 208, 127, .5); }
.copen-mascot.cry { --mg: rgba(235, 75, 75, .45); }
.copen-mascot i {
  position: absolute; left: 50%; top: 56%; width: 120px; height: 120px; border-radius: 50%;
  transform: translate(-50%, -50%); animation: copRing 3s ease-in-out infinite;
  background: radial-gradient(circle, var(--mg), transparent 65%);
}
.copen-mascot img {
  position: relative; width: 150px; height: 120px; object-fit: contain;
  filter: drop-shadow(0 0 18px var(--mg)); animation: copIdle 3s ease-in-out infinite;
}
.copen-mascot.joy img { animation: copJoy .9s ease-in-out infinite; }
.copen-mascot.cry img { animation: copCry 1.6s ease-in-out infinite; }
.copen-say {
  position: absolute; left: -8px; top: 8px; transform: translateX(-100%);
  padding: 6px 10px; border-radius: 10px 10px 2px 10px; white-space: nowrap;
  background: rgba(20, 14, 10, .92); border: 1px solid rgba(255, 122, 24, .45);
  font: 700 var(--fs-ui)/1.2 var(--f-hd); color: #ececf2; animation: copPop .3s ease both;
}
/* На узком десктопе маскот лёг бы на кнопки: там ему нет места. */
@media (max-width: 1240px) { .copen-mascot { display: none; } }

/* ---------------------------------------------------------- содержимое */

.copen-list {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .06); background: rgba(13, 13, 18, .55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.copen-list-h { display: flex; align-items: center; gap: 12px; }
.copen-list-h h3 { margin: 0; font: 700 16px/1 var(--f-hd); color: #ececf2; }
.copen-list-h h3 i { font-style: normal; color: #ffa838; text-shadow: 0 0 8px rgba(255, 122, 24, .6); }
.copen-list-line { flex: 1; }
.copen-sort {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px;
  background: rgba(8, 8, 10, .7); border: 1px solid #26262f;
}
.copen-sort button {
  border: 0; background: transparent; color: #a2a2b2; padding: 7px 12px; border-radius: 6px;
  cursor: pointer; font: 700 var(--fs-cap)/1 var(--f-ui);
}
.copen-sort button:hover { color: #ececf2; }
.copen-sort button.on { background: #ff7a18; color: #180a00; box-shadow: 0 0 14px rgba(255, 122, 24, .5); }
.copen-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1320px) { .copen-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .copen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.copen-item {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 10px 11px 9px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(178deg, rgba(24, 24, 32, .72), rgba(10, 10, 15, .75));
  transition: transform .18s, border-color .2s;
}
.copen-item:hover { transform: translateY(-3px); }
.copen-item.hit { border-color: var(--rc); box-shadow: 0 0 30px -8px var(--rc); }
.copen-item-glow {
  position: absolute; left: 50%; top: 22%; width: 274px; height: 110%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, var(--rc), transparent 60%); opacity: .16; pointer-events: none;
}
.copen-item-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rc); box-shadow: 0 0 10px var(--rc); }
.copen-item-p {
  position: absolute; top: 8px; right: 8px; z-index: 2; padding: 2px 6px; border-radius: 5px;
  background: rgba(0, 0, 0, .6); color: var(--pc); font: 700 var(--fs-cap)/1.3 var(--f-hd); font-variant-numeric: tabular-nums;
}
.copen-item-art { position: relative; height: 84px; margin-top: 8px; display: flex; align-items: center; justify-content: center; }
.copen-item-art::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 80%; height: 70%; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: .28; filter: blur(6px); background: radial-gradient(ellipse, var(--rc), transparent 68%);
}
.copen-item-art > * { position: relative; width: 90%; height: 100%; display: grid; place-items: center; }
.copen-item-art img, .copen-item-art svg {
  max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7));
}
.copen-item-w {
  position: relative; margin-top: 6px; color: #8a8a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 var(--fs-cap)/1.2 var(--f-hd); letter-spacing: .05em; text-transform: uppercase;
}
.copen-item-n {
  position: relative; color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 var(--fs-ui)/1.2 var(--f-hd);
}
.copen-item-f { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.copen-item-f span {
  min-width: 0; color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
}
.copen-item-f b {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font: 700 var(--fs-label)/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- окно «Поздравляем!» */

.copen-win {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; overflow: hidden;
  background: #06060a; font-family: var(--f-ui); animation: copWinIn .45s cubic-bezier(.2, .8, .3, 1) both;
}
.copen-win-bg {
  position: absolute; left: 50%; top: 0; width: auto; height: 100%; min-width: 100%; max-width: none;
  transform: translateX(-50%); object-fit: cover; object-position: center 42%;
}
.copen-win-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 10, .72) 0%, rgba(6, 6, 10, .28) 34%, rgba(6, 6, 10, .55) 62%, rgba(6, 6, 10, .94) 100%);
}
.copen-win-x {
  position: absolute; right: 16px; top: 16px; z-index: 4; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(10, 10, 14, .6); backdrop-filter: blur(8px); color: #ececf2; font: 300 22px/1 var(--f-ui);
}
.copen-win-in {
  position: relative; z-index: 3; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center;
  padding: 70px 20px calc(26px + env(safe-area-inset-bottom, 0px));
}
.copen-win h2 {
  margin: 0; text-align: center; color: #fff; font: 700 27px/1 var(--f-hd); letter-spacing: .06em;
  text-transform: uppercase; text-shadow: 0 0 26px rgba(255, 122, 24, .7), 0 2px 14px rgba(0, 0, 0, .8);
}
.copen-win p {
  margin: 9px 0 0; text-align: center; color: #e7d9cd; font: 600 var(--fs-ui)/1.3 var(--f-ui);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
.copen-win-art { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; margin-top: 6px; }
.copen-win-art > i {
  position: absolute; left: 50%; top: 52%; width: 290px; height: 290px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; animation: copBreath 3s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 138, 42, .42), transparent 66%);
}
.copen-win-art > :not(i) {
  position: relative; width: 98%; height: 100%; max-height: 320px; display: grid; place-items: center;
  animation: copWinArt .7s cubic-bezier(.2, .8, .3, 1) both;
}
.copen-win-art img, .copen-win-art svg {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .85)) drop-shadow(0 0 30px rgba(255, 138, 42, .35));
}
.copen-win-tx { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 4px; }
#caseWinWeapon { font: 600 var(--fs-cap)/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #9a9aaa; }
#caseWinName { font: 700 27px/1 var(--f-hd); color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); text-align: center; }
#caseWinPrice {
  display: inline-flex; align-items: center; gap: 5px; font: 700 30px/1 var(--f-hd); color: #ffa838;
  text-shadow: 0 0 24px rgba(255, 122, 24, .65); font-variant-numeric: tabular-nums;
}
#caseWinWear { font: 600 var(--fs-cap)/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.copen-win-btns { position: relative; width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
#caseWinKeep {
  width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(180deg, #ffb44a, #ff7a18);
  color: #180a00; font: 700 17px/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 14px 34px -8px rgba(255, 122, 24, .65);
}
#caseWinSell {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(255, 168, 56, .42); border-radius: 14px; cursor: pointer;
  background: rgba(14, 12, 14, .72); backdrop-filter: blur(8px); color: #f0e3d6;
  font: 700 var(--fs-body)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
}
#caseWinSell span { display: inline-flex; align-items: center; gap: 4px; color: #ffa838; }
#caseWinAgain {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 12px; cursor: pointer; background: transparent; color: #9a9aaa;
  font: 600 var(--fs-label)/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
}

/* ---------------------------------------------------------- телефон */

@media (max-width: 880px) {
  /* Страница кейса на телефоне — во всю ширину, без полей рабочей колонки. */
  #page-case.on { gap: 0; margin: -18px -12px 0; }
  .copen-crumbs, .copen-frame, .copen-hatch, .copen-line, .copen-h,
  .copen-count, .copen-fast, .copen-mascot, .copen-sort { display: none; }

  .copen-mhead { display: flex; align-items: center; gap: 12px; padding: 10px 14px 6px; position: relative; z-index: 6; }
  .copen-mbtn {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
    border-radius: 12px; background: rgba(18, 18, 24, .7); border: 1px solid rgba(255, 255, 255, .09);
    color: #ececf2; font: 400 18px/1 var(--f-ui);
  }
  .copen-snd { color: #ffa838; font-size: 16px; }
  .copen-snd.off { color: var(--tx-3); }
  .copen-mtitle { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .copen-mtitle b {
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff;
    font: 700 17px/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase;
  }
  .copen-mtitle span {
    display: flex; align-items: center; gap: 6px; color: #ffa838;
    font: 700 var(--fs-label)/1 var(--f-hd); font-variant-numeric: tabular-nums;
  }
  .copen-mtitle span i { font-style: normal; color: var(--ac); }

  .copen-stage {
    padding: 0; gap: 0; border-radius: 0; background: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .copen-stage.busy { box-shadow: none; }
  .copen-mbg { display: block; position: absolute; left: 0; right: 0; top: 0; height: 376px; overflow: hidden; z-index: 0; }
  .copen-mbg img {
    position: absolute; left: 50%; top: 0; height: 100%; min-width: 100%; max-width: none;
    transform: translateX(-50%); object-fit: cover; object-position: center 38%;
  }
  .copen-mbg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6, 6, 10, .5) 0%, transparent 26%, transparent 70%, rgba(6, 6, 10, .85) 100%);
  }
  .copen-glow {
    inset: auto; left: 50%; top: 165px; width: 300px; height: 300px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--ac) 12%, transparent), transparent 66%);
  }
  .copen-rays {
    display: block; position: absolute; left: 50%; top: 165px; width: 340px; height: 340px;
    transform: translate(-50%, -50%); pointer-events: none; opacity: .5; transition: opacity .3s;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ac) 12%, transparent) 0deg 6deg, transparent 6deg 18deg);
    -webkit-mask: radial-gradient(circle, transparent 32%, #000 46%, transparent 72%);
    mask: radial-gradient(circle, transparent 32%, #000 46%, transparent 72%);
  }
  .copen-stage.busy .copen-rays { opacity: 1; }
  .copen-slot { height: 376px; min-height: 0; }
  .copen-art { width: 250px; height: 250px; margin-top: -30px; }
  .copen-art::before, .copen-art::after { display: none; }
  .copen-art .case-photo { width: 250px; height: 250px; }
  .copen-art .case-photo img, .copen-art > svg {
    animation: none;
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .8)) drop-shadow(0 0 34px color-mix(in srgb, var(--ac) 33%, transparent));
  }
  /* Лента — полосой во всю ширину поперёк сцены, как в макете. */
  #page-case #caseReels .reel-wrap.h {
    padding: 11px 0; border-radius: 0; border-left: 0; border-right: 0;
    border-color: rgba(255, 168, 56, .45);
    background: linear-gradient(180deg, rgba(8, 8, 12, .94), rgba(14, 14, 20, .96));
    box-shadow: 0 18px 44px -18px #000, inset 0 0 40px -14px rgba(255, 138, 42, .35);
  }
  #page-case #caseReels.r1 .reel .item-art { height: 96px; }
  .copen-drops.n1 .copen-drop { width: min(300px, 90%); }

  .copen-actions { position: relative; z-index: 5; width: calc(100% - 28px); margin: -46px 14px 0; flex-direction: column; gap: 14px; }
  .copen-open {
    width: 100%; min-height: 62px; height: auto; padding: 0 30px; border-radius: 0;
    border: 1px solid rgba(255, 168, 56, .55);
    background: linear-gradient(180deg, rgba(38, 24, 10, .92), rgba(18, 12, 8, .95));
    clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%);
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .9), inset 0 0 26px -8px rgba(255, 138, 42, .5);
    color: #ffe0bd; font: 700 16px/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase;
  }
  .copen-open::before {
    left: 0; right: 0; width: auto; height: 1px; transform: none; animation: none;
    background: linear-gradient(90deg, transparent, #ffa838, transparent);
  }
  .copen-open:hover, .copen-open:active { transform: none; }
  .copen-sellall { width: 100%; }
  .copen-owned { margin-top: 10px; }

  .copen-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 14px; }
  .copen-dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); transition: all .25s; }
  .copen-dots span.on { width: 18px; background: #ffa838; }

  .copen-rare { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
  .copen-rare-h {
    display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #c9c9d6;
    font: 700 var(--fs-cap)/1 var(--f-hd); letter-spacing: .16em; text-transform: uppercase;
  }
  .copen-rare-h i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12)); }
  .copen-rare-h i:last-child { background: linear-gradient(90deg, rgba(255, 255, 255, .12), transparent); }
  .copen-rare-row {
    display: flex; gap: 10px; overflow-x: auto; padding: 2px 14px 4px;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .copen-rare-row::-webkit-scrollbar { display: none; }
  .copen-rc {
    position: relative; flex: none; width: 96px; display: flex; flex-direction: column; gap: 7px;
    padding: 9px 8px 10px; border-radius: 12px; scroll-snap-align: start;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 11%, transparent), rgba(12, 12, 17, .96));
  }
  .copen-rc.first { border-color: #ffa838; box-shadow: 0 0 26px -8px rgba(255, 168, 56, .75); }
  .copen-rc-art { height: 52px; display: grid; place-items: center; }
  .copen-rc-art > * { width: 100%; height: 100%; display: grid; place-items: center; }
  .copen-rc-art img, .copen-rc-art svg { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); }
  .copen-rc-w {
    color: #8a8a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 600 10px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase;
  }
  .copen-rc-n { color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 var(--fs-label)/1.05 var(--f-hd); }
  .copen-rc-p { display: flex; align-items: center; gap: 4px; color: var(--pc); font: 700 var(--fs-micro)/1 var(--f-hd); font-variant-numeric: tabular-nums; }
  .copen-rc-p i { font-style: normal; font-size: 9px; }

  .copen-list {
    margin-top: 20px; padding: 0 14px 8px; border: 0; border-radius: 0; background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .copen-list-h { gap: 10px; }
  .copen-list-h h3 {
    font: 700 var(--fs-cap)/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: #c9c9d6; white-space: nowrap;
  }
  .copen-list-h h3 i { display: none; }
  .copen-list-line { height: 1px; background: rgba(255, 255, 255, .1); }
  .copen-all {
    flex: none; display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; cursor: pointer;
    border-radius: 9px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(20, 20, 26, .8);
    color: #c9c9d6; font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  }
  .copen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .copen-item {
    gap: 6px; padding: 9px 8px 10px; border-color: rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 9%, transparent), rgba(12, 12, 17, .96));
  }
  .copen-item:hover { transform: none; }
  .copen-item-glow, .copen-item-bar, .copen-item-p, .copen-item-f { display: none; }
  .copen-item-art { height: 48px; margin: 0; }
  .copen-item-art::before { display: none; }
  .copen-item-w { margin: 0; font: 600 10px/1 var(--f-ui); letter-spacing: .06em; }
  .copen-item-n { font: 700 var(--fs-cap)/1.05 var(--f-hd); }
  .copen-item-sp {
    display: flex; align-items: center; gap: 4px; color: var(--pc);
    font: 700 var(--fs-micro)/1 var(--f-hd); font-variant-numeric: tabular-nums;
  }
  .copen-item-sp i { font-style: normal; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .copen-art .case-photo img, .copen-art > svg, .copen-open::before, .copen-mascot i, .copen-mascot img,
  .copen-drop, .copen-drop-rays, .copen-drop-glow, .copen-win, .copen-win-art > *, .copen-stage.flash .copen-flash { animation: none; }
}

/* ============================================================ ALIVE · ПРАВКИ ПО МАКЕТУ

   Меню и мелочи, сведённые к макету после первого прохода. */

/* Боковое меню: пункт «Скоро» (Aviator) — виден, но не ведёт никуда. */
.nav-btn.soon { opacity: .45; pointer-events: none; cursor: default; white-space: nowrap; }
.nav-btn.soon .nav-soon { flex: none; margin-left: 8px; }
.nav-soon {
  margin-left: auto; padding: 2px 6px; border-radius: 4px;
  font: 700 var(--fs-micro)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: #ffa838; border: 1px solid rgba(255, 168, 56, .45); background: rgba(255, 122, 24, .1);
}

/* В макете у бокового меню нет подписи о симуляторе и блока «Задания
   дня»: задания живут в кабинете, как на макете профиля. */
.side .nav-note, .side .quests, .mnd-quests { display: none !important; }

/* Окно «Поздравляем!» переехало к body — [hidden] должен работать и там. */
.copen-win[hidden] { display: none !important; }

/* Арт выпавшего предмета: проценты высоты у картинки в grid-ячейке с
   auto-треком не срабатывают, и она вылезала на подписи. Абсолютом
   картинка встаёт ровно в свою рамку. */
.copen-drop-art > :last-child {
  position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; margin: 0;
  object-fit: contain;
}
.copen-drop-art > svg:last-child { left: 10%; width: 80%; }
.copen-win-art > :not(i) { position: absolute; inset: 0; margin: auto; width: 98%; height: 100%; max-height: none; }

/* Чип акций: в макете Alive вместо него ссылка «Акции» в навигации шапки. */
.topbar .tb-promo { display: none !important; }

/* ============================================================ ALIVE · АПГРЕЙДЕР

   По «Upgrader — Alive.dc.html»: сцена-арт ангара (upg/scene.webp) с
   подиумами, карточки ставки и цели над ними, кольцо шанса с металлическим
   безелем ring2.png и разрядами к подиумам, кнопка «Улучшить», капсулы
   Win chance / Multiplier и две панели — «Ваш инвентарь» и «Выберите
   предмет для улучшения». Телефон — по mobile-ветке макета: карточки «Ваш
   предмет / Вы получите», кольцо, «Множитель», кнопка, «Быстрый выбор»,
   выбор предметов шторкой. Префикс upa-: у .upg-* и .slot давно свои
   правила, и спорить с ними по одному свойству — путь к ошибке. */

@keyframes upaBreathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes upaPop { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes upaFlick {
  0%, 100% { opacity: .8; filter: blur(4px); } 30% { opacity: 1; filter: blur(3.5px); }
  60% { opacity: .88; filter: blur(4.5px); }
}
@keyframes upaTongue {
  0%, 100% { transform: translateY(0) scaleY(1) skewX(0); }
  25% { transform: translateY(-1px) scaleY(1.15) skewX(-4deg); }
  50% { transform: translateY(.5px) scaleY(.92) skewX(3deg); }
  75% { transform: translateY(-.5px) scaleY(1.08) skewX(-2deg); }
}
@keyframes upaBeamL { 0% { left: 100%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: -6%; opacity: 0; } }
@keyframes upaBeamR { 0% { left: -6%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes upaWinPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

#page-upgrade.on { display: flex; flex-direction: column; gap: 18px; }
#page-upgrade [hidden] { display: none !important; }

/* ---------------------------------------------------------- сцена */

.upa-scene {
  --in-rc: #4ea3ff; --out-rc: #ff7a18;
  position: relative; z-index: 3; isolation: isolate;
  aspect-ratio: 1673 / 941; margin: -22px -24px -18%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.upa-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 7, 10, .45), transparent 14%, transparent 62%,
      rgba(7, 7, 10, .55) 78%, rgba(7, 7, 10, .92) 94%),
    url('/assets/upg/scene.webp') center top / 100% auto no-repeat;
}

/* ---- карточки ставки и цели ---- */
.upa-card { position: absolute; top: 5.5%; z-index: 6; width: 16%; min-width: 186px; }
.upa-card.in { left: 15%; }
/* Правую карточку («Вы получите») и её скин слегка сдвигаем влево — по
   референсу они стояли чуть правее подиума (решение владельца). */
.upa-card.out { right: 15%; }
.upa-card-k, .upa-card-art, .upa-card-xm, .upa-card-empty, .upa-card-empty .m { display: none; }
.upa-card-box {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px 18px; border-radius: 12px;
  background: rgba(10, 10, 14, .72); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.upa-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.upa-card-w { min-height: 16px; font: 600 var(--fs-label)/1.2 var(--f-ui); color: #a2a2b2; }
.upa-x {
  flex: none; width: 22px; height: 22px; margin: -4px -6px 0 0; padding: 0; border: 0;
  background: transparent; color: #a2a2b2; font: 400 18px/1 var(--f-ui); cursor: pointer;
}
.upa-x:hover { color: #ececf2; }
.upa-card-n {
  font: 700 21px/1.15 var(--f-hd); color: #ececf2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upa-card-x { min-height: 16px; font: 400 var(--fs-label)/1.3 var(--f-ui); color: #8a8a9a; }
.upa-card-f { margin-top: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.upa-card-p {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 20px/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums;
}
/* Пусто — пунктирная подсказка вместо карточки, как в макете. */
.upa-card:not(.filled) .upa-card-box {
  padding: 18px; border: 1px dashed rgba(255, 122, 24, .4);
  background: rgba(10, 10, 14, .6); box-shadow: none;
}
.upa-card:not(.filled) .upa-card-box > :not(.upa-card-empty) { display: none; }
.upa-card:not(.filled) .upa-card-empty { display: block; font-size: var(--fs-label); line-height: 1.4; color: #a2a2b2; }
.upa-card:not(.filled) .upa-card-empty .d { display: inline; }

/* ---- предметы на подиумах ---- */
.upa-art {
  position: absolute; z-index: 5; display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  transform: translateX(-50%); filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .75));
}
.upa-art.in { left: 22%; bottom: 47.5%; width: 25%; }
.upa-art.in:not([data-n="0"]):not([data-n="1"]) { bottom: 50.5%; width: 34%; }
.upa-art.out { left: 78%; bottom: 47.5%; width: 25%; }
.upa-art-it {
  position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 3; cursor: pointer;
  animation: upaPop .3s cubic-bezier(.2, .8, .3, 1) both;
}
.upa-art-it > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: none; }

/* ---- кольцо ---- */
.upa-scene .upa-dial {
  position: absolute; left: 50%; top: 13.5%; z-index: 6; transform: translateX(-50%);
  display: block; width: 300px; height: 300px; padding: 0;
}
.upa-halo {
  position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; animation: upaBreathe 4s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 122, 24, .32), rgba(255, 122, 24, .08) 40%, transparent 62%);
}
.upa-disc {
  position: absolute; left: 50%; top: 50%; width: 81.3%; height: 81.3%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 35%, #15161d, #090a0e 70%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 122, 24, .35);
}
.upa-disc::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
}
.upa-bezel {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 130.7%; height: 130.7%; max-width: none;
  transform: translate(-50%, -50%); pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(255, 122, 24, .3));
}
.upa-dial .ring { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-width: none; }
.upa-dial .ring-center { z-index: 3; }
.upa-dial .ring-center > div { display: flex; flex-direction: column; align-items: center; margin-top: -26px; }
.upa-dial .ring-sub {
  margin: 0 0 6px; font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em;
  text-transform: uppercase; color: #d8d8e2; opacity: 1;
}
.upa-dial .ring-val,
.upa-dial .ring.bonus-on:not(.win):not(.lose) .ring-val {
  font: 700 50px/1 var(--f-hd); letter-spacing: .01em; color: #ffa838;
  text-shadow: 0 0 30px rgba(255, 122, 24, .75), 0 0 60px rgba(255, 122, 24, .4);
  font-variant-numeric: tabular-nums;
}
.upa-dial .ring.bonus-flow .ring-val { color: #9ad0ff; text-shadow: 0 0 30px rgba(78, 163, 255, .9), 0 0 60px rgba(78, 163, 255, .5); }
.upa-dial .ring.win .ring-val {
  color: #7ce4ae; text-shadow: 0 0 30px rgba(53, 208, 127, .7);
  animation: upaWinPop .5s cubic-bezier(.2, .8, .3, 1) both;
}
.upa-dial .ring.lose .ring-val { color: #eb4b4b; text-shadow: 0 0 30px rgba(235, 75, 75, .6); }
.upa-dial .ring-note { margin-top: 4px; min-height: 14px; font: 700 var(--fs-ui)/1 var(--f-hd); color: #7fc0ff; }
.upa-dial .ring-mascot {
  position: absolute; left: 50%; top: auto; bottom: 22px; z-index: 3; width: 88px; height: 88px;
  margin-left: -44px; object-fit: contain; transform: scale(.88); transform-origin: 50% 100%;
  filter: drop-shadow(0 0 14px rgba(255, 122, 24, .7)); opacity: 1;
}
.upa-dial .r-head { opacity: 1 !important; }
.upa-dial .r-fill, .upa-dial .r-trail { display: none; }
.upa-dial .ring.win .r-needle { stroke: #7ce4ae; }
.upa-dial .ring.lose .r-needle { stroke: #eb4b4b; }
.upa-dial .bs-label { font: 600 var(--fs-ui)/1 var(--f-hd); fill: #ffd6b0; }
.upa-dial .bs.wild .bs-label { fill: #180a00; }
.upa-dial .bs.hit .bs-label { fill: #fff; font-weight: 700; }
.upa-dial .roll-out {
  position: absolute; left: 50%; top: calc(100% + 1px); z-index: 4; transform: translateX(-50%);
  margin: 0; min-height: 0; white-space: nowrap; text-align: center; font-size: var(--fs-label);
}

/* Разряды от подиумов в кольцо: слева цветом ставки, справа — цели. */
.upa-beam {
  position: absolute; top: 50%; z-index: 0; width: 74px; height: 30px; margin-top: -15px; pointer-events: none;
}
.upa-beam.l { left: -104px; --bc: var(--in-rc); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--in-rc) 70%, transparent)); }
.upa-beam.r { right: -104px; --bc: var(--out-rc); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--out-rc) 70%, transparent)); }
.upa-beam::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 18px; margin-top: -9px;
  filter: blur(5px); animation: upaTongue 1.3s ease-in-out infinite;
}
.upa-beam.l::before {
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bc) 55%, transparent) 45%, #fff);
}
.upa-beam.r::before {
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--bc) 55%, transparent) 55%, transparent);
}
.upa-beam i { position: absolute; }
.upa-beam i:nth-child(1) { inset: 0; animation: upaFlick .9s ease-in-out infinite; }
.upa-beam.l i:nth-child(1) {
  transform-origin: 100% 50%;
  background: radial-gradient(ellipse at 100% 50%, color-mix(in srgb, var(--bc) 85%, transparent),
    color-mix(in srgb, var(--bc) 35%, transparent) 40%, transparent 75%);
}
.upa-beam.r i:nth-child(1) {
  transform-origin: 0 50%;
  background: radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--bc) 85%, transparent),
    color-mix(in srgb, var(--bc) 35%, transparent) 40%, transparent 75%);
}
.upa-beam i:nth-child(2) { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; box-shadow: 0 0 12px 3px var(--bc); }
.upa-beam.l i:nth-child(2) { background: linear-gradient(90deg, transparent, #fff); }
.upa-beam.r i:nth-child(2) { background: linear-gradient(90deg, #fff, transparent); }
.upa-beam i:nth-child(3) {
  top: 50%; width: 22px; height: 6px; margin-top: -3px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 16px 6px var(--bc);
}
.upa-beam.l i:nth-child(3) { animation: upaBeamL 1.3s linear infinite; }
.upa-beam.r i:nth-child(3) { animation: upaBeamR 1.3s linear infinite; }

/* ---- кнопка ---- */
.upa-go {
  position: absolute; left: 50%; top: calc(9% + 322px); z-index: 7; transform: translateX(-50%);
  width: 300px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #ff8a2a, #ff5c00); color: #180a00;
  border: 1px solid rgba(255, 210, 59, .55);
  font: 700 16px/1.4 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 28px rgba(255, 92, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: opacity .2s;
}
.upa-go.off { opacity: .5; cursor: default; }

/* ---------------------------------------------------------- капсулы */

.upa-presets {
  position: relative; z-index: 7; margin-top: -8px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
}
.upa-prow { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.upa-prow .preset-grp, .upa-cash {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 16px; margin: 0;
  border-radius: 999px; border: 1px solid rgba(255, 122, 24, .22);
  background: linear-gradient(90deg, rgba(255, 122, 24, .16), rgba(20, 20, 28, .9) 45%, rgba(14, 14, 20, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.upa-prow .preset-grp::before, .upa-prow .preset-grp::after { content: none; display: none; }
.upa-prow .preset-tag, .upa-cash .cl-k {
  margin: 0 6px 0 0; font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em;
  text-transform: uppercase; color: #d8d8e2; white-space: nowrap;
}
.upa-prow .preset-tag .m { display: none; }
.upa-prow .preset {
  min-width: 64px; height: 36px; padding: 0 16px; border-radius: 999px; display: grid; place-items: center;
  cursor: pointer; border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(circle at 50% 30%, #1b1b24, #0b0b10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .15s, box-shadow .2s;
}
.upa-prow .preset:hover { transform: scale(1.06); border-color: rgba(255, 255, 255, .16); }
.upa-prow .preset.on {
  border-color: rgba(255, 168, 56, .9); background: radial-gradient(circle at 50% 30%, #2a1a10, #0c0c11);
  box-shadow: 0 0 18px rgba(255, 122, 24, .55), inset 0 0 12px rgba(255, 122, 24, .25);
}
.upa-prow .preset .p-ch { font: 700 17px/1 var(--f-hd); letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; }
.upa-prow .preset.mul .p-ch { color: #ff8a2a; }
.upa-prow .preset .p-mu { display: none; }
.upa-cash { gap: 10px; }
.upa-cash input[type=range] { width: 120px; margin: 0; }
.upa-cash .cl-num, .upa-cash .cl-num:hover, .upa-cash .cl-num:focus {
  width: 96px; height: 32px; padding: 0 12px; border-radius: 999px; box-shadow: none;
  background: rgba(8, 8, 10, .7); border: 1px solid #26262f; color: #ececf2;
  font: 700 var(--fs-ui)/1 var(--f-hd); font-variant-numeric: tabular-nums;
}
.upa-cash .cl-num:focus { border-color: #ff7a18; }

/* ---------------------------------------------------------- панели */

.upa-panels {
  position: relative; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  width: 100%; max-width: 1360px; margin: 0 auto;
}
.upa-panel {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 20px 20px 18px; border-radius: 16px; border: 1px solid rgba(255, 122, 24, .18);
  background: linear-gradient(180deg, rgba(15, 15, 21, .95), rgba(9, 9, 13, .97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.upa-panel h3 {
  margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  font: 600 var(--fs-ui)/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #ececf2;
}
.upa-note { font: 400 var(--fs-cap)/1 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--tx-3); }
.upa-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.upa-filters input[type=search], .upa-filters select,
.upa-filters input[type=search]:hover, .upa-filters select:hover {
  height: 36px; padding: 0 12px; border-radius: 10px; outline: none; box-shadow: none;
  background-color: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1);
  color: #ececf2; font: 400 var(--fs-label)/1 var(--f-ui);
}
.upa-filters input[type=search]:focus, .upa-filters select:focus { border-color: rgba(255, 122, 24, .5); box-shadow: none; }
.upa-filters input[type=search] { flex: 1; min-width: 120px; }
.upa-filters select { padding-right: 30px; }
.upa-refresh {
  flex: none; width: 38px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1);
  color: #a2a2b2; cursor: pointer; font-size: var(--fs-body);
}
.upa-refresh:hover { color: #ffa838; border-color: rgba(255, 122, 24, .4); }
.upa-sw {
  display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none;
  font: 400 var(--fs-label)/1 var(--f-ui); color: #ececf2; cursor: pointer; white-space: nowrap;
}
.upa-sw > span {
  position: relative; width: 40px; height: 22px; border-radius: 12px; box-sizing: border-box;
  background: #1e1e26; border: 1px solid #33333f; transition: background .2s;
}
.upa-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #6a6a7a; transition: left .2s; }
.upa-sw.on > span { background: #ff7a18; border-color: #ff7a18; }
.upa-sw.on i { left: 19px; background: #180a00; }
.upa-gw { position: relative; }
.upa-gw::after {
  content: ''; position: absolute; left: 0; right: 8px; bottom: 0; height: 74px; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 9, 13, 0), rgba(9, 9, 13, .8) 55%, rgba(9, 9, 13, .97));
}
.upa-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px;
  height: 436px; overflow-y: auto; padding-right: 6px; align-content: start; grid-auto-rows: max-content;
  scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .5) transparent;
}
.upa-grid .up-empty { grid-column: 1 / -1; }
.upa-more {
  align-self: center; padding: 8px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255, 122, 24, .35); background: rgba(255, 122, 24, .08);
  color: #ffa838; font: 700 var(--fs-label)/1 var(--f-hd);
}

/* Карточки предметов в панелях — как в макете: полоса редкости сверху,
   арт со свечением, оружие, имя, износ и цена. */
.upa-grid .item {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  padding: 10px 10px 9px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, rgba(32, 32, 42, .9), rgba(14, 14, 19, .96));
  border: 1px solid rgba(255, 255, 255, .07); box-shadow: none;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.upa-grid .item:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .14); }
.upa-grid .item::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; display: block; opacity: 1;
  border-radius: 0; background: var(--rc); box-shadow: 0 0 12px var(--rc);
}
.upa-grid .item::after { content: none; }
.upa-grid .item.sel { border-color: #ff7a18; box-shadow: 0 0 0 1px #ff7a18, 0 8px 24px rgba(255, 122, 24, .25); }
.upa-grid .item.sel::after {
  content: '✓'; position: absolute; inset: 8px 8px auto auto; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font: 700 var(--fs-cap)/1 var(--f-hd); color: #180a00;
  background: linear-gradient(135deg, #ffa838, #ff5c00); box-shadow: 0 0 12px rgba(255, 122, 24, .7);
}
.upa-grid .item-art { position: relative; height: 74px; margin: 2px 0 8px; display: grid; place-items: center; background: none; }
.upa-grid .item-art::before {
  content: ''; position: absolute; left: 50%; top: 52%; width: 130%; height: 120%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .16;
  background: radial-gradient(ellipse at center, var(--rc), transparent 62%);
}
.upa-grid .item-art .skin-img, .upa-grid .item-art > svg {
  position: relative; width: 100%; height: 100%; object-fit: contain; padding: 0;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7));
}
.upa-grid .item-name {
  font: 600 var(--fs-cap)/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upa-grid .item-skin {
  margin-top: 4px; font: 700 var(--fs-body)/1.15 var(--f-hd); color: #ececf2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upa-grid .item-foot { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.upa-grid .item-wear { font: 600 var(--fs-cap)/1 var(--f-ui); color: var(--tx-3); }
.upa-grid .item-price {
  display: inline-flex; align-items: center; gap: 3px;
  font: 700 var(--fs-body)/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums;
}
.upa-grid .item-p {
  position: absolute; top: 8px; right: 8px; z-index: 2; padding: 2px 6px; border-radius: 5px;
  background: rgba(0, 0, 0, .6); font: 700 var(--fs-micro)/1.3 var(--f-hd); color: #7ce4ae;
}
.upa-grid .item.sel .item-p { right: 34px; }
.upa-grid .item.far { opacity: .55; }
.upa-grid .item.far .item-p { color: #ff9a9a; }
.upa-grid .item-st { position: absolute; top: 8px; left: 8px; z-index: 2; font: 700 10px/1 var(--f-hd); color: #ffa838; }

@media (min-width: 881px) { .upa-quick { display: none !important; } }
@media (max-width: 1180px) { .upa-panels { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- шторка выбора (телефон) */

.upa-picker { display: flex; flex-direction: column; gap: 12px; }
.upa-pk-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.upa-pk-h b { font: 700 16px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #ececf2; }
.upa-pk-x {
  width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: #a2a2b2; font: 400 18px/1 var(--f-ui);
}
.upa-pk-list { display: flex; flex-direction: column; gap: 10px; }
.upa-pk {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  min-height: 96px; padding: 14px 16px 14px 18px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(32, 32, 42, .92), rgba(14, 14, 19, .96));
}
.upa-pk.on { border-color: #ff7a18; box-shadow: 0 0 0 1px #ff7a18; }
.upa-pk::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--rc); }
.upa-pk-art { position: relative; flex: none; width: 104px; height: 68px; }
.upa-pk-art > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.upa-pk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.upa-pk-tx b { font: 700 17px/1.15 var(--f-hd); color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upa-pk-tx span {
  display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden;
  font: 600 var(--fs-micro)/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3);
}
.upa-pk-tx span i { flex: none; width: 1px; height: 11px; background: rgba(255, 255, 255, .14); }
.upa-pk-p { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 700 19px/1 var(--f-hd); color: #ffa838; }
.upa-pk-empty { margin: 24px 0; text-align: center; color: #8a8a9a; }

/* ---------------------------------------------------------- телефон */

@media (max-width: 880px) {
  /* Страница — сеткой по макету: карточки в ряд, кольцо, множитель,
     кнопка, быстрый выбор. Сцена «растворяется» (display: contents), и её
     узлы встают в эту же сетку — id и обработчики остаются прежними. */
  #page-upgrade.on {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; align-items: start;
    grid-template-areas: "in out" "dial dial" "pre pre" "go go" "quick quick";
    margin: -18px -12px 0; padding: 12px 12px 28px;
    background:
      linear-gradient(180deg, rgba(6, 6, 10, .62) 0%, rgba(6, 6, 10, .5) 40%, rgba(6, 6, 10, .82) 100%),
      #07070a url('/assets/upg/page-bg.webp') center 30% / cover no-repeat;
  }
  .upa-scene { display: contents; }
  .upa-bg, .upa-art, .upa-beam, .upa-halo, .upa-disc, .upa-panels { display: none; }

  .upa-card {
    position: relative; top: auto; left: auto; right: auto; width: auto; min-width: 0;
    display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  }
  .upa-card.in { grid-area: in; left: auto; }
  .upa-card.out { grid-area: out; right: auto; }
  .upa-card-k { display: block; font: 600 var(--fs-cap)/1 var(--f-ui); color: #8a8a9a; }
  .upa-card-box, .upa-card:not(.filled) .upa-card-box {
    min-height: 190px; gap: 8px; padding: 12px 12px 14px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08); box-shadow: none;
    background: linear-gradient(180deg, rgba(30, 30, 40, .92), rgba(14, 14, 19, .96));
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .upa-card-box::before {
    content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; opacity: .35;
    background: radial-gradient(ellipse at 50% 30%, rgba(255, 122, 24, .35), transparent 68%);
  }
  .upa-card.out .upa-card-box::before { background: radial-gradient(ellipse at 50% 30%, rgba(255, 168, 56, .45), transparent 68%); }
  .upa-card-art { display: block; position: relative; height: 78px; }
  .upa-card-art > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)); }
  .upa-card-w {
    min-height: 0; font: 600 var(--fs-cap)/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase;
    color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .upa-x, .upa-card-x { display: none; }
  .upa-card-n { position: relative; font: 700 17px/1.1 var(--f-hd); }
  .upa-card-f { position: relative; margin: 0; }
  .upa-card-p { font: 700 17px/1 var(--f-hd); }
  .upa-card-xm { display: inline; font: 600 var(--fs-cap)/1 var(--f-ui); color: var(--tx-3); }
  .upa-card:not(.filled) .upa-card-empty {
    display: grid; place-items: center; flex: 1; text-align: center; position: relative;
    font: 600 var(--fs-cap)/1.3 var(--f-ui); color: var(--tx-3);
  }
  .upa-card:not(.filled) .upa-card-empty .d { display: none; }
  .upa-card:not(.filled) .upa-card-empty .m { display: inline; }

  .upa-scene .upa-dial {
    grid-area: dial; position: relative; left: auto; top: auto; transform: none;
    justify-self: center; width: 214px; height: 214px; margin: 6px 0 2px;
  }
  .upa-scene .upa-dial::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px;
    transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 122, 24, .28), transparent 65%);
  }
  .upa-bezel { width: 100%; height: 100%; }
  .upa-dial .ring { inset: 8%; width: 84%; height: 84%; }
  .upa-dial .ring-center > div { margin-top: 0; }
  .upa-dial .ring-val,
  .upa-dial .ring.bonus-on:not(.win):not(.lose) .ring-val { order: 1; font-size: 34px; text-shadow: 0 0 24px rgba(255, 122, 24, .6); }
  .upa-dial .ring-sub {
    order: 2; margin: 2px 0 0; font: 600 var(--fs-micro)/1 var(--f-ui); letter-spacing: .14em; color: #a2a2b2;
  }
  .upa-dial .ring-note { order: 3; min-height: 0; font-size: var(--fs-cap); }
  .upa-dial .ring-mascot { display: none; }

  .upa-presets { grid-area: pre; margin: 0; flex-direction: column; align-items: stretch; gap: 10px; }
  .upa-prow { display: block; }
  .upa-prow .preset-grp.ch { display: none; }
  .upa-prow .preset-grp.mu {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 8px;
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  .upa-prow .preset-grp.mu .preset-tag {
    grid-column: 1 / -1; margin: 0 0 2px; font: 600 var(--fs-cap)/1 var(--f-ui); letter-spacing: 0;
    text-transform: none; color: #8a8a9a;
  }
  .upa-prow .preset-tag .d { display: none; }
  .upa-prow .preset-tag .m { display: inline; }
  .upa-prow .preset {
    min-width: 0; height: auto; min-height: 46px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); box-shadow: none;
  }
  .upa-prow .preset:hover { transform: none; }
  .upa-prow .preset .p-ch, .upa-prow .preset.mul .p-ch { font: 700 16px/1 var(--f-hd); color: #a2a2b2; }
  .upa-prow .preset.on { border-color: rgba(255, 168, 56, .9); background: rgba(255, 122, 24, .16); box-shadow: none; }
  .upa-prow .preset.on .p-ch { color: #ffa838; }
  .upa-cash { border-radius: 12px; padding: 6px 8px 6px 14px; }
  .upa-cash input[type=range] { flex: 1; width: auto; min-width: 0; }

  .upa-go {
    grid-area: go; position: relative; left: auto; top: auto; transform: none;
    width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-radius: 14px;
    background: linear-gradient(180deg, #ffa838, #ff5c00);
    font: 700 17px/1 var(--f-hd); letter-spacing: .12em; box-shadow: 0 12px 28px rgba(255, 92, 0, .4);
  }
  .upa-go::before { content: '↻\00a0\00a0'; }

  .upa-quick { grid-area: quick; display: flex; flex-direction: column; gap: 10px; }
  .upa-quick-k { font: 600 var(--fs-cap)/1 var(--f-ui); color: #8a8a9a; }
  .upa-quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .upa-q {
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 8px 6px 7px; border-radius: 12px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(32, 32, 42, .92), rgba(14, 14, 19, .96));
  }
  .upa-q.on { border-color: #ff7a18; }
  .upa-q::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--rc); }
  .upa-q-art { position: relative; width: 100%; height: 44px; }
  .upa-q-art > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .upa-q b { display: inline-flex; align-items: center; gap: 3px; font: 700 var(--fs-label)/1 var(--f-hd); color: #ffa838; }
}

@media (prefers-reduced-motion: reduce) {
  .upa-halo, .upa-beam::before, .upa-beam i, .upa-art-it, .upa-dial .ring.win .ring-val { animation: none; }
}

/* Апгрейдер: сцена во всю ширину рабочей колонки, включая резерв под чат.
   Без этого арт обрывался в двухстах пикселях от края, сцена выходила
   ниже, и капсулы шанса наезжали на кнопку «Улучшить». */
@media (min-width: 1200px) {
  .upa-scene { margin-right: calc(-24px - var(--chat-reserve)); }
}
/* Фильтры инвентаря — одной строкой, как в макете: сжимается поиск. */
.upa-filters select { flex: none; width: auto; min-width: 0; }
.upa-panel:first-child .upa-filters { flex-wrap: nowrap; }
.upa-panel:first-child .upa-filters input[type=search] { min-width: 80px; }

/* ============================================================ ALIVE · ТОЛЬКО ТО, ЧТО В МАКЕТЕ

   Макет — источник правды и по виду, и по составу. Всё, чего в нём нет,
   убрано: чат игроков, метки NEW, строка итога под кольцом апгрейда,
   «Продать всё» и сортировка на странице кейса.

   Переключатель валют лежал в этом же списке и был спрятан вместе с ними.
   Он вернулся: валюта показа — не элемент макета, а настройка игрока, и
   без неё вся витрина остаётся в долларах у того, кто считает в рублях.
   Вместе с ним вернулась монета вместо знака валюты — см. секцию
   «МОНЕТА И ВАЛЮТА» в конце файла. */

:root { --chat-reserve: 0px; }
.chat { display: none !important; }
.nav-new, .sh-new { display: none !important; }
/* Без чата подвалу не нужен запас снизу под его свёрнутую шапку. */
.ftr { padding-bottom: 0; }
@media (max-width: 880px) {
  .ftr { padding-bottom: calc(var(--tabbar-h, 68px) + 24px + env(safe-area-inset-bottom, 0px)); }
}

/* Маскот в кольце стоит на месте: у старого .ring-mascot своё смещение
   translate и анимация rFloat — вместе с центровкой макета он уезжал. */
.upa-dial .ring-mascot { translate: none; animation: none; }
.upa-dial .roll-out, .upa-grid .item-p { display: none !important; }
/* .upa-cash («С баланса») редизайн прятал — в макете апгрейдера доклада с
   баланса нет. Но ставка у нас складывается из предметов И денег, и без
   этого поля апгрейд без инвентаря невозможен, а докинуть баланс к скинам
   негде. Владелец попросил вернуть — показываем капсулой рядом с шансом и
   множителем, стили под неё уже готовы (.upa-cash выше). */
.copen-sellall, .copen-owned, .copen-sort { display: none !important; }
.sh-row.soon { opacity: .45; pointer-events: none; }
.sh-soon {
  margin-left: auto; padding: 2px 6px; border-radius: 4px;
  font: 700 var(--fs-micro)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: #ffa838; border: 1px solid rgba(255, 168, 56, .45); background: rgba(255, 122, 24, .1);
}
.ft-link.soon { cursor: default; }

/* ============================================================ ALIVE · РАКЕТА

   Страница «Ракеты» по макету Rocket Alive. Панель ставки (.rbp), поле
   (.ra-stage), инвентарь (.ssa), ставки раунда (.bba) и топ выигрышей
   (.rat) — у каждого свой префикс, чтобы старые правила общих компонентов
   их не задевали. */

#page-crash [hidden] { display: none !important; }
.ra { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1440px; margin: 0 auto; }

/* Общий задний фон страницы «Ракета» (в меню это игра crash).
   Картинка целиком по ширине (100% auto), а не cover: важные части — башня
   ENIGGMA слева и маскот с мини-станцией справа — стоят по самым краям кадра,
   и cover срезал бы их на нешироких экранах. Что остаётся сверху/снизу —
   заливаем тёмным (#06070c). scroll (не fixed): при 100% размер считается от
   самого блока, башни садятся в боковые поля, а не прячутся за сайдбар.
   Тёмный скрим — чтобы блоки ставок, истории и инвентаря читались. */
#page-crash.page.on {
  background:
    linear-gradient(rgba(6, 7, 12, .55), rgba(6, 7, 12, .74)) center / cover no-repeat,
    url('/assets/rocket/page.webp') center top / 100% auto no-repeat,
    #06070c;
}
.ra-row1 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ra-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: stretch; }

@keyframes raPop { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes raSlide { 0% { opacity: 0; transform: translateX(-14px); } 100% { opacity: 1; transform: none; } }
@keyframes raRow { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes raWin { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes raPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes raGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .55), 0 10px 30px rgba(53, 208, 127, .25); }
  50% { box-shadow: 0 0 0 8px rgba(53, 208, 127, 0), 0 10px 30px rgba(53, 208, 127, .45); }
}

/* Фактура карточек макета: три слоя штриховки под маской. */
.rbp-tex, .ssa-tex {
  position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(255, 255, 255, .018) 13px 14px, transparent 14px 31px),
    repeating-linear-gradient(-45deg, transparent 0 47px, rgba(0, 0, 0, .28) 47px 52px, transparent 52px 89px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .85), transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .85), transparent 80%);
}

/* ---------------------------------------------------------- панель ставки */

.rbp {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 18px 18px 16px; border-radius: 16px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(18, 18, 25, .92), rgba(11, 11, 16, .94));
  border: 1px solid rgba(255, 122, 24, .18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  font: 400 var(--fs-ui)/1.5 var(--f-ui); color: #ececf2;
}
.rbp > :not(.rbp-tex):not(.rbp-edge) { position: relative; }
.rbp-edge {
  position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 24, .7), transparent);
}
.rbp-head h3, .ssa-head h3, .bba-head h3, .rat-head h3 {
  margin: 0; font: 600 var(--fs-ui)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838;
}

.rbp-stake { display: flex; flex-direction: column; gap: 8px; }
.rbp-amt { display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; align-items: stretch; }
.rbp-step {
  padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
  color: #ececf2; font: 700 20px/1 var(--f-hd); cursor: pointer;
}
.rbp-step:hover:not(:disabled) { background: rgba(255, 122, 24, .14); border-color: rgba(255, 122, 24, .4); }
.rbp-in {
  position: relative; display: flex; align-items: center; margin: 0; border-radius: 10px; background: #0a0a0f;
  border: 1px solid rgba(255, 122, 24, .35); box-shadow: inset 0 0 20px rgba(255, 122, 24, .08);
}
.rbp-in > span { position: absolute; left: 12px; color: var(--tx-3); font: 700 16px/1 var(--f-hd); pointer-events: none; }
.rbp .rbp-in input {
  width: 100%; height: 46px; padding: 0 12px 0 26px; margin: 0; background: transparent; border: 0; outline: none;
  box-shadow: none; border-radius: 10px; color: #ececf2; font: 700 22px/1 var(--f-hd); text-align: center;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.rbp-in input::-webkit-inner-spin-button, .rbp-in input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rbp-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.rbp-q {
  height: 28px; padding: 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .035); color: #a2a2b2; font: 600 var(--fs-ui)/1 var(--f-hd); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.rbp-q:hover:not(:disabled) { border-color: rgba(255, 122, 24, .5); color: #ffa838; }

.rbp-field { display: flex; flex-direction: column; gap: 7px; }
.rbp-lbl {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 600 var(--fs-label)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a2a2b2;
}
.rbp-n { color: var(--tx-3); letter-spacing: 0; }
.rbp-sum { color: var(--tx-3); letter-spacing: 0; font: 700 var(--fs-cap)/1.5 var(--f-hd); font-variant-numeric: tabular-nums; }
.rbp-sum.on { color: #ffa838; }

.rbp-auto {
  display: grid; grid-template-columns: 1fr auto; align-items: stretch; height: 44px; overflow: hidden;
  border-radius: 10px; background: #0a0a0f; border: 1px solid rgba(255, 122, 24, .28);
  box-shadow: inset 0 0 16px rgba(255, 122, 24, .06);
}
.rbp-auto-in { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 0 8px; }
.rbp-auto-in > span { color: var(--tx-3); font: 700 16px/1 var(--f-hd); }
.rbp .rbp-auto-in input {
  width: 100%; min-width: 0; height: auto; padding: 0; margin: 0; background: transparent; border: 0; outline: none;
  box-shadow: none; color: #ffa838; font: 700 18px/1 var(--f-hd); font-variant-numeric: tabular-nums;
}
.rbp-auto-in input::placeholder { color: var(--tx-3); }
.rbp-auto-steps { display: flex; border-left: 1px solid rgba(255, 255, 255, .06); }
.rbp-a {
  width: 40px; flex: none; padding: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, .06); border-radius: 0;
  background: rgba(255, 255, 255, .03); color: #8a8a9a; font: 700 var(--fs-ui)/1.1 var(--f-hd); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: background .15s, color .15s;
}
.rbp-a:hover:not(:disabled) { color: #ffd27a; }
.rbp-a.on {
  background: linear-gradient(180deg, rgba(255, 168, 56, .28), rgba(255, 122, 24, .16));
  color: #ffd27a; box-shadow: inset 0 0 14px rgba(255, 122, 24, .3);
}
.rbp-a small { font-size: 8px; letter-spacing: .08em; opacity: .7; }

.rbp-list { display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.rbp-add {
  height: 44px; border-radius: 10px; border: 1px dashed rgba(255, 122, 24, .4); background: rgba(255, 122, 24, .04);
  color: #a2a2b2; font: 400 var(--fs-label)/1 var(--f-ui); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rbp-add > span { color: #ffa838; font-size: 16px; line-height: 1; }
.rbp-add:hover:not(:disabled) { background: rgba(255, 122, 24, .12); color: #ffa838; }
.rbp-pick {
  position: relative; flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 22px;
  align-items: center; gap: 8px; height: 38px; min-height: 38px; padding: 0 6px 0 4px; box-sizing: border-box;
  border-radius: 9px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden; animation: raPop .25s cubic-bezier(.2, .8, .3, 1) both;
}
.rbp-pick::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rc); }
.rbp-pick-art { position: relative; width: 44px; height: 30px; }
.rbp-pick-art > * {
  position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .7));
}
.rbp-pick-tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.rbp-pick-tx small {
  font: 600 var(--fs-cap)/1.15 var(--f-hd); color: var(--tx-3); text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rbp-pick-tx b {
  font: 600 var(--fs-body)/1.15 var(--f-hd); color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rbp-pick-p { font: 700 var(--fs-ui)/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums; }
.rbp-x {
  width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04); color: #a2a2b2; font: 600 var(--fs-ui)/1 var(--f-hd); cursor: pointer;
}
.rbp-x:hover:not(:disabled) { color: #ff4d5e; border-color: rgba(255, 77, 94, .5); }
/* Предмет уже в ставке: убрать его нельзя, крестика нет — колонку под него
   забирает цена. Тёплая рамка отличает «стоит в раунде» от «выбрано». */
.rbp-pick.fixed { grid-template-columns: 44px minmax(0, 1fr) auto; padding-right: 10px; }
.rbp-list.fixed .rbp-pick {
  background: rgba(255, 122, 24, .06); border-color: rgba(255, 122, 24, .22);
}
.rbp-more {
  flex: none; height: 30px; border-radius: 8px; border: 1px dashed rgba(255, 122, 24, .4); background: transparent;
  color: #ffa838; font: 600 var(--fs-label)/1 var(--f-hd); cursor: pointer;
}
.rbp-more:hover:not(:disabled) { background: rgba(255, 122, 24, .1); }
.rbp .rbp-warn { margin: 0; font-size: var(--fs-cap); line-height: 1.4; color: #ff8f9a; }

.rbp-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.rbp-main {
  height: 56px; border-radius: 12px; border: 1px solid rgba(255, 170, 90, .6);
  background: linear-gradient(180deg, #ff8a2a, #ff6a00); color: #180a00;
  font: 700 16px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 122, 24, .35); transition: background .25s, color .25s;
  font-variant-numeric: tabular-nums;
}
.rbp-main:hover:not(:disabled) { filter: brightness(1.08); }
.rbp-main:disabled { cursor: default; }
/* Ставка без суммы: кнопка видна, но приглушена — подпись под ней говорит, чего не хватает. */
.rbp-main.bet:disabled { opacity: .5; box-shadow: none; }
.rbp-main.cash {
  background: linear-gradient(180deg, #4fe39a, #22b86a); border-color: rgba(124, 228, 174, .7);
  box-shadow: 0 10px 30px rgba(53, 208, 127, .35); animation: raGlow 1.2s ease-in-out infinite;
}
.rbp-main.cancel {
  background: rgba(255, 255, 255, .05); color: #ececf2; border-color: rgba(255, 255, 255, .14); box-shadow: none;
}
.rbp-main.cancel:disabled { opacity: .6; }
.rbp-main.won { background: linear-gradient(180deg, #4fe39a, #22b86a); }
.rbp-main.lost {
  background: linear-gradient(180deg, #3a1418, #24090c); color: #ff4d5e;
  border-color: rgba(255, 77, 94, .5); box-shadow: none;
}
.rbp-main.wait { opacity: .6; box-shadow: none; }

/* ---------------------------------------------------------- поле */

.ra-stage {
  position: relative; height: 560px; min-width: 0; border-radius: 16px; overflow: hidden;
  /* Фон блока «Ракеты» — картинка неба (assets/rocket/sky.webp). Canvas сверху
     прозрачный (clearRect), рисует звёзды/ракету поверх. Лёгкий скрим держит
     контраст приборов, радиальный градиент — база под картинкой. */
  background:
    linear-gradient(rgba(6, 7, 12, .32), rgba(6, 7, 12, .58)),
    url('/assets/rocket/sky.webp') center / cover no-repeat,
    radial-gradient(ellipse at 50% 120%, #1a1230 0%, #0a0a14 45%, #050508 100%);
  border: 1px solid rgba(255, 122, 24, .16);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 0 80px rgba(0, 0, 0, .6);
}
.ra-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ra-scan {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
}
.ra-hist {
  position: absolute; left: 14px; right: 14px; top: 12px; display: flex; gap: 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.ra-hx {
  flex: none; padding: 4px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--hc) 33%, transparent);
  background: rgba(8, 8, 14, .7); color: var(--hc); font: 700 var(--fs-ui)/1 var(--f-hd);
  font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ra-hx:first-child { animation: raSlide .35s ease both; }
.ra-hx:hover { filter: brightness(1.25); }

.ra-chips { position: absolute; right: 14px; top: 50px; display: flex; flex-direction: column; gap: 6px; width: 150px; }
.ra-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; box-sizing: border-box;
  background: rgba(8, 8, 14, .72); border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ra-chip.bank { border-color: rgba(255, 122, 24, .28); box-shadow: inset 0 0 18px rgba(255, 122, 24, .06); }
.ra-chip-ic {
  width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.ra-chip.bank .ra-chip-ic {
  background: rgba(255, 122, 24, .12); border-color: rgba(255, 122, 24, .3); color: #ffa838; font: 700 var(--fs-ui)/1 var(--f-hd);
}
.ra-chip-ic img { width: 20px; height: 20px; object-fit: contain; filter: grayscale(1) brightness(1.4); }
.ra-chip-tx { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ra-chip-tx b { font: 700 17px/1 var(--f-hd); color: #ececf2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ra-chip.bank .ra-chip-tx b { color: #ffa838; text-shadow: 0 0 12px rgba(255, 122, 24, .45); }
.ra-chip-tx small {
  font: 600 var(--fs-micro)/1.1 var(--f-hd); letter-spacing: .1em; color: var(--tx-3); text-transform: uppercase;
}

.ra-readout {
  position: absolute; left: 50%; top: 54px; transform: translateX(-50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 230px; box-sizing: border-box;
  padding: 12px 30px 14px; border-radius: 16px; background: rgba(6, 6, 10, .62);
  border: 1px solid rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.ra-status {
  font: 600 var(--fs-label)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ra-mult {
  font: 700 72px/1 var(--f-hd); letter-spacing: -.02em; color: #ececf2; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(236, 236, 242, .3);
}
.ra-timer {
  position: relative; width: 100%; height: 4px; margin-top: 6px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, .08); transition: opacity .2s;
}
.ra-timer i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(90deg, #ff7a18, #ffd27a); box-shadow: 0 0 10px rgba(255, 122, 24, .6);
}
.ra-bottom {
  position: absolute; left: 16px; right: 16px; bottom: 12px; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ---------------------------------------------------------- инвентарь */

.ssa {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 470px;
  padding: 16px 18px; box-sizing: border-box; border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 18, 25, .9), rgba(11, 11, 16, .94));
  border: 1px solid rgba(255, 122, 24, .16); box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  transition: border-color .3s, box-shadow .3s;
}
.ssa.flash { border-color: #ff7a18; box-shadow: 0 0 0 2px rgba(255, 122, 24, .4), 0 18px 50px rgba(0, 0, 0, .45); }
.ssa-head { position: relative; display: flex; align-items: center; gap: 12px; }
.ssa-sp { flex: 1; }
.ssa .ssa-q {
  width: 200px; height: 30px; box-sizing: border-box; padding: 6px 10px; margin: 0; font: 400 var(--fs-cap)/1.2 var(--f-ui);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); color: #ececf2;
  border-radius: 9px; outline: none; box-shadow: none;
}
.ssa-q::placeholder { color: var(--tx-3); }
.ssa-q:focus { border-color: rgba(255, 122, 24, .5); }
.ssa-sum { font: 700 var(--fs-ui)/1 var(--f-hd); color: #ececf2; font-variant-numeric: tabular-nums; }
.ssa-grid {
  position: relative; flex: 1; min-height: 0; display: grid; gap: 8px; overflow-y: auto; padding-right: 4px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); align-content: start; grid-auto-rows: max-content;
  scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .5) transparent;
}
.ssa-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 8px; cursor: pointer;
  background: linear-gradient(170deg, rgba(23, 23, 30, .9), rgba(14, 14, 19, .9));
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 11px;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}
.ssa-card:hover { transform: translateY(-3px); }
.ssa-card.on { border-color: #ff7a18; box-shadow: 0 0 0 1px #ff7a18, 0 8px 24px rgba(255, 122, 24, .25); }
.ssa.locked .ssa-card { opacity: .55; cursor: default; }
.ssa-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--rc); }
.ssa-glow {
  position: absolute; left: 50%; top: 32%; width: 140%; height: 120%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--rc), transparent 62%); opacity: .14; pointer-events: none;
}
.ssa-tick {
  display: none; position: absolute; top: 7px; right: 7px; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
  background: #ff7a18; color: #180a00; font: 700 var(--fs-micro)/18px var(--f-ui); text-align: center;
  box-shadow: 0 0 10px rgba(255, 122, 24, .8);
}
.ssa-card.on .ssa-tick { display: block; }
.ssa-art { position: relative; height: 66px; }
.ssa-art > * {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .7));
}
.ssa-skel { border-radius: 6px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px); }
.ssa-w {
  position: relative; font: 600 var(--fs-label)/1.5 var(--f-hd); color: var(--tx-3); text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssa-n {
  position: relative; margin-bottom: 5px; font: 600 var(--fs-body)/1.5 var(--f-hd); color: #ececf2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssa-f { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.ssa-f > span { font: 700 var(--fs-cap)/1 var(--f-hd); color: var(--tx-3); }
.ssa-f b { font: 700 var(--fs-ui)/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums; }
.ssa-empty { grid-column: 1 / -1; padding: 40px 12px; text-align: center; color: var(--tx-3); font-size: var(--fs-label); }

/* ---------------------------------------------------------- ставки и топ */

.ra-rail { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; height: 470px; min-width: 0; }
.ra-box {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0;
  padding: 14px 16px; box-sizing: border-box; border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 18, 25, .9), rgba(11, 11, 16, .94));
  border: 1px solid rgba(255, 122, 24, .16); box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.ra-top { overflow: hidden; }

.bba-n, .rat-head > span { font: 600 var(--fs-cap)/1.5 var(--f-ui); color: var(--tx-3); }
.bba-list, .rat-list {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .5) transparent;
}
.rat-list { gap: 3px; }
.bba-empty, .rat-empty { padding: 22px 10px; text-align: center; color: var(--tx-3); font-size: var(--fs-label); }
.bba-ava, .rat-ava { display: grid; place-items: center; background: var(--ac); color: #0a0a0f; font: 700 var(--fs-ui)/1 var(--f-hd); }
.bba-name, .rat-name {
  min-width: 0; font: 600 var(--fs-body)/1.5 var(--f-hd); color: #ececf2; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bba-name:hover, .rat-name:hover { color: #ffa838; text-decoration: underline; }
.bba-row.me .bba-name, .rat-row.me .rat-name { color: #ffa838; }

.rat-glow {
  position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 168, 56, .18), transparent 70%);
}
.rat-head { display: flex; align-items: baseline; gap: 8px; }
.rat-podium { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rat-pod {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px 8px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 168, 56, .10), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 168, 56, .25); animation: raWin .4s cubic-bezier(.2, .8, .3, 1) both;
}
.rat-pod.p1 { border-color: rgba(255, 210, 122, .5); }
.rat-pod.me { background: rgba(255, 122, 24, .12); border-color: rgba(255, 122, 24, .45); }
.rat-pod .rat-place { position: absolute; top: 5px; left: 7px; font: 700 var(--fs-cap)/1 var(--f-hd); }
.rat-pod.p1 .rat-place { color: #ffd27a; }
.rat-pod.p2 .rat-place { color: #cfd3ff; }
.rat-pod.p3 .rat-place { color: #ff9a58; }
.rat-pod .rat-ava {
  width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 14px color-mix(in srgb, var(--ac) 40%, transparent);
}
.rat-pod .rat-name { max-width: 100%; font-size: var(--fs-label); }
.rat-pod .rat-pay { font: 700 16px/1 var(--f-hd); color: #7ce4ae; font-variant-numeric: tabular-nums; }
.rat-pod .rat-x { font: 700 var(--fs-label)/1 var(--f-hd); }
.rat-row {
  flex: none; display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .05);
}
.rat-row.me { background: rgba(255, 122, 24, .12); border-color: rgba(255, 122, 24, .45); }
.rat-row .rat-place { font: 600 var(--fs-label)/1 var(--f-hd); color: var(--tx-3); text-align: right; }
.rat-row .rat-ava { width: 22px; height: 22px; border-radius: 7px; font-size: var(--fs-label); }
.rat-row .rat-name { font-size: var(--fs-ui); }
.rat-row .rat-x { font: 700 var(--fs-ui)/1 var(--f-hd); font-variant-numeric: tabular-nums; }
.rat-row .rat-pay {
  min-width: 64px; text-align: right; font: 700 var(--fs-ui)/1 var(--f-hd); color: #7ce4ae; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- адаптив */

@media (max-width: 1180px) {
  .ra-row2 { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Телефон: макет на узком экране не раскладывается, поэтому колонка —
   поле первым (ради него и пришли), под ним ставка, дальше инвентарь,
   ставки раунда и топ. */
@media (max-width: 880px) {
  .ra { gap: 12px; }
  .ra-row1, .ra-row2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ra-stage { order: -1; height: 380px; }
  .ra-hist { left: 10px; right: 10px; top: 10px; }
  .ra-readout { top: 46px; min-width: 0; width: max-content; max-width: calc(100% - 20px); padding: 8px 18px 10px; }
  .ra-status { font-size: var(--fs-cap); }
  .ra-mult { font-size: 52px; }
  .ra-chips { top: auto; bottom: 10px; right: 10px; width: auto; flex-direction: row; }
  .ra-chip { gap: 8px; padding: 6px 10px; }
  .ra-chip-ic { width: 24px; height: 24px; }
  .ra-chip-ic img { width: 16px; height: 16px; }
  .ra-chip-tx b { font-size: var(--fs-body); }
  .ra-bottom { left: 10px; bottom: 16px; }
  .rbp { padding: 16px 14px 14px; }
  .ssa { height: 440px; padding: 14px; }
  .ssa-head { flex-wrap: wrap; gap: 8px 10px; }
  .ssa-sp { display: none; }
  .ssa-sum { margin-left: auto; }
  .ssa .ssa-q { order: 3; width: 100%; }
  .ssa-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .ra-rail { height: auto; grid-template-rows: none; gap: 12px; }
  .ra-box { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .rbp-main.cash, .bba-st.fly, .rbp-pick, .ra-hx:first-child, .bba-row.in, .rat-pod { animation: none; }
}

/* ============================================================ ALIVE · МАСКОТ АПГРЕЙДА

   Как в макете: в покое — логотип, пока крутится ролл — ролик «думает»,
   на выигрыше — «радуется», на проигрыше — «плачет». Ролики с белым фоном
   рисуются в canvas с кеингом (Ring.mood в ui.js), сами <video> скрыты. */

.upa-dial .ring-mascot {
  position: absolute; left: 50%; top: auto; bottom: 22px; z-index: 3; width: 88px; height: 88px;
  margin-left: -44px; transform: none; translate: none; animation: none; pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(255, 122, 24, .7));
}
.ring-mascot .rm-logo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform: scale(.88); transform-origin: 50% 100%;
}
.ring-mascot .rm-v { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ring-mascot .rm-cv {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  transform: scale(1.5) translateY(1%); transform-origin: 50% 50%;
}
@media (max-width: 880px) {
  .upa-dial .ring-mascot { display: block; width: 60px; height: 60px; margin-left: -30px; bottom: 10px; }
}

/* ============================================================ ALIVE · МИННОЕ ПОЛЕ

   По макету Mines Alive: доска-картинка с ячейками и экранами поверх,
   панель ставки (.rbp — общая с «Ракетой») и «Последние игры» над
   доской, ниже инвентарь (.ssa) и «Мои ставки». Префикс mna-. */

#page-mines [hidden] { display: none !important; }
.mna { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1440px; margin: 0 auto; }
.mna-stage { position: relative; }

@keyframes mnaRow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 168, 56, .55), 0 0 18px rgba(255, 122, 24, .35); }
  50% { box-shadow: 0 0 0 1px rgba(255, 168, 56, .95), 0 0 32px rgba(255, 122, 24, .7); }
}
@keyframes mnaSafe { 0% { opacity: 0; transform: scale(.6) rotate(-20deg); } 60% { transform: scale(1.1) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes mnaMine { 0% { opacity: 0; transform: scale(.3); } 50% { transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
@keyframes mnaLcd { 0%, 100% { opacity: 1; } 50% { opacity: .85; } }
@keyframes mnaFlash { 0% { background: rgba(255, 60, 60, .55); } 100% { background: rgba(255, 60, 60, 0); } }
@keyframes mnaWait { to { transform: rotate(360deg); } }

.mna-board {
  position: relative; width: 100%; aspect-ratio: 1672 / 941; container-type: inline-size;
  border-radius: 16px; overflow: hidden;
  background: #0a0a14 url(/assets/mines/board.webp?v=4) center / cover no-repeat;
  border: 1px solid rgba(255, 122, 24, .18); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.mna-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 7, 10, .35), transparent 22%, transparent 82%, rgba(7, 7, 10, .45));
}
.mna-flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mna-flash.on { animation: mnaFlash .8s ease-out both; }
.mna-screens, .mna-cells { position: absolute; inset: 0; pointer-events: none; }
.mna-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------- экраны */

.mna-scr {
  --c: rgba(255, 150, 60, .75); --g: rgba(255, 120, 30, .25);
  position: absolute; transform: translate(-50%, -50%) skewY(-2deg); border-radius: 8% / 22%;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #1c1008, #0c0603);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .8), 0 0 16px var(--g); transition: background .3s, box-shadow .3s;
}
.mna-scr::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
.mna-scr b {
  position: relative; font: 700 var(--fs, 2cqw)/1 Rajdhani, monospace; letter-spacing: .02em; color: var(--c);
  text-shadow: 0 0 10px var(--c); font-variant-numeric: tabular-nums; animation: mnaLcd 1.6s ease-in-out infinite;
}
.mna-scr.next { --c: #ffd27a; --g: rgba(255, 168, 56, .7); background: radial-gradient(ellipse at 50% 40%, #3a1e08, #160a03); }
.mna-scr.go { --c: #5dff7a; --g: rgba(80, 255, 120, .4); background: radial-gradient(ellipse at 50% 40%, #0f4a1c, #06200c); }
.mna-scr.st.go { --g: rgba(80, 255, 120, .6); }
.mna-scr.bad { --c: #ff5c5c; --g: rgba(255, 60, 60, .7); background: radial-gradient(ellipse at 50% 40%, #4a1012, #1e0405); }
.mna-scr.off { --c: #8a8a9a; --g: rgba(120, 120, 140, .25); background: radial-gradient(ellipse at 50% 40%, #1c1c24, #0a0a10); }

/* ---------------------------------------------------------- ячейки */

.mna-cell {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); pointer-events: auto;
  display: grid; place-items: center; overflow: visible; padding: 0; margin: 0; border: 0; border-radius: 9%;
  background: transparent; outline: none; cursor: default; transition: background .2s, box-shadow .2s;
}
.mna-cell.dim { background: rgba(5, 5, 10, .45); }
.mna-cell.now {
  background: rgba(255, 168, 56, .10); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 168, 56, .55), 0 0 18px rgba(255, 122, 24, .35);
  animation: mnaRow 1.4s ease-in-out infinite;
}
.mna-cell.now:hover:not(:disabled) { filter: brightness(1.12); }
.mna-cell.now:focus-visible { box-shadow: 0 0 0 2px #ffd27a; }
.mna-safe, .mna-mine { position: absolute; inset: 0; border-radius: 9%; }
.mna-safe {
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 122, 24, .35), rgba(255, 122, 24, .06) 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 168, 56, .85), 0 0 26px rgba(255, 122, 24, .55);
  animation: mnaSafe .35s cubic-bezier(.2, .8, .3, 1) both;
}
.mna-safe img {
  position: absolute; left: 50%; top: 50%; width: 78%; height: 78%; transform: translate(-50%, -50%);
  object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .85)) drop-shadow(0 0 10px rgba(255, 140, 40, .6));
}
.mna-mine {
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 60, 60, .5), rgba(255, 60, 60, .1) 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 77, 94, .9), 0 0 26px rgba(255, 60, 60, .6);
  animation: mnaMine .4s cubic-bezier(.2, .8, .3, 1) both;
}
.mna-mine img {
  position: absolute; left: 4%; top: 2%; width: 92%; height: 92%; object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .8)) brightness(.75);
}
.mna-cell.hit .mna-mine img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .8)) brightness(1.15) saturate(1.3); }
.mna-spin {
  width: 34%; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255, 168, 56, .25);
  border-top-color: #ffa838; animation: mnaWait .7s linear infinite;
}

.mna-bottom {
  /* Правый-нижний угол доски (решение владельца): раньше left:300/right:264
     держали бар по центру, слева от ленты-оверлея «Последние игры». Теперь он
     прижат к углу под лентой; z-index выше ленты (3), чтобы не прятался. */
  position: absolute; left: auto; right: 16px; bottom: 16px; z-index: 4; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}

/* ---------------------------------------------------------- панели поверх доски */

.mna-stage > .rbp {
  position: absolute; left: 16px; top: 16px; z-index: 3; width: 284px; height: min(535px, calc(100% - 32px));
  gap: 12px; padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(14, 14, 20, .9), rgba(9, 9, 13, .94));
  border-color: rgba(255, 122, 24, .22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rbp[data-game="mines"] .rbp-list {
  flex: none; height: 130px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .5) transparent;
}
.rbp .rbp-main.tip {
  background: rgba(255, 255, 255, .05); color: #a2a2b2; border-color: rgba(255, 255, 255, .12);
  box-shadow: none; pointer-events: none;
}

.mna-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mna-opt {
  height: 44px; padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .035); color: #a2a2b2; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: all .15s;
}
.mna-opt:hover:not(:disabled) { border-color: rgba(255, 122, 24, .6); }
.mna-opt.on {
  border-color: rgba(255, 168, 56, .9); color: #ffd27a; box-shadow: 0 0 16px rgba(255, 122, 24, .35);
  background: linear-gradient(180deg, rgba(255, 168, 56, .28), rgba(255, 122, 24, .14));
}
.mna-opt:disabled { cursor: default; }
.mna-opt b { font: 700 17px/1 var(--f-hd); }
.mna-opt small { font: 600 var(--fs-cap)/1.2 var(--f-hd); letter-spacing: .04em; opacity: .8; }

.mna-tex {
  position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(255, 255, 255, .018) 13px 14px, transparent 14px 31px),
    repeating-linear-gradient(-45deg, transparent 0 47px, rgba(0, 0, 0, .28) 47px 52px, transparent 52px 89px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .85), transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .85), transparent 80%);
}
.mna-edge {
  position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 24, .7), transparent);
}
.mna-h { position: relative; display: flex; align-items: baseline; gap: 8px; }
.mna-h h3 {
  margin: 0; font: 600 var(--fs-ui)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838;
}
.mna-empty { padding: 22px 10px; text-align: center; color: var(--tx-3); font-size: var(--fs-label); }

.mna-recent {
  position: absolute; right: 16px; top: 16px; z-index: 3; width: 272px; height: min(535px, calc(100% - 32px));
  box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 14, 20, .9), rgba(9, 9, 13, .94));
  border: 1px solid rgba(255, 122, 24, .2); box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* «Последние игры»: строки уходят вниз за край — прокрутка своя, тонкая
   оранжевая, как у «Моих ставок». Якорь прокрутки браузера выключен: новые
   строки сверху компенсирует mines.js (paintRecent), и вдвоём они сдвинули
   бы список дважды. */
.mna-h .mna-sub { margin-left: auto; font: 600 var(--fs-micro)/1.2 var(--f-ui); color: var(--tx-3); white-space: nowrap; }
.mna-rlist {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overflow-anchor: none; padding-right: 4px; margin-right: -4px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .5) transparent;
}
.mna-rw {
  flex: none; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .05);
  animation: raRow .3s ease both;
}
.mna-rw.me { background: rgba(255, 122, 24, .10); border-color: rgba(255, 122, 24, .4); }
/* Мини-поле: клетки раунда, как на доске. Размер клетки (--s) и число
   столбцов (--c) ставит mines.js под слот 34×44 и размер поля раунда. */
.mna-mf {
  width: 34px; height: 44px; display: grid; place-content: center; gap: 2px;
  grid-template-columns: repeat(var(--c, 4), var(--s, 7px)); grid-auto-rows: var(--s, 7px);
}
.mna-mf i { border-radius: 1.5px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.mna-mf i.o { background: #35d07f; box-shadow: 0 0 5px rgba(53, 208, 127, .6); }
.mna-mf i.x { background: #ff4d5e; box-shadow: 0 0 5px rgba(255, 77, 94, .75); }
.mna-rw-tx { min-width: 0; display: flex; flex-direction: column; gap: 5px; line-height: 1.15; }
.mna-rw-tx > b { font: 700 var(--fs-body)/1 var(--f-hd); font-variant-numeric: tabular-nums; }
.mna-rw-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mna-rw-ava {
  position: relative; flex: none; width: 16px; height: 16px; border-radius: 4px; overflow: hidden;
  display: grid; place-items: center; background: var(--ac); color: #0a0a0f; font: 700 10px/1 var(--f-hd);
}
.mna-rw-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mna-rw-who em {
  min-width: 0; font: 600 var(--fs-cap)/1.15 var(--f-ui); font-style: normal; color: #b4b4c2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mna-rw-who em[data-uid] { cursor: pointer; }
.mna-rw-who em[data-uid]:hover { color: #ffa838; text-decoration: underline; }
.mna-rw-pay { font: 700 var(--fs-body)/1 var(--f-hd); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------- вторая строка */

.mna-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: stretch; }
.mna-row2 .ssa { height: 420px; }
.ssa-cnt { font: 600 var(--fs-cap)/1.5 var(--f-ui); color: var(--tx-3); white-space: nowrap; }
.mna-my {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; height: 420px;
  padding: 14px 16px; box-sizing: border-box; border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 18, 25, .9), rgba(11, 11, 16, .94));
  border: 1px solid rgba(255, 122, 24, .16); box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.mna-my-list {
  position: relative; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .5) transparent;
}
.mna-my-row {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .05); animation: raRow .3s ease both;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.mna-my-row:hover { border-color: rgba(255, 122, 24, .3); }
.mna-my-row > b { min-width: 52px; font: 700 var(--fs-ui)/1 var(--f-hd); }
.mna-my-row > span:nth-child(2) {
  font: 400 var(--fs-micro)/1.3 var(--f-ui); color: #a2a2b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mna-my-row > span:last-child { font: 700 var(--fs-ui)/1 var(--f-hd); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- адаптив

   Доска масштабируется целиком (ячейки и экраны в процентах, шрифт экранов
   в cqw), а панели — нет. Когда доска становится ниже панелей, они встают
   под неё: иначе закрыли бы поле. */

@media (max-width: 1180px) {
  .mna-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .mna-board { grid-column: 1 / -1; }
  .mna-stage > .rbp, .mna-recent { position: static; width: auto; height: auto; }
  /* Под доской высоту задаёт содержимое — тридцать строк «Последних игр»
     вытянули бы панель на полторы тысячи пикселей. */
  .mna-recent { min-height: 300px; max-height: 540px; }
  .mna-bottom { left: auto; right: 16px; }
  .mna-row2 { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 880px) {
  .mna { gap: 12px; }
  .mna-stage { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mna-stage > .rbp { padding: 16px 14px 14px; }
  .mna-recent { min-height: 0; max-height: 420px; }
  .mna-bottom { right: 8px; bottom: 8px; }
  .mna-row2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mna-row2 .ssa { height: 440px; }
  .mna-my { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .mna-cell.now, .mna-safe, .mna-mine, .mna-scr b, .mna-rw, .mna-my-row, .mna-flash.on { animation: none; }
}

/* ============================================================ ALIVE · ФОН И ФИЛЬТРЫ АПГРЕЙДА

   Фон — один на весь сайт, по макету: канвас рисует sky.js (млечный путь,
   туманности, звёзды, угли), поверх — пятно света за курсором. Прежних
   слоёв (снимок, пятна, зерно, виньетка) больше нет.

   Фильтры апгрейдера — как в макете: поиск и родные выпадающие списки с
   отступом 9×12, видимой рамкой и светлой стрелкой; строка переносится,
   а не выдавливает кнопку обновления за край панели. Подписи «показано N
   из M» в макете нет. */

.sky { background: #07070a; }
.sky-cv { display: block; }
.sky-spot { pointer-events: none; }

.upa-filters, .upa-panel:first-child .upa-filters { flex-wrap: wrap; }
.upa-filters input[type=search], .upa-filters select,
.upa-filters input[type=search]:hover, .upa-filters select:hover {
  height: auto; padding: 9px 12px; border-radius: 10px; outline: none; box-shadow: none;
  background-color: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1);
  color: #ececf2; font: 400 var(--fs-label)/1 var(--f-ui);
}
.upa-filters select, .upa-filters select:hover {
  flex: none; width: auto; min-width: 0; padding-right: 28px;
  -webkit-appearance: menulist; appearance: auto; background-image: none; color-scheme: dark;
}
.upa-filters input[type=search],
.upa-panel:first-child .upa-filters input[type=search] { flex: 1; min-width: 120px; }
.upa-panel .upa-note { display: none; }

/* ============================================================ ALIVE · ЛИДЕРЫ

   По макету Leaders Alive. Сцена масштабируется целиком (container-type:
   inline-size, размеры в cqw с нижними порогами в px — как в макете),
   таблица наезжает на неё снизу отрицательным отступом. Префикс lba-. */

#page-top [hidden] { display: none !important; }
.lba { width: 100%; max-width: 1440px; margin: 0 auto; }

@keyframes lbaKing {
  0% { transform: translateX(-50%) translateY(0) rotate(-1.2deg); }
  50% { transform: translateX(-50%) translateY(-1.6%) rotate(.8deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(-1.2deg); }
}
@keyframes lbaSpot {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .85; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes lbaDrift { 0% { transform: scale(1); } 100% { transform: scale(1.035); } }

.lba-mob { display: none; }

/* ---------------------------------------------------------- сцена */

.lba-hero { position: relative; aspect-ratio: 1672 / 941; overflow: hidden; container-type: inline-size; }
.lba-bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: fill;
  transform-origin: 50% 60%; animation: lbaDrift 40s ease-in-out infinite alternate;
}
.lba-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 7, 10, .88) 0%, rgba(7, 7, 10, .6) 22%, rgba(7, 7, 10, 0) 38%),
    linear-gradient(180deg, rgba(7, 7, 10, .35), transparent 22%, transparent 62%, rgba(7, 7, 10, .92) 100%);
}
.lba-intro { position: absolute; z-index: 4; left: 4.5%; top: 9%; width: 26%; }
.lba-intro h1 {
  margin: 0; width: max-content; font: 700 max(44px, 4.6cqw)/.9 var(--f-hd); letter-spacing: -.02em;
  text-transform: uppercase; text-shadow: 0 6px 30px rgba(0, 0, 0, .9);
}
.lba-intro h1 span {
  display: block; width: max-content; padding-right: .4em; transform: skewX(-6deg);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lba-t1 { background: linear-gradient(180deg, #ffffff, #b9b9c8 60%, #7d7d92); }
.lba-t2 {
  background: linear-gradient(96deg, #ffd23b, #ffa838 40%, #ff7a18);
  filter: drop-shadow(0 0 22px rgba(255, 122, 24, .45));
}
.lba-sub {
  margin-top: 1cqw; font: 700 max(10.5px, .9cqw)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: #ececf2; text-shadow: 0 1px 12px rgba(0, 0, 0, .9);
}
.lba-intro p {
  margin: 1cqw 0 0; max-width: max(260px, 20cqw); font: 400 max(12px, .96cqw)/1.6 var(--f-ui); color: #c4c4d0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .9); text-wrap: pretty;
}
.lba-rules { color: #ffb067; font-size: max(11px, .86cqw); }
.lba-rules b { font-weight: 700; color: #fff; }
.lba-rules .lba-coin { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .2em; }
.lba-rules:empty { display: none; }
.lba-mrules { margin: 6px 0 10px; font: 400 var(--fs-cap)/1.5 var(--f-ui); color: #ffb067; }
.lba-timer {
  display: inline-flex; align-items: center; gap: 1cqw; margin-top: 1.6cqw; padding: .7cqw 1.15cqw .7cqw .7cqw;
  border-radius: 12px; background: rgba(9, 8, 10, .72); border: 1px solid rgba(255, 122, 24, .35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .9), inset 0 0 24px -14px rgba(255, 122, 24, .6);
}
.lba-timer img {
  width: max(36px, 2.9cqw); height: max(36px, 2.9cqw); object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 122, 24, .6));
}
.lba-timer > span { display: flex; flex-direction: column; line-height: 1.15; }
.lba-timer small {
  font: 700 max(9px, .68cqw)/1.15 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: #a2a2b2; white-space: nowrap;
}
.lba-timer b {
  font: 700 max(18px, 1.5cqw)/1.15 var(--f-hd); letter-spacing: .04em; color: #ececf2; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(255, 122, 24, .4);
}
.lba-spot {
  position: absolute; z-index: 2; left: 50%; top: 36%; width: 34%; height: 44%; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; animation: lbaSpot 5s ease-in-out infinite;
  background: radial-gradient(ellipse, rgba(255, 168, 56, .32), rgba(255, 122, 24, .12) 45%, transparent 70%);
}
.lba-king {
  position: absolute; z-index: 3; left: 50%; bottom: 49.5%; width: 23.5%; aspect-ratio: 1286 / 1223;
  transform: translateX(-50%); transform-origin: 50% 100%; pointer-events: none;
  animation: lbaKing 5s ease-in-out infinite;
}
.lba-king img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .85)) drop-shadow(0 0 26px rgba(255, 140, 30, .35));
}

/* ---------------------------------------------------------- места 1–3 */

.lba-podium { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.lba-p {
  --av: max(48px, 3.9cqw); --avfs: max(19px, 1.57cqw); --nfs: max(11.5px, .9cqw); --pfs: max(15px, 1.2cqw);
  --zfs: max(14px, 1.14cqw); --coin: max(14px, 1.14cqw); --bd: rgba(255, 122, 24, .32);
  position: absolute; pointer-events: auto; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; padding: 0 .7cqw .85cqw; border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 12, 14, .82), rgba(8, 7, 10, .9)); border: 1px solid var(--bd);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 40px -20px var(--gl);
}
.lba-p.p1 {
  left: 37.5%; top: 49.5%; width: 25%;
  --ac: #ffd23b; --gl: rgba(255, 210, 59, .6); --bd: rgba(255, 210, 59, .5); --tagc: #1a0d00;
  --tag: linear-gradient(180deg, #ffd23b, #ffa838 55%, #e06a00);
  --av: max(60px, 4.9cqw); --avfs: max(24px, 2cqw); --nfs: max(13px, 1.04cqw); --pfs: max(19px, 1.57cqw);
  --zfs: max(17px, 1.36cqw); --coin: max(18px, 1.43cqw);
}
.lba-p.p2 {
  left: 15.2%; top: 58.5%; width: 19.6%;
  --ac: #d8d8e6; --gl: rgba(216, 216, 230, .45); --tagc: #15151c;
  --tag: linear-gradient(180deg, #f2f2f8, #b9b9c8 55%, #6e6e82);
}
.lba-p.p3 {
  left: 65.4%; top: 58.5%; width: 19.6%;
  --ac: #ff9a3c; --gl: rgba(255, 154, 60, .55); --tagc: #1a0d00;
  --tag: linear-gradient(180deg, #ffb26b, #e07a2a 55%, #8a3d05);
}
.lba-p-edge {
  position: absolute; left: 12%; right: 12%; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent); box-shadow: 0 0 12px var(--ac);
}
.lba-p-tag {
  position: absolute; left: -1px; top: -1px; min-width: max(26px, 2cqw); height: max(26px, 2cqw); padding: 0 .5cqw;
  box-sizing: border-box; display: grid; place-items: center; border-radius: 11px 0 10px 0;
  background: var(--tag); color: var(--tagc); font: 700 max(13px, 1.05cqw)/1 var(--f-hd);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.lba-p-ava {
  position: relative; width: var(--av); height: var(--av); margin-top: calc(var(--av) / -2); padding: 0;
  box-sizing: border-box; cursor: pointer; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, hsl(var(--h) 45% 40%), hsl(var(--h) 45% 14%));
  border: 3px solid var(--ac); box-shadow: 0 0 0 4px rgba(0, 0, 0, .6), 0 0 24px var(--gl);
  font: 700 var(--avfs)/1 var(--f-hd); color: #fff; transition: transform .2s;
}
.lba-p-ava:hover { transform: scale(1.08); }
.lba-p-ava .lba-p-crown { width: 70%; height: 70%; object-fit: contain; }
/* Фото игрока (мест 2 и 3) — во весь кружок, как .ava-ball по всему сайту;
   логотип места 1 (.lba-p-crown, выше) — на прежних 70% и без обрезки. */
.lba-p-ava img:not(.lba-p-crown) {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.lba-p-name {
  margin-top: .55cqw; max-width: 100%; font: 700 var(--nfs)/1.2 var(--f-hd); color: #ececf2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lba-coin {
  display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: url(/assets/lb/coin.png) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 122, 24, .55));
}
.lba-p-pts { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; line-height: 1; }
.lba-p-pts .lba-coin { align-self: center; width: var(--coin); height: var(--coin); }
.lba-p-pts b {
  font: 700 var(--pfs)/1 var(--f-hd); color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 168, 56, .35);
}
.lba-p-pts b small, .lba-p-prize b small { font-size: 60%; font-weight: 700; color: #c4c4d0; }
.lba-p-k {
  margin-top: .35cqw; font: 700 max(9px, .64cqw)/1.2 var(--f-hd); letter-spacing: .1em;
  text-transform: uppercase; color: #8a8a9a;
}
.lba-p-prize {
  display: flex; align-items: center; justify-content: center; gap: .7cqw; margin-top: .85cqw; width: 100%;
  padding: .64cqw .7cqw; box-sizing: border-box; border-radius: 8px; border: 1px solid rgba(255, 122, 24, .45);
  background: linear-gradient(180deg, rgba(255, 122, 24, .16), rgba(255, 122, 24, .06));
  box-shadow: inset 0 0 20px -10px rgba(255, 122, 24, .8);
}
.lba-p-prize > small {
  font: 700 max(10px, .75cqw)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838;
}
.lba-p-prize .lba-coin { width: max(14px, 1.14cqw); height: max(14px, 1.14cqw); }
.lba-p-prize b { font: 700 var(--zfs)/1 var(--f-hd); color: #fff; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- таблица мест 4–10 */

.lba-table {
  position: relative; z-index: 6; margin: -9% 36px 0 40px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 122, 24, .3); background: linear-gradient(180deg, rgba(12, 11, 14, .9), rgba(8, 7, 10, .94));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .95), inset 0 0 60px -30px rgba(255, 122, 24, .5);
}
.lba-line {
  position: absolute; left: 8%; right: 8%; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ffa838, transparent); box-shadow: 0 0 14px rgba(255, 168, 56, .9);
}
.lba-th, .lba-tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) 260px 200px; align-items: center; gap: 14px; }
.lba-th {
  padding: 16px 28px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #8a8a9a;
}
.lba-tr { padding: 9px 28px; border-bottom: 1px solid rgba(255, 255, 255, .045); transition: background .2s; }
.lba-tr:hover { background: rgba(255, 122, 24, .06); }
.lba-rank { font: 700 var(--fs-body)/1 var(--f-hd); color: #c4c4d0; font-variant-numeric: tabular-nums; }
.lba-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lba-ava {
  position: relative; overflow: hidden;
  flex: none; width: 32px; height: 32px; padding: 0; box-sizing: border-box; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; font: 700 var(--fs-body)/1 var(--f-hd); color: #fff; transition: transform .2s;
  background: radial-gradient(circle at 35% 30%, hsl(var(--h) 45% 42%), hsl(var(--h) 45% 16%));
  border: 2px solid hsl(var(--h) 60% 55%);
}
.lba-ava:hover { transform: scale(1.12); }
/* Фото игрока — во весь кружок; нет фото или не загрузилось — остаётся
   буква на цветной подложке выше (letter из avaInner рисуется тем же
   узлом, фото просто ложится поверх). */
.lba-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lba-name {
  font: 600 var(--fs-body)/1.5 var(--f-hd); color: #ececf2; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lba-name:hover { color: #ffa838; }
.lba-num { display: flex; align-items: center; gap: 9px; }
.lba-num b { font: 700 16px/1 var(--f-hd); color: #fff; font-variant-numeric: tabular-nums; }
.lba-num b small { font-size: var(--fs-label); font-weight: 700; color: #a2a2b2; }
.lba-empty { padding: 22px 28px; color: var(--tx-3); font-size: var(--fs-label); }

@media (max-width: 1180px) {
  .lba-th, .lba-tr { grid-template-columns: 44px minmax(0, 1fr) 180px 130px; }
  .lba-table { margin: -9% 16px 0; }
}

/* ---------------------------------------------------------- телефон */

@media (max-width: 880px) {
  .lba-hero, .lba-table { display: none; }
  .lba-mob { display: flex; flex-direction: column; gap: 14px; }
  .lba-mhead {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border-radius: 16px; border: 1px solid rgba(255, 122, 24, .32);
    background: linear-gradient(120deg, rgba(36, 22, 10, .92), rgba(12, 11, 15, .96));
  }
  .lba-mhead-ic {
    flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
    background: rgba(255, 122, 24, .14); border: 1px solid rgba(255, 168, 56, .4); font-size: 19px;
  }
  .lba-mhead > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .lba-mhead > div > b {
    font: 700 17px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  }
  .lba-mhead > div > span { font: 400 var(--fs-cap)/1 var(--f-ui); color: #9a9aaa; }
  .lba-mhead .lba-clock { font: 700 var(--fs-cap)/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums; }
  .lba-mlist { display: flex; flex-direction: column; gap: 8px; }
  .lba-mr {
    --ac: rgba(255, 255, 255, .12); --ring: hsl(var(--h) 60% 55%); --rk: #8a8a9a; --pz: #ffa838;
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border-radius: 14px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .07); background: rgba(16, 16, 21, .9);
  }
  .lba-mr::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ac); }
  .lba-mr.m1 {
    --ac: #ffd23b; --ring: #ffd23b; --rk: #ffd23b; --pz: #ffd23b; border-color: rgba(255, 210, 59, .55);
    background: linear-gradient(100deg, rgba(255, 210, 59, .2), rgba(12, 11, 15, .96) 62%);
    box-shadow: 0 0 26px -10px rgba(255, 210, 59, .9);
  }
  .lba-mr.m2 {
    --ac: #dfe2ee; --ring: #dfe2ee; --rk: #dfe2ee; --pz: #dfe2ee; border-color: rgba(216, 220, 236, .45);
    background: linear-gradient(100deg, rgba(216, 220, 236, .16), rgba(12, 11, 15, .96) 62%);
    box-shadow: 0 0 24px -12px rgba(216, 220, 236, .7);
  }
  .lba-mr.m3 {
    --ac: #ff9a3c; --ring: #ff9a3c; --rk: #ff9a3c; --pz: #ff9a3c; border-color: rgba(224, 122, 42, .5);
    background: linear-gradient(100deg, rgba(224, 122, 42, .18), rgba(12, 11, 15, .96) 62%);
    box-shadow: 0 0 24px -12px rgba(224, 122, 42, .8);
  }
  .lba-mr-rank {
    flex: none; width: 26px; text-align: center; font: 700 17px/1 var(--f-hd); color: var(--rk);
    font-variant-numeric: tabular-nums;
  }
  .lba-mr-ava {
    position: relative; overflow: hidden;
    flex: none; width: 38px; height: 38px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, hsl(var(--h) 45% 42%), hsl(var(--h) 45% 16%));
    border: 2px solid var(--ring); font: 700 16px/1 var(--f-hd); color: #fff;
  }
  .lba-mr-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .lba-mr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .lba-mr-name {
    font: 600 var(--fs-body)/1 var(--f-hd); color: #f2f2f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lba-mr-pts { display: flex; align-items: center; gap: 6px; font: 400 var(--fs-micro)/1 var(--f-ui); color: #8a8a9a; }
  .lba-mr-pts .lba-coin { width: 13px; height: 13px; filter: none; }
  .lba-mr-pz { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .lba-mr-pz span {
    font: 600 10px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3);
  }
  .lba-mr-pz b { font: 700 16px/1 var(--f-hd); color: var(--pz); font-variant-numeric: tabular-nums; }
}

@media (prefers-reduced-motion: reduce) {
  .lba-bg, .lba-spot, .lba-king { animation: none; }
}

/* ============================================================ ALIVE · КОЛЕСО

   Страница колеса по макету Wheel Alive: фон-картинка страницы, три колонки
   (заголовок · уровень, барабан и кнопка · маскот и награды уровня), на
   телефоне одна колонка, как в mobVals() макета. Префикс wha- проверен
   грепом по app.css, js и index.html. Разметка — #page-wheel в index.html,
   поведение — loyalty.js (paintWheelPage). */

#page-wheel [hidden] { display: none !important; }

@keyframes whaGlow {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes whaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Страница во всю ширину области контента: фон макета идёт от сайдбара до края
   и от шапки до подвала, поэтому отступы .content гасятся. */
.wha {
  position: relative; min-width: 0; overflow: hidden; box-sizing: border-box;
  display: grid; gap: 20px; padding: 28px 28px 40px;
  grid-template-columns: minmax(190px, 300px) minmax(460px, 1fr) minmax(200px, 360px);
  margin: calc(-1 * var(--content-top, 20px)) -20px -20px;
  color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui); font-variant-numeric: tabular-nums;
}
/* Цельная сцена колеса: картинка размером и сдвигом по колесу (wheelfx.js
   placeScene). Всё живое внутри — в долях картинки, поэтому само едет за
   масштабом. Края, если картинка их не закрыла, гаснут в цвет страницы. */
.wha { background: #07070a; }
.wha > .wha-scene {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; transform-origin: 0 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%);
}
.wha-scene > .wha-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; }
/* Дым над площадкой: два слоя тянутся в разные стороны. */
.wha-scene > .wha-fog {
  position: absolute; left: 6%; right: 6%; top: 62%; height: 22%; border-radius: 50%; filter: blur(26px); opacity: .55;
  background: radial-gradient(ellipse 40% 60% at 30% 55%, rgba(255, 196, 160, .32), transparent 70%),
              radial-gradient(ellipse 35% 50% at 72% 45%, rgba(255, 170, 120, .26), transparent 70%);
  animation: whaFog 14s ease-in-out infinite alternate;
}
.wha-scene > .wha-fog.f2 { top: 70%; opacity: .4; animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes whaFog { from { transform: translateX(-4%) scaleY(.9); } to { transform: translateX(4%) scaleY(1.1); } }
/* Огни площадки и подставки — мерцают вразнобой. */
.wha-scene > .wha-lights > i {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 6%; aspect-ratio: 2.4; transform: translate(-50%, -50%);
  border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 168, 70, .55), rgba(255, 110, 20, .18) 45%, transparent 70%);
  animation: whaLamp 2.3s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes whaLamp { 0%, 100% { opacity: .35; } 40% { opacity: 1; } 55% { opacity: .55; } 62% { opacity: .9; } }
/* Искры: поднимаются от площадки и гаснут. */
.wha-scene > .wha-sparks > i {
  position: absolute; left: calc(var(--x) * 100%); top: 78%; width: calc(var(--s) * .3%); aspect-ratio: 1; border-radius: 50%;
  background: #ffc27a; box-shadow: 0 0 6px 2px rgba(255, 140, 40, .8); opacity: 0;
  animation: whaSpark var(--t) linear infinite; animation-delay: var(--d);
}
@keyframes whaSpark {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(4vw, -38vh); }
}
@media (prefers-reduced-motion: reduce) { .wha-scene > .wha-fog, .wha-scene > .wha-lights > i, .wha-scene > .wha-sparks > i { animation: none; } .wha-scene > .wha-sparks { display: none; } }
/* Тень маскота на площадке: под ступнями; в прыжке сжимается (wheelfx.js). */
.wha-hero > .wha-hero-shadow {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 50%, transparent 72%);
}
.wha > .wha-shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 7, 10, .78), rgba(7, 7, 10, .2) 26%, rgba(7, 7, 10, .08) 70%, rgba(7, 7, 10, .55)),
              linear-gradient(180deg, rgba(7, 7, 10, .5), transparent 22%, transparent 72%, rgba(7, 7, 10, .8));
}

/* ---------------------------------------------------------- левая колонка */

.wha > .wha-intro {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px;
  padding-top: 54px; min-width: 0;
}
.wha-intro > .wha-kicker {
  font: 600 var(--fs-ui)/1 var(--f-hd); letter-spacing: .5em; text-transform: uppercase; color: #ffa838;
}
.wha-intro > .wha-h {
  margin: 0; padding: 0; font: 700 clamp(36px, 3.1vw, 52px)/.95 var(--f-hd); letter-spacing: -.02em;
  text-transform: uppercase; color: #ececf2; text-shadow: 0 4px 30px rgba(0, 0, 0, .9);
}
.wha-intro > .wha-h > span {
  background: linear-gradient(96deg, #ffa838, #ff7a18, #ffd23b, #ffa838);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 122, 24, .45)); font-size: 1.35em;
}
.wha-intro > .wha-tag {
  font: 700 var(--fs-body)/1 var(--f-hd); letter-spacing: .32em; text-transform: uppercase; color: #ececf2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
.wha-intro > .wha-lead {
  margin: 6px 0 0; padding: 0; font: 400 var(--fs-body)/1.6 var(--f-ui); color: #d0d0da;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9); text-wrap: pretty;
}

/* ---------------------------------------------------------- центр */

.wha > .wha-center {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0;
}
.wha-center > .wha-xp { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1997 / 788; flex: none; }
.wha-xp.guest { visibility: hidden; }
.wha-xp > img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .7));
}
.wha-xp > .wha-xp-txt {
  position: absolute; left: 24%; right: 24%; top: 16%; height: 33%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.wha-xp-txt > b {
  font: 700 21px/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #ececf2; white-space: nowrap;
}
.wha-xp-txt > span {
  font: 600 var(--fs-label)/1 var(--f-hd); letter-spacing: .1em; color: #a2a2b2; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wha-xp > .wha-xp-bar {
  position: absolute; left: 15%; width: 70%; top: 59.5%; height: 9.5%;
  border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .4);
}
.wha-xp-bar > i {
  display: block; width: 0; height: 100%; border-radius: 12px;
  background: linear-gradient(90deg, #ffa838, #ff5c00); box-shadow: 0 0 14px rgba(255, 122, 24, .8);
  transition: width .6s ease;
}

.wha-center > .wha-wheel { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; flex: none; margin-top: -4px; }
.wha-wheel > .wha-glow {
  position: absolute; left: 50%; top: 50%; width: 115%; height: 115%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 122, 24, .38), rgba(255, 122, 24, .1) 45%, transparent 70%);
  animation: whaGlow 4s ease-in-out infinite;
}
.wha-wheel > .wha-disc {
  /* Диск вписан в отверстие рамки ring.png по окружностям, подогнанным к
     альфа-каналу обеих картинок (см. коммит): отверстие рамки — диаметр
     73.7% её ширины с центром в (49.9%, 48.5%) — оно на 1.5% ВЫШЕ центра
     картинки; видимый круг диска — 92.9% его бокса с центром (50.0%, 49.2%).
     Отсюда бокс 80.4% (с запасом 0.7%, чтобы край круга уходил под кант
     рамки), left 9.73%, top 8.96%. Раньше бокс был 75% — видимый круг 69%,
     и между диском и рамкой оставалась тёмная щель. */
  /* 2026-10-11: новый обод ring.webp — отверстие 71.4% с центром (50.0%, 48.5%),
     видимый круг диска 91.8% бокса с центром (50.0%, 49.4%); бокс 78.65% (край круга
     на 1.2% под кантом). Вращение — вокруг центра КРУГА, а не бокса: иначе после
     спина диск оставался сдвинутым на полпроцента в случайную сторону. */
  position: absolute; left: 10.67%; top: 9.63%; width: 78.65%; height: 78.65%;
  transform-origin: 50% 49.41%;
  will-change: transform; container-type: inline-size;
}
.wha-disc > img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .7));
}
.wha-disc > .wha-secs { position: absolute; inset: 0; pointer-events: none; }
.wha-secs > .wha-sec { position: absolute; inset: 0; pointer-events: none; }
.wha-sec > .wha-it {
  position: absolute; left: 50%; top: 8%; width: 21%; height: 21%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.wha-it > img { display: block; max-width: none; object-fit: contain; }
.wha-it > b { display: block; font-family: var(--f-hd); font-weight: 700; font-variant-numeric: tabular-nums; }
.wha-it.coins > img { width: 66%; height: 52%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .8)); }
.wha-it.coins > b { font-size: 3.7cqw; line-height: 1; color: #ffd23b; text-shadow: 0 0 12px rgba(255, 168, 56, .8); }
.wha-it.pct > .wha-pct { position: relative; display: block; width: 84%; aspect-ratio: 1296 / 1213; }
.wha-pct > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.wha-pct > span {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; line-height: 1;
}
.wha-pct > span > b { font: 700 4.5cqw/1 var(--f-hd); color: #ffa838; text-shadow: 0 0 14px rgba(255, 122, 24, .8); }
.wha-pct > span > small {
  font: 600 2cqw/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #c4c4d0;
}
.wha-it.skin > img { width: 72%; height: 56%; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .8)); }
.wha-it.skin > b {
  font-size: 2.6cqw; line-height: 1.1; letter-spacing: .04em; color: #ececf2; text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.wha-it.case > img { width: 74%; height: 58%; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .8)); }
.wha-it.case > b {
  font-size: 3.3cqw; line-height: 1; color: #ffa838; text-align: center; text-shadow: 0 0 12px rgba(255, 122, 24, .7);
}
.wha-wheel > .wha-ring {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(255, 122, 24, .3));
}
/* Свет ламп обода — отдельный слой поверх рамы: в покое дышит и мигает,
   при вращении по ободу бежит огонь (маска-сектор из wheelfx.js), на
   остановке вспыхивает. */
.wha-wheel > .wha-ring-glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: url('/assets/wheel/ring-glow.webp') center / 100% 100% no-repeat;
  opacity: .8; animation: whaLamps 3.4s ease-in-out infinite;
}
.wha-wheel > .wha-ring-glow.run { animation: none; opacity: 1; filter: brightness(1.25) drop-shadow(0 0 14px rgba(255, 160, 50, .8)); }
.wha-wheel > .wha-ring-glow.flash { animation: whaFlash 1.1s ease-out 1; }
@keyframes whaLamps { 0%, 100% { opacity: .62; } 45% { opacity: .95; } 52% { opacity: .7; } 56% { opacity: .98; } 70% { opacity: .8; } }
@keyframes whaFlash { 0% { opacity: 1; filter: brightness(2.2) drop-shadow(0 0 40px rgba(255, 190, 90, 1)); } 25% { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 22px rgba(255, 160, 50, .8)); } 40% { opacity: .85; } 55% { opacity: 1; filter: brightness(1.6); } 100% { opacity: .8; filter: none; } }
/* Маскот колеса — видео в холсте (wheelfx.js / keyvideo.js), координаты —
   страницы колеса. Он ЗА колесом (центральная колонка выше): правый край
   кадра стоит под ободом, руки при толчке уходят за обод. Свет на нём уже
   из сцены — без своих свечений. */
.wha > .wha-hero { position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 0; pointer-events: none; }
.wha > .wha-center { z-index: 2; }
.wha-hero > .wha-hero-cv { position: absolute; display: block; max-width: none; }
#wheelPage > .wha-side, #wheelPage > .wha-intro { z-index: 3; }
@media (max-width: 880px) { .wha > .wha-hero { display: none; } }

.wha-center > .wha-cta {
  display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px;
  width: 100%; max-width: 400px; container-type: inline-size;
}
.wha-cta > .wha-btn {
  width: 100%; margin: 0; padding: 20px 24px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 clamp(17px, 4.5cqw, 24px)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; color: #180a00; background: linear-gradient(135deg, #ffa838, #ff5c00);
  box-shadow: 0 0 30px rgba(255, 122, 24, .5), 0 14px 30px -12px rgba(0, 0, 0, .9);
}
.wha-cta > .wha-btn:hover { filter: brightness(1.08); }
.wha-cta > .wha-btn.wait { cursor: default; opacity: .55; }
.wha-cta > .wha-note {
  display: flex; align-items: center; gap: 8px; font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .16em;
  text-transform: uppercase; color: #c4c4d0; text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.wha-note > i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #ffa838; box-shadow: 0 0 8px #ffa838; }


/* ---------------------------------------------------------- правая колонка */

.wha > .wha-side {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-end; gap: 14px; min-width: 0;
}
.wha-side > .wha-ph { position: relative; width: 100%; max-width: 340px; aspect-ratio: 340 / 430; flex: none; }
/* Маскот заполняет бокс целиком: так он стоит на одном месте на любой
   ширине. Раньше он был приколочен к пикселям макета (left: 784px) и на
   1440 показывал только плечо, а на 1100 не влезал в сцену вовсе. */
.wha-ph > .wha-mascot {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .8)) drop-shadow(0 0 24px rgba(255, 122, 24, .3));
  animation: whaFloat 5s ease-in-out infinite; pointer-events: none;
  /* фикс №1: отдельный композит-слой, тень не перерисовывается каждый кадр
     (убирает мерцание при зуме страницы). Откатить — убрать две строки ниже. */
  will-change: transform; backface-visibility: hidden;
}
/* Уровни колеса — список справа: порог и название; наведение раскрывает
   слева окно с призами этого уровня. Текущий уровень подсвечен. */
.wha-side > .wha-tiers {
  width: 100%; box-sizing: border-box; padding: 12px 14px 10px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 10, 14, .74);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 2px;
}
.wha-tiers > .wha-tiers-h {
  margin: 0 0 6px; padding: 2px 2px 2px 6px; width: 100%; box-sizing: border-box; border: 0; background: transparent;
  display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left;
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .16em; text-transform: uppercase; color: #c4c4d0;
}
.wha-tiers-h > em {
  margin-left: auto; font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .06em; color: #ffa838; text-transform: none;
}
.wha-tiers-h > .wha-tiers-cx {
  flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease; opacity: .75;
}
.wha-tiers.collapsed > .wha-tiers-h { margin-bottom: 0; }
.wha-tiers.collapsed .wha-tiers-h > .wha-tiers-cx { transform: rotate(-135deg); }
.wha-tiers > .wha-tiers-list { display: flex; flex-direction: column; gap: 2px; }
.wha-tiers.collapsed > .wha-tiers-list { display: none; }
/* Строки лежат в .wha-tiers-list (панель сворачивается), поэтому не прямые дети. */
.wha-tiers .wha-tier {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 6px 8px;
  border: 0; border-radius: 8px; background: transparent; color: #c4c4d0; text-align: left; cursor: default;
  font: 600 var(--fs-label)/1 var(--f-hd);
}
.wha-tier > b { flex: 1; color: #ececf2; }
.wha-tier > small { font: 600 var(--fs-cap)/1 var(--f-hd); color: #8a8a9a; font-variant-numeric: tabular-nums; }
.wha-tier.on { background: rgba(255, 122, 24, .12); color: #ffa838; }
.wha-tier.on > b { color: #ffa838; }
.wha-tier.on::after { content: 'ты здесь'; font: 600 10px/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #ffa838; }
.wha-tier:hover, .wha-tier:focus-visible { background: rgba(255, 255, 255, .06); outline: none; }
.wha-tier > .wha-tier-pop {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 6;
  width: 250px; padding: 12px 14px; border-radius: 12px; box-sizing: border-box;
  border: 1px solid rgba(255, 122, 24, .35); background: rgba(10, 10, 14, .96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6); display: none; flex-direction: column; gap: 6px;
  font: 500 var(--fs-label)/1.3 var(--f-ui); color: #dcdce4; text-align: left; cursor: default;
}
.wha-tier:hover > .wha-tier-pop, .wha-tier:focus-visible > .wha-tier-pop, .wha-tier:focus-within > .wha-tier-pop { display: flex; }
.wha-tier-pop > b { font: 700 var(--fs-label)/1.2 var(--f-hd); color: #ffa838; margin-bottom: 2px; }
.wha-tier-pop > span { display: flex; justify-content: space-between; gap: 10px; }
.wha-tier-pop > span > i { font-style: normal; color: #8a8a9a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wha-side > .wha-rw {
  width: 100%; box-sizing: border-box; padding: 16px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 10, 14, .74);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 12px;
}
.wha-rw > .wha-rw-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .16em; text-transform: uppercase; color: #c4c4d0;
}
.wha-rw-h > b {
  flex: none; width: 115px; height: 26px; font: 700 var(--fs-label)/1 var(--f-hd); letter-spacing: .06em; color: #ffa838;
}
.wha-rw > .wha-rw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wha-rw-grid > .wha-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03);
}
.wha-tile > .wha-tile-ic { height: 40px; display: grid; place-items: center; }
.wha-tile-ic > img { display: block; max-width: none; object-fit: contain; }
.wha-tile-ic > img.coins { width: 44px; height: 36px; }
.wha-tile-ic > img.case { width: 50px; height: 38px; }
.wha-tile-ic > img.disc { width: 40px; height: 40px; }
.wha-tile-ic > b { font: 700 19px/1 var(--f-hd); color: #ffa838; text-shadow: 0 0 12px rgba(255, 122, 24, .7); }
.wha-tile > .wha-tile-l { font: 600 var(--fs-micro)/1.2 var(--f-hd); text-align: center; color: #c4c4d0; }

/* ------------------------------------------------- узкий десктоп и планшет

   Минимумы колонок из макета (190 + 460 + 200 плюс отступы) шире рабочей
   области на 1100: сетка вылезала за сцену, и правый столбец с маскотом и
   наградами обрезало. Ужимаем минимумы — раскладка остаётся трёхколоночной
   до самого телефона. */

@media (max-width: 1280px) {
  .wha {
    grid-template-columns: minmax(150px, 240px) minmax(340px, 1fr) minmax(170px, 300px);
    gap: 14px; padding: 20px 16px 30px;
  }
}

/* ---------------------------------------------------------- телефон */

@media (max-width: 880px) {
  .wha {
    grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 12px 28px;
    margin: -12px -12px -20px;
  }
  /* «Следующий спин через 23ч 20м 18с» в одну строку (nowrap макета) шире
     телефона — ужимается только подпись ожидания, «Крутить колесо» как в макете. */
  .wha-cta > .wha-btn.wait { padding-inline: 10px; font-size: var(--fs-body); letter-spacing: .02em; }
  /* Маскота на телефоне нет: колонка одна, и он встал бы во весь экран
     между кнопкой и наградами. Его бокс держит место так же, как держал. */
  .wha-ph > .wha-mascot { display: none; }
  .wha-tier > .wha-tier-pop { right: 0; left: 0; top: 100%; transform: none; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wha-wheel > .wha-glow, .wha-ph > .wha-mascot, .wha-wheel > .wha-ring-glow { animation: none; }
  .wha-xp-bar > i { transition: none; }
}

/* ============================================================ ALIVE · BATTLE PASS

   По макету Battle Pass Alive: сцена с маскотом и заданиями, плита
   прогресса со скошенными углами и светящимися кромками, лента наград и
   три вехи сезона. Данные — из /api/bp, рисует battlepass.js. Префикс bpp-. */

#page-battlepass [hidden] { display: none !important; }
.bpp { width: 100%; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; }
.bpp .bp-empty { margin: 0; }

@keyframes bppDrift { 0% { transform: scale(1); } 100% { transform: scale(1.04); } }
@keyframes bppGlow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes bppZeroG { 0% { transform: translateX(-50%) translateY(0) rotate(-2deg); } 100% { transform: translateX(-50%) translateY(-14px) rotate(2deg); } }
@keyframes bppKick {
  0%, 100% { box-shadow: 0 8px 24px rgba(255, 92, 0, .4); }
  50% { box-shadow: 0 0 0 6px rgba(255, 122, 24, 0), 0 8px 30px rgba(255, 92, 0, .65); }
}

/* ---------------------------------------------------------- сцена */

/* Высота сцены — по пропорции самой картинки (bg.png, 1672×941). Была
   фиксированная, и object-fit: cover срезал у арта треть: пол площадки,
   верх кольца и планету. Теперь бокс и картинка одной пропорции, cover
   ничего не режет — сцена видна целиком. На узком экране min-height
   побеждает пропорцию, и кадрирование там остаётся прежним. */
.bpp-hero {
  /* isolation: слои сцены (тень, маскот) имеют свои z-index, и без своего
     контекста наложения они рисовались ПОВЕРХ ленты и витрины, идущих
     после сцены, — награды оказывались под картинкой и тенью. Потолок
     высоты: на широком экране сцена в пропорцию арта уходила под всю
     ленту; выше 820px арт режется снизу (там пол площадки). */
  position: relative; isolation: isolate; aspect-ratio: 1672 / 941; min-height: 520px; max-height: 820px;
  overflow: hidden; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start;
  padding: 56px 36px 40px 40px;
}
.bpp-bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 40%; animation: bppDrift 30s ease-in-out infinite alternate;
}
.bpp-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 7, 10, .86) 0%, rgba(7, 7, 10, .55) 30%, rgba(7, 7, 10, .05) 55%, rgba(7, 7, 10, .35) 100%),
    linear-gradient(180deg, rgba(7, 7, 10, .35), transparent 30%, transparent 55%, rgba(7, 7, 10, .95) 100%);
}
.bpp-halo {
  position: absolute; z-index: 2; left: 50%; top: 44%; width: 520px; height: 340px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; animation: bppGlow 5s ease-in-out infinite;
  background: radial-gradient(ellipse, rgba(255, 122, 24, .28), transparent 65%);
}
.bpp-mascot {
  position: absolute; z-index: 3; left: 50%; top: 14px; width: 400px; height: 400px; object-fit: contain;
  pointer-events: none; animation: bppZeroG 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .8)) drop-shadow(0 0 30px rgba(255, 122, 24, .35));
}
.bpp-intro { position: relative; z-index: 4; align-self: start; min-width: 0; }
.bpp-kicker {
  display: flex; align-items: center; gap: 12px; font: 700 var(--fs-ui)/1.5 var(--f-hd); letter-spacing: .1em;
  text-transform: uppercase; color: #ffa838;
}
.bpp-kicker span {
  padding: 3px 8px; border-radius: 5px; letter-spacing: .14em; font-size: 10px; line-height: 1.4;
  background: rgba(255, 122, 24, .16); border: 1px solid rgba(255, 122, 24, .4);
}
.bpp-intro h1 {
  margin: 10px 0 0; font: 700 64px/.92 var(--f-hd); letter-spacing: -.02em; text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .9);
}
.bpp-intro h1 span { display: block; color: #d9d9e2; }
.bpp-intro h1 .bpp-accent {
  background: linear-gradient(96deg, #ffa838, #ff7a18, #ffd23b, #ffa838);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 122, 24, .45));
}
.bpp-motto {
  margin-top: 12px; font: 600 var(--fs-ui)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: #ececf2; text-shadow: 0 1px 12px rgba(0, 0, 0, .9);
}
.bpp-lead {
  margin: 14px 0 0; max-width: 440px; font: 400 var(--fs-ui)/1.6 var(--f-ui); color: #c4c4d0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .9);
}
.bpp-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.bpp-about {
  padding: 13px 22px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .22); cursor: pointer;
  background: rgba(10, 10, 14, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #ececf2; font: 600 var(--fs-ui)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
}
.bpp-about:hover { border-color: #ffa838; color: #ffa838; }
.bpp-timer { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.bpp-timer-ic {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #ffa838; font-size: 18px;
  background: rgba(10, 10, 14, .7); border: 1px solid rgba(255, 122, 24, .45); box-shadow: 0 0 18px rgba(255, 122, 24, .25);
}
.bpp-timer > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.bpp-timer small {
  font: 600 var(--fs-cap)/1.15 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a2a2b2;
}
.bpp-timer b {
  font: 700 22px/1.15 var(--f-hd); letter-spacing: .04em; color: #ececf2; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(255, 122, 24, .4);
}

/* ---------------------------------------------------------- задания */

.bpp-tasks {
  /* Карточка заданий прижата к плите прогресса, а не к верху сцены:
     отступ сверху доводит её низ почти до плиты (см. .bpp-prog). */
  position: relative; z-index: 4; align-self: start; margin-top: 56px; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 12px; border-radius: 14px; border: 1px solid rgba(255, 122, 24, .28);
  background: rgba(9, 8, 10, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9), inset 0 0 30px -20px rgba(255, 122, 24, .5);
}
.bpp-tasks-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bpp-tasks-h span {
  font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838;
}
.bpp-tasks-h small { font: 400 var(--fs-micro)/1.5 var(--f-ui); color: #8a8a9a; font-variant-numeric: tabular-nums; }
.bpp-frozen { margin: 0; font-size: var(--fs-cap); line-height: 1.5; color: #a2a2b2; }
.bpp-tlist { display: flex; flex-direction: column; gap: 8px; }
.bpp-task {
  padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .06);
}
.bpp-task.done { border-color: rgba(255, 122, 24, .45); }
.bpp-task-top { display: flex; align-items: center; gap: 8px; }
.bpp-task-top b { font: 700 var(--fs-ui)/1.3 var(--f-hd); color: #ececf2; }
.bpp-task.done .bpp-task-top b { color: #ffa838; }
.bpp-task-top span {
  margin-left: auto; font: 700 var(--fs-label)/1 var(--f-hd); color: #ffa838; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bpp-task-row { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.bpp-task-bar { flex: 1; height: 4px; border-radius: 3px; background: #1c1c24; overflow: hidden; }
.bpp-task-bar i {
  display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffa838, #ff5c00);
  box-shadow: 0 0 8px rgba(255, 122, 24, .6);
}
.bpp-task-row small, .bpp-task-wait { font: 400 var(--fs-micro)/1 var(--f-ui); color: #8a8a9a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bpp-task-go {
  padding: 5px 10px; border: 0; border-radius: 6px; cursor: pointer; color: #180a00;
  background: linear-gradient(135deg, #ffa838, #ff5c00); font: 600 var(--fs-label)/1 var(--f-hd);
  letter-spacing: .08em; text-transform: uppercase;
}
.bpp-task-go:disabled { opacity: .6; cursor: default; }
.bpp-week {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  border: 1px dashed rgba(255, 210, 59, .35); background: rgba(255, 210, 59, .05);
}
.bpp-week-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.bpp-week-tx small:first-child {
  font: 600 var(--fs-micro)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffd23b;
}
.bpp-week-tx b { font: 700 var(--fs-ui)/1.25 var(--f-hd); color: #ececf2; }
.bpp-week-tx small:last-child { font: 400 var(--fs-micro)/1.3 var(--f-ui); color: #8a8a9a; }
.bpp-week-xp { margin-left: auto; font: 700 var(--fs-ui)/1 var(--f-hd); color: #ffd23b; white-space: nowrap; }

/* ---------------------------------------------------------- плита прогресса

   Плита стоит сразу под контентом сцены — названием сезона и карточкой
   заданий, — а не под картинкой. Сцена высотой в пропорцию арта (56.25% от
   ширины), и на широком экране между контентом и плитой зияла бы полоса
   чистой картинки: отступ вверх считается от высоты сцены (56.25% ширины, но не выше её потолка 820px) так, чтобы верх плиты
   всегда был на ~500px от верха сцены, при любой ширине. Нижняя половина
   арта остаётся фоном под плитой и лентой. На узком экране арт обрезан по
   min-height — там свои отступы ниже, в медиазапросах. */

.bpp-prog {
  position: relative; z-index: 5; margin: calc(500px - min(56.25%, 820px)) 36px 0 40px; padding: 26px 34px 24px;
  display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; grid-template-rows: auto auto;
  gap: 14px 18px; align-items: center; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .85));
}
.bpp-plate, .bpp-plate-in { position: absolute; z-index: -1; pointer-events: none; }
.bpp-plate {
  inset: 0;
  clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
  background: linear-gradient(180deg, #26262c, #101014 12%, #0b0b0f 88%, #1c1c22);
}
.bpp-plate-in {
  inset: 5px;
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
  background:
    repeating-linear-gradient(-35deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(55deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-35deg, transparent 0 60px, rgba(0, 0, 0, .5) 60px 84px, transparent 84px 150px),
    repeating-linear-gradient(-35deg, transparent 0 33px, rgba(255, 255, 255, .035) 33px 34px, transparent 34px 90px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 2px),
    radial-gradient(circle at 12% 30%, rgba(0, 0, 0, .6), transparent 30%),
    radial-gradient(circle at 62% 80%, rgba(0, 0, 0, .55), transparent 28%),
    radial-gradient(ellipse at 40% 45%, rgba(255, 122, 24, .05), transparent 55%),
    linear-gradient(180deg, #0d0d11, #07070a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 0 rgba(255, 255, 255, .04), inset 0 0 80px rgba(0, 0, 0, .85);
}
.bpp-rim { position: absolute; z-index: -1; pointer-events: none; border-radius: 2px; box-shadow: 0 0 12px rgba(255, 122, 24, .9), 0 0 30px rgba(255, 122, 24, .5); }
.bpp-rim.t, .bpp-rim.b { left: 36px; right: 36px; height: 3px; }
.bpp-rim.t {
  top: 3px;
  background: linear-gradient(90deg, #ff7a18 0, #ffd23b 60px, transparent 120px, transparent 22%, #ffa838 26%, #ff7a18 34%, transparent 38%, transparent calc(100% - 120px), #ffd23b calc(100% - 60px), #ff7a18);
}
.bpp-rim.b {
  bottom: 3px;
  background: linear-gradient(90deg, #ff7a18 0, #ffd23b 60px, transparent 120px, transparent 24%, #ff7a18 30%, #ffa838 36%, transparent 40%, transparent calc(100% - 120px), #ffd23b calc(100% - 60px), #ff7a18);
}
.bpp-rim.l, .bpp-rim.r {
  top: 36px; bottom: 36px; width: 3px; box-shadow: 0 0 12px rgba(255, 122, 24, .9);
  background: linear-gradient(180deg, #ffa838, transparent 40%, transparent 60%, #ffa838);
}
.bpp-rim.l { left: 3px; }
.bpp-rim.r { right: 3px; }
.bpp-hex { position: relative; width: 78px; height: 86px; display: grid; place-items: center; grid-row: 1 / span 2; }
.bpp-hex::before, .bpp-hex::after {
  content: ''; position: absolute; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.bpp-hex::before { inset: 0; background: linear-gradient(180deg, #ffd23b, #ff5c00); filter: drop-shadow(0 0 14px rgba(255, 122, 24, .6)); }
.bpp-hex::after { inset: 3px; background: #0d0c10; }
.bpp-hex b {
  position: relative; z-index: 1; font: 700 30px/1 var(--f-hd); color: #ececf2; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 122, 24, .5);
}
.bpp-cur { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bpp-cur-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bpp-cur-h span { font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a2a2b2; }
.bpp-cur-h small { font: 700 var(--fs-label)/1.5 var(--f-hd); color: #a2a2b2; font-variant-numeric: tabular-nums; }
.bpp-cur-bar {
  position: relative; height: 10px; border-radius: 6px; overflow: hidden;
  background: #15151c; border: 1px solid rgba(255, 255, 255, .08);
}
.bpp-cur-bar i {
  display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ffa838, #ff5c00);
  box-shadow: 0 0 14px rgba(255, 122, 24, .7); transition: width .6s cubic-bezier(.2, .8, .3, 1);
}
.bpp-ready {
  grid-row: 1 / span 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; padding: 10px 14px;
  width: min(420px, 100%); box-sizing: border-box; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
}
.bpp-ready-art {
  position: relative; flex: none; width: 54px; height: 54px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: #0a0a0e; border: 1px solid rgba(255, 122, 24, .3); color: #ffa838;
}
.bpp-ready-art img, .bpp-ready-art svg {
  width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7));
}
.bpp-ready-tx { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.bpp-ready-tx small {
  font: 600 var(--fs-micro)/1.3 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #8a8a9a; white-space: nowrap;
}
.bpp-ready-tx b {
  font: 700 var(--fs-ui)/1.25 var(--f-hd); color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bpp-ready-tx small.o {
  font: 700 var(--fs-label)/1.25 var(--f-hd); letter-spacing: 0; text-transform: none; color: #ffa838;
  overflow: hidden; text-overflow: ellipsis;
}
.bpp-claim {
  flex: none; width: 150px; min-height: 44px; padding: 13px 0; border-radius: 8px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00;
  font: 600 var(--fs-ui)/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(255, 92, 0, .4); animation: bppKick 1.6s ease-out infinite;
}
.bpp-claim.off { background: rgba(255, 255, 255, .06); color: var(--tx-3); box-shadow: none; animation: none; cursor: default; }
.bpp-stats {
  grid-column: 2; grid-row: 2; justify-self: start; width: 100%; max-width: 640px; min-width: 0; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.bpp-stat {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}
.bpp-stat.hot { background: linear-gradient(90deg, rgba(255, 210, 59, .12), rgba(255, 255, 255, .03)); }
.bpp-stat-ic {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px;
  background: rgba(0, 0, 0, .45); color: #ececf2; font-size: 17px;
}
.bpp-stat.hot .bpp-stat-ic { color: #ffd23b; text-shadow: 0 0 10px #ffd23b; }
.bpp-stat-tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.bpp-stat-tx small {
  font: 600 var(--fs-micro)/1.15 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #8a8a9a; white-space: nowrap;
}
.bpp-stat-tx b { font: 700 18px/1.15 var(--f-hd); color: #ececf2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bpp-stat.hot .bpp-stat-tx b { color: #ffd23b; text-shadow: 0 0 14px rgba(255, 210, 59, .6); }
.bpp-stat-tx small.n { letter-spacing: .06em; color: var(--tx-3); }

/* ---------------------------------------------------------- лента */

.bpp-railsec { position: relative; margin: 22px 0 0; padding: 0 12px; }
.bpp-nav {
  position: absolute; top: 50%; transform: translateY(-70%); z-index: 3; width: 38px; height: 56px; border-radius: 8px;
  border: 1px solid rgba(255, 122, 24, .4); background: rgba(9, 8, 10, .85); color: #ffa838;
  font: 700 20px/1 var(--f-hd); cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .6);
}
.bpp-nav:hover { background: #ff7a18; color: #180a00; }
.bpp-nav.l { left: 14px; }
.bpp-nav.r { right: 14px; }
.bpp-rail {
  display: flex; align-items: flex-end; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
  padding: 14px 70px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40px, #000 90px, #000 calc(100% - 90px), transparent calc(100% - 40px));
  mask-image: linear-gradient(90deg, transparent 40px, #000 90px, #000 calc(100% - 90px), transparent calc(100% - 40px));
}
.bpp-rail::-webkit-scrollbar { display: none; }
.bpp-lv {
  --w: 104px; flex: none; width: var(--w); display: flex; flex-direction: column; align-items: center; gap: 8px;
  scroll-snap-align: center; transition: width .25s;
}
.bpp-lv.now { --w: 124px; }
.bpp-lv-n { font: 700 var(--fs-ui)/1 var(--f-hd); color: var(--tx-3); font-variant-numeric: tabular-nums; }
.bpp-lv.done .bpp-lv-n { color: #ececf2; }
.bpp-lv.now .bpp-lv-n { color: #ffa838; text-shadow: 0 0 12px rgba(255, 122, 24, .8); }
.bpp-card {
  position: relative; width: 100%; aspect-ratio: 1; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(20, 20, 26, .8), rgba(10, 10, 14, .9));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45); transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s;
  color: #ffa838; font: inherit;
}
.bpp-card:hover:not(:disabled) { transform: translateY(-4px); }
.bpp-card:disabled { cursor: default; }
.bpp-lv.done .bpp-card { border-color: rgba(255, 122, 24, .3); background: linear-gradient(180deg, rgba(34, 26, 20, .9), rgba(12, 10, 12, .95)); }
.bpp-card.ready { border-color: rgba(255, 168, 56, .7); }
.bpp-lv.now .bpp-card { border: 2px solid #ff7a18; box-shadow: 0 0 30px -4px rgba(255, 122, 24, .7), 0 14px 30px rgba(0, 0, 0, .6); }
.bpp-card-tex {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 7px);
}
.bpp-card-glow {
  position: absolute; left: 50%; top: 60%; width: 80%; height: 60%; transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none; background: radial-gradient(ellipse, rgba(255, 255, 255, .05), transparent 70%);
}
.bpp-lv.done .bpp-card-glow { background: radial-gradient(ellipse, rgba(255, 122, 24, .33), transparent 70%); }
.bpp-lv.done .bpp-card.skin .bpp-card-glow { background: radial-gradient(ellipse, rgba(255, 210, 59, .33), transparent 70%); }
.bpp-pct, .bpp-coins, .bpp-img, .bpp-art { position: absolute; object-fit: contain; }
.bpp-pct { inset: 8%; width: 84%; height: 84%; }
.bpp-pct-l {
  position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px/1 var(--f-hd); letter-spacing: -.02em;
  color: #ffa838; text-shadow: 0 0 14px rgba(255, 122, 24, .8);
}
.bpp-promo {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; line-height: 1;
}
.bpp-promo small { font: 700 10px/1 var(--f-hd); letter-spacing: .1em; color: #ffd23b; }
.bpp-promo b { font: 700 var(--fs-body)/1 var(--f-hd); letter-spacing: .04em; color: #ffa838; text-shadow: 0 0 12px rgba(255, 122, 24, .8); }
.bpp-coins { left: 8%; top: 6%; width: 84%; height: 66%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.bpp-coins-l {
  position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font: 700 16px/1 var(--f-hd);
  color: #ffd23b; text-shadow: 0 0 12px rgba(255, 168, 56, .8); font-variant-numeric: tabular-nums;
}
.bpp-img { inset: 10%; width: 80%; height: 80%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .75)); }
.bpp-art { inset: 10%; display: grid; place-items: center; }
.bpp-art img, .bpp-art svg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .75)); }
.bpp-art .bp-glyph { width: 56%; height: 56%; filter: drop-shadow(0 0 10px rgba(255, 122, 24, .6)); }
.bpp-art .skin-img { width: 100%; height: 100%; }
.bpp-ph {
  position: absolute; inset: 18%; border-radius: 8px; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 5px, transparent 5px 10px);
  font: 700 var(--fs-cap)/1 var(--f-hd); color: #a2a2b2;
}
/* Когда в приз скина легла картинка (скрещённые винтовки) — штриховку гасим,
   она нужна была только пустой заглушке. */
.bpp-ph:has(.bpp-skin-img) { background: none; inset: 6%; }
.bpp-skin-img {
  max-width: 100%; max-height: 74%; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7));
}
.bpp-skin-cap {
  position: absolute; left: 0; right: 0; bottom: 2px; text-align: center;
  font: 800 var(--fs-micro)/1 var(--f-hd); color: #ffd23b; text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

/* ---- нижняя дорожка ленты: доп-награда (косметика к скину) ----
   Меньше основной карточки — это добавка, а не второй главный приз. Пустые
   слоты держат высоту дорожки, чтобы косметика на пятых уровнях стояла в
   один ряд под лентой. */
.bpp-lv-b {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08); color: #ffa838;
  background: linear-gradient(180deg, rgba(20, 20, 26, .7), rgba(10, 10, 14, .85));
  display: grid; place-items: center;
}
.bpp-lv.done .bpp-lv-b { border-color: rgba(255, 122, 24, .28); }
.bpp-lv.locked .bpp-lv-b { opacity: .55; }
/* Пустой слот держит высоту дорожки, но не рисуется: ряд пунктирных рамок
   под лентой читался как неиспользуемая пустая линия (владелец,
   2026-09-30). В сезоне без доп-наград слотов нет вовсе (railHTML). */
.bpp-lv-b.empty { visibility: hidden; }
.bpp-lv-b .bpp-img, .bpp-lv-b img { max-width: 78%; max-height: 74%; object-fit: contain; }
.bpp-lv-b .bpp-ph { inset: 10%; font-size: 10px; }
.bpp-lv-b .bp-glyph { width: 42%; height: 42%; }
.bpp-lv-bt {
  position: absolute; left: 0; right: 0; bottom: 3px; text-align: center;
  font: 700 10px/1.15 var(--f-hd); color: #b8b8c6; padding: 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bpp-ok.sm { width: 18px; height: 18px; font-size: var(--fs-cap); right: 5px; bottom: 5px; }
.bpp-ok, .bpp-lock {
  position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; display: grid; place-items: center;
}
.bpp-ok {
  border-radius: 50%; background: #ffa838; color: #180a00; font: 700 var(--fs-ui)/1 var(--f-hd);
  box-shadow: 0 0 10px rgba(255, 122, 24, .7);
}
.bpp-lock {
  border-radius: 5px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .15); color: #8a8a9a; font-size: var(--fs-micro);
}
/* «+1» в верхнем углу карточки: на этом уровне не одна награда, а скин плюс
   косметика бонусом. Стоит слева сверху, чтобы не столкнуться с галочкой
   забранного (справа снизу) и тегом действия (по низу). */
.bpp-bonus {
  position: absolute; left: 6px; top: 6px; z-index: 3;
  min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  border-radius: 999px; background: linear-gradient(135deg, #ffa838, #ff5c00);
  color: #180a00; font: 800 var(--fs-micro)/1 var(--f-hd); letter-spacing: .02em;
  box-shadow: 0 0 10px rgba(255, 122, 24, .6);
}
.bpp-go {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 0; text-align: center;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; color: #180a00; background: linear-gradient(135deg, #ffa838, #ff5c00);
}
.bpp-go.act { background: rgba(9, 8, 10, .85); color: #ffa838; }
.bpp-lv-t {
  max-width: 100%; font: 600 var(--fs-cap)/1.3 var(--f-hd); color: #a2a2b2; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bpp-lv.locked .bpp-lv-t { color: var(--tx-3); }
.bpp-lv.now .bpp-lv-t { color: #ffa838; }
.bpp-lv-line { position: relative; width: calc(100% + 12px); height: 14px; overflow: visible; }
.bpp-lv-line .st { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(255, 255, 255, .12); }
.bpp-lv.done .bpp-lv-line .st { background: linear-gradient(90deg, #ff7a18, #ffa838); }
.bpp-lv-line .arc {
  position: absolute; left: 0; right: 0; top: 6px; height: 16px; box-sizing: border-box;
  border: 2px solid #ffa838; border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: 0 4px 12px -4px rgba(255, 122, 24, .8);
}
.bpp-lv-line .dot {
  position: absolute; left: 50%; top: 7px; width: 8px; height: 8px; border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg); background: #26262f;
}
.bpp-lv.done .bpp-lv-line .dot { background: #ffa838; box-shadow: 0 0 10px rgba(255, 122, 24, .8); }
.bpp-lv.now .bpp-lv-line .dot { top: 21px; width: 12px; height: 12px; }

/* ---------------------------------------------------------- вехи */

.bpp-mq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 36px 0 40px; }
.bpp-mq-card {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 122, 24, .25); background: linear-gradient(90deg, rgba(255, 122, 24, .09), rgba(13, 13, 18, .6) 55%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); --ac: #ffa838; --glow: rgba(255, 122, 24, .4);
}
.bpp-mq-card.top { border-color: rgba(255, 210, 59, .45); --ac: #ffd23b; --glow: rgba(255, 210, 59, .5); }
.bpp-mq-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--ac), transparent); }
.bpp-mq-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.bpp-mq-tx small:first-child {
  font: 600 var(--fs-cap)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--ac);
}
.bpp-mq-tx b { margin-top: 4px; font: 700 var(--fs-body)/1.25 var(--f-hd); color: #ececf2; text-wrap: pretty; }
.bpp-mq-tx small.n { font: 400 var(--fs-micro)/1.35 var(--f-ui); color: #8a8a9a; }
/* Строку и колонку задаём явно. Без них grid-строка считается по
   содержимому, height:100% картинки ей некуда упереться — и квадратный
   арт 512×512 вставал во всю ширину, вылезая за бокс. Каждый скин при
   этом оказывался на своей высоте: три карточки витрины не выравнивались. */
.bpp-mq-art {
  position: relative; flex: none; width: 120px; height: 74px;
  display: grid; grid-template: 100% / 100%; place-items: center; color: #ffa838;
}
.bpp-mq-art img, .bpp-mq-art svg {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .8)) drop-shadow(0 0 14px var(--glow));
}
.bpp-mq-art .bpp-ph { inset: 0; }

/* ---------------------------------------------------------- адаптив */

@media (max-width: 1180px) {
  .bpp-hero { grid-template-columns: minmax(0, 1fr) 300px; padding: 130px 20px 30px 24px; }
  .bpp-mascot { left: 44%; width: 320px; height: 320px; }
  .bpp-prog { margin: -14px 16px 0; padding: 22px 22px 20px; grid-template-columns: auto minmax(0, 1fr); }
  .bpp-ready { grid-row: auto; grid-column: 1 / -1; width: 100%; }
  .bpp-stats { grid-column: 1 / -1; grid-row: auto; max-width: none; }
  .bpp-mq { margin: 18px 16px 0; }
}

/* Телефон — значения из самого макета (mobVals): сцена ниже, маскота и
   вступления нет, таймер спрятан, плита прогресса в две колонки. */
@media (max-width: 880px) {
  .bpp-hero { min-height: 300px; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 70px 16px 20px; }
  .bpp-halo, .bpp-mascot, .bpp-lead, .bpp-timer { display: none; }
  .bpp-intro h1 { font-size: 34px; }
  .bpp-prog { margin: -8px 8px 0; padding: 16px 12px 14px; grid-template-columns: 58px minmax(0, 1fr); }
  .bpp-hex { width: 58px; height: 64px; grid-row: auto; }
  .bpp-hex b { font-size: 24px; }
  .bpp-ready { grid-row: auto; grid-column: 1 / -1; width: 100%; flex-wrap: wrap; gap: 12px; padding: 12px; }
  .bpp-ready .bpp-claim { display: none; }
  .bpp-stats {
    grid-column: 1 / -1; grid-row: auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; max-width: none;
  }
  .bpp-stat { flex: none; width: 131px; box-sizing: content-box; scroll-snap-align: start; }
  .bpp-railsec { padding: 0; }
  .bpp-nav { display: none; }
  .bpp-rail { padding: 14px 16px 18px; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .bpp-lv { --w: 86px; }
  .bpp-lv.now { --w: 104px; }
  .bpp-mq { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 14px 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bpp-bg, .bpp-halo, .bpp-mascot, .bpp-claim { animation: none; }
}

/* ============================================================ ALIVE · ВХОД

   Окно входа по макету Login Modal. Значения — с инлайн-стилей макета и его
   mobVals() (≤880px: во весь экран, картинка сверху высотой 190px, без
   слов Play/Trade/Win). Класса gate у окна больше нет, старые .gate-*
   правила к нему не относятся. Префикс lga- проверен грепом. */

.lga[hidden], .lga [hidden] { display: none !important; }
@keyframes lgaIn { 0% { opacity: 0; transform: translateY(18px) scale(.98); } 100% { opacity: 1; transform: none; } }

.lga {
  position: fixed; inset: 0; z-index: 400; overflow: auto; overscroll-behavior: contain;
  display: grid; place-items: center; padding: 40px 24px; box-sizing: border-box;
  background: #07070a; isolation: isolate;
  color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.lga > .lga-bg {
  position: fixed; inset: -40px; z-index: 0; width: calc(100% + 80px); height: calc(100% + 80px);
  max-width: none; object-fit: cover; filter: blur(22px) brightness(.45); pointer-events: none;
}
.lga > .lga-dim { position: fixed; inset: 0; z-index: 0; background: rgba(7, 7, 10, .55); pointer-events: none; }
.lga a { color: #ffa838; text-decoration: none; }
.lga a:hover { color: #ff7a18; }

/* Фокус при открытии стоит на карточке (gate.js) — без рамки. */
.lga > .lga-card:focus { outline: none; }
.lga > .lga-card {
  position: relative; z-index: 1; width: 100%; max-width: 960px;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: #121216;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 122, 24, .06) inset;
  overflow: hidden; animation: lgaIn .45s cubic-bezier(.2, .8, .2, 1) both;
}

/* ---------------------------------------------------------- картинка */

.lga-card > .lga-art { position: relative; min-height: 520px; background: #0a0a0e; }
.lga-art > .lga-art-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 46% 50%;
}
.lga-art > .lga-art-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 7, 10, .55), transparent 35%, transparent 70%, rgba(7, 7, 10, .6));
}
.lga-art > .lga-brand { position: absolute; left: 36px; top: 36px; display: flex; flex-direction: column; gap: 16px; }
.lga-brand > .lga-logo { display: flex; flex-direction: column; gap: 8px; }
.lga-logo > .lga-wm {
  display: flex; align-items: baseline; gap: 2px; font-family: var(--f-hd); font-weight: 700;
  line-height: 1; white-space: nowrap; text-shadow: 0 2px 20px rgba(0, 0, 0, .9);
}
.lga-wm > .lga-n { font-size: 32px; color: #ececf2; letter-spacing: .06em; text-transform: uppercase; }
.lga-wm > .lga-d { font-size: 32px; color: #ececf2; margin-right: 2px; }
.lga-wm > .lga-gg {
  display: inline-block; font-size: 34px; color: #ffcc33; -webkit-text-stroke: 1px #ff8a00;
  paint-order: stroke fill; transform: skewX(-8deg);
  text-shadow: 0 1px 0 #f08400, 0 2px 0 #c06200, 0 4px 6px rgba(0, 0, 0, .5);
}
.lga-logo > .lga-tag { font: 600 var(--fs-micro)/1.5 var(--f-hd); letter-spacing: .44em; text-transform: uppercase; color: #c4c4d0; }
.lga-art .lga-words {
  display: flex; flex-direction: column; gap: 6px; font: 600 var(--fs-micro)/1.5 var(--f-hd); letter-spacing: .4em;
  text-transform: uppercase; color: #ececf2; text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
.lga-words > i { display: block; width: 22px; height: 2px; margin-top: 6px; background: #ff7a18; border-radius: 2px; }
.lga-art > .lga-low { position: absolute; left: 36px; bottom: 36px; }

/* ---------------------------------------------------------- форма */

.lga-card > .lga-main {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: 48px 48px 40px; min-width: 0; background: linear-gradient(180deg, #141418, #111115);
}
.lga-main > .lga-x {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; display: grid; place-items: center;
  margin: 0; padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04); color: #ececf2; cursor: pointer; box-shadow: none;
  transition: border-color .15s, color .15s;
}
.lga-main > .lga-x:hover { border-color: rgba(255, 122, 24, .55); color: #ffa838; }
.lga-main > h1 {
  margin: 0; padding: 0; font: 700 30px/1.1 var(--f-hd); letter-spacing: -.01em;
  text-transform: none; color: #ececf2; text-shadow: none;
}
.lga-main > .lga-sub { margin: 8px 0 0; max-width: 420px; font-size: var(--fs-ui); line-height: 1.5; color: #a2a2b2; text-wrap: pretty; }

.lga-main > .lga-form { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; }
.lga-form > .lga-in {
  display: flex; align-items: center; gap: 12px; height: 54px; margin: 0; padding: 0 18px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03);
  box-sizing: border-box; transition: border-color .15s;
}
.lga-form > .lga-in:focus-within { border-color: rgba(255, 122, 24, .6); }
.lga-form > .lga-in.bad { border-color: rgba(235, 75, 75, .7); }
.lga-in > svg { flex: none; color: #ffa838; }
.lga-in > input {
  flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: #ececf2; font: 400 var(--fs-body)/1 var(--f-ui); outline: none;
}
.lga-in > input::placeholder { color: #8a8a9a; opacity: 1; }
/* Автозаполнение — общее правило в конце файла (input:-webkit-autofill). */
.lga-in > .lga-eye {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none; color: #8a8a9a; cursor: pointer;
}
.lga-in > .lga-eye:hover { color: #ececf2; }
.lga-eye > .lga-eye-on, .lga-eye.on > .lga-eye-off { display: none; }
.lga-eye.on > .lga-eye-on { display: block; }

.lga-form > .lga-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.lga-row > .lga-cb {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; background: transparent;
  box-shadow: none; color: #ececf2; font: 400 var(--fs-ui)/1 var(--f-ui); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.lga-cb > .lga-box {
  width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, .3); background: transparent; color: #180a00;
}
.lga-box > svg { display: none; }
.lga-cb.on > .lga-box { border-color: #ff7a18; background: #ff7a18; }
.lga-cb.on > .lga-box > svg { display: block; }
.lga-row > a.lga-forgot { font-size: var(--fs-ui); color: #ffa838; text-decoration: underline; text-underline-offset: 4px; }
.lga-row > a.lga-forgot:hover { color: #ff7a18; }
.lga-form > .lga-terms { margin: 2px 0 0; font-size: var(--fs-ui); line-height: 1.5; color: #8a8a9a; }

.lga-form > .lga-go {
  display: flex; align-items: center; justify-content: center; gap: 12px; position: relative;
  height: 58px; margin: 6px 0 0; padding: 0 56px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #ffa838, #ff7a18); color: #180a00;
  font: 700 19px/1 var(--f-hd); letter-spacing: .02em; text-transform: none; cursor: pointer;
  box-shadow: 0 0 30px -6px rgba(255, 122, 24, .6);
}
.lga-form > .lga-go:hover { filter: brightness(1.06); }
.lga-form > .lga-go[aria-busy="true"] { opacity: .7; cursor: progress; }
.lga-go > svg, .lga-steam > svg { position: absolute; right: 22px; }

.lga-main > .lga-or { display: flex; align-items: center; gap: 14px; margin-top: 18px; color: #8a8a9a; font-size: var(--fs-label); }
.lga-or > span { flex: 1; height: 1px; background: rgba(255, 255, 255, .1); }

.lga-main > a.lga-steam {
  display: flex; align-items: center; gap: 20px; position: relative; height: 56px; margin-top: 18px;
  padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04); color: #ececf2; font: 600 16px/1 var(--f-ui);
  text-align: left; text-decoration: none; box-sizing: border-box; transition: border-color .15s, background .15s;
}
.lga-main > a.lga-steam:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #ececf2; }
.lga-steam > .lga-steam-ic {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #1b1b22; border: 1px solid rgba(255, 255, 255, .12); box-sizing: border-box;
}
.lga-main > .lga-foot { margin: 20px 0 0; text-align: center; font-size: var(--fs-ui); color: #a2a2b2; }
.lga-foot > a { color: #ffa838; font-weight: 500; }

/* Тосты окна (ошибки, «Добро пожаловать обратно!») — поверх него. */
body.locked .toasts { z-index: 460; }

@media (max-width: 880px) {
  .lga { padding: 0; }
  .lga > .lga-card { grid-template-columns: minmax(0, 1fr); border-radius: 0; }
  .lga-card > .lga-art { min-height: 190px; }
  .lga-art > .lga-brand { left: 18px; top: 18px; gap: 10px; }
  .lga-art .lga-desk { display: none; }
  .lga-card > .lga-main { padding: 26px 18px calc(30px + env(safe-area-inset-bottom, 0px)); }
  .lga-main > h1 { font-size: 25px; }
  .lga-main > a.lga-steam { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lga > .lga-card { animation: none; }
}

/* ============================================================ ALIVE · СТРАНИЦЫ

   FAQ, «О проекте», «Ответственная игра», «Контакты» по макетам *-Alive
   (info.js). У страниц своя картинка faq-space.webp во всю область контента,
   поэтому отступы .content гасятся — как у «Колеса». На телефоне шапка и
   поля — как в макетах на 390: у «Контактов» свои mobVals(), у трёх
   других mobVals нет, и они остаются с десктопными 50/64px и полями 32px;
   сетки, которые не помещаются в 390px, складываются в одну колонку.
   Префикс sta- проверен грепом. */

.page.info.sta-page { max-width: none; margin-inline: 0; }
.sta [hidden] { display: none !important; }
.sta {
  position: relative; min-width: 0; overflow: hidden; box-sizing: border-box;
  margin: calc(-1 * var(--content-top, 20px)) -20px -20px;
  color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui); font-variant-numeric: tabular-nums;
}
.sta > .sta-bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 40%; pointer-events: none;
}
.sta > .sta-shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 7, 10, .55) 0%, rgba(7, 7, 10, .7) 55%, rgba(7, 7, 10, .96) 100%);
}
.sta.sta-faq > .sta-shade {
  background: linear-gradient(180deg, rgba(7, 7, 10, .42) 0%, rgba(7, 7, 10, .57) 55%, rgba(7, 7, 10, .96) 100%);
}
.sta > .sta-in {
  position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 40px 32px 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 28px;
}
.sta a { color: #ffa838; text-decoration: none; }
.sta a:hover { color: #ff7a18; }
.sta b { font-family: var(--f-hd); font-weight: 700; }
.sta b.or { color: #ffa838; }

/* ---------------------------------------------------------- шапка */

.sta-in > .sta-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.sta-hero > h1 {
  margin: 0; padding: 0; font: 700 50px/1 var(--f-hd); letter-spacing: .03em; text-transform: uppercase;
  color: #ececf2; text-shadow: 0 2px 24px rgba(0, 0, 0, .85);
}
.sta-hero > h2 {
  margin: 0; padding: 0; font: 700 64px/1 var(--f-hd); letter-spacing: .03em; text-transform: uppercase;
  background: linear-gradient(96deg, #ffa838, #ff7a18, #ffd23b, #ffa838);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 122, 24, .45));
}
.sta-hero > p {
  margin: 10px 0 0; max-width: 680px; font-size: var(--fs-body); line-height: 1.55; color: #d0d0da;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9); text-wrap: pretty;
}

/* ---------------------------------------------------------- общие детали */

.sta-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sta-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sta-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sta-card {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px; box-sizing: border-box;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 10, 14, .74);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sta-card > h3 { margin: 0; padding: 0; font: 700 19px/1.15 var(--f-hd); letter-spacing: 0; text-transform: none; color: #ececf2; }
.sta-card > p { margin: 0; font-size: var(--fs-ui); line-height: 1.6; color: #c4c4d0; text-wrap: pretty; }
.sta-ic {
  flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; box-sizing: border-box;
  border: 1px solid rgba(255, 122, 24, .45); background: rgba(255, 122, 24, .1); color: #ffa838;
  font: 700 20px/1 var(--f-hd); box-shadow: 0 0 16px -6px rgba(255, 122, 24, .7);
}
.sta-k { font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: #8a8a9a; }
.sta-k.or { color: #ffa838; }
.sta-card.sta-wide { gap: 12px; padding: 26px 28px; }
.sta-card.sta-wide > h3 { font-size: 22px; }
.sta-about .sta-card.sta-wide > h3 { font-size: 24px; }

.sta-note {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px; box-sizing: border-box; min-width: 0;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 10, 14, .74);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sta-note > .sta-mark {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #ff7a18; box-sizing: border-box;
  display: grid; place-items: center; color: #ffa838; font: 700 20px/1 var(--f-hd);
  box-shadow: 0 0 14px -4px rgba(255, 122, 24, .7);
}
.sta-note > p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: #ececf2; }
.sta-note > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sta-note > div > b { font-size: 16px; color: #ececf2; }
.sta-note > div > p { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: #c4c4d0; }
.sta-note.sta-flat > .sta-mark { box-shadow: none; }
.sta-note.sta-flat > p { font-size: var(--fs-ui); color: #c4c4d0; }
.sta-note.sta-flat > p > b { color: #ececf2; }

.sta-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sta .sta-btn {
  display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 13px 22px;
  border: 0; border-radius: 8px; box-sizing: border-box; cursor: pointer; text-transform: none;
  font: 700 var(--fs-body)/1 var(--f-hd); letter-spacing: .04em; text-decoration: none;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00; box-shadow: 0 0 18px rgba(255, 122, 24, .4);
}
.sta a.sta-btn:hover { color: #180a00; }
.sta .sta-btn.ghost { border: 1px solid rgba(255, 255, 255, .14); background: none; color: #ececf2; box-shadow: none; }
.sta a.sta-btn.ghost:hover { border-color: rgba(255, 122, 24, .6); color: #ffa838; }

/* ---------------------------------------------------------- FAQ */

.sta-in > .sta-faq-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
.sta-faq-body > .sta-cats { display: flex; flex-direction: column; gap: 10px; }
.sta-cats > .sta-cat {
  display: flex; align-items: center; gap: 16px; margin: 0; padding: 14px 20px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 10, 14, .74); color: #c4c4d0;
  box-shadow: none; cursor: pointer; font: 700 16px/1 var(--f-hd); letter-spacing: 0; text-transform: none;
  text-align: left; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .15s;
}
.sta-cats > .sta-cat:hover { border-color: rgba(255, 122, 24, .55); }
.sta-cat > span {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px;
  background: rgba(255, 255, 255, .04); font-size: 20px; color: #a2a2b2;
}
.sta-cats > .sta-cat.on {
  border-color: rgba(255, 122, 24, .75); color: #ececf2; box-shadow: 0 0 26px -8px rgba(255, 122, 24, .7);
  /* Непрозрачная тёмная база под оранжевым градиентом — как у невыбранных
     кнопок (.74). Без неё левый край градиента был полупрозрачным, и
     backdrop-filter: blur показывал сквозь него космический фон страницы:
     у выбранной кнопки фон «приближался», у остальных был спрятан. */
  background: linear-gradient(90deg, rgba(255, 122, 24, .2), rgba(10, 10, 14, .8) 60%), rgba(10, 10, 14, .74);
}
.sta-cat.on > span { color: #ffa838; }

.sta-faq-body > .sta-qs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sta-qs > .sta-q {
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 10, 14, .8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden;
}
.sta-qs > .sta-q.open { border-color: rgba(255, 122, 24, .8); box-shadow: 0 0 30px -10px rgba(255, 122, 24, .6); }
.sta-q > button {
  width: 100%; display: flex; align-items: center; gap: 16px; margin: 0; padding: 16px 22px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #ececf2; cursor: pointer;
  font: 700 17px/1.25 var(--f-hd); letter-spacing: 0; text-transform: none; text-align: left;
}
.sta-q > button:hover { background: rgba(255, 255, 255, .03); }
.sta-q > button > .sta-sign {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #ffa838; color: #180a00; font: 700 18px/1 var(--f-hd); box-shadow: 0 0 12px -2px rgba(255, 122, 24, .7);
}
.sta-q.open > button > .sta-sign { background: #ff7a18; }
.sta-q > button > .sta-qt { flex: 1; min-width: 0; }
.sta-q > button > .sta-chev { flex: none; color: #a2a2b2; transition: transform .2s; }
.sta-q.open > button > .sta-chev { transform: rotate(180deg); }
.sta-q > .sta-a { padding: 0 22px 22px 62px; display: flex; flex-direction: column; gap: 12px; }
.sta-a > p { margin: 0; font-size: var(--fs-ui); line-height: 1.6; color: #c4c4d0; text-wrap: pretty; }
.sta-a > ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sta-a > ol > li { display: flex; gap: 10px; margin: 0; font-size: var(--fs-ui); line-height: 1.55; color: #c4c4d0; }
.sta-a > ol > li > span:first-child { flex: none; color: #ff7a18; font: 700 var(--fs-ui)/1.55 var(--f-hd); }

/* ---------------------------------------------------------- О проекте */

.sta-in > .sta-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 10, 14, .74);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sta-stats > div { display: flex; flex-direction: column; gap: 8px; padding: 24px 28px; border-right: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.sta-stats > div:last-child { border-right: 0; }
.sta-stats > div > b { font-size: 34px; line-height: 1; color: #ececf2; white-space: nowrap; }
.sta-stats > div > b.or { color: #ffa838; text-shadow: 0 0 18px rgba(255, 122, 24, .5); }

/* ---------------------------------------------------------- Ответственная игра */

.sta-card.sta-rule { gap: 12px; padding: 22px; }
.sta-card.sta-rule > h3 { font-size: 17px; }
.sta-card.sta-rule > p { font-size: var(--fs-ui); }
.sta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sta-chips > .sta-chip {
  margin: 0; padding: 10px 16px; border-radius: 8px; cursor: pointer; box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #ececf2;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .04em; text-transform: none;
}
.sta-chips > .sta-chip:hover { border-color: rgba(255, 122, 24, .6); }
.sta-chips > .sta-chip.on { border-color: #ff7a18; background: #ff7a18; color: #180a00; }
.sta-card > .sta-danger {
  align-self: flex-start; margin: 0; padding: 10px 16px; border-radius: 8px; cursor: pointer; box-shadow: none;
  border: 1px solid rgba(235, 75, 75, .6); background: rgba(235, 75, 75, .1); color: #ff8a8a;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .04em; text-transform: none;
}
.sta-card > .sta-danger:hover { background: rgba(235, 75, 75, .2); }
.sta-card > .sta-signs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sta-signs > li { display: flex; gap: 10px; margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: #c4c4d0; }
.sta-signs > li > span { color: #ff7a18; }
.sta-card.sta-age { gap: 14px; }
.sta-age > .sta-age-h { display: flex; align-items: center; gap: 14px; }
.sta-age-h > .sta-age-b {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #ff7a18; box-sizing: border-box;
  display: grid; place-items: center; color: #ffa838; font: 700 18px/1 var(--f-hd);
  box-shadow: 0 0 18px -4px rgba(255, 122, 24, .7);
}
.sta-age-h > h3 { margin: 0; padding: 0; font: 700 22px/1.15 var(--f-hd); letter-spacing: 0; text-transform: none; color: #ececf2; }

/* ---------------------------------------------------------- Контакты */

.sta-in > .sta-ct { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); gap: 26px; align-items: start; }
.sta-ct > .sta-ct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.sta-ct-cards > .sta-note { grid-column: 1 / -1; }
.sta a.sta-ct-card { gap: 12px; padding: 22px; color: inherit; transition: border-color .15s; }
.sta a.sta-ct-card:hover { border-color: rgba(255, 122, 24, .55); color: inherit; }
.sta-ct-card > .sta-ct-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sta-ct-tx > b { font-size: 19px; line-height: 1.15; color: #ececf2; overflow-wrap: anywhere; }
.sta-ct-tx > span:last-child { font-size: var(--fs-label); color: #a2a2b2; }
.sta-ct > .sta-form { gap: 14px; padding: 26px; margin: 0; }
.sta-form > h3 { font-size: 22px; }
.sta-form > .sta-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sta-form .sta-fl { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.sta-fl > input, .sta-fl > textarea {
  width: 100%; height: auto; box-sizing: border-box; margin: 0; padding: 12px 14px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); box-shadow: none;
  color: #ececf2; font: 400 var(--fs-ui)/1.4 var(--f-ui); outline: none; transition: border-color .15s;
}
.sta-fl > input::placeholder, .sta-fl > textarea::placeholder { color: #8a8a9a; opacity: 1; }
.sta-fl > input:focus, .sta-fl > textarea:focus { border-color: rgba(255, 122, 24, .6); }
.sta-fl > textarea { resize: vertical; min-height: 140px; }
.sta-form > .sta-send { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.sta-send > span { font-size: var(--fs-label); color: #8a8a9a; }
.sta-send > .sta-btn { flex: none; min-height: 48px; }

@media (max-width: 880px) {
  .sta { margin: -12px -12px -20px; }
  .sta.sta-ct > .sta-in { padding: 28px 14px 40px; gap: 20px; }
  .sta.sta-ct .sta-hero > h1 { font-size: 30px; }
  .sta.sta-ct .sta-hero > h2 { font-size: 40px; }
  /* «ОТВЕТСТВЕННАЯ» в 50px шире телефона — в макете слово вылезает за оба
     края. Ужимается только оно, ровно до ширины экрана. */
  .sta.sta-rg .sta-hero > h1 { font-size: clamp(30px, 9.6vw, 50px); }
  .sta-2, .sta-3, .sta-4,
  .sta-in > .sta-stats, .sta-in > .sta-faq-body { grid-template-columns: minmax(0, 1fr); }
  .sta-stats > div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .sta-stats > div:last-child { border-bottom: 0; }
  .sta-in > .sta-ct { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sta-ct > .sta-ct-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; order: 2; }
  .sta-ct > .sta-form { padding: 18px 14px; }
  .sta-form > .sta-fields { grid-template-columns: minmax(0, 1fr); }
  .sta-form > .sta-send { flex-direction: column; align-items: stretch; }
  .sta-send > .sta-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sta-q > button > .sta-chev { transition: none; }
}

/* ============================================================ ALIVE · КАБИНЕТ

   По «Profile — Alive v2.dc.html»: префикс pra- (страница), pwd- (окно
   вывода). Значения — из инлайн-стилей макета, различия десктоп/телефон —
   из его mobVals(). Разметка — #page-me в index.html; поведение —
   profile.js, inventory.js, profilestyle.js, steam.js, cashout.js,
   loyalty.js. */

#page-me { max-width: none; }
.pra {
  width: 100%; max-width: 1352px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 18px;
  color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui);
}
.pra [hidden], .pwd [hidden] { display: none !important; }
.pra button { font-family: inherit; }

/* Штриховка карточек и их внутренняя тень — один и тот же слой у всех
   панелей макета. */
.pra-hatch {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(255, 255, 255, .025) 13px 14px, transparent 14px 31px),
    repeating-linear-gradient(-45deg, transparent 0 47px, rgba(0, 0, 0, .35) 47px 52px, transparent 52px 89px),
    repeating-linear-gradient(-45deg, transparent 0 160px, rgba(255, 255, 255, .02) 160px 190px, transparent 190px 260px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .35) 60%, transparent);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .35) 60%, transparent);
}
.pra-hero::before, .pra-best::before, .pra-link::before, .pra-style::before, .pra-tools::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.pra-topline {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 168, 56, .9), transparent);
}
.pra-topline.soft { background: linear-gradient(90deg, transparent, rgba(255, 168, 56, .7), transparent); }
.pra-shine {
  position: absolute; top: 0; left: -40%; width: 30%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg); animation: praSweep 3.5s ease-in-out infinite;
}

/* ---------------------------------------------------------- герой */

.pra-hero {
  position: relative; padding: 24px 26px 22px; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255, 122, 24, .28);
  background: linear-gradient(150deg, rgba(30, 19, 13, .7), rgba(13, 13, 18, .6) 55%, rgba(10, 10, 14, .5));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8), inset 0 0 60px -30px rgba(255, 122, 24, .35);
}
.pra-sweep {
  position: absolute; top: 0; left: -40%; width: 22%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 168, 56, .06), transparent);
  transform: skewX(-18deg); animation: praSweep 9s ease-in-out infinite;
}
.pra-hero-glow {
  position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 24, .22), transparent 65%); pointer-events: none;
}
.pra-id { position: relative; display: flex; align-items: center; gap: 16px; }
.pra-ava-wrap { position: relative; width: 72px; height: 72px; flex: none; }
.pra-ava-ring {
  position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 1px solid rgba(255, 122, 24, .25); border-top-color: #ff7a18;
  animation: praSpin 10s linear infinite;
}
.pra-ava-halo {
  position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 122, 24, .3), transparent 65%);
  animation: praRing 4s ease-in-out infinite; pointer-events: none;
}
.pra-ava {
  position: absolute; inset: 0; border-radius: 50%; background: #0d0d12; overflow: hidden;
  border: 1px solid rgba(255, 122, 24, .45); display: grid; place-items: center;
}
.pra-ava img { width: 50px; height: 50px; object-fit: contain; }
.pra-ava img.photo { width: 100%; height: 100%; object-fit: cover; }
.pra-lvl {
  position: absolute; right: -6px; bottom: -6px; min-width: 28px; height: 28px; padding: 0 7px;
  border-radius: 14px; border: 2px solid #0d0d12; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00; font: 700 var(--fs-ui)/1 var(--f-hd);
  box-shadow: 0 0 14px rgba(255, 122, 24, .7); animation: praBadge 3s ease-in-out infinite;
}
.pra-lvl:hover { animation: none; transform: scale(1.12); }
.pra-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pra-name {
  font: 700 24px/1.1 var(--f-hd); letter-spacing: .02em; text-transform: uppercase; color: #ececf2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pra-meta { font-size: var(--fs-cap); line-height: 1.5; color: var(--tx-3); }
.pra-meta #meSince:not(:empty)::after, .pra-meta .pra-steam::after { content: " · "; color: var(--tx-3); }
.pra-steam { color: #a2a2b2; text-decoration: none; }
.pra-steam:hover { color: #ececf2; }
.pra-out {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; font: 600 var(--fs-label)/1 var(--f-hd); color: #9a9aa8; cursor: pointer;
  transition: color var(--t-micro), border-color var(--t-micro), background var(--t-micro);
}
.pra-out:hover { color: #ececf2; border-color: rgba(255, 122, 24, .5); background: rgba(255, 122, 24, .08); }
.pra-xp { display: flex; align-items: center; gap: 8px; margin-top: 4px; cursor: pointer; }
.pra-xp-track {
  flex: 1; height: 5px; border-radius: 3px; background: #1c1c24; overflow: hidden; position: relative;
}
.pra-xp-track > i {
  display: block; width: 0; height: 100%; position: relative; overflow: hidden; transition: width .6s ease;
  background: linear-gradient(90deg, #ffa838, #ff5c00); box-shadow: 0 0 8px rgba(255, 122, 24, .6);
}
.pra-xp-track > i > span {
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: praSweep 2.5s ease-in-out infinite;
}
.pra-xp small { font-size: var(--fs-micro); color: #a2a2b2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pra-xp small b { color: #ffa838; font-weight: 700; font-family: var(--f-hd); }

.pra-bal {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  padding: 16px 18px; border-radius: 16px; background: rgba(8, 8, 10, .55); border: 1px solid rgba(255, 122, 24, .2);
}
.pra-bal-l { display: flex; flex-direction: column; gap: 2px; }
.pra-bal-k {
  font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838;
}
.pra-bal-v {
  font: 700 42px/1 var(--f-hd); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 30px rgba(255, 122, 24, .45);
}
.pra-bal-p { font-size: var(--fs-cap); color: var(--tx-3); margin-top: 4px; }
.pra-bal-p b { color: #a2a2b2; font-variant-numeric: tabular-nums; }
.pra-bal-btns { display: flex; gap: 8px; flex: none; }
.pra-dep, .pra-wd {
  position: relative; overflow: hidden; padding: 13px 20px; border-radius: 11px; cursor: pointer;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
}
.pra-dep {
  border: 0; background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00;
  box-shadow: 0 10px 26px -8px rgba(255, 92, 0, .7);
}
.pra-dep:hover { filter: brightness(1.08); }
.pra-wd { border: 1px solid rgba(255, 122, 24, .55); background: rgba(255, 122, 24, .1); color: #ffa838; }
.pra-wd:hover { background: rgba(255, 122, 24, .2); }

/* Отдельный ряд из 4 крупных карточек под героем (по референсу владельца). */
.pra-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Без overflow: hidden — он резал облако подсказки «?». Полоса слева — слоем
   фона: фон и так скругляется по углам карточки. */
.pra-stat {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-width: 0; min-height: 82px; padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(180deg, transparent, #ff7a18, transparent) left / 3px 100% no-repeat,
    rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 122, 24, .22);
}
.pra-stat > span {
  font: 600 var(--fs-cap)/1.3 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #8a8a9a;
}
.pra-stat > b {
  font: 700 22px/1.3 var(--f-hd); font-variant-numeric: tabular-nums; color: #ececf2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------- лучший выигрыш и ссылки */

.pra-row3 { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; align-items: stretch; }
.pra-best {
  position: relative; padding: 18px 20px; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(235, 75, 75, .3);
  background: linear-gradient(160deg, rgba(40, 14, 16, .6), rgba(12, 12, 17, .65) 55%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 10px;
}
.pra-best-line {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235, 75, 75, .8), transparent);
}
.pra-best-glow {
  position: absolute; left: 25%; top: 55%; width: 300px; height: 300px; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(235, 75, 75, .28), transparent 65%);
  pointer-events: none; animation: praRing 5s ease-in-out infinite;
}
.pra-best-h { position: relative; display: flex; align-items: center; justify-content: space-between; }
.pra-best-h > span:first-child {
  font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #eb4b4b;
}
.pra-best-h > span + span { font-size: var(--fs-micro); color: var(--tx-3); }
.pra-best-b {
  position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; flex: 1;
}
.pra-best-art { position: relative; height: 100px; display: grid; place-items: center; }
.pra-best-ring {
  position: absolute; left: 50%; bottom: 8px; width: 85%; height: 20px; transform: translateX(-50%);
  border-radius: 50%; border: 1px solid rgba(235, 75, 75, .5); box-shadow: 0 0 18px -4px #eb4b4b;
  background: radial-gradient(ellipse, rgba(235, 75, 75, .25), transparent 70%);
}
.pra-best-img {
  /* Скин поднят над кольцом: top, а не transform — transform занят покачиванием. */
  position: relative; top: -18px; width: 140px; height: 96px; display: grid; place-items: center;
  animation: praFloat 4s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .7));
}
/* Картинка строго в боксе: max-height в процентах у элемента сетки не
   срабатывал, и высокий скин (нож) вылезал вниз на кольцо. */
.pra-best-img > img, .pra-best-img > svg { width: 100%; height: 100%; object-fit: contain; }
.pra-best .pra-best-img > img, .pra-best .pra-best-img > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pra-best-tx {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; min-width: 0;
}
.pra-best-k { display: none; }
.pra-best-nm { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; max-width: 100%; }
.pra-best-nm small { font: 600 var(--fs-label)/1.1 var(--f-hd); color: #a2a2b2; letter-spacing: .06em; }
.pra-best-nm b {
  font: 700 22px/1.1 var(--f-hd); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pra-best-pr {
  font: 700 26px/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 122, 24, .55);
}
.pra-best-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.pra-best-tags > span {
  display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px;
  background: rgba(8, 8, 10, .6); border: 1px solid rgba(255, 255, 255, .08); font-size: var(--fs-micro); line-height: 1.5; color: #a2a2b2;
}
.pra-best-tags > span b { color: #ececf2; }
.pra-best-tags > span.c { background: rgba(255, 122, 24, .08); border-color: rgba(255, 122, 24, .35); color: #ffa838; }
.pra-best-tags > span.c b { color: #ffa838; }
.pra-best-none {
  position: relative; flex: 1; display: grid; place-items: center; text-align: center;
  font-size: var(--fs-label); line-height: 1.45; color: var(--tx-3); padding: 20px 10px;
}

.pra-link {
  --dot: #eb4b4b; --bd: rgba(235, 75, 75, .4);
  position: relative; padding: 18px 20px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--bd);
  background: linear-gradient(160deg, rgba(20, 20, 28, .7), rgba(12, 12, 17, .65) 60%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 10px; transition: border-color .3s;
}
/* Пустые ссылка и почта — не тревога: сайт их не требует. Нейтральный
   серый вместо красного и жёлтого, зелёный — когда заполнено. */
.pra-link:not(.ok), #cardMail:not(.ok) { --dot: #7a7a8a; --bd: rgba(255, 255, 255, .1); }
.pra-link.ok, #cardMail.ok { --dot: #35d07f; --bd: rgba(53, 208, 127, .3); }
.pra-link-line {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: .7;
  background: linear-gradient(90deg, transparent, var(--dot), transparent);
}
.pra-link-glow {
  position: absolute; right: -30px; bottom: -40px; width: 200px; height: 200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--dot) 20%, transparent), transparent 65%);
}
.pra-link-h { position: relative; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pra-link-k {
  display: flex; align-items: center; gap: 7px; color: var(--dot);
  font: 600 var(--fs-cap)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
}
.pra-link-k > i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 8px var(--dot); }
.pra-link-h > b { font-size: var(--fs-label); color: #ececf2; }
.pra-link-h > small { font-size: var(--fs-micro); color: var(--tx-3); }
.pra-link-get { color: #ff9a4a; font-weight: 600; text-decoration: none; }
.pra-link-get:hover, .pra-link-get:focus-visible { color: #ffb877; text-decoration: underline; }
.pra-link-f { position: relative; display: flex; gap: 6px; margin-top: auto; }
.pra-link-f > input {
  flex: 1; min-width: 0; width: auto; height: 40px; box-sizing: border-box; padding: 0 12px; margin: 0;
  border-radius: 9px; background: rgba(8, 8, 10, .7); border: 1px solid #26262f; outline: none; box-shadow: none;
  color: #ececf2; font: 600 var(--fs-cap)/1 var(--f-ui);
}
.pra-link-f > #stTradeUrl { font-family: var(--f-hd); }
.pra-link-f > input:focus { border-color: #ff7a18; }
.pra-link-f > button {
  height: 40px; padding: 0 14px; border-radius: 9px; flex: none; cursor: pointer;
  border: 1px solid rgba(255, 122, 24, .4); background: rgba(255, 122, 24, .08); color: #ffa838;
  font: 700 var(--fs-ui)/1 var(--f-hd);
}
.pra-link-f > button:hover { background: rgba(255, 122, 24, .2); }

/* ---------------------------------------------------------- оформление профиля */

.pra-style {
  position: relative; padding: 20px 22px 22px; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(160deg, rgba(20, 20, 28, .7), rgba(12, 12, 17, .65) 60%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: stretch;
}
.pra-style.fold { grid-template-columns: minmax(0, 1fr); }
.pra-style.fold .pra-style-body, .pra-style.fold .pra-pv { display: none; }
.pra-style-l { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pra-style-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pra-style-t { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pra-style-ic {
  width: 50px; height: 50px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255, 122, 24, .55);
  background: radial-gradient(circle, rgba(255, 122, 24, .28), rgba(255, 122, 24, .05) 70%);
  box-shadow: 0 0 22px -6px rgba(255, 122, 24, .7);
}
.pra-style-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pra-style-tt > b { font: 700 20px/1.1 var(--f-hd); letter-spacing: -.01em; }
.pra-style-tt > small { font-size: var(--fs-cap); line-height: 1.5; color: #a2a2b2; }
.pra-howto {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; flex: none;
  height: 44px; padding: 0 6px 0 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 122, 24, .45); color: #ececf2; font: 700 var(--fs-ui)/1 var(--f-hd);
  background: linear-gradient(90deg, rgba(255, 122, 24, .16), rgba(255, 122, 24, .04));
}
.pra-howto:hover { background: rgba(255, 122, 24, .24); }
.pra-howto-go {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255, 122, 24, .16); color: #ffa838; font-size: var(--fs-ui);
}
.pra-fold {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #a2a2b2;
  font: 600 var(--fs-label)/1 var(--f-hd);
}
.pra-fold:hover { color: #ececf2; }
.pra-style-body { display: flex; flex-direction: column; gap: 14px; }
.pra-car { display: flex; flex-direction: column; gap: 9px; }
.pra-car-h { display: flex; align-items: baseline; gap: 10px; padding-left: 2px; }
.pra-car-h > b { font: 700 var(--fs-body)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; }
.pra-car-h > span { font-size: var(--fs-cap); color: #8a8a9a; }
.pra-car-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pra-car-a {
  width: 32px; height: 32px; flex: none; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 16px; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(8, 8, 10, .7); color: #a2a2b2;
}
.pra-car-a.prev:hover { border-color: rgba(255, 122, 24, .6); color: #ffa838; }
.pra-car-a.next { border-color: rgba(255, 122, 24, .5); background: rgba(255, 122, 24, .1); color: #ffa838; }
.pra-car-a.next:hover { background: rgba(255, 122, 24, .22); }
.pra-car-row {
  display: flex; gap: 10px; flex: 1; min-width: 0; padding: 6px 2px;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.pra-car-row::-webkit-scrollbar { display: none; }
.pra-tile {
  position: relative; width: 126px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 8px 9px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .09);
  background: rgba(20, 20, 28, .75); color: #ececf2; cursor: pointer; transition: border-color .2s, transform .2s;
}
.pra-tile:hover { transform: translateY(-2px); }
.pra-tile.on {
  border-color: rgba(255, 122, 24, .85);
  box-shadow: 0 0 22px -6px rgba(255, 122, 24, .75), inset 0 0 0 1px rgba(255, 122, 24, .3);
}
.pra-tile.locked { cursor: not-allowed; opacity: .5; }
.pra-tile-art {
  position: relative; width: 100%; height: 76px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #15151c, #0c0c11); display: grid; place-items: center;
}
.pra-tile-art.dec > svg {
  width: 40px; height: 40px; color: #ffa838; filter: drop-shadow(0 0 8px rgba(255, 122, 24, .7));
}
.pra-tile-none { position: relative; font-size: var(--fs-micro); color: var(--tx-3); }
.pra-tile-lock {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center;
  background: rgba(8, 8, 10, .8); border: 1px solid rgba(255, 255, 255, .14);
}
.pra-tile-on {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ffa838, #ff5c00); box-shadow: 0 0 12px rgba(255, 122, 24, .8);
}
.pra-tile > b {
  font: 700 var(--fs-ui)/1.5 var(--f-hd); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pra-tile-tag {
  margin-top: -2px; font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838;
}
/* Узоры фонов — таблица PATTERNS макета. */
.pra-pat { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.pra-pat-weave {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 7px),
              repeating-linear-gradient(-45deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 7px);
}
.pra-pat-grain { background: repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .07) 0 1px, transparent 1px 9px); }
.pra-pat-rays { background: repeating-conic-gradient(from 200deg at 15% -10%, rgba(255, 255, 255, .07) 0deg 4deg, transparent 4deg 14deg); }
.pra-pat-stars {
  opacity: .75;
  background: radial-gradient(1.4px 1.4px at 18% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 62% 14%, #fff, transparent),
              radial-gradient(1.6px 1.6px at 84% 44%, #fff, transparent), radial-gradient(1.2px 1.2px at 34% 68%, #fff, transparent),
              radial-gradient(1.1px 1.1px at 72% 82%, #fff, transparent);
}
.pra-pat-rings { background: repeating-radial-gradient(circle at 85% 10%, transparent 0 16px, rgba(255, 255, 255, .08) 16px 17px); }
.pra-pat-flare {
  background: radial-gradient(50% 40% at 85% 90%, rgba(255, 255, 255, .16), transparent 70%),
              repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 12px);
}

.pra-pv {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(8, 8, 10, .45);
}
.pra-pv-k { font: 600 var(--fs-label)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a2a2b2; }
.pra-pv-stage { position: relative; flex: 1; min-height: 250px; display: grid; place-items: center; }
.pra-pv-glow {
  position: absolute; left: 50%; top: 50%; width: 110%; height: 110%; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(255, 122, 24, .22), transparent 65%);
  animation: praRing 5s ease-in-out infinite;
}
.pra-pv-frame {
  position: relative; width: 100%; box-sizing: border-box; padding: 3px;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  background: linear-gradient(135deg, #ffb347, #ff5c00 45%, #c93f00);
  filter: drop-shadow(0 0 22px rgba(255, 122, 24, .55));
}
.pra-pv-card {
  position: relative; overflow: hidden; padding: 22px 22px 20px;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  background: radial-gradient(90% 70% at 30% 0%, rgba(255, 122, 24, .28), transparent 60%), linear-gradient(160deg, #1a1a22, #0b0b0f);
  display: flex; flex-direction: column; align-items: center; gap: 10px; transition: background .4s;
}
.pra-pv-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .45));
}
.pra-pv-dec { position: absolute; pointer-events: none; filter: drop-shadow(0 0 10px currentColor); }
.pra-pv-dec > svg { width: 100%; height: 100%; }
.pra-pv-dec.slot-corner { top: 12px; right: 14px; width: 30px; height: 30px; opacity: .8; }
.pra-pv-dec.slot-top { top: 8px; right: 16px; width: 52px; height: 52px; opacity: .95; }
.pra-pv-dec.slot-behind { top: 14px; left: 8px; width: 120px; height: 76px; opacity: .4; }
.pra-pv-ava {
  position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  border: 2px solid rgba(255, 122, 24, .75); background: #0d0d12; box-shadow: 0 0 24px -4px rgba(255, 122, 24, .7);
}
.pra-pv-ava img { width: 60px; height: 60px; object-fit: contain; }
.pra-pv-ava img.photo { width: 100%; height: 100%; object-fit: cover; }
.pra-pv-who { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 100%; }
.pra-pv-who > b {
  font: 700 18px/1 var(--f-hd); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pra-pv-who > small { font-size: var(--fs-micro); color: #c4c4d0; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.pra-pv-xp { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pra-pv-lvl {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #ff7a18; background: rgba(8, 8, 10, .8); color: #ffa838; font: 700 var(--fs-ui)/1 var(--f-hd);
  box-shadow: 0 0 14px rgba(255, 122, 24, .6);
}
.pra-pv-bar {
  flex: 1; height: 7px; border-radius: 4px; overflow: hidden;
  background: rgba(8, 8, 10, .75); border: 1px solid rgba(255, 255, 255, .08);
}
.pra-pv-bar > i {
  display: block; height: 100%; background: linear-gradient(90deg, #ffa838, #ff5c00);
  box-shadow: 0 0 8px rgba(255, 122, 24, .7);
}
.pra-pv-xpt {
  padding: 5px 9px; border-radius: 7px; background: rgba(8, 8, 10, .75); border: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--fs-micro); line-height: 1.5; color: #ececf2; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pra-pv-save { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-cap); color: #a2a2b2; }

/* ---------------------------------------------------------- инвентарь */

.pra-inv { display: flex; flex-direction: column; gap: 12px; }
.pra-inv-h { display: flex; align-items: baseline; gap: 14px; padding: 0 4px; }
.pra-inv-h > h2 { margin: 0; font: 700 24px/1 var(--f-hd); letter-spacing: -.02em; }
.pra-inv-h > span { font-size: var(--fs-label); line-height: 1; color: var(--tx-3); }
.pra-inv-h > span b { color: #ececf2; }
.pra-inv-h > span b.or { color: #ffa838; font-variant-numeric: tabular-nums; }
.pra-tools {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 6px;
  border-radius: 14px; border: 1px solid rgba(255, 122, 24, .14); background: rgba(13, 13, 18, .6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pra-search {
  position: relative; display: flex; align-items: center; gap: 8px; width: 220px; height: 36px; box-sizing: border-box;
  margin: 0; padding: 0 10px; border-radius: 9px; background: rgba(8, 8, 10, .7); border: 1px solid #26262f;
}
.pra-search:focus-within { border-color: #ff7a18; }
.pra-search > span { color: var(--tx-3); font-size: var(--fs-ui); }
.pra-search > input {
  flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none;
  background: transparent; color: #ececf2; font: 400 var(--fs-label)/1.5 var(--f-ui);
}
.pra-seg {
  position: relative; display: inline-flex; gap: 2px; height: 36px; box-sizing: border-box; padding: 3px;
  background: rgba(8, 8, 10, .7); border: 1px solid #26262f; border-radius: 9px;
}
.pra-seg > button {
  padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #a2a2b2; cursor: pointer;
  font: 600 var(--fs-ui)/1 var(--f-hd);
}
.pra-seg > button:hover { color: #ececf2; }
.pra-seg > button.on { background: #ff7a18; color: #180a00; box-shadow: 0 0 14px rgba(255, 122, 24, .5); }
.pra-rars { position: relative; display: flex; gap: 4px; align-items: center; }
.pra-rars > button {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid #26262f; background: rgba(8, 8, 10, .7); transition: all .15s;
}
.pra-rars > button:hover { border-color: rgba(255, 255, 255, .3); }
.pra-rars > button.on { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 17%, transparent); }
.pra-rars > button > i { width: 9px; height: 9px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.pra-tools-r { position: relative; margin-left: auto; display: flex; gap: 6px; }
.pra-tools-r > button {
  height: 36px; padding: 0 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid #26262f; background: rgba(8, 8, 10, .7); color: #a2a2b2; font: 600 var(--fs-ui)/1 var(--f-hd);
}
.pra-tools-r > button:hover { border-color: rgba(255, 122, 24, .5); color: #ececf2; }

.pra-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; perspective: 900px; }
.pra-it {
  --sx: 50%; --sy: 30%;
  position: relative; overflow: hidden; cursor: pointer; padding: 12px 12px 14px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(178deg, rgba(24, 24, 32, .72), rgba(12, 12, 17, .7) 60%, rgba(9, 9, 13, .75));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform-style: preserve-3d; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .12s ease-out, border-color .2s, box-shadow .25s;
  animation: praCardIn .4s cubic-bezier(.2, .8, .3, 1) both;
}
.pra-it:hover {
  border-color: color-mix(in srgb, var(--rc) 60%, transparent);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7), 0 0 30px -10px var(--rc);
}
.pra-it.on {
  transform: translateY(-4px); border-color: rgba(255, 122, 24, .7);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7), 0 0 30px -8px rgba(255, 122, 24, .8);
}
.pra-it-glow {
  position: absolute; left: 50%; top: -30%; width: 120%; height: 100%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, var(--rc), transparent 62%); opacity: .14; transition: opacity .25s;
}
.pra-it:hover .pra-it-glow, .pra-it.on .pra-it-glow { opacity: .4; }
.pra-it-top {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rc), transparent);
}
.pra-it-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(260px 200px at var(--sx) var(--sy), rgba(255, 255, 255, .13), transparent 60%);
}
.pra-it.tilt .pra-it-shine { opacity: 1; }
.pra-it-mk {
  position: absolute; right: 10px; top: 10px; z-index: 3; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; transition: all .18s;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(8, 8, 10, .7); color: #a2a2b2;
  font: 700 var(--fs-ui)/1 var(--f-hd);
}
.pra-it.on .pra-it-mk { background: #ff7a18; border-color: #ff7a18; color: #180a00; box-shadow: 0 0 14px rgba(255, 122, 24, .7); }
.pra-it-wear {
  position: absolute; left: 10px; top: 12px; z-index: 3; color: var(--rc); text-shadow: 0 0 8px var(--rc);
  font: 600 var(--fs-micro)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
}
.pra-it-art { position: relative; height: 96px; display: grid; place-items: center; margin-top: 10px; }
.pra-it-floor {
  position: absolute; left: 50%; bottom: 4px; width: 70%; height: 18px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--rc) 33%, transparent), transparent 70%); filter: blur(3px);
}
.pra-it-art > :not(.pra-it-floor) {
  position: relative; max-width: 92%; max-height: 86px; width: auto; height: auto; object-fit: contain;
}
.pra-it-art > .case-photo { display: grid; place-items: center; }
.pra-it-art > .case-photo > img { max-width: 100%; max-height: 86px; object-fit: contain; }
.pra-it-nm { position: relative; display: flex; flex-direction: column; line-height: 1.2; margin-top: 6px; min-width: 0; }
.pra-it-nm > small {
  font: 600 var(--fs-cap)/1.2 var(--f-hd); letter-spacing: .06em; color: var(--tx-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pra-it-nm > b { font: 700 var(--fs-ui)/1.2 var(--f-hd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pra-it-pr { position: relative; display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; }
.pra-it-pr > b { font: 700 var(--fs-body)/1.5 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums; }
.pra-it-act {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: 4px; padding: 8px;
  background: linear-gradient(180deg, transparent, rgba(9, 9, 13, .96) 40%);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s, transform .2s cubic-bezier(.2, .8, .3, 1);
}
.pra-it:hover .pra-it-act { opacity: 1; transform: none; pointer-events: auto; }
.pra-it-act > button {
  flex: 1; padding: 8px 0; border: 0; border-radius: 7px; cursor: pointer;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00;
  font: 600 var(--fs-label)/1 var(--f-hd); letter-spacing: .04em; text-transform: uppercase;
}
.pra-it-act > button.s {
  flex: none; width: 32px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(8, 8, 10, .7);
  color: #4a4a58; font: 700 var(--fs-label)/1 var(--f-hd);
}
.pra-it-act > button.s:disabled { cursor: not-allowed; }
.pra-it-act > button.s:not(:disabled) { color: #ffa838; border-color: rgba(255, 122, 24, .4); }

.pra-empty {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 44px 20px 40px; border-radius: 20px; border: 1px dashed rgba(255, 122, 24, .3); background: rgba(13, 13, 18, .5);
  animation: praRise .3s ease both;
}
.pra-empty-glow {
  position: absolute; left: 50%; top: 40%; width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 122, 24, .18), transparent 65%);
  animation: praRing 5s ease-in-out infinite;
}
.pra-empty > img {
  position: relative; width: 92px; height: 92px; object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(255, 122, 24, .6)); animation: praFloat 4s ease-in-out infinite;
}
.pra-empty-t { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.25; text-align: center; }
.pra-empty-t > b { font: 700 18px/1.25 var(--f-hd); }
.pra-empty-t > small { font-size: var(--fs-cap); color: var(--tx-3); margin-top: 4px; }
.pra-empty-b { position: relative; display: flex; gap: 8px; margin-top: 6px; }
.pra-empty-b > button {
  padding: 12px 18px; border-radius: 11px; cursor: pointer; border: 1px solid #3a3a46; background: transparent;
  color: #a2a2b2; font: 700 var(--fs-ui)/1 var(--f-hd);
}
.pra-empty-b > button:hover { color: #ececf2; border-color: rgba(255, 122, 24, .5); }
.pra-empty-b > button.go {
  position: relative; overflow: hidden; padding: 12px 22px; border: 0; color: #180a00;
  background: linear-gradient(135deg, #ffa838, #ff5c00); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 10px 26px -8px rgba(255, 92, 0, .7);
}

.pra-pages { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.pra-pages > button {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid #26262f; background: rgba(8, 8, 10, .7); color: #a2a2b2;
  font: 700 var(--fs-ui)/1 var(--f-hd); font-variant-numeric: tabular-nums;
}
.pra-pages > button:not(.n) { font-weight: 600; }
.pra-pages > button:hover:not(:disabled) { color: #ececf2; border-color: rgba(255, 122, 24, .5); }
.pra-pages > button:disabled { opacity: .4; cursor: default; }
.pra-pages > button.on { background: #ff7a18; border-color: #ff7a18; color: #180a00; box-shadow: 0 0 14px rgba(255, 122, 24, .5); }
.pra-pages > i { font-style: normal; color: var(--tx-3); padding: 0 2px; }
.pra-pages > span { margin-left: 10px; font-size: var(--fs-cap); color: var(--tx-3); }

.pra-selbar {
  position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 16px;
  padding: 12px 14px 12px 18px; border-radius: 16px; border: 1px solid rgba(255, 122, 24, .5);
  background: linear-gradient(90deg, rgba(40, 22, 10, .92), rgba(16, 14, 18, .92));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8), 0 0 40px -14px rgba(255, 122, 24, .7);
  animation: praRise .25s ease both;
}
.pra-selbar-n {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: #ff7a18; color: #180a00; font: 700 var(--fs-body)/1 var(--f-hd); box-shadow: 0 0 16px rgba(255, 122, 24, .7);
}
.pra-selbar-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pra-selbar-t > b { font-size: var(--fs-ui); }
.pra-selbar-t > small { font-size: var(--fs-cap); color: #a2a2b2; }
.pra-selbar-s {
  margin-left: auto; white-space: nowrap; color: #ffa838; font: 700 22px/1.5 var(--f-hd);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(255, 122, 24, .5);
}
.pra-selbar-x {
  padding: 10px 14px; border-radius: 9px; cursor: pointer; border: 1px solid #3a3a46; background: transparent;
  color: #a2a2b2; font: 600 var(--fs-ui)/1 var(--f-hd);
}
.pra-selbar-x:hover { color: #ececf2; }
.pra-selbar-go {
  padding: 11px 20px; border-radius: 9px; border: 0; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 24px -6px rgba(255, 92, 0, .6);
}

.pra-ticker {
  position: relative; display: flex; align-items: center; height: 38px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06); background: rgba(9, 9, 13, .6);
}
.pra-ticker-k {
  flex: none; z-index: 2; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px;
  background: rgba(255, 122, 24, .1); border-right: 1px solid rgba(255, 122, 24, .25);
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838;
}
.pra-ticker-k > i {
  width: 6px; height: 6px; border-radius: 50%; background: #ff7a18; box-shadow: 0 0 8px #ff7a18;
  animation: pulse 1.6s ease-in-out infinite;
}
.pra-ticker-v {
  flex: 1; min-width: 0; height: 100%; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pra-ticker-run {
  position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap;
  animation: praTicker 48s linear infinite;
}
.pra-feed {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; font-size: var(--fs-cap); color: #a2a2b2;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.pra-feed > i { width: 6px; height: 6px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 6px var(--gc); }
.pra-feed > small { font-size: var(--fs-cap); color: var(--tx-3); font-variant-numeric: tabular-nums; }
.pra-feed > b { font-variant-numeric: tabular-nums; }
.pra-feed > b:first-of-type { color: #ececf2; font-weight: 600; font-family: var(--f-hd); }

.pra-hist {
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(13, 13, 18, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pra-hist-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.pra-hist-h:hover { background: rgba(255, 255, 255, .02); }
.pra-hist-ic {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); color: #a2a2b2; font-size: var(--fs-body);
}
.pra-hist-t { display: flex; flex-direction: column; line-height: 1.2; }
.pra-hist-t > b { font-size: var(--fs-ui); }
.pra-hist-t > small { font-size: var(--fs-micro); color: var(--tx-3); }
.pra-hist-arr {
  margin-left: auto; width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid #26262f; background: rgba(8, 8, 10, .7); color: #a2a2b2; font-size: var(--fs-cap); transition: transform .25s;
}
.pra-hist.open .pra-hist-arr { transform: rotate(180deg); }
.pra-hist-b { padding: 0 16px 16px; animation: praRise .25s ease both; }
.pra-hist-head, .pra-hrow { display: grid; grid-template-columns: 150px 130px 1fr 110px 110px; gap: 0 12px; }
.pra-hist-head {
  padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3);
}
.pra-hist-head > span:nth-child(n+4) { text-align: right; }
.pra-hrow {
  align-items: center; padding: 9px 14px; font-size: var(--fs-label); line-height: 1.5; border-radius: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.pra-hrow:hover { background: rgba(255, 255, 255, .025); }
.pra-hrow > .w { color: var(--tx-3); font-size: var(--fs-cap); font-variant-numeric: tabular-nums; }
.pra-hrow > .g { display: flex; align-items: center; gap: 7px; font-weight: 600; font-family: var(--f-hd); }
.pra-hrow > .g > i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--gc); box-shadow: 0 0 8px var(--gc); }
.pra-hrow > .e { color: #a2a2b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pra-hrow > .b { text-align: right; color: #a2a2b2; font-variant-numeric: tabular-nums; }
.pra-hrow > .r { text-align: right; font-variant-numeric: tabular-nums; }
.pra-hnone { padding: 14px; font-size: var(--fs-label); color: var(--tx-3); }

/* ---------------------------------------------------------- окно вывода */

.modal:has(.pwd) {
  position: relative; width: 720px; max-width: calc(100vw - 40px); padding: 0; overflow-x: hidden;
  border-radius: 24px; border: 1px solid rgba(255, 122, 24, .35);
  background: linear-gradient(160deg, rgba(28, 18, 13, .96), rgba(12, 12, 17, .97) 50%);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(255, 122, 24, .6);
  animation: praModal .3s cubic-bezier(.2, .8, .3, 1) both;
}
.pwd { position: relative; color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui); }
.pwd-line {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 168, 56, .9), transparent);
}
.pwd-glow {
  position: absolute; right: -100px; top: -100px; width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 122, 24, .2), transparent 65%);
}
.pwd-h { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 22px 0; }
.pwd-tabs {
  display: inline-flex; gap: 3px; padding: 4px; border-radius: 11px;
  background: rgba(8, 8, 10, .75); border: 1px solid #26262f;
}
.pwd-tabs > button {
  padding: 9px 18px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: #a2a2b2;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .04em;
}
.pwd-tabs > button:hover { color: #ececf2; }
.pwd-tabs > button.on { background: rgba(255, 122, 24, .18); color: #ffa838; box-shadow: inset 0 0 0 1px rgba(255, 122, 24, .5); }
.pwd-bal { margin-left: auto; font-size: var(--fs-cap); color: var(--tx-3); }
.pwd-bal > b { color: #ffa838; font-variant-numeric: tabular-nums; }
.pwd-x {
  width: 32px; height: 32px; flex: none; padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px solid #26262f; background: rgba(8, 8, 10, .7); color: #a2a2b2; font: 600 var(--fs-body)/1 var(--f-hd);
}
.pwd-x:hover { color: #ececf2; border-color: rgba(255, 122, 24, .5); }
.pwd-b { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; animation: praRise .25s ease both; }
.pwd-cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }
.pwd-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pwd-k { font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.pwd-amt {
  display: flex; align-items: center; gap: 6px; height: 48px; box-sizing: border-box; margin: 0; padding: 0 12px;
  border-radius: 10px; background: rgba(8, 8, 10, .75); border: 1px solid #26262f;
}
.pwd-amt:focus-within { border-color: #ff7a18; }
.pwd-amt > span { color: var(--tx-3); font: 700 16px/1 var(--f-hd); }
#modal .pwd-amt > input {
  flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none;
  background: transparent; color: #ececf2; font: 700 16px/1.5 var(--f-ui); font-variant-numeric: tabular-nums;
}
.pwd-amt > button {
  padding: 5px 9px; border-radius: 6px; cursor: pointer; border: 1px solid rgba(255, 122, 24, .4);
  background: rgba(255, 122, 24, .1); color: #ffa838; font: 700 var(--fs-label)/1 var(--f-hd);
}
.pwd-note { font-size: var(--fs-micro); color: var(--tx-3); }
.pwd-get {
  margin-top: auto; display: flex; justify-content: space-between; padding-top: 8px; font-size: var(--fs-cap); color: #a2a2b2;
  border-top: 1px dashed rgba(255, 255, 255, .1);
}
.pwd-get > span { font-weight: 600; font-family: var(--f-hd); }
.pwd-get > b { color: #ffa838; font-size: 16px; font-variant-numeric: tabular-nums; }
.pwd-ws, .pwd-wl { display: flex; flex-direction: column; gap: 6px; }
.pwd-wl:empty { display: none; }
.pwd-w {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 9px; cursor: pointer;
  text-align: left; background: rgba(8, 8, 10, .6); border: 1px solid #26262f; color: #ececf2; font: 600 var(--fs-ui)/1.2 var(--f-hd);
}
.pwd-w:hover { border-color: rgba(255, 122, 24, .5); }
.pwd-w.on { background: linear-gradient(180deg, rgba(255, 122, 24, .22), rgba(255, 122, 24, .08)); border-color: rgba(255, 122, 24, .6); }
.pwd-w > i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #35d07f; box-shadow: 0 0 8px #35d07f; }
.pwd-w.fresh > i { background: #ffd23b; box-shadow: 0 0 8px #ffd23b; }
.pwd-w > .n { flex: none; white-space: nowrap; }
.pwd-w > .a {
  flex: 1; min-width: 0; color: var(--tx-3); font: 600 var(--fs-ui)/1.2 var(--f-hd); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pwd-w > .t { margin-left: auto; white-space: nowrap; color: #ffd23b; font: 700 var(--fs-cap)/1.2 var(--f-hd); }
.pwd-add { display: flex; gap: 6px; }
#modal .pwd-add > select {
  flex: none; width: 132px; min-width: 0; height: 40px; box-sizing: border-box; margin: 0; padding: 0 10px;
  border-radius: 9px; background: rgba(8, 8, 10, .75); border: 1px solid #26262f; color: #ececf2;
  font: 700 var(--fs-cap)/1 var(--f-ui); outline: none;
}
#modal .pwd-add > input {
  flex: 1; min-width: 0; width: 100%; height: 40px; box-sizing: border-box; margin: 0; padding: 0 12px;
  border-radius: 9px; background: rgba(8, 8, 10, .75); border: 1px solid #26262f; outline: none; box-shadow: none;
  color: #ececf2; font: 600 var(--fs-cap)/1 var(--f-hd);
}
#modal .pwd-add > input:focus { border-color: #ff7a18; }
.pwd-add > button {
  flex: none; height: 40px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 122, 24, .4); background: rgba(255, 122, 24, .08); color: #ffa838; font: 700 var(--fs-label)/1 var(--f-hd);
}
.pwd-add > button:hover { background: rgba(255, 122, 24, .2); }
.pwd-hold { font-size: var(--fs-micro); color: var(--tx-3); }
.pwd-go {
  width: 100%; padding: 15px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 122, 24, .6); background: rgba(255, 122, 24, .12); color: #ffa838;
  font: 700 var(--fs-body)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: inset 0 0 30px -10px rgba(255, 122, 24, .4);
}
.pwd-go:hover { background: rgba(255, 122, 24, .22); }
.pwd-go:disabled { opacity: .6; cursor: default; }
.pwd-reqs { display: flex; flex-direction: column; gap: 2px; }
.pwd-reqs > .pwd-k { margin-bottom: 4px; }
.pwd-r {
  display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: var(--fs-cap);
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.pwd-r > .d { color: var(--tx-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pwd-r > .w { min-width: 0; color: #a2a2b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwd-r > b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pwd-r > .s {
  padding: 3px 8px; border-radius: 5px; white-space: nowrap; font: 700 var(--fs-cap)/1.5 var(--f-hd);
  background: rgba(255, 210, 59, .14); color: #ffd23b;
}
.pwd-r > .s.ok { background: rgba(53, 208, 127, .14); color: #7ce4ae; }
.pwd-r > .s.back { background: rgba(255, 255, 255, .06); color: #a2a2b2; }
.pwd-r > .s.bad { background: rgba(235, 75, 75, .14); color: #eb4b4b; }

/* ---------------------------------------------------------- мои операции
   Окно этапов пополнения и вывода (operations.js). Рамка — от окна вывода
   (.pwd), своё здесь только: карточка операции и шаги. */

.pra-ops {
  padding: 13px 16px; border-radius: 11px; cursor: pointer; border: 1px solid #26262f;
  background: rgba(8, 8, 10, .55); color: #a2a2b2; font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .04em;
}
.pra-ops:hover { color: #ececf2; border-color: rgba(255, 122, 24, .5); }
.ops-more {
  margin-left: 10px; padding: 0; border: 0; background: none; cursor: pointer; color: #ffa838;
  font: 600 var(--fs-micro)/1.4 var(--f-ui); letter-spacing: 0; text-transform: none;
  border-bottom: 1px dotted rgba(255, 168, 56, .6);
}
.ops-more:hover { color: #ffc46e; }
.ops-list { display: flex; flex-direction: column; gap: 10px; max-height: min(62vh, 560px); overflow-y: auto; }
.ops-empty { margin: 6px 0; font-size: var(--fs-cap); color: var(--tx-3); }
.ops-it {
  padding: 12px 14px; border-radius: 12px; background: rgba(8, 8, 10, .6); border: 1px solid #26262f;
}
.ops-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ops-top > b { font: 700 var(--fs-body)/1.3 var(--f-hd); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ops-top > span { min-width: 0; color: #a2a2b2; font-size: var(--fs-cap);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-top > time { margin-left: auto; color: var(--tx-3); font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ops-steps { display: flex; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.ops-steps li {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  font-size: var(--fs-micro); line-height: 1.3; color: var(--tx-3);
}
.ops-steps li > i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.ops-steps li.done { color: #a2a2b2; }
.ops-steps li.done > i { background: #35d07f; }
.ops-steps li.now { color: #ffa838; }
.ops-steps li.now > i { background: linear-gradient(90deg, #ffa838, rgba(255, 168, 56, .25));
  animation: opsPulse 1.4s ease-in-out infinite; }
.ops-steps li.warn { color: #ffcf6e; }
.ops-steps li.warn > i { background: #ffcf6e; }
.ops-steps li.bad { color: #eb4b4b; }
.ops-steps li.bad > i { background: #eb4b4b; }
@keyframes opsPulse { 50% { opacity: .45; } }
.ops-note { margin: 8px 0 0; font-size: var(--fs-cap); color: #a2a2b2; }
.ops-link { display: inline-block; margin-top: 8px; font-size: var(--fs-micro); color: var(--tx-3);
  text-decoration: none; border-bottom: 1px dotted; }
.ops-link:hover { color: #ffa838; }
.ops-foot { margin: 0; font-size: var(--fs-micro); color: var(--tx-3); }
.ops-foot .bad { color: #eb4b4b; }
@media (max-width: 880px) {
  .pra-bal-btns { flex-wrap: wrap; }
  .pra-ops { flex: 1 1 100%; min-height: 44px; padding: 0 14px; }
  .ops .pwd-h { gap: 8px; padding: 14px 14px 0; }
  .ops .pwd-bal { display: none; }
  .ops .pwd-x { margin-left: auto; }
  .ops .pwd-tabs > button { padding: 9px 12px; }
  .ops .pwd-b { padding: 14px; }
  .ops-steps { gap: 4px; }
}

@keyframes praSweep { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@keyframes praSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes praRing {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .8; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes praBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes praFloat { 50% { transform: translateY(-8px); } }
@keyframes praRise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
@keyframes praModal { 0% { opacity: 0; transform: translateY(24px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes praTicker { to { transform: translateX(-50%); } }
@keyframes praCardIn { 0% { opacity: 0; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pra *, .pwd * { animation: none !important; }
}

/* ---------------------------------------------------------- телефон (mobVals) */

@media (max-width: 880px) {
  .pra-bal { flex-direction: column; align-items: stretch; gap: 14px; }
  .pra-bal-btns { width: 100%; }
  .pra-dep, .pra-wd { flex: 1 1 0; min-height: 50px; padding: 0 14px; }
  .pra-stats { grid-template-columns: repeat(2, 1fr); }

  .pra-row3 { grid-template-columns: 1fr; }
  .pra-best { padding: 14px 14px 16px; }
  .pra-best-h { display: none; }
  .pra-best-b { grid-template-columns: 104px minmax(0, 1fr); }
  .pra-best-art { height: 78px; }
  .pra-best-img { width: 104px; height: 72px; top: -12px; }
  .pra-best-tx { align-items: flex-end; text-align: right; }
  .pra-best-k {
    display: block; font: 600 var(--fs-micro)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #eb4b4b;
  }
  .pra-best-nm b { font-size: 18px; }
  .pra-best-pr { font-size: 21px; }
  .pra-best-tags { justify-content: flex-end; }
  .pra-best-none { padding: 10px 4px; }

  .pra-style { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px 14px 16px; }
  .pra-desk, .pra-howto { display: none; }
  .pra-style-body::before {
    content: "Выделяйся среди игроков — выбирай уникальные фоны и элементы";
    font-size: var(--fs-label); line-height: 1.45; color: #a2a2b2;
  }

  .pra-tools { display: none; }
  .pra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pra-pages > span { flex-basis: 100%; margin: 2px 0 0; text-align: center; }
  .pra-selbar {
    bottom: calc(80px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 10px; padding: 10px 10px 10px 12px;
  }
  .pra-selbar-t { flex: 1; }
  .pra-selbar-s { margin-left: 0; font-size: 18px; }
  .pra-selbar-x { flex: 1 1 30%; }
  .pra-selbar-go { flex: 1 1 60%; }
  .pra-ticker-k { padding: 0 10px; }

  .pra-hist-head { display: none; }
  .pra-hrow { grid-template-columns: 1fr auto; }

  .modal:has(.pwd) {
    width: 100%; max-width: none; border: 0; border-top: 1px solid rgba(255, 122, 24, .35);
    border-radius: 20px 20px 0 0; padding: 10px 0 env(safe-area-inset-bottom);
  }
  .modal:has(.pwd)::before { margin-bottom: 0; }
  .pwd-h { flex-wrap: wrap; gap: 10px; padding: 10px 16px 0; }
  .pwd-b { padding: 16px 16px 22px; }
  .pwd-cols { grid-template-columns: 1fr; }
  .pwd-add { display: grid; grid-template-columns: minmax(0, 1fr); }
  #modal .pwd-add > select { width: 100%; }
  .pwd-add > button { width: 100%; }
}

/* ============================================================ ALIVE · ШИРОКИЕ ЭКРАНЫ

   Ширина страниц на мониторах шире 1440 — как у макетов. У витрины, кейса
   и кабинета main макета не шире 1400px вместе с полями 24px, то есть
   содержимое — 1352px; у ракеты и минного поля — 1440px (1392px внутри);
   лидеры, колесо, апгрейд и пропуск идут во всю ширину. Без этих границ на
   1920 карточки кейсов раздувались на треть.

   Страницы с картинкой-фоном (колесо) тянутся до подвала: когда сайдбар
   выше страницы, .content растягивается по нему, и под картинкой оставалась
   полоса голого звёздного неба. */

#page-cases, #page-case { max-width: 1352px; margin-inline: auto; }
/* Страница кейса — свой слой: общий фон под героем и списком (.co-page-bg). */
#page-case { position: relative; isolation: isolate; background: #08080e; }
.lba, .bpp { max-width: none; }
.content:has(> .page.on .sta) { display: flex; flex-direction: column; }
.content > .page.on:has(.sta) { flex: 1 0 auto; display: flex; flex-direction: column; }
.page.on .sta { flex: 1 0 auto; }
/* Колесо тянется до низа страницы. Высоту ряда каркаса задаёт то, что
   выше, — сцена или сайдбар с заданиями и быстрым стартом; когда выше
   сайдбар, под сценой оставалась полоса голого неба до подвала. Теперь
   сцена дотягивается до конца ряда, и место под ней занимает её же
   картинка. Окно высоту не навязывает: короткая страница кончается
   подвалом сразу за колесом, как в макете. */
.shell:has(> .main > .content > .page.on .wha) { min-height: 0; }
.content:has(> .page.on .wha) { display: flex; flex-direction: column; flex: 1 0 auto; }
.content > .page.on:has(.wha) { flex: 1 0 auto; display: flex; flex-direction: column; }
.page.on .wha { flex: 1 0 auto; }
/* Ряд сетки каркаса задаёт сайдбар высотой в окно — с ним колесо всё равно
   отодвигало подвал. Здесь сайдбар высотой по содержимому (липкость
   остаётся), и ряд равен странице. */
.shell:has(> .main > .content > .page.on .wha) > .side { height: auto; }

/* Подписи секторов колеса: у сундука — «Сундук» в одну строку, как в
   макете; текстовые секторы без картинки — шире ячейки картинки, чтобы
   «Скины при пополнении» не ломались на три строки. */
.wha-it.case > b { white-space: nowrap; }
.wha-sec > .wha-it.skin { width: 27%; }
.wha-it.skin > .wha-ic {
  display: grid; place-items: center; width: 54%; height: 52%; color: #ffa838;
  filter: drop-shadow(0 0 10px rgba(255, 122, 24, .7)) drop-shadow(0 6px 10px rgba(0, 0, 0, .8));
}
.wha-it.skin > .wha-ic > svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------- колонка сайдбара

   Сайдбар липкий и высотой в окно; когда страница длиннее, ниже него в
   левой колонке проступало небо. В макете колонка тёмная на всю высоту —
   подкладываем ей фон каркасом. */
@media (min-width: 881px) {
  .shell::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 232px; z-index: 0;
    pointer-events: none; background: linear-gradient(180deg, #0c0c10, #0a0a0d);
    border-right: 1px solid var(--line);
  }
  .shell > .side { z-index: 1; }
}

/* ---------------------------------------------------------- край картинок

   Картинки-сцены (апгрейд, лидеры, Battle Pass, колесо, текстовые страницы)
   снизу уходят в цвет фона (#07070a) плавно, а не обрываются: нижняя часть
   затенения доведена до непрозрачного. */
.upa-bg {
  background:
    linear-gradient(180deg, rgba(7, 7, 10, .45), transparent 14%, transparent 56%,
      rgba(7, 7, 10, .55) 74%, rgba(7, 7, 10, .92) 88%, #07070a 100%),
    url('/assets/upg/scene.webp') center top / 100% auto no-repeat, #07070a;
}
.lba-shade {
  background:
    linear-gradient(90deg, rgba(7, 7, 10, .88) 0%, rgba(7, 7, 10, .6) 22%, rgba(7, 7, 10, 0) 38%),
    linear-gradient(180deg, rgba(7, 7, 10, .35), transparent 22%, transparent 60%, rgba(7, 7, 10, .92) 92%, #07070a 100%);
}
.bpp-shade {
  background:
    linear-gradient(90deg, rgba(7, 7, 10, .86) 0%, rgba(7, 7, 10, .55) 30%, rgba(7, 7, 10, .05) 55%, rgba(7, 7, 10, .35) 100%),
    linear-gradient(180deg, rgba(7, 7, 10, .35), transparent 30%, transparent 55%, rgba(7, 7, 10, .95) 92%, #07070a 100%);
}
/* Низ — лишь чуть темнее: там площадка сцены с огнями и маскот на ней
   (раньше низ уходил в сплошную черноту под прежний фон). */
.wha > .wha-shade {
  background: linear-gradient(90deg, rgba(7, 7, 10, .78), rgba(7, 7, 10, .2) 26%, rgba(7, 7, 10, .08) 70%, rgba(7, 7, 10, .55)),
              linear-gradient(180deg, rgba(7, 7, 10, .5), transparent 22%, transparent 82%, rgba(7, 7, 10, .45) 100%);
}

/* Кабинет, сверка с макетом: предпросмотр оформления — в правой колонке
   (400px, как в сетке макета); плашки лучшего выигрыша — строчные, кроме
   плашки кейса. */
.pra-style > .pra-pv { grid-column: 2; grid-row: 1; align-self: stretch; }
.pra-best-tags > span { display: block; }
.pra-best-tags > span.c { display: flex; }
.pra-best-tags > span.c > img { width: 14px; height: 14px; object-fit: contain; }

/* Цена в inline-flex с gap распадалась на «$ 0.06»: money() отдаёт знак
   валюты отдельным <span>, и gap вставал между ним и числом. В макете
   «$0.48» — слитно. Отступ у значка перед ценой, если он есть, — своим
   margin. */
.cs-drop-p, .cs-card-price, .copen-drop-p, .upa-card-p, .upa-grid .item-price, .upa-pk-p,
.copen-open b, .copen-fast b, .copen-item-f b, .copen-drop-sell, .copen-sellall { gap: 0; }
.copen-drop-sell .coin, .copen-sellall .coin { margin-left: 4px; }
.cs-drop-p > i, .cs-card-price > i, .copen-drop-p > i, .upa-card-p > i,
.upa-grid .item-price > i, .upa-pk-p > i { margin-right: 4px; }

/* ============================================================ ALIVE · МИНИ-ПРОФИЛЬ

   По «MiniProfile.dc.html»: карточка 390px по центру поверх затемнения,
   открывается кликом по нику (minicard.js). Цвет рамки и свечения — от ника
   (--ac, --bd, --gl, --h), у первого места гонки — золото. Фон и элемент,
   надетые в кабинете, — теми же узорами .pra-pat-*, что в предпросмотре. */

[data-uid] { cursor: pointer; }
.mpa-bg {
  position: fixed; inset: 0; z-index: 160; display: grid; place-items: center;
  background: rgba(4, 4, 7, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui); animation: mpaFade .2s ease both;
}
.mpa {
  position: relative; width: 390px; max-width: calc(100vw - 24px); box-sizing: border-box; overflow: hidden;
  padding: 16px 16px 14px; border-radius: 8px; border: 1px solid var(--bd);
  background: linear-gradient(180deg, rgba(30, 26, 26, .97), rgba(16, 14, 16, .98));
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .95), 0 0 50px -20px var(--gl), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: mpaPop .25s cubic-bezier(.2, .8, .3, 1) both;
}
.mpa-fon { position: absolute; inset: 0; opacity: .85; pointer-events: none; }
.mpa-line {
  position: absolute; left: 10%; right: 10%; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent); box-shadow: 0 0 12px var(--ac);
}
.mpa-dec { position: absolute; pointer-events: none; opacity: .55; filter: drop-shadow(0 0 10px currentColor); }
.mpa-dec > svg { display: block; width: 100%; height: 100%; }
.mpa-dec.slot-corner { top: 50px; right: 18px; width: 28px; height: 28px; }
.mpa-dec.slot-top { top: 4px; left: 46px; width: 40px; height: 40px; opacity: .8; }
.mpa-dec.slot-behind { top: 12px; left: 4px; width: 120px; height: 76px; opacity: .35; }
.mpa-tools { position: absolute; right: 14px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.mpa-mark {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; line-height: 1;
  border: 1px solid rgba(255, 122, 24, .45); background: rgba(255, 122, 24, .08); color: var(--ac); font-size: var(--fs-cap);
}
.mpa-x {
  width: 26px; height: 26px; padding: 0; border-radius: 5px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #a2a2b2;
  font: 700 var(--fs-ui)/1 var(--f-hd);
}
.mpa-x:hover { color: #ececf2; border-color: rgba(255, 122, 24, .5); }
.mpa-head { position: relative; display: flex; align-items: center; gap: 16px; padding-right: 70px; }
.mpa-ava { position: relative; flex: none; width: 88px; height: 88px; display: grid; place-items: center; }
.mpa-ava .af-in img { width: 100%; height: 100%; object-fit: cover; }
.mpa-letter {
  width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font: 700 30px/1 var(--f-hd);
  background: radial-gradient(circle at 35% 30%, hsl(var(--h) 45% 40%), hsl(var(--h) 45% 14%));
}
.mpa-lvl {
  position: absolute; left: -4px; bottom: -2px; z-index: 3; min-width: 26px; height: 26px; box-sizing: border-box;
  padding: 0 6px; border-radius: 13px; display: grid; place-items: center; border: 2px solid #0b0a0e;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00; font: 700 var(--fs-ui)/1 var(--f-hd);
  box-shadow: 0 0 12px rgba(255, 122, 24, .7);
}
.mpa-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mpa-id > b { display: flex; align-items: center; gap: 7px; min-width: 0; font: 700 16px/1.2 var(--f-hd); }
.mpa-id > b > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpa-crown { font-style: normal; font-size: var(--fs-body); color: #ffd23b; filter: drop-shadow(0 0 8px rgba(255, 210, 59, .8)); }
.mpa-since { font-size: var(--fs-micro); line-height: 1.3; font-weight: 600; color: #a2a2b2; }
.mpa-tag { font: 600 var(--fs-cap)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #8a8a9a; }
.mpa-stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.mpa-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px 9px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(20, 17, 18, .9);
  box-shadow: inset 0 0 20px -14px rgba(255, 122, 24, .5);
}
.mpa-stat > b { font: 700 21px/1 var(--f-hd); font-variant-numeric: tabular-nums; color: #ececf2; }
.mpa-stat > span { font: 600 var(--fs-cap)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #8a8a9a; }
.mpa-cap {
  position: relative; margin-top: 14px; font: 600 var(--fs-label)/1.2 var(--f-hd); letter-spacing: .1em;
  text-transform: uppercase; color: #8a8a9a;
}
.mpa-skins { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.mpa-skin {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 6px 7px; border-radius: 6px; border: 1px solid var(--rc); border-top-width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 13%, transparent), rgba(12, 10, 12, .95) 60%);
  box-shadow: 0 0 18px -10px var(--rc);
}
.mpa-skin-art { width: 100%; height: 46px; display: grid; place-items: center; }
.mpa-skin-art > img, .mpa-skin-art > svg {
  max-width: 100%; max-height: 46px; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7));
}
.mpa-skin-nm { display: flex; flex-direction: column; align-items: center; line-height: 1.15; max-width: 100%; }
.mpa-skin-nm > small, .mpa-skin-nm > b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpa-skin-nm > small { font: 600 var(--fs-micro)/1.15 var(--f-hd); color: #8a8a9a; }
.mpa-skin-nm > b { font: 700 var(--fs-label)/1.15 var(--f-hd); }
.mpa-skin-pr {
  display: flex; align-items: center; gap: 4px; color: #ffa838; font: 700 var(--fs-label)/1.2 var(--f-hd);
  font-variant-numeric: tabular-nums;
}
.mpa-skin-pr > i { width: 11px; height: 11px; border-radius: 50%; background: url("/assets/lb/coin.png") center / contain no-repeat; }
.mpa-none {
  position: relative; margin-top: 8px; padding: 12px; border-radius: 6px; text-align: center; font-size: var(--fs-cap); color: #8a8a9a;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(20, 17, 18, .9);
}
.mpa-rank {
  position: relative; margin-top: 10px; padding: 9px 12px; display: flex; align-items: center; border-radius: 6px;
  border: 1px solid rgba(255, 122, 24, .38); background: rgba(20, 17, 18, .9); color: #ffa838;
  font: 600 var(--fs-label)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
}
.mpa-rank > span { flex: 1; text-align: center; padding-left: 14px; }
.mpa-rank > i { font-style: normal; font-size: var(--fs-cap); opacity: .75; }
@keyframes mpaFade { from { opacity: 0; } }
@keyframes mpaPop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .mpa-bg, .mpa { animation: none; } }

/* ============================================================ ALIVE · ПРОГРЕССИЯ НАГРАД

   Окно «Прогрессия наград» (loyalty.js openProgress) по макету кабинета:
   860px, вехи колонками на дорожке — по шесть в ряд, остальные листаются;
   на телефоне — нижняя шторка, дорожки нет, «листай вправо →». */

.modal:has(.plv) {
  position: relative; width: 860px; max-width: calc(100vw - 40px); max-height: calc(100vh - 80px);
  padding: 0; overflow-x: hidden; overflow-y: auto; border-radius: 24px; border: 1px solid rgba(255, 122, 24, .35);
  background: linear-gradient(160deg, rgba(28, 18, 13, .97), rgba(12, 12, 17, .98) 55%);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(255, 122, 24, .6);
  animation: praModal .3s cubic-bezier(.2, .8, .3, 1) both;
}
.plv { position: relative; color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui); }
.plv-line {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 168, 56, .9), transparent);
}
.plv-glow {
  position: absolute; left: -120px; top: -120px; width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 122, 24, .2), transparent 65%);
}
.plv-h { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 24px 0; }
.plv-ava { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.plv-ring {
  position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(255, 122, 24, .4);
  animation: plvSpin 18s linear infinite;
}
.plv-num {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00; font: 700 24px/1 var(--f-hd);
  animation: plvGlow 3s ease-in-out infinite;
}
.plv-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.plv-t > b { font: 700 22px/1.2 var(--f-hd); letter-spacing: -.01em; }
.plv-t > span { font-size: var(--fs-cap); color: #a2a2b2; }
.plv-t > span b { color: #ffa838; }
.plv-x {
  width: 32px; height: 32px; flex: none; padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px solid #26262f; background: rgba(8, 8, 10, .7); color: #a2a2b2; font: 600 var(--fs-body)/1 var(--f-hd);
}
.plv-x:hover { color: #ececf2; border-color: rgba(255, 122, 24, .5); }
.plv-b { position: relative; padding: 22px 24px 6px; }
.plv-swipe { display: none; }
.plv-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 6); gap: 8px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 8px;
}
.plv-row::-webkit-scrollbar { display: none; }
.plv-tier {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0;
  animation: praCardIn .45s cubic-bezier(.2, .8, .3, 1) both;
}
/* Дорожка — отрезками от точки к точке: у последней вехи отрезка нет. */
.plv-tier::after {
  content: ""; position: absolute; z-index: 0; top: 11px; left: 50%; width: calc(100% + 8px); height: 6px;
  border-radius: 3px; background: #1c1c24;
}
.plv-tier:last-child::after { display: none; }
.plv-tier.fill::after { background: linear-gradient(90deg, #ffa838, #ff5c00); box-shadow: 0 0 12px rgba(255, 122, 24, .7); }
.plv-tier.half::after {
  background: linear-gradient(90deg, #ff7a18 calc(var(--f, 0) * 100%), #1c1c24 calc(var(--f, 0) * 100%));
}
.plv-dot {
  position: relative; z-index: 1; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid #0d0d12; background: #1c1c24; color: var(--tx-3);
  font: 700 var(--fs-label)/1 var(--f-hd);
}
.plv-tier:not(.lock) .plv-dot {
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00; box-shadow: 0 0 12px rgba(255, 122, 24, .7);
}
.plv-card {
  position: relative; width: 100%; box-sizing: border-box; padding: 14px 10px 12px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06); background: rgba(8, 8, 10, .5); opacity: .55;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: transform .2s;
}
.plv-card:hover { transform: translateY(-4px); }
.plv-tier.done .plv-card { opacity: 1; border-color: rgba(255, 122, 24, .22); background: rgba(255, 122, 24, .05); }
.plv-tier.cur .plv-card {
  opacity: 1; border-color: rgba(255, 122, 24, .6);
  background: linear-gradient(180deg, rgba(255, 122, 24, .16), rgba(255, 122, 24, .04));
}
.plv-tier.cur .plv-card::before {
  content: ""; position: absolute; top: 0; left: -40%; width: 30%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 168, 56, .12), transparent);
  transform: skewX(-18deg); animation: praSweep 4s ease-in-out infinite;
}
.plv-bar { display: none; }
.plv-art { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.plv-art::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; filter: blur(4px);
  background: radial-gradient(circle, rgba(255, 122, 24, .33), transparent 70%);
}
.plv-art > img {
  position: relative; width: 60px; height: 60px; object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7)); animation: praFloat 4s ease-in-out infinite;
}
.plv-art > svg, .plv-art > span { position: relative; }
.plv-tier.lock .plv-art > img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7)) grayscale(1) brightness(.6); animation: none; }
.plv-tt { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.plv-tt > b { font-size: var(--fs-cap); color: #ececf2; }
.plv-tier.lock .plv-tt > b { color: #a2a2b2; }
.plv-tt > small { font-size: 10px; color: var(--tx-3); }
.plv-tag {
  padding: 4px 9px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--tx-3);
  font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .08em; text-transform: uppercase;
}
.plv-tier.done .plv-tag { background: rgba(53, 208, 127, .14); color: #7ce4ae; }
.plv-tier.cur .plv-tag { background: #ff7a18; color: #180a00; }
.plv-f { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 24px 22px; }
.plv-tips { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plv-k { font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.plv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.plv-chips > span {
  padding: 6px 10px; border-radius: 8px; font-size: var(--fs-micro); color: #a2a2b2;
  background: rgba(8, 8, 10, .6); border: 1px solid rgba(255, 255, 255, .08);
}
.plv-chips b { color: #ffa838; }
.plv-cta {
  position: relative; overflow: hidden; flex: none; min-height: 48px; padding: 13px 22px; border-radius: 11px; cursor: pointer;
  border: 1px solid transparent; background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 10px 26px -8px rgba(255, 92, 0, .7);
}
.plv-cta.off { cursor: default; background: transparent; color: #7ce4ae; border-color: rgba(53, 208, 127, .4); box-shadow: none; }
@keyframes plvSpin { to { transform: rotate(360deg); } }
@keyframes plvGlow {
  0%, 100% { box-shadow: 0 0 18px -4px rgba(255, 122, 24, .7); }
  50% { box-shadow: 0 0 34px -2px rgba(255, 122, 24, 1); }
}
@media (prefers-reduced-motion: reduce) { .plv * { animation: none !important; } }

/* Окно вывода, сверка с макетом: сеть — нативный список, как в макете;
   на телефоне окно остаётся карточкой по центру (в макете оно не шторка). */
#modal .pwd-add > select {
  -webkit-appearance: menulist; appearance: auto; background-image: none; color-scheme: dark;
  padding: 0 10px; font: 700 var(--fs-cap)/1 var(--f-ui);
}

@media (max-width: 880px) {
  .modal:has(.plv) {
    width: 100%; max-width: none; max-height: 88vh; padding: 0;
    border-radius: 20px 20px 0 0; border: 1px solid rgba(255, 122, 24, .35);
  }
  .modal:has(.plv)::before { display: none; }
  .plv-h { gap: 12px; padding: 16px 16px 0; }
  .plv-ava { width: 48px; height: 48px; }
  .plv-num { font-size: 20px; }
  .plv-t > b { font-size: 18px; }
  .plv-b { padding: 16px 14px 6px; }
  .plv-swipe { display: block; margin: 0 0 10px; font: 600 var(--fs-micro)/1 var(--f-ui); letter-spacing: .06em; color: var(--tx-3); }
  .plv-row { grid-auto-columns: 134px; gap: 10px; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .plv-tier { scroll-snap-align: start; }
  .plv-tier::after { display: none; }
  .plv-card { padding: 0 6px 10px; border: 0; border-radius: 0; background: transparent !important; }
  .plv-bar { display: block; width: 100%; height: 3px; margin-bottom: 4px; border-radius: 2px; background: rgba(255, 255, 255, .06); }
  .plv-tier.done .plv-bar { background: rgba(255, 122, 24, .22); box-shadow: 0 0 10px rgba(255, 122, 24, .22); }
  .plv-tier.cur .plv-bar { background: rgba(255, 122, 24, .6); box-shadow: 0 0 10px rgba(255, 122, 24, .6); }
  .plv-f { flex-direction: column; align-items: stretch; padding: 10px 14px 18px; }
  .plv-cta { width: 100%; }

  .modal-bg:has(.pwd) { place-items: center; padding: 20px; }
  .modal:has(.pwd) {
    width: 100%; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); padding: 0;
    border: 1px solid rgba(255, 122, 24, .35); border-radius: 24px;
  }
  .modal:has(.pwd)::before { display: none; }
  .pwd-h { flex-wrap: nowrap; gap: 10px; padding: 18px 22px 0; }
  /* Шапка окна в одну строку, как в макете: сумма баланса переносится под
     слово «баланс», вкладки чуть уже — иначе ✕ наезжал на сумму. */
  .pwd-tabs > button { padding: 9px 12px; }
  .pwd-bal { flex: none; line-height: 1.3; }
  .pwd-bal > b { display: block; }
  .pwd-b { padding: 18px 22px 22px; }
}

/* ============================================================ ALIVE · ВЫПАДАЮЩИЕ СПИСКИ

   Свой список поверх <select> (dropdown.js): кнопка в стиле фильтров
   апгрейда, пункты — тёмная панель с оранжевой отметкой выбранного. Сам
   <select> спрятан, но остаётся источником значения. */

.dd { position: relative; display: inline-flex; flex: none; }
.dd > select { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 9px 12px; cursor: pointer;
  border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1);
  color: #ececf2; font: 400 var(--fs-label)/1 var(--f-ui); white-space: nowrap;
}
.dd-btn:hover, .dd.open > .dd-btn { border-color: rgba(255, 122, 24, .5); }
.dd-btn > i {
  width: 7px; height: 7px; margin-top: -3px; border: solid #a2a2b2; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); transition: transform .15s;
}
.dd.open > .dd-btn > i { transform: rotate(225deg); margin-top: 3px; }
.dd-list {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 100%; box-sizing: border-box;
  padding: 5px; border-radius: 10px; border: 1px solid rgba(255, 122, 24, .28);
  background: linear-gradient(180deg, rgba(20, 20, 28, .98), rgba(12, 12, 17, .98));
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9), 0 0 24px -10px rgba(255, 122, 24, .5);
  display: flex; flex-direction: column; gap: 2px; animation: praRise .15s ease both;
}
.dd-list > button {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 7px; text-align: left;
  background: transparent; color: #c4c4d0; font: 400 var(--fs-label)/1 var(--f-ui); white-space: nowrap; cursor: pointer;
}
.dd-list > button:hover { background: rgba(255, 255, 255, .06); color: #ececf2; }
.dd-list > button.on { background: rgba(255, 122, 24, .16); color: #ffa838; }
.dd-list > button.on::after { content: "✓"; margin-left: auto; font-size: var(--fs-micro); }
.upa-filters .dd { flex: none; }

/* ============================================================ ALIVE · ЛЕНТА КЕЙСА

   Лента открытия по «Case Open — Alive v2» (cases.js playReels): один
   кейс — металлическая рама с заклёпками и окном-полосой, два кейса — та
   же полоса с двумя метками (30% и 70%), три и больше — барабаны в ряд.
   Ячейка — арт со свечением и полосой редкости; подпись появляется у
   выпавшей после остановки. Префикс rl-. Полос «смаза» поверх ленты на
   время прокрутки (.rl-streak) больше нет: владелец просил убрать
   вертикальные полоски (12.10.2026), заодно ушли и горизонтальные у
   барабанов — это был тот же слой. */

.rl { width: 100%; display: flex; flex-direction: column; gap: 12px; animation: rlPop .4s cubic-bezier(.2, .8, .3, 1) both; }
.rl.vert { flex-direction: row; justify-content: center; align-items: flex-start; gap: 14px; perspective: 1200px; }

.rl-wrap { position: relative; box-sizing: border-box; transition: box-shadow .45s, border-color .45s; }
.rl-wrap.h {
  width: 100%; padding: 17px 20px; border-radius: 22px; border: 1px solid #3c3c49;
  background: linear-gradient(180deg, #2c2c36 0%, #1b1b23 16%, #17171e 84%, #262630 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .65), 0 14px 34px rgba(0, 0, 0, .55);
}
.rl-wrap.v {
  flex: 0 0 var(--cellw); min-width: 0; padding: 10px; border-radius: 20px; border: 1px solid #34343f;
  background: linear-gradient(160deg, #23232d, #101016 58%, #0a0a0e);
  box-shadow: 0 18px 40px -18px #000, inset 0 1px 0 rgba(255, 255, 255, .06);
}
.rl-wrap.v.spin { animation: drumIdle 1.6s ease-in-out infinite; }
.rl-wrap.stopped {
  border-color: color-mix(in srgb, var(--win, #ff7a18) 53%, transparent);
  box-shadow: 0 18px 44px -18px var(--win, #ff7a18), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: rlLand .5s cubic-bezier(.3, 1.5, .5, 1) both;
}
.rl-rivets {
  position: absolute; left: 26px; right: 26px; height: 7px; z-index: 2; pointer-events: none;
  background-image: radial-gradient(circle at 50% 45%, #545464 0 2px, transparent 2.6px),
                    radial-gradient(circle at 50% 62%, rgba(0, 0, 0, .8) 0 2px, transparent 2.6px);
  background-size: 34px 7px; background-position: center;
}
.rl-rivets.t { top: 5px; }
.rl-rivets.b { bottom: 5px; }

.rl-port {
  position: relative; overflow: hidden; width: 100%; height: calc(var(--cellh) + 24px); border-radius: 13px;
  background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .05) 50%, transparent 60%),
              radial-gradient(120% 100% at 50% 50%, #14141c, #06060a 78%);
  box-shadow: inset 0 0 0 1px #000, inset 0 8px 20px rgba(0, 0, 0, .9), inset 0 -6px 16px rgba(0, 0, 0, .8);
}
.rl-wrap.v .rl-port { height: var(--viewh); }
.rl-track { position: absolute; left: 0; top: 12px; display: flex; gap: 6px; will-change: transform; }
.rl-wrap.v .rl-track { top: 0; flex-direction: column; gap: 0; width: 100%; }

.rl-cell {
  position: relative; flex: none; width: var(--cellw); height: var(--cellh); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px;
  transition: opacity .4s;
}
.rl-wrap.v .rl-cell { width: 100%; }
.rl-glow {
  position: absolute; left: 50%; top: 46%; width: 82%; height: 64%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse, var(--rc), transparent 68%); opacity: .3; filter: blur(6px); pointer-events: none;
  transition: opacity .4s;
}
.rl-bar {
  position: absolute; left: 14%; right: 14%; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--rc); box-shadow: 0 0 12px var(--rc); opacity: .55;
}
.rl-art { position: relative; width: 88%; height: calc(var(--cellh) * .74); display: grid; place-items: center; }
/* Картинка прибита к блоку арта абсолютом. В grid с авто-строкой её
   height: 100% не срабатывал — высота бралась из ширины, скин вылезал из
   ячейки и стоял ниже середины окна (в барабанах — не на линии окна). */
.rl-art > img, .rl-art > svg {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 6px var(--rc));
}
.rl-cap { display: none; position: relative; text-align: center; line-height: 1.15; max-width: 100%; }
.rl-cap > small, .rl-cap > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-cap > small { font: 600 var(--fs-cap)/1.15 var(--f-hd); color: #a2a2b2; text-transform: uppercase; letter-spacing: .06em; }
.rl-cap > b { font: 700 var(--fs-label)/1.15 var(--f-hd); color: #fff; text-shadow: 0 0 12px var(--rc); }
.rl-wrap.v .rl-cap > b { font-size: var(--fs-micro); }
.rl-cell.hit { animation: rlHit .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.rl-cell.hit .rl-glow { opacity: .8; }
.rl-cell.hit .rl-bar { opacity: 1; }
.rl-cell.hit .rl-art { height: calc(var(--cellh) * .6); }
.rl-cell.hit .rl-art > img, .rl-cell.hit .rl-art > svg {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px var(--rc));
}
.rl-cell.hit .rl-cap { display: block; }
.rl-wrap.stopped .rl-cell:not(.hit):not(.near) { opacity: .3; }

.rl-fade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, #08080d, transparent 108px, transparent calc(100% - 108px), #08080d);
}
.rl-wrap.v .rl-fade {
  --band: calc((var(--viewh) - var(--cellh)) / 2);
  background: linear-gradient(180deg, #06060a, rgba(6, 6, 10, .35) calc(var(--band) * .88), transparent var(--band),
              transparent calc(100% - var(--band)), rgba(6, 6, 10, .35) calc(100% - var(--band) * .88), #06060a);
}
.rl-glass {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .055) 49%, transparent 60%),
              radial-gradient(120% 96% at 50% 50%, transparent 52%, rgba(0, 0, 0, .5));
}

/* Окно барабана: рамка в ячейку с уголками; на остановке — цвета выпавшего. */
.rl-win {
  position: absolute; left: 0; right: 0; top: 50%; height: var(--cellh); transform: translateY(-50%); z-index: 4;
  pointer-events: none; border-top: 2px solid var(--win, #ff7a18); border-bottom: 2px solid var(--win, #ff7a18);
  opacity: .45; transition: opacity .4s, border-color .4s, box-shadow .4s;
}
.rl-win > b { position: absolute; width: 9px; height: 9px; border: 2px solid var(--win, #ff7a18); }
.rl-win > b:first-child { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.rl-win > b:last-child { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.rl-wrap.stopped .rl-win { opacity: 1; box-shadow: 0 0 26px -6px var(--win), inset 0 0 26px -12px var(--win); }
.rl-burst {
  position: absolute; left: 50%; top: 50%; z-index: 6; pointer-events: none; width: 30px; height: 30px;
  border-radius: 50%; border: 2px solid var(--win, #ff7a18); opacity: 0;
}
.rl-wrap.stopped .rl-burst { animation: rlBurst .8s cubic-bezier(.2, .8, .3, 1) both; }

/* Метка горизонтальной полосы: линия с треугольниками сверху и снизу. */
.rl-mark {
  --mc: #ff7a18;
  position: absolute; top: 10px; bottom: 10px; width: 2px; z-index: 5; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--mc) 16%, var(--mc) 84%, transparent);
  box-shadow: 0 0 18px var(--mc); animation: rlMark 1.2s ease-in-out infinite; transition: background .4s;
}
.rl-mark > b {
  position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent; filter: drop-shadow(0 0 6px var(--mc));
}
.rl-mark > b:first-child { top: -2px; border-top: 11px solid var(--mc); }
.rl-mark > b:last-child { bottom: -2px; border-bottom: 11px solid var(--mc); }

@keyframes rlPop { 0% { opacity: 0; transform: translateY(18px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes rlLand { 0% { transform: translateY(4px) scale(.985); } 100% { transform: none; } }
@keyframes rlHit { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes rlBurst { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(7); } }
@keyframes rlMark { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rl, .rl-wrap, .rl-cell, .rl-burst, .rl-mark { animation: none !important; }
}

/* Телефон: полоса во всю ширину сцены, без рамы. */
@media (max-width: 880px) {
  .rl-wrap.h {
    padding: 8px 0; border-radius: 0; border: 0; border-top: 1px solid rgba(255, 168, 56, .45); border-bottom: 1px solid rgba(255, 168, 56, .45);
    background: linear-gradient(180deg, rgba(8, 8, 12, .94), rgba(14, 14, 20, .96));
    box-shadow: 0 18px 44px -18px #000, inset 0 0 40px -14px rgba(255, 138, 42, .35);
  }
  .rl-rivets { display: none; }
  .rl-wrap.h .rl-port { border-radius: 0; box-shadow: none; background: transparent; }
  .rl-fade { background: linear-gradient(90deg, #08080d, transparent 68px, transparent calc(100% - 68px), #08080d); }
}
@media (max-width: 880px) {
  /* Полоса на телефоне (макет: 150px, ячейка 118×128, подпись у каждой). */
  .rl-wrap.h .rl-port { height: 150px; }
  .rl-wrap.h .rl-track { top: 11px; gap: 6px; }
  .rl-wrap.h .rl-cell {
    gap: 5px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .06);
    background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 12%, transparent), rgba(12, 12, 17, .92));
  }
  .rl-wrap.h .rl-glow { display: none; }
  .rl-wrap.h .rl-bar { left: 0; right: 0; top: 0; bottom: auto; border-radius: 0; box-shadow: none; }
  .rl-wrap.h .rl-art, .rl-wrap.h .rl-cell.hit .rl-art { width: 86%; height: 64px; }
  .rl-wrap.h .rl-cap { display: block; }
  .rl-wrap.h .rl-cap > small { font: 600 9px/1 var(--f-ui); letter-spacing: .05em; color: #8a8a9a; text-transform: uppercase; }
  .rl-wrap.h .rl-cap > b { font: 700 var(--fs-cap)/1 var(--f-hd); color: #ececf2; text-shadow: none; }
  .rl-wrap.h .rl-mark { top: 0; bottom: 0; }
  .rl-wrap.h .rl-mark > b { display: none; }
  #casePriceM { gap: 0; }
  #casePriceM > i { margin-right: 4px; }
}

/* Телефон, 2–5 кейсов: колонки-барабаны в одной панели (образец владельца,
   2026-09-30). Над каждой колонкой номер кейса, строка выигрыша — в рамке,
   по бокам панели на её высоте стрелки, над панелью — сам кейс. Горизонтальная
   полоса показывала только первый выпавший предмет. Высоту ячейки (--cellh)
   и окна колонки (--viewh) ставит playReels от ширины панели, а не от числа
   кейсов: панель одной высоты при двух и при пяти. Класс .cols ставится
   только на телефоне, поэтому правила без медиа-запроса. */
/* Колонка не шире 2.4 высоты ячейки: при двух-трёх кейсах панель сужается
   (--n ставит playReels), иначе ячейка превращалась в плоскую полосу. */
.rl.cols {
  --numh: 26px; --pad: 6px;
  position: relative; box-sizing: border-box; margin: 0 auto; padding: var(--pad);
  max-width: min(560px, calc(var(--n, 5) * var(--cellh) * 2.4 + (var(--n, 5) - 1) * 4px + 2 * var(--pad) + 2px));
  gap: 4px; perspective: none; border: 1px solid rgba(255, 138, 42, .55); border-radius: 8px;
  background: linear-gradient(180deg, rgba(14, 14, 20, .95), rgba(8, 8, 12, .97));
  box-shadow: 0 18px 44px -18px #000, 0 0 22px -6px rgba(255, 122, 24, .45), inset 0 0 30px -12px rgba(255, 138, 42, .35);
}
/* Стрелки на строке выигрыша: по центру окна колонки, под номерами
   (1px — верхняя рамка колонки). */
.rl.cols::before, .rl.cols::after {
  content: ''; position: absolute; z-index: 7; top: calc(var(--pad) + 1px + var(--numh) + var(--viewh) / 2);
  width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  transform: translateY(-50%); filter: drop-shadow(0 0 6px rgba(255, 122, 24, .9)); pointer-events: none;
}
.rl.cols::before { left: -1px; border-left: 8px solid #ff9a2e; }
.rl.cols::after { right: -1px; border-right: 8px solid #ff9a2e; }
/* Высота постоянная: над панелью до переключателя «Демо режим» ~80 px на
   любой ширине телефона (отступ сцены сверху — 52 px). */
.rl-case {
  position: absolute; left: 50%; bottom: calc(100% - 4px); height: 76px; aspect-ratio: 1.3;
  transform: translateX(-50%); pointer-events: none;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .8)) drop-shadow(0 0 22px color-mix(in srgb, var(--ac, #ff7a18) 45%, transparent));
}
.rl-case > *, .rl-case img, .rl-case svg { width: 100%; height: 100%; max-width: none; object-fit: contain; }

.rl.cols .rl-wrap.v {
  flex: 1 1 0; min-width: 0; padding: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, rgba(24, 24, 34, .85), rgba(10, 10, 16, .85)); box-shadow: none;
}
.rl.cols .rl-wrap.v.spin { animation: none; }
.rl.cols .rl-wrap.stopped {
  border-color: color-mix(in srgb, var(--win, #ff7a18) 45%, transparent); box-shadow: 0 0 16px -8px var(--win, #ff7a18);
}
.rl-num {
  position: relative; display: grid; place-items: center; box-sizing: border-box; width: 26px; height: 19px;
  margin: 3px auto 4px; border-radius: 6px; border: 1.5px solid #ff9a2e; background: #1c1108; color: #ffb347;
  font: 700 var(--fs-cap)/1 var(--f-hd); font-variant-numeric: tabular-nums; box-shadow: 0 0 10px -2px rgba(255, 122, 24, .7);
}
.rl-num::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ff9a2e;
}
.rl.cols .rl-port { height: var(--viewh); border-radius: 4px; background: transparent; box-shadow: none; }
.rl.cols .rl-cell { padding: 3px 4px; gap: 0; }
.rl.cols .rl-cell::before {
  content: ''; position: absolute; inset: 2px 3px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .05);
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 72%),
              linear-gradient(180deg, #151829, #0c0d18);
}
.rl.cols .rl-glow, .rl.cols .rl-bar, .rl.cols .rl-cap, .rl.cols .rl-glass { display: none; }
.rl.cols .rl-art, .rl.cols .rl-cell.hit .rl-art { width: 86%; height: calc(var(--cellh) * .78); }
.rl.cols .rl-win {
  left: 3px; right: 3px; height: calc(var(--cellh) - 4px); border: 2px solid var(--win, #ff9a2e); border-radius: 6px;
  opacity: 1; box-shadow: 0 0 12px -2px var(--win, #ff7a18), inset 0 0 14px -6px var(--win, #ff7a18);
}
.rl.cols .rl-win > b { display: none; }
/* Кольцо остановки — под узкую колонку: 30 px × 7 выходили за неё вдвое. */
.rl.cols .rl-burst { width: 12px; height: 12px; }
.rl.cols .rl-fade { background: linear-gradient(180deg, rgba(8, 8, 12, .8), transparent 26%, transparent 74%, rgba(8, 8, 12, .8)); }

/* Содержимое кейса: «ПРОМЫШЛЕННОЕ» и «ЗАСЕКРЕЧЕННОЕ» не влезали в строку с
   ценой и обрезались многоточием — подпись редкости чуть мельче и уже. */
.copen-item-f span { font-size: 10px; letter-spacing: .03em; flex: 1 1 auto; }
.copen-item-f b { flex: none; }

/* ============================================================ ALIVE · ПОПОЛНЕНИЕ (ПК)

   Окно пополнения по макету кабинета (Profile — Alive v2, вкладка
   «Пополнить»): шапка общая с окном вывода (.pwd), тело — две колонки
   1fr / 250px: слева способ, сумма, провайдер или сеть и промокод, справа
   «К оплате» с кнопкой либо реквизиты крипты с QR. На телефоне — одна
   колонка. Префикс dpa-; старые dep-* классы переиспользованы там, где
   разметка та же (сумма, промокод, сводка). */

.dpa-cols { display: grid; grid-template-columns: 1fr 250px; }
.dpa-l {
  display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.dpa-r { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 22px; min-width: 0; background: rgba(8, 8, 10, .35); }
.dpa .dep-k { font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.dpa .dep-k > small { text-transform: none; letter-spacing: 0; color: #4a4a58; }
.dpa-ways {
  display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; align-self: flex-start;
  background: rgba(8, 8, 10, .6); border: 1px solid rgba(255, 255, 255, .06);
}
.dpa-ways > .dep-seg-b {
  display: flex; align-items: center; gap: 7px; min-height: 0; padding: 8px 14px; border-radius: 7px;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: 0;
}
.dpa-ways > .dep-seg-b > i { font-style: normal; font-size: var(--fs-label); }
.dpa-ways > .dep-seg-b:hover { color: #ececf2; }
.dpa-ways > .dep-seg-b.on { background: rgba(255, 122, 24, .18); color: #ffa838; }
.dpa-amts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dpa-amts > .dep-amt {
  min-height: 0; padding: 11px 0; border-radius: 9px; cursor: pointer; transition: all .15s;
  background: rgba(8, 8, 10, .6); border: 1px solid #26262f; color: #a2a2b2;
  font: 700 var(--fs-ui)/1 var(--f-hd); font-variant-numeric: tabular-nums;
}
.dpa-amts > .dep-amt:hover { border-color: rgba(255, 122, 24, .6); color: #ececf2; }
.dpa-amts > .dep-amt.on {
  background: linear-gradient(180deg, rgba(255, 122, 24, .22), rgba(255, 122, 24, .08));
  border-color: rgba(255, 122, 24, .6); color: #ffa838; box-shadow: 0 0 18px -6px rgba(255, 122, 24, .7);
}
.dpa-own {
  display: flex; align-items: center; gap: 8px; height: 46px; box-sizing: border-box; margin: 0; padding: 0 14px;
  border-radius: 10px; background: rgba(8, 8, 10, .75); border: 1px solid #26262f; transition: border-color .2s;
}
.dpa-own.on, .dpa-own:focus-within { border-color: rgba(255, 122, 24, .6); }
.dpa-own > span { color: var(--tx-3); font: 700 16px/1 var(--f-hd); }
#modal .dpa-own > input {
  flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none;
  background: transparent; color: #ececf2; font: 700 16px/1.5 var(--f-ui); font-variant-numeric: tabular-nums;
}
.dpa-own > small { font-size: var(--fs-micro); color: var(--tx-3); white-space: nowrap; }
/* Провайдеры — три карточки в ряд, как в макете. */
.dpa .dep-pvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dpa .dep-pv {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border-radius: 10px;
  cursor: pointer; text-align: left; background: rgba(8, 8, 10, .6); border: 1px solid #26262f; color: #a2a2b2; transition: all .15s;
}
.dpa .dep-pv:hover { border-color: rgba(255, 122, 24, .5); }
.dpa .dep-pv.on { background: linear-gradient(180deg, rgba(255, 122, 24, .22), rgba(255, 122, 24, .08)); border-color: rgba(255, 122, 24, .6); color: #ececf2; }
.dpa .dep-pv-chip { width: 18px; height: 12px; border-radius: 3px; }
.dpa .dep-pv-tx { display: contents; }
.dpa .dep-pv-tx b { display: flex; align-items: center; gap: 6px; font: 700 var(--fs-ui)/1 var(--f-hd); }
.dpa .dep-pv-tx span { font: 600 10px/1.3 var(--f-ui); color: var(--tx-3); }
.dpa .dep-pv-dot { display: none; }
.dpa .dep-note { font-size: var(--fs-micro); color: var(--tx-3); }
/* Сети — чипы с точкой сети, монета и сеть, как в макете. */
.dpa .dep-nets { display: flex; flex-wrap: wrap; gap: 6px; }
.dpa .dep-net {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; cursor: pointer; transition: all .15s;
  background: rgba(8, 8, 10, .6); border: 1px solid #26262f; color: #a2a2b2; font: 700 var(--fs-ui)/1 var(--f-hd);
}
.dpa .dep-net:hover { border-color: rgba(255, 122, 24, .5); }
.dpa .dep-net.on { background: linear-gradient(180deg, rgba(255, 122, 24, .22), rgba(255, 122, 24, .08)); border-color: rgba(255, 122, 24, .6); color: #ececf2; }
.dpa .dep-net > i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #ffa838); box-shadow: 0 0 8px var(--dot, #ffa838); }
.dpa .dep-net > span { font: 600 var(--fs-cap)/1 var(--f-hd); color: var(--tx-3); }
/* Промокод. */
.dpa-promo { display: flex; gap: 6px; }
#modal .dpa-promo > input {
  flex: 1; min-width: 0; width: auto; height: 40px; box-sizing: border-box; margin: 0; padding: 0 12px; border-radius: 9px;
  background: rgba(8, 8, 10, .75); border: 1px solid #26262f; outline: none; box-shadow: none; color: #ececf2;
  font: 700 var(--fs-cap)/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
}
#modal .dpa-promo > input:focus { border-color: #ff7a18; }
.dpa-promo > button {
  height: 40px; padding: 0 14px; border-radius: 9px; cursor: pointer; flex: none;
  border: 1px solid rgba(255, 122, 24, .5); background: rgba(255, 122, 24, .1); color: #ffa838; font: 700 var(--fs-ui)/1 var(--f-hd);
}
.dpa-promo > button:hover { background: rgba(255, 122, 24, .2); }
.dpa .dep-pmsg { min-height: 16px; font-size: var(--fs-cap); color: #4a4a58; }
.dpa .dep-pmsg.ok { color: #7ce4ae; }
.dpa .dep-pmsg.bad { color: #eb4b4b; }
/* Сводка справа. */
.dpa .dep-sum { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-cap); }
.dpa .dep-row { display: flex; justify-content: space-between; color: #a2a2b2; font: 400 var(--fs-cap)/1.4 var(--f-ui); }
.dpa .dep-row b { color: #ececf2; font-variant-numeric: tabular-nums; }
.dpa .dep-rule { height: 0; border-top: 1px dashed rgba(255, 255, 255, .1); margin: 2px 0; }
.dpa .dep-row.tot > span { font-weight: 600; font-family: var(--f-hd); color: #ececf2; }
.dpa .dep-row.tot b { color: #ffa838; font-size: 18px; text-shadow: 0 0 12px rgba(255, 122, 24, .5); }
.dpa-cta { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.dpa .dep-cta {
  position: relative; overflow: hidden; width: 100%; padding: 15px; border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #ffa838, #ff5c00); color: #180a00; font: 700 var(--fs-body)/1 var(--f-hd);
  letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 30px -8px rgba(255, 92, 0, .65);
}
.dpa .dep-cta:hover { filter: brightness(1.08); }
.dpa .dep-cta:disabled { opacity: .5; filter: none; cursor: default; }
.dpa-cta > small { font-size: var(--fs-micro); line-height: 1.4; color: var(--tx-3); text-align: center; }
.dpa-cta > small:empty { display: none; }
/* Реквизиты крипты: QR крупно по центру, адрес с кнопкой, суммы. */
.dpa-addr .dep-addr { display: flex; flex-direction: column; gap: 10px; }
.dpa-addr .dep-addr-main { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
.dpa-addr .dep-qr {
  align-self: center; width: 176px; height: 176px; box-sizing: border-box; padding: 10px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 122, 24, .35), 0 0 40px -10px rgba(255, 122, 24, .6);
}
.dpa-addr .dep-addr-k { font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.dpa-addr .dep-addr-row {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px;
  background: rgba(8, 8, 10, .75); border: 1px solid #26262f;
}
.dpa-addr .dep-addr-row code {
  flex: 1; min-width: 0; font: 600 var(--fs-micro)/1.3 var(--f-hd); color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dpa-addr .dep-copy {
  flex: none; padding: 5px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(255, 122, 24, .4); background: rgba(255, 122, 24, .1); color: #ffa838; font: 700 var(--fs-label)/1 var(--f-hd);
}
.dpa-addr .dep-addr-li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-cap); color: #a2a2b2; }
.dpa-addr .dep-addr-li b { color: #ececf2; font-variant-numeric: tabular-nums; }
.dpa-addr .dep-addr-li > span:last-child { color: #a2a2b2; text-align: right; }
.dpa-addr .cp-warn, .dpa-addr .cp-also { margin: 0; font-size: var(--fs-micro); line-height: 1.4; color: var(--tx-3); }
.dpa-addr .cp-warn b, .dpa-addr .cp-also b { color: #a2a2b2; }
.dpa .dep-msg { text-align: center; font: 600 var(--fs-cap)/1.3 var(--f-ui); color: #7ce4ae; }
.dpa .dep-msg.warn { color: #ffd23b; }
.dpa .dep-msg.err { color: #eb4b4b; }
/* Цена в сводке и на кнопке — слитно: у старых .dep-row b и .dep-cta стоит gap. */
.dpa .dep-row b, .dpa .dep-cta, .dpa .dpa-cta { gap: 0; }
.dpa .dep-cta { display: block; }

/* Окно пополнения — в той же рамке, что окно вывода. */
.modal:has(.dpa) { width: 860px; max-width: calc(100vw - 40px); }

/* «Светлячки» напротив игр в меню убраны по просьбе владельца. */
.nav-live, .nav-dot { display: none !important; }

@media (max-width: 880px) {
  .dpa-cols { grid-template-columns: 1fr; }
  .dpa-l { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 16px 16px 18px; }
  .dpa-r { padding: 16px 16px 20px; }
  .dpa-amts { grid-template-columns: repeat(3, 1fr); }
  .modal:has(.dpa) { width: 100%; max-width: calc(100vw - 40px); }
}

/* ============================================================ ALIVE · АПГРЕЙДЕР · ПОДГРУЗКА И МОЛНИЯ

   Цели догружаются по скроллу (макет: «Загружаем ещё…» у нижнего края
   сетки), справа от множителя — молния быстрой прокрутки. */
.upa-loading {
  position: absolute; left: 0; right: 8px; bottom: 10px; z-index: 1; text-align: center;
  font: 600 var(--fs-cap)/1 Inter, sans-serif; color: var(--tx-3); pointer-events: none;
}
.upa-loading[hidden] { display: none !important; }
.upa-prow .preset-fast {
  width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 999px; display: grid; place-items: center;
  cursor: pointer; font-size: 20px; line-height: 1; color: #8a8a9a;
  border: 1px solid rgba(255, 122, 24, .22);
  background: linear-gradient(90deg, rgba(255, 122, 24, .16), rgba(20, 20, 28, .9) 45%, rgba(14, 14, 20, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: transform .15s, box-shadow .2s, color .2s;
}
.upa-prow .preset-fast:hover { transform: scale(1.06); color: #ffa838; }
.upa-prow .preset-fast.on {
  color: #ffd23b; border-color: rgba(255, 168, 56, .9);
  background: radial-gradient(circle at 50% 30%, #2a1a10, #0c0c11);
  box-shadow: 0 0 18px rgba(255, 122, 24, .55), inset 0 0 12px rgba(255, 122, 24, .25);
  text-shadow: 0 0 10px rgba(255, 168, 56, .9);
}
@media (prefers-reduced-motion: reduce) {
  .upa-prow .preset-fast, .upa-prow .preset-fast:hover { transition: none; transform: none; }
}
@media (max-width: 880px) {
  /* Телефон: молния в одном ряду с множителями, справа, в их же стиле. */
  .upa-prow { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
  .upa-prow .preset-grp.ch { display: none; }
  .upa-prow .preset-fast {
    width: 46px; height: 46px; border-radius: 12px; font-size: 18px; color: #a2a2b2;
    border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); box-shadow: none;
  }
  .upa-prow .preset-fast:hover { transform: none; }
  .upa-prow .preset-fast.on { color: #ffa838; border-color: rgba(255, 168, 56, .9); background: rgba(255, 122, 24, .16); box-shadow: none; }
}

/* Колесо: подпись промокода в ячейке короче монетной — «Код $0.25». */
.wha-it.coins > b.sm { font-size: 3cqw; white-space: nowrap; }

/* ============================================================ ALIVE · ПАРТНЁРКА (ЛЕНДИНГ)

   Страница «Партнёрка» по макету Partners - Alive: hero с заголовком
   Unbounded, форматы и ставки, «как это работает» с сундуком, четыре
   преимущества, «Готов начать?» с маскотом. Числа — из инлайн-стилей макета;
   таблица десктоп/мобиль — из renderVals (mob). Фон #07070a на всю ширину
   контента, как у колеса. */
.pta [hidden] { display: none !important; }
.pta {
  position: relative; min-width: 0; overflow: hidden; box-sizing: border-box;
  margin: calc(-1 * var(--content-top, 20px)) -20px -20px;
  background: #07070a; color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui);
}
.pta-hero { position: relative; width: 100%; height: 720px; overflow: hidden; }
.pta-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 30%;
}
.pta-hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 7, 10, 0) 35%, rgba(7, 7, 10, .55) 68%, #07070a 100%);
}
.pta-hero-tx {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: 0 24px 56px; gap: 6px;
}
.pta-h1, .pta-h1s {
  margin: 0; text-transform: uppercase; transform: skewX(-10deg);
  background: linear-gradient(90deg, #ffffff 0%, #fff3e4 45%, #ffc98a 75%, #ffa838 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pta-h1 {
  font: 900 72px/1 Unbounded, var(--f-hd); letter-spacing: -.01em; padding-right: .12em;
  filter: drop-shadow(0 0 22px rgba(255, 122, 24, .5)) drop-shadow(0 10px 22px rgba(0, 0, 0, .9));
}
.pta-h1s {
  font: 800 19px/1 Unbounded, var(--f-hd); letter-spacing: .34em; padding-left: .34em; margin-top: 6px;
  filter: drop-shadow(0 0 16px rgba(255, 122, 24, .5)) drop-shadow(0 2px 10px rgba(0, 0, 0, .9));
}
.pta-hero-p {
  margin: 12px 0 0; max-width: 620px; font-size: var(--fs-body); line-height: 1.55; color: #e4e4ee;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .95); text-wrap: pretty;
}
.pta-cta, .pta-cta2 {
  display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  border-radius: 8px; letter-spacing: .12em; text-transform: uppercase; color: #180a00;
  background: linear-gradient(135deg, #ffb23d, #ff7a18 60%, #ff5c00); transition: filter .15s;
}
.pta-cta {
  margin-top: 18px; padding: 15px 34px; font: 700 var(--fs-body)/1 var(--f-hd);
  box-shadow: 0 0 26px rgba(255, 122, 24, .5), 0 8px 24px rgba(0, 0, 0, .5);
}
.pta-cta2 {
  margin-top: auto; align-self: flex-start; position: relative; z-index: 3; gap: 26px;
  padding: 14px 24px; font: 700 var(--fs-ui)/1 var(--f-hd); box-shadow: 0 0 22px rgba(255, 122, 24, .4);
}
.pta-cta2 > i { font-style: normal; font-size: 18px; line-height: 1; }
.pta-cta:hover, .pta-cta2:hover, .pta-cta:focus-visible, .pta-cta2:focus-visible { filter: brightness(1.08); color: #180a00; }
.pta-body {
  position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box;
  padding: 48px 32px 64px; display: flex; flex-direction: column; gap: 40px;
}
.pta-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.pta-h2 { margin: 0; font: 700 38px/1.05 var(--f-hd); color: #ececf2; letter-spacing: .01em; }
.pta-h2 > span, .pta-ready-tx h2 > span { color: #ffa838; text-shadow: 0 0 18px rgba(255, 122, 24, .45); }
.pta-content > p { margin: 0; max-width: 640px; font-size: var(--fs-body); line-height: 1.6; color: #b8b8c6; text-wrap: pretty; }
.pta-socials { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.pta-socials > span {
  width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center;
  background: #0e0e13; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); overflow: hidden;
}
.pta-socials img { width: 52px; height: 52px; object-fit: contain; }
.pta-socials > .more img { width: 30px; height: 30px; }
.pta-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.pta-card {
  display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(16, 16, 22, .96), rgba(11, 11, 15, .96));
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); min-width: 0;
}
.pta-card > h3 { margin: 0 0 4px; font: 700 22px/1.1 var(--f-hd); color: #ececf2; position: relative; z-index: 3; }
.pta-rates-list { display: flex; flex-direction: column; gap: 10px; }
.pta-rate {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 122, 24, .28); background: rgba(20, 20, 27, .8); transition: border-color .15s;
}
.pta-rate:hover { border-color: rgba(255, 122, 24, .6); }
.pta-rate > .ic, .pta-feat > .ic { flex: none; border-radius: 9px; display: grid; place-items: center; background: #0d0d12; }
.pta-rate > .ic { width: 44px; height: 44px; }
.pta-rate > .ic img { width: 32px; height: 32px; object-fit: contain; }
.pta-rate > .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pta-rate > .tx > b { font: 700 16px/1.2 var(--f-hd); color: #ececf2; }
.pta-rate > .tx > small { font-size: var(--fs-cap); color: #8a8a9a; }
.pta-rate > .pr { flex: none; font: 700 24px/1 var(--f-hd); color: #ffa838; text-shadow: 0 0 14px rgba(255, 122, 24, .5); }
.pta-how { position: relative; overflow: hidden; }
.pta-chest {
  position: absolute; right: -6%; top: -6%; bottom: -6%; width: 48%; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .85));
}
.pta-chest > img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 58% 50%, #000 40%, rgba(0, 0, 0, .55) 60%, transparent 82%);
  mask-image: radial-gradient(ellipse 55% 60% at 58% 50%, #000 40%, rgba(0, 0, 0, .55) 60%, transparent 82%);
}
.pta-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 62%; position: relative; z-index: 3; }
.pta-steps > li { display: flex; align-items: flex-start; gap: 14px; }
.pta-steps .n {
  flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, #ffb23d, #ff5c00); color: #180a00; font: 700 17px/1 var(--f-hd);
  box-shadow: 0 0 14px rgba(255, 122, 24, .45);
}
.pta-steps .t { font-size: var(--fs-ui); line-height: 1.5; color: #d6d6e0; padding-top: 6px; text-wrap: pretty; }
.pta-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pta-feat {
  display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 12px; min-width: 0;
  border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(16, 16, 22, .96), rgba(11, 11, 15, .96)); transition: border-color .15s;
}
.pta-feat:hover { border-color: rgba(255, 122, 24, .45); }
.pta-feat > .ic { width: 52px; height: 52px; border-radius: 10px; }
.pta-feat > .ic img { width: 36px; height: 36px; object-fit: contain; }
.pta-feat > .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pta-feat > .tx > b { font: 700 var(--fs-ui)/1.2 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #ececf2; }
.pta-feat > .tx > small { font-size: var(--fs-cap); color: #9a9aaa; line-height: 1.3; }
.pta-ready { position: relative; border-radius: 16px; min-height: 300px; display: flex; align-items: center; justify-content: center; margin-top: 30px; }
.pta-ready-bg {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 122, 24, .28);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); background: #0a0a0e;
}
.pta-ready-bg > img { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; }
.pta-ready-bg > .l { left: 0; width: 62%; object-position: 0% 50%; }
.pta-ready-bg > .r {
  right: 0; width: 55%; object-position: 100% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.pta-ready-bg > .s1, .pta-ready-bg > .s2 { position: absolute; inset: 0; pointer-events: none; }
.pta-ready-bg > .s1 { background: linear-gradient(90deg, rgba(7, 7, 10, .2) 0%, rgba(7, 7, 10, .8) 30%, rgba(7, 7, 10, .9) 50%, rgba(7, 7, 10, .8) 70%, rgba(7, 7, 10, .15) 100%); }
.pta-ready-bg > .s2 { background: radial-gradient(ellipse 45% 90% at 50% 50%, rgba(7, 7, 10, .7), transparent 100%); }
.pta-ready-tx {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 40px 32% 40px 30%; width: 100%; box-sizing: border-box;
}
.pta-ready-tx > h2 { margin: 0; font: 700 38px/1 var(--f-hd); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .9); }
.pta-ready-tx > p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: #e4e4ee; text-shadow: 0 1px 10px rgba(0, 0, 0, .95); text-wrap: pretty; max-width: 460px; }
.pta-ready-tx > .pta-cta { margin-top: 10px; white-space: nowrap; }
.pta-mascot {
  position: absolute; z-index: 3; left: 1px; top: -53px; width: 539px; height: 346px; max-width: none;
  display: block; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .8));
}

@media (max-width: 880px) {
  /* Поле контента на телефоне 12px, а не 20: с -20px лендинг был шире
     экрана на 16px и заходил под шапку — текст героя переносился и
     стоял не как в макете. */
  .pta { margin: -12px; }
  .pta-hero { height: 560px; }
  .pta-hero-tx { padding-bottom: 36px; }
  .pta-h1 { font-size: 38px; }
  .pta-h1s { font-size: var(--fs-cap); }
  .pta-h2, .pta-ready-tx > h2 { font-size: 30px; }
  .pta-body { padding: 28px 14px 40px; gap: 28px; }
  .pta-two, .pta-feats { grid-template-columns: 1fr; }
  .pta-chest { width: 46%; }
  .pta-steps { max-width: 100%; }
  .pta-ready { min-height: 540px; margin-top: 40px; }
  .pta-ready-bg > .l { width: 100%; }
  .pta-ready-bg > .r { display: none; }
  .pta-ready-tx { padding: 32px 20px 250px; justify-content: flex-start; }
  .pta-mascot { left: 50%; top: auto; bottom: 0; width: 340px; height: 218px; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pta-cta, .pta-cta2, .pta-rate, .pta-feat { transition: none; }
}

/* ============================================================ ALIVE · ЛИДЕРЫ И ПРОПУСК ВО ВЕСЬ ЭКРАН

   По просьбе владельца (2026-09-16): сцена лидеров и пропуска чуть шире —
   без поля 20px от сайдбара, до правого края, и вплотную к шапке. Высота
   сцены — как в макете. */
.lba, .bpp { width: auto; max-width: none; margin: calc(-1 * var(--content-top, 20px)) 0 0 -20px; }
@media (max-width: 880px) {
  .lba, .bpp { margin: -12px -12px 0; }
}

/* ============================================================ ALIVE · АВАТАРЫ В СТАВКАХ РАУНДА И ТОПЕ

   В «Ставках на раунд» и «Топе выигрышей» кружок игрока был буквой на
   цветном фоне. Теперь в нём стоит аватар Steam, а буква осталась подложкой
   на случай, если картинка не доедет: размер, скругление и свечение кружка
   при этом не трогаем — они заданы выше и у пьедестала свои. */

.bba-ava, .rat-ava { position: relative; overflow: hidden; }
.bba-ava img, .rat-ava img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ============================================================ ALIVE · ИТОГ ОТКРЫТИЯ КЕЙСОВ

   Строка под выпавшим, когда кейсов открыли сразу несколько: «Выпало на
   $3.80». В макете её нет, но и открытия пятёркой там нет тоже. Место — в
   потоке сцены между выпавшим и выбором количества, поэтому ни на что не
   наезжает и уезжает вместе с карточками.

   Телефонной ветки здесь нет, и это не забывчивость: на телефоне кейсы
   открываются по одному (doOpen жёстко ставит count = 1, выбора количества
   в макете там нет), а одному кейсу строка не положена. */

.copen-sum {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(12, 12, 18, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 var(--fs-label)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #8a8a9a;
  animation: copSumIn .35s ease both .25s;
}
/* display выше перебил бы [hidden] из таблицы браузера. */
.copen-sum[hidden] { display: none; }
.copen-sum b {
  font: 700 18px/1 var(--f-hd); letter-spacing: 0; color: #ececf2; font-variant-numeric: tabular-nums;
}

@keyframes copSumIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .copen-sum { animation: none; } }

/* ============================================================ ALIVE · СЕЗОННАЯ РАМКА

   Пять стадий одной сезонной рамки. Стадия приходит с сервера полем
   frame_stage и равна номеру старшей забранной витрины: 10-й уровень —
   первая, 50-й — пятая.

   ЭТО ПЛЕЙСХОЛДЕРЫ. Ассеты рамки — отдельная задача дизайна, а до неё
   стадии различаются тем, чем их вообще можно различить в кружке 26
   пикселей: ЦВЕТОМ и СИЛУЭТОМ кольца, а не деталями внутри. Силуэт растёт
   от одного тонкого кольца к тройному с просветом, цвет идёт по маршруту
   сезона — от холодной орбиты к жёлтой Бурмалде.

   Кольцо нарисовано box-shadow, а не border или вложенным элементом. Border
   съел бы размер кружка (у него box-sizing разный в разных местах ленты), а
   вложенный элемент обрезался бы overflow: hidden, который кружку нужен под
   фотографию. Тень же не занимает места, повторяет border-radius сама и не
   обрезается собственным overflow элемента.

   Класс вешается на ДВА разных элемента: на кружок аватара (.ava-ball) и на
   отдельное кольцо .sf-ring внутри рамки лояльности. На саму .ava-frame его
   вешать нельзя — у тиров там свои box-shadow, и второй на том же элементе
   молча отменил бы первый. */

/* Кружок аватара — общая разметка всех мест, где он стоит: буква-подложка
   снизу, фотография поверх. Классы места (.bb-ava, .bba-ava, .rat-ava)
   задают размер и скругление, а это правило — устройство. */
.ava-ball {
  position: relative; overflow: hidden; flex: none;
  display: grid; place-items: center;
}
.ava-ball > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Компактная строка ставок: до этой правки .bb-ava был самой картинкой, и
   размер с фоном заданы на нём. Теперь это обёртка, и картинке внутри
   нужно те же 100%. */
.bb-ava.ava-ball { background: var(--panel-3); }

:root {
  --sf-1: #6f8cb5;
  --sf-2: #4fc3b0;
  --sf-3: #a06bff;
  --sf-4: #ff6a3d;
  --sf-5: #ffd24a;
}

.bp-season-frame { --sf-c: var(--sf-1); --sf-w: 2px; }
.bp-season-frame.s-1 { --sf-c: var(--sf-1); --sf-w: 2px;
  box-shadow: 0 0 0 var(--sf-w) var(--sf-c), 0 0 10px -3px var(--sf-c); }
.bp-season-frame.s-2 { --sf-c: var(--sf-2); --sf-w: 2px;
  box-shadow: 0 0 0 var(--sf-w) var(--sf-c), 0 0 0 calc(var(--sf-w) + 2px) rgba(10, 12, 18, .9),
              0 0 0 calc(var(--sf-w) + 3px) var(--sf-c), 0 0 12px -3px var(--sf-c); }
.bp-season-frame.s-3 { --sf-c: var(--sf-3); --sf-w: 3px;
  box-shadow: 0 0 0 var(--sf-w) var(--sf-c), 0 0 0 calc(var(--sf-w) + 2px) rgba(10, 12, 18, .9),
              0 0 0 calc(var(--sf-w) + 3px) var(--sf-c), 0 0 14px -3px var(--sf-c); }
.bp-season-frame.s-4 { --sf-c: var(--sf-4); --sf-w: 3px;
  box-shadow: 0 0 0 var(--sf-w) var(--sf-c), 0 0 0 calc(var(--sf-w) + 2px) rgba(10, 12, 18, .9),
              0 0 0 calc(var(--sf-w) + 4px) var(--sf-c),
              0 0 0 calc(var(--sf-w) + 6px) rgba(10, 12, 18, .9),
              0 0 0 calc(var(--sf-w) + 7px) var(--sf-c), 0 0 16px -3px var(--sf-c); }
.bp-season-frame.s-5 { --sf-c: var(--sf-5); --sf-w: 3px;
  box-shadow: 0 0 0 var(--sf-w) var(--sf-c), 0 0 0 calc(var(--sf-w) + 2px) rgba(10, 12, 18, .9),
              0 0 0 calc(var(--sf-w) + 4px) var(--sf-c),
              0 0 0 calc(var(--sf-w) + 6px) rgba(10, 12, 18, .9),
              0 0 0 calc(var(--sf-w) + 7px) var(--sf-c), 0 0 18px -2px var(--sf-c);
  animation: sf-pulse 2.8s ease-in-out infinite;
}

/* Стадия 5 — единственная анимированная: финал сезона. Пульсирует свечение,
   а не размер: растущее кольцо толкало бы соседние строки ленты. */
@keyframes sf-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35) saturate(1.15); }
}

/* Игрок попросил не двигать — не двигаем. Кольцо остаётся, статичным
   кадром: оно несёт информацию, а не украшает. */
@media (prefers-reduced-motion: reduce) {
  .bp-season-frame.s-5 { animation: none; filter: brightness(1.1); }
}

/* Кольцо внутри рамки лояльности: тонкий обод чуть снаружи кольца тира.
   Своим элементом — см. шапку секции. */
.ava-frame .sf-ring {
  position: absolute; inset: calc(var(--afw) * -1.8);
  border-radius: inherit; z-index: 3; pointer-events: none;
}

/* Кабинет: кружок вокруг большого аватара. Размер и скругление у него свои,
   заданы страницей, — здесь только то, что нужно кольцу. */
#meAva .me-ava-ball {
  width: 100%; height: 100%; border-radius: inherit;
}

/* ============================================================ ALIVE · БЫСТРЫЙ СТАРТ ПАССА

   Блок «Быстрый старт» над ежедневными заданиями: четыре разовых шага
   настройки аккаунта, по уровню за каждый. Живёт внутри той же карточки
   заданий и переиспользует её строки (.bpp-task и всё, что внутри), потому
   что это те же задания — только выдаваемые раз в сезон.

   Своё здесь ровно три вещи: отбивка от ежедневных, галочка состояния
   вместо полосы прогресса (условие двоичное — «привязал ссылку» не бывает
   выполненным наполовину) и подпись, что именно надо сделать. */

.bpp-quick {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 10px; margin-bottom: 2px;
  border-bottom: 1px dashed rgba(255, 210, 59, .28);
}
.bpp-quick .bpp-tasks-h span { color: #ffd23b; }

.bpp-quick-task { border-color: rgba(255, 210, 59, .22); }
.bpp-quick-task.done { border-color: rgba(255, 210, 59, .5); }
.bpp-quick-task.done .bpp-task-top b { color: #ffd23b; }
.bpp-quick-task .bpp-task-top span { color: #ffd23b; }

.bpp-quick-mark {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 10px/1 var(--f-hd); color: #8a8a9a;
  border: 1px solid rgba(255, 255, 255, .14);
}
.bpp-quick-task.done .bpp-quick-mark {
  color: #180a00; border-color: transparent;
  background: linear-gradient(135deg, #ffd23b, #ffa838);
}

/* Подпись занимает всю строку до кнопки: у ежедневных на этом месте полоса
   прогресса, и flex: 1 здесь ровно затем, чтобы кнопка «Забрать» встала
   там же, где у них. */
.bpp-quick-note {
  flex: 1; min-width: 0; white-space: normal !important;
  font: 400 var(--fs-micro)/1.35 var(--f-ui); color: #8a8a9a;
}

/* ============================================================ ALIVE · ПАСС · УСЛОВИЕ АККАУНТА

   Карточка уровня, которую держит не уровень, а незакрытое условие
   аккаунта: не привязана трейд-ссылка или не подтверждён аккаунт. Своё
   состояние, а не «закрыто»: уровень набран, награда на месте, и от игрока
   нужно действие, а не ожидание.

   Цвет — жёлтый, как у недельного задания: «сделай что-то», а не «ошибка» и
   не «можно забирать». Красный читался бы как отказ, оранжевый — как
   доступная награда, и в ленте из пятидесяти карточек их путали бы. */

.bpp-card.need {
  border-color: rgba(255, 210, 59, .5);
  box-shadow: inset 0 0 22px -14px rgba(255, 210, 59, .8);
}
.bpp-card.need .bpp-go {
  background: linear-gradient(135deg, #ffd23b, #ffa838); color: #180a00;
  font-size: 8px; letter-spacing: .04em;
}
.bpp-claim.need {
  background: linear-gradient(135deg, #ffd23b, #ffa838); color: #180a00;
}

/* Строка в окне «что это за награда»: чего не хватает и куда идти. */
.bpp-ri-need {
  margin: 0 0 10px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 210, 59, .35); background: rgba(255, 210, 59, .06);
  font: 400 var(--fs-cap)/1.5 var(--f-ui); color: #cfcfda;
}
.bpp-ri-need b { color: #ffd23b; }
.bpp-ri-go {
  display: inline-block; margin-left: 4px; padding: 3px 9px;
  border: 0; border-radius: 6px; cursor: pointer; color: #180a00;
  background: linear-gradient(135deg, #ffd23b, #ffa838);
  font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
}

/* ============================================================ ALIVE · ПАСС · ВЫБОР НАГРАДЫ

   Блоки страницы пасса, которых в v2 не было.

   Превью финала (.bpf) здесь было: карточка с предметом последнего уровня
   под героем. Убрано решением оператора — то же обещание несёт лента, а
   отдельный блок на пол-экрана отодвигал прогресс ниже сгиба.

   .bpc — выбор из трёх в окне награды: три карточки в ряд, кнопка на
   каждой. После получения остаётся одна, выбранная: остальные два варианта
   больше не предложение.

   .bpp-swap / .bpp-swapped — пометка «Награда обновлена». Без пушей и
   уведомлений (§11): она живёт только здесь. */

/* Пометка о замене: строкой в карточке награды и в превью финала. */
.bpp-swap {
  margin: 0; padding: 8px 10px; border-radius: 9px;
  border: 1px dashed rgba(255, 210, 59, .35); background: rgba(255, 210, 59, .05);
  font: 400 var(--fs-cap)/1.5 var(--f-ui); color: #cfcfda;
}
.bpp-swap b { color: #ffd23b; }
.bpp-swap s { color: #8a8a9a; }
.bpp-swap i { font-style: normal; color: #ececf2; font-weight: 600; }

/* Уголок на карточке ленты. Мелкий и без цифр: он не сообщает, а
   напоминает открыть карточку, где написано, что именно изменилось. */
.bpp-swapped {
  position: absolute; left: 6px; bottom: 6px; z-index: 3;
  padding: 2px 6px; border-radius: 20px;
  font: 600 8px/1.4 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
  color: #180a00; background: linear-gradient(135deg, #ffd23b, #ffa838);
}

/* Метка «из 3» на карточке выбора: она объясняет, почему на карточке один
   предмет, а награда называется выбором. */
.bpp-pick {
  position: absolute; right: 6px; top: 6px; z-index: 3;
  padding: 2px 6px; border-radius: 20px;
  font: 600 8px/1.4 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
  color: #ececf2; background: rgba(9, 8, 10, .8); border: 1px solid rgba(255, 255, 255, .14);
}

/* ------------------------------------------------------ выбор из трёх */

.bpc { margin-top: 12px; }
.bpc-h {
  font: 600 var(--fs-cap)/1.5 var(--f-hd); letter-spacing: .1em;
  text-transform: uppercase; color: #ffa838; margin-bottom: 8px;
}
.bpc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bpc-opt {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 10px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  text-align: center;
}
.bpc-opt.on { border-color: rgba(255, 122, 24, .55); background: rgba(255, 122, 24, .07); }
.bpc-art { width: 100%; display: grid; place-items: center; min-height: 64px; }
.bpc-art .skin-img, .bpc-art img { max-width: 100%; height: auto; display: block; }
.bpc-opt b { font: 700 var(--fs-label)/1.25 var(--f-hd); color: #ececf2; }
.bpc-opt small { font: 400 var(--fs-micro)/1.3 var(--f-ui); color: #8a8a9a; font-variant-numeric: tabular-nums; }
.bpc-go {
  margin-top: 4px; padding: 7px 12px; border: 0; border-radius: 7px; cursor: pointer;
  color: #180a00; background: linear-gradient(135deg, #ffa838, #ff5c00);
  font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .07em; text-transform: uppercase;
}
.bpc-got, .bpc-lock {
  margin-top: 4px; font: 600 var(--fs-micro)/1 var(--f-hd);
  letter-spacing: .07em; text-transform: uppercase; color: #8a8a9a;
}
.bpc-got { color: #ffa838; }
.bpc-note { margin: 10px 0 0; font: 400 var(--fs-cap)/1.5 var(--f-ui); color: #8a8a9a; }

/* Счётчик «ещё N» в нижней дорожке ленты. Нужен с витринами: бонусов на
   строке стало до трёх (стадия рамки и титул к предмету), а слот под ними
   один — стопка карточек ломала бы ровную высоту дорожки. */
.bpp-lv-more {
  position: absolute; right: 3px; top: 3px; z-index: 3;
  min-width: 14px; padding: 0 3px; border-radius: 20px;
  font: 700 8px/14px var(--f-hd); text-align: center; color: #180a00;
  background: linear-gradient(135deg, #ffd23b, #ffa838);
}

/* ============================================================ ALIVE · АДМИНКА ПАССА · СКИНЫ

   Редакторы конкретного скина и выбора из трёх в сетке сезона. Оба шире
   обычного поля параметра: в них строка market_hash_name, снимок цены,
   цена сейчас, отклонение и список замен — плоской парой «подпись + input»
   это не описывается.

   Цвета одни на весь блок: зелёное — в коридоре, жёлтое — ушло, но ещё
   терпимо, красное — вне коридора или предмета нет в источнике цен. Ту же
   тройку показывает и сводка по десяткам. */

.bpa-f.wide { grid-column: 1 / -1; }
.bpa-f.wide input, .bpa-f.wide textarea { width: 100%; }
.bpa-f textarea {
  resize: vertical; min-height: 44px; font: 400 var(--fs-cap)/1.4 var(--f-ui);
  padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--line-2); background: var(--panel-3); color: var(--tx-1);
}

.bpa-price, .bpa-subs {
  grid-column: 1 / -1; font: 400 var(--fs-micro)/1.5 var(--f-ui);
  font-variant-numeric: tabular-nums;
}
.bpa-price.ok { color: #7ce4ae; }
.bpa-price.warn { color: #ffd23b; }
.bpa-price.bad { color: #eb4b4b; }
.bpa-price b { font-weight: 700; }
.bpa-subs { color: var(--tx-3); }
.bpa-subs i { font-style: normal; }
.bpa-subs i.ok { color: #7ce4ae; }
.bpa-subs i.bad { color: #eb4b4b; }
.bpa-subs b.bad { color: #eb4b4b; }

.bpa-choice { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.bpa-choice-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font: 600 var(--fs-micro)/1.5 var(--f-hd); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-2);
}
.bpa-choice-h span { font: 400 var(--fs-micro)/1.5 var(--f-ui); letter-spacing: 0; text-transform: none; }
.bpa-choice-h em { font-style: normal; }
.bpa-choice-h em.ok { color: #7ce4ae; }
.bpa-choice-h em.bad { color: #eb4b4b; }
/* Обёртка цены: перерисовывается целиком по ответу сервера, поэтому в ней
   ничего не позиционируется — только поток. */
.bpa-pricebox { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bpa-choice-o {
  display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start;
  padding: 8px; border-radius: 9px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02);
}
.bpa-choice-n {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font: 700 var(--fs-micro)/1 var(--f-hd); color: var(--tx-2); background: var(--panel-3);
}
.bpa-choice-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }

/* Сводка по десяткам: факт и цель парой. */
.bpa-profile-note i { font-style: normal; font-variant-numeric: tabular-nums; }
.bpa-profile-note i.ok { color: #7ce4ae; }
.bpa-profile-note i.bad { color: #eb4b4b; }
.bpa-profile-note i s { opacity: .55; text-decoration: none; }

.bpa-swap { display: flex; flex-direction: column; gap: 10px; }
.bpa-swap p { margin: 0; font: 400 var(--fs-cap)/1.55 var(--f-ui); }
.bpa-swap-go { display: flex; justify-content: flex-end; }
/* ============================================================ ALIVE · ПРОПОРЦИИ СЦЕНЫ АПГРЕЙДЕРА

   Эталон — снимок владельца на сцене шириной ~2260px: кнопка «Улучшить»
   стоит на top: calc(9% + 505px), капсулы подняты на margin-top: -78px.
   В пикселях это держится только на той ширине: на 1440 кнопка уезжала
   под капсулы. Поэтому те же точки заданы долями сцены:

   · кнопка: 9% + 505px при высоте сцены 1271px = 48.7% высоты;
   · капсулы: -78px от колонки 2212px = -3.5% ширины (проценты у margin
     считаются от ширины колонки, а она растёт вместе со сценой);
   · кольцо: 300px на 2260px = 13.3% ширины сцены. Всё внутри кольца
     считается от его размера (--upa-ring), иначе на малом кольце цифра
     не помещается. Ниже 150px кольцо не сжимаем — не прочитать; тогда
     кнопка отступает от безеля сама (второй аргумент max).

   Сцена — контейнер, чтобы мерить от её ширины (cqw), а не от окна: справа
   она то доходит до края, то уступает место чату. Телефонная ветка
   (<= 880px) живёт своей сеткой, поэтому всё под min-width: 881px. */

@media (min-width: 881px) {
  .upa-scene { container-type: inline-size; }
  /* Колесо увеличено в 1.4 раза (решение владельца): вся clamp умножена на
     1.4, от --upa-ring считаются halo, лучи, цифры — всё растёт пропорционально. */
  #page-upgrade { --upa-ring: clamp(150px, 13.3cqw, 330px); }

  .upa-scene .upa-dial { width: var(--upa-ring); height: var(--upa-ring); }
  .upa-halo { width: calc(var(--upa-ring) * 1.4); height: calc(var(--upa-ring) * 1.4); }
  .upa-dial .ring-center > div { margin-top: calc(var(--upa-ring) * -.087); }
  .upa-dial .ring-sub { margin-bottom: calc(var(--upa-ring) * .02); font-size: max(9px, calc(var(--upa-ring) * .04)); }
  .upa-dial .ring-val,
  .upa-dial .ring.bonus-on:not(.win):not(.lose) .ring-val { font-size: calc(var(--upa-ring) * .167); }
  .upa-dial .ring-note { font-size: max(9px, calc(var(--upa-ring) * .0467)); }
  .upa-dial .ring-mascot {
    width: calc(var(--upa-ring) * .293); height: calc(var(--upa-ring) * .293);
    margin-left: calc(var(--upa-ring) * -.147); bottom: calc(var(--upa-ring) * .073);
  }
  .upa-beam {
    width: calc(var(--upa-ring) * .247); height: calc(var(--upa-ring) * .1);
    margin-top: calc(var(--upa-ring) * -.05);
  }
  .upa-beam.l { left: calc(var(--upa-ring) * -.347); }
  .upa-beam.r { right: calc(var(--upa-ring) * -.347); }

  /* 1.1535 = кольцо плюс нижний выступ безеля (130.7% / 2 + 50%). */
  .upa-go {
    top: max(48.7%, calc(13.5% + var(--upa-ring) * 1.1535 + 12px));
    width: max(220px, var(--upa-ring));
  }
  .upa-presets { margin-top: -3.5%; }
}
/* Узкая сцена: кнопка ниже и тоньше, чтобы не сесть на капсулы. */
@media (min-width: 881px) and (max-width: 1365px) {
  .upa-go { padding: 10px 20px; font-size: var(--fs-ui); }
  .upa-presets { margin-top: -1%; }
}

/* ================= Статистика игр — операторская сводка ================= */
#page-game_stats .adm-h { flex-wrap: wrap; }
.gs-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(255, 255, 255, .03); }
.gs-seg button { border: 0; background: none; color: var(--tx-2); cursor: pointer;
  font: 600 var(--fs-cap)/1 var(--f-hd); padding: 7px 12px; border-radius: 7px; }
.gs-seg button:hover { color: var(--tx); }
.gs-seg button.on { background: var(--or); color: #120a03; }
.gs-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 14px 0 18px; }
.gs-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .16)); }
.gs-card-k { display: block; font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .06em;
  text-transform: uppercase; color: var(--tx-3); }
.gs-card-v { display: block; margin-top: 7px; font: 800 20px/1 var(--f-hd);
  font-variant-numeric: tabular-nums; color: var(--tx); }
.gs-card-v.pos, .gs-tbl td.pos { color: var(--green); }
.gs-card-v.neg, .gs-tbl td.neg { color: var(--red); }
.gs-tbl .gs-mode { font-weight: 600; white-space: nowrap; }
.gs-ic { display: inline-block; width: 22px; color: var(--or); }
.gs-tbl tbody tr:hover { background: rgba(255, 255, 255, .03); }
.gs-dead td { opacity: .48; }
.gs-total td { border-top: 2px solid var(--line); font-weight: 700; }
.gs-bar { display: inline-block; vertical-align: middle; width: 88px; height: 6px;
  border-radius: 4px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.gs-bar > i { display: block; height: 100%; background: var(--or); }
.gs-share { margin-left: 8px; font-size: var(--fs-cap); color: var(--tx-3);
  font-variant-numeric: tabular-nums; }
@media (max-width: 920px) { .gs-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .gs-cards { grid-template-columns: repeat(2, 1fr); }
  .gs-bar { width: 52px; }
}

/* ============================================================ ALIVE · ГОТОВНОСТЬ ПРИЁМА

   Плашка над переключателем «Крипты». Одна на все подвкладки — не ради
   единообразия, а потому что два индикатора одного и того же обязательно
   разойдутся: панель уже писала зелёным «приём включён» поверх конфигурации,
   которая физически не могла принять ни одного депозита.

   Каждый пункт — ссылка туда, где он чинится. Подчёркивание пунктиром, а не
   цветом: цветом здесь занят статус. */

.adr {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid var(--line-2); border-left-width: 3px;
  border-radius: var(--r-s); background: var(--bg-2);
}
.adr.ok  { border-left-color: var(--green); }
.adr.bad { border-left-color: var(--red); background: rgba(255, 77, 94, .05); }

.adr-main { flex: 1; min-width: 0; display: flex; align-items: baseline;
            gap: 12px; flex-wrap: wrap; }
.adr-h { font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase; }
.adr.ok  .adr-h { color: var(--green); }
.adr.bad .adr-h { color: var(--red); }

.adr-list { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
            font-size: var(--fs-cap); color: var(--tx-2); min-width: 0; }
.adr-list i { font-style: normal; color: var(--tx-3); }

.adr-i { color: var(--tx-2); }
a.adr-i { text-decoration: none; border-bottom: 1px dotted var(--tx-3); cursor: pointer; }
a.adr-i:hover { color: var(--or-2); border-bottom-color: var(--or-2); }

/* Причины неготовности в таблице сетей. Без минимальной ширины колонка
   схлопывается и перечисление встаёт по слову на строку — читать его так
   невозможно, а это главный текст экрана. */
#page-deposits_admin td.adr-state { min-width: 230px; line-height: 1.4; }

/* Число блоков под временем отставания. Мельче основного значения
   намеренно: оно нужно для отладки, а решение принимается по времени. */
#page-deposits_admin .ad-lagb { font-size: var(--fs-micro); color: var(--tx-3); }

/* Счётчик в названии подвкладки «Переводы». Не кружок-бейдж: цифра тут
   часть названия, а не значок поверх него, и при нуле её просто нет. */
#adTabs .seg-n { font-weight: 700; }
#adTabs button:not(.on) .seg-n { color: var(--or-2); }

/* Телефон: заголовок и список встают друг под друга, кнопка — во всю ширину.
   Заявку на вывод в три часа ночи подтверждают с телефона, и плашка — первое,
   что там должно читаться. */
@media (max-width: 560px) {
  .adr { gap: 10px; }
  .adr-main { flex-direction: column; gap: 6px; align-items: flex-start; }
  .adr > .btn { width: 100%; }
}

/* ============================================================ ALIVE · ВЫПЛАТЫ

   Шапка вкладки, четыре подвкладки и форма правил. Суммы в
   шапке крупнее остального намеренно: это единственное число, ради
   которого сюда заходят, не собираясь ничего делать. */

.pq-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.pq-sum { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
          font-size: var(--fs-label); color: var(--tx-2); }
.pq-sum b { color: var(--tx); font-size: var(--fs-body); }

#pqAge { font-size: var(--fs-cap); }
#pqAge.bad { color: var(--red); }

#pqTabs .seg-n { font-weight: 700; }
#pqTabs button:not(.on) .seg-n { color: var(--or-2); }

/* Фильтры истории. Даты узкие, имя игрока шире: искать по имени
   приходится чаще, чем по диапазону. */
.pq-f { display: inline-flex; align-items: center; gap: 6px;
        font-size: var(--fs-cap); color: var(--tx-3); }
.pq-f input { width: 140px; }
#pqPlayer { min-width: 190px; }

/* Правила — форма, а не таблица: у каждого числа есть пояснение,
   и без него оно не читается вовсе. */
.pq-rules { display: grid; gap: 14px; max-width: 620px; margin-bottom: 18px; }
/* .dep-promo из окна пополнения ставит подпись и поле в строку. Здесь подпись
   длиннее поля в разы — с пояснением на две строки, — и в строку они не
   встают: поле сжималось в щель, ширина которой зависела от длины текста. */
.pq-rules .dep-promo { flex-direction: column; align-items: stretch; gap: 6px; }
.pq-rules .dep-promo span { display: block; font-size: var(--fs-cap); color: var(--tx-2); }
.pq-rules .dep-promo i { display: block; font-style: normal; font-size: var(--fs-micro);
                         line-height: 1.4; margin-top: 3px; }
.pq-rules .dep-promo input { max-width: 220px; min-height: 40px;
                             text-transform: none; letter-spacing: .02em; }

/* Телефон: заявку на вывод в три часа ночи подтверждают с него. */
@media (max-width: 560px) {
  .pq-sum { gap: 12px; width: 100%; }
  .pq-head .btn { width: 100%; }
  .pq-f input, #pqPlayer, #pqStatus { width: 100%; min-width: 0; }
  .pq-f { width: 100%; }
  #pqHistHead { flex-direction: column; align-items: stretch; }
  /* Кнопки решения встают столбиком и становятся выше: по ним попадают
     пальцем в три часа ночи, а не мышью. */
  #page-payouts .adm-act { flex-wrap: wrap; justify-content: flex-start; }
  #page-payouts .adm-act .btn { padding: 9px 14px; }
}

/* Возраст данных в шапке «Крипты». Тот же вид, что и у «Выплат»: два экрана
   про одно и то же не должны выглядеть по-разному. */
#page-deposits_admin .age { font-size: var(--fs-cap); white-space: nowrap; }
#page-deposits_admin .age.bad { color: var(--red); }

/* Таблицы «Выплат» и «Крипты» на узком экране.

   У .tbl-wrap не было правил вообще: на широком экране таблица помещалась, и
   этого никто не замечал. На 390px очередь обрывается на середине, а кнопки
   «Отпустить» и «Отклонить» оказываются за краем — то есть заявку с телефона
   нельзя ни прочитать, ни решить. Горизонтальная прокрутка возвращает и то,
   и другое.

   Правило нарочно привязано к страницам своих ТЗ, хотя .tbl-wrap живёт и на
   остальных вкладках админки: там та же беда, но чинить её надо вместе с
   ними, а не заодно.

   Партнёры добавились сюда своим ТЗ: в таблице кодов стало девять колонок
   вместо семи, и без прокрутки «выключить» уезжает за край даже на
   ноутбуке. */
#page-payouts .tbl-wrap,
#page-deposits_admin .tbl-wrap,
#page-partners_admin .tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#page-payouts .tbl-wrap > table,
#page-deposits_admin .tbl-wrap > table,
#page-partners_admin .tbl-wrap > table { min-width: 100%; }

/* «Крипта» на телефоне. Шапка не сжимает содержимое, а раскладывает его по
   строкам: переключатель, под ним возраст данных с кнопкой, и только потом
   пояснение. Пояснение при этом остаётся — оно описывает правило, из-за
   которого экран вообще существует, и выбрасывать его ради места нельзя. */
@media (max-width: 560px) {
  #page-deposits_admin .pa-head { flex-wrap: wrap; gap: 10px; }
  #page-deposits_admin .pa-head > .seg { flex: 1 1 100%; }
  #page-deposits_admin .pa-head > .grow { display: none; }
  #page-deposits_admin .pa-head > .dim:not(.age) { order: 3; flex: 1 1 100%; }
  #adAge { order: 2; }
  #adRefresh { order: 2; margin-left: auto; }
  #adTxHead .seg { flex: 1 1 100%; flex-wrap: wrap; }
  #adSearch { flex: 1 1 100%; }
  #adTabs button, #adFilter button { flex: 1; white-space: nowrap; }
}

/* ---------------------------------------------- админка · цены (этап 1)

   Две числовые колонки и кликабельные заголовки. Цвет здесь не украшение:
   он и есть ответ. Оранжевое — «цена подвинется заметно», красное —
   «котировкам этой строки верить нельзя вообще». Серое значит «смотреть не
   на что», и таких строк в очереди большинство. */

.tbl th.pc-s { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl th.pc-s:hover { color: var(--tx); }
.tbl th.pc-s.on { color: var(--or-2); }

/* Оранжевый — порог внимания: изменение от 50% или разброс от пяти раз. */
.pc-hot { color: var(--or-2); font-weight: 700; }
/* Красный — разброс от ста раз. Это уже не рынок, а сломанный источник. */
.pc-bad { color: var(--red); font-weight: 700; }

/* ------------------------------------------ админка · источники (этап 2)

   Таблица над очередью. Она маленькая и стоит первой намеренно: вопрос
   «какой поставщик врёт» задаётся раньше, чем вопрос «что делать с этой
   строкой», а до сих пор панель не задавала его вовсе. */

.pc-src { border: 1px solid var(--line-2); border-radius: var(--r-s);
          background: var(--bg-2); padding: 10px 12px; margin: 0 0 14px; }
.pc-src-h { display: flex; align-items: baseline; gap: 10px;
            flex-wrap: wrap; margin-bottom: 6px; }
.pc-src-h b { font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase; }
.pc-src-h .dim { font-size: var(--fs-micro); line-height: 1.5; }
.pc-src .tbl { margin: 0; }
.pc-src .tbl td, .pc-src .tbl th { padding-top: 6px; padding-bottom: 6px; }

/* Чипсы фильтра. Не .seg: там ровно один выбранный из фиксированного
   набора, а здесь набор приходит с сервера и растёт вместе со списком
   источников. */
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pc-chip {
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--tx-2);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: var(--fs-cap);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.pc-chip:hover { color: var(--tx); border-color: var(--line); }
.pc-chip.on { background: var(--or); border-color: var(--or); color: #180a00; }
.pc-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-chip:not(.on) b { color: var(--or-2); }

@media (max-width: 560px) {
  #page-prices .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #page-prices .tbl-wrap > table { min-width: 100%; }
}

/* --------------------------------------- админка · разбор очереди (этап 3)

   Чипсы делят очередь по тому, ЧТО с строкой можно сделать. «Только в
   кейсах» отделён чертой и выглядит переключателем, а не выбором, потому
   что он и есть переключатель: работает вместе с любым чипсом. */

.pc-chip-sep { width: 1px; align-self: stretch; margin: 2px 4px;
               background: var(--line-2); }
.pc-chip-t { border-style: dashed; }

/* Настройки разбора. Живут в блоке источников: порог и автоприём — это про
   цены целиком, а не про конкретную строку очереди. */
.pc-cfg { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pc-cfg-f { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-cap);
            color: var(--tx-2); margin-right: 18px; }
.pc-cfg-f input { width: 76px; min-height: 34px; text-align: right; }
.pc-cfg-f i { font-style: normal; color: var(--tx-3); }
.pc-sw { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-cap);
         color: var(--tx-2); cursor: pointer; }
.pc-sw input { width: 16px; height: 16px; accent-color: var(--or); }
.pc-cfg .help { margin: 6px 0 0; }

/* Красная плашка: в кейсах есть предметы без цены.

   Красная, потому что это не «спорная цена», а отсутствующая: ящик уже
   продаётся по неполным данным, и на витрине это не видно никак. */
.pc-gap {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid rgba(255, 77, 94, .4); border-radius: var(--r-s);
  background: rgba(255, 77, 94, .07); padding: 10px 12px; margin: 0 0 12px;
  font-size: var(--fs-label);
}
.pc-gap b { color: var(--red); }
.pc-gap span { color: var(--tx-2); }
.pc-link { background: none; border: 0; color: var(--or-2); font: inherit;
           cursor: pointer; text-decoration: underline; padding: 0; }
.pc-link:hover { color: var(--or); }

/* ------------------------------------ админка · массовые действия (этап 4) */

/* Скорость очереди — строкой под шапкой. Мелко и серым: это не действие, а
   ответ на вопрос «догоняем или отстаём», который смотрят раз в день. */
.pc-pace { font-size: var(--fs-cap); line-height: 1.5; margin: 2px 0 10px; }

/* Строка выделения. Появляется только тогда, когда «всё» стало
   двусмысленным: показанные выделены, а в очереди по фильтру их больше. */
.pc-sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
          font-size: var(--fs-cap); color: var(--tx-2); margin: 0 0 10px; }

#apTbl thead th:first-child { width: 28px; }
#apTbl thead input[type="checkbox"] { width: 14px; height: 14px;
                                      accent-color: var(--or); cursor: pointer; }

/* Шапка «Цен» после четвёртой кнопки. .adm-h — flex-строка, и кнопки в ней
   сжимались: «Принять отфильтрованные · 224» ужималось до 101 пикселя, то
   есть до нечитаемого обрезка, — ровно та кнопка, которую этап делает
   главной. Кнопки не сжимаются и переносятся строкой, подпись занимает
   остаток. */
#page-prices .adm-h { flex-wrap: wrap; row-gap: 8px; align-items: center; }
#page-prices .adm-h .btn { flex: none; white-space: nowrap; }
#page-prices #apSub { flex: 1 1 180px; min-width: 0; }

/* ------------------------------------------ админка · подвкладки цен (этап 5) */

/* Покрытие каталога — три числа, ради которых подвкладка и существует.
   Крупнее таблицы: на них смотрят первым делом, а внутрь лезут потом. */
.pc-cover { font-size: var(--fs-label); color: var(--tx-2); line-height: 1.7;
            margin: 0 0 4px; }
.pc-cover b { color: var(--tx); font-variant-numeric: tabular-nums; }

#prPaneCatalog .pa-head { margin: 12px 0 10px; }
#prSearch { min-width: 280px; }
#prRulesTbl code { font-size: var(--fs-cap); color: var(--or-2); }
#prRulesTbl td:nth-child(3) { font-size: var(--fs-cap); line-height: 1.5; }
#prTabs .seg-n { font-weight: 700; }
#prTabs button:not(.on) .seg-n { color: var(--or-2); }

@media (max-width: 560px) {
  #prSearch { min-width: 0; width: 100%; }
  #prPaneCatalog .pa-head { flex-wrap: wrap; }
}

/* ------------------------------------------ админка · игроки (этапы 6–8)

   Список стал рабочим экраном: поиск, сортировка, пагинация и строка,
   по которой открывается карточка. */

.pc-pager { display: flex; align-items: center; gap: 10px; margin-top: 12px;
            font-size: var(--fs-cap); }
#plSearch { min-width: 320px; }
/* Класс строки — plr, а не pl-row: .pl-row занят прогрессом партнёрки
   (display:flex), и строки таблицы от него разъезжались. */
#plTbl tbody tr.plr { cursor: pointer; }
#plTbl tbody tr.plr:hover td { background: rgba(255, 122, 24, .05); }
/* Заблокированный — приглушённой строкой. Он не удалён и не спрятан: его
   по-прежнему видно и по нему по-прежнему считаются обязательства. */
#plTbl tbody tr.plr-off td { opacity: .5; }

@media (max-width: 560px) {
  #page-players .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #page-players .tbl-wrap > table { min-width: 100%; }
  #plSearch { min-width: 0; width: 100%; }
  #page-players .pa-head { flex-wrap: wrap; }
}

/* Карточка игрока. Модалка, а не отдельная страница: её открывают из списка
   и из «Выплат», и возвращаться после неё надо туда, откуда пришли. */
.pl-card { max-width: 900px; }
.pl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
           margin-bottom: 12px; }
.pl-head h3 { margin: 0; font-size: 19px; }
.pl-sec { margin-top: 18px; }
.pl-sec h4 { margin: 0 0 8px; font-size: var(--fs-cap); letter-spacing: .06em;
             text-transform: uppercase; color: var(--tx-3); font-weight: 700; }
.pl-sec .help { margin: 6px 0 0; }
.pl-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pl-fact { display: flex; flex-direction: column; gap: 2px; }
.pl-fact span { font-size: var(--fs-micro); color: var(--tx-3); }
.pl-fact b { font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.pl-games { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-games .pc-chip { cursor: default; }
.pl-card .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pl-card .tbl td, .pl-card .tbl th { padding-top: 6px; padding-bottom: 6px; }

/* Блокировка в карточке. Отделена чертой и стоит последней: это единственное
   действие экрана, и оно не должно попадаться под руку при чтении. */
.pl-block { border-top: 1px solid var(--line); padding-top: 14px; }
.pl-block textarea {
  display: block; width: 100%; max-width: 520px; margin: 0 0 8px;
  padding: 8px 10px; border-radius: var(--r-s); border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--tx); font: inherit; font-size: var(--fs-label);
  line-height: 1.5; resize: vertical;
}
.pl-block textarea:focus { border-color: var(--or); outline: none; }
/* Сумма списания — над причиной, тем же видом поля. */
.pl-block input[type="number"] {
  display: block; width: 180px; margin: 0 0 8px; padding: 8px 10px;
  border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--tx); font: inherit; font-size: var(--fs-label);
}
.pl-block input[type="number"]:focus { border-color: var(--or); outline: none; }

/* ============================================================ ALIVE · ОКНО ВХОДА: «СТАТЬ ПАРТНЁРОМ»

   Окно входа (Login Modal, классы lga-) — одно на весь сайт. С лендинга
   «Партнёрка» оно открывается в партнёрском режиме (gate.js, openAuth):
   тексты и подписи на картинке — из макета Partners - Alive, в регистрации
   своя форма партнёрского аккаунта: вход и регистрация с «Источником
   трафика» (префикс ptr-). Ссылка внизу окна переключает игровой вход
   на партнёрский и обратно — это две разные учётки.

   Карточка бывает выше окна (регистрация с источником, телефон): при
   place-items: center её верх уезжал за край, и прокруткой до него было не
   добраться. Колонка и margin: auto — влезает по центру, нет — от верха. */

.lga { display: flex; flex-direction: column; align-items: center; }
.lga > .lga-card { flex: none; margin: auto; }

/* «Вход в аккаунт партнёра» — под переключателем режимов, отделён линией:
   это не третий режим той же учётки, а другая учётка. */
.lga-main > .lga-pswitch {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center; font-size: var(--fs-ui);
}
.lga-pswitch > a {
  display: inline-flex; align-items: center; gap: 8px; color: #a2a2b2; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .25);
}
.lga-pswitch > a:hover { color: #ffa838; text-decoration-color: currentColor; }

.lga-form > .ptr-src {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transition: border-color .15s;
}
.lga-form > .ptr-src.bad { border-color: rgba(235, 75, 75, .7); }
.ptr-src > .ptr-src-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ptr-src-h > b { font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #ececf2; }
.ptr-src-h > span { font-size: var(--fs-cap); line-height: 1.3; color: #8a8a9a; text-align: right; }
.ptr-src > .ptr-src-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ptr-src-list > button {
  display: flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 14px 0 8px;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03);
  box-shadow: none; color: #ececf2; font: 600 var(--fs-ui)/1 var(--f-ui); letter-spacing: 0; text-transform: none;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.ptr-src-list > button:hover { border-color: rgba(255, 122, 24, .6); }
.ptr-src-list > button.on { border-color: #ff7a18; background: rgba(255, 122, 24, .14); color: #ffa838; }
.ptr-src-list > button > span {
  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: #0d0d12; overflow: hidden;
}
.ptr-src-list img { width: 26px; height: 26px; object-fit: contain; }
.ptr-src-list img.sm { width: 16px; height: 16px; }
.ptr-src > .ptr-src-link {
  height: 44px; margin: 0; padding: 0 14px; border-radius: 9px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); box-shadow: none;
  color: #ececf2; font: 400 var(--fs-ui)/1 var(--f-ui); outline: none;
}
.ptr-src > .ptr-src-link:focus { border-color: rgba(255, 122, 24, .6); }
.ptr-src > .ptr-src-link::placeholder { color: #8a8a9a; opacity: 1; }

/* ============================================================ ALIVE · КАБИНЕТ ПАРТНЁРА

   По макету Partner Cabinet - Alive. Боковое меню сайта на этой странице
   уступает место меню кабинета (232px — та же ширина), контент — на
   размытом hero.png с радиальным затемнением, маскот слева внизу и сундук
   справа внизу (только десктоп). Значения — из инлайн-стилей макета,
   различия с телефоном — из renderVals (mob). Префикс pcb- проверен грепом
   (pc- занят админкой). */

.pcb [hidden] { display: none !important; }
@keyframes pcbRow { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes pcbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Меню сайта прячется, пока открыт сам кабинет (не окно «ещё не партнёр»). */
.shell:has(#page-partner.on > .pcb-shell:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
.shell:has(#page-partner.on > .pcb-shell:not([hidden])) > .side { display: none; }

#page-partner.pcb { max-width: none; margin: calc(-1 * var(--content-top, 20px)) -20px -20px; }
.pcb-shell {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  min-height: calc(100vh - var(--tb-h, 64px));
  color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui); font-variant-numeric: tabular-nums;
}
.pcb b { font-family: var(--f-hd); font-weight: 700; }

/* ---------------------------------------------------------- меню кабинета */

.pcb-side {
  position: sticky; top: var(--tb-h, 64px); height: calc(100vh - var(--tb-h, 64px));
  display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; box-sizing: border-box;
  background: rgba(10, 10, 13, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, .05); overflow: hidden; z-index: 3;
}
.pcb-tabs { display: flex; flex-direction: column; gap: 4px; }
.pcb-tabs > button {
  display: flex; align-items: center; gap: 11px; margin: 0; padding: 10px 12px; border-radius: 9px;
  border: 1px solid transparent; background: transparent; box-shadow: none;
  color: #a2a2b2; font: 600 var(--fs-body)/1.2 var(--f-hd); letter-spacing: 0; text-transform: none;
  text-align: left; cursor: pointer; transition: background .15s, color .15s;
}
.pcb-tabs > button > i { width: 18px; display: grid; place-items: center; color: #8a8a9a; font-style: normal; }
.pcb-tabs > button:hover { background: rgba(255, 255, 255, .04); color: #ececf2; }
.pcb-tabs > button.on { border-color: rgba(255, 122, 24, .35); background: rgba(255, 122, 24, .1); color: #ececf2; }
.pcb-tabs > button.on > i { color: #ffa838; }
.pcb-slogan {
  margin: 36px 10px 0; display: flex; flex-direction: column; transform: rotate(-8deg);
  font: 700 30px/.95 var(--f-hd); text-transform: uppercase; letter-spacing: .02em;
  color: #ff7a18; text-shadow: 0 0 18px rgba(255, 122, 24, .55);
}
.pcb-online { margin-top: auto; display: flex; align-items: center; gap: 7px; padding: 0 4px; font-size: var(--fs-cap); font-weight: 600; color: var(--tx-3); }
.pcb-online > i { width: 7px; height: 7px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 8px #35d07f; animation: pcbPulse 2s infinite; }
.pcb-online > b { color: #ececf2; font-size: var(--fs-cap); }

/* ---------------------------------------------------------- фон и сцена */

.pcb-main { position: relative; min-width: 0; overflow: hidden; background: #07070a; isolation: isolate; }
.pcb-bg {
  position: absolute; inset: -30px; z-index: 0; width: calc(100% + 60px); height: calc(100% + 60px); max-width: none;
  object-fit: cover; object-position: 50% 40%; filter: blur(14px) brightness(.35) saturate(1.1); pointer-events: none;
}
.pcb-dim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(7, 7, 10, .2), rgba(7, 7, 10, .85) 90%);
}
.pcb-mascot {
  position: absolute; left: -20px; bottom: -10px; z-index: 1; width: 420px; max-width: none; pointer-events: none;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .8));
}
.pcb-chest {
  position: absolute; right: -40px; bottom: -30px; z-index: 1; width: 440px; max-width: none; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 60% 60%, #000 45%, transparent 85%);
  mask-image: radial-gradient(ellipse 60% 60% at 60% 60%, #000 45%, transparent 85%);
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .85));
}
.pcb-body {
  position: relative; z-index: 2; width: 100%; max-width: 1040px; margin: 0 auto; box-sizing: border-box;
  padding: 36px 32px 120px; display: flex; flex-direction: column; gap: 18px;
}

/* ---------------------------------------------------------- шапка кабинета */

.pcb-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pcb-ava {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  background: #0d0d12; border: 2px solid rgba(255, 122, 24, .75); box-shadow: 0 0 22px rgba(255, 122, 24, .35);
}
.pcb-ava > img { width: 34px; height: 34px; }
.pcb-name { font-size: 19px; color: #ececf2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcb-exit {
  margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(18, 18, 24, .75); box-shadow: none; cursor: pointer;
  color: #ececf2; font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: none;
  transition: border-color .15s, color .15s;
}
.pcb-exit:hover { border-color: rgba(255, 122, 24, .55); color: #ffa838; }

.pcb-stats { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 16px; }
.pcb-stat {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; min-width: 0;
  border: 1px solid rgba(255, 122, 24, .45); background: rgba(13, 13, 18, .88);
  box-shadow: 0 0 28px -6px rgba(255, 122, 24, .35), inset 0 0 30px rgba(255, 122, 24, .04);
}
.pcb-stat-ic {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  background: #0a0a0e; border: 1px solid rgba(255, 122, 24, .35); color: #ffa838;
}
.pcb-stat-v { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcb-stat-v > b { font-size: 24px; line-height: 1; color: #ececf2; white-space: nowrap; }
.pcb-stat-v > small { font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: #8a8a9a; }

/* Оранжевая кнопка кабинета — одна на все случаи. */
.pcb-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #ffb23d, #ff7a18 60%, #ff5c00); color: #180a00; cursor: pointer;
  font: 700 16px/1 var(--f-hd); letter-spacing: .02em; text-transform: none; text-decoration: none;
  box-shadow: 0 0 22px rgba(255, 122, 24, .45); transition: filter .15s;
}
.pcb-cta:hover { filter: brightness(1.08); color: #180a00; }
.pcb-cta:disabled { opacity: .6; cursor: default; filter: none; }
.pcb-withdraw { margin-left: auto; flex: none; height: 44px; padding: 0 18px; border-radius: 10px; font-size: var(--fs-body); }

/* Чипы вкладок — только телефон. */
.pcb-chips { display: none; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.pcb-chips > button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; margin: 0; padding: 0 14px;
  border-radius: 10px; border: 1px solid transparent; background: transparent; box-shadow: none; cursor: pointer;
  color: #a2a2b2; font: 700 var(--fs-ui)/1 var(--f-hd); text-transform: none; letter-spacing: 0;
}
.pcb-chips > button > i { display: grid; place-items: center; color: #ffa838; font-style: normal; }
.pcb-chips > button.on { border-color: rgba(255, 122, 24, .35); background: rgba(255, 122, 24, .1); color: #ececf2; }

.pcb-panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------------------------------------------------------- общие блоки */

.pcb-card {
  border-radius: 16px; border: 1px solid rgba(255, 122, 24, .45); background: rgba(13, 13, 18, .9);
  box-shadow: 0 0 34px -8px rgba(255, 122, 24, .35); min-width: 0; box-sizing: border-box;
}
.pcb-pad { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.pcb-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pcb-h > i { color: #ffa838; display: grid; place-items: center; font-style: normal; }
.pcb-h > b, .pcb-title { font-size: 18px; color: #ececf2; }
.pcb-h-img { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: #0a0a0e; overflow: hidden; }
.pcb-h-img > img { width: 26px; height: 26px; object-fit: contain; }
.pcb-p { margin: 0; font-size: var(--fs-ui); line-height: 1.55; color: #b8b8c6; text-wrap: pretty; }
.pcb-in {
  display: flex; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); box-sizing: border-box;
  transition: border-color .15s;
}
.pcb-in:focus-within { border-color: rgba(255, 122, 24, .6); }
.pcb-in.bad { border-color: rgba(235, 75, 75, .7); }
.pcb-in > input {
  flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; outline: none; color: #ececf2; font: 400 var(--fs-ui)/1 var(--f-ui);
}
.pcb-in > input::placeholder, .pcb-search > input::placeholder { color: #8a8a9a; opacity: 1; }
.pcb-in > input.up { text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.pcb-in-lg { height: 54px; padding: 0 20px; border-radius: 14px; }
.pcb-in-lg > input { font-size: var(--fs-body); }

/* ---------------------------------------------------------- промокоды */

.pcb-promo { display: grid; grid-template-columns: 1.35fr 1fr; overflow: hidden; }
.pcb-col { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; min-width: 0; }
.pcb-promo > .pcb-col:first-child { border-right: 1px solid rgba(255, 122, 24, .25); }
.pcb-type {
  display: flex; align-items: center; gap: 16px; margin: 0; padding: 14px 18px; border-radius: 12px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); box-shadow: none; cursor: pointer;
  color: #ececf2; font: inherit; text-transform: none; letter-spacing: 0; transition: border-color .15s;
}
.pcb-type:hover { border-color: rgba(255, 122, 24, .6); }
.pcb-type.on { border-color: rgba(255, 122, 24, .8); background: rgba(255, 122, 24, .08); box-shadow: 0 0 22px rgba(255, 122, 24, .3); }
.pcb-dot {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .2); background: #0a0a0e; color: #180a00;
}
.pcb-type.on .pcb-dot { border-color: #ff7a18; background: linear-gradient(135deg, #ffb23d, #ff7a18); }
.pcb-type-tx { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-ui); line-height: 1.35; color: #b8b8c6; }
.pcb-type-tx b { color: #ffa838; font: 600 var(--fs-ui)/1.35 var(--f-ui); }
.pcb-kv {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
}
.pcb-kv > span { font-size: var(--fs-body); color: #b8b8c6; }
.pcb-kv > b {
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: #0a0a0e;
  color: #ececf2; font-size: var(--fs-ui); line-height: 1;
}
.pcb-code-in > input { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pcb-code-in > span { font-size: var(--fs-cap); color: var(--tx-3); white-space: nowrap; }
.pcb-create { height: 56px; margin-top: auto; font-size: 18px; box-shadow: 0 0 28px rgba(255, 122, 24, .5); }

.pcb-empty-big { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 20px 30px; }
.pcb-empty-big > svg { color: var(--tx-3); margin-bottom: 8px; }
.pcb-empty-big > b { font-size: 19px; color: #ececf2; }
.pcb-empty-big > p { margin: 0; max-width: 340px; font-size: var(--fs-body); line-height: 1.55; color: #b8b8c6; text-wrap: pretty; }

/* Партнёрская ссылка: выбор промокода, сама ссылка и «Копировать». */
.pcb-link-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }
.pcb-link-card > .pcb-h { margin-bottom: 0; }
.pcb-link-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pcb-link-sel { flex: none; width: 170px; padding: 0 10px 0 14px; }
.pcb-link-sel > select {
  flex: 1; min-width: 0; height: 46px; min-height: 0; margin: 0; padding: 0 !important; border: 0;
  background: transparent; box-shadow: none; align-self: center;
  color: #ffa838; font: 700 var(--fs-body)/46px var(--f-hd); letter-spacing: .08em; outline: none; cursor: pointer;
}
.pcb-link-sel option { background: #121216; color: #ececf2; }
.pcb-link-in { flex: 1; min-width: 220px; }
.pcb-link-in > input { font: 500 var(--fs-ui)/1 var(--f-ui); color: #ececf2; }
.pcb-link-go { height: 48px; padding: 0 22px; font-size: var(--fs-body); }
@media (max-width: 880px) { .pcb-link-sel, .pcb-link-go { flex: 1; } }
.pcb-codes { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; border-color: rgba(255, 122, 24, .3); box-shadow: 0 0 34px -8px rgba(255, 122, 24, .25); }
.pcb-codes-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pcb-codes-h > b { font-size: 18px; color: #ececf2; }
.pcb-codes-h > span { font-size: var(--fs-label); color: #8a8a9a; }
.pcb-code-row {
  display: grid; grid-template-columns: 150px 1fr auto auto; align-items: center; gap: 14px;
  padding: 12px 14px 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03); animation: pcbRow .35s ease both; transition: border-color .15s;
}
.pcb-code-row:hover { border-color: rgba(255, 122, 24, .5); }
.pcb-code { font-size: 18px; letter-spacing: .1em; color: #ffa838; text-shadow: 0 0 14px rgba(255, 122, 24, .4); overflow: hidden; text-overflow: ellipsis; }
.pcb-code-t { font-size: var(--fs-label); color: #b8b8c6; min-width: 0; }
.pcb-code-n { font-size: var(--fs-label); color: #8a8a9a; white-space: nowrap; }
.pcb-code-b { display: flex; gap: 8px; justify-content: flex-end; }
.pcb-copy {
  height: 36px; margin: 0; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255, 122, 24, .45);
  background: rgba(255, 122, 24, .1); box-shadow: none; color: #ffa838; cursor: pointer;
  font: 700 var(--fs-label)/1 var(--f-hd); letter-spacing: .06em; text-transform: none;
}
.pcb-copy:hover { background: rgba(255, 122, 24, .2); }
.pcb-del {
  width: 36px; height: 36px; margin: 0; padding: 0; display: grid; place-items: center; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .12); background: transparent; box-shadow: none; color: #8a8a9a; cursor: pointer;
}
.pcb-del:hover { color: #eb4b4b; border-color: rgba(235, 75, 75, .5); }

/* ---------------------------------------------------------- материалы */

.pcb-lead { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.pcb-lead > i { color: #ffa838; display: grid; place-items: center; font-style: normal; }
.pcb-lead > b { font-size: var(--fs-body); color: #ececf2; }
.pcb-mat { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; padding: 24px; }
.pcb-mat-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pcb-mat-col:last-child { gap: 14px; }
.pcb-tw {
  position: relative; width: 100%; aspect-ratio: 3 / 5; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: #0a0a0e; border: 1px solid rgba(255, 122, 24, .35);
}
.pcb-tw-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(1.15) brightness(.85); }
.pcb-tw-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 7, 10, .3), transparent 35%, rgba(7, 7, 10, .25) 70%, rgba(7, 7, 10, .85)); }
.pcb-tw-logo { position: absolute; left: 0; right: 0; top: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pcb-tw-logo > img { width: 64px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255, 122, 24, .7)); }
.pcb-tw-logo > span { display: flex; align-items: baseline; gap: 2px; font-family: var(--f-hd); font-weight: 700; line-height: 1; white-space: nowrap; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.pcb-tw-logo > span > span { font-size: 26px; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.pcb-tw-logo em { display: inline-block; font-style: normal; font-size: 28px; color: #ffcc33; -webkit-text-stroke: 1px #ff8a00; paint-order: stroke fill; transform: skewX(-8deg); }
.pcb-tw-code { position: absolute; left: 14px; top: 32%; z-index: 2; display: flex; flex-direction: column; gap: 6px; transform: rotate(-6deg); }
.pcb-tw-code > small {
  align-self: flex-start; padding: 5px 10px; border-radius: 6px; background: #ffa838; color: #180a00;
  font: 700 var(--fs-cap)/1 var(--f-hd); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 0 14px rgba(255, 122, 24, .6);
}
.pcb-tw-code > b {
  padding: 12px 20px; border-radius: 999px; background: linear-gradient(135deg, #ffb23d, #ff5c00); color: #180a00;
  font-size: 22px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 122, 24, .5);
}
.pcb-tw-mascot { position: absolute; left: 50%; bottom: -2%; width: 118%; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .85)); }
.pcb-tw-bonus { position: absolute; right: 12px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; transform: rotate(-6deg); }
.pcb-tw-bonus > small {
  padding: 5px 10px; border-radius: 6px; background: #0a0a0e; border: 1px solid rgba(255, 122, 24, .6); color: #ffa838;
  font: 700 var(--fs-cap)/1 var(--f-hd); letter-spacing: .2em; text-transform: uppercase;
}
.pcb-tw-bonus > b {
  padding: 12px 20px; border-radius: 999px; background: #0a0a0e; border: 1.5px dashed #ffa838; color: #ffa838;
  font-size: 20px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}
.pcb-mat-col > .pcb-cta { height: 54px; border-radius: 14px; box-shadow: 0 0 24px rgba(255, 122, 24, .45); }
.pcb-icon-btn {
  margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; box-sizing: border-box;
  border: 1px solid rgba(255, 122, 24, .45); background: rgba(255, 122, 24, .1); color: #ffa838;
}
.pcb-icon-btn:hover { background: rgba(255, 122, 24, .2); color: #ffa838; }
.pcb-mat-col > .pcb-h { margin-bottom: 0; }
.pcb-ban { position: relative; width: 100%; aspect-ratio: 2044 / 788; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 122, 24, .3); background: #0a0a0e; }
.pcb-ban > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcb-note { padding: 0 4px; font-size: var(--fs-label); color: #8a8a9a; }

/* ---------------------------------------------------------- видео */

.pcb-vtabs {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 8px; border-radius: 14px;
  border: 1px solid rgba(255, 122, 24, .3); background: rgba(13, 13, 18, .85);
}
.pcb-vtabs > button {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; margin: 0; padding: 0 16px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; box-shadow: none; cursor: pointer;
  color: #a2a2b2; font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .03em; text-transform: none;
}
.pcb-vtabs > button > i { color: #ffa838; display: grid; place-items: center; font-style: normal; }
.pcb-vtabs > button:hover { color: #ececf2; }
.pcb-vtabs > button.on { border-color: rgba(255, 122, 24, .6); background: rgba(255, 122, 24, .12); color: #ececf2; }
.pcb-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcb-rate {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 122, 24, .28); background: rgba(255, 255, 255, .03); transition: border-color .15s;
}
.pcb-rate:hover { border-color: rgba(255, 122, 24, .6); }
.pcb-rate-ic { flex: none; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: #0a0a0e; }
.pcb-rate-ic > img { width: 28px; height: 28px; object-fit: contain; }
.pcb-rate-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pcb-rate-tx > b { font-size: var(--fs-body); line-height: 1.2; color: #ececf2; }
.pcb-rate-tx > small { font-size: var(--fs-cap); color: #8a8a9a; }
.pcb-rate-p { flex: none; font-size: 22px; color: #ffa838; text-shadow: 0 0 14px rgba(255, 122, 24, .5); white-space: nowrap; }
.pcb-cta-sm { align-self: flex-start; height: 48px; padding: 0 22px; font-size: var(--fs-body); }
.pcb-cta-sm > span { font-size: 18px; line-height: 1; }

.pcb-filters, .pcb-vbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pcb-search {
  flex: 1; min-width: 240px; display: flex; align-items: center; height: 48px; margin: 0; padding: 0 18px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(13, 13, 18, .85);
}
.pcb-search > input {
  flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: transparent;
  box-shadow: none; outline: none; color: #ececf2; font: 400 var(--fs-ui)/1 var(--f-ui);
}
.pcb-pill {
  height: 48px; margin: 0; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(13, 13, 18, .85); box-shadow: none; color: #ececf2; cursor: pointer;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: 0; text-transform: none;
}
.pcb-pill.on { border-color: rgba(255, 122, 24, .6); background: rgba(255, 122, 24, .12); color: #ffa838; }
.pcb-vf { height: 44px; }
.pcb-vf.on { border-color: #ffa838; background: linear-gradient(135deg, #ffb23d, #ff7a18); color: #180a00; box-shadow: 0 0 18px rgba(255, 122, 24, .4); }
.pcb-date {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(13, 13, 18, .85);
  color: #ececf2; font: 600 var(--fs-ui)/1 var(--f-ui); white-space: nowrap;
}
.pcb-date > svg { color: #ffa838; }
.pcb-addbtn { flex: 1; min-width: 200px; height: 48px; padding: 0 22px; gap: 12px; }
.pcb-add { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px; animation: pcbRow .3s ease both; }
.pcb-add > .pcb-in { flex: 1; min-width: 220px; }
.pcb-fmts { display: flex; gap: 6px; flex-wrap: wrap; }
.pcb-fmt {
  height: 48px; margin: 0; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03); box-shadow: none; color: #b8b8c6; cursor: pointer;
  font: 600 var(--fs-label)/1 var(--f-ui); text-transform: none; letter-spacing: 0;
}
.pcb-fmt.on { border-color: rgba(255, 122, 24, .7); background: rgba(255, 122, 24, .12); color: #ffa838; }
.pcb-send { height: 48px; padding: 0 22px; font-size: var(--fs-body); box-shadow: none; }

.pcb-thead {
  display: grid; gap: 12px; padding: 6px 22px 0; margin-bottom: -10px;
  font: 600 var(--fs-cap)/1.3 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3);
}
.pcb-thead > span:last-child { text-align: right; }
.pcb-vcols, .pcb-vrow { grid-template-columns: 1.6fr 1fr .9fr .8fr .9fr .9fr .8fr; }
.pcb-pcols, .pcb-prow { grid-template-columns: .7fr 1.1fr 1.3fr 1fr 1.1fr .8fr; }
.pcb-prow .pcb-nick { font-weight: 600; color: #ececf2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pcb-table { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 200px; }
.pcb-vrow, .pcb-prow {
  display: grid; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  animation: pcbRow .35s ease both; font-size: var(--fs-label); color: #b8b8c6; transition: border-color .15s;
}
.pcb-prow:not(.pcb-total):hover { border-color: rgba(255, 122, 24, .5); }
.pcb-vrow > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-ui); color: #ececf2; }
.pcb-vrow > b { text-align: right; font-size: var(--fs-body); color: #ffa838; }
.pcb-st {
  justify-self: start; padding: 5px 10px; border-radius: 6px; font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; white-space: nowrap;
  border: 1px solid rgba(255, 168, 56, .45); color: #ffa838; background: rgba(255, 122, 24, .1);
}
.pcb-st.rj { border-color: rgba(235, 75, 75, .5); color: #eb4b4b; background: rgba(235, 75, 75, .1); cursor: help; }
.pcb-st.pd { border-color: rgba(53, 208, 127, .45); color: #7ce4ae; background: rgba(53, 208, 127, .1); }
.pcb-prow > b:first-child { font-size: var(--fs-body); color: #ececf2; letter-spacing: .04em; }
.pcb-mail { font-family: var(--f-ui); letter-spacing: .04em; color: #ececf2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcb-prow span > b { color: #ececf2; font-size: var(--fs-ui); }
.pcb-prow em { font-style: normal; color: var(--tx-3); }
.pcb-ngr { text-align: right; font-size: var(--fs-body); color: #ffa838; }
.pcb-ngr.neg { color: #eb4b4b; }
.pcb-total { margin-top: 4px; padding: 14px 10px 6px; border: 0; border-top: 1px solid rgba(255, 122, 24, .3); border-radius: 0; background: transparent; animation: none; }
.pcb-total > b:first-child { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: #8a8a9a; }
.pcb-total > span { color: #8a8a9a; }
.pcb-total > .pcb-ngr { font-size: 16px; text-shadow: 0 0 12px rgba(255, 122, 24, .4); }
.pcb-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 34px 20px; }
.pcb-empty-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: #ececf2; margin-bottom: 10px; }
.pcb-empty > b { font-size: 16px; color: #ececf2; }
.pcb-empty > p { margin: 0; max-width: 360px; font-size: var(--fs-ui); line-height: 1.5; color: #8a8a9a; text-wrap: pretty; }
.pcb-empty > .pcb-cta { align-self: center; margin-top: 12px; height: 44px; padding: 0 20px; border-radius: 10px; }

.pcb-links { display: flex; gap: 10px; flex-wrap: wrap; }
.pcb-link {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #ececf2;
  font: 700 var(--fs-body)/1 var(--f-hd); text-decoration: none; transition: border-color .15s, color .15s;
}
.pcb-link:hover { border-color: rgba(255, 122, 24, .55); color: #ffa838; }
.pcb-link > img { width: 18px; height: 18px; object-fit: contain; }
.pcb-studio { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; border-color: rgba(255, 122, 24, .35); background: rgba(8, 8, 11, .95); box-shadow: 0 0 34px -8px rgba(255, 122, 24, .3); }
.pcb-optgrid { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px 16px; }
.pcb-opt-k { font: 600 var(--fs-cap)/1.3 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.pcb-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pcb-opt {
  height: 44px; margin: 0; padding: 0 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05); box-shadow: none; color: #ececf2; cursor: pointer;
  font: 700 var(--fs-ui)/1 var(--f-hd); text-transform: none; letter-spacing: 0;
}
.pcb-opt.on { border-color: #ffa838; background: linear-gradient(135deg, rgba(255, 178, 61, .9), rgba(255, 122, 24, .9)); color: #180a00; box-shadow: 0 0 18px rgba(255, 122, 24, .4); }
.pcb-player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0a0a0e; border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; }
.pcb-stage { position: relative; flex: 1; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, #131318, #07070a 75%); }
.pcb-stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: blur(2px); }
.pcb-stage-m { position: absolute; left: 4%; bottom: 0; height: 78%; max-width: none; object-fit: contain; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .85)); }
.pcb-stage-tx {
  position: relative; z-index: 2; max-width: 56%; margin-left: 30%; padding: 18px 24px; border-radius: 14px;
  background: rgba(10, 10, 14, .8); border: 1px solid rgba(255, 122, 24, .45); box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  font: 700 clamp(16px, 2vw, 24px)/1.25 var(--f-hd); color: #ececf2; text-align: center; text-wrap: pretty;
}
.pcb-play {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; margin: 0; padding: 0;
  border-radius: 50%; border: 0; background: rgba(255, 122, 24, .9); color: #180a00; display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 0 34px rgba(255, 122, 24, .6);
}
.pcb-play:hover { background: #ffa838; }
.pcb-voice {
  position: absolute; right: 16px; top: 14px; z-index: 2; padding: 6px 10px; border-radius: 6px;
  background: rgba(10, 10, 14, .8); border: 1px solid rgba(255, 255, 255, .1);
  font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: #ffa838;
}
.pcb-ctrl { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; background: #0d0d12; border-top: 1px solid rgba(255, 255, 255, .06); color: #ececf2; font-size: var(--fs-label); }
.pcb-ctrl > button { width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: #ececf2; cursor: pointer; display: grid; place-items: center; }
.pcb-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); position: relative; overflow: hidden; }
.pcb-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #ffa838; transition: width .3s linear; }
.pcb-dls { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.pcb-dls > a { height: 56px; padding: 0 28px; gap: 12px; border-radius: 14px; }
.pcb-ghost-btn {
  display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06);
  color: #ececf2; font: 700 16px/1 var(--f-hd); text-decoration: none; box-sizing: border-box; transition: border-color .15s;
}
.pcb-ghost-btn:hover { border-color: rgba(255, 122, 24, .55); color: #ececf2; }
.pcb-demo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03);
}
.pcb-demo > span { display: flex; flex-direction: column; gap: 2px; }
.pcb-demo > span > b { font-size: 24px; line-height: 1; color: #ffa838; text-shadow: 0 0 14px rgba(255, 122, 24, .5); }
.pcb-demo > span > small { font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: #8a8a9a; }
.pcb-demo > .pcb-cta { margin-left: auto; align-self: center; height: 46px; padding: 0 20px; border-radius: 10px; }
.pcb-faq { display: flex; flex-direction: column; gap: 10px; }
.pcb-q { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(13, 13, 18, .9); transition: border-color .15s, box-shadow .15s; }
.pcb-q.on { border-color: rgba(255, 122, 24, .5); box-shadow: 0 0 26px -8px rgba(255, 122, 24, .35); }
.pcb-q > button {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 18px 20px; border: 0; background: transparent;
  box-shadow: none; color: #ececf2; font: 600 var(--fs-body)/1.3 var(--f-ui); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.pcb-q > button > span {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #ececf2; font: 700 18px/1 var(--f-hd);
}
.pcb-q.on > button > span { background: #ff7a18; color: #180a00; }
.pcb-a {
  margin: 0 20px 18px; padding: 16px 20px; border-radius: 12px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06); font-size: var(--fs-ui); line-height: 1.6; color: #b8b8c6; text-wrap: pretty;
  animation: pcbRow .25s ease both;
}

/* ---------------------------------------------------------- ещё не партнёр */

.pcb-join {
  max-width: 520px; margin: 60px auto; padding: 36px 28px; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; border-radius: 18px; border: 1px solid rgba(255, 122, 24, .45);
  background: rgba(13, 13, 18, .9); box-shadow: 0 0 34px -8px rgba(255, 122, 24, .35);
}
.pcb-join > img { width: 180px; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .8)); }
.pcb-join > b { font: 700 24px/1.2 var(--f-hd); color: #ececf2; }
.pcb-join > p { margin: 0; max-width: 380px; font-size: var(--fs-body); line-height: 1.55; color: #b8b8c6; }
.pcb-join-b { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.pcb-join-b > button { height: 52px; margin: 0; padding: 0 30px; border-radius: 12px; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

/* ---------------------------------------------------------- телефон */

@media (max-width: 880px) {
  #page-partner.pcb { margin: -12px -12px 0; }
  .pcb-shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pcb-side, .pcb-mascot, .pcb-chest { display: none; }
  .pcb-chips { display: flex; }
  .pcb-body { padding: 20px 14px 40px; }
  .pcb-stats, .pcb-promo, .pcb-mat, .pcb-rates, .pcb-optgrid { grid-template-columns: minmax(0, 1fr); }
  .pcb-promo > .pcb-col:first-child { border-right: 0; border-bottom: 1px solid rgba(255, 122, 24, .25); }
  .pcb-code-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pcb-code-t { grid-column: 1 / -1; grid-row: 2; }
  .pcb-code-n { grid-row: 1; grid-column: 2; }
  .pcb-code-b { grid-column: 1 / -1; justify-content: flex-start; }
  .pcb-vcols, .pcb-vrow, .pcb-pcols, .pcb-prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pcb-thead { display: none; }
  .pcb-vrow > b, .pcb-ngr { text-align: left; }
  .pcb-search { min-width: 0; flex-basis: 100%; }
  .pcb-date { flex: 1; justify-content: center; }
  .pcb-stage-tx { max-width: 60%; margin-left: 34%; padding: 10px 12px; font-size: var(--fs-label); }
  .pcb-play { width: 52px; height: 52px; }
  .pcb-dls > a { flex: 1; justify-content: center; padding: 0 16px; font-size: var(--fs-ui); }
  .pcb-join { margin: 30px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pcb-code-row, .pcb-vrow, .pcb-prow, .pcb-add, .pcb-a, .pcb-online > i { animation: none; }
}

/* ============================================================ ALIVE · ОТКРЫТИЕ КЕЙСА (v3)

   По макету Case Open - Alive v3. Две секции во всю ширину колонки
   контента — без полей, скруглений и рамок: герой (ангар, кейс на подиуме,
   количество, кнопки) и «Содержимое кейса» на полу ангара, наезжающее на
   героя на 90px — переход мягкий, без линии. Брейкпоинты макета (sizes):
   телефон < 880, планшет < 1240, широкий ≥ 1240. Значения — из инлайн-стилей
   макета. Лента — общие классы rl- (см. playReels). Префикс co- проверен
   грепом. */

#page-case.co.on { display: block; max-width: none; margin: calc(-1 * var(--content-top, 20px)) -20px 0; gap: 0; }
#page-case.co [hidden] { display: none !important; }
/* Пол ангара — до самого подвала: нижние поля рабочей колонки (20px у
   контента, на телефоне ещё 18px у .main) оставляли под секцией
   «Содержимое кейса» полосу голого фона. */
.content:has(> #page-case.co.on), .main:has(> .content > #page-case.co.on) { padding-bottom: 0; }

@keyframes coSweep { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@keyframes coFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes coPopIn { 0% { opacity: 0; transform: translateY(18px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes coMascotIdle { 50% { transform: translateY(-6px); } }
@keyframes coMascotJoy {
  0%, 100% { transform: translateY(0) rotate(-4deg); } 30% { transform: translateY(-22px) rotate(-10deg); }
  60% { transform: translateY(-4px) rotate(2deg); }
}
@keyframes coSkinIn {
  0% { opacity: 0; transform: translateY(24px) scale(.7); filter: blur(8px); }
  60% { filter: blur(0); } 100% { opacity: 1; transform: none; }
}
@keyframes coRaysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes coGlowBreath { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes coShineIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7, .25); }
  100% { opacity: .75; transform: translate(-50%, -50%); }
}
/* Яркость свечения — здесь: владелец просил тусклее (было 1 ↔ .72, стало .75 ↔ .58). */
@keyframes coShinePulse { 0%, 100% { opacity: .75; } 50% { opacity: .58; } }
/* 30 кадров ленты сверху вниз и обратно (alternate — без скачка в конце
   клипа). Каждый кадр — свой ключ с удержанием (step-end): steps() на
   mask-position в Chromium сдвигал маску на полкадра, и между кадрами
   торчали куски соседних. */
@keyframes coShineRun {
  0% { -webkit-mask-position: 0 0%; mask-position: 0 0%; }
  3.333% { -webkit-mask-position: 0 3.448%; mask-position: 0 3.448%; }
  6.667% { -webkit-mask-position: 0 6.897%; mask-position: 0 6.897%; }
  10% { -webkit-mask-position: 0 10.34%; mask-position: 0 10.34%; }
  13.33% { -webkit-mask-position: 0 13.79%; mask-position: 0 13.79%; }
  16.67% { -webkit-mask-position: 0 17.24%; mask-position: 0 17.24%; }
  20% { -webkit-mask-position: 0 20.69%; mask-position: 0 20.69%; }
  23.33% { -webkit-mask-position: 0 24.14%; mask-position: 0 24.14%; }
  26.67% { -webkit-mask-position: 0 27.59%; mask-position: 0 27.59%; }
  30% { -webkit-mask-position: 0 31.03%; mask-position: 0 31.03%; }
  33.33% { -webkit-mask-position: 0 34.48%; mask-position: 0 34.48%; }
  36.67% { -webkit-mask-position: 0 37.93%; mask-position: 0 37.93%; }
  40% { -webkit-mask-position: 0 41.38%; mask-position: 0 41.38%; }
  43.33% { -webkit-mask-position: 0 44.83%; mask-position: 0 44.83%; }
  46.67% { -webkit-mask-position: 0 48.28%; mask-position: 0 48.28%; }
  50% { -webkit-mask-position: 0 51.72%; mask-position: 0 51.72%; }
  53.33% { -webkit-mask-position: 0 55.17%; mask-position: 0 55.17%; }
  56.67% { -webkit-mask-position: 0 58.62%; mask-position: 0 58.62%; }
  60% { -webkit-mask-position: 0 62.07%; mask-position: 0 62.07%; }
  63.33% { -webkit-mask-position: 0 65.52%; mask-position: 0 65.52%; }
  66.67% { -webkit-mask-position: 0 68.97%; mask-position: 0 68.97%; }
  70% { -webkit-mask-position: 0 72.41%; mask-position: 0 72.41%; }
  73.33% { -webkit-mask-position: 0 75.86%; mask-position: 0 75.86%; }
  76.67% { -webkit-mask-position: 0 79.31%; mask-position: 0 79.31%; }
  80% { -webkit-mask-position: 0 82.76%; mask-position: 0 82.76%; }
  83.33% { -webkit-mask-position: 0 86.21%; mask-position: 0 86.21%; }
  86.67% { -webkit-mask-position: 0 89.66%; mask-position: 0 89.66%; }
  90% { -webkit-mask-position: 0 93.1%; mask-position: 0 93.1%; }
  93.33% { -webkit-mask-position: 0 96.55%; mask-position: 0 96.55%; }
  96.67% { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  100% { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
}
@keyframes coWinIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes coWinArt { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- герой */

/* Цельный фон страницы: верх — ангар с подиумом (он закрывает героя, как
   прежде hangar-top), ниже — тот же пол под списком, к низу гаснет в цвет
   страницы. Ширина — не меньше, чем нужно, чтобы ангар закрыл героя по
   высоте (--co-hero-h ставит case.js; 1.46 — ширина к высоте героя). */
/* Рамка фона — по колонке героя и списка: правая лента «Сейчас выпало»
   стоит на своём тёмном фоне, ангар не уезжает под неё. */
.co-page-bgbox { position: absolute; top: 0; bottom: 0; left: 0; width: var(--co-hero-w, 100%); z-index: -1; overflow: hidden; pointer-events: none; }
.co-page-bg {
  position: absolute; top: var(--co-bg-top, 0px); left: 50%; transform: translateX(-50%);
  width: max(100%, calc(var(--co-hero-h, 660px) * 1.46)); height: auto; max-width: none; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.co-hero {
  position: relative; z-index: 2; width: 100%; box-sizing: border-box; overflow: hidden;
  min-height: 660px; display: flex; flex-direction: column; background: transparent;
  color: #ececf2; font: 400 var(--fs-ui)/1.5 var(--f-ui); font-variant-numeric: tabular-nums;
}
/* Тень героя: сверху — под заголовок; снизу не в сплошную черноту, как
   было при двух картинках, а лишь чуть темнее — пол дальше общий. */
.co-hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 6, 10, .78) 0%, rgba(6, 6, 10, .22) 26%, rgba(6, 6, 10, .2) 60%, rgba(8, 8, 14, .38) 100%);
}
.co-hero-ac {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--ac, #ff7a18) 13%, transparent), transparent 62%);
}
.co-flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 46%, var(--fc, rgba(255, 168, 56, .4)), transparent 65%);
}
.co-flash.on { animation: coFlash 1.1s ease-out both; }
.co-fx { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; }

/* Надпись слева сверху (лого + «More skins / Bigger wins») убрана по просьбе
   владельца — лишняя доп-информация на экране открытия кейса. */
.co-brand { display: none; }
.co-brand-dead { position: absolute; left: 26px; top: 24px; z-index: 4; flex-direction: column; gap: 22px; pointer-events: none; }
.co-brand-logo { display: flex; align-items: center; gap: 10px; }
.co-brand-logo > img { width: 44px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 122, 24, .55)); }
.co-brand-logo > span { display: flex; align-items: baseline; gap: 1px; font: 700 21px/1 var(--f-hd); letter-spacing: -.02em; color: #ececf2; white-space: nowrap; }
.co-brand-logo em {
  display: inline-block; margin-left: 1px; font-style: normal; font-size: 22px; color: #ffcc33; -webkit-text-stroke: 1px #ff8a00;
  paint-order: stroke fill; text-shadow: 0 1px 0 #f08400, 0 2px 0 #c06200, 0 4px 6px rgba(0, 0, 0, .5); transform: skewX(-8deg);
}
.co-brand-logo i { font-style: normal; }
.co-slogan {
  display: flex; flex-direction: column; margin-left: 6px; transform: rotate(-6deg); transform-origin: left center;
  font: 700 30px/.95 var(--f-hd); letter-spacing: .02em; text-transform: uppercase; color: #ff7a18;
  text-shadow: 0 0 18px rgba(255, 122, 24, .55), 0 3px 14px rgba(0, 0, 0, .8);
}

/* Плашка справа сверху (CASE ID / OPENED / DROP VALUE) убрана по просьбе
   владельца — лишняя информация на экране открытия кейса. */
.co-info { display: none; }
.co-info-dead {
  position: absolute; right: 22px; top: 24px; z-index: 4; min-width: 270px; box-sizing: border-box;
  flex-direction: column; gap: 9px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255, 168, 56, .28); background: rgba(10, 10, 14, .78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 44px -20px #000;
}
.co-info-r { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.co-info-r > span { font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.co-info-r > b { font: 700 var(--fs-ui)/1 var(--f-hd); color: #ececf2; white-space: nowrap; }
.co-info-r > b.or, .co-chip > b.or { color: #ffa838; }

.co-mascot {
  position: absolute; right: 7%; bottom: 112px; z-index: 3; height: 230px; width: auto; max-width: none;
  object-fit: contain; pointer-events: none; animation: coMascotIdle 4.5s ease-in-out infinite;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .85)) drop-shadow(0 0 26px rgba(255, 122, 24, .35));
}
.co-mascot.joy { animation: coMascotJoy 1.2s ease-in-out both, coMascotIdle 4.5s ease-in-out 1.2s infinite; }

.co-main {
  position: relative; z-index: 5; flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 26px 30px 34px; box-sizing: border-box;
}
.co-pill {
  display: inline-flex; align-items: center; padding: 4px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 168, 56, .55); background: rgba(10, 10, 14, .7);
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .24em; text-transform: uppercase; color: #ffa838;
}
.co-title {
  margin: 0; padding: 0; font: 700 60px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  text-align: center; text-shadow: 0 0 34px rgba(255, 122, 24, .45), 0 4px 20px rgba(0, 0, 0, .8);
}

/* Сцена опущена так, чтобы кейс стоял на подиуме ангара (поверхность
   подиума — ~64% высоты картинки, а она вписана по высоте героя), а
   количество и кнопки ушли под переднюю кромку подиума. */
.co-stage { position: relative; width: 100%; min-height: 300px; margin-top: 48px; display: grid; place-items: center; }
/* Кейс поднят на поверхность подиума: без сдвига он свисал на переднюю
   кромку (владелец: «кейсы не на платформе»). Сдвигается только кейс с
   его свечением — количество и кнопки остаются под кромкой. */
.co-idle { position: relative; display: grid; place-items: center; width: min(360px, 94%); height: 290px; transform: translateY(-18px); }
.co-pod {
  position: absolute; left: 50%; bottom: -6%; width: 104%; height: 58%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 76%, var(--ac, #ff7a18), transparent 66%); opacity: .4; filter: blur(8px);
  transition: opacity .3s;
}
/* Кейс стоит на подиуме неподвижно: и плавание вверх-вниз, и тряска на
   заряде убраны по просьбе владельца. Заряд теперь виден только светом. */
.co-case {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center; cursor: pointer;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .8)) drop-shadow(0 0 30px color-mix(in srgb, var(--ac, #ff7a18) 40%, transparent));
  transition: filter .28s ease;
}
.co-case > img, .co-case > svg, .co-case > * { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.co-hero[data-phase="arm"] .co-pod { opacity: .7; }
.co-hero[data-phase="arm"] .co-case {
  cursor: wait;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .8)) drop-shadow(0 0 62px color-mix(in srgb, var(--ac, #ff7a18) 67%, transparent));
}
#coReels { width: 100%; }

/* ---- результат в сцене ----
   Владелец, 12.10.2026: скин крупно (крупный рендер, пропорции целиком,
   object-fit: contain), за ним свечение-лучи в цвет редкости (shine-*.webp,
   выбирает case.js; платформу владелец потом снял), а оружие · износ,
   название и цена — отдельными строками ПОД картинкой, на предмет не
   ложатся. Цена — оранжевая и крупная. При двух и больше всё то же, мельче.
   На десктопе сцена фиксированной высоты (см. «сцена без прыжков»), и
   результат стоит на её дне: высокий один скин уходит вверх, в пустоту под
   заголовком, а не вниз на кнопки. */
.co-drops { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 28px; width: 100%; min-width: 0; }
.co-drops.nm { gap: 16px; }
.co-drop {
  --s: 300px;
  position: relative; display: flex; flex-direction: column; align-items: center; width: 400px; max-width: 100%; box-sizing: border-box;
  container-type: inline-size;
  animation: coSkinIn .6s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0s); transition: opacity .3s;
}
.co-drops.n2 .co-drop { width: 300px; --s: 254px; }
.co-drops.nm .co-drop { width: 236px; --s: min(100cqw, 197px); }
/* Размер скина — сторона квадрата --s. Рендеры Steam квадратные, и у
   предмета сверху и снизу не меньше 13% прозрачных полей (замер 352 скинов
   каталога, 12.10.2026). Поэтому блок картинки ниже квадрата — 0.76 --s:
   квадрат выходит за блок только прозрачными полями, а сам предмет
   остаётся в блоке и на подпись под ним не ложится. Один скин — 300 px
   (было 254, владелец просил ещё +10–20%), два — 254, три–пять — до 197 и
   не шире карточки. Абсолютом, не потоком: в grid с авто-строкой height в
   процентах не срабатывал (тот же приём у .rl-art). */
.co-drop-art { position: relative; width: 100%; height: calc(var(--s) * .76); flex: none; }
.co-drop-art > img, .co-drop-art > svg {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: var(--s); height: var(--s); max-width: none; max-height: none;
  transform: translate(-50%, -50%); object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .75)) drop-shadow(0 0 16px color-mix(in srgb, var(--rc) 50%, transparent));
}
/* Свечение — два снопа лучей по бокам, середина под самим скином.
   Живое: лента из 30 кадров (shine-anim.webp, 440×236 каждый, столбиком)
   маской, лучи мерцают и растут, искры летят вверх. Цвет — редкость скина,
   с белым в сердцевине.
   Встаёт из центра, потом дышит (яркость — coShinePulse). */
.co-shine {
  position: absolute; left: 50%; top: 50%; z-index: 0; width: calc(var(--s) * 1.45); aspect-ratio: 440 / 236; pointer-events: none;
  transform: translate(-50%, -50%); opacity: .65;
  background: radial-gradient(ellipse 70% 80% at 50% 55%, color-mix(in srgb, var(--rc, #b0c3d9) 55%, #fff), var(--rc, #b0c3d9) 70%);
  -webkit-mask: url(/assets/case/shine-anim.webp) 0 0 / 100% 3000% no-repeat;
  mask: url(/assets/case/shine-anim.webp) 0 0 / 100% 3000% no-repeat;
  animation: coShineIn .7s cubic-bezier(.2, .8, .3, 1) both, coShinePulse 2.8s ease-in-out infinite, coShineRun 3s step-end infinite alternate;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + .7s), var(--d, 0s);
}
.co-drop-w {
  position: relative; max-width: 100%; margin-top: 12px; font: 400 var(--fs-label)/1.2 var(--f-hd); letter-spacing: .07em;
  text-transform: uppercase; text-align: center; color: #e2c4a2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .9);
}
.co-drop-q { color: color-mix(in srgb, var(--rc) 70%, #fff); }
.co-drop-n {
  position: relative; max-width: 100%; margin-top: 3px; font: 600 21px/1.15 var(--f-hd); text-align: center; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.co-drop-p {
  position: relative; margin-top: 6px; font: 700 27px/1 var(--f-hd); color: #ffa838; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 18px rgba(255, 138, 30, .55);
}
.co-drops:not(.n1) .co-drop-w { font-size: var(--fs-cap); }
.co-drops:not(.n1) .co-drop-n { font-size: 16px; }
.co-drops:not(.n1) .co-drop-p { font-size: 20px; }
.co-drops.nm .co-drop-sell, .co-drops.nm .co-drop-demo { max-width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: var(--fs-cap); text-align: center; }
.co-drop-sell {
  position: relative; z-index: 3; margin: 10px 0 0; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(53, 208, 127, .45); background: rgba(53, 208, 127, .1); box-shadow: none;
  color: #8ceab8; font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: 0; text-transform: none; transition: background .15s, color .15s;
}
.co-drop-sell:hover { background: #35d07f; color: #06210f; }
.co-drop.sold { opacity: .35; }
.co-drop.sold .co-drop-sell { visibility: hidden; }

/* ---- количество и кнопки ---- */
.co-counts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.co-counts > button {
  min-width: 48px; height: 48px; margin: 0; padding: 0 6px; border-radius: 10px; cursor: pointer; user-select: none;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(12, 12, 18, .75); box-shadow: none;
  color: #8a8a9a; font: 700 17px/1 var(--f-hd); letter-spacing: 0; transition: all .15s;
}
.co-counts > button:hover { border-color: #ff7a18; color: #ececf2; }
.co-counts > button.on {
  border-color: rgba(255, 168, 56, .9); color: #ffd7a8; box-shadow: 0 0 22px -6px rgba(255, 138, 42, .8);
  background: linear-gradient(180deg, rgba(255, 168, 56, .28), rgba(255, 92, 0, .18));
}
.co-counts > button:disabled { cursor: default; }

.co-btns { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.co-open {
  position: relative; overflow: hidden; height: 58px; min-width: 330px; margin: 0; padding: 0 30px; border: 0; border-radius: 12px;
  cursor: pointer; background: linear-gradient(135deg, #ffb44a, #ff6a00); color: #180a00;
  font: 700 17px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 14px 34px -10px rgba(255, 92, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .15s, opacity .2s;
}
.co-open:hover { transform: translateY(-1px); }
.co-open:active { transform: translateY(1px); }
.co-open > span { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.co-open b { font-size: 18px; }
.co-sweep {
  position: absolute; top: 0; left: -40%; width: 30%; height: 100%; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: coSweep 3.2s ease-in-out infinite;
}
.co-fast {
  height: 58px; min-width: 250px; margin: 0; padding: 0 24px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 168, 56, .45); background: rgba(12, 10, 14, .72); box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  color: #ffa838; font: 700 var(--fs-body)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; transition: background .15s, opacity .2s;
}
.co-fast:hover { background: rgba(255, 122, 24, .16); }
.co-fast b { font-size: 16px; color: #ffd7a8; }
.co-open:disabled, .co-fast:disabled { opacity: .55; cursor: wait; transform: none; }
.co-sellall {
  height: 58px; margin: 0; padding: 0 22px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(53, 208, 127, .45); background: rgba(53, 208, 127, .1); box-shadow: none;
  color: #8ceab8; font: 700 var(--fs-body)/1 var(--f-hd); letter-spacing: .04em; text-transform: none;
}
.co-sellall:hover { background: #35d07f; color: #06210f; }

.co-chips { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.co-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(10, 10, 14, .7);
  font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3);
}
.co-chip > b { font-size: var(--fs-cap); letter-spacing: 0; color: #ececf2; }
.co-owned { font-size: var(--fs-label); color: #a2a2b2; text-align: center; min-height: 0; }
.co-owned:empty { display: none; }
.co-owned b { color: #ffa838; }

/* ---------------------------------------------------------- содержимое */

.co-list { position: relative; width: 100%; box-sizing: border-box; overflow: hidden; margin-top: -90px; padding-top: 90px; background: transparent; }
/* Пол под списком — тот же фон страницы; тень только приглушает его под
   карточками, плавно, без полосы на стыке с героем. */
.co-list-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 7, 12, .38) 0, rgba(6, 7, 12, .55) 200px, rgba(6, 7, 12, .66));
}
.co-list-in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 26px; }
.co-list-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.co-list-ic {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; box-sizing: border-box;
  border: 1px solid rgba(255, 168, 56, .4); background: rgba(255, 122, 24, .12); color: #ffa838; font-size: var(--fs-ui);
}
.co-list-h > h3 { margin: 0; font: 700 17px/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #ececf2; }
/* Карточка — рама владельца (12.10.2026, вторая версия). Его картинка
   2.4:1, а карточка по образцу ~1.55:1, поэтому skin-frame.webp собран
   заранее: правая часть рамы с «E» как есть, левый край с косыми линиями —
   из левой части, шов растушёван левее «E». Пропорция карточки — ровно
   пропорция файла: рама нарисована в картинке, любое другое соотношение её
   растянет. Высоту задаёт ширина, а число колонок — ширина сетки: не уже
   300 px (на 2560 — шесть колонок, на 1440 — три). Скин по центру рамы,
   подпись и шанс — строкой под ним. Подпись — по образцу владельца: Segoe
   UI, название полужирным, оружие обычным в разрядку, тёплым бежевым; кегль
   — доля ширины карточки (cqw). Слева от подписи — черта цвета редкости. */
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.co-card { position: relative; aspect-ratio: 1084 / 698; container-type: inline-size; transition: transform .18s; }
.co-card:hover { transform: translateY(-3px); }
.co-card-fr { position: absolute; inset: 0; overflow: hidden; border-radius: 5.6% / 8.7%; transition: filter .2s; }
/* Рама отдельным слоем: затемняется она одна, скин и подпись — нет.
   Владелец: «слишком яркие и броские» (12.10.2026). Под мышью — светлее. */
.co-card-fr::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url(/assets/case/skin-frame.webp) center / 100% 100% no-repeat;
  filter: brightness(.7) saturate(.85); transition: filter .2s;
}
.co-card:hover .co-card-fr::before, .co-card.peek .co-card-fr::before { filter: brightness(.84) saturate(.92); }
.co-card.hit .co-card-fr { filter: drop-shadow(0 0 14px var(--rc)); }
/* Редкость — светом за скином и чертой у подписи: рама оранжевая у всех. */
.co-card-glow {
  position: absolute; left: 50%; top: 42%; width: 70%; height: 90%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse, var(--rc), transparent 62%); opacity: .2; transition: opacity .2s;
}
.co-card:hover .co-card-glow, .co-card.peek .co-card-glow { opacity: .34; }
.co-card.hit .co-card-glow { opacity: .45; }
/* Блок картинки — где может быть сам предмет: от верха рамы до подписи.
   Квадратный рендер выше блока на 15%: лишнее — прозрачные поля (у
   предмета их не меньше 13% сверху и снизу), так что скин крупнее на те же
   15%, а подписи не касается даже при увеличении под мышью. */
.co-card-art { position: absolute; left: 7%; right: 7%; top: 4%; bottom: 26%; }
.co-card-art > img {
  position: absolute; left: 50%; top: 50%; width: auto; height: 115%; aspect-ratio: 1; max-width: none;
  transform: translate(-50%, -50%); object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .75)); transition: transform .25s;
}
.co-card-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .25s; }
.co-card:hover .co-card-art > img { transform: translate(-50%, -50%) scale(1.05); }
.co-card:hover .co-card-art > svg { transform: scale(1.05); }
.co-card-tx {
  position: absolute; left: 6%; right: 7%; bottom: 10.5%; padding-left: clamp(11px, 4cqw, 15px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}
/* Черта редкости — как на образце владельца: во всю высоту подписи, со
   скруглёнными концами и свечением своего цвета. */
.co-card-tx::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(4px, 1.6cqw, 6px); border-radius: 99px;
  background: var(--rc); box-shadow: 0 0 10px var(--rc), 0 0 3px var(--rc);
}
.co-card-w {
  font: 400 clamp(10px, 4cqw, 14.5px)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #c09c7a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-card-n {
  margin-top: .22em; font: 600 clamp(13px, 5cqw, 18.5px)/1.1 var(--f-hd); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Шанс выпадения — справа на строке подписи, где скина нет. Виден только
   по наведению, на сенсорном экране — по касанию (класс peek ставит
   case.js). Без мыши :hover залипает после касания, поэтому он включён
   только там, где наведение есть. */
.co-card-p {
  position: absolute; right: 7%; bottom: 10.5%; display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 9px;
  border: 1px solid rgba(255, 168, 56, .55); border-radius: 7px; background: rgba(12, 8, 4, .84);
  box-shadow: 0 0 16px -4px rgba(255, 122, 24, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: 700 var(--fs-ui)/1 var(--f-hd); color: #ffd7a8; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .18s;
}
.co-card-p > small { font: 600 10px/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: #a8957f; }
.co-card.peek .co-card-p { opacity: 1; transform: none; }
@media (hover: hover) {
  .co-card:hover .co-card-p { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- «Поздравляем!» (телефон) */

.co-win {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; overflow: hidden; background: #06060a;
  color: #ececf2; animation: coWinIn .45s cubic-bezier(.2, .8, .3, 1) both;
}
.co-win[hidden] { display: none; }
body.co-win-on { overflow: hidden; }
.co-win-bg {
  position: absolute; left: 50%; top: 0; width: auto; height: 100%; min-width: 100%; max-width: none;
  transform: translateX(-50%); object-fit: cover; object-position: center 42%;
}
.co-win-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 10, .72) 0%, rgba(6, 6, 10, .28) 34%, rgba(6, 6, 10, .55) 62%, rgba(6, 6, 10, .94) 100%);
}
.co-win-x {
  position: absolute; right: 16px; top: 16px; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center;
  margin: 0; padding: 0; border: 0; border-radius: 12px; background: rgba(10, 10, 14, .6); box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #ececf2; font: 300 22px/1 var(--f-ui); cursor: pointer;
}
.co-win-in { position: relative; z-index: 3; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 64px 20px 26px; }
.co-win-in > h2 {
  margin: 0; text-align: center; font: 700 27px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 26px rgba(255, 122, 24, .7);
}
.co-win-in > p { margin: 9px 0 0; text-align: center; font: 600 var(--fs-ui)/1.3 var(--f-ui); color: #e7d9cd; }
.co-win-art { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.co-win-art > i {
  position: absolute; left: 50%; top: 52%; width: 290px; height: 290px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc, #ff8a2a) 42%, transparent), transparent 66%); pointer-events: none;
  animation: coGlowBreath 3s ease-in-out infinite;
}
/* Свечение по центру — там же, где скин. */
.co-win-art > .co-shine { width: min(480px, 130%); }
.co-win-art > img, .co-win-art > svg {
  position: relative; z-index: 1; max-width: 98%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .85)); animation: coWinArt .7s cubic-bezier(.2, .8, .3, 1) both;
}
.co-win-tx { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 4px; }
.co-win-tx > span:first-child { font: 600 var(--fs-cap)/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #9a9aaa; }
.co-win-tx > b:nth-child(2) { font: 700 27px/1 var(--f-hd); color: #fff; }
.co-win-tx > b:nth-child(3) { font: 700 30px/1 var(--f-hd); color: #ffa838; }
.co-win-tx > span:last-child { font: 600 var(--fs-cap)/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.co-win-btns { position: relative; width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.co-win-btns > button {
  width: 100%; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: none;
}
.co-win-btns > button:nth-child(1) {
  min-height: 54px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ffb44a, #ff7a18); color: #180a00;
  font: 700 17px/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase;
}
.co-win-btns > button:nth-child(2) {
  min-height: 52px; border: 1px solid rgba(255, 168, 56, .42); border-radius: 14px; background: rgba(14, 12, 14, .72); color: #f0e3d6;
  font: 700 var(--fs-body)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
}
.co-win-btns > button:nth-child(2) span { color: #ffa838; }
.co-win-btns > button:nth-child(3) {
  min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: #9a9aaa;
  font: 600 var(--fs-label)/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
}

/* ---------------------------------------------------------- планшет и телефон */

@media (max-width: 1239.98px) {
  .co-hero { min-height: 600px; }
  .co-brand, .co-info { display: none; }
  .co-chips { display: flex; }
  .co-mascot { height: 190px; right: 3%; bottom: 96px; }
  .co-title { font-size: 48px; }
  .co-stage { margin-top: 38px; }
}
@media (max-width: 879.98px) {
  #page-case.co.on { margin: -12px -12px 0; }
  .co-hero { min-height: 560px; }
  .co-mascot { display: none; }
  .co-main { gap: 12px; padding: 22px 14px 26px; }
  .co-title { font-size: 38px; }
  .co-stage { min-height: 220px; margin-top: 52px; }
  /* На телефоне сдвиг сцены растит и героя, а с ним уезжает вниз и
     подиум на фоне — догнать его одним отступом нельзя. Поднимаем саму
     картинку. */
  #page-case { --co-bg-top: -70px; }
  .co-idle { width: min(260px, 94%); height: 210px; }
  .co-counts > button { min-width: 44px; height: 44px; }
  .co-open, .co-fast { width: 100%; min-width: 0; }
  .co-open { height: 54px; }
  .co-fast { height: 54px; }
  .co-sellall { width: 100%; height: 50px; }
  .co-drops.nm .co-drop { width: 140px; }
  .co-drops.n1 .co-drop { --s: min(275px, 80cqw); }
  .co-list-in { padding: 18px 14px 22px; }
  /* Две колонки: рама выходит ~176×99, подпись в ней не поместится рядом
     со скином — она уходит под раму, а скин занимает всю раму. */
  .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 9px; }
  .co-card { aspect-ratio: auto; display: flex; flex-direction: column; gap: 8px; }
  .co-card-fr { position: relative; inset: auto; aspect-ratio: 1084 / 698; }
  .co-card-art { top: 6%; bottom: 6%; left: 8%; right: 8%; }
  .co-card-tx { position: relative; left: auto; right: auto; bottom: auto; padding: 0 2px 0 11px; }
  .co-card-tx::before { width: 4px; }
  .co-card-w { font-size: var(--fs-micro); }
  .co-card-n { font-size: var(--fs-ui); }
  /* Шанс по касанию встаёт на место строки оружия (она на это время
     прячется): в раме он лёг бы на скин. */
  .co-card-p { left: 11px; right: auto; bottom: 15px; padding: 1px 6px; gap: 4px; border-radius: 5px; font-size: var(--fs-micro); }
  .co-card-p > small { font-size: 9px; }
  .co-card-w { transition: opacity .18s; }
  .co-card.peek .co-card-w { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .co-case, .co-mascot, .co-sweep, .co-shine, .co-win-art > i { animation: none; }
}

/* =====================================================================
   ALIVE · ЗАГЛУШКИ «В РАЗРАБОТКЕ» (Rocket Road, Карусель)
   Макеты handoff_wip/«… - Alive (в разработке)». Префикс wip-.
   Шрифт заголовков — общий --f-hd (Rajdhani на тайтлах владелец не
   захотел), размеры, цвета и отступы — из инлайн-стилей макета.
   ===================================================================== */
@media (min-width: 881px) {
  .content:has(> .wip-page.on) { padding: 22px 24px 40px; }
}
.wip { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1440px; margin: 0 auto; }

.wip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wip-titles { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wip-back {
  align-self: flex-start;
  font: 600 var(--fs-label)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase;
  color: #8a8a9a; text-decoration: none;
}
.wip-back:hover, .wip-back:focus-visible { color: #ff7a18; }
.wip-h1 {
  margin: 0;
  font: 700 clamp(28px, 4vw, 40px)/1 var(--f-hd); letter-spacing: .02em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff, #b9b9c8 60%, #7d7d92);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wip-tag { font: 600 var(--fs-label)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838; }
.wip-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 9px;
  border: 1px solid rgba(255, 168, 56, .5); background: rgba(255, 122, 24, .1);
  font: 600 var(--fs-label)/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: #ffa838;
  white-space: nowrap;
}
.wip-chip-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #ff7a18; box-shadow: 0 0 10px #ff7a18; animation: pulse 1.8s infinite;
}

.wip-preview {
  position: relative; width: 100%; min-height: 320px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 122, 24, .35); background: #06060a;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 0 80px -40px rgba(255, 122, 24, .5);
}
.wip-preview.wip-rr { aspect-ratio: 1277 / 584; }
.wip-preview.wip-cr { aspect-ratio: 16 / 9; }
.wip-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wip-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(5, 4, 8, .5), rgba(5, 4, 8, .8) 65%, rgba(3, 3, 5, .92));
}
.wip-over {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 24px; text-align: center;
}
.wip-h2 {
  margin: 0;
  font: 700 clamp(38px, 7vw, 96px)/.9 var(--f-hd); letter-spacing: .02em; text-transform: uppercase;
  color: #fff; text-shadow: 0 8px 40px rgba(0, 0, 0, .95), 0 0 60px rgba(255, 122, 24, .3);
}
.wip-p {
  margin: 0; max-width: 520px; font: 400 var(--fs-body)/1.6 var(--f-ui); color: #d6d6e0;
  text-wrap: pretty; text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
}

@media (max-width: 880px) {
  /* Низ не трогаем: там запас под мобильный таббар. */
  .content:has(> .wip-page.on) { padding-top: 12px; padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wip-chip-dot { animation: none; }
}

/* =====================================================================
   ALIVE · ПРЕЛОАДЕР (макет «Loading - Alive»)
   Первый экран: сцена с ракетой и маскотом, плита с прогрессом. Цвета,
   размеры и отступы — из инлайн-стилей макета. Префикс pl-.
   ===================================================================== */
.pl {
  position: fixed; inset: 0; z-index: 2147483647; overflow: hidden;
  background: #07060a; color: #ececf2; font-family: Rajdhani, Play, sans-serif;
  opacity: 1; visibility: visible; transition: opacity .45s ease, visibility .45s ease;
}
.pl.is-done { opacity: 0; visibility: hidden; }
.pl[hidden] { display: none !important; }
/* Пока экран висит, страница под ним не прокручивается. */
body.pl-lock { overflow: hidden; }

.pl-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.pl-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, rgba(0, 0, 0, 0) 30%,
              rgba(4, 3, 6, .55) 72%, rgba(4, 3, 6, .92) 100%);
}
.pl-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 3, 6, .45) 0%, rgba(4, 3, 6, 0) 22%,
              rgba(4, 3, 6, 0) 58%, rgba(4, 3, 6, .78) 100%);
}

/* Ракета: свечение и дрейф разными анимациями и без scale — иначе поехали
   бы пропорции, а макет просит их не трогать. */
.pl-rocket {
  position: absolute; right: 4.5%; top: 1%; height: 60%; width: auto;
  object-fit: contain; z-index: 2;
  animation: plRocketGlow 2.6s ease-in-out infinite, plRocketDrift 7s ease-in-out infinite;
}
@keyframes plRocketGlow {
  0%, 100% { filter: drop-shadow(0 0 34px rgba(255, 110, 20, .38)); }
  50%      { filter: drop-shadow(0 0 52px rgba(255, 140, 40, .6)); }
}
@keyframes plRocketDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.4%); }
}

.pl-stack {
  position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%);
  width: min(780px, 64%); display: flex; flex-direction: column; align-items: center;
  z-index: 3;
}
.pl-mascot {
  position: relative; z-index: 1; width: 57%; max-width: 430px; height: auto;
  object-fit: contain; margin-bottom: -3.2%;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .75)) drop-shadow(0 0 46px rgba(255, 110, 20, .28));
  animation: plMascotFloat 5.5s ease-in-out infinite;
}
@keyframes plMascotFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.1%); }
}

.pl-panel {
  position: relative; z-index: 2; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 26px 44px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(13, 11, 16, .93), rgba(8, 7, 11, .96));
  border: 1px solid rgba(255, 122, 24, .16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pl-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pl-name {
  font-weight: 700; font-size: clamp(38px, 5.6vw, 68px); line-height: .95; letter-spacing: .02em;
  background: linear-gradient(180deg, #ffffff 0%, #e6e6ee 42%, #a9a9b6 72%, #7d7d8a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 18px rgba(255, 255, 255, .08);
}
/* text-indent повторяет letter-spacing: межбуквенный хвост справа иначе
   уводит строку влево от центра. */
.pl-tag {
  font-weight: 600; font-size: clamp(12px, 1.35vw, 17px);
  letter-spacing: .52em; text-indent: .52em; text-transform: uppercase; color: #ff7a18;
}

.pl-progress { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pl-row { width: 100%; display: flex; align-items: center; gap: 20px; }
.pl-track {
  flex: 1; min-width: 0; position: relative; height: clamp(14px, 1.7vw, 20px);
  border-radius: 999px; background: rgba(255, 122, 24, .13);
  border: 1px solid rgba(255, 122, 24, .28); overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
.pl-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px;
  background: repeating-linear-gradient(115deg, #ffb04a 0 11px, #ff8a1e 11px 22px);
  box-shadow: 0 0 18px rgba(255, 138, 30, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: width .35s ease; animation: plBarStripes 1.1s linear infinite;
}
@keyframes plBarStripes { from { background-position: 0 0; } to { background-position: 44px 0; } }
.pl-pct {
  flex: none; font-weight: 700; font-size: clamp(20px, 2.6vw, 34px); line-height: 1;
  color: #ff8a1e; text-shadow: 0 0 22px rgba(255, 138, 30, .5);
  font-variant-numeric: tabular-nums;
}
.pl-status {
  font-weight: 500; font-size: clamp(10px, 1.1vw, 14px);
  letter-spacing: .4em; text-indent: .4em; text-transform: uppercase; color: #9c9ca8;
}

.pl-sep {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13) 20%,
              rgba(255, 255, 255, .13) 80%, transparent);
}
.pl-cols { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; }
.pl-col {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 6px;
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.pl-col:first-child { border-left: 0; }
.pl-col svg { width: clamp(22px, 2.6vw, 32px); height: auto; opacity: .92; }
.pl-col span {
  font-weight: 600; font-size: clamp(10px, 1.1vw, 14px);
  letter-spacing: .24em; text-indent: .24em; text-transform: uppercase; color: #b9b9c4;
}

@media (max-width: 880px) {
  /* На телефоне плита занимает почти всю ширину, поля уже. */
  .pl-stack { width: min(780px, 92%); }
  .pl-panel { padding: 18px 20px; gap: 18px; }
  /* Поля колонок уже: иначе четвёртая («ТОПЫ») не помещается. */
  .pl-col { padding: 0 2px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-rocket, .pl-mascot, .pl-fill { animation: none; }
}

/* ============================================================ ALIVE · МОНЕТА И ВАЛЮТА

   Монета вместо знака валюты вернулась во все цены — это делает money.js,
   и почти везде хватает правил .coin из начала файла. Здесь только те
   места, где монета встала в чужую коробку, рассчитанную под один символ:
   значок в чипе «Банк», приставка в полях ставки, вывода и пополнения,
   кнопка продажи в инвентаре, иконки разделов помощи.

   Общее у всех: там монета не цена, а значок. Ей не нужны ни правый
   отступ (за ней не идёт число), ни опускание под базовую линию (её
   центрует сама коробка). */

.ra-chip-ic > .coin, .sta-cat > .coin, .sta-ic > .coin,
.pra-it-act > button.s > .coin, .rbp-in > .coin,
.pwd-amt > .coin, .dpa-own > .coin { margin-right: 0; vertical-align: 0; }

.ra-chip.bank .ra-chip-ic > .coin { width: 18px; height: 18px; }
.sta-cat > .coin, .sta-ic > .coin { width: 1.05em; height: 1.05em; }
.pra-it-act > button.s > .coin { width: 15px; height: 15px; }
.pwd-amt > .coin, .dpa-own > .coin { flex: none; width: 18px; height: 18px; }

/* Приставка в поле ставки стоит абсолютом. У текстового «$» середину
   держала базовая линия соседнего текста, у картинки её нет: центруем
   сами, иначе монета прилипает к верхнему краю рамки.

   z-index обязателен. Само поле — input[type=number], а такие поля ловит
   правило «выпуклого стекла» с backdrop-filter: blur(7px), и размывается
   всё, что лежит ПОД полем. Приставка лежала там же и превращалась в
   рыжее пятно; текстовый «$» это переживал, картинка — нет. Поднимаем
   монету над полем; клики она не перехватывает — pointer-events ей
   снимает общее правило .rbp-in > span. */
.rbp-in > .coin {
  top: 50%; left: 10px; width: 16px; height: 16px; transform: translateY(-50%);
  z-index: 1;
}

/* Кнопка быстрого номинала: у контейнера gap, и вместе с отбивкой монеты
   он разводил значок и число на семь пикселей. */
.dpa-amts > .dep-amt { gap: 0; }

/* ============================================================ ALIVE · ДЕМО-РЕЖИМ КЕЙСА

   Тумблер у названия, значок над подиумом и холодная окраска сцены. Демо
   обязано читаться с одного взгляда: из двух возможных ошибок «думал, что
   демо, а списались деньги» стоит дороже всех прочих решений на этой
   странице. Цвет — --blue, единственный холодный в палитре: оранжевый здесь
   занят боевым открытием, и второй оранжевый режим был бы неотличим. */

/* Тумблер и подпись столбиком: сбоку подпись упиралась в тень заголовка и
   читалась как обрывок чужой строки. */
.co-mode { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.co-mode[hidden] { display: none; }
.co-mode-sw {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; margin: 0; padding: 0 16px 0 10px;
  border-radius: 999px; cursor: pointer; box-shadow: none;
  border: 1px solid var(--line-2); background: var(--panel-a);
  color: var(--tx-2); font: 700 var(--fs-cap)/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--t-ui), border-color var(--t-ui), background var(--t-ui);
}
.co-mode-sw > i {
  position: relative; width: 34px; height: 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); transition: background var(--t-ui);
}
.co-mode-sw > i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #6a7180; transition: transform var(--t-ui), background var(--t-ui);
}
.co-mode-sw:hover { color: var(--tx); border-color: color-mix(in srgb, var(--blue) 50%, transparent); }
.co-mode-sw.on {
  color: #cfe6ff; border-color: color-mix(in srgb, var(--blue) 70%, transparent);
  background: color-mix(in srgb, var(--blue) 14%, var(--panel-a));
}
.co-mode-sw.on > i { background: color-mix(in srgb, var(--blue) 45%, transparent); }
.co-mode-sw.on > i::after { transform: translateX(16px); background: var(--blue); }
.co-mode-sw:disabled { cursor: wait; opacity: .6; }
.co-mode-note { font-size: var(--fs-label); color: var(--tx-2); text-align: center; }

.co-demo-tag {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 60%, transparent);
  background: color-mix(in srgb, var(--blue) 18%, rgba(8, 10, 16, .82));
  color: #dceaff; font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .3em; text-transform: uppercase;
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--blue) 70%, transparent);
}
.co-demo-tag[hidden] { display: none; }

/* Акцент кейса в демо уведён в синий: подиум, свет вокруг кейса и кнопки
   перестают быть оранжевыми, и два режима не спутать краем глаза. */
#page-case[data-demo="1"] { --ac: #4b9bff; }
#page-case[data-demo="1"] .co-pod { opacity: .32; }
#page-case[data-demo="1"] .co-pill {
  border-color: color-mix(in srgb, var(--blue) 55%, transparent); color: #9fc9ff;
}
#page-case[data-demo="1"] .co-open {
  background: linear-gradient(135deg, #7cbcff, #2f6fd0); color: #05152a;
  box-shadow: 0 14px 34px -10px rgba(75, 155, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
#page-case[data-demo="1"] .co-fast {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent); color: #9fc9ff;
}
#page-case[data-demo="1"] .co-fast:hover { background: color-mix(in srgb, var(--blue) 16%, transparent); }
#page-case[data-demo="1"] .co-fast b { color: #dceaff; }
#page-case[data-demo="1"] .co-counts > button.on {
  border-color: color-mix(in srgb, var(--blue) 75%, transparent); color: #dceaff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 28%, transparent),
                              color-mix(in srgb, var(--blue) 14%, transparent));
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--blue) 80%, transparent);
}
#page-case[data-demo="1"] .co-counts > button:hover { border-color: var(--blue); }

/* Результат демо: продавать нечего, вместо кнопки — честная подпись. */
.co-drop-demo {
  position: relative; z-index: 3; margin: 8px 0 0; padding: 8px 16px; border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--blue) 45%, transparent);
  color: #9fc9ff; font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: 0; text-transform: none;
}
.co-sellall.co-real {
  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, transparent); color: #cfe6ff;
}
.co-sellall.co-real:hover { background: var(--blue); color: #04101f; }

@media (max-width: 879.98px) {
  .co-mode { gap: 8px; }
  .co-mode-note { display: none; }
}

/* ============================================================ ВИТРИНА КЕЙСОВ · ПОДСТАВКА, ФОН, ЛЕНТА СПРАВА (десктоп)
   Пример для владельца: карточки первой полки без рамки и фона, кейс стоит
   на каменной подставке (frontend/assets/ui/podstavka.webp). Снять — удалить
   этот блок целиком. */
@media (min-width: 881px) {
/* Фон страницы кейсов — ровный тёмный, как у шапки и сайдбара (#0c0c10):
   звёздное небо на этой странице выключено. Карточки без фона и рамки. */
/* Тиснение на фоне: ракеты, планета, комета (без звёзд: мелкие читались как точки) — светлая копия
   фигуры поверх тёмной со сдвигом на пиксель, контраст едва заметный. */
body:has(#page-cases.on), body:has(#page-me.on) { background: #0c0c10 url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22360%22 height=%22360%22 viewBox=%220 0 360 360%22%3E%3Cg transform=%22translate(71.2,81.2) rotate(32) scale(1.0)%22%3E%3Cpath d=%22M0,-30 C10,-18 12,4 8,16 L-8,16 C-12,4 -10,-18 0,-30 Z M-8,6 L-20,22 L-8,17 Z M8,6 L20,22 L8,17 Z M-5,17 L0,30 L5,17 Z%22 fill=%22rgba(0,0,0,.55)%22/%3E%3Ccircle cy=%22-9%22 r=%224%22 fill=%22rgba(0,0,0,.55)%22/%3E%3C/g%3E%3Cg transform=%22translate(70,80) rotate(32) scale(1.0)%22%3E%3Cpath d=%22M0,-30 C10,-18 12,4 8,16 L-8,16 C-12,4 -10,-18 0,-30 Z M-8,6 L-20,22 L-8,17 Z M8,6 L20,22 L8,17 Z M-5,17 L0,30 L5,17 Z%22 fill=%22rgba(255,255,255,.038)%22/%3E%3Ccircle cy=%22-9%22 r=%224%22 fill=%22rgba(0,0,0,.55)%22/%3E%3C/g%3E%3Cg transform=%22translate(251.2,121.2) rotate(0) scale(1.0)%22%3E%3Cpath d=%22M-16,0 a16,16 0 1,0 32,0 a16,16 0 1,0 -32,0 Z%22 fill=%22rgba(0,0,0,.55)%22/%3E%3Cellipse rx=%2228%22 ry=%227%22 transform=%22rotate(-22)%22 fill=%22none%22 stroke=%22rgba(0,0,0,.55)%22 stroke-width=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(250,120) rotate(0) scale(1.0)%22%3E%3Cpath d=%22M-16,0 a16,16 0 1,0 32,0 a16,16 0 1,0 -32,0 Z%22 fill=%22rgba(255,255,255,.038)%22/%3E%3Cellipse rx=%2228%22 ry=%227%22 transform=%22rotate(-22)%22 fill=%22none%22 stroke=%22rgba(255,255,255,.038)%22 stroke-width=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(91.2,291.2) rotate(-25) scale(1.0)%22%3E%3Cpath d=%22M0,0 a6,6 0 1,0 12,0 a6,6 0 1,0 -12,0 Z M10,-3 L46,-16 L14,2 Z M10,3 L40,14 L13,0 Z%22 fill=%22rgba(0,0,0,.55)%22/%3E%3C/g%3E%3Cg transform=%22translate(90,290) rotate(-25) scale(1.0)%22%3E%3Cpath d=%22M0,0 a6,6 0 1,0 12,0 a6,6 0 1,0 -12,0 Z M10,-3 L46,-16 L14,2 Z M10,3 L40,14 L13,0 Z%22 fill=%22rgba(255,255,255,.038)%22/%3E%3C/g%3E%3Cg transform=%22translate(281.2,281.2) rotate(-140) scale(0.8)%22%3E%3Cpath d=%22M0,-30 C10,-18 12,4 8,16 L-8,16 C-12,4 -10,-18 0,-30 Z M-8,6 L-20,22 L-8,17 Z M8,6 L20,22 L8,17 Z M-5,17 L0,30 L5,17 Z%22 fill=%22rgba(0,0,0,.55)%22/%3E%3Ccircle cy=%22-9%22 r=%224%22 fill=%22rgba(0,0,0,.55)%22/%3E%3C/g%3E%3Cg transform=%22translate(280,280) rotate(-140) scale(0.8)%22%3E%3Cpath d=%22M0,-30 C10,-18 12,4 8,16 L-8,16 C-12,4 -10,-18 0,-30 Z M-8,6 L-20,22 L-8,17 Z M8,6 L20,22 L8,17 Z M-5,17 L0,30 L5,17 Z%22 fill=%22rgba(255,255,255,.038)%22/%3E%3Ccircle cy=%22-9%22 r=%224%22 fill=%22rgba(0,0,0,.55)%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 360px 360px repeat; }
body:has(#page-cases.on) .sky, body:has(#page-me.on) .sky { display: none; }
/* На «Ракете» (crash) свой фон страницы (page.webp), а
   глобальный .sky (его картинку меняет sky.js по разделам) накладывался на
   него. Прячем — остаётся только новый фон. */
body:has(#page-crash.on) .sky { display: none; }
/* «Сейчас выпало» — живая лента карточками, прикреплена к правому краю
   контента; новые въезжают сверху. Контент страницы отступает от неё. */
#page-cases.on { padding-right: 166px; }
/* Лента прижата к правому краю окна без отступа и во всю высоту под шапкой.
   Рельс .cs-rail — абсолютный столбец у правого края ОКНА (позиционируется
   от .content, которая тянется до края, а не от центрированной страницы),
   на всю высоту контента до футера; лента внутри — sticky: едет вместе с
   прокруткой над контентом, а у нижней границы, перед футером,
   останавливается и уходит вверх вместе с ней. */
.cs-rail { position: absolute; top: 0; right: 0; bottom: 0; width: 150px; z-index: 6; }
.cs-feed {
  position: sticky; top: var(--tb-h, 64px); width: 150px; height: calc(100vh - var(--tb-h, 64px)); margin: 0;
  flex-direction: column; align-items: stretch; gap: 0; padding: 0;
  border-radius: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, .06); background: rgba(13, 13, 18, .72); overflow: hidden;
}
.cs-feed::before { display: none; }
.cs-feed-k { text-align: center; padding: 10px 0 8px; }
.cs-feed-track {
  flex: 1; min-height: 0; flex-direction: column; gap: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent);
}
.cs-drop {
  /* Как в референсе: скин крупно справа (заходит за край), подпись слева
     внизу — оружие мелко, название жирно с многоточием. */
  display: block; height: auto; aspect-ratio: 1 / 1; padding: 10px 10px 8px; text-align: left;
  border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; border-top: 3px solid var(--rc);
}
.cs-drop.in { animation: csFeedInV .55s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes csFeedInV { 0% { opacity: 0; transform: translateY(-48px) scale(.9); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* Скин — фоном на всю карточку, целиком (contain), заходит под текст; ничего
   не обрезается. Снизу тёмный градиент, чтобы подпись читалась. */
.cs-drop-art { position: absolute; inset: 0 2px 28px; width: auto; height: auto; overflow: visible; }
.cs-drop-art > *, .cs-drop-art img, .cs-drop-art svg { width: 100%; height: 100%; object-fit: contain; }
.cs-drop::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(6, 6, 9, .45) 55%, rgba(6, 6, 9, .8));
}
.cs-drop-tx { z-index: 2; }
.cs-drop-tx { position: absolute; left: 10px; right: 10px; bottom: 8px; align-items: flex-start; }
.cs-drop-tx small:not(.cs-drop-w) { display: none; }
.cs-drop-tx b { white-space: nowrap; font-size: var(--fs-label); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; }
.cs-drop-tx .cs-drop-w { font: 600 var(--fs-micro)/1.2 var(--f-hd); color: #8a8a9a; text-transform: uppercase; letter-spacing: .04em; }
.cs-drop-tx small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
/* Верх ленты: онлайн и две кнопки — весь дроп / редкий. */
.cs-feed .online { display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0; font: 600 var(--fs-label)/1 var(--f-hd); color: #c4c4d0; }
.cs-feed .online b { color: #ececf2; line-height: 1; }
.cs-feed .online .online-ic { color: #8a8a9a; display: block; }
.cs-feed .online .online-dot { display: none; }
/* Кнопки — от края до края панели, разделены косой линией: левая срезана
   справа, правая — слева, и они заходят друг под друга на ширину среза. */
.cs-feed-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(8, 8, 10, .7); border-top: 1px solid #26262f; border-bottom: 1px solid #26262f; }
.cs-feed-tabs button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 0; padding: 11px 0; cursor: pointer; background: transparent; color: #a2a2b2;
  font: 700 var(--fs-cap)/1 var(--f-ui); letter-spacing: .04em; transition: background .25s ease, color .25s ease;
}
.cs-feed-tabs button:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); margin-right: -6px; padding-right: 6px; }
.cs-feed-tabs button:last-child { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); margin-left: -6px; padding-left: 6px; }
.cs-feed-tabs button svg { flex: none; opacity: .8; }
.cs-feed-tabs button.on { background: #ff7a18; color: #180a00; }
.cs-feed-tabs button.on svg { opacity: 1; }
.cs-feed-empty { padding: 18px 8px; text-align: center; font: 500 var(--fs-cap)/1.4 var(--f-ui); color: var(--tx-3); }
/* Карточка дропа: лесенка при въезде; при наведении слева аватар игрока
   (клик — визитка), справа половина сундука (клик — внутрь кейса). */
.cs-drop { position: relative; }
.cs-drop.in { animation-delay: calc(var(--i, 0) * 45ms); }
.cs-drop-hov {
  position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 10, 14, .78), rgba(10, 10, 14, .25) 45%, rgba(10, 10, 14, .55));
}
.cs-drop:hover .cs-drop-hov, .cs-drop:focus-within .cs-drop-hov { opacity: 1; pointer-events: auto; }
.cs-drop-art { transition: opacity .2s ease, filter .2s ease; }
.cs-drop:hover .cs-drop-art { opacity: .28; filter: blur(1px); }
.cs-drop-ava {
  position: absolute; left: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 2px solid rgba(255, 122, 24, .7); background: #111; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); transition: transform .15s ease;
}
.cs-drop-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-drop-ava:hover { transform: scale(1.06); }
.cs-drop-chest { position: absolute; right: -52px; bottom: 6px; width: 120px; height: 84px; cursor: pointer; transition: transform .15s ease; }
.cs-drop-chest .case-photo { position: absolute; inset: 0; }
.cs-drop-chest .case-photo img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.cs-drop-chest:hover { transform: translateX(-6px); }
.cs-card {
  border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  overflow: visible; padding: 6px 10px 12px;
}
/* Наведение без наклона и подъёма: карточка стоит на месте. */
.cs-card:hover, .cs-card:focus-visible {
  border: 0; background: none; box-shadow: none; transform: none;
}
.cs-card:hover .cs-card-art img, .cs-card:hover .cs-card-art .case-photo { transform: none; }
.cs-card-line, .cs-card-glow, .cs-card-opens,
.cs-card-art::before, .cs-card-go { display: none; }
/* Кейс и подставка на 15 % крупнее: арт 295px, плита во всю ширину карточки. */
.cs-card-art { height: 295px; margin-top: 0; container-type: inline-size; }
/* Подставка — под артом, чуть шире карточки, низом к подписи. */
.cs-card-art::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 100%; aspect-ratio: 2 / 1;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  /* WebP 640 px (~60 КБ): плита стоит под КАЖДЫМ кейсом витрины, а PNG
     весил 1.5 МБ — на обычном канале подставки проявлялись последними. */
  background: url(/assets/ui/podstavka.webp) center / contain no-repeat;
}
/* Кейс стоит на плите: низ бокса арта — на линии её поверхности. Плита
   растёт с шириной карточки (92% ширины, 2:1, поверхность на 47% её
   высоты), поэтому и отступ считается от ширины: плита во всю ширину W и
   высотой 0.5W, центр эллипса на 0.25W от низа — туда и ставится низ
   картинки (object-position: bottom), чтобы кейс стоял на поверхности. */
.cs-card-art .case-photo { z-index: 1; inset: 0 2% 17cqw 2%; }
/* Картинка прижата к низу бокса: при узкой карточке (пять в ряд) она
   ограничена шириной, и contain центрировал бы её по высоте — кейс парил
   бы над плитой на половину свободного места. */
.cs-card-art .case-photo img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: 50% 100%; }
.cs-card-name { text-align: center; margin-top: 10px; }
.cs-card-foot { justify-content: center; margin-top: 10px; }

/* Строка фильтров по референсу: поиск слева; справа одной лентой в стиле
   сегментов ниже — без рамок, с косыми стыками — ценовые полосы, сброс и
   «Доступные мне». Выбранная полоса — оранжевая, как выбранный сегмент. */
/* Без внутренних отступов: поиск прижат к левому краю блока, лента справа — к правому, сегменты — снизу; рамка у блока одна. */
.cs-bar { flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 14px; background: rgba(13, 13, 18, .72); overflow: hidden; }
/* Вся строка одного цвета с лентой фильтров: промежуток между поиском и лентой тоже чёрный. */
.cs-bar-row { display: flex; align-items: stretch; gap: 0; height: 48px; background: rgba(8, 8, 10, .7); }
.cs-search { flex: 0 1 280px; min-width: 140px; width: auto; height: auto; border: 0; border-radius: 0; gap: 8px; padding-left: 16px; background: transparent; }
.cs-search:focus-within, .cs-search:has(input:not(:placeholder-shown)) { width: auto; border-color: transparent; }
.cs-search > span { order: 0; color: #8a8a9a; font-size: 18px; }
.cs-search input { font-size: var(--fs-ui); }
.cs-bar-r { margin-left: auto; display: flex; align-items: stretch; border-radius: 0; overflow: hidden; background: transparent; }
.cs-bands { display: flex; align-items: stretch; }
/* Косые стыки как у сегментов: срез 12px, соседи заходят друг под друга. */
.cs-bar-r button, .cs-bar-r .cs-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 100%; padding: 0 20px; margin: 0 -6px; border: 0; border-radius: 0; background: transparent; color: #c4c4d0;
  font: 600 var(--fs-label)/1 var(--f-hd); white-space: nowrap; cursor: pointer;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: background .25s ease, color .25s ease;
}
/* Первая полоса скошена и слева — лента начинается косым краем. */
.cs-bands button:first-child { margin-left: 0; padding-left: 22px; }
.cs-bar-r .cs-toggle { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); margin-right: 0; padding-right: 16px; }
.cs-bar-r button:hover, .cs-bar-r .cs-toggle:hover { color: #ffffff; }
.cs-bands button.on { background: #ff7a18; color: #180a00; }
.cs-reset { color: #a2a2b2; }
.cs-reset:hover { background: rgba(255, 77, 94, .18); color: #ff4d5e; }
.cs-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-toggle i { position: relative; width: 34px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .12); transition: background .2s; }
.cs-toggle i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #c4c4d0; transition: transform .2s, background .2s; }
.cs-toggle input:checked + i { background: rgba(255, 122, 24, .5); }
.cs-toggle input:checked + i::after { transform: translateX(16px); background: #ffa838; }
.cs-groups {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0;
  overflow: hidden; flex: none; min-width: 0; width: auto; border-top: 1px solid #26262f; background: rgba(8, 8, 10, .7);
}
.cs-groups button {
  position: relative; justify-content: center; height: 48px; padding: 0 16px; border: 0; border-radius: 0; overflow: hidden;
  background: transparent; font-size: var(--fs-label); color: #c4c4d0; transition: background .25s ease, color .25s ease;
}
/* Косые стыки как у кнопок ленты: срез 12px, соседи заходят друг под друга. */
.cs-groups button { clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); margin: 0 -6px; }
.cs-groups button:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); margin-left: 0; }
.cs-groups button:last-child { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); margin-right: 0; }
.cs-groups button:hover { background: rgba(255, 255, 255, .05); color: #ececf2; }
.cs-groups button.on { background: #ff7a18; color: #180a00; box-shadow: none; border: 0; }
.cs-groups button .st-n { display: none; }
.cs-groups .cs-seg-ic { position: relative; flex: none; width: 30px; height: 26px; }
.cs-groups .cs-seg-ic .case-photo img { filter: none; }
.cs-groups .cs-seg-ic > svg { width: 100%; height: 100%; }
}

/* ============================================================ БЕСПЛАТНЫЕ КЕЙСЫ

   Пять ступеней за депозит дня, закреплённых над полками витрины (#csFree,
   рисует cases.js → renderFree). Карточка та же .cs-card, поэтому здесь
   только то, чего у платной карточки нет: полоса до порога, строка
   состояния вместо цены и приглушение недоступных ступеней.

   Цвет блока — общий акцент сайта, а не акцент кейса: блок один, и пять
   разных рамок вокруг него читались бы как пять разных блоков. */

.cs-free {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px 18px; margin-bottom: 18px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--or) 26%, transparent);
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--or) 12%, transparent), transparent 70%),
    linear-gradient(178deg, rgba(22, 20, 26, .7), rgba(11, 11, 15, .72));
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .8);
}
.cs-free[hidden] { display: none; }
.cs-free-h .cs-shelf-line {
  background: linear-gradient(90deg, color-mix(in srgb, var(--or) 45%, transparent), transparent);
}
/* Счётчик «2 / 5» у полок спрятан, а здесь он нужен: это ровно то число,
   ради которого игрок сюда и смотрит. */
.cs-free-h .cs-shelf-n {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--or) 45%, transparent);
  background: rgba(0, 0, 0, .35); color: #ffa838;
  font: 700 var(--fs-cap)/1.3 var(--f-hd); font-variant-numeric: tabular-nums;
}
.cs-free-sub {
  margin: -4px 2px 0; font: 600 var(--fs-label)/1.4 var(--f-ui); color: #8a8a99;
}
.cs-free-sub b { color: #ececf2; font-weight: 700; }

/* Порог на карточке вместо тега тира: «от 550 ₽» — это и есть условие. */
.cs-card-free .cs-free-need { letter-spacing: .04em; text-transform: none; }

/* Полоса до порога. Взятая ступень — полная, закрытая — ровно настолько,
   насколько игрок к ней подошёл. */
.cs-free-bar {
  position: relative; z-index: 3; height: 4px; margin-top: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); overflow: hidden;
}
.cs-free-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 65%, #fff 0%), var(--ac));
  box-shadow: 0 0 12px -2px var(--ac); transition: width .3s ease;
}
.cs-card-free .cs-card-foot { margin-top: 10px; justify-content: center; }
.cs-free-state {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 12px; border-radius: 8px; text-align: center;
  font: 700 var(--fs-label)/1.2 var(--f-hd); letter-spacing: .04em;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  color: #8a8a99;
}
/* Доступная ступень — единственная кнопка на карточке, и выглядит как
   кнопка: остальные состояния обязаны быть тише неё. */
.cs-card-free.is-ready .cs-free-state {
  border-color: transparent; color: #12060a;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 88%, #fff), var(--ac));
  box-shadow: 0 10px 26px -10px var(--ac);
}
.cs-card-free.is-taken { opacity: .62; }
.cs-card-free.is-taken .cs-free-state { color: var(--tx-3); }
.cs-card-free.is-locked .cs-card-art, .cs-card-free.is-no_trade .cs-card-art,
.cs-card-free.is-guest .cs-card-art { opacity: .78; }
/* Чего не хватает по нашей вине или по проверке — жёлтым: это не «нельзя»,
   а «сделай одно действие». */
.cs-card-free.is-no_trade .cs-free-state,
.cs-card-free.is-trade_shared .cs-free-state,
.cs-card-free.is-guard .cs-free-state {
  color: #ffd23b; border-color: rgba(255, 210, 59, .35); background: rgba(255, 210, 59, .08);
}

@media (max-width: 879.98px) {
  .cs-free { padding: 12px 12px 14px; margin-bottom: 14px; border-radius: 16px; }
  .cs-free-sub { font-size: var(--fs-cap); }
  .cs-free-state { font-size: var(--fs-cap); padding: 7px 10px; }
}

/* Страница кейса: у бесплатной ступени нет ни цены, ни количества, ни
   быстрого открытия — прячем то, что осталось от платного кейса. */
#coCounts[hidden] { display: none; }
#coFast[hidden] { display: none; }

/* ============================================================ БЕСПЛАТНЫЕ КЕЙСЫ · НАШЕ ОФОРМЛЕНИЕ
   Блок наверху страницы без рамки, плиты и фона; карточки ступеней тоже
   без рамки и фона на любой ширине. Пять ступеней одним рядом везде, где
   ряд помещается; на телефоне — как остальная сетка. От логики коллеги
   остаются полоса до порога и строка состояния вместо цены. */
#page-cases .cs-free { border: 0; background: none; box-shadow: none; padding: 0 0 6px; margin-bottom: 6px; border-radius: 0; }
#page-cases .cs-free .cs-card, #page-cases .cs-free .cs-card:hover, #page-cases .cs-free .cs-card:focus-visible {
  border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
#page-cases .cs-free .cs-card-line, #page-cases .cs-free .cs-card-glow, #page-cases .cs-free .cs-card-opens { display: none; }
#page-cases .cs-free .cs-card-top { justify-content: flex-end; }
#page-cases .cs-free .cs-free-bar { margin: 8px 6px 0; }
#page-cases .cs-free-sub { margin: -2px 2px 0; }
#page-cases .cs-free-state { font-size: var(--fs-cap); padding: 7px 8px; white-space: nowrap; }
@media (min-width: 700px) {
  #page-cases .cs-free .cs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
}

/* ============================================================ ИКОНКИ ПОЛОК И СКИДКА ДНЯ
   Иконка у заголовка полки (frontend/assets/icons, нарезка из icons.png).
   Бирка «−15 %» на карточке вместо тега тира; старая цена зачёркнута рядом
   с новой. */
/* Иконка вдвое крупнее заголовка и по центру строки; строка растёт под неё,
   отрицательных полей нет — иначе край иконки уходил под соседей. */
.cs-shelf-ic { position: relative; z-index: 4; width: 61px; height: 61px; margin: -8px 0; align-self: center; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 122, 24, .35)); }
.cs-shelf-h:has(.cs-shelf-ic) { align-items: center; min-height: 45px; }
.cs-shelf-h:has(.cs-shelf-ic) > .cs-shelf-note, .cs-shelf-h:has(.cs-shelf-ic) > .cs-shelf-n { align-self: center; }
.cs-shelf-h:has(.cs-shelf-ic) > h3 { align-self: center; }
.cs-card-sale {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 4px; border-radius: 4px;
  font: 700 var(--fs-micro)/1.2 var(--f-hd); letter-spacing: .06em; color: #ffb000;
  border: 1px solid rgba(255, 176, 0, .5); background: rgba(0, 0, 0, .4); text-shadow: 0 0 8px rgba(255, 176, 0, .6);
}
.cs-card-sale img { width: 18px; height: 18px; object-fit: contain; }
.cs-card-was {
  display: inline-flex; align-items: center; gap: 3px; margin-right: 6px;
  font: 600 var(--fs-label)/1 var(--f-hd); color: var(--tx-3); text-decoration: line-through; text-decoration-color: rgba(255, 77, 94, .8);
}
.cs-card-was .coin { display: none; }
/* Полки скидок дня и популярных: те же четыре колонки, что и у остальных
   сборок, чтобы кейсы были такого же размера, а не мельче (решение владельца).
   Пятый кейс переносится на вторую строку. */
@media (min-width: 700px) {
  #page-cases .cs-shelf-five .cs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* ============================================================ ALIVE · РЕГУЛЯТОР ЗВУКА

   Общий для игр (soundctl.js): значок динамика — «без звука», рядом ползунок
   громкости. Вид — от прежней кнопки ♪ «Ракеты» и «Минного поля»: тёмная
   капсула со стеклом и оранжевый акцент; без звука всё гаснет в серый.
   Заливка дорожки — от --v, его ставит скрипт. */
.sndc {
  --v: 100%;
  pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 3px;
  box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(8, 8, 14, .7); color: #ffa838; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sndc.off { color: var(--tx-3); }
.sndc-btn {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; cursor: pointer;
}
.sndc-btn svg { display: block; width: 18px; height: 18px; }
.sndc-btn:hover { background: rgba(255, 255, 255, .07); }
.sndc-btn:focus-visible { outline: 2px solid #ffa838; outline-offset: 1px; }
/* Селекторы с .sndc впереди: общий input[type=range] сайта сильнее одного
   класса и растягивал ползунок на всю ширину с крупным бегунком. */
.sndc .sndc-vol {
  -webkit-appearance: none; appearance: none; flex: none; width: 76px; height: 18px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; cursor: pointer;
}
.sndc .sndc-vol:focus { outline: none; }
.sndc .sndc-vol::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, currentColor var(--v), rgba(255, 255, 255, .14) var(--v));
}
.sndc .sndc-vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%;
  background: #f4f4f8; box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.sndc .sndc-vol::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.sndc .sndc-vol::-moz-range-progress { height: 4px; border-radius: 2px; background: currentColor; }
.sndc .sndc-vol::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%; background: #f4f4f8; box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.sndc .sndc-vol:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #ffa838; }
.sndc .sndc-vol:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #ffa838; }

/* Места в играх. «Ракета» и «Минное поле» — в нижней полосе поля, где была
   кнопка ♪; апгрейд — в нижнем-правом углу сцены (владелец 23.10, по аналогии
   с минами), раньше был в верхнем-правом и жался к «Как играть?»; кейс —
   в правом верхнем углу. На широком экране угол кейса занят паспортом
   (CASE ID / OPENED / DROP VALUE) — регулятор встаёт под него, по его правому краю. */
.co-snd { position: absolute; bottom: 18px; right: 18px; z-index: 6; }
/* Нижний-правый угол сцены занят карточкой цели, поэтому z-index выше неё, а
   pointer-events — только на самом регуляторе: остальной угол карточки
   остаётся кликабельным (как полоса звука в минах). */
.upa-snd { position: absolute; top: auto; bottom: 16px; right: 16px; z-index: 8; pointer-events: none; }
.upa-snd > * { pointer-events: auto; }
@media (min-width: 1240px) {
  .co-snd { bottom: 18px; right: 22px; }
}
/* С 1200 сцена апгрейда вылезает вправо на 24px и резерв под чат — на
   столько же отступаем, иначе край ползунка уходит за окно. */
@media (min-width: 1200px) {
  .upa-snd { right: calc(40px + var(--chat-reserve)); }
}

@media (max-width: 880px) {
  .sndc .sndc-vol { width: 60px; }
  /* Кейс: в правом нижнем углу героя регулятор лежал на подписи «Деньги не
     списываются…» и на «Продать всё» (владелец, 2026-09-30). Вверху справа
     пусто: «Кейс» и название — по центру, маскота и паспорта на телефоне нет. */
  .co-snd { top: 12px; right: 12px; bottom: auto; }
  /* Сцена апгрейда на телефоне растворяется в сетке страницы, и свободного
     угла у кольца нет — регулятор получает свою строку над карточками. */
  #page-upgrade.on { grid-template-areas: "snd snd" "in out" "dial dial" "pre pre" "go go" "quick quick"; }
  /* В сетке регулятор не поверх карточки — возвращаем ему клики целиком. */
  .upa-snd { position: relative; top: auto; bottom: auto; right: auto; grid-area: snd; justify-self: end; margin-bottom: -8px; pointer-events: auto; }
}

/* ============================================================ БИРКА «К ПОЛУЧЕНИЮ»
   Выигрыш, по которому ещё не сделан выбор «скином или деньгами», в цифре
   баланса не показывается; рядом стоит бирка с суммой, клик открывает окно
   выбора снова. */
.tb-hold {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 168, 56, .55); background: rgba(255, 122, 24, .12); color: #ffa838;
  font: 700 var(--fs-cap)/1 var(--f-hd); white-space: nowrap; animation: tbHoldIn .25s ease both;
}
.tb-hold small { font: 600 10px/1 var(--f-ui); color: #c4c4d0; letter-spacing: .02em; }
.tb-hold:hover { background: rgba(255, 122, 24, .22); }
.tb-hold[hidden] { display: none; }
/* Бирки на карточках: MEGA — золото, TOP — оранжевый. */
.cs-card-tag.mega { color: #ffd23b; border-color: rgba(255, 210, 59, .6); text-shadow: 0 0 8px rgba(255, 210, 59, .7); background: rgba(40, 28, 0, .6); }
.cs-card-tag.top { color: #ff8a1e; border-color: rgba(255, 138, 30, .6); text-shadow: 0 0 8px rgba(255, 138, 30, .7); background: rgba(40, 18, 0, .6); }
@keyframes tbHoldIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 879.98px) { .tb-hold small { display: none; } .tb-hold { padding: 2px 7px; margin-left: 6px; } }

/* ============================================================ КЕЙС НЕДЕЛИ
   Закреплён наверху витрины: слева арт кейса, справа плашка «Кейс недели»,
   срок, имя в две строки, что даёт открытие и кнопка. Цвет свечения — акцент
   кейса (--ac). Рисует cases.js → renderWeek. */
.cs-week {
  position: relative; display: grid; grid-template-columns: minmax(300px, 46%) 1fr; gap: 24px; align-items: center;
  min-height: 380px; padding: 12px 24px 12px 8px; overflow: visible;
  /* Без фона и рамки, как в референсе: блок лежит прямо на фоне страницы. */
  background: none; border: 0;
}
.cs-week[hidden] { display: none; }
.cs-week-art { position: relative; height: 360px; display: grid; place-items: center; }
.cs-week-art .case-photo { position: absolute; inset: 0; }
.cs-week-art .case-photo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .8)) drop-shadow(0 0 40px color-mix(in srgb, var(--ac, #ff7a18) 35%, transparent)); }
/* Правая колонка во всю высоту арта: плашки и кнопка прижаты к низу, чтобы
   низ кнопки совпадал с низом кейса. */
.cs-week-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; align-self: stretch; padding-top: 22px; }
.cs-week-perks { margin-top: auto; }
.cs-week-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cs-week-k { display: inline-flex; align-items: center; gap: 12px; font: 700 26px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #ffa838; }
.cs-week-k img { width: 44px; height: 44px; object-fit: contain; }
.cs-week-timer { display: inline-flex; align-items: center; gap: 12px; font: 500 var(--fs-label)/1.25 var(--f-ui); color: #8a8a99; }
/* Часы в тонкой оранжевой окантовке, как на референсе. */
/* Часы на выпуклом тёмном диске: без жёлтой обводки, объём даёт свет
   сверху и тень снизу. */
.cs-week-timer img {
  width: 46px; height: 46px; padding: 8px; box-sizing: border-box; object-fit: contain; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(60, 40, 22, .9), rgba(14, 12, 12, .95) 70%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), inset 0 -2px 4px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .55), 0 0 12px rgba(255, 138, 30, .18);
}
.cs-week-timer span { display: flex; flex-direction: column; gap: 4px; }
.cs-week-timer b { font: 700 16px/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-week-name { margin: 0; font: 900 clamp(38px, 4.6vw, 64px)/.95 var(--f-hd); letter-spacing: .02em; text-transform: uppercase; }
.cs-week-name span, .cs-week-name em { display: block; font-style: normal; }
.cs-week-name span { color: #f4f4f8; text-shadow: 0 2px 24px rgba(0, 0, 0, .8); }
.cs-week-name em { color: #ff8a1e; text-shadow: 0 0 30px rgba(255, 122, 24, .45); }
.cs-week-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-week-perk {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 168, 56, .28);
  /* Лёгкий градиент, как на референсе: тёплый тон у левого края уходит в тёмный. */
  background: linear-gradient(135deg, rgba(60, 32, 8, .28), rgba(14, 12, 10, .5) 45%, rgba(8, 8, 10, .55));
  font: 600 var(--fs-label)/1.25 var(--f-ui); color: #b8b8c6; text-transform: uppercase; letter-spacing: .04em;
}
.cs-week-perk > span { display: flex; flex-direction: column; gap: 3px; }
.cs-week-perk b { font: 800 17px/1 var(--f-hd); color: #ececf2; text-transform: none; letter-spacing: 0; }
.cs-week-perk img { width: 46px; height: 46px; object-fit: contain; }
.cs-week-xp {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 2px solid #ffa838; color: #ffa838; font: 800 var(--fs-label)/1 var(--f-hd); font-style: normal; box-shadow: 0 0 14px rgba(255, 168, 56, .35);
}
/* Кнопка и цена — одной лентой в стиле фильтров: тёмная полоса без рамок,
   косые стыки, кнопка оранжевая как выбранный сегмент, цена — тёмный
   сегмент рядом. */
.cs-week-cta { display: flex; align-items: stretch; height: 56px; border-radius: 8px; overflow: hidden; background: rgba(8, 8, 10, .7); }
.cs-week-go {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 100%; border: 0; border-radius: 0; cursor: pointer;
  padding: 0 24px; margin-right: -6px; background: #ff7a18; color: #180a00; font: 700 var(--fs-body)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: background .2s ease;
}
.cs-week-go:hover { background: #ff8a30; }
.cs-week-go .coin { width: 22px; height: 22px; }
.cs-week-price {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 150px; padding: 0 22px 0 30px;
  border: 0; border-radius: 0; background: transparent; font: 800 20px/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 1100px) {
  .cs-week { grid-template-columns: 1fr; min-height: 0; padding: 16px; }
  .cs-week-art { height: 240px; }
  .cs-week-name { font-size: 34px; }
}
@media (max-width: 879.98px) {
  .cs-week-perks { grid-template-columns: 1fr; }
  .cs-week-k { font-size: 18px; }
  .cs-week-k img, .cs-week-timer img { width: 30px; height: 30px; }
}

/* Витрина на десктопе на 10 % крупнее: кейсы, подписи, фильтры — всё, кроме
   рельса ленты (он sticky и живёт своей геометрией). */
@media (min-width: 881px) {
  #page-cases.on > :not(.cs-rail) { zoom: 1.1; }
}

/* ============================================================ ШАПКА · БАЛАНС И КАБИНЕТ БЕЗ РАМОК
   Баланс и кнопка кабинета без фона и рамки, между ними те же тонкие
   разделители, что у меню рядом с логотипом (.tb-nav border-left). */
@media (min-width: 881px) {
  .topbar .tb-bal, .topbar .account {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, .08); padding-left: 16px;
  }
  .topbar .tb-bal { padding-right: 6px; }
  .topbar .account { padding-right: 4px; }
  /* Наведение на кабинет — подсветка, как у ссылок меню: понятно, что это переход. */
  .topbar .account:hover { background: rgba(255, 255, 255, .06); border-radius: 0 10px 10px 0; border-color: rgba(255, 255, 255, .08); transform: none; box-shadow: none; }
  .topbar .account:hover #accountName { color: var(--al-or); }
  .topbar .tb-right { gap: 16px; }
}

/* ============================================================ ALIVE · ЛАЙФ-БЛОК РАКЕТЫ

   Ставки раунда вживую под полем «Ракеты», на месте прежнего инвентаря, по
   референсу «Последние игры»: строки в две колонки, в строке аватар, ник и
   «N сек. назад», скин ставки (у денежной — монета), сумма, плашка
   множителя, исход и «›». Префикс bbl- (BetsBoard live) проверен грепом.

   Колонок столько, сколько влезает строк не уже 430 px, а не «две от
   881 px»: слева от блока боковое меню, справа рельс. На 1440 блоку
   достаётся 724 px, и две строки по 357 px оставили бы нику два символа —
   там одна колонка; две начинаются примерно с 1600 px окна. Рельс справа
   несёт теперь один «Топ выигрышей» — на всю высоту. */

.ra-rail { grid-template-rows: minmax(0, 1fr); }
.ra-live { height: 470px; padding: 16px 18px; gap: 12px; }

.bbl-head { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.bbl-head h3 {
  margin: 0; font: 600 var(--fs-ui)/1.5 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838;
}
.bbl-no { margin-left: 4px; color: var(--tx-3); letter-spacing: .04em; }
.bbl-live {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .16em; color: #ff4d5e;
  background: rgba(255, 77, 94, .1); border: 1px solid rgba(255, 77, 94, .32);
}
.bbl-live i {
  width: 6px; height: 6px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 8px #ff4d5e;
  animation: raPulse 1.4s ease-in-out infinite;
}
.bbl-tabs { display: inline-flex; gap: 4px; }
.bbl-tab {
  padding: 8px 15px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: #a2a2b2; font: 600 var(--fs-label)/1 var(--f-ui); cursor: pointer; transition: color .15s, background .15s;
}
.bbl-tab:hover { color: #ececf2; background: rgba(255, 255, 255, .04); }
.bbl-tab.on {
  color: #ffd27a; border-color: rgba(255, 168, 56, .45);
  background: linear-gradient(180deg, rgba(255, 122, 24, .24), rgba(255, 122, 24, .08));
}
.bbl-n { margin-left: auto; font: 600 var(--fs-cap)/1.5 var(--f-ui); color: var(--tx-3); white-space: nowrap; }
.bbl-n b { font: 700 var(--fs-label)/1 var(--f-hd); color: #ececf2; font-variant-numeric: tabular-nums; }

.bbl-bar { flex: none; display: flex; gap: 3px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.bbl-bar i { width: 0; transition: width .4s; }
.bbl-bar i:nth-child(1) { background: #35d07f; }
.bbl-bar i:nth-child(2) { background: #ffa838; }
.bbl-bar i:nth-child(3) { background: #eb4b4b; }

.bbl-note { margin: 0; font: 500 var(--fs-label)/1.4 var(--f-ui); color: #a2a2b2; }
.bbl-note b { font-family: var(--f-hd); }

.bbl-list {
  flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); align-content: start; gap: 8px 10px;
  /* max-content, а не auto: в прокручиваемой сетке фиксированной высоты
     auto-ряды при переполнении сжимаются до min-height строки, и
     двухъярусная строка телефона вылезала бы из своей рамки. */
  grid-auto-rows: max-content;
  scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .5) transparent;
}
/* Прошлый раунд в пустом блоке — приглушённо: это история, а не ставки
   текущего раунда. Наведение возвращает яркость — строку всё ещё читают. */
.bbl-list.prev .bbl-row { opacity: .5; }
.bbl-list.prev .bbl-row:hover { opacity: .85; }
.bbl-empty { grid-column: 1 / -1; padding: 44px 12px; text-align: center; color: var(--tx-3); font-size: var(--fs-label); }
.bbl-login {
  margin-left: 10px; padding: 7px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 168, 56, .5); background: rgba(255, 122, 24, .14);
  color: #ffd27a; font: 700 var(--fs-label)/1 var(--f-ui);
}

.bbl-row {
  display: grid; align-items: center; gap: 9px; min-height: 56px; min-width: 0;
  grid-template-columns: 36px minmax(0, 1fr) 48px auto 56px minmax(84px, auto) 8px;
  padding: 8px 12px 8px 10px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .028); border: 1px solid rgba(255, 255, 255, .06);
  transition: background .2s, border-color .2s, opacity .2s;
}
.bbl-row:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 168, 56, .25); }
.bbl-row.me { background: rgba(255, 122, 24, .09); border-color: rgba(255, 122, 24, .38); }
.bbl-row.in { animation: raRow .3s ease both; }
/* Вспышка на смену исхода. Длительность — FLASH_MS в betsboard.js. */
.bbl-row.flash-won { animation: bblWon .9s ease-out both; }
.bbl-row.flash-lost { animation: bblLost .9s ease-out both; }
@keyframes bblWon {
  0% { background: rgba(53, 208, 127, .26); box-shadow: 0 0 0 0 rgba(53, 208, 127, .55); }
  100% { box-shadow: 0 0 0 10px rgba(53, 208, 127, 0); }
}
@keyframes bblLost {
  0% { background: rgba(255, 77, 94, .24); box-shadow: 0 0 0 0 rgba(255, 77, 94, .5); }
  100% { box-shadow: 0 0 0 10px rgba(255, 77, 94, 0); }
}

.bbl-ava {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ac); color: #0a0a0f; font: 700 16px/1 var(--f-hd);
}
.bbl-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bbl-name {
  font: 600 var(--fs-ui)/1.15 var(--f-hd); color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bbl-row:hover .bbl-name, .bbl-row.me .bbl-name { color: #ffa838; }
.bbl-ago { font: 500 var(--fs-micro)/1.2 var(--f-ui); color: var(--tx-3); white-space: nowrap; }

.bbl-art { position: relative; height: 36px; display: grid; place-items: center; }
.bbl-art > img, .bbl-art > svg {
  max-width: 100%; max-height: 36px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
.bbl-more {
  position: absolute; right: -6px; bottom: -3px; padding: 1px 4px; border-radius: 5px; font-style: normal;
  background: #1b1b24; border: 1px solid rgba(255, 255, 255, .14); font: 700 10px/1.2 var(--f-hd); color: #ececf2;
}
.bbl-cash { font-size: 22px; line-height: 1; opacity: .85; }
.bbl-cash .coin { margin: 0; vertical-align: middle; }

.bbl-amt { font: 700 var(--fs-ui)/1 var(--f-hd); color: #ececf2; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Плашка множителя — как история множителей над полем: цветная рамка
   и подложка того же цвета. Цель автовывода — пунктиром: это ещё не исход. */
.bbl-x {
  justify-self: stretch; padding: 7px 4px; border-radius: 8px; text-align: center; border: 1.5px solid transparent;
  font: 700 var(--fs-ui)/1 var(--f-hd); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bbl-x.won { color: #7ce4ae; border-color: rgba(53, 208, 127, .7); background: rgba(53, 208, 127, .1); }
.bbl-x.lost { color: #ff4d5e; border-color: rgba(255, 77, 94, .7); background: rgba(255, 77, 94, .1); }
.bbl-x.auto { color: #a2a2b2; border: 1.5px dashed rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .02); }
.bbl-x.none { padding: 0; border: 0; }

.bbl-st {
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 6px;
  min-width: 0; font: 700 var(--fs-label)/1.15 var(--f-hd); white-space: nowrap;
}
.bbl-st.wait { color: var(--tx-3); }
.bbl-st.fly { color: #ffa838; }
.bbl-st.fly > span { animation: raPulse 1.6s ease-in-out infinite; }
.bbl-st.won { color: #ffd27a; }
.bbl-st.lost { color: #ff4d5e; }
.bbl-st .bbl-pay { grid-column: 2; font: 700 var(--fs-label)/1.2 var(--f-hd); color: #7ce4ae; font-variant-numeric: tabular-nums; }
.bbl-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.bbl-ic { flex: none; }
.bbl-go { color: #4a4a58; font: 700 18px/1 var(--f-hd); }
.bbl-row:hover .bbl-go { color: #ffa838; }

/* Телефон: одна колонка, и строка в два яруса. В одну линию на 320 px
   семь ячеек оставляли нику одну букву, а время наезжало на картинку.
   Сверху — кто, когда, чем и сколько; снизу — исход и плашка множителя.
   «›» лишняя: вся строка и так нажимается. */
@media (max-width: 880px) {
  .ra-live { height: 440px; padding: 14px; }
  .bbl-list { grid-template-columns: minmax(0, 1fr); }
  .bbl-n { margin-left: 0; }
  .bbl-row {
    grid-template-columns: 32px minmax(0, 1fr) 40px auto;
    grid-template-areas: "ava who art amt" "ava st x x";
    gap: 6px 8px; padding: 8px 10px 8px 8px;
  }
  .bbl-row > .bbl-ava { grid-area: ava; width: 32px; height: 32px; }
  .bbl-who { grid-area: who; }
  .bbl-art { grid-area: art; height: 30px; }
  .bbl-art > img, .bbl-art > svg { max-height: 30px; }
  .bbl-amt { grid-area: amt; justify-self: end; }
  .bbl-st { grid-area: st; grid-template-columns: auto auto auto; }
  .bbl-st .bbl-pay { grid-column: auto; }
  .bbl-x { grid-area: x; justify-self: end; min-width: 60px; padding: 5px 6px; }
  .bbl-go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bbl-live i, .bbl-st.fly > span, .bbl-row.in, .bbl-row.flash-won, .bbl-row.flash-lost { animation: none; }
}

/* ============================================================ ALIVE · ОКНО ИНВЕНТАРЯ РАКЕТЫ

   «Выберите ваши скины» в панели ставки открывает инвентарь в общей
   модалке сайта. Внутри тот же SkinStrip в форме Alive (.ssa), что жил под
   полем: здесь с него снята рамка карточки — рамка теперь у окна, — а
   сетка тянется по высоте окна и прокручивается внутри. Заголовок «Мой
   инвентарь» в окне лишний: над ним уже «Выберите скины для ставки».
   Префикс ra-invpop- проверен грепом. На телефоне модалка и так нижняя
   шторка (общее правило), своего правила не нужно.
   С 2026-09-30 то же окно открывают «Мины» на телефоне (mines.js,
   openInventory) — правила здесь общие, без #page-*. */

.modal:has(.ra-invpop) {
  max-width: 980px; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #15151c, #0b0b10); border-color: rgba(255, 122, 24, .28);
}
.ra-invpop { display: flex; flex-direction: column; max-height: min(86vh, 760px); }
.ra-invpop-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ra-invpop-h {
  margin: 0; font: 600 16px/1.4 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #ffa838;
}
.ra-invpop-sub { margin: 2px 0 0; font: 500 var(--fs-label)/1.4 var(--f-ui); color: var(--tx-3); }
.ra-invpop-body { flex: 1; min-height: 0; display: flex; padding: 14px 20px 0; }
.ra-invpop .ssa {
  flex: 1; height: min(58vh, 540px); padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
.ra-invpop .ssa-tex, .ra-invpop .ssa-head h3 { display: none; }
/* Стоимость инвентаря рядом с поиском: без запрета переноса монета
   уезжала строкой выше числа. */
.ra-invpop .ssa-sum { flex: none; white-space: nowrap; }
.ra-invpop-foot {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.ra-invpop-n { margin-right: auto; font: 500 var(--fs-label)/1.4 var(--f-ui); color: #a2a2b2; }
.ra-invpop-n b { font: 700 var(--fs-ui)/1 var(--f-hd); color: #ececf2; font-variant-numeric: tabular-nums; }
.ra-invpop-clear, .ra-invpop-done {
  padding: 11px 20px; border-radius: 10px; cursor: pointer; font: 700 var(--fs-label)/1 var(--f-hd);
  letter-spacing: .08em; text-transform: uppercase;
}
.ra-invpop-clear { border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: #a2a2b2; }
.ra-invpop-clear:hover:not(:disabled) { color: #ececf2; border-color: rgba(255, 255, 255, .28); }
.ra-invpop-clear:disabled { opacity: .4; cursor: default; }
.ra-invpop-done {
  border: 0; color: #1a0d00; background: linear-gradient(180deg, #ffb347, #ff7a18);
  box-shadow: 0 8px 24px rgba(255, 122, 24, .35);
}
.ra-invpop-done:hover { filter: brightness(1.08); }
/* Тост «Максимум 5 скинов в ставке» на телефоне ложится внизу экрана прямо на
   «Очистить» и «Готово» окна и 3.6 с глотал нажатия. В тостах только текст —
   ни кнопок, ни ссылок, — поэтому касания проходят сквозь них. */
.toasts { pointer-events: none; }

@media (max-width: 880px) {
  .modal:has(.ra-invpop) { padding: 0; }
  .ra-invpop-top { padding: 4px 16px 10px; }
  .ra-invpop-body { padding: 12px 16px 0; }
  .ra-invpop .ssa { height: 56vh; }
  .ra-invpop-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .ra-invpop-n { flex-basis: 100%; }
  .ra-invpop-clear, .ra-invpop-done { flex: 1; }
}

/* ============================================================ ALIVE · ЛЕНТА НА ВСЕХ ИГРАХ

   «Сейчас выпало» — одна лента на витрину, страницу кейса, апгрейд, «Ракету»,
   «Минное поле», Plinko, Milky Way и Space Ball (ТЗ_ЛАЙВ_ЛЕНТА.md; последние
   три — владелец, 28.10). Рельс .cs-rail переехал из витрины в
   общий каркас .content; его геометрия и карточки прежние (блок «ВИТРИНА
   КЕЙСОВ · ПОДСТАВКА, ФОН, ЛЕНТА СПРАВА»). Здесь только то, ГДЕ он виден,
   место под него на страницах игр и значок игры на карточке.

   Витрина — от 881 px, как было. Кейс и игры — от 1400 px: ниже игровое поле
   рядом с лентой не помещается (замер: «Ракета» при окне 1024 закрывает
   счётчиком плашки «Банк» и «Игроки», мины при 1280 налезают колонкой
   множителей на «Последние игры»), а лента съедает ещё 166 px.
   На телефоне рельс гасит правило витрины (max-width: 880px). */

.content > .cs-rail { display: none; }
@media (min-width: 881px) {
  .content:has(> #page-cases.on) > .cs-rail { display: block; }
}
@media (min-width: 1400px) {
  .content:has(> #page-case.on, > #page-upgrade.on, > #page-crash.on, > #page-mines.on,
               > #page-plinko.on, > #page-milkyway.on, > #page-spaceball.on) > .cs-rail {
    display: block;
  }
  /* То же место, что у витрины: 150 px ленты и 16 px воздуха. Место
     резервируется только рядом с рельсом (#csRail ~): страница, поднятая
     без каркаса — как в браузерных стендах tests/*.html, — ленты не имеет,
     и отступ съел бы у неё 166 px впустую. */
  #csRail ~ #page-case.on, #csRail ~ #page-upgrade.on,
  #csRail ~ #page-crash.on, #csRail ~ #page-mines.on,
  #csRail ~ #page-plinko.on, #csRail ~ #page-milkyway.on, #csRail ~ #page-spaceball.on { padding-right: 166px; }
  /* Сцена апгрейда тянется до края рабочей колонки (margin-right: -24px в
     секции апгрейдера). С лентой край — сама лента: сцена доходит до неё,
     а не заходит под неё на 8 px. */
  #csRail ~ #page-upgrade.on .upa-scene { margin-right: -16px; }
}

/* Мины с лентой. Панель ставки и «Последние игры» лежат поверх доски,
   а доска масштабируется по ширине: уже ~1200 px панель «Последних
   игр» закрывает колонку множителей. С лентой столько остаётся только
   от окна 1680 px (на 1600 край колонки уже под панелью — замер), поэтому
   до него — та же раскладка, что без ленты до 1180 px: доска на всю
   ширину, панели под ней. Правила — копия блока «@media (max-width:
   1180px)» секции «МИННОЕ ПОЛЕ». */
@media (min-width: 1400px) and (max-width: 1679.98px) {
  #csRail ~ #page-mines .mna-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  #csRail ~ #page-mines .mna-board { grid-column: 1 / -1; }
  #csRail ~ #page-mines .mna-stage > .rbp, #csRail ~ #page-mines .mna-recent { position: static; width: auto; height: auto; }
  #csRail ~ #page-mines .mna-recent { min-height: 300px; max-height: 540px; }
  #csRail ~ #page-mines .mna-bottom { left: auto; right: 16px; }
  #csRail ~ #page-mines .mna-row2 { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* Игра на карточке при наведении: подпись справа вверху и картинка справа
   внизу — на месте сундука кейса (у кейса остаётся сундук). Клик по любому
   из них открывает игру, у кейса — этот кейс. Подпись нужна всем: по одной
   картинке «Ракету» от апгрейда не отличить. Префикс cs-drop- проверен
   грепом: cs-drop-gname и cs-drop-gic нигде больше не заняты. */
.cs-drop-gname {
  position: absolute; right: 8px; top: 13px; max-width: calc(100% - 62px); z-index: 1;
  padding: 4px 6px; border-radius: 6px; cursor: pointer; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 9px/1.2 var(--f-hd); letter-spacing: .03em; text-transform: uppercase;
  color: #180a00; background: #ff7a18; box-shadow: 0 4px 12px rgba(0, 0, 0, .55);
  transition: background .15s ease;
}
.cs-drop-gname:hover { background: #ffa838; }
.cs-drop-gic {
  position: absolute; right: 6px; bottom: 8px; width: 76px; height: 64px; object-fit: contain;
  cursor: pointer; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); transition: transform .15s ease;
}
.cs-drop-gic:hover { transform: translateX(-4px) scale(1.04); }
/* ============================================================ ALIVE · РАКЕТА: ВЫСОТА ПО ИГРЕ

   На высоком окне (2560×1343) «Ракета» короче экрана: игра кончается на
   ~1140 px. Каркас держал min-height: 100vh, меню — высоту окна, и ряд
   каркаса тянулся до низа экрана. Фон «Ракеты» нарисован на самой
   странице, глобальное небо здесь спрятано, — под игрой до подвала стояло
   чёрное поле, а рельс ленты «Сейчас выпало» тянулся вместе с рядом, и
   казалось, что вёрстку растягивает лента.

   Тот же приём, что у колеса («ALIVE · ШИРОКИЕ ЭКРАНЫ»): окно высоту не
   навязывает, короткая страница кончается подвалом сразу за игрой, меню
   высотой по ряду (липкость остаётся).

   Лента в рельсе — sticky высотой в окно. Когда рельс короче окна (он
   высотой в страницу), она вылезала бы из него на подвал: её высота не
   больше рельса. На длинных страницах это ничего не меняет. */

.shell:has(> .main > .content > #page-crash.on) { min-height: 0; }
.shell:has(> .main > .content > #page-crash.on) > .side { height: auto; }
/* Battle Pass — то же самое (владелец, 2026-09-30): на 2560×1343 пасс
   кончается на ~1080 px, каркас тянулся до 1407, и между карточками
   призов LEVEL 10/20/30 и подвалом стояло ~330 px пустоты. */
.shell:has(> .main > .content > #page-battlepass.on) { min-height: 0; }
.shell:has(> .main > .content > #page-battlepass.on) > .side { height: auto; }
.content > .cs-rail > .cs-feed { max-height: 100%; }

/* ============================================================ АПГРЕЙД · ТЁМНЫЙ ФОН ВМЕСТО КОСМОСА
   Под сценой апгрейда оставалась полоса с глобальным звёздным небом (.sky,
   с анимацией). На апгрейде небо спрятано, фон страницы — ровный тёмный. */
body:has(#page-upgrade.on) { background: #0a0a0d; }
body:has(#page-upgrade.on) .sky { display: none; }


/* ============================================================
   ALIVE · Апгрейд — чистый герой по референсу (33.png): две плоские
   карточки, кольцо-шанс между ними, капсула «множитель + баланс» и
   крупная кнопка. Фон общий, как в профиле: сцена прозрачная, арт
   ангара, подиумы и «разряды» скрыты. Тот же DOM (см. ТЗ в чате).
   ============================================================ */
@media (min-width: 881px) {
  #page-upgrade .upa-scene {
    position: relative; aspect-ratio: auto; width: 100%; max-width: 1080px;
    min-height: 0; margin: 8px auto 0; padding: 10px 0; background: none;
    display: flex; align-items: stretch; justify-content: center;
    gap: clamp(24px, 4.5vw, 64px); container-type: normal; overflow: visible;
  }
  #page-upgrade .upa-bg, #page-upgrade .upa-art,
  #page-upgrade .upa-halo, #page-upgrade .upa-disc,
  #page-upgrade .upa-bezel, #page-upgrade .upa-beam { display: none !important; }

  /* карточки — в поток */
  #page-upgrade .upa-card {
    position: relative; top: auto; left: auto; right: auto;
    width: clamp(240px, 24vw, 330px); min-width: 0; flex: 0 1 330px; display: flex;
  }
  #page-upgrade .upa-card-box {
    position: relative; overflow: hidden; flex: 1; display: flex; flex-direction: column; gap: 2px;
    min-height: 300px; padding: 18px; border-radius: 18px;
    background: linear-gradient(160deg, rgba(32,32,42,.55), rgba(12,12,17,.82));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 22px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  }
  #page-upgrade .upa-card-box::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(125deg, transparent 52%, color-mix(in srgb, var(--rc, #ff7a18) 26%, transparent) 100%);
    opacity: .5;
  }
  #page-upgrade .upa-card-box > * { position: relative; z-index: 1; }
  #page-upgrade .upa-card-top { order: 0; align-items: center; min-height: 18px; }
  #page-upgrade .upa-card-w { font: 600 var(--fs-label)/1.2 var(--f-ui); color: #a2a2b2; letter-spacing: .02em; }
  #page-upgrade .upa-x { position: absolute; top: 14px; right: 14px; z-index: 3; }
  #page-upgrade .upa-card-f { order: 0; position: absolute; top: 16px; right: 40px; margin: 0; padding: 0; }
  #page-upgrade .upa-card-p { font: 700 16px/1 var(--f-hd); color: #ffb454; }
  #page-upgrade .upa-card-n { order: 1; margin-top: 2px; font: 700 20px/1.15 var(--f-hd); color: #f3f3f8; }
  #page-upgrade .upa-card-x { order: 2; font: 400 var(--fs-label)/1.3 var(--f-ui); color: #8a8a9a; }
  #page-upgrade .upa-card-art {
    display: block; order: 3; position: relative; width: 100%;
    height: clamp(150px, 15vw, 200px); margin-top: auto;
  }
  #page-upgrade .upa-card-art img, #page-upgrade .upa-card-art svg {
    position: static; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 16px 22px rgba(0,0,0,.7));
  }
  #page-upgrade .upa-card:not(.filled) .upa-card-box { align-items: center; justify-content: center; text-align: center; }

  /* кольцо — статично по центру ряда, без ангарной рамки */
  #page-upgrade .upa-scene .upa-dial {
    position: relative; left: auto; top: auto; transform: none; flex: 0 0 auto; align-self: center;
    width: clamp(196px, 19vw, 244px); height: clamp(196px, 19vw, 244px);
  }
  #page-upgrade .upa-scene .upa-dial::after {
    content: ''; position: absolute; inset: 9%; z-index: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #16171f, #0a0b0f 74%);
    box-shadow: inset 0 0 30px rgba(0,0,0,.85);
  }
  #page-upgrade .upa-scene .upa-dial::before {
    content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); z-index: 5;
    border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 14px solid #ff7a18;
    filter: drop-shadow(0 0 6px rgba(255,122,24,.85));
  }
  /* шевроны в промежутках между карточками и кольцом */
  #page-upgrade .upa-card.in::after, #page-upgrade .upa-card.out::before {
    content: '\00bb'; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none;
    font: 700 clamp(22px, 2.4vw, 30px)/1 var(--f-hd); color: #ff7a18; opacity: .85;
  }
  #page-upgrade .upa-card.in::after  { right: calc(clamp(24px, 4.5vw, 64px) * -0.5 - 4px); }
  #page-upgrade .upa-card.out::before { left: calc(clamp(24px, 4.5vw, 64px) * -0.5 - 4px); }

  /* капсулы: множитель (×2 ×5 ×8), справа шанс победы (35 / 55 / 75), баланс */
  #page-upgrade .upa-go + .upa-presets { margin-top: 16px; }

  /* кнопка — из абсолюта в поток, под капсулой */
  #page-upgrade .upa-go {
    position: static; left: auto; top: auto; transform: none;
    margin: 16px auto 0; display: flex; width: min(360px, 80%);
  }
}

@media (min-width: 881px) {
  #page-upgrade .upa-card.in { order: 0; }
  #page-upgrade .upa-scene .upa-dial { order: 1; }
  #page-upgrade .upa-card.out { order: 2; }
}

/* Апгрейд: мелкий маскот в кольце в новом виде не нужен (в референсе его нет). */
#page-upgrade .upa-dial .ring-mascot { display: none; }

/* ---- Апгрейд-редизайн, доводка по референсу 34: центр, чистое кольцо,
   фон карточек ---- */
@media (min-width: 881px) {
  /* центрирование: гасим сдвиг сцены под чат-резерв (см. margin-right отриц.) */
  #page-upgrade .upa-scene { margin-left: auto !important; margin-right: auto !important; }

  /* убрать «летающую дугу»: старый ::before был кольцом-ореолом 288px с
     оранжевой верхней границей. Сбрасываем его в аккуратный треугольник. */
  #page-upgrade .upa-scene .upa-dial::before {
    width: 0 !important; height: 0 !important; padding: 0 !important;
    background: none !important; box-shadow: none !important; border-radius: 0 !important;
    border-left: 9px solid transparent !important; border-right: 9px solid transparent !important;
    border-top: 14px solid #ff7a18 !important; border-bottom: 0 !important; top: -6px !important;
  }
  /* тонкий прогресс вместо толстой «зоны» (как в референсе) */
  /* процентная дуга — это .r-zone (её длина = шанс); делаем тоньше, как в референсе */
  #page-upgrade .upa-dial .r-zone,
  #page-upgrade .upa-dial .r-zone-glow,
  #page-upgrade .upa-dial .r-zone-bonus,
  #page-upgrade .upa-dial .r-zone-bonus-glow { stroke-width: 6px; }

  /* фон блоков со скинами — картинка-референс, с лёгким затемнением для текста */
  #page-upgrade .upa-card-box {
    background:
      linear-gradient(180deg, rgba(8,8,12,.40), rgba(8,8,12,.10) 45%, rgba(8,8,12,.30)),
      url('/assets/upg/card-bg.webp') center / cover no-repeat;
  }
  /* оранжевые «трещины» лежат по краям картинки — левой карточке даём левый
     край, правой правый: акцент смотрит наружу, к своим шевронам. */
  #page-upgrade .upa-card.in .upa-card-box  { background-position: left center, left center; }
  #page-upgrade .upa-card.out .upa-card-box { background-position: right center, right center; }
}

/* ---- Апгрейд-редизайн, доводка по референсу 35 ---- */
@media (min-width: 881px) {
  /* растянуть герой до ширины сеток (1360px), сохранив пропорции карт/кольца (~x1.32) */
  #page-upgrade .upa-scene { max-width: 1360px; gap: clamp(24px, 6vw, 84px); }
  #page-upgrade .upa-card { width: clamp(240px, 31vw, 434px); flex: 0 1 434px; }
  #page-upgrade .upa-card-box { min-height: 360px; }
  #page-upgrade .upa-card-art { height: clamp(150px, 20vw, 264px); }
  #page-upgrade .upa-scene .upa-dial {
    width: clamp(196px, 25vw, 322px); height: clamp(196px, 25vw, 322px);
  }

  /* капсулы управления — ниже карточек, без наложения */
  #page-upgrade .upa-presets { margin-top: 20px; }

  /* убрать «мерцание» (бегущую искру selSpin) на выбранных карточках инвентаря */
  #page-upgrade #myItems .item.sel .item-art::before {
    inset: 0 !important; animation: none !important;
    background: radial-gradient(ellipse at center, var(--rc), transparent 62%) !important; opacity: .16 !important;
  }

  /* молния быстрого прокрута внутри капсулы баланса, сразу после «С баланса» */
  /* молния в капсуле баланса: стили .upa-prow сюда не достают, задаём свои —
     в цвет фона (не белая), круглая, с явной обводкой при активном состоянии */
  #page-upgrade .upa-cash .preset-fast {
    order: -1; flex: none; width: 32px; height: 32px; margin: 0 10px 0 0; padding: 0;
    display: grid; place-items: center; cursor: pointer; border-radius: 50%;
    font-size: var(--fs-body); line-height: 1; color: #9a9aa8;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: none; transition: box-shadow .2s, border-color .2s, color .2s, background .2s;
  }
  #page-upgrade .upa-cash .preset-fast:hover { color: #ffa838; border-color: rgba(255, 122, 24, .45); }
  #page-upgrade .upa-cash .preset-fast.on {
    color: #ffd23b; border-color: #ff7a18; background: rgba(255, 122, 24, .12);
    box-shadow: 0 0 0 2px rgba(255, 122, 24, .55), 0 0 12px rgba(255, 122, 24, .4);
  }
}

/* ============================================================ АПГРЕЙД · НЕСКОЛЬКО ПРЕДМЕТОВ В СТАВКЕ
   Два и больше предметов — рядом в карточке «Ваш предмет» сеткой: 2 — в
   ряд, 3–4 — 2×2, 5–6 — 3×2, дальше по три в ряд с прокруткой. */
#page-upgrade #inArtM:not([data-n="0"]):not([data-n="1"]) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  gap: 6px; align-content: stretch; overflow-y: auto;
}
#page-upgrade #inArtM[data-n="2"] { grid-template-rows: 1fr; }
#page-upgrade #inArtM[data-n="3"], #page-upgrade #inArtM[data-n="4"] { grid-template-rows: repeat(2, 1fr); }
#page-upgrade #inArtM:not([data-n="0"]):not([data-n="1"]):not([data-n="2"]):not([data-n="3"]):not([data-n="4"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc((100% - 6px) / 2);
}
#page-upgrade #inArtM .upa-card-it {
  position: relative; min-height: 0; border-radius: 10px; cursor: pointer;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .06), transparent 70%);
  transition: background .2s ease;
}
#page-upgrade #inArtM .upa-card-it:hover { background: radial-gradient(circle at 50% 45%, rgba(255, 77, 94, .16), transparent 70%); }
#page-upgrade #inArtM .upa-card-it > img, #page-upgrade #inArtM .upa-card-it > svg {
  position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7));
}

/* ============================================================ КЕЙС · СЦЕНА БЕЗ ПРЫЖКОВ
   Открытие 1…5 кейсов не должно двигать страницу. Раньше сцена росла под
   результат: один выигрыш был на 13 px выше сцены, а пять карточек не
   влезали в ряд и переносились — сцена вырастала на 200+ px, кнопки и
   список уезжали вниз. Теперь высота сцены постоянная, а результаты любого
   количества стоят в один ряд, сжимаясь по ширине. */
@media (min-width: 881px) {
  #page-case .co-stage { height: 320px; min-height: 320px; }
  /* Результат стоит на дне сцены: выше её он уходит вверх, под заголовок, —
     высота сцены и всё под ней не двигаются. */
  #page-case .co-hero[data-phase="done"] .co-stage { align-content: end; }
  #page-case .co-drops { flex-wrap: nowrap; }
  #page-case .co-drops:not(.n1) .co-drop { flex: 0 1 auto; min-width: 0; }
  #page-case .co-drops.nm .co-drop { width: auto; flex: 1 1 0; max-width: 236px; }
}

/* ============================================================ КЕЙС · НЕСКОЛЬКО СКИНОВ НА ТЕЛЕФОНЕ
   Владелец (2026-09-30): при пяти скинах результат не помещался на экран
   — карточки шли по две в ряд с лучами и крупной картинкой, и до пятой
   приходилось листать. Теперь от двух скинов — компактные карточки по
   образцу: рамка и свечение в цвет редкости, износ в углу, оружие, название,
   цена и «Продать». Три в ряд на шести колонках, неполный ряд — по центру:
   2 · 3 · 2+2 · 3+2 (data-n ставит showResult). Кнопки под результатом и
   один скин (с окном «Поздравляем!») не меняются. Износ, оружие и монета на
   кнопке есть в разметке всегда — на десктопе их прячет первое правило. */
.co-drop-wear, .co-drop-sell-ic { display: none; }
@media (max-width: 879.98px) {
  #page-case .co-drops:not(.n1) {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; gap: 8px;
  }
  #page-case .co-drops:not(.n1) .co-drop {
    grid-column: span 2; width: auto; min-width: 0; padding: 7px 7px 8px; gap: 0; align-items: stretch;
    border-radius: 10px; border: 1.5px solid var(--rc);
    background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 24%, #0b0b12), rgba(10, 10, 16, .94) 72%);
    box-shadow: 0 0 16px -3px color-mix(in srgb, var(--rc) 75%, transparent), inset 0 0 18px -8px var(--rc);
  }
  #page-case .co-drops[data-n="2"] .co-drop:nth-child(1), #page-case .co-drops[data-n="4"] .co-drop:nth-child(odd),
  #page-case .co-drops[data-n="5"] .co-drop:nth-child(4) { grid-column: 2 / span 2; }
  #page-case .co-drops[data-n="2"] .co-drop:nth-child(2), #page-case .co-drops[data-n="4"] .co-drop:nth-child(even),
  #page-case .co-drops[data-n="5"] .co-drop:nth-child(5) { grid-column: 4 / span 2; }
  #page-case .co-drops:not(.n1) .co-drop-wear {
    display: block; align-self: flex-start; font: 700 var(--fs-micro)/1.2 var(--f-hd); letter-spacing: .04em; color: var(--rc);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  #page-case .co-drops:not(.n1) .co-drop { overflow: hidden; --s: min(100cqw, 88px); }
  #page-case .co-drops:not(.n1) .co-drop-art { margin: 2px 0 4px; }
  #page-case .co-drops:not(.n1) .co-shine { opacity: .9; }
  #page-case .co-drops:not(.n1) .co-drop-art > img, #page-case .co-drops:not(.n1) .co-drop-art > svg {
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 60%, transparent));
  }
  /* Износ здесь в углу карточки — хвост строки оружия не нужен. */
  #page-case .co-drops:not(.n1) .co-drop-q { display: none; }
  #page-case .co-drops:not(.n1) .co-drop-w {
    display: block; margin-top: 2px; font: 400 var(--fs-micro)/1.25 var(--f-hd); letter-spacing: .04em; text-align: left; color: #c09c7a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Название — до двух строк: «Chromatic Aberration» в карточку шириной
     ~110 px одной строкой не встаёт. Цена и кнопка прижаты к низу, чтобы
     в ряду они стояли на одной линии при любой длине названия. */
  #page-case .co-drops:not(.n1) .co-drop-n {
    margin-top: 1px; font: 600 var(--fs-cap)/1.25 var(--f-hd); text-align: left; white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  #page-case .co-drops:not(.n1) .co-drop-p {
    margin-top: auto; padding-top: 6px; align-self: center; font: 700 var(--fs-body)/1 var(--f-hd); color: #ffa838; white-space: nowrap;
    text-shadow: 0 0 12px rgba(255, 138, 30, .5);
  }
  #page-case .co-drops:not(.n1) .co-drop-sell, #page-case .co-drops:not(.n1) .co-drop-demo {
    display: flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box;
    width: 100%; min-height: 28px; margin: 7px 0 0; padding: 4px 6px; border-radius: 8px;
    font: 600 var(--fs-cap)/1.15 var(--f-hd); text-align: center;
  }
  #page-case .co-drops:not(.n1) .co-drop-sell {
    border: 1.5px solid var(--rc); background: rgba(8, 8, 12, .55); color: #f4f4f8;
  }
  #page-case .co-drops:not(.n1) .co-drop-sell:hover { background: color-mix(in srgb, var(--rc) 22%, rgba(8, 8, 12, .55)); color: #fff; }
  #page-case .co-drops:not(.n1) .co-drop-sell-ic { display: inline-flex; }
  #page-case .co-drops:not(.n1) .co-drop-sell-ic > .coin { width: 14px; height: 14px; margin: 0; vertical-align: 0; }
  #page-case .co-drops:not(.n1) .co-drop-sell-p { display: none; }
  #page-case .co-drops:not(.n1) .co-drop-demo { font-size: var(--fs-micro); }
}

/* ===== Колесо: уровни + награды — компактный СТАТИЧНЫЙ блок в углу ===== */
.wha-side > .wha-board { align-self: flex-end; width: 100%; max-width: 292px; }
.wha-board-in {
  display: flex; flex-direction: column; padding: 2px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(10, 10, 14, .74);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* секции внутри — без своей рамки/фона, разделены линией */
.wha-board-in > .wha-tiers, .wha-board-in > .wha-rw {
  width: 100%; box-sizing: border-box; background: none; border: 0; border-radius: 0;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.wha-board-in > .wha-rw { border-top: 1px solid rgba(255, 255, 255, .12); }
/* компактнее: мельче кегль, плотнее ряды, чтобы не лезть на маскота */
.wha-board-in .wha-tiers { padding: 8px 10px 6px; gap: 1px; }
.wha-board-in .wha-tiers-h { margin: 0 0 4px; font-size: 10px; letter-spacing: .1em; }
.wha-board-in .wha-tiers-h > em { font-size: 10px; }
.wha-board-in .wha-tier { padding: 3px 7px; font-size: var(--fs-micro); }
.wha-board-in .wha-tier > small { font-size: 10px; }
.wha-board-in .wha-tier.on::after { font-size: 9px; }
.wha-board-in .wha-rw { padding: 8px 10px; }
.wha-board-in .wha-rw-h { font-size: 10px; letter-spacing: .08em; }
.wha-board-in .wha-rw-h > b { font-size: 10px; }
.wha-board-in .wha-rw-grid { gap: 6px; }
.wha-board-in .wha-tile { padding: 6px 6px 7px; }

/* ---------------------------------------------------------------- автозаполнение
   Chrome красит заполненное поле в светлый фон: при выборе подсказки, при
   наведении на неё и в фокусе. Прежний приём (transition на фон длиной в
   вечность) новые версии обходят.

   Общее правило — светлый текст и курсор, тёмные подсказки браузера
   (color-scheme) и задержка перекраски. У полей со своим фоном (.gfld) он
   дорисован тенью в их же правиле. Полям окна входа и регистрации фон
   даёт рамка вокруг, а само поле прозрачное — у них фон подрезается под
   буквы (background-clip: text), и светлой плашки не видно вовсе. */
:root { color-scheme: dark; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--tx, #ececf2);
  caret-color: var(--tx, #ececf2);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.lga-in > input:-webkit-autofill,
.lga-in > input:-webkit-autofill:hover,
.lga-in > input:-webkit-autofill:focus,
.lga-in > input:-webkit-autofill:active {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
/* Стандартное имя отдельным правилом: браузер, не знающий одного из
   селекторов, выбрасывает весь список, и префиксное правило пропало бы. */
.lga-in > input:autofill {
  background-clip: text !important;
  box-shadow: none !important;
}


/* Обёртка доски «Минного поля»: на десктопе и планшете — прозрачный узел
   (display: contents), на телефоне — фон-арт сцены (блок «Мины на телефоне»
   в конце файла). */
.mna-board-vp { display: contents; }

/* ============================================================ ALIVE · ТЕЛЕФОН — аудит 2026-09-29

   Владелец: «пользователи ругаются на мобильную версию». Замер 390×844,
   нижняя панель занимает 776–844: кнопки ставки Ракеты (786–842) и «Задай
   ставку» Апгрейда (828–884) лежали целиком под ней, у Колеса под кнопкой
   зияла полоса 470px (бокс спрятанного маскота держал место), у оператора
   в «Ещё» не было ни одного раздела админки, таблицы резались краем
   карточки. Здесь — только телефон (≤880px), десктоп не трогается. */

@media (max-width: 880px) {
  /* ---- значки шторки: наш набор вместо эмодзи ---- */
  .mnd-ic img, .sh-ic img { width: 20px; height: 20px; object-fit: contain; display: block; }
  .mnd-ic { width: 24px; }
  .sh-ic img { width: 22px; height: 22px; }
  .mnd-grp {
    margin: 14px 10px 6px; font: 600 var(--fs-micro)/1 var(--f-ui); letter-spacing: .1em;
    text-transform: uppercase; color: #8a8a9a;
  }
  a.mnd-row { text-decoration: none; }

  /* ---- страница кейса: без Case ID / Opened / Drop value ---- */
  .co-chips { display: none !important; }

  /* ---- Ракета: сцена выше, ставка заползает на неё, кнопка сразу под суммой ---- */
  .ra-stage { height: 436px; }
  .ra-chips { bottom: 52px; }
  /* Регулятор громкости — справа над «Банком» и «Игроками», а не слева: там
     стартовая площадка, и он лежал на ракете всё время приёма ставок. В
     полёте кончик кривой не заходит правее середины поля (geometry в
     crash.js), так что справа над плашками всегда пусто. */
  .ra-bottom { left: auto; right: 10px; bottom: 100px; }
  /* Ставок нет — плашки «Банк» и «Игроки» спрятаны (место держат), и
     регулятор с «Как играть?» висели над пустотой посреди поля. Тогда
     они встают на место плашек — к правому нижнему краю видимой сцены
     (низ поля на 40 px под панелью ставки); со ставками — снова над плашками. */
  #crBoard .ra-bottom { transition: bottom .25s ease; }
  #crBoard:not(:has(.ra-chip:not(.is-zero))) .ra-bottom { bottom: 52px; }
  #page-crash .rbp { margin-top: -40px; z-index: 2; gap: 12px; padding: 14px 14px 12px; }
  #page-crash .rbp > .rbp-foot { order: 1; }
  #page-crash .rbp > .rbp-field { order: 2; }

  /* ---- Апгрейд: всё на одном экране ---- */
  #page-upgrade.on { gap: 12px 12px; }
  #page-upgrade .upa-card-box, #page-upgrade .upa-card:not(.filled) .upa-card-box {
    min-height: 0; height: 92px; padding: 8px 10px; gap: 1px 10px;
    display: grid; grid-template-columns: 62px minmax(0, 1fr);
    grid-template-areas: "art w" "art n" "art f"; align-content: center;
  }
  #page-upgrade .upa-card-art { grid-area: art; height: 62px; align-self: center; }
  #page-upgrade .upa-card-top { grid-area: w; min-height: 0; }
  #page-upgrade .upa-card-w { font-size: var(--fs-micro); }
  #page-upgrade .upa-card-n { grid-area: n; font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-upgrade .upa-card-x { display: none; }
  #page-upgrade .upa-card-f { grid-area: f; }
  #page-upgrade .upa-card-p { font-size: var(--fs-body); }
  #page-upgrade .upa-card:not(.filled) .upa-card-art,
  #page-upgrade .upa-card:not(.filled) .upa-card-top,
  #page-upgrade .upa-card:not(.filled) .upa-card-n,
  #page-upgrade .upa-card:not(.filled) .upa-card-f { display: none; }
  #page-upgrade .upa-card:not(.filled) .upa-card-empty {
    grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; text-align: center;
    margin: 0; font-size: var(--fs-label);
  }
  /* кольцо: рамка ring2.png на месте — она есть в референсе владельца */
  #page-upgrade .upa-scene .upa-dial { width: 196px; height: 196px; margin: 0; }
  #page-upgrade .upa-scene .upa-dial::after {
    content: ''; position: absolute; inset: 9%; z-index: 0; border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #16171f, #0a0b0f 74%);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .85);
  }
  #page-upgrade .upa-scene .upa-dial::before {
    width: 0; height: 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
    left: 50%; top: -6px; transform: translateX(-50%); z-index: 5;
    border-left: 9px solid transparent; border-right: 9px solid transparent;
    border-top: 14px solid #ff7a18; border-bottom: 0;
    filter: drop-shadow(0 0 6px rgba(255, 122, 24, .85));
  }
  #page-upgrade .upa-dial .ring { inset: 0; width: 100%; height: 100%; }
  #page-upgrade .upa-dial .r-zone, #page-upgrade .upa-dial .r-zone-glow,
  #page-upgrade .upa-dial .r-zone-bonus, #page-upgrade .upa-dial .r-zone-bonus-glow { stroke-width: 6px; }
  #page-upgrade .upa-dial .ring-val,
  #page-upgrade .upa-dial .ring.bonus-on:not(.win):not(.lose) .ring-val { font-size: 30px; }
  /* множители и сумма — компактно, кнопка сразу под ними */
  #page-upgrade .upa-presets { gap: 8px; }
  #page-upgrade .upa-prow .preset-grp.mu .preset-tag { display: none; }
  #page-upgrade .upa-prow .preset { min-height: 42px; }
  /* Блок множителей — не шире экрана: трек сетки не растёт от капсулы
     баланса, у неё ползунок сжимается, а поле суммы фиксированной ширины. */
  #page-upgrade .upa-presets, #page-upgrade .upa-prow { min-width: 0; max-width: 100%; }
  #page-upgrade .upa-prow .preset-grp.mu { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  #page-upgrade .upa-cash { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; box-sizing: border-box; }
  #page-upgrade .upa-cash input[type=range] { flex: 1 1 40px; width: auto; min-width: 40px; }
  #page-upgrade .upa-cash .cl-num { flex: none; width: 84px; }
  #page-upgrade .upa-go { min-height: 52px; }

  /* ---- Колесо: компактный заголовок, без дыры под кнопкой ---- */
  .wha > .wha-intro { padding-top: 4px; gap: 6px; }
  .wha-intro > .wha-kicker { font-size: var(--fs-micro); letter-spacing: .3em; }
  .wha-intro > .wha-h { font-size: 30px; line-height: .95; }
  .wha-intro > .wha-h > span { font-size: 1.2em; }
  .wha-intro > .wha-tag { font-size: var(--fs-cap); letter-spacing: .24em; }
  .wha-intro > .wha-lead { display: none; }
  .wha-side > .wha-ph { display: none; }
  .wha > .wha-side { align-items: stretch; }
  .wha-side > .wha-board { align-self: stretch; max-width: none; width: 100%; }
  .page.on .wha { flex: 0 0 auto; }

  /* ---- оператор: таблицы прокручиваются внутри карточки, шапки переносятся ---- */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .pa-head { flex-wrap: wrap; gap: 8px; }
  .pa-head > input, .pa-head > select, .pa-head > .seg { flex: 1 1 100%; min-width: 0; }
  .pa-head > .btn { flex: 1 1 calc(50% - 4px); }
  /* «Цены»: четыре кнопки действий — по две в ряд, а не столбиком (у .adm-h .btn стоит flex: none). */
  #page-prices .adm-h { align-items: stretch; }
  #page-prices .adm-h .btn.pc-act { flex: 1 1 calc(50% - 6px); min-width: 0; white-space: normal; font-size: var(--fs-label); padding: 8px 8px; line-height: 1.25; }
  #page-prices .adm-h > .grow { display: none; }
  .seg { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Мины на планшете (641–880px; телефон — блок ниже): доска ландшафтная во
   всю ширину, карточка ставки под ней. Порядок в карточке: сумма и быстрые →
   мин в шаге → НАЧАТЬ → скины в ставке. */
@media (max-width: 880px) {
  #page-mines .rbp { gap: 10px; padding: 12px 14px 12px; }
  /* Заголовки «Ставка» и «Сумма» на телефоне лишние: поле со знаком монеты и
     кнопка «Начать» говорят сами за себя, а 45px они отнимают у кнопки. */
  #page-mines .rbp > .rbp-head, #page-mines .rbp > .rbp-stake > .rbp-lbl { display: none; }
  #page-mines .rbp > .rbp-foot { order: 1; }
  #page-mines .rbp > .rbp-field:has(.rbp-list) { order: 2; }
}

/* ============================================================ ТЕЛЕФОН · ШАПКА И МЕНЮ БЕЗ НИЖНЕЙ ПАНЕЛИ (2026-09-29)

   Владелец, по референсу «Мины»: шапка — «назад», маскот, название раздела,
   баланс с «+», бургер. Нижней панели вкладок нет: вся навигация — в шторке,
   которую открывает бургер (mobilenav.js). Десктоп не трогается: «назад»,
   маскот в шапке и «выплата за шаг» там спрятаны. */

.tb-back, .mna-step { display: none; }
/* Геометрия клеток и экранов доски — CSS-переменными из mines.js: десктопный
   арт по умолчанию, портретный — на телефоне (ниже). */
.mna-cell, .mna-scr { left: var(--l); top: var(--t); width: var(--w); height: var(--h); }

@media (max-width: 880px) {
  :root { --tabbar-h: 0px; --tb-h: 60px; }
  .main { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .toasts { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

  /* ---- шапка ---- */
  .tb-back:not([hidden]), .topbar .tb-burger {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(18, 18, 24, .85); color: #fff; cursor: pointer; font-size: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .tb-back svg, .tb-burger svg { width: 22px; height: 22px; }
  .tb-back:active, .tb-burger:active, .tb-burger[aria-expanded="true"] {
    background: rgba(255, 122, 24, .2); border-color: rgba(255, 122, 24, .5);
  }
  .tb-logo { padding: 0; gap: 0; }
  /* Имя сайта — везде, как на компьютере: из любого раздела оно ведёт на
     главную (владелец, 29.10). Внутри раздела — рядом с «назад»; названия
     раздела в шапке нет — всё вместе не влезало. Маскота нет (владелец). */
  .topbar .tb-mid { display: none; }
  .tb-mid .page-title {
    font: 800 16px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  }
  .tb-right { gap: 8px; }
  .tb-bal { height: 40px; padding: 0 5px 0 12px; gap: 8px; border-radius: 12px; }
  .tb-bal .v { color: #fff; font-size: var(--fs-body); }
  /* Бирка «к получению» — значок подарка вместо суммы: с суммой пилюля
     баланса вытесняла название раздела на 360px. Сумма — в окне выбора,
     которое бирка открывает. */
  .tb-hold {
    width: 26px; height: 26px; padding: 0; margin-left: 2px; border-radius: 8px; font-size: 0;
    background: rgba(255, 122, 24, .15) url(/assets/icons/gift.webp) center / 17px no-repeat;
  }
  .tb-dep {
    width: 28px; height: 28px; border-radius: 8px; border: 0;
    background: linear-gradient(180deg, #ffb44a, #ff7a18); color: #180a00;
    font: 800 18px/1 var(--f-hd); box-shadow: 0 4px 12px rgba(255, 122, 24, .35);
  }

  /* ---- шторка: группы и пометки ---- */
  .mnd-grp:first-child { margin-top: 4px; }
  .mnd-row.soon { opacity: .55; }
  .mnd-soon {
    flex: none; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .07);
    color: #8a8a9a; font: 700 10px/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase;
  }
  .mnd-live, .mnd-dot {
    flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: var(--al-or2, #ff5c00); box-shadow: 0 0 8px var(--al-or2, #ff5c00);
  }
  .mnd-live { background: #35d07f; box-shadow: 0 0 8px #35d07f; }
}

/* Узкий телефон (до 400px): кнопки и маскот в шапке чуть меньше, иначе
   названию раздела («Апгрейд») оставалось 70px и оно резалось многоточием. */
@media (max-width: 400px) {
  .topbar { gap: 6px; padding: 0 10px; }
  .tb-back:not([hidden]), .topbar .tb-burger { width: 38px; height: 38px; }
  .tb-mid .page-title { font-size: var(--fs-body); letter-spacing: .04em; }
}

/* ---- Мины на телефоне: по референсу владельца (2026-09-29) ----

   Портретный арт bg-mobile.webp (941×1672) — фон всей сцены: крепость,
   доска с лестницей множителей, брусчатка. Над доской — карточки «Мин в
   шаге» и «Скины в ставке», клетки и экраны в координатах портретного
   арта (--pl/--pt/--pw/--ph из mines.js), внизу карточка ставки. Панель
   ставки (.rbp) разбирается на части через display: contents и ложится в
   сетку сцены: обёртка-арт занимает первые два ряда, карточки — первый,
   фон карточки ставки рисует ::after сцены под рядами 3–6. */
@media (max-width: 640px) {
  #page-mines .mna-stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px;
    margin-top: -12px;
  }
  #page-mines .mna-stage > .mna-board-vp {
    display: block; position: relative; z-index: 0; grid-row: 1 / 3; grid-column: 1 / -1;
    width: calc(100% + 24px); margin: 0 -12px; aspect-ratio: 941 / 1300; overflow: hidden;
    background:
      linear-gradient(180deg, rgba(5, 6, 8, 0) 80%, var(--bg) 100%),
      url(/assets/mines/bg-mobile.webp) top center / 100% auto no-repeat;
  }
  #page-mines .mna-board-vp > .mna-board {
    position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 941 / 1672;
    background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  }
  #page-mines .mna-shade { display: none; }
  #page-mines .mna-bottom { left: auto; right: 12px; bottom: auto; top: 72.5%; }
  #page-mines .mna-cell, #page-mines .mna-scr {
    left: var(--pl); top: var(--pt); width: var(--pw); height: var(--ph);
  }
  #page-mines .mna-scr { transform: translate(-50%, -50%); border-radius: 8px; }
  #page-mines .mna-scr b { font-size: calc(var(--fs, 2cqw) * 2.2); }
  /* Экран статуса уже прочих, а INACTIVE — восемь букв: кегль меньше, без разрядки. */
  #page-mines .mna-scr.st b { font-size: calc(var(--fs, 1.7cqw) * 1.75); letter-spacing: 0; }

  /* карточки над доской */
  #page-mines .rbp { display: contents; }
  #page-mines .rbp > .rbp-tex, #page-mines .rbp > .rbp-edge { display: none; }
  #page-mines .rbp > .mna-field-mines, #page-mines .rbp > .rbp-field:has(.rbp-list) {
    z-index: 1; grid-row: 1; margin-top: 8px; padding: 8px 9px 8px; gap: 6px; border-radius: 12px;
    background: rgba(10, 10, 16, .78); border: 1px solid rgba(255, 122, 24, .22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  #page-mines .rbp > .mna-field-mines { grid-column: 1; }
  #page-mines .rbp > .rbp-field:has(.rbp-list) { grid-column: 2; }
  #page-mines .rbp .rbp-lbl { font-size: var(--fs-micro); letter-spacing: .08em; }
  #page-mines .mna-opts { gap: 5px; }
  #page-mines .mna-opt { height: 37px; gap: 0; border-radius: 9px; }
  #page-mines .mna-opt b { font-size: var(--fs-ui); }
  #page-mines .mna-opt small { font-size: var(--fs-micro); }
  #page-mines .mna-opt-k { display: none; }
  #page-mines .rbp[data-game="mines"] .rbp-list {
    flex-direction: row; gap: 6px; height: 37px; padding: 0; overflow: auto hidden;
    scrollbar-width: none;
  }
  #page-mines .rbp-list::-webkit-scrollbar { display: none; }
  #page-mines .rbp-add {
    flex: 1 1 auto; min-width: 0; height: 37px; padding: 0 7px; gap: 8px; justify-content: flex-start;
    font-size: var(--fs-cap); line-height: 1.1; text-align: left; border-radius: 9px;
  }
  #page-mines .rbp-add > span {
    display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
    color: #fff; font-size: 18px;
  }
  #page-mines .rbp-add::after { content: '›'; margin-left: auto; color: #8a8a9a; font-size: 16px; }
  #page-mines .rbp-pick {
    flex: none; width: 52px; height: 37px; min-height: 37px; padding: 0;
    grid-template-columns: 1fr; justify-items: center;
  }
  #page-mines .rbp-pick-art { width: 44px; height: 28px; }
  #page-mines .rbp-pick-tx, #page-mines .rbp-pick-p { display: none; }
  #page-mines .rbp-x {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 5px;
    font-size: var(--fs-micro); background: rgba(0, 0, 0, .55);
  }
  #page-mines .rbp-more { flex: none; width: 37px; height: 37px; font-size: 0; }
  #page-mines .rbp-more::before { content: '+'; font-size: 20px; }

  /* карточка ставки */
  #page-mines .mna-stage::after {
    content: ''; grid-row: 3 / 7; grid-column: 1 / -1; z-index: 0; border-radius: 18px;
    background: linear-gradient(180deg, rgba(18, 18, 25, .96), rgba(11, 11, 16, .98));
    border: 1px solid rgba(255, 122, 24, .22); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
  }
  #page-mines .rbp > .rbp-head, #page-mines .rbp > .rbp-stake,
  #page-mines .rbp > .rbp-warn, #page-mines .rbp > .rbp-foot { grid-column: 1 / -1; z-index: 1; }
  #page-mines .rbp > .rbp-head {
    grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px 0;
  }
  /* «Ставка» — как активная вкладка в референсе: рамка, без второй вкладки
     (автоигры у мин нет, а пустая вкладка хуже отсутствия). */
  #page-mines .rbp > .rbp-head h3 {
    display: grid; place-items: center; height: 34px; padding: 0 22px; border-radius: 10px;
    border: 1px solid rgba(255, 168, 56, .7); background: rgba(255, 122, 24, .1); font-size: var(--fs-label);
  }
  #page-mines .mna-step { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  #page-mines .mna-step small { font: 500 var(--fs-micro)/1 var(--f-ui); color: #8a8a9a; }
  #page-mines .mna-step b { font: 700 20px/1 var(--f-hd); color: #ffa838; font-variant-numeric: tabular-nums; }
  #page-mines .rbp > .rbp-stake { grid-row: 4; padding: 10px 12px 0; gap: 6px; }
  #page-mines .rbp > .rbp-stake > .rbp-lbl { font-size: var(--fs-cap); }
  #page-mines .rbp > .rbp-stake > .rbp-lbl { display: flex; }
  #page-mines .rbp .rbp-amt { grid-template-columns: 50px 1fr 50px; gap: 6px; }
  #page-mines .rbp .rbp-in input { height: 36px; font-size: 19px; }
  #page-mines .rbp .rbp-step { font-size: 18px; }
  #page-mines .rbp-quick { gap: 6px; }
  #page-mines .rbp-q { height: 30px; font-size: var(--fs-label); }
  #page-mines .rbp > .rbp-warn { grid-row: 5; padding: 8px 12px 0; }
  #page-mines .rbp > .rbp-foot { grid-row: 6; margin: 0; padding: 9px 12px 12px; }
  #page-mines .rbp-main { height: 58px; font-size: 16px; }
  #page-mines .mna-recent { grid-row: 7; grid-column: 1 / -1; margin-top: 12px; }
}

/* ============================================================ ТЕЛЕФОН · ВТОРОЙ ПРОХОД (2026-09-29)

   Владелец: блок уровня в Battle Pass «не помещается и не нравится»;
   прогон всех страниц. Здесь — только телефон. */
@media (max-width: 880px) {
  /* ---- Battle Pass: блок уровня — простая карточка ----
     Плита с ломаными углами и светящимися кромками на 390px резала третью
     плашку статистики и прятала кнопку «Забрать награду». Теперь: карточка
     со скруглением, шестиугольник уровня и полоса опыта в строку, награда
     с кнопкой во всю ширину, три плашки статистики столбиками. */
  .bpp-prog {
    margin: -8px 12px 0; padding: 14px 12px 12px; gap: 12px 12px; border-radius: 16px; filter: none;
    background: linear-gradient(180deg, #14141a, #0b0b0f); border: 1px solid rgba(255, 122, 24, .25);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  }
  .bpp-plate, .bpp-plate-in, .bpp-rim { display: none; }
  .bpp-hex { width: 54px; height: 60px; }
  .bpp-hex b { font-size: 22px; }
  .bpp-cur-h span { font-size: var(--fs-micro); }
  .bpp-cur-h small { font-size: var(--fs-label); }
  .bpp-ready { padding: 10px; gap: 10px; }
  .bpp-ready-art { width: 48px; height: 48px; }
  .bpp-ready .bpp-claim { display: block; flex: 1 1 100%; width: 100%; min-height: 44px; padding: 0; }
  .bpp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .bpp-stat {
    width: auto; box-sizing: border-box; flex-direction: column; align-items: center; text-align: center;
    gap: 4px; padding: 10px 6px 8px;
  }
  .bpp-stat-ic { width: 30px; height: 30px; font-size: var(--fs-ui); }
  .bpp-stat-tx { align-items: center; }
  .bpp-stat-tx small { white-space: normal; font-size: 10px; }
  .bpp-stat-tx b { font-size: 17px; }
  .bpp-stat-tx small.n { font-size: 10px; }
  /* Второй трек (косметика бонусом к уровню): пустые пунктирные слоты не
     рисуем — ряд пустых рамок под лентой читался как поломка. Уровни
     выравниваются по верху, бонус стоит под своей карточкой. */
  .bpp-rail { align-items: flex-start; }
  .bpp-lv-b.empty { display: none; }

  /* ---- Кейсы: «кейс недели» компактнее ----
     Герой занимал весь первый экран, бесплатные кейсы — второй, сами кейсы
     начинались с третьего. Арт ниже, бонусы в один ряд, кнопка ниже. */
  .cs-week { padding: 12px 12px 14px; gap: 6px; }
  .cs-week-art { height: 190px; }
  .cs-week-body { gap: 10px; padding-top: 0; }
  .cs-week-name { font-size: 28px; }
  .cs-week-perks { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cs-week-perk { padding: 8px 10px; gap: 8px; font-size: var(--fs-micro); }
  .cs-week-perk img { width: 30px; height: 30px; }
  .cs-week-perk b { font-size: var(--fs-ui); }
  .cs-week-cta { height: 50px; }

  /* ---- Ракета: доски ставок и топа не держат пустую высоту ----
     «Ставки раунда» стояли на 440px, «Топ выигрышей» на 340px, даже когда в
     них по одной строке «пока пусто». Высота по содержимому, потолок прежний,
     дальше — прокрутка внутри. */
  .ra-live { height: auto; max-height: 440px; }
  .ra-box { height: auto; max-height: 340px; }
}

/* ============================================================ АПГРЕЙД НА ТЕЛЕФОНЕ — по референсу upgrader-mobile-ref (2026-09-29)

   Портретный арт page-bg.png во весь экран без затемнения, карточки
   «Ваш предмет» / «Вы получите» с силуэтом оружия (ghost-*.png — вырезаны из
   референса), шестиугольником «+» и подсказкой в две строки, между ними «»»;
   кольцо 220px с указателем сверху; два ряда пресетов (множители и шансы),
   капсула «С баланса», кнопка «Задай ставку». Размеры — с референса в
   пересчёте на 390px. */
@media (max-width: 880px) {
  #page-upgrade.on {
    gap: 10px 30px; margin: -12px -12px 0; padding: 8px 15px 24px;
    min-height: calc(100vw * 1808 / 870);
    background: #07070a url('/assets/upg/page-bg.webp') top center / 100% auto no-repeat;
  }
  #page-upgrade .upa-snd { margin-bottom: 0; }
  #page-upgrade .upa-card { gap: 8px; margin-top: 24px; }
  #page-upgrade .upa-card-k { font: 600 var(--fs-ui)/1 var(--f-ui); color: #e6e6ee; }
  #page-upgrade .upa-card-box, #page-upgrade .upa-card:not(.filled) .upa-card-box {
    height: 133px; min-height: 133px; padding: 10px 10px 12px; border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(180deg, rgba(44, 44, 54, .9), rgba(22, 22, 30, .94));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  }
  #page-upgrade .upa-card.in:not(.filled) .upa-card-box {
    background: url('/assets/upg/ghost-rifle.png') center / 100% 100% no-repeat,
      linear-gradient(180deg, rgba(44, 44, 54, .9), rgba(22, 22, 30, .94));
  }
  #page-upgrade .upa-card.out:not(.filled) .upa-card-box {
    background: url('/assets/upg/ghost-knife.png') center / 100% 100% no-repeat,
      linear-gradient(180deg, rgba(44, 44, 54, .9), rgba(22, 22, 30, .94));
  }
  #page-upgrade .upa-card-box::before { display: none; }
  #page-upgrade .upa-card-box { position: relative; }
  /* «»» между карточками */
  #page-upgrade .upa-card.out .upa-card-box::after {
    content: '»'; position: absolute; left: -26px; top: 50%; transform: translateY(-56%);
    font: 700 30px/1 var(--f-hd); color: #ff8a1e; text-shadow: 0 0 12px rgba(255, 122, 24, .8);
    pointer-events: none;
  }
  /* заполненная карточка: арт крупнее, подписи под ним */
  /* заполненная карточка: арт сверху, под ним оружие, название и цена — во
     всю ширину карточки (в две колонки названию оставалось 69px, и бирка
     износа вылезала за край) */
  #page-upgrade .upa-card.filled .upa-card-box {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 1px; padding: 7px 10px 8px;
  }
  #page-upgrade .upa-card.filled .upa-card-art { height: 58px; width: 100%; flex: none; }
  #page-upgrade .upa-card.filled .upa-card-w { font-size: var(--fs-micro); }
  #page-upgrade .upa-card.filled .upa-card-n { font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-upgrade .upa-card.filled .upa-card-f { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  #page-upgrade .upa-card.filled .upa-card-p { font-size: var(--fs-body); white-space: nowrap; }
  #page-upgrade .upa-card.filled .upa-card-xm { flex: none; }
  /* пустая карточка: шестиугольник «+» и подсказка в две строки */
  #page-upgrade .upa-card:not(.filled) .upa-card-box { display: flex; flex-direction: column; }
  #page-upgrade .upa-card:not(.filled) .upa-card-empty {
    position: relative; inset: auto; flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; padding: 0 0 1px; margin: 0; box-sizing: border-box;
    /* без привязки к области сетки: иначе inset: 0 считается от пустой строки сетки, а не от карточки */
    grid-area: auto; grid-column: auto; grid-row: auto;
    font: 500 var(--fs-label)/1.3 var(--f-ui); color: #d0d0da; text-align: center;
  }
  #page-upgrade .upa-card:not(.filled) .upa-card-empty::before,
  #page-upgrade .upa-card:not(.filled) .upa-card-empty::after {
    content: ''; position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }
  #page-upgrade .upa-card:not(.filled) .upa-card-empty::before {
    width: 38px; height: 42px; background: #ff7a18; filter: drop-shadow(0 0 10px rgba(255, 122, 24, .7));
  }
  #page-upgrade .upa-card:not(.filled) .upa-card-empty::after {
    content: '+'; width: 34px; height: 38px; display: grid; place-items: center;
    background: #1a1a22; color: #ffa838; font: 600 24px/1 var(--f-hd);
  }

  /* кольцо: рамка, указатель с чертой сверху */
  #page-upgrade .upa-scene .upa-dial { width: 220px; height: 220px; margin: 10px 0 30px; }
  /* указатель — свой у рамки ring2.png; второй, рисованный, ей не нужен */
  #page-upgrade .upa-scene .upa-dial::after, #page-upgrade .upa-scene .upa-dial::before { display: none; }
  #page-upgrade .upa-scene .upa-dial-unused::before {
    width: 26px; height: 46px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
    left: 50%; top: -40px; transform: translateX(-50%); z-index: 5; filter: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 46'%3E%3Cpath d='M2 2h22L13 20z' fill='none' stroke='%23ff7a18' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M13 22v22' stroke='%23ff7a18' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* кольцо внутри рамки, показания по центру диска */
  #page-upgrade .upa-dial .ring { inset: 8%; width: 84%; height: 84%; }
  #page-upgrade .upa-dial .ring-center {
    position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  #page-upgrade .upa-dial .ring-center > div { margin: 0; display: flex; flex-direction: column; align-items: center; }
  #page-upgrade .upa-dial .ring-val, #page-upgrade .upa-dial .ring-sub, #page-upgrade .upa-dial .ring-note {
    position: relative; inset: auto; width: auto; transform: none; margin: 0;
  }
  #page-upgrade .upa-dial .ring-sub { margin-top: 4px; }
  #page-upgrade .upa-dial .ring-val,
  #page-upgrade .upa-dial .ring.bonus-on:not(.win):not(.lose) .ring-val { font-size: 40px; }
  #page-upgrade .upa-dial .ring-sub { font-size: var(--fs-cap); letter-spacing: .16em; }

  /* пресеты: два ряда по три — множители и шансы */
  #page-upgrade .upa-presets { gap: 10px; }
  #page-upgrade .upa-prow { display: flex; flex-direction: column; gap: 9px; }
  #page-upgrade .upa-prow .preset-grp.mu, #page-upgrade .upa-prow .preset-grp.ch {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    width: 100%; max-width: none; margin: 0; align-self: stretch;
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  #page-upgrade .upa-prow .preset-tag { display: none; }
  #page-upgrade .upa-prow .preset {
    min-height: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .12); background: rgba(14, 14, 20, .72);
  }
  #page-upgrade .upa-prow .preset .p-mu { display: none; }
  #page-upgrade .upa-prow .preset .p-ch, #page-upgrade .upa-prow .preset.mul .p-ch { font: 700 16px/1 var(--f-hd); color: #d8d8e2; }
  #page-upgrade .upa-prow .preset.on { border-color: #ff8a1e; background: rgba(255, 122, 24, .14); }
  #page-upgrade .upa-prow .preset.on .p-ch { color: #ffb347; }
  #page-upgrade .upa-cash { height: 44px; padding: 5px 5px 5px 5px; gap: 10px; border-radius: 12px; background: rgba(14, 14, 20, .78); }
  #page-upgrade .upa-cash .cl-k { font: 600 var(--fs-label)/1 var(--f-ui); letter-spacing: .06em; color: #e6e6ee; }
  #page-upgrade .upa-cash .cl-num { width: 84px; height: 34px; border-radius: 9px; }
  #page-upgrade .upa-cash .preset-fast { width: 34px; height: 34px; border-radius: 9px; }
  #page-upgrade .upa-go { min-height: 54px; border-radius: 14px; font-size: 17px; }
}

/* ---- Апгрейд на телефоне, доводка (владелец, 2026-09-29) ----
   Без «быстрого выбора»; кнопки темнее, как в референсе; карточки с
   чёрно-оранжевой рамкой; в заполненной карточке скин сверху, подписи снизу
   (могут лечь на скин); несколько скинов ставки — в ряд внахлёст; редкость —
   фоном; кольцо как на компе: без металлической рамки, диск и SVG-кольцо. */
@media (max-width: 880px) {
  #page-upgrade .upa-quick { display: none !important; }

  /* карточки: рамка чёрная → оранжевая */
  #page-upgrade .upa-card-box, #page-upgrade .upa-card:not(.filled) .upa-card-box,
  #page-upgrade .upa-card.filled .upa-card-box {
    border: 1px solid transparent;
    background:
      linear-gradient(180deg, rgba(40, 40, 50, .94), rgba(20, 20, 28, .97)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 122, 24, .25) 45%, #ff7a18 100%) border-box;
  }
  #page-upgrade .upa-card.in:not(.filled) .upa-card-box {
    background:
      url('/assets/upg/ghost-rifle.png') center / 100% 100% no-repeat padding-box,
      linear-gradient(180deg, rgba(40, 40, 50, .94), rgba(20, 20, 28, .97)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 122, 24, .25) 45%, #ff7a18 100%) border-box;
  }
  #page-upgrade .upa-card.out:not(.filled) .upa-card-box {
    background:
      url('/assets/upg/ghost-knife.png') center / 100% 100% no-repeat padding-box,
      linear-gradient(180deg, rgba(40, 40, 50, .94), rgba(20, 20, 28, .97)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 122, 24, .25) 45%, #ff7a18 100%) border-box;
  }
  /* заполненная: редкость — свечением сверху (--rc ставит upgrader.js) */
  #page-upgrade .upa-card.filled .upa-card-box {
    position: relative; overflow: hidden; padding: 0; display: block;
    background:
      radial-gradient(ellipse 80% 60% at 50% 18%, color-mix(in srgb, var(--rc, #4b69ff) 55%, transparent), transparent 70%) padding-box,
      linear-gradient(180deg, rgba(40, 40, 50, .94), rgba(20, 20, 28, .97)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 122, 24, .25) 45%, #ff7a18 100%) border-box;
  }
  #page-upgrade .upa-card.filled .upa-card-box::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--rc, #4b69ff); box-shadow: 0 0 12px var(--rc, #4b69ff);
  }
  /* скин — сверху, крупно; подписи — внизу поверх */
  #page-upgrade .upa-card.filled .upa-card-art {
    position: absolute; left: 6px; right: 6px; top: 4px; height: 92px; width: auto; flex: none;
  }
  #page-upgrade .upa-card.filled .upa-card-art > img, #page-upgrade .upa-card.filled .upa-card-art > svg {
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .8));
  }
  #page-upgrade .upa-card.filled .upa-card-top, #page-upgrade .upa-card.filled .upa-card-n,
  #page-upgrade .upa-card.filled .upa-card-f {
    position: absolute; left: 10px; right: 10px; z-index: 2; text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
  }
  #page-upgrade .upa-card.filled .upa-card-top { top: auto; bottom: 46px; }
  #page-upgrade .upa-card.filled .upa-card-w { font-size: var(--fs-micro); color: #b8b8c6; }
  #page-upgrade .upa-card.filled .upa-card-n { bottom: 27px; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #page-upgrade .upa-card.filled .upa-card-f { bottom: 8px; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  #page-upgrade .upa-card.filled .upa-card-p { font-size: var(--fs-body); white-space: nowrap; }
  #page-upgrade .upa-card.filled .upa-card-xm { flex: none; }
  /* несколько скинов ставки — в ряд внахлёст */
  #page-upgrade #inArtM:not([data-n="0"]):not([data-n="1"]) {
    display: flex; justify-content: center; align-items: center; gap: 0; overflow: visible;
    grid-template-columns: none; grid-template-rows: none;
  }
  #page-upgrade #inArtM .upa-card-it {
    flex: 0 1 64px; width: 64px; height: 100%; margin: 0 -10px; background: none; min-width: 0;
  }
  #page-upgrade #inArtM .upa-card-it > img, #page-upgrade #inArtM .upa-card-it > svg { inset: 0; width: 100%; height: 100%; }

  /* кольцо как на компе: без рамки, диск и SVG-кольцо во весь круг */
  #page-upgrade .upa-bezel { display: none !important; }
  #page-upgrade .upa-disc { display: block; }
  #page-upgrade .upa-scene .upa-dial { width: 224px; height: 224px; }
  #page-upgrade .upa-dial .ring { inset: 0; width: 100%; height: 100%; }
  #page-upgrade .upa-dial .ring-sub { order: 0; margin: 0 0 4px; }
  #page-upgrade .upa-dial .ring-val { order: 1; font-size: 40px; }
  #page-upgrade .upa-dial .ring-note { order: 2; }

  /* кнопки темнее */
  #page-upgrade .upa-prow .preset { background: rgba(6, 6, 10, .82); border-color: rgba(255, 255, 255, .09); }
  #page-upgrade .upa-prow .preset.on { background: rgba(255, 122, 24, .12); }
  #page-upgrade .upa-cash { background: rgba(6, 6, 10, .82); border: 1px solid rgba(255, 255, 255, .09); }
}

/* Оператор на телефоне: вкладки партнёрки переносятся на вторую строку, а не
   уезжают за край. */
@media (max-width: 880px) {
  #page-partners_admin .seg { flex-wrap: wrap; overflow: visible; }
}

/* ---- Оператор · игроки на телефоне карточками (2026-09-29) ----
   Таблица на одиннадцать колонок на 390px читалась только прокруткой вбок.
   Те же данные — карточкой на игрока: имя, баланс с инвентарём,
   занёс/вывел/регистрация/визит. Порядок — списком вместо заголовков. */
.plc-list { display: none; }
@media (max-width: 880px) {
  #page-players .tbl-wrap { display: none; }
  #plSearch { min-width: 0; width: 100%; }
  .plc-list { display: flex; flex-direction: column; gap: 8px; }
  .plc-sort { display: flex; align-items: center; gap: 10px; font-size: var(--fs-cap); color: var(--tx-3); }
  .plc-sort select { flex: 1; min-width: 0; height: 36px; }
  .plc {
    padding: 10px 12px; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07);
  }
  .plc.off { opacity: .55; }
  .plc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .plc-h > b { font-size: var(--fs-body); }
  .plc-bal { margin-top: 6px; font-size: var(--fs-label); color: var(--tx-2); }
  .plc-bal b { color: var(--or-2); font-size: var(--fs-ui); }
  .plc-r { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: var(--fs-cap); color: var(--tx-3); }
  .plc-r b { color: var(--tx-2); font-weight: 600; }
}

/* ============================================================ ALIVE · BATTLE PASS · ИМЯ И УСЛОВИЯ ЗАДАНИЙ

   2026-09-29, ТЗ_BATTLEPASS_ЗАДАНИЯ.md, этап 3. Над подписью задания —
   одна строка: имя карточки («На взлёт», «Сапёр», «Без остановки»,
   «Охотник за лутом» — мелким капсом, как «Недельное») и её условие зачёта
   приглушённо. Одной строкой, а не двумя: блок заданий на обложке стоит
   над плитой уровня (она в 500px от верха сцены), запаса было 37px, и
   отдельные строки имени и условий уводили блок под плиту на 69px. Общее
   «ставка от $1» — в шапке блока. В боковой колонке места нет — там
   условие в title, а имя строкой. */

.bpp-task-kick {
  display: block; margin-bottom: 4px;
  font: 400 var(--fs-micro)/1.3 var(--f-ui); color: #8a8a9a;
}
.bpp-task-kick b {
  font: 600 var(--fs-micro)/1.3 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffa838;
}
.bpp-task.done .bpp-task-kick b { color: #ffd23b; }
.bps-name {
  display: block; margin-bottom: 2px;
  font: 600 10px/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--al-or);
}

/* Блок заданий поднят к верху сцены, чтобы строки условий уместились над
   плитой уровня. Замер 2026-09-29, три ежедневных и недельное: на широком
   экране верх 176 -> 136px, до плиты остаётся 29px — хватает ещё на одну
   строку условия. На 881–1180 сцена берёт отступ сверху 130px под
   вступление, и блок уходил за её нижний край — недельного не было видно
   и до этой правки; там он поднят к верху сцены (запас 33px). */
@media (min-width: 1181px) {
  .bpp-tasks { margin-top: 16px; }
}
@media (min-width: 881px) and (max-width: 1180px) {
  .bpp-tasks { margin-top: -90px; }
}

/* Телефон (≤880px). Сцена держала пропорцию арта при min-height 300px, а
   блок заданий в одну колонку вставал ПОД вступлением — на 390px он
   начинался на 330px ниже верха сцены и целиком срезался её
   overflow: hidden. Игрок видел «Заданий 3 доступно» на плите и ни одного
   задания. Теперь сцена растёт по содержимому: название сезона, под ним
   задания, ниже плита уровня (она и так заходит на сцену на 8px). Без
   заданий (гость) высота та же — держит min-height. Кнопка «Забрать» — под
   палец: 36px вместо 22. */
@media (max-width: 880px) {
  .bpp-hero { aspect-ratio: auto; max-height: none; }
  .bpp-tasks { margin-top: 0; }
  .bpp-task-go { min-height: 36px; padding: 0 14px; }
}

/* ============================================================ ALIVE · МОИ ПРОМОКОДЫ

   Блок «Мои промокоды» в кабинете по макету владельца (docs/promocodes,
   ТЗ_МОИ_ПРОМОКОДЫ.md). Префикс prc- (проверен грепом). Разметка —
   #cardCodes в index.html, поведение — mycodes.js. Размеры сняты с макета:
   пиксель картинки ×1.04 ≈ css-пиксель в .pra шириной 1352. Кнопки и чипы
   собраны здесь, а не картинками: текст в картинку не запекается. Цвета
   заливок сняты пипеткой с набора элементов (3-elements.webp). */

.pra-codes {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  container: prc / inline-size;
}

/* ---------------------------------------------------------- шапка */

.prc-head {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
  min-height: 104px; padding: 18px 24px 18px 22px; border-radius: 18px; cursor: pointer;
  border: 1px solid rgba(255, 122, 24, .32);
  background: linear-gradient(150deg, rgba(30, 19, 13, .78), rgba(13, 13, 18, .72) 55%, rgba(10, 10, 14, .62));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8), inset 0 0 60px -30px rgba(255, 122, 24, .35);
}
.prc-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 1;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* Арт билета справа. Левый край растворяется в панели — на макете арт не
   начинается ступенькой. */
.prc-art {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%; pointer-events: none;
  background: url(/assets/promocodes/banner.webp) 62% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.prc-ic {
  position: relative; z-index: 2; width: 62px; height: 62px; border-radius: 50%; flex: none;
  display: grid; place-items: center; border: 1px solid rgba(255, 122, 24, .55);
  background: radial-gradient(circle, rgba(255, 122, 24, .26), rgba(12, 10, 9, .92) 72%);
  box-shadow: 0 0 26px -6px rgba(255, 122, 24, .75);
}
.prc-ic svg { width: 30px; height: 30px; }
.prc-tt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.prc-tt > b {
  display: flex; align-items: center; gap: 10px;
  font: 700 27px/1.1 var(--f-hd); letter-spacing: -.01em; color: #fff;
}
.prc-tt > small { font-size: var(--fs-label); line-height: 1.45; color: #a2a2b2; max-width: 560px; }
.prc-n {
  font-style: normal; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  display: inline-grid; place-items: center; font: 700 var(--fs-label)/1 var(--f-hd); color: #1a0d00;
  background: linear-gradient(135deg, #ffa838, #ff6a00); box-shadow: 0 0 14px -2px rgba(255, 122, 24, .8);
}
/* «Открыть» — как «Вывести» в герое, но на тёмной подложке: под ней яркий
   билет, и без подложки надпись теряется. */
.prc-fold {
  position: relative; z-index: 2; flex: none; padding: 13px 24px; border-radius: 11px; cursor: pointer;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid rgba(255, 122, 24, .6); color: #ffa838;
  background: rgba(14, 9, 5, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 6px rgba(8, 6, 4, .35), 0 10px 26px -10px rgba(0, 0, 0, .9);
}
.prc-fold:hover { background: rgba(44, 22, 6, .9); color: #ffc36b; }
.prc-fold:focus-visible { outline: 2px solid #ffa838; outline-offset: 3px; }

/* ---------------------------------------------------------- колонки */

.prc-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
@container prc (max-width: 1099px) {
  .prc-body { grid-template-columns: minmax(0, 1fr); }
}
.prc-col {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 18px 14px 14px; border-radius: 16px; container: prccol / inline-size;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(165deg, rgba(20, 20, 28, .74), rgba(11, 11, 16, .7));
}
.prc-col.wait {
  border-color: rgba(255, 122, 24, .38);
  box-shadow: inset 0 0 40px -22px rgba(255, 122, 24, .45), 0 0 24px -14px rgba(255, 122, 24, .5);
}
.prc-col-h { display: flex; align-items: center; gap: 14px; padding: 0 4px; }
.prc-col-ic {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .35);
}
.prc-col-ic img { width: 30px; height: 30px; object-fit: contain; }
.prc-col.wait .prc-col-ic { border: 0; background: none; }
.prc-col.wait .prc-col-ic img { width: 34px; height: 42px; }
.prc-col-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prc-col-tt b { display: flex; align-items: center; gap: 10px; font: 700 20px/1.15 var(--f-hd); color: #fff; }
.prc-col-tt small { font-size: var(--fs-cap); color: #8a8a96; }
.prc-cnt {
  font-style: normal; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 11px;
  display: inline-grid; place-items: center; font: 700 var(--fs-label)/1 var(--f-hd); color: #d7dbe2;
  background: #23232b; border: 1px solid rgba(255, 255, 255, .06);
}
/* overflow-x: hidden — подсказки «?» в строках наград (окно подсказки
   стоит за краем, пока скрыто) раздували список вширь: на телефоне под ним
   появлялась горизонтальная прокрутка и строки ездили вбок (26.10). */
.prc-list {
  display: flex; flex-direction: column; gap: 10px; max-height: 600px; overflow-y: auto; overflow-x: hidden;
  padding: 2px 4px 2px 2px; margin-right: -4px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .5) transparent;
}
/* Список — flex-колонка с потолком высоты: без этого карточки сжимались бы
   под потолок, а их содержимое вылезало за рамку на соседнюю. */
.prc-list > * { flex: none; }

/* ---------------------------------------------------------- карточка ожидающего */

.prc-card {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center;
  gap: 0 14px; min-height: 110px; padding: 12px 14px 12px 8px; border-radius: 12px;
  border: 1px solid rgba(255, 140, 0, .35);
  background: linear-gradient(100deg, rgba(40, 23, 10, .88), rgba(16, 13, 13, .94) 45%, rgba(26, 15, 8, .92));
  box-shadow: 0 0 18px -8px rgba(255, 122, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: opacity .2s, transform .2s;
}
.prc-card.gone { opacity: 0; transform: translateX(14px); }
.prc-card.dead { opacity: .55; }
.prc-card-art {
  display: grid; place-items: center; height: 84px; padding-right: 10px;
  border-right: 1px solid rgba(255, 122, 24, .24);
}
.prc-card-art img { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.prc-card-b { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.prc-card-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 176px; }
.prc-hint { font-size: var(--fs-cap); line-height: 1.3; color: #8a8a96; }

/* Чип источника. Значки SVG (в наборе они только внутри пилюль). */
.prc-src {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 7px; border-radius: 11px;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; border: 1px solid;
  white-space: nowrap;
}
.prc-src svg { width: 14px; height: 14px; flex: none; filter: drop-shadow(0 0 4px currentColor); }
.prc-src.s-bp { color: #c64cff; background: #29003a; border-color: rgba(198, 76, 255, .55); box-shadow: 0 0 12px -4px rgba(198, 76, 255, .8); }
.prc-src.s-wheel { color: #ff9a1f; background: #2c1001; border-color: rgba(255, 154, 31, .5); box-shadow: 0 0 12px -4px rgba(255, 154, 31, .7); }
.prc-src.s-level { color: #ffc23a; background: #281200; border-color: rgba(255, 194, 58, .5); box-shadow: 0 0 12px -4px rgba(255, 194, 58, .6); }
.prc-src.s-event { color: #2a8cff; background: #001732; border-color: rgba(42, 140, 255, .55); box-shadow: 0 0 12px -4px rgba(42, 140, 255, .8); }
.prc-src.s-partner, .prc-src.s-other { color: #b8bec8; background: #0b0d0f; border-color: rgba(184, 190, 200, .3); }

/* Код и кнопка копирования. */
.prc-code-row { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.prc-code {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all;
  font: 700 17px/1 var(--f-hd); letter-spacing: .04em; color: #fff;
  background: #0f0f12; border: 1px solid rgba(255, 255, 255, .08);
}
.prc-copy {
  flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer;
  color: #d7dbe2; background: #0b0d0f; border: 1px solid rgba(255, 255, 255, .1); transition: .15s;
}
.prc-copy svg { width: 16px; height: 16px; }
.prc-copy:hover { color: #fff; border-color: rgba(255, 255, 255, .25); }
.prc-copy.ok { color: #10e07a; background: #001f11; border-color: rgba(16, 224, 122, .55); box-shadow: 0 0 12px -3px rgba(16, 224, 122, .7); }
.prc-copy.sm { width: 26px; height: 26px; border-radius: 7px; }
.prc-copy.sm svg { width: 13px; height: 13px; }
.prc-copy:focus-visible { outline: 2px solid #ffa838; outline-offset: 2px; }

/* Награда: значок и строка заглавными. */
.prc-rw {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  font: 700 var(--fs-ui)/1.2 var(--f-hd); letter-spacing: .03em; text-transform: uppercase; color: #ffb21e;
}
.prc-rw img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.prc-rw span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.prc-rw.t-deposit_pct { color: #ff9a1f; }
.prc-rw.t-case, .prc-rw.t-other { color: #e6e6ee; }

/* Отсчёт: цвет — по легенде набора (больше суток, 1–24 часа, меньше часа). */
.prc-timer {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 9px; border-radius: 9px;
  border: 1px solid; font: 700 18px/1 var(--f-hd); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.prc-timer i { width: 20px; height: 22px; flex: none; background: center / contain no-repeat; }
.prc-timer.t-day { color: #f2f2f5; background: #101211; border-color: rgba(242, 242, 245, .4); }
.prc-timer.t-day i { background-image: url(/assets/promocodes/watch-white.webp); }
.prc-timer.t-hours { color: #ffb21e; background: #281100; border-color: rgba(255, 178, 30, .5); box-shadow: 0 0 14px -4px rgba(255, 178, 30, .6); }
.prc-timer.t-hours i { background-image: url(/assets/promocodes/watch-gold.webp); }
.prc-timer.t-mins { color: #ff4040; background: #2f0504; border-color: rgba(255, 64, 64, .55); box-shadow: 0 0 14px -4px rgba(255, 64, 64, .7); }
.prc-timer.t-mins i { background-image: url(/assets/promocodes/watch-red.webp); }
.prc-exp { font-size: var(--fs-cap); color: #8a8a96; white-space: nowrap; }

/* «Активировать» — три состояния из набора. */
.prc-go {
  min-width: 176px; height: 36px; padding: 0 18px; border-radius: 8px; cursor: pointer;
  font: 700 var(--fs-ui)/1 var(--f-hd); color: #1a0d00; border: 1px solid transparent;
  background: linear-gradient(90deg, #fb8d00, #fa6600); box-shadow: 0 8px 22px -8px rgba(250, 102, 0, .8);
  transition: background .15s, color .15s, box-shadow .15s;
}
.prc-go:hover { background: #231000; color: #f0a81e; border-color: rgba(240, 168, 30, .45); box-shadow: 0 0 16px -4px rgba(240, 168, 30, .55); }
.prc-go:disabled { cursor: default; background: #3a1a00; color: rgba(240, 168, 30, .35); border-color: rgba(240, 168, 30, .15); box-shadow: none; }
.prc-go:focus-visible { outline: 2px solid #ffa838; outline-offset: 2px; }

/* Чипы статуса. */
.prc-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 28px; padding: 0 12px 0 9px;
  border-radius: 8px; border: 1px solid; font: 600 var(--fs-label)/1 var(--f-hd); white-space: nowrap;
}
.prc-chip svg { width: 14px; height: 14px; flex: none; }
.prc-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prc-chip.used { color: #9ea9b7; background: #0c0e0f; border-color: rgba(158, 169, 183, .22); }
.prc-chip.expired { color: #ff4040; background: #280405; border-color: rgba(255, 64, 64, .45); }
.prc-chip.valid {
  height: auto; min-height: 28px; padding: 6px 10px; line-height: 1.25; white-space: normal; max-width: 240px;
  color: #10e07a; background: #002814; border-color: rgba(16, 224, 122, .45);
}

/* ---------------------------------------------------------- строка использованного */

.prc-row {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 0 16px;
  min-height: 66px; padding: 8px 14px 8px 8px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .06); background: rgba(14, 14, 19, .82);
}
.prc-row-art {
  display: grid; place-items: center; width: 58px; height: 50px; border-radius: 9px;
  background: rgba(255, 255, 255, .025);
}
.prc-row-art img { width: 44px; height: 44px; object-fit: contain; filter: grayscale(1) brightness(.55); }
.prc-row-b { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.prc-row .prc-code { height: auto; padding: 0; background: none; border: 0; font-size: var(--fs-body); color: #9ea9b7; }
.prc-row .prc-code.none { font-size: var(--fs-label); text-transform: uppercase; }
.prc-row .prc-rw { font-size: var(--fs-cap); color: #7b7b86; }
.prc-row .prc-rw img { width: 16px; height: 16px; filter: grayscale(1) brightness(.8); }
.prc-row-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.prc-row-r small { font-size: var(--fs-cap); color: #6e6e7a; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------- пусто */

.prc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; text-align: center; }
/* Свечение запечено в картинку с полями (раньше обрезалось краем холста):
   200 px — тот же билет в 170, поля съедены отрицательным отступом. */
.prc-empty img {
  width: 200px; height: auto; margin: -14px 0 -10px;
  background: radial-gradient(closest-side, rgba(255, 122, 24, .1), transparent);
}
.prc-empty b { font: 700 var(--fs-body)/1.3 var(--f-hd); color: #ececf2; }
.prc-empty small { font-size: var(--fs-label); color: #8a8a96; }
.prc-empty.sm { padding: 26px 10px; }
.prc-empty-go {
  margin-top: 6px; padding: 10px 18px; border-radius: 10px; cursor: pointer;
  font: 700 var(--fs-label)/1 var(--f-hd); letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid rgba(255, 122, 24, .55); background: rgba(255, 122, 24, .1); color: #ffa838;
}
.prc-empty-go:hover { background: rgba(255, 122, 24, .2); }

/* ---------------------------------------------------------- узкая колонка

   Карточка в две строки: арт и тело сверху, под ними отсчёт с датой слева
   и кнопка справа. Считается от ширины КОЛОНКИ, а не окна. Порог — ширина,
   при которой в одну строку ещё влезает код: арт 96 + тело 220 + правая
   часть 176 + зазоры. На 1440 колонка шире — строка одна, как на макете. */
@container prccol (max-width: 539px) {
  .prc-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .prc-card-art { height: 60px; padding-right: 10px; }
  .prc-card-art img { width: 56px; height: 56px; }
  .prc-card-r {
    grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: auto 1fr;
    align-items: center; gap: 4px 12px;
  }
  .prc-card-r .prc-chip { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
  .prc-card-r .prc-timer { grid-column: 1; }
  .prc-card-r .prc-exp { grid-column: 1; }
  .prc-card-r .prc-go { grid-column: 2; grid-row: span 2; justify-self: end; min-width: 0; width: 100%; max-width: 200px; }
  .prc-code { font-size: var(--fs-body); height: 30px; }
  .prc-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 10px; padding-right: 10px; }
  .prc-row-art { width: 44px; height: 40px; }
  .prc-row-art img { width: 34px; height: 34px; }
  /* Строке использованного не хватает места на код: чип — одним значком
     (слово — в подсказке), дата — без времени. */
  .prc-row .prc-code { font-size: var(--fs-ui); }
  .prc-row-r .prc-chip { width: 28px; padding: 0; justify-content: center; }
  .prc-row-r .prc-chip span, .prc-row-r small .tm { display: none; }
}

/* ---------------------------------------------------------- телефон */

@media (max-width: 880px) {
  .prc-head { flex-wrap: wrap; gap: 12px 14px; min-height: 0; padding: 16px; border-radius: 16px; }
  .prc-ic { width: 46px; height: 46px; }
  .prc-ic svg { width: 22px; height: 22px; }
  .prc-tt > b { font-size: 20px; }
  .prc-tt > small { font-size: var(--fs-cap); }
  .prc-art {
    width: 100%; opacity: .45;
    -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 75%);
    mask-image: linear-gradient(90deg, transparent 10%, #000 75%);
  }
  .prc-fold { width: 100%; }
  .prc-col { padding: 14px 10px 10px; }
  .prc-col-tt b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .prc-card, .prc-copy, .prc-go { transition: none; }
}

/* Ссылки на блок из других разделов: итог спина колеса и карточка «Есть
   код?» в «Акциях». */
.whr-codes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.promo-mycodes { margin-top: 10px; }

/* ============================================================ ALIVE · АПГРЕЙДЕР · СВОЙ ШАНС

   Четвёртая ячейка группы «Win chance» — поле «свой %» (upgrader.js,
   ownInput). Выглядит кнопкой полосы, но пунктирной, пока в ней пусто: так
   видно, что в неё пишут, а не жмут. Горит тем же оранжевым, когда свой
   процент подбирает цели; красная — пока набранное вне границ шанса.

   Шрифт поля, подсказки «свой» и знака «%» — ровно тот, что у подписей
   кнопок (.p-ch): 700 17px белым, на телефоне 700 16px #d8d8e2. Раньше
   подсказка была 13px серым, «%» — 17px, и строка съезжала по высоте. Обе
   части — одной строкой в 20px, чтобы стоять на одной линии. */

.upa-prow .preset-own {
  display: flex; align-items: center; justify-content: center; gap: 0;
  min-width: 86px; padding: 0 14px; cursor: text; border-style: dashed; border-color: rgba(255, 168, 56, .4);
}
.upa-prow .preset-own:hover { transform: none; border-color: rgba(255, 168, 56, .7); }
.upa-prow .preset-own .p-own, .upa-prow .preset-own .p-pct {
  /* В покое — приглушённый цвет подсказки (var(--tx-3)), как заполнение поля
     по умолчанию: ячейка не выбивается на фоне активных 35/55/75. Набираешь
     свой процент или фокус — текст загорается белым (правила .on/:focus-within
     ниже). */
  font: 700 17px/20px var(--f-hd); letter-spacing: .02em; color: var(--tx-3); font-variant-numeric: tabular-nums;
}
.upa-prow .preset-own.on .p-own, .upa-prow .preset-own.on .p-pct,
.upa-prow .preset-own:focus-within .p-own, .upa-prow .preset-own:focus-within .p-pct { color: #fff; }
.upa-prow .preset-own .p-own {
  /* Ширина — по содержимому: и «свой», и «40» стоят вплотную к «%», а
     вместе они — по центру ячейки, как «75%» у соседних кнопок. Где
     field-sizing нет (Safari, Firefox), — ширина под четыре знака. */
  field-sizing: content; width: auto; min-width: 1ch; max-width: 5ch;
  height: 20px; margin: 0; padding: 0; border: 0; outline: 0; background: none;
  text-align: right; -moz-appearance: textfield; flex: none;
  /* Общие правила полей дают тень и скругление — в ячейке полосы была бы
     видна вторая коробка внутри первой. */
  box-shadow: none; border-radius: 0;
}
@supports not (field-sizing: content) {
  .upa-prow .preset-own .p-own { width: 2.4em; }
}
.upa-prow .preset-own .p-own:focus, .upa-prow .preset-own .p-own:focus-visible { box-shadow: none; outline: 0; }
.upa-prow .preset-own .p-own::placeholder { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; }
.upa-prow .preset-own .p-pct { flex: none; }
.upa-prow .preset-own:focus-within {
  border-style: solid; border-color: rgba(255, 168, 56, .9);
  box-shadow: 0 0 0 2px rgba(255, 122, 24, .3);
}
.upa-prow .preset-own.on { border-style: solid; }
.upa-prow .preset-own.bad, .upa-prow .preset-own.bad:focus-within {
  border-style: solid; border-color: rgba(255, 64, 64, .85); box-shadow: 0 0 12px rgba(255, 64, 64, .35);
}
.upa-prow .preset-own.bad .p-own, .upa-prow .preset-own.bad .p-pct { color: #ff6b6b; }

/* Телефон: шансы идут сеткой, и поле — её четвёртая колонка. Шрифт — как у
   подписей кнопок на телефоне; 16px в поле ещё и не даёт iOS приближать
   страницу при фокусе. */
@media (max-width: 880px) {
  #page-upgrade .upa-prow .preset-grp.ch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #page-upgrade .upa-prow .preset-own { display: flex; min-width: 0; padding: 0 6px; }
  #page-upgrade .upa-prow .preset-own .p-own, #page-upgrade .upa-prow .preset-own .p-pct {
    font: 700 16px/20px var(--f-hd); color: #d8d8e2;
  }
  #page-upgrade .upa-prow .preset-own.on .p-own, #page-upgrade .upa-prow .preset-own.on .p-pct { color: #ffb347; }
  #page-upgrade .upa-prow .preset-own.bad .p-own, #page-upgrade .upa-prow .preset-own.bad .p-pct { color: #ff6b6b; }
}

/* ============================================================ ALIVE · BATTLE PASS · ПОРОГ ОБОРОТА

   ТЗ_BATTLEPASS_ПОТОЛОК_И_КРИВАЯ, этап 4. Строка «Оборот за сезон: … ·
   награды 11–20 — с …» над лентой уровней. Тихая, как подпись блока
   заданий: это условие выдачи, а не призыв. Отступ — как у самой ленты,
   чтобы строка стояла над первой карточкой, а не над стрелкой. */

.bpp-wager {
  margin: 18px 0 -12px;
  padding: 0 12px;
  font: 400 var(--fs-cap)/1.45 var(--f-ui);
  color: #8a8a9a;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 880px) {
  .bpp-wager { padding: 0 16px; margin-top: 14px; }   /* лента на телефоне в край, строка — нет */
}


/* ============================================================
   МОБИЛЬНАЯ ОПТИМИЗАЦИЯ НАГРЕВА (perf)
   Жалоба: iPhone сильно греется через ~30 мин. Причина — не утечка памяти,
   а постоянная нагрузка GPU: на каждой странице ~144 элемента с
   backdrop-filter: blur (шапка, навигация, панели, чипы). На iOS blur —
   самая дорогая операция: каждый кадр GPU заново сэмплит и размывает фон под
   регионом. 144 таких региона держат GPU под нагрузкой непрерывно.
   На тач-устройствах и узких экранах: убираем blur (фон остаётся — у панелей
   свой полупрозрачный тёмный цвет) и не крутим декоративные бесконечные
   анимации (один проход — и стоп). Десктоп с мышью не трогаем.
   Откат: удалить этот блок. ============================================================ */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation-iteration-count: 1 !important;
  }
  /* Шапка и шторка без blur становились полупрозрачными (55%): при
     прокрутке сквозь них читался контент страницы. Непрозрачный фон
     вместо размытия — та же экономия GPU, но шапка снова закрывает
     то, что под ней. */
  .topbar { background: rgba(9, 9, 12, .97) !important; }
  .mnd { background: linear-gradient(180deg, #141419, #0b0b0f) !important; }
}


/* ============================================================ MILKY WAY (2026-10-11)
   Дорога из вагонов по референсу «chicken road our version». Сцена 3:2 —
   слои-картинки: фон, рельс с вагонами и маскотом (сдвигается камерой),
   ракета-поезд. Всё вокруг сцены — плашки HUD, панель ставки, «Последние
   игры», баннер «Как играть?» — и состояния вагонов: секция «ALIVE · MILKY
   WAY» в конце файла (редизайн 2026-10-13). */
#page-milkyway { max-width: 1500px; margin: 0 auto; }
.mw { display: flex; flex-direction: column; gap: 14px; }

/* ---- сцена ---- */
.mw-scene {
  position: relative; width: 100%; aspect-ratio: 2.3 / 1; overflow: hidden; border-radius: 18px; background: #0a0a0f;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
  user-select: none;
}
.mw-scene.shake { animation: mwShake .5s ease-out 1; }
@keyframes mwShake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 4px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
/* мир: плитки фона [A][зеркало A][A], поезд, слой рельса — всё едет камерой */
.mw-world { position: absolute; inset: 0; will-change: transform; }
.mw-tile { position: absolute; top: 0; background: url('/assets/milkyway/bg.webp') 0 0 / 100% 100% no-repeat; }
.mw-tile.flip { transform: scaleX(-1); }
.mw-sign { position: absolute; transform: scaleX(-1); background: url('/assets/milkyway/bg.webp') no-repeat; }
.mw-ambient { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mw-lamp { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 60, .55), rgba(255, 140, 30, .18) 45%, rgba(255, 120, 20, 0) 70%); mix-blend-mode: screen; }
.mw-beacon { position: absolute; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(255, 90, 60, 1), rgba(255, 60, 40, .45) 35%, rgba(255, 40, 30, 0) 70%); mix-blend-mode: screen; }
.mw-weld { position: absolute; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(220, 240, 255, 1), rgba(150, 200, 255, .5) 30%, rgba(120, 180, 255, 0) 70%); mix-blend-mode: screen; }
.mw-fx-steam { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(225, 220, 215, .75), rgba(200, 195, 190, .3) 45%, rgba(180, 175, 170, 0) 70%); }
.mw-train { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; }
.mw-train-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.mw-train-shadow { position: absolute; left: 6%; right: 4%; bottom: -7%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 70%); }
.mw-rail { position: absolute; inset: 0; z-index: 3; }
.mw-start { position: absolute; z-index: 1; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 122, 24, .45), rgba(255, 122, 24, 0) 70%); }
.mw-wagon { position: absolute; cursor: default; }
.mw-wagon-img, .mw-wagon-front { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mw-wagon-img { z-index: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .65)); transition: filter .25s; }
.mw-wagon-front { z-index: 7; clip-path: inset(46% 0 0 0); }          /* борт поверх маскота: ноги внутри вагона */
.mw-wagon-tag { position: absolute; left: 50%; top: 61%; transform: translate(-50%, -50%); z-index: 8; padding: 3px 9px; border-radius: 6px;
  background: rgba(12, 12, 18, .94); border: 1px solid rgba(255, 168, 56, .5); color: #fff;
  font: 800 var(--fs-cap)/1.1 var(--f-hd); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 0 10px rgba(255, 122, 24, .35); }
.mw-wagon.next { cursor: pointer; }
.mw-wagon.next::after { content: ''; position: absolute; left: 6%; right: 6%; top: 30%; bottom: -12%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 150, 40, .6), rgba(255, 150, 40, 0) 70%); animation: mwPulse 1.3s ease-in-out infinite; }
@keyframes mwPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.mw-wagon.next .mw-wagon-tag { background: linear-gradient(180deg, #ff8a2a, #ff5c00); color: #180a00; border-color: rgba(255, 210, 120, .7); }
.mw-wagon.done .mw-wagon-tag { background: rgba(39, 209, 106, .22); border-color: rgba(39, 209, 106, .65); color: #b6ffd0; }
.mw-wagon.done .mw-wagon-tag::before { content: '✓ '; }
.mw-wagon.dead { opacity: .35; }
.mw-wagon.trap .mw-wagon-tag { background: rgba(255, 42, 31, .25); border-color: rgba(255, 42, 31, .8); color: #ffc2bd; }
.mw-wagon.trap .mw-wagon-tag::before { content: '☠ '; }
.mw-wagon.trap .mw-wagon-img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .65)) drop-shadow(0 0 12px rgba(255, 42, 31, .85)); }
.mw-boom { position: absolute; left: 50%; top: 30%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -58%); display: none; z-index: 9; pointer-events: none; background-repeat: no-repeat; mix-blend-mode: screen; }
.mw-boom.on { display: block; }
.mw-wagon.boom .mw-wagon-img, .mw-wagon.boom .mw-wagon-front { filter: brightness(.45) sepia(.5) hue-rotate(-25deg); }
.mw-shadow { position: absolute; z-index: 3; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 70%); }
.mw-hero { position: absolute; z-index: 6; pointer-events: none; transform-origin: 50% 100%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)); }
.mw-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.mw-hero-sheet { position: absolute; inset: 0; display: none; background-repeat: no-repeat; }
.mw-hero.anim .mw-hero-img { display: none; }
.mw-hero.anim .mw-hero-sheet { display: block; }
/* разовые эффекты (Web Animations из milkyway.js) */
.mw-fx-smoke { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(230, 225, 220, .7), rgba(200, 195, 190, .28) 45%, rgba(180, 175, 170, 0) 70%); }
.mw-fx-dust { position: absolute; z-index: 5; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(205, 195, 175, .8), rgba(205, 195, 175, 0) 70%); }
.mw-fx-spark { position: absolute; z-index: 9; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; pointer-events: none;
  background: var(--c, #ffb454); box-shadow: 0 0 6px var(--c, #ffb454); }
.mw-fx-float { position: absolute; z-index: 9; transform: translate(-50%, -100%); padding: 4px 9px; border-radius: 8px; pointer-events: none;
  background: rgba(10, 10, 15, .88); border: 1px solid rgba(255, 168, 56, .6); color: #ffd27a; font: 800 var(--fs-label)/1 var(--f-hd); white-space: nowrap; }
.mw-fx-float.win { border-color: rgba(79, 227, 154, .7); color: #b6ffd0; font-size: var(--fs-body); }
.mw-flash { position: absolute; inset: 0; z-index: 7; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 62%, rgba(255, 215, 150, .95), rgba(255, 90, 20, .5) 40%, rgba(0, 0, 0, 0) 75%); }

.mw-online { position: absolute; right: 14px; bottom: 14px; z-index: 8; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 10px;
  background: rgba(10, 10, 15, .78); border: 1px solid rgba(255, 255, 255, .1); color: #c4c4d0; font: 500 var(--fs-cap)/1 var(--f-ui); }
.mw-logo { position: absolute; left: 14px; bottom: 10px; z-index: 8; width: 150px; pointer-events: none; user-select: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .7)); }
.mw-online i { width: 8px; height: 8px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 8px #35d07f; }
.mw-online b { color: #fff; }

/* ============================================================ SPACE BALL (2026-10-11)
   Серия пенальти по референсу «space ball ref»: сцена-стадион 16:9,
   цели, вратарь, нападающий, мяч и эффекты. Всё вокруг сцены (плашки,
   таблица, шкала, панель, лента, баннер) — секция «ALIVE · SPACE BALL»
   в конце файла. Поведение — spaceball.js. */
#page-spaceball { max-width: 1500px; margin: 0 auto; }
.sb { display: flex; flex-direction: column; gap: 14px; }
.sb-stage { position: relative; }
.sb-scene { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #07070b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); user-select: none; container-type: inline-size; }
.sb-world { position: absolute; inset: 0; }
.sb-world.shake { animation: sbShake .45s ease-out 1; }
@keyframes sbShake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
.sb-bg { position: absolute; background: url('/assets/spaceball/bg.webp') 0 0 / 100% 100% no-repeat; animation: sbBreath 14s ease-in-out infinite; transform-origin: 50% 45%; }
@keyframes sbBreath { 50% { transform: scale(1.012); } }
.sb-fx { position: absolute; pointer-events: none; overflow: hidden; }
.sb-lamp { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 160, 60, .5), rgba(255, 120, 30, .15) 45%, transparent 70%);
  animation: sbLamp var(--d) ease-in-out var(--dl) infinite; }
@keyframes sbLamp { 0%, 100% { opacity: .35; } 40% { opacity: .9; } 46% { opacity: .5; } 52% { opacity: 1; } }
.sb-star { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 2px; height: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff; animation: sbTw 3.2s ease-in-out var(--dl) infinite; }
@keyframes sbTw { 50% { opacity: .15; } }
.sb-rock { position: absolute; border-radius: 46% 54% 50% 48% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 35% 30%, #4a3a32, #17110f 60%, #070505); box-shadow: inset -3px -4px 8px rgba(255, 120, 30, .45), 0 0 14px rgba(255, 120, 30, .2); }
.sb-rock.r0 { width: 3.2%; aspect-ratio: 1; top: 9%; animation: sbRock0 46s linear infinite; }
.sb-rock.r1 { width: 2%; aspect-ratio: 1.1; top: 19%; animation: sbRock1 62s linear -20s infinite; }
.sb-rock.r2 { width: 1.4%; aspect-ratio: 1; top: 4%; animation: sbRock0 38s linear -12s infinite; }
/* прожекторы: медленно водят лучами по полю */
.sb-beam { position: absolute; top: -8%; width: 22%; height: 95%; transform-origin: 50% 0; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(180deg, rgba(255, 190, 110, .35), rgba(255, 150, 60, .08) 60%, transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(6px); }
.sb-beam.l { left: 6%; animation: sbBeamL 11s ease-in-out infinite; }
.sb-beam.r { right: 6%; animation: sbBeamR 13s ease-in-out infinite; }
@keyframes sbBeamL { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(-6deg); } }
@keyframes sbBeamR { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(4deg); } }
@keyframes sbRock0 { from { left: 104%; transform: rotate(0); } to { left: -6%; transform: rotate(-360deg); } }
@keyframes sbRock1 { from { left: -6%; transform: rotate(0); } to { left: 104%; transform: rotate(300deg); } }

/* цели */
.sb-targets { position: absolute; inset: 0; pointer-events: none; z-index: 4; }   /* над вратарём — точки за ним видно и можно выбрать */
.sb-stage.busy .sb-targets { z-index: 2; }                                        /* в ударе вратарь летит поверх колец */
.sb-t { position: absolute; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; pointer-events: auto; }
.sb-t::before, .sb-t::after, .sb-t > i { content: ''; position: absolute; border-radius: 50%; }
.sb-t::before { inset: 0; border: 2px solid rgba(255, 150, 50, .95); box-shadow: 0 0 14px rgba(255, 130, 30, .9), inset 0 0 12px rgba(255, 130, 30, .6); }
.sb-t::after { inset: 22%; border: 2px solid rgba(255, 180, 90, .8); }
.sb-t > i { left: 50%; top: 50%; width: 10%; height: 10%; transform: translate(-50%, -50%); background: #ffd27a; box-shadow: 0 0 10px #ffa838; }
/* Пульсирует рисунок кольца, а не сама кнопка: зона нажатия не «дышит» под
   пальцем (на телефоне тап по краю кольца иначе мог уйти мимо). */
.sb-t::before, .sb-t::after { animation: sbPulse 2.2s ease-in-out infinite; }
.sb-t:nth-child(2n)::before, .sb-t:nth-child(2n)::after { animation-delay: -1.1s; }
.sb-t.sel::before, .sb-t.sel::after { animation: none; }
@keyframes sbPulse { 50% { transform: scale(1.07); filter: brightness(1.3); } }
.sb-t:hover::before, .sb-t.sel::before { border-color: #fff; box-shadow: 0 0 22px #ffb454, 0 0 40px rgba(255, 140, 40, .8), inset 0 0 16px rgba(255, 170, 60, .8); }
.sb-t.sel { animation: none; transform: scale(1.12); }
.sb-t.sel::after { border-color: #fff; background: radial-gradient(circle, rgba(255, 200, 120, .35), transparent 70%); }
.sb-targets:not(.pick) .sb-t { pointer-events: none; }
.sb-targets.hint .sb-t { animation: sbHint .5s ease-out 2; }
@keyframes sbHint { 50% { transform: scale(1.2); filter: brightness(1.8); } }
.sb-t.hit::before { border-color: #4fe39a; box-shadow: 0 0 30px #4fe39a, inset 0 0 18px rgba(79, 227, 154, .8); }
.sb-t.miss::before { border-color: #ff4d5e; box-shadow: 0 0 30px #ff4d5e, inset 0 0 18px rgba(255, 77, 94, .8); }

/* персонажи и мяч — точка-якорь (ноги), слои-листы над ней */
.sb-keeper, .sb-striker { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.sb-keeper { z-index: 3; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)); transition: opacity .18s; }
.sb-keeper.fade { opacity: 0; }
.sb-striker { z-index: 6; filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .8)); transition: opacity .17s; }
.sb-striker.fade { opacity: 0; }
.sb-keeper > i, .sb-striker > i { position: absolute; display: none; background-repeat: no-repeat; }
.sb-keeper > i.on, .sb-striker > i.on { display: block; }
.sb-keeper > i.flip { transform: scaleX(-1); }
.sb-shadow { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 45%, transparent 70%); }
.sb-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.sb-ring { position: absolute; z-index: 5; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  border: 2px solid rgba(255, 220, 160, .9); box-shadow: 0 0 16px rgba(255, 150, 50, .8); pointer-events: none; animation: sbRipple .5s ease-out forwards; }
.sb-ball { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transition: opacity .2s; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px rgba(255, 140, 40, .5)); }
.sb-say { position: absolute; left: 50%; top: 17%; z-index: 8; transform: translate(-50%, -50%) scale(.5); opacity: 0; pointer-events: none;
  font: 900 clamp(34px, 9cqw, 110px)/1 var(--f-hd); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.sb-say.on { animation: sbSay .9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.sb-say.goal { color: #ffd27a; text-shadow: 0 0 24px #ff8a1e, 0 0 60px rgba(255, 120, 30, .8), 0 6px 0 #7a3000; }
.sb-say.save { color: #ff8b95; text-shadow: 0 0 24px #ff2a3a, 0 0 60px rgba(255, 40, 60, .7), 0 6px 0 #5a0010; }
.sb-say.win { color: #b6ffd0; text-shadow: 0 0 24px #22b86a, 0 0 60px rgba(40, 220, 120, .7), 0 6px 0 #064020; }
@keyframes sbSay { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.sb-flash { position: absolute; inset: 0; z-index: 7; opacity: 0; pointer-events: none; }
.sb-flash.goal { background: radial-gradient(circle at 50% 40%, rgba(255, 200, 120, .55), transparent 60%); }
.sb-flash.save { background: radial-gradient(circle at 50% 40%, rgba(255, 60, 70, .45), transparent 60%); }
.sb-flash.on { animation: sbFlash .6s ease-out 1; }
@keyframes sbFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.sb-ripple { position: absolute; z-index: 4; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  border: 3px solid rgba(255, 200, 120, .9); box-shadow: 0 0 20px rgba(255, 150, 50, .8); pointer-events: none; animation: sbRipple .8s ease-out forwards; }
@keyframes sbRipple { from { transform: scale(.15); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.sb-spark { position: absolute; z-index: 8; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); pointer-events: none; }

.sb-fairbox h3 { margin: 0 0 10px; font: 700 18px/1.2 var(--f-hd); }
.sb-fairbox p { margin: 0 0 10px; font: 400 var(--fs-ui)/1.5 var(--f-ui); color: #d8d8e2; }
.sb-fairbox dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 14px; font: var(--fs-cap)/1.4 var(--f-ui); }
.sb-fairbox dd { margin: 0; word-break: break-all; color: #ffd27a; }

@media (prefers-reduced-motion: reduce) { .sb-bg, .sb-lamp, .sb-star, .sb-rock, .sb-t, .sb-t::before, .sb-t::after { animation: none !important; } }

/* ============================================================ ALIVE · MILKY WAY

   Редизайн 2026-10-13: dark sci-fi / industrial. Чёрно-графитовая основа,
   металл, оранжевый — только вокруг важного (активный вагон, множитель,
   «Прыгнуть»). Сцена и её движок — в секции MILKY WAY (2026-10-11) выше;
   здесь — рамка сцены, плашки HUD, состояния вагонов, панель ставки,
   таблица «Последние игры», баннер «Как играть?».

   Раскладка панели, таблицы и баннера — контейнерными запросами от ширины
   страницы игры (.mw), а не окна: боковое меню съедает разную ширину, и
   окно о ней ничего не знает. Высота сцены — по окну (@media 880px), как и
   геометрия вагонов в milkyway.js (PHONE). Префикс mw- проверен грепом. */

.mw {
  --mw-bg: #08090c; --mw-card: #101115; --mw-surf: #17191f; --mw-line: rgba(255, 255, 255, .075);
  --mw-or: #ff7900; --mw-amb: #ffad32; --mw-tx: #f2f2f4; --mw-tx2: #858894;
  --mw-ok: #35d07f; --mw-bad: #ff4d4f;
  container: mw / inline-size;
  color: var(--mw-tx);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* У .content справа нет отступа (--chat-reserve: 0) — сцена и панель
   упирались в край окна и срезали рамки. Отступ — как слева. */
@media (min-width: 1200px) { #page-milkyway { padding-right: 20px; } }
.mw .num, .mw-tbl td, .mw-stat b { font-variant-numeric: tabular-nums; }
.mw :is(button, [tabindex]):focus-visible { outline: 2px solid var(--mw-amb); outline-offset: 2px; }

/* ---- рамка сцены: тонкий корпус и два уголковых кронштейна ---- */
.mw-scene { border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.mw-scene::before, .mw-scene::after { content: ''; position: absolute; z-index: 10; width: 24px; height: 24px; pointer-events: none;
  border: 2px solid rgba(255, 121, 0, .85); filter: drop-shadow(0 0 5px rgba(255, 121, 0, .55)); }
.mw-scene::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.mw-scene::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
/* затемнение сверху и снизу: плашки читаются на любом участке фона */
.mw-vig { position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 7, 10, .7) 0%, rgba(6, 7, 10, 0) 24%),
              linear-gradient(0deg, rgba(6, 7, 10, .5) 0%, rgba(6, 7, 10, 0) 16%); }

/* ---- HUD: платформа / множитель / возможный выигрыш ---- */
.mw-hud { position: absolute; left: 16px; top: 16px; z-index: 8; display: flex; gap: 8px; max-width: calc(100% - 150px); }
.mw-stat { display: flex; align-items: center; gap: 10px; min-width: 0; height: 58px; padding: 0 16px 0 9px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(25, 27, 33, .9), rgba(12, 13, 17, .9)); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mw-stat img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.mw-stat > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mw-stat small { font: 700 10px/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--mw-tx2); white-space: nowrap; }
.mw-stat b { font: 800 20px/1 var(--f-hd); color: #fff; white-space: nowrap; }
.mw-stat b i { font-style: normal; font-weight: 700; font-size: .7em; color: var(--mw-tx2); }
.mw-stat b .coin { width: .85em; height: .85em; }
.mw-stat.is-mult { border-color: rgba(255, 121, 0, .6); box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 121, 0, .2), inset 0 1px 0 rgba(255, 190, 120, .12); }
.mw-stat.is-mult b { color: var(--mw-or); text-shadow: 0 0 14px rgba(255, 121, 0, .45); }
.mw-scene.bust .mw-stat.is-mult { border-color: rgba(255, 77, 79, .7); box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 77, 79, .25); }
.mw-scene.bust .mw-stat.is-mult b { color: var(--mw-bad); text-shadow: 0 0 14px rgba(255, 77, 79, .45); }
.mw-l-short { display: none; }
.mw-rules { position: absolute; right: 16px; top: 16px; z-index: 8; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px;
  border-radius: 10px; cursor: pointer; background: linear-gradient(180deg, rgba(25, 27, 33, .9), rgba(12, 13, 17, .9)); border: 1px solid rgba(255, 255, 255, .12);
  color: #e6e7ec; font: 600 var(--fs-label)/1 var(--f-ui); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mw-rules svg { width: 18px; height: 18px; color: var(--mw-amb); }
.mw-rules:hover { border-color: rgba(255, 121, 0, .6); }
.mw-online, .mw-logo { z-index: 8; }
/* итог раунда — под плашками, по центру; его же читает скринридер */
.mw-status { position: absolute; left: 50%; top: 90px; z-index: 9; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px;
  border-radius: 10px; background: rgba(10, 11, 14, .92); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
  transform: translate(-50%, -6px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.mw-status.on { opacity: 1; transform: translate(-50%, 0); }
.mw-status svg { flex: none; width: 24px; height: 24px; }
.mw-status b { font: 900 18px/1 var(--f-hd); letter-spacing: .04em; text-transform: uppercase; }
.mw-status span { font: 500 var(--fs-label)/1 var(--f-ui); color: #c9cbd3; }
.mw-status.bust { border-color: rgba(255, 77, 79, .75); box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 77, 79, .3); }
.mw-status.bust svg, .mw-status.bust b { color: var(--mw-bad); }
.mw-status.win { border-color: rgba(53, 208, 127, .75); box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 24px rgba(53, 208, 127, .28); }
.mw-status.win svg, .mw-status.win b { color: #5ee9a0; }

/* ---- вагоны: закрыт / следующий / текущий / пройден / ловушка / за концом ---- */
.mw-wagon-tag { background: rgba(12, 13, 17, .94); border-color: rgba(255, 255, 255, .16); color: #e3e4ea; box-shadow: 0 3px 10px rgba(0, 0, 0, .55); }
.mw-wagon.locked .mw-wagon-tag { color: #a3a6b1; }
.mw-wagon.next .mw-wagon-tag { background: rgba(26, 13, 2, .95); border-color: var(--mw-or); color: #ffb35c;
  box-shadow: 0 0 0 1px rgba(255, 121, 0, .3), 0 0 14px rgba(255, 121, 0, .5); }
.mw-wagon.next .mw-wagon-img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .65)) drop-shadow(0 0 1px rgba(255, 121, 0, .9)); }
.mw-wagon.cur .mw-wagon-tag { background: linear-gradient(180deg, #ff9a2e, var(--mw-or)); border-color: #ffc078; color: #1a0b00;
  box-shadow: 0 0 18px rgba(255, 121, 0, .65); }
.mw-wagon.cur .mw-wagon-img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .65)) drop-shadow(0 0 1.5px var(--mw-or)) drop-shadow(0 0 12px rgba(255, 121, 0, .6)); }
.mw-wagon.cur::after { content: ''; position: absolute; left: 4%; right: 4%; top: 40%; bottom: -14%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 121, 0, .45), rgba(255, 121, 0, 0) 70%); }
.mw-wagon.done .mw-wagon-tag { background: rgba(9, 22, 15, .94); border-color: rgba(53, 208, 127, .55); color: #9ff0c4; box-shadow: 0 3px 10px rgba(0, 0, 0, .55); }
.mw-wagon.done .mw-wagon-img, .mw-wagon.done .mw-wagon-front { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .65)) saturate(.7) brightness(.8); }
.mw-wagon.trap .mw-wagon-tag { background: rgba(30, 6, 6, .95); border-color: rgba(255, 77, 79, .85); color: #ffb3b3; box-shadow: 0 0 12px rgba(255, 77, 79, .45); }
.mw-wagon.trap .mw-wagon-tag::before { content: ''; display: inline-block; width: .95em; height: .95em; margin-right: 4px; vertical-align: -.12em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.1 5.6 5.4-2.6-2.6 5.4L22 12l-5.1 1.6 2.6 5.4-5.4-2.6L12 22l-2.1-5.6-5.4 2.6 2.6-5.4L2 12l5.1-1.6-2.6-5.4 5.4 2.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.1 5.6 5.4-2.6-2.6 5.4L22 12l-5.1 1.6 2.6 5.4-5.4-2.6L12 22l-2.1-5.6-5.4 2.6 2.6-5.4L2 12l5.1-1.6-2.6-5.4 5.4 2.6Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mw-wagon.dead { opacity: .3; }

/* ---- панель ставки: одна строка, пока хватает ширины ---- */
.mw-panel { display: grid; gap: 10px; align-items: stretch;
  grid-template-columns: minmax(266px, 1.2fr) minmax(224px, 1fr) minmax(184px, .85fr) minmax(246px, 1.25fr) minmax(176px, .85fr);
  grid-template-areas: "bet diff skins go cash"; }
.mw-bet { grid-area: bet; } .mw-diff { grid-area: diff; } .mw-skins { grid-area: skins; } .mw-go { grid-area: go; } .mw-cash { grid-area: cash; }
.mw-card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #15171c, var(--mw-card)); border: 1px solid var(--mw-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 24px rgba(0, 0, 0, .35); }
.mw-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a9acb7; white-space: nowrap; }
.mw-card-h > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.mw-bal, .mw-maxwin { font: 600 var(--fs-micro)/1 var(--f-ui); letter-spacing: .02em; text-transform: none; color: var(--mw-tx2); }
.mw-bal b { margin-left: 4px; color: #fff; font: 800 var(--fs-label)/1 var(--f-hd); }
.mw-bal b .coin, .mw-maxwin b .coin { width: .9em; height: .9em; }
.mw-maxwin b { color: var(--mw-amb); font: 800 var(--fs-cap)/1 var(--f-hd); }
/* ставка */
.mw-bet-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 6px; }
.mw-amt { display: flex; align-items: center; gap: 8px; min-width: 0; height: 42px; margin: 0; padding: 0 12px; border-radius: 8px; cursor: text;
  background: var(--mw-bg); border: 1px solid rgba(255, 255, 255, .11); transition: border-color .15s, box-shadow .15s; }
.mw-amt .coin { flex: none; width: 18px; height: 18px; margin: 0; }
.mw-amt:focus-within { border-color: var(--mw-or); box-shadow: 0 0 0 3px rgba(255, 121, 0, .18); }
.mw-amt.bad { border-color: rgba(255, 77, 79, .75); }
.mw-amt input { flex: 1; width: 100%; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; color: #fff;
  font: 800 17px/1 var(--f-hd); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.mw-amt input::-webkit-outer-spin-button, .mw-amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mw-amt input::placeholder { color: var(--tx-3); }
.mw-amt input:disabled { color: #b9bbc4; }
.mw-q { min-width: 36px; height: 42px; padding: 0 9px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .1);
  background: var(--mw-surf); color: #e3e4ea; font: 800 var(--fs-label)/1 var(--f-hd); transition: border-color .15s, color .15s; }
.mw-q-max { color: var(--mw-amb); }
.mw-q:hover:not(:disabled) { border-color: rgba(255, 121, 0, .6); color: var(--mw-amb); }
.mw-q:disabled { opacity: .45; cursor: default; }
/* сложность */
.mw-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 8px; background: var(--mw-bg); border: 1px solid rgba(255, 255, 255, .08); }
.mw-segs button { height: 34px; min-width: 0; padding: 0 4px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; background: transparent;
  color: #9a9daa; font: 700 var(--fs-label)/1 var(--f-hd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s, background .15s; }
.mw-segs button:hover:not(:disabled):not(.on) { color: #e3e4ea; }
.mw-segs button.on { background: linear-gradient(180deg, #25272e, #1a1c22); color: #fff; border-color: rgba(255, 121, 0, .65);
  box-shadow: 0 0 12px rgba(255, 121, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .06); }
.mw-segs button:disabled { cursor: default; }
.mw-segs button:disabled:not(.on) { opacity: .45; }
/* скины */
.mw-skins-n { font: 800 var(--fs-micro)/1 var(--f-hd); letter-spacing: .04em; color: var(--mw-amb); }
.mw-skins-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mw-skins-add { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px dashed rgba(255, 121, 0, .65); background: rgba(255, 121, 0, .08); color: #ff9a3c; transition: background .15s; }
.mw-skins-add svg { width: 22px; height: 22px; }
.mw-skins-add:hover:not(:disabled) { background: rgba(255, 121, 0, .18); border-style: solid; }
.mw-skins-add:disabled { opacity: .4; cursor: default; }
.mw-picked { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 30px; }
.mw-skins-hint { min-width: 0; font: 500 var(--fs-cap)/1.3 var(--f-ui); color: var(--mw-tx2); }
.mw-pick { position: relative; flex: 0 1 30px; min-width: 22px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  background: var(--mw-bg); border: 1px solid rgba(255, 255, 255, .08); border-bottom: 2px solid var(--rc, #555); }
.mw-pick-art { display: grid; place-items: center; width: 100%; height: 100%; padding: 2px; }
.mw-pick-art img, .mw-pick-art svg { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.mw-pick-x { position: absolute; top: -1px; right: -1px; width: 15px; height: 15px; padding: 0; border: 0; border-radius: 0 6px 0 6px; cursor: pointer;
  background: rgba(0, 0, 0, .8); color: #fff; font: 700 var(--fs-micro)/15px var(--f-hd); opacity: 0; transition: opacity .12s; }
.mw-pick:hover .mw-pick-x, .mw-pick:focus-within .mw-pick-x { opacity: 1; }
@media (hover: none) { .mw-pick-x { opacity: 1; } }
.mw-pick-x:hover { background: var(--mw-bad); }
/* «Прыгнуть» — главное действие страницы */
.mw-go { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 0 14px 0 12px; border: 0; border-radius: 10px;
  cursor: pointer; text-align: left; color: #160900;
  background: linear-gradient(180deg, #ff9a2e 0%, var(--mw-or) 55%, #ee6200 100%);
  box-shadow: 0 12px 30px rgba(255, 121, 0, .32), inset 0 1px 0 rgba(255, 230, 190, .6), inset 0 -2px 0 rgba(120, 40, 0, .35);
  transition: filter .15s, box-shadow .15s, transform .08s; }
.mw-go:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 14px 36px rgba(255, 121, 0, .45), inset 0 1px 0 rgba(255, 230, 190, .6), inset 0 -2px 0 rgba(120, 40, 0, .35); }
.mw-go:active:not(:disabled) { transform: translateY(1px); }
.mw-go-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: rgba(40, 14, 0, .16); }
.mw-go-ic svg { width: 24px; height: 24px; }
.mw-go-tx { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mw-go-tx b { font: 900 17px/1 var(--f-hd); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-go-tx small { font: 600 var(--fs-cap)/1.15 var(--f-ui); color: rgba(22, 9, 0, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-kbd { flex: none; padding: 5px 7px; border-radius: 5px; background: rgba(20, 8, 0, .85); color: #ffb35c; font: 800 10px/1 var(--f-hd); letter-spacing: .14em;
  box-shadow: inset 0 0 0 1px rgba(255, 173, 50, .25); }
@media (hover: none) { .mw-kbd { display: none; } }
.mw-go:disabled { cursor: default; color: rgba(255, 214, 170, .6); background: linear-gradient(180deg, #2d2219, #221a14);
  box-shadow: inset 0 0 0 1px rgba(255, 121, 0, .2); }
.mw-go:disabled .mw-go-tx small { color: rgba(255, 196, 140, .55); }
.mw-go:disabled .mw-kbd { opacity: .35; }
.mw-go.busy:disabled { cursor: progress; color: #160900; background: linear-gradient(180deg, #ff9a2e 0%, var(--mw-or) 55%, #ee6200 100%); opacity: .85;
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, .5); }
.mw-go.busy:disabled .mw-go-tx small { color: rgba(22, 9, 0, .7); }
.mw-go.res-win:disabled { color: #8ff0bd; background: linear-gradient(180deg, #13301f, #0c2216); box-shadow: inset 0 0 0 1px rgba(53, 208, 127, .45); }
.mw-go.res-win:disabled .mw-go-tx small { color: rgba(143, 240, 189, .6); }
.mw-go.res-bust:disabled { color: #ff9a9a; background: linear-gradient(180deg, #341414, #240d0d); box-shadow: inset 0 0 0 1px rgba(255, 77, 79, .45); }
.mw-go.res-bust:disabled .mw-go-tx small { color: rgba(255, 154, 154, .6); }
.mw-go.auth-cta, body.guest .mw-go:not(:disabled) { color: #160900; }
/* «Забрать выигрыш» — спокойнее «Прыгнуть», но читается сразу */
.mw-cash { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 68px; padding: 0 14px 0 12px; border-radius: 10px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #1b1d23, #121318); border: 1px solid rgba(255, 173, 50, .6); color: var(--mw-tx);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgba(0, 0, 0, .35); transition: border-color .15s, box-shadow .15s; }
.mw-cash:hover:not(:disabled) { border-color: var(--mw-amb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 20px rgba(255, 173, 50, .22); }
.mw-cash-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 173, 50, .12); color: var(--mw-amb); }
.mw-cash-ic svg { width: 20px; height: 20px; }
.mw-cash-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mw-cash-tx b { font: 800 var(--fs-label)/1.1 var(--f-hd); letter-spacing: .07em; text-transform: uppercase; }
.mw-cash-tx small { font: 800 var(--fs-body)/1 var(--f-hd); color: var(--mw-amb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-cash-tx small .coin { width: .9em; height: .9em; }
.mw-cash:disabled { cursor: default; border-color: rgba(255, 255, 255, .08); color: #a3a6b1; }
.mw-cash:disabled .mw-cash-ic { background: rgba(255, 255, 255, .05); color: #6b6e7a; }
.mw-cash:disabled .mw-cash-tx small { font: 600 var(--fs-cap)/1.15 var(--f-ui); color: var(--mw-tx2); }
.mw-cash.loading:disabled { border-color: rgba(255, 173, 50, .6); color: var(--mw-tx); }
.mw-cash.loading:disabled .mw-cash-ic { color: var(--mw-amb); }
.mw-cash.loading:disabled .mw-cash-tx small { font: 800 var(--fs-body)/1 var(--f-hd); color: var(--mw-amb); }
.mw-cash.done:disabled { border-color: rgba(53, 208, 127, .7); color: #e9fff3; box-shadow: 0 0 22px rgba(53, 208, 127, .22); }
.mw-cash.done:disabled .mw-cash-ic { background: rgba(53, 208, 127, .14); color: #5ee9a0; }
.mw-cash.done:disabled .mw-cash-tx small { font: 800 var(--fs-body)/1 var(--f-hd); color: #5ee9a0; }
.mw-cash.lost:disabled .mw-cash-tx small { color: #ff8a8a; }
/* загрузка: значок кнопки меняется на кольцо */
.mw-go.loading .mw-go-ic svg, .mw-cash.loading .mw-cash-ic svg { display: none; }
.mw-go.loading .mw-go-ic::after, .mw-cash.loading .mw-cash-ic::after { content: ''; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: mwSpin .7s linear infinite; }
@keyframes mwSpin { to { transform: rotate(360deg); } }

/* ---- «Последние игры» ---- */
.mw-hist { padding: 14px 16px 12px; border-radius: 12px; background: linear-gradient(180deg, #121318, #0d0e12); border: 1px solid var(--mw-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.mw-hist-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.mw-hist-t { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 800 var(--fs-body)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.mw-tabs { display: flex; gap: 3px; margin-left: auto; padding: 3px; border-radius: 9px; background: var(--mw-bg); border: 1px solid rgba(255, 255, 255, .07); }
.mw-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 7px; border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  background: none; color: #9a9daa; font: 700 var(--fs-label)/1 var(--f-hd); white-space: nowrap; transition: color .15s, background .15s; }
.mw-tabs button:hover:not(.on) { color: #e3e4ea; }
.mw-tabs button.on { background: #1a1c22; color: #fff; border-color: rgba(255, 121, 0, .55); }
.mw-tabs button.on img { opacity: 1; filter: none; }
.mw-hist-re { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); background: var(--mw-surf); color: #a9acb7; }
.mw-hist-re svg { width: 18px; height: 18px; }
.mw-hist-re:hover { color: var(--mw-amb); border-color: rgba(255, 121, 0, .5); }
.mw-hist-re.spin svg { animation: mwSpin .8s linear infinite; }
.mw-tbl-wrap { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.mw-tbl { width: 100%; border-collapse: separate; border-spacing: 0 3px; font: 500 var(--fs-label)/1.2 var(--f-ui); color: #d9dbe2; }
.mw-tbl th { padding: 4px 12px 6px; text-align: left; font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.mw-tbl td { padding: 8px 12px; background: #14161b; white-space: nowrap; vertical-align: middle; }
.mw-tbl tbody tr:nth-child(even) td { background: #101216; }
.mw-tbl tbody tr:hover td { background: #1a1c22; }
.mw-tbl td:first-child { border-radius: 8px 0 0 8px; }
.mw-tbl td:last-child { border-radius: 0 8px 8px 0; }
.mw-tbl tr.me td:first-child { box-shadow: inset 2px 0 0 var(--mw-or); }
.mw-tbl .c-view { width: 1%; text-align: right; }
.mw-tbl .c-win, .mw-tbl .c-mult { text-align: right; }
.mw-tbl th.c-win, .mw-tbl th.c-mult { text-align: right; }
.mw-tbl .dim { color: var(--tx-3); }
.mw-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mw-who-n { max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #eceef2; }
.mw-who em { flex: none; padding: 2px 6px; border-radius: 4px; background: rgba(255, 121, 0, .15); color: var(--mw-amb); font: 700 10px/1.2 var(--f-hd); font-style: normal; }
.mw-ava { width: 28px; height: 28px; border-radius: 50%; background: #1d1f26; color: var(--ac, #ffa838); font: 800 var(--fs-cap)/1 var(--f-hd);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mw-prog { display: inline-flex; align-items: center; gap: 8px; }
.mw-prog-bar { display: grid; grid-template-columns: repeat(var(--n, 11), 8px); gap: 2px; }
.mw-prog-bar i { height: 8px; border-radius: 2px; background: #272a32; }
.mw-prog-bar i.p { background: linear-gradient(180deg, #ffa040, var(--mw-or)); }
.mw-prog-bar i.x { background: var(--mw-bad); box-shadow: 0 0 6px rgba(255, 77, 79, .6); }
.mw-prog-n { min-width: 36px; font: 700 var(--fs-cap)/1 var(--f-hd); color: #9a9daa; }
.mw-tbl .c-mult b { color: var(--mw-or); font: 800 var(--fs-label)/1 var(--f-hd); }
.mw-tbl .c-win b { color: var(--mw-or); font: 800 var(--fs-ui)/1 var(--f-hd); }
.mw-tbl .c-win b .coin { width: .9em; height: .9em; }
.mw-res { display: inline-flex; align-items: center; gap: 7px; font: 700 var(--fs-cap)/1 var(--f-hd); }
.mw-res::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.mw-res.ok { color: var(--mw-ok); }
.mw-res.bad { color: var(--mw-bad); }
.mw-tbl td.c-time { color: var(--mw-tx2); font-size: var(--fs-cap); }
.mw-view { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .08); background: #1b1d23; color: #a9acb7; }
.mw-view svg { width: 17px; height: 17px; }
.mw-view:hover { color: var(--mw-amb); border-color: rgba(255, 121, 0, .55); }
.mw-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px 22px; text-align: center; }
.mw-empty b { font: 700 var(--fs-ui)/1.2 var(--f-hd); color: #eceef2; }
.mw-empty span { font: 400 var(--fs-label)/1.4 var(--f-ui); color: var(--mw-tx2); }
.mw-empty.err b { color: #ff9a9a; }
.mw-empty-btn { margin-top: 8px; height: 36px; padding: 0 18px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255, 121, 0, .6);
  background: rgba(255, 121, 0, .1); color: var(--mw-amb); font: 700 var(--fs-label)/1 var(--f-hd); }
.mw-empty-btn:hover { background: rgba(255, 121, 0, .2); }
.mw-skel { display: flex; flex-direction: column; gap: 3px; padding-top: 22px; }
.mw-skel i { height: 46px; border-radius: 8px; background: linear-gradient(90deg, #14161b 0%, #1c1e24 50%, #14161b 100%); background-size: 200% 100%;
  animation: mwShim 1.2s linear infinite; }
@keyframes mwShim { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- баннер «Как играть?» ---- */
.mw-howb { position: relative; isolation: isolate; display: grid; grid-template-columns: 168px minmax(220px, .8fr) minmax(0, 2fr); align-items: center; gap: 18px;
  min-height: 148px; margin-top: 30px; padding: 16px 20px 16px 0; border-radius: 12px; }
.mw-howb-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; border: 1px solid rgba(255, 121, 0, .45);
  background: var(--mw-bg) url('/assets/milkyway/how-bg.webp') center / cover no-repeat; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.mw-howb-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 9, 12, .15) 0%, rgba(8, 9, 12, .72) 24%, rgba(8, 9, 12, .55) 62%, rgba(8, 9, 12, .25) 100%); }
.mw-howb-bot { align-self: end; justify-self: center; width: 168px; height: auto; margin: -52px 0 -16px 8px; pointer-events: none; user-select: none;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .65)) drop-shadow(0 0 22px rgba(255, 121, 0, .16)); }
.mw-howb-tx h2 { margin: 0 0 7px; font: 900 22px/1.05 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.mw-howb-tx p { margin: 0 0 10px; max-width: 36ch; font: 500 var(--fs-ui)/1.4 var(--f-ui); color: #cfd1d8; }
.mw-howb-more { padding: 0; border: 0; background: none; cursor: pointer; color: var(--mw-amb); font: 700 var(--fs-label)/1 var(--f-ui);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 173, 50, .45); }
.mw-howb-more:hover { text-decoration-color: var(--mw-amb); }
.mw-howb-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mw-howb-steps li { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 46px; padding: 8px 11px; border-radius: 9px;
  background: rgba(10, 11, 14, .8); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font: 600 var(--fs-label)/1.3 var(--f-ui); color: #e6e7ec; }
.mw-howb-steps b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(180deg, #ff9a2e, var(--mw-or)); color: #160900; font: 900 var(--fs-ui)/1 var(--f-hd); box-shadow: 0 0 14px rgba(255, 121, 0, .45); }

/* правила (модальное окно) */
.mw-how h3 { margin: 0 0 12px; font: 700 18px/1.2 var(--f-hd); }
.mw-how ol { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding-left: 20px; font: 400 var(--fs-ui)/1.45 var(--f-ui); color: #d8d8e2; }

/* ---- ширина страницы игры ---- */
@container mw (min-width: 1400px) {
  .mw-howb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mw-howb-steps li { min-height: 58px; }
}
/* одна строка, но впритык: значки кнопок уступают место подписям */
@container mw (min-width: 1140px) and (max-width: 1299px) {
  .mw-go-ic, .mw-cash-ic { display: none; }
  .mw-go, .mw-cash { padding: 0 14px; }
}
@container mw (max-width: 1139px) {
  .mw-panel { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "bet bet diff diff skins skins" "go go go go cash cash"; }
  .mw-go, .mw-cash { min-height: 62px; }
}
@container mw (max-width: 1000px) {
  .mw-howb { grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "bot tx" "bot steps"; row-gap: 12px; padding: 16px 18px 16px 0; }
  .mw-howb-bot { grid-area: bot; width: 140px; margin: -40px 0 -16px 6px; }
  .mw-howb-tx { grid-area: tx; } .mw-howb-steps { grid-area: steps; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-howb-steps li { min-height: 46px; }
}
@container mw (max-width: 900px) {
  .mw-stat { height: 50px; gap: 8px; padding: 0 12px 0 7px; }
  .mw-stat img { width: 32px; height: 32px; }
  .mw-stat b { font-size: 17px; }
  .mw-status { top: 76px; }
}
/* таблица → карточки: без горизонтальной прокрутки, длинный ник режется
   многоточием; на ширине планшета — в две колонки */
@container mw (max-width: 860px) {
  .mw-tbl, .mw-tbl tbody { display: block; }
  .mw-tbl thead { display: none; }
  .mw-tbl tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; grid-template-areas: "who who time view" "prog prog prog res" "bet mult win win";
    align-items: center; gap: 8px 10px; margin-bottom: 5px; padding: 10px 12px; border-radius: 10px; background: #14161b; }
  .mw-tbl tbody tr:nth-child(even) { background: #101216; }
  .mw-tbl tr.me { box-shadow: inset 2px 0 0 var(--mw-or); }
  .mw-tbl td, .mw-tbl tbody tr:nth-child(even) td, .mw-tbl tbody tr:hover td { display: block; min-width: 0; padding: 0; background: none; border-radius: 0; box-shadow: none !important; }
  .mw-tbl td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px; font: 700 10px/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
  .mw-tbl td.c-prog::before, .mw-tbl td.c-res::before, .mw-tbl td.c-time::before { content: none; }
  .mw-tbl .c-who { grid-area: who; } .mw-tbl .c-time { grid-area: time; text-align: right; } .mw-tbl .c-view { grid-area: view; width: auto; }
  .mw-tbl .c-prog { grid-area: prog; } .mw-tbl .c-res { grid-area: res; justify-self: end; }
  .mw-tbl .c-bet { grid-area: bet; } .mw-tbl .c-mult { grid-area: mult; text-align: left; } .mw-tbl .c-win { grid-area: win; }
  .mw-who-n { max-width: none; }
  .mw-prog { display: flex; width: 100%; }
  .mw-prog-bar { flex: 1; grid-template-columns: repeat(var(--n, 11), minmax(0, 1fr)); }
}
@container mw (min-width: 561px) and (max-width: 860px) {
  .mw-tbl tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mw-tbl tr, .mw-tbl tbody tr:nth-child(even) { margin-bottom: 0; background: #14161b; }
}
@container mw (max-width: 720px) {
  .mw-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "bet diff" "skins skins" "cash go"; gap: 8px; }
  .mw-hist { padding: 12px 10px 8px; }
  .mw-hist-h { gap: 10px; }
  .mw-tabs { order: 3; width: 100%; margin-left: 0; }
  .mw-tabs button { flex: 1; justify-content: center; padding: 0 6px; }
  .mw-hist-re { margin-left: auto; }
}
@container mw (max-width: 560px) {
  .mw-hud { left: 10px; top: 10px; right: 58px; max-width: none; gap: 5px; }
  .mw-stat { flex: 1 1 0; height: 46px; padding: 0 8px; gap: 6px; }
  .mw-stat img { width: 24px; height: 24px; }
  .mw-stat small { font-size: 9px; letter-spacing: .06em; }
  .mw-stat b { font-size: var(--fs-ui); }
  .mw-l-full { display: none; } .mw-l-short { display: inline; }
  .mw-rules { top: 10px; right: 10px; width: 42px; height: 46px; padding: 0; justify-content: center; }
  .mw-rules span { display: none; }
  .mw-status { top: 64px; padding: 8px 14px 8px 10px; gap: 8px; }
  .mw-status b { font-size: var(--fs-body); } .mw-status span { font-size: var(--fs-cap); }
  .mw-scene::before, .mw-scene::after { width: 18px; height: 18px; }
  .mw-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "bet bet" "cash go" "diff diff" "skins skins"; }
  .mw-card { padding: 11px 12px; gap: 9px; }
  .mw-go, .mw-cash { min-height: 64px; }
  .mw-go-tx b { font-size: 16px; }
  .mw-cash-tx b { white-space: normal; font-size: var(--fs-cap); }
  .mw-cash:disabled .mw-cash-tx small { white-space: normal; }
  .mw-kbd { display: none; }
  .mw-howb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tx" "steps"; margin-top: 46px; padding: 16px 14px 14px; }
  .mw-howb-bot { position: absolute; right: 4px; top: -46px; width: 112px; margin: 0; }
  .mw-howb-tx { padding-right: 104px; }
  .mw-howb-tx h2 { font-size: 19px; }
  .mw-howb-tx p { font-size: var(--fs-label); }
  .mw-howb-steps li { min-height: 50px; padding: 8px 9px; gap: 8px; font-size: var(--fs-cap); }
  .mw-howb-steps b { width: 24px; height: 24px; font-size: var(--fs-label); }
}
@container mw (max-width: 420px) {
  .mw-stat img { display: none; }
  .mw-go-ic, .mw-cash-ic { display: none; }
  .mw-go { padding: 0 12px; } .mw-cash { padding: 0 11px; }
  .mw-tabs button img { display: none; }
}
/* высота сцены и подписи на ней — по окну, как геометрия в milkyway.js */
@media (max-width: 880px) {
  .mw { gap: 10px; }
  .mw-scene { aspect-ratio: 1 / 1; border-radius: 12px; }
  .mw-wagon-tag { font-size: 10px; padding: 2px 6px; }
  .mw-fx-float { font-size: var(--fs-cap); }
  .mw-online { bottom: 10px; right: 10px; height: 28px; font-size: var(--fs-micro); }
  .mw-logo { left: 10px; bottom: 8px; width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .mw-wagon.next::after, .mw-skel i, .mw-hist-re.spin svg, .mw-scene.shake { animation: none !important; }
  .mw-status, .mw-go, .mw-cash, .mw-amt { transition: none; }
}

/* ============================================================ ALIVE · SPACE BALL

   Редизайн 2026-10-14 — только вид. Сцена и движок удара (фон, цели,
   вратарь, нападающий, мяч, эффекты) — в секции SPACE BALL (2026-10-11)
   выше и не тронуты. Здесь — рамка сцены и плашки на ней, таблица
   выигрышей (справа, на любой ширине), панель ставки, «Последние игры»,
   баннер «Как играть?». Оранжевый — только у важного: текущий множитель,
   «Ударить», следующий удар в таблице. Шкалы множителей под сценой нет —
   владелец 14.10: коэффициенты только в таблице справа.

   Металлические плашки быстрых сумм — рамки из листа владельца
   (plate.webp, plate-on.webp) через border-image без fill: середина с
   цифрами листа не рисуется, внутри — свой фон. Раскладка — контейнерными
   запросами от ширины страницы игры (.sb), а не окна: боковое меню съедает
   разную ширину. Высота сцены — по окну (@media 880px), как PHONE в
   spaceball.js. Префикс sb- проверен грепом. */

.sb, .sb-float {
  --sb-bg: #08090c; --sb-card: #101115; --sb-surf: #17191f; --sb-line: rgba(255, 255, 255, .075);
  --sb-or: #ff7900; --sb-amb: #ffad32; --sb-tx: #f2f2f4; --sb-tx2: #858894;
  --sb-ok: #35d07f; --sb-bad: #ff4d4f;
  --sb-plate: url('/assets/spaceball/plate.webp');
  --sb-plate-on: url('/assets/spaceball/plate-on.webp');
  container: sb / inline-size;
  gap: 10px;
  color: var(--sb-tx);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* У .content справа нет отступа (--chat-reserve: 0) — рамки срезались краем окна. */
@media (min-width: 1200px) { #page-spaceball { padding-right: 20px; } }
.sb .num, .sb-tbl td, .sb-stat b, .sb-row b { font-variant-numeric: tabular-nums; }
.sb :is(button, [tabindex]):focus-visible { outline: 2px solid var(--sb-amb); outline-offset: 2px; }
.sb-stage { display: flex; flex-direction: column; gap: 8px; }

/* ---- рамка сцены: тонкий корпус и два уголковых кронштейна ---- */
.sb-scene { border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.sb-scene::before, .sb-scene::after { content: ''; position: absolute; z-index: 10; width: 24px; height: 24px; pointer-events: none;
  border: 2px solid rgba(255, 121, 0, .85); filter: drop-shadow(0 0 5px rgba(255, 121, 0, .55)); }
.sb-scene::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.sb-scene::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
/* низ арены: в картинке фона запечены пустые рамки кнопок из референса и
   полоса панели. Тень лежит НАД фоном и ПОД персонажами и мячом (z 1 против
   2…6) — их не затемняет; ближний край поля уходит в шкалу под сценой. */
.sb-fx::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 17%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 7, 10, 0) 0%, rgba(6, 7, 10, .8) 62%, rgba(6, 7, 10, .9) 100%); }
/* затемнение сверху — плашки читаются на любом участке неба; тонкая кромка */
.sb-vig { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(6, 7, 10, .62) 0%, rgba(6, 7, 10, 0) 19%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* ---- плашки сцены: голы / множитель / возможный выигрыш ---- */
.sb-hud { position: absolute; left: 16px; top: 16px; z-index: 9; display: flex; gap: 8px; max-width: calc(100% - 250px); }
.sb-stat { display: flex; align-items: center; gap: 10px; min-width: 0; height: 56px; padding: 0 16px 0 9px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(25, 27, 33, .9), rgba(12, 13, 17, .9)); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sb-stat img { flex: none; width: 38px; height: 38px; object-fit: contain; }
.sb-stat > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb-stat small { font: 700 10px/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-tx2); white-space: nowrap; }
.sb-stat b { font: 800 20px/1 var(--f-hd); color: #fff; white-space: nowrap; }
.sb-stat b i { font-style: normal; font-weight: 700; font-size: .7em; color: var(--sb-tx2); }
.sb-stat b .coin { width: .85em; height: .85em; }
.sb-stat.is-mult { border-color: rgba(255, 121, 0, .6); box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 121, 0, .2), inset 0 1px 0 rgba(255, 190, 120, .12); }
.sb-stat.is-mult b { color: var(--sb-or); text-shadow: 0 0 14px rgba(255, 121, 0, .45); }
.sb-scene.live .sb-stat.is-pot b { color: var(--sb-amb); }
.sb-scene.bust .sb-stat.is-mult { border-color: rgba(255, 77, 79, .7); box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 77, 79, .25); }
.sb-scene.bust .sb-stat.is-mult b { color: var(--sb-bad); text-shadow: 0 0 14px rgba(255, 77, 79, .45); }
.sb-l-short { display: none; }

/* ---- «Честная игра» и звук — в правом верхнем углу ---- */
.sb-tools { position: absolute; right: 16px; top: 16px; z-index: 9; display: flex; gap: 8px; }
.sb-fair, .sb-snd { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, rgba(25, 27, 33, .9), rgba(12, 13, 17, .9)); border: 1px solid rgba(255, 255, 255, .12);
  color: #e6e7ec; font: 600 var(--fs-label)/1 var(--f-ui); white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .15s; }
.sb-fair { padding: 0 14px 0 7px; }
.sb-fair svg { width: 18px; height: 18px; color: var(--sb-amb); }
.sb-snd { width: 42px; padding: 0; }
.sb-snd svg { width: 20px; height: 20px; color: var(--sb-amb); transition: color .15s, opacity .15s; }
.sb-snd.off svg { color: #8a8d99; opacity: .7; }
.sb-snd.off::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 2px; margin: -1px 0 0 -14px; border-radius: 2px;
  background: var(--sb-bad); box-shadow: 0 0 6px rgba(255, 77, 79, .6); transform: rotate(-45deg); }
.sb-fair:hover, .sb-snd:hover { border-color: rgba(255, 121, 0, .6); }
.sb-fair.sb-howto { display: none; }

/* ---- таблица выигрышей: справа в сцене, над трибуной ---- */
.sb-table { position: absolute; right: 16px; top: 70px; z-index: 9; width: clamp(208px, 18.5%, 260px); padding: 12px 10px 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 19, 24, .9), rgba(10, 11, 14, .93)); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sb-table-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 9px; font: 800 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.sb-table { transition: opacity .25s; }
.sb-row em { font-style: normal; }
.sb-rows { display: flex; flex-direction: column-reverse; gap: 3px; }   /* разметка по возрастанию (телефон — строка чипов), столбик — сверху вниз */
.sb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px;
  background: rgba(255, 255, 255, .035); font: 600 var(--fs-label)/1 var(--f-ui); color: #a9acb7; transition: background .25s, color .25s, box-shadow .25s; }
.sb-row:nth-child(even) { background: rgba(255, 255, 255, .018); }
.sb-row b { font: 800 var(--fs-ui)/1 var(--f-hd); color: var(--sb-or); }
.sb-row.done { background: rgba(53, 208, 127, .09); color: #9ff0c4; }
.sb-row.done b { color: #5ee9a0; }
.sb-row.next { background: linear-gradient(90deg, rgba(255, 121, 0, .28), rgba(255, 121, 0, .1)); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 140, 40, .75), 0 0 14px rgba(255, 121, 0, .22); }
.sb-row.next b { color: #ffc070; }

/* ---- панель: ставка, скины, «Ударить», «Забрать» — одна строка, пока хватает ширины ---- */
.sb-panel { display: grid; gap: 10px; align-items: stretch;
  grid-template-columns: minmax(510px, 2.2fr) minmax(165px, .8fr) minmax(195px, 1fr) minmax(155px, .75fr);
  grid-template-areas: "bet skins go cash"; }
.sb-bet { grid-area: bet; } .sb-skinc { grid-area: skins; } .sb-go { grid-area: go; } .sb-cash { grid-area: cash; }
.sb-card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding: 10px 14px 11px; border-radius: 10px;
  background: linear-gradient(180deg, #15171c, var(--sb-card)); border: 1px solid var(--sb-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 24px rgba(0, 0, 0, .35); transition: opacity .2s; }
.sb-panel.lock .sb-card { opacity: .62; }
.sb-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a9acb7; white-space: nowrap; }
.sb-card-h > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.sb-bal { font: 600 var(--fs-micro)/1 var(--f-ui); letter-spacing: .02em; text-transform: none; color: var(--sb-tx2); }
.sb-bal b { margin-left: 4px; color: #fff; font: 800 var(--fs-label)/1 var(--f-hd); }
.sb-bal b .coin { width: .9em; height: .9em; }
/* ставка: − поле + и быстрые суммы; не влезают в строку — суммы уходят вниз */
.sb-bet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.sb-amt-box { flex: 1 1 180px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 4px; min-width: 0; }
.sb-pm { height: 40px; padding: 0; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .1); background: var(--sb-surf);
  color: #e3e4ea; font: 600 20px/1 var(--f-hd); transition: border-color .15s, color .15s; }
.sb-pm:hover:not(:disabled) { border-color: rgba(255, 121, 0, .6); color: var(--sb-amb); }
.sb-amt { display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; margin: 0; padding: 0 10px; border-radius: 8px; cursor: text;
  background: var(--sb-bg); border: 1px solid rgba(255, 255, 255, .11); transition: border-color .15s, box-shadow .15s; }
.sb-amt .coin { flex: none; width: 18px; height: 18px; margin: 0; }
.sb-amt:focus-within { border-color: var(--sb-or); box-shadow: 0 0 0 3px rgba(255, 121, 0, .18); }
.sb-amt.bad { border-color: rgba(255, 77, 79, .75); }
.sb-amt input { flex: 1; width: 100%; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; color: #fff;
  font: 800 17px/1 var(--f-hd); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.sb-amt input::-webkit-outer-spin-button, .sb-amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb-amt input:disabled { color: #b9bbc4; }
.sb-chips { flex: 1 1 200px; display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 4px; min-width: 0; }
.sb-chip { height: 40px; min-width: 0; padding: 0; border: 8px solid transparent; border-image: var(--sb-plate) 22 / 8px stretch; background: #0a0c0e padding-box;
  color: #e3e4ea; font: 800 var(--fs-cap)/1 var(--f-hd); white-space: nowrap; cursor: pointer; transition: filter .15s, color .15s; }
.sb-chip:hover:not(:disabled) { color: var(--sb-amb); filter: brightness(1.18); }
.sb-chip.on { border-image-source: var(--sb-plate-on); border-image-slice: 24; background-color: #1d0900; color: #ffc23a;
  box-shadow: inset 0 0 8px rgba(120, 40, 0, .85); filter: drop-shadow(0 0 6px rgba(255, 121, 0, .4)); }
.sb-pm:disabled, .sb-chip:disabled { cursor: default; opacity: .5; filter: none; }
/* скины */
.sb-skins-n { font: 800 var(--fs-micro)/1 var(--f-hd); letter-spacing: .04em; color: var(--sb-amb); }
.sb-skins-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-add { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px dashed rgba(255, 121, 0, .65); background: rgba(255, 121, 0, .08); color: #ff9a3c; transition: background .15s, transform .1s; }
.sb-add > svg { width: 22px; height: 22px; }
.sb-add i { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sb-or); color: #160900; box-shadow: 0 0 0 2px #121318, 0 0 10px rgba(255, 121, 0, .6); }
.sb-add i svg { width: 12px; height: 12px; }
.sb-add:hover:not(:disabled) { filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 121, 0, .45)); }
.sb-add:active:not(:disabled) { transform: translateY(1px); }
.sb-add:disabled { cursor: default; opacity: .45; filter: grayscale(.6); }
.sb-skins { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 30px; }
.sb-skins-hint { min-width: 0; font: 500 var(--fs-cap)/1.3 var(--f-ui); color: var(--sb-tx2); }
.sb-pick { position: relative; flex: 0 1 30px; min-width: 22px; height: 30px; display: grid; place-items: center; border-radius: 6px;
  background: var(--sb-bg); border: 1px solid rgba(255, 255, 255, .08); border-bottom: 2px solid var(--rc, #555); }
.sb-pick-art { display: grid; place-items: center; width: 100%; height: 100%; padding: 2px; }
.sb-pick-art img, .sb-pick-art svg { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.sb-pick-x { position: absolute; top: -1px; right: -1px; width: 15px; height: 15px; padding: 0; border: 0; border-radius: 0 6px 0 6px; cursor: pointer;
  background: rgba(0, 0, 0, .8); color: #fff; font: 700 var(--fs-micro)/15px var(--f-hd); opacity: 0; transition: opacity .12s; }
.sb-pick:hover .sb-pick-x, .sb-pick:focus-within .sb-pick-x { opacity: 1; }
@media (hover: none) { .sb-pick-x { opacity: 1; } }
.sb-pick-x:hover { background: var(--sb-bad); }
.sb-skins-sum { flex: none; margin-left: auto; padding-left: 4px; font: 800 var(--fs-label)/1 var(--f-hd); color: var(--sb-amb); white-space: nowrap; }
.sb-skins-sum .coin { width: .9em; height: .9em; }
/* «Ударить» — главное действие страницы */
.sb-go { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 0 16px 0 12px; border: 0; border-radius: 10px;
  cursor: pointer; text-align: left; color: #160900;
  background: linear-gradient(180deg, #ff9a2e 0%, var(--sb-or) 55%, #ee6200 100%);
  box-shadow: 0 12px 30px rgba(255, 121, 0, .32), inset 0 1px 0 rgba(255, 230, 190, .6), inset 0 -2px 0 rgba(120, 40, 0, .35);
  transition: filter .15s, box-shadow .15s, transform .08s; }
.sb-go:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 14px 36px rgba(255, 121, 0, .45), inset 0 1px 0 rgba(255, 230, 190, .6), inset 0 -2px 0 rgba(120, 40, 0, .35); }
.sb-go:active:not(:disabled) { transform: translateY(1px); }
.sb-go-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(40, 14, 0, .2);
  box-shadow: inset 0 0 0 1px rgba(60, 20, 0, .22); }
.sb-go-ic svg { width: 26px; height: 26px; }
.sb-go-tx { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sb-go-tx b { font: 900 19px/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-go-tx small { font: 600 var(--fs-cap)/1.15 var(--f-ui); color: rgba(22, 9, 0, .74); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-go-tx small:empty { display: none; }
.sb-go-tx small .coin { width: .95em; height: .95em; }
.sb-go:disabled { cursor: default; }
.sb-go.busy:disabled { cursor: progress; opacity: .86; box-shadow: inset 0 1px 0 rgba(255, 230, 190, .5); }
.sb-go.busy .sb-go-ic svg { animation: sbGoSpin .9s linear infinite; }
@keyframes sbGoSpin { to { transform: rotate(360deg); } }
/* «Забрать» — спокойнее «Ударить», но читается сразу */
.sb-cash { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 68px; padding: 0 14px 0 10px; border-radius: 10px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #1b1d23, #121318); border: 1px solid rgba(255, 173, 50, .65); color: var(--sb-tx);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 20px rgba(255, 173, 50, .16); transition: border-color .15s, box-shadow .15s; }
.sb-cash:hover:not(:disabled) { border-color: var(--sb-amb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 24px rgba(255, 173, 50, .3); }
.sb-cash-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 173, 50, .12); color: var(--sb-amb); }
.sb-cash-ic svg { width: 20px; height: 20px; }
.sb-cash-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sb-cash-tx b { font: 800 var(--fs-label)/1.1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; }
.sb-cash-tx small { font: 800 var(--fs-body)/1 var(--f-hd); color: var(--sb-amb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-cash-tx small .coin { width: .9em; height: .9em; }
.sb-cash:disabled { cursor: default; border-color: rgba(255, 255, 255, .08); color: #a3a6b1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.sb-cash:disabled .sb-cash-ic { background: rgba(255, 255, 255, .05); color: #6b6e7a; }
.sb-cash:disabled .sb-cash-tx small { font: 600 var(--fs-cap)/1.15 var(--f-ui); color: var(--sb-tx2); }
.sb-cash.ready.busy:disabled { border-color: rgba(255, 173, 50, .5); color: var(--sb-tx); cursor: progress; }
.sb-cash.ready.busy:disabled .sb-cash-ic { background: rgba(255, 173, 50, .12); color: var(--sb-amb); }
.sb-cash.ready.busy:disabled .sb-cash-tx small { font: 800 var(--fs-body)/1 var(--f-hd); color: var(--sb-amb); }

/* ---- «Последние игры» ---- */
.sb-hist { padding: 14px 16px 12px; border-radius: 12px; background: linear-gradient(180deg, #121318, #0d0e12); border: 1px solid var(--sb-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.sb-hist-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.sb-hist-t { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 800 var(--fs-body)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.sb-tabs { display: flex; gap: 3px; margin-left: auto; padding: 3px; border-radius: 9px; background: var(--sb-bg); border: 1px solid rgba(255, 255, 255, .07); }
.sb-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 7px; border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  background: none; color: #9a9daa; font: 700 var(--fs-label)/1 var(--f-hd); white-space: nowrap; transition: color .15s, background .15s; }
.sb-tabs button:hover:not(.on) { color: #e3e4ea; }
.sb-tabs button.on { background: #1a1c22; color: #fff; border-color: rgba(255, 121, 0, .55); }
.sb-tabs button.on img { opacity: 1; filter: none; }
.sb-hist-re { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); background: var(--sb-surf); color: #a9acb7; }
.sb-hist-re svg { width: 18px; height: 18px; }
.sb-hist-re:hover { color: var(--sb-amb); border-color: rgba(255, 121, 0, .5); }
.sb-hist-re.spin svg { animation: sbGoSpin .8s linear infinite; }
.sb-tbl-wrap { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.sb-tbl { width: 100%; border-collapse: separate; border-spacing: 0 3px; font: 500 var(--fs-label)/1.2 var(--f-ui); color: #d9dbe2; }
.sb-tbl th { padding: 4px 12px 6px; text-align: left; font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.sb-tbl td { height: 46px; padding: 6px 12px; background: #14161b; white-space: nowrap; vertical-align: middle; }
.sb-tbl tbody tr:nth-child(even) td { background: #101216; }
.sb-tbl tbody tr:hover td { background: #1a1c22; }
.sb-tbl td:first-child { border-radius: 8px 0 0 8px; }
.sb-tbl td:last-child { border-radius: 0 8px 8px 0; }
.sb-tbl tr.me td:first-child { box-shadow: inset 2px 0 0 var(--sb-or); }
.sb-tbl .c-win, .sb-tbl .c-mult { text-align: right; }
.sb-tbl .c-time { text-align: right; }
.sb-tbl .dim { color: var(--tx-3); }
.sb-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sb-who-n { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #eceef2; }
.sb-who em { flex: none; padding: 2px 6px; border-radius: 4px; background: rgba(255, 121, 0, .15); color: var(--sb-amb); font: 700 10px/1.2 var(--f-hd); font-style: normal; }
.sb-ava { width: 28px; height: 28px; border-radius: 50%; background: #1d1f26; color: var(--ac, #ffa838); font: 800 var(--fs-cap)/1 var(--f-hd);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sb-prog { display: inline-flex; align-items: center; gap: 8px; }
.sb-prog-bar { display: grid; grid-template-columns: repeat(var(--n, 10), 9px); gap: 2px; }
.sb-prog-bar i { height: 8px; border-radius: 2px; background: #272a32; }
.sb-prog-bar i.g { background: linear-gradient(180deg, #5ee9a0, var(--sb-ok)); }
.sb-prog-bar i.x { background: var(--sb-bad); box-shadow: 0 0 6px rgba(255, 77, 79, .6); }
.sb-prog-n { min-width: 34px; font: 700 var(--fs-cap)/1 var(--f-hd); color: #9a9daa; }
.sb-tbl .c-mult b, .sb-tbl .c-win b { color: var(--sb-or); font: 800 var(--fs-ui)/1 var(--f-hd); }
.sb-tbl .c-win b .coin { width: .9em; height: .9em; }
.sb-res { display: inline-flex; align-items: center; gap: 7px; font: 700 var(--fs-cap)/1 var(--f-hd); }
.sb-res::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.sb-res.ok { color: var(--sb-ok); }
.sb-res.bad { color: var(--sb-bad); }
.sb-tbl td.c-time { color: var(--sb-tx2); font-size: var(--fs-cap); }
.sb-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px 22px; text-align: center; }
.sb-empty b { font: 700 var(--fs-ui)/1.2 var(--f-hd); color: #eceef2; }
.sb-empty span { font: 400 var(--fs-label)/1.4 var(--f-ui); color: var(--sb-tx2); }
.sb-empty.err b { color: #ff9a9a; }
.sb-empty-btn { margin-top: 8px; height: 36px; padding: 0 18px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255, 121, 0, .6);
  background: rgba(255, 121, 0, .1); color: var(--sb-amb); font: 700 var(--fs-label)/1 var(--f-hd); }
.sb-empty-btn:hover { background: rgba(255, 121, 0, .2); }
.sb-skel { display: flex; flex-direction: column; gap: 3px; padding-top: 22px; }
.sb-skel i { height: 46px; border-radius: 8px; background: linear-gradient(90deg, #14161b 0%, #1c1e24 50%, #14161b 100%); background-size: 200% 100%;
  animation: sbShim 1.2s linear infinite; }
@keyframes sbShim { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- баннер «Как играть?»: фон владельца с маскотом слева и воротами справа,
   текст — в тёмной середине между ними ---- */
.sb-howb { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 12px;
  min-height: max(150px, 15.5cqw); margin-top: 6px; padding: 16px 21.5% 16px 26%; border-radius: 12px; overflow: hidden;
  background: var(--sb-bg) url('/assets/spaceball/how-bg.webp') center / cover no-repeat; border: 1px solid rgba(255, 121, 0, .5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.sb-howb::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 30% 72% at 50% 50%, rgba(8, 9, 12, .6), rgba(8, 9, 12, 0) 100%); }
.sb-howb-tx { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.sb-howb-tx h2 { margin: 0; font: 900 21px/1.05 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.sb-howb-tx p { margin: 0; font: 500 var(--fs-label)/1.4 var(--f-ui); color: #cfd1d8; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.sb-howb-more { padding: 0; border: 0; background: none; cursor: pointer; color: var(--sb-amb); font: 700 var(--fs-label)/1.2 var(--f-ui); text-align: left;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 173, 50, .45); }
.sb-howb-more:hover { text-decoration-color: var(--sb-amb); }
.sb-howb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.sb-howb-steps li { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 7px 10px; border-radius: 9px;
  background: rgba(10, 11, 14, .82); border: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font: 600 var(--fs-label)/1.3 var(--f-ui); color: #e6e7ec; }
.sb-howb-steps b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(180deg, #ff9a2e, var(--sb-or)); color: #160900; font: 900 var(--fs-label)/1 var(--f-hd); box-shadow: 0 0 14px rgba(255, 121, 0, .45); }

/* окно «Честная игра» */
.sb-fairbox dt { color: var(--sb-tx2); }

/* ---- ширина страницы игры ---- */
@container sb (min-width: 1400px) {
  .sb-howb-steps li { min-height: 52px; font-size: var(--fs-label); }
}
/* одна строка, но впритык: значки кнопок уступают место подписям */
@container sb (max-width: 1239px) {
  .sb-go-ic { width: 38px; height: 38px; } .sb-go-ic svg { width: 22px; height: 22px; }
  .sb-cash-ic { display: none; }
  .sb-go-tx b { font-size: 17px; }
  .sb-row { height: 27px; }
  .sb-table { top: 66px; width: max(180px, 19%); padding: 10px 8px 8px; }
  .sb-table-h { gap: 6px; font-size: var(--fs-micro); letter-spacing: .05em; line-height: 1.15; white-space: normal; }
  /* на узкой сцене мяч после сейва отскакивает к правому краю — на время
     удара таблица уступает ему место, как прежняя панель поверх поля */
  .sb-stage.busy .sb-table { opacity: .15; }
  /* баннер впритык к пропорции картинки: шаги плотнее, текст в две строки */
  .sb-howb { padding: 14px 20% 14px 25%; gap: 10px; }
  .sb-howb-steps { gap: 6px; }
  .sb-howb-steps li { gap: 7px; min-height: 42px; padding: 6px 8px; font-size: var(--fs-cap); }
  .sb-howb-steps b { width: 22px; height: 22px; font-size: var(--fs-cap); }
}
@container sb (max-width: 1069px) {
  .sb-panel { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "bet skins" "go cash"; }
  .sb-go, .sb-cash { min-height: 62px; }
  .sb-cash-ic { display: grid; }
}
/* без боковой таблицы: те же множители — в шкале под сценой */
@container sb (max-width: 999px) {
  .sb-table { right: 12px; width: 20%; padding: 8px 6px 6px; }
  .sb-table-h { align-items: flex-start; gap: 5px; margin: 0 2px 7px; font-size: 10px; letter-spacing: .04em; line-height: 1.15; white-space: normal; }
  .sb-table-h img { width: 18px; height: 18px; }
  .sb-rows { gap: 2px; }
  .sb-row { height: 24px; padding: 0 7px; gap: 4px; font-size: var(--fs-micro); }
  .sb-row b { font-size: var(--fs-label); }
  .sb-hud { max-width: calc(100% - 120px); }
  .sb-fair { width: 42px; padding: 0; }
  .sb-fair span { display: none; }
  /* баннер: картинка полосой сверху, текст и шаги под ней */
  .sb-howb { display: block; min-height: 0; padding: 0 0 14px; background: var(--sb-card); }
  .sb-howb::before { position: static; z-index: auto; display: block; aspect-ratio: 1960 / 304; min-height: 104px; margin-bottom: 12px;
    background: url('/assets/spaceball/how-bg.webp') left center / cover no-repeat;
    -webkit-mask: linear-gradient(180deg, #000 72%, transparent); mask: linear-gradient(180deg, #000 72%, transparent); }
  .sb-howb-tx { margin: 0 16px 12px; }
  .sb-howb-tx h2 { font-size: 20px; }
  .sb-howb-steps { margin: 0 16px; }
  .sb-howb-steps li { background: #15171c; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@container sb (max-width: 900px) {
  .sb-stat { height: 50px; gap: 8px; padding: 0 12px 0 7px; }
  .sb-stat img { width: 30px; height: 30px; }
  .sb-stat b { font-size: 17px; }
}
/* таблица → карточки (уже 980): без горизонтальной прокрутки, длинный ник
   режется многоточием; на ширине планшета — в две колонки */
@container sb (max-width: 979px) {
  .sb-tbl, .sb-tbl tbody { display: block; }
  .sb-tbl thead { display: none; }
  .sb-tbl tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "who who time" "prog prog res" "bet mult win";
    align-items: center; gap: 8px 10px; margin-bottom: 5px; padding: 10px 12px; border-radius: 10px; background: #14161b; }
  .sb-tbl tbody tr:nth-child(even) { background: #101216; }
  .sb-tbl tr.me { box-shadow: inset 2px 0 0 var(--sb-or); }
  .sb-tbl td, .sb-tbl tbody tr:nth-child(even) td, .sb-tbl tbody tr:hover td { display: block; height: auto; min-width: 0; padding: 0; background: none; border-radius: 0; box-shadow: none !important; }
  .sb-tbl td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px; font: 700 10px/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
  .sb-tbl td.c-prog::before, .sb-tbl td.c-res::before, .sb-tbl td.c-time::before { content: none; }
  .sb-tbl .c-who { grid-area: who; } .sb-tbl .c-time { grid-area: time; text-align: right; }
  .sb-tbl .c-prog { grid-area: prog; } .sb-tbl .c-res { grid-area: res; justify-self: end; }
  .sb-tbl .c-bet { grid-area: bet; } .sb-tbl .c-mult { grid-area: mult; text-align: left; } .sb-tbl .c-win { grid-area: win; }
  .sb-who-n { max-width: none; }
  .sb-prog { display: flex; width: 100%; }
  .sb-prog-bar { flex: 1; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); }
}
@container sb (min-width: 561px) and (max-width: 979px) {
  .sb-tbl tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sb-tbl tr, .sb-tbl tbody tr:nth-child(even) { margin-bottom: 0; background: #14161b; }
}
/* шкала — лента с прокруткой внутри себя, текущий множитель держится в кадре */
@container sb (max-width: 699px) {
  /* таблица — узкая колонка «число голов · множитель» справа от ворот,
     под плашками сцены; высота строки — от высоты сцены (4 : 3.3), низ
     колонки выше уголка рамки */
  .sb-table { top: 72px; right: 8px; width: 76px; padding: 4px; border-radius: 9px; }
  .sb-table-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sb-rows { gap: 1px; }
  .sb-row { height: clamp(14px, calc((82.5cqw - 100px) / 10.6), 24px); padding: 0 5px; border-radius: 5px; font-size: var(--fs-micro); }
  .sb-row em { display: none; }
  .sb-row b { font-size: var(--fs-cap); }
  .sb-hist { padding: 12px 10px 8px; }
  .sb-hist-h { gap: 10px; }
  .sb-tabs { order: 3; width: 100%; margin-left: 0; }
  .sb-tabs button { flex: 1; justify-content: center; padding: 0 6px; }
  .sb-hist-re { margin-left: auto; }
}
@container sb (max-width: 640px) {
  .sb-howb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}
@container sb (max-width: 719px) {
  .sb-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "bet bet" "cash go" "skins skins"; gap: 8px; }
}
@container sb (max-width: 560px) {
  .sb-hud { left: 10px; top: 10px; right: 104px; max-width: none; gap: 5px; }
  .sb-stat { flex: 1 1 0; height: 46px; padding: 0 8px; gap: 6px; }
  .sb-stat img { width: 24px; height: 24px; }
  .sb-stat small { font-size: 9px; letter-spacing: .06em; }
  .sb-stat b { font-size: var(--fs-ui); }
  .sb-l-full { display: none; } .sb-l-short { display: inline; }
  .sb-tools { top: 10px; right: 10px; gap: 6px; }
  .sb-table { top: 62px; width: 72px; }
  .sb-fair, .sb-snd { width: 40px; height: 46px; }
  .sb-scene::before, .sb-scene::after { width: 18px; height: 18px; }
  .sb-card { padding: 11px 12px; gap: 9px; }
  .sb-chips { flex-basis: 100%; }
  .sb-go, .sb-cash { min-height: 64px; }
  .sb-go { padding: 0 12px 0 10px; gap: 10px; }
  .sb-go-tx b { font-size: 16px; }
  .sb-go-tx small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sb-cash { padding: 0 11px; }
  .sb-cash-ic { display: none; }
  .sb-cash-tx b { font-size: var(--fs-cap); }
  .sb-cash:disabled .sb-cash-tx small { white-space: normal; }
  .sb-howb-tx p { font-size: var(--fs-label); }
  .sb-howb-steps li { min-height: 50px; padding: 8px 9px; gap: 8px; font-size: var(--fs-cap); }
  .sb-howb-steps b { width: 24px; height: 24px; font-size: var(--fs-cap); }
}
@container sb (max-width: 340px) {
  .sb-table { width: 62px; padding: 3px; }
  .sb-row { padding: 0 4px; font-size: 10px; }
  .sb-row b { font-size: var(--fs-micro); }
  .sb-chips { grid-template-columns: repeat(6, minmax(36px, 1fr)); }
  .sb-chip { font-size: var(--fs-micro); }
}
@container sb (max-width: 420px) {
  .sb-stat img { display: none; }
  .sb-stat { flex: 1 1 auto; padding: 0 7px; }
  .sb-stat small { font-size: 8px; letter-spacing: .03em; }
  .sb-tabs button img { display: none; }
  .sb-go-ic { width: 34px; height: 34px; } .sb-go-ic img { width: 28px; height: 28px; }
}
/* невысокое окно (1366×768, 1280×800): сцена чуть ниже 16:9, чтобы
   «Ударить» был на первом экране; фон ложится как cover — measure() это и
   считает. Не ниже 52% ширины: обрезка картинки — не больше 7% по высоте,
   ноги на месте. Запас — шапка и отступ (92) + панель: в одну строку 96,
   в две (уже 1070) — 172. */
@media (min-width: 881px) {
  .sb-scene { max-height: max(calc(100svh - 188px), 52cqw); }
  @container sb (max-width: 1069px) { .sb-scene { max-height: max(calc(100svh - 264px), 52cqw); } }
}
/* высота сцены — по окну, как геометрия в spaceball.js (PHONE) */
@media (max-width: 880px) {
  .sb-scene { aspect-ratio: 4 / 3.3; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-skel i, .sb-hist-re.spin svg, .sb-go.busy .sb-go-ic img { animation: none !important; }
  .sb-go, .sb-cash, .sb-amt, .sb-row, .sb-card { transition: none; }
}

/* ================= ALIVE · БЫСТРЫЕ КНОПКИ СТАВКИ — ОДНИ НА ВСЕ ИГРЫ =================
   Решение владельца 2026-10-14: 10 · 50 · ×2 · MAX в каждой игре (quickbet.js).
   Здесь — только то, что надо было подвинуть под четыре кнопки: Plinko шёл
   пятью, Milky Way тремя в строке с полем. */
.pk-chips { grid-template-columns: repeat(4, 1fr); }
/* Milky Way: кнопки стоят в строке со ставкой, как и раньше (обёртка —
   только для перерисовки на смену валюты, в раскладке её нет). Четыре
   кнопки вместо трёх — чуть уже, чтобы поле суммы не сжалось в монету. */
.mw-quick { display: contents; }
.mw-q { min-width: 34px; padding: 0 7px; font-size: var(--fs-cap); }

/* ================= ALIVE · ПОДСКАЗКИ «?» =================
   Одна подсказка на весь сайт (ui.hint): кружок у подписи, облако при наведении,
   фокусе и клике (телефон). Облако — над кружком; .hint-right / .hint-left
   прижимают его к стороне, а у края рабочей области ui.js сдвигает его
   внутрь (--hx) или открывает вниз (.hint-down). */
.hint {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 168, 56, .45); background: rgba(255, 168, 56, .1);
  color: #ffa838; font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: 0; text-transform: none;
  vertical-align: middle; cursor: help; position: relative; flex: none; transition: background .15s, color .15s;
}
.hint:hover, .hint:focus-visible, .hint.on { background: #ffa838; border-color: #ffa838; color: #180a00; }
.hint:focus-visible { outline: 2px solid rgba(255, 168, 56, .6); outline-offset: 2px; }
.hint::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px); width: max-content; max-width: 250px; padding: 9px 12px;
  border-radius: 10px; background: #15161b; border: 1px solid rgba(255, 168, 56, .35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55); color: #ececf2; font: 500 var(--fs-label)/1.45 var(--f-ui);
  letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 140;
  translate: var(--hx, 0px) 0;   /* сдвиг от края рабочей области — ui.js hintEdge */
}
.hint::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(255, 168, 56, .35);
  opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 141;
}
.hint:hover::after, .hint:focus-visible::after, .hint.on::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.hint:hover::before, .hint:focus-visible::before, .hint.on::before { opacity: 1; visibility: visible; }
.hint-right::after { left: auto; right: -6px; transform: translateY(4px); }
.hint-right:hover::after, .hint-right:focus-visible::after, .hint-right.on::after { transform: translateY(0); }
.hint-left::after { left: -6px; transform: translateY(4px); }
.hint-left:hover::after, .hint-left:focus-visible::after, .hint-left.on::after { transform: translateY(0); }
.hint-down::after { bottom: auto; top: calc(100% + 10px); }
.hint-down::before { bottom: auto; top: calc(100% + 5px); border-top-color: transparent; border-bottom-color: rgba(255, 168, 56, .35); }
.hint-down:hover::after, .hint-down:focus-visible::after, .hint-down.on::after { transform: translateX(-50%) translateY(0); }
.hint-down.hint-right:hover::after, .hint-down.hint-right:focus-visible::after, .hint-down.hint-right.on::after,
.hint-down.hint-left:hover::after, .hint-down.hint-left:focus-visible::after, .hint-down.hint-left.on::after { transform: translateY(0); }
.rbp-lbl .hint, .pk-lbl .hint, .mw-card-h .hint, .sb-card-h .hint, .sb-table-h .hint, .pra-stat .hint, .wha-tiers-h .hint { margin-left: 5px; }
/* Карточка с открытым облаком — над соседями: у карточек над доской Мин на
   телефоне свой слой (z-index: 1), и блок «Поставить скинами» ложился поверх облака. */
#page-mines .rbp > .rbp-field:has(.hint:hover, .hint:focus-visible, .hint.on) { z-index: 6; }
/* Заголовки карточек режут длинный текст многоточием — облаку подсказки это нельзя. */
.mw-card-h > span:first-child:has(.hint), .sb-card-h > span:first-child:has(.hint) { overflow: visible; }
.pra-xp small .hint { width: 14px; height: 14px; font-size: 10px; margin: 0 2px 0 4px; }
.pra-bal-p .hint { width: 14px; height: 14px; font-size: 10px; margin-left: 2px; }
@media (max-width: 560px) {
  .hint::after { max-width: min(250px, calc(100vw - 32px)); }
}

/* ================= ALIVE · АВТО-РЕЖИМЫ MILKY WAY И SPACE BALL =================
   Одна полоса под панелью ставки (autobar.js): «Автозабор» на N шагов и
   «Автоигра» на N раундов. Внешность одна на обе игры — чтобы рука помнила. */
.auto-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; padding: 9px 14px;
  border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.auto-bar.live { border-color: rgba(255, 121, 0, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px rgba(255, 121, 0, .12), 0 10px 30px rgba(255, 121, 0, .08); }
.auto-grp { display: flex; align-items: center; gap: 9px; min-width: 0; }
.auto-k { display: inline-flex; align-items: center; font: 600 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a2a2b2; white-space: nowrap; }
.auto-sub { font: 500 var(--fs-cap)/1 var(--f-hd); color: var(--tx-3); white-space: nowrap; }
.auto-segs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(38px, auto); gap: 3px; padding: 3px; border-radius: 8px; background: #08090c; border: 1px solid rgba(255, 255, 255, .08); }
.auto-segs button {
  height: 30px; min-width: 0; padding: 0 9px; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  background: transparent; color: #9a9daa; font: 700 var(--fs-label)/1 var(--f-hd); white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: color .15s, background .15s;
}
.auto-segs button:hover:not(:disabled):not(.on) { color: #e3e4ea; }
.auto-segs button.on { background: linear-gradient(180deg, #25272e, #1a1c22); color: #fff; border-color: rgba(255, 121, 0, .65); box-shadow: 0 0 12px rgba(255, 121, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .06); }
.auto-segs button.on[data-v="0"] { border-color: rgba(255, 255, 255, .16); box-shadow: none; color: #c4c4d0; }
.auto-segs button:disabled { cursor: default; opacity: .5; }
.auto-segs button.on:disabled { opacity: .8; }
/* Поле ввода ступени (Milky Way): «после [ 2 ] платформ» вместо кнопок. */
.auto-pre { font: 700 var(--fs-label)/1 var(--f-hd); color: #9a9daa; white-space: nowrap; }
.auto-num {
  width: 60px; height: 30px; padding: 0 8px; border-radius: 8px; text-align: center;
  background: #08090c; border: 1px solid rgba(255, 255, 255, .12); color: #fff;
  font: 700 var(--fs-label)/1 var(--f-hd); font-variant-numeric: tabular-nums;
}
.auto-num:focus { outline: none; border-color: rgba(255, 121, 0, .65); box-shadow: 0 0 12px rgba(255, 121, 0, .18); }
.auto-num:disabled { opacity: .5; cursor: default; }
.auto-num::-webkit-outer-spin-button, .auto-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.auto-num { -moz-appearance: textfield; appearance: textfield; }
.auto-state { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 600 var(--fs-cap)/1.3 var(--f-hd); color: #8a8a9a; }
.auto-state b { color: #ffad32; font-variant-numeric: tabular-nums; }
.auto-state i { width: 7px; height: 7px; border-radius: 50%; background: #ffad32; box-shadow: 0 0 0 3px rgba(255, 173, 50, .2); animation: auto-pulse 1.2s ease-in-out infinite; }
.auto-state:empty { display: none; }
@keyframes auto-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .auto-state i { animation: none; } }
@media (max-width: 880px) {
  .auto-bar { gap: 8px 14px; padding: 9px 12px; }
  .auto-grp { flex: 1 1 100%; justify-content: space-between; }
  .auto-sub { display: none; }
  .auto-segs { flex: 1 1 auto; grid-auto-columns: minmax(0, 1fr); }
  .auto-state { margin-left: 0; flex: 1 1 100%; }
}

/* ================= ALIVE · «КАК ИГРАТЬ?» — КНОПКА В УГЛУ СЦЕНЫ (howto.js) =================
   Правый верхний угол сцены Ракеты, Мин, Plinko и апгрейдера.
   Наведение — всплывает карточка со шагами, клик — та же карточка окном. */
.howto-btn {
  position: absolute; top: 16px; right: 16px; z-index: 12; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px 0 9px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, rgba(25, 27, 33, .92), rgba(12, 13, 17, .92)); border: 1px solid rgba(255, 255, 255, .12);
  color: #e6e7ec; font: 600 var(--fs-label)/1 var(--f-ui); white-space: nowrap;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .15s, color .15s;
}
.howto-btn > svg { width: 18px; height: 18px; color: #ffad32; flex: none; }
.howto-btn:hover, .howto-btn:focus-visible { border-color: rgba(255, 121, 0, .6); color: #fff; }
.howto-btn:focus-visible { outline: 2px solid rgba(255, 168, 56, .6); outline-offset: 2px; }
.howto-pop {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(380px, calc(100vw - 32px)); padding: 16px 18px; text-align: left;
  border-radius: 14px; background: linear-gradient(180deg, rgba(24, 18, 12, .97), rgba(10, 9, 12, .98));
  border: 1px solid rgba(255, 121, 0, .4); box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
  color: #e3e4ea; font: 500 var(--fs-label)/1.4 var(--f-ui); white-space: normal; cursor: default;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none;
}
.howto-pop::before { content: ''; position: absolute; right: 18px; top: -6px; width: 10px; height: 10px; transform: rotate(45deg);
  background: rgba(24, 18, 12, .97); border-left: 1px solid rgba(255, 121, 0, .4); border-top: 1px solid rgba(255, 121, 0, .4); }
/* Всплывашка — только там, где есть наведение; на телефоне клик открывает окно. */
@media (hover: hover) {
  .howto-btn:hover .howto-pop, .howto-btn:focus-visible .howto-pop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
}
.howto-pop h3, .howto-modal h3 { margin: 0 0 6px; font: 900 18px/1.1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.howto-pop p, .howto-modal p { margin: 0 0 10px; font: 500 var(--fs-label)/1.4 var(--f-ui); color: #cfd1d8; }
.howto-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.howto-steps li { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 7px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); font: 500 var(--fs-label)/1.35 var(--f-ui); color: #e3e4ea; }
.howto-steps b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: linear-gradient(180deg, #ffad32, #ff7900); color: #180a00; font: 800 var(--fs-cap)/1 var(--f-hd); box-shadow: 0 4px 12px rgba(255, 121, 0, .35); }
.howto-more { display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; color: #ffad32;
  font: 700 var(--fs-label)/1 var(--f-ui); text-decoration: underline; text-decoration-color: rgba(255, 173, 50, .35); text-underline-offset: 3px; }
.howto-more:hover { text-decoration-color: #ffad32; }
.howto-modal { position: relative; max-width: 520px; }
/* Панель подгоняем под контент (520 + поля), иначе .modal берёт дефолтные
   900px и карточки жмутся влево, оставляя пустоту справа. */
#modal:has(> .howto-modal) { max-width: 560px; }
.howto-modal .howto-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.howto-modal .btn { margin-top: 10px; }
@media (max-width: 880px) {
  .howto-btn { top: 10px; right: 10px; height: 32px; padding: 0 10px 0 8px; font-size: var(--fs-cap); }
  .howto-btn > span { display: none; }
  .howto-btn { padding: 0 8px; width: 32px; justify-content: center; }
  .howto-modal .howto-steps { grid-template-columns: minmax(0, 1fr); }
}
/* Гость в панели Alive (Ракета, Мины): кнопка «ВОЙТИ» — как у классической. */
.rbp-main.auth {
  background: linear-gradient(135deg, #3a3a48, #22222b); color: #ffa838;
  border: 1px solid rgba(255, 122, 24, .45); box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.rbp-main.auth:hover { filter: none; border-color: #ff7a18; color: #fff; }

/* ======================================================================
   ALIVE · ЧЕСТНОСТЬ — ОТДАЧА ИГР (#fRtp): таблица по играм и раскрывающиеся
   формулы с таблицами лесенок. Числа приходят с /api/rtp.
   ====================================================================== */
.frtp-tbl td small { display: block; font-size: var(--fs-micro); color: #9a9aa8; margin-top: 2px; max-width: 420px; }
.frtp-tbl td.num { white-space: nowrap; }
.frtp-forms { display: grid; gap: 8px; margin-top: 14px; }
.frtp-d { border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: 8px 12px; background: rgba(255, 255, 255, .02); }
.frtp-d summary { cursor: pointer; font-size: var(--fs-label); }
.frtp-d .help.mono { font-size: var(--fs-cap); margin: 8px 0 4px; word-break: break-word; }
.frtp-t { margin-top: 10px; overflow-x: auto; }
.frtp-t .tbl { font-size: var(--fs-cap); }
.frtp-t .tbl td.num, .frtp-t .tbl th { text-align: right; }
.frtp-t .tbl td.num:first-child, .frtp-t .tbl th:first-child { text-align: left; }
@media (max-width: 700px) {
  .frtp-tbl th:nth-child(4), .frtp-tbl td:nth-child(4) { display: none; }
}

/* ======================================================================
   ALIVE · ДРОП ДНЯ (#whaDrop) на странице колеса и «письмо ещё раз» /
   Telegram в кабинете (.pra-link-again).
   ====================================================================== */
.wha-drop { margin: 0 0 12px; padding: 12px 12px 10px; border-radius: 14px;
  border: 1px solid rgba(255, 122, 24, .28); background: linear-gradient(180deg, rgba(255, 122, 24, .08), rgba(255, 255, 255, .02)); }
.wdr-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px;
  font: 700 var(--fs-cap)/1 var(--f-hd); letter-spacing: .14em; text-transform: uppercase; color: var(--or-2, #ffb067); }
.wdr-h small { font: 500 var(--fs-micro)/1 var(--f-ui); letter-spacing: 0; text-transform: none; color: #9a9aa8; }
.wdr-note { margin: 0 0 10px; font: 400 var(--fs-cap)/1.5 var(--f-ui); color: #b9b9c6; }
.wdr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 10px; }
.wdr-cell { display: grid; place-items: center; gap: 2px; padding: 7px 2px 6px; border-radius: 9px; min-height: 52px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); text-align: center; }
.wdr-cell small { font: 500 9px/1 var(--f-ui); color: #8d8d9c; letter-spacing: .04em; text-transform: uppercase; }
.wdr-cell b { font: 700 var(--fs-label)/1 var(--f-hd); color: #fff; }
.wdr-cell i { font: 500 9px/1 var(--f-ui); color: #9a9aa8; font-style: normal; }
.wdr-cell img { width: 26px; height: 26px; object-fit: contain; }
.wdr-cell.done { background: rgba(53, 208, 127, .12); border-color: rgba(53, 208, 127, .35); }
.wdr-cell.done b, .wdr-cell.done small { color: #8ff0b8; }
.wdr-cell.cur { background: rgba(255, 122, 24, .16); border-color: rgba(255, 122, 24, .6); box-shadow: 0 0 0 1px rgba(255, 122, 24, .25) inset; }
.wdr-btn { display: block; width: 100%; padding: 10px 12px; border-radius: 10px; border: 0; cursor: pointer; text-align: center;
  font: 700 var(--fs-cap)/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #1a0d00;
  background: linear-gradient(180deg, #ffb067, #ff7a18); text-decoration: none; }
.wdr-btn.off { background: rgba(255, 255, 255, .08); color: #9a9aa8; cursor: default; }
.wdr-btn.warn { background: rgba(255, 196, 60, .16); color: #ffd27a; border: 1px solid rgba(255, 196, 60, .4); }
.pra-link-again { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs-cap)/1.3 var(--f-ui); color: #ffb067; text-decoration: underline; text-underline-offset: 3px; }
.pra-link.warn, #cardMail.warn { --dot: #ffc43c; --bd: rgba(255, 196, 60, .35); }
@media (max-width: 700px) { .wdr-cell { min-height: 46px; } .wdr-cell img { width: 22px; height: 22px; } }

/* ============================================================ ALIVE · ТИПОГРАФИКА

   ТЗ_ТИПОГРАФИКА.md: роли текста, регистр, пол кегля, три уровня серого,
   шрифты. Секция в конце файла, чтобы при равной специфичности побеждать
   правила страниц выше. Замер и приёмка — tools/typo_audit.py. */

/* ---------------------------------------------------------- шрифты (§2.5)

   Кнопки и поля не наследуют шрифт сами — браузер рисовал их Arial.
   Только семейство: при font: inherit кнопки без своего кегля выросли бы
   с 13.33 px браузера до кегля родителя. */
button, input, select, textarea { font-family: inherit; }

/* Inter грузится 400–700. Эти правила ставили ему 800–900, и браузер
   дорисовывал ложный полужирный. Display-заголовки текстовых страниц —
   системным шрифтом заголовков, как остальные герои. */
.card h3, table.tbl th, .i-h2, .dc-toc-h, .dc-sec h2, .dc-sec h2 i { font-weight: 700; }
.i-hero h1 { font-family: var(--f-hd); }

/* Кириллица прелоадера — Inter, цифры остаются Rajdhani. */
.pl { font-family: Rajdhani, var(--f-ui); }

/* ---------------------------------------------------------- серый текст (§2.4)

   Три уровня: основной #ececf2, вторичный #a2a2b2, третичный #8a8a9a —
   4.8:1 даже на светлой плитке #1d1f26. Старые #5f6571 (--tx-3) и
   #6a6a7a (--al-tx3) давали 2.8–3.8:1. Старый --tx-2 (#8a909d) сведён ко
   вторичному: иначе второй и третий уровень старой темы слились бы в один
   цвет. Литералы серых ниже нормы в color заменены на var(--tx-3) на месте. */
:root { --tx-2: #a2a2b2; --tx-3: #8a8a9a; --al-tx3: #8a8a9a; }

/* Не текст — рамки, ручка переключателя, крестик поиска, иконки: прежние
   тона, чтобы они не посветлели вместе с текстом. */
.switch .track::after, input[type=search]::-webkit-search-cancel-button { background: #5f6571; }
.fq-chev { border-right-color: #5f6571; border-bottom-color: #5f6571; }
.faq-q summary:hover .fq-chev { border-color: #8a909d; }
a.adr-i { border-bottom-color: #5f6571; }
.r-bonus .bs-label { fill: #8a909d; }

/* Заблокированная награда пасса гасилась прозрачностью .55 целиком, и
   подпись «Второй скин до $5» падала до 3.7:1. Игрок читает, что получит,
   поэтому гасим только картинку, а подпись остаётся полной яркости. */
.bpp-lv.locked .bpp-lv-b { opacity: 1; }
.bpp-lv.locked .bpp-lv-b > :not(.bpp-lv-bt) { opacity: .55; }

/* ---------------------------------------------------------- шкала (§2.1)

   Роли текста. Пол — 11 px только у служебной меты на десктопе, на
   телефоне всё от 12. Брейкпоинт — как у оболочки, 880. */
:root {
  --fs-micro: 11px; --fs-cap: 12px; --fs-label: 13px; --fs-ui: 14px; --fs-body: 15px;
  --fs-block: 14px;
}
@media (max-width: 880px) { :root { --fs-micro: 12px; --fs-block: 13px; } }

/* ---------------------------------------------------------- регистр (§2.2)

   Капс — только у заголовков блоков, главных кнопок, бренда и декора.
   Строки в исходнике обычным регистром, капс даёт CSS. Разрядка уходит
   вместе с капсом, иначе строчные разъезжаются.

   Обычный регистр: подписи полей, чипы, табы, шапки таблиц, статусы,
   бейджи, пункты шапки, второстепенные кнопки. Селекторы — те же, что у
   правил, дававших капс (сняты через DevTools), поэтому побеждают их при
   равной специфичности. */
.tb-bal .k, .tb-link, table.tbl th, .upa-dial .ring-sub,
.upa-prow .preset-tag, .upa-cash .cl-k, .rbp-lbl, .ra-chip-tx small, .ra-status,
.lba-timer small, .lba-th, .bpp-about, .bpp-timer small, .bpp-week-tx small:first-child,
.bpp-ready-tx small, .bpp-stat-tx small, .bpp-mq-tx small:first-child, .sta-k,
.pra-bal-k, .pra-stat > span, .pra-best-h > span:first-child, .pra-link-k, .pra-best-k,
.bpp-pick, .cs-drop-tx .cs-drop-w, .bpp-task-kick b, .prc-fold, .pk-tab, .pk-lbl,
.pk-feed-head, .mw-stat small, .sb-stat small, .mw-card-h, .sb-card-h, .mw-tbl th,
.sb-tbl th, .auto-k, .wdr-cell small, .wdr-btn, .mw-cash-tx b, .sb-cash-tx b {
  text-transform: none; letter-spacing: 0;
}
/* Бейджи и чипы, где капс был набран в строке: строка стала обычной,
   разрядку убираем. */
.bpp-go, .bpp-promo small, .pcb-st, .wp-cat, .ss-cat, .rbp-q, .item-p, .bp-tab { letter-spacing: 0; }

/* Заголовок блока или панели: одна роль на весь сайт. Крупные заголовки
   разделов (полки кейсов, «Лидерборд») и герои — своими размерами. */
.card h3, .i-h2, .dc-toc-h, .cs-feed-k,
.upa-panel h3, .rbp-head h3, .ssa-head h3, .bba-head h3, .rat-head h3, .mna-h h3,
.bpp-tasks-h span, .bpp-cur-h span,
.pk-side-h, .mw-hist-t, .sb-hist-t, .bbl-head h3, .bb-head h3 {
  font-size: var(--fs-block); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
/* Узкие колонки — правая колонка колеса, таблица выигрышей поверх сцены
   Space Ball, кнопка заданий в сайдбаре. Капс от 13 px в них не
   помещается («Награды на следующем уровне» вставало в три строки), а
   мельче 13 капс запрещён (§2.2), поэтому заголовок здесь обычным
   регистром, 13 px. Три заголовка колеса — «Дроп дня», «Уровни колеса»,
   «Награды на следующем уровне» — были тремя стилями (оранжевый 700 и два
   серых 600), теперь одним. */
.wha-tiers > .wha-tiers-h, .wha-rw > .wha-rw-h, .wdr-h, .wha-board-in .wha-tiers-h,
.sb-table-h, .bps-head, .quests-head {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0; text-transform: none;
}
.wha-tiers > .wha-tiers-h, .wha-rw > .wha-rw-h, .wdr-h { color: #ffa838; }
/* «Уровень 26» рядом с заголовком — значение, а не заголовок. */
.wha-rw-h > b { text-transform: none; letter-spacing: 0; }

/* Главная кнопка панели — капсом во всех состояниях. */
.rbp-main, .bp-main, .upa-go, .wha-cta > .wha-btn, .pk-go, .mw-go-tx b, .sb-go-tx b,
.pra-dep, .pra-wd, .bpp-claim, .pcb-join-b > button, .pra-empty-b > button.go, .btn.big {
  text-transform: uppercase; letter-spacing: .04em;
}

/* ---------------------------------------------------------- пол кегля (§2.3)

   Всё, что нужно прочитать, — не мельче 12 px; 11 px — только служебная
   мета на десктопе (--fs-micro). Селекторы и @media/@container — те же, что
   у правил, которые давали мелкий кегль (сняты через DevTools), чтобы не
   задеть другие ширины. Исключения: рисунок колеса, буквы-аватары,
   глифы-иконки, теги вагонов Milky Way (не мельче 10). */

/* подписи и пояснения — 12 */
.rbp-a small, .ra-chip-tx small, .bba-n, .rat-head > span, .mna-h .mna-sub, .ssa-cnt,
.wha-tile > .wha-tile-l, .bpp-kicker span,
.bpp-tasks-h small, .bpp-week-tx small:first-child, .bpp-week-tx small:last-child,
.bpp-ready-tx small, .bpp-stat-tx small, .bpp-stat-tx small.n, .bpp-skin-cap, .bpp-lv-bt,
.bpp-go, .bpp-mq-tx small.n, .bpp-pick, .pra-meta, .pra-xp small, .pra-bal-p, .pra-stat > span,
.pra-best-tags > span, .pra-link-h > small, .pra-hist-t > small, .bbl-live,
.wha-board-in .wha-tiers-h > em, .wha-board-in .wha-tier, .wha-board-in .wha-tier > small,
.wha-board-in .wha-rw-h > b, .pk-feed-head, .mw-stat small, .sb-stat small,
.mw-bal, .mw-maxwin, .sb-bal, .mw-skins-n, .sb-skins-n, .mw-tbl th, .sb-tbl th, .mw-who em, .sb-who em,
.mw-prog-n, .sb-prog-n, .wdr-h small, .wdr-cell small, .wdr-cell i, .hl-topic span,
.dc-upd, .frtp-tbl td small {
  font-size: var(--fs-cap);
}
/* условия заданий пасса переносятся — межстрочный не меньше 1.4 */
.bpp-task-kick, .bpp-task-kick b { font-size: var(--fs-cap); line-height: 1.4; }
/* счётчики и номера — мета: 11 на десктопе, 12 на телефоне */
/* подписи под текстом кнопок Milky Way и Space Ball («ставка $1.0 · ×1.08») —
   тоже мета: в 12 px на 2560 обрезались многоточием */
.bpp-task-row small, .bpp-task-wait, .dc-sec h2 i, .mna-my-row > span:nth-child(2),
.mw-go-tx small, .sb-go-tx small, .mw-cash-tx small, .sb-cash-tx small,
.mw-cash:disabled .mw-cash-tx small, .sb-cash:disabled .sb-cash-tx small {
  font-size: var(--fs-micro);
}
.mw-stat b i, .sb-stat b i { font-size: max(var(--fs-micro), .7em); }
/* подписи полей — 13 */
.mw-card-h, .sb-card-h, .auto-k, .pk-lbl { font-size: var(--fs-label); }
/* тяжелее 700 при 13 px и меньше не бывает (§2.1) */
.mw-skins-n, .sb-skins-n, .bpp-skin-cap, .wha-board-in .wha-tier > b, .wha-tier > b { font-weight: 700; }
/* «+1» и «из 3» на плитках пасса: метке нужно место под 12 px */
.bpp-lv-more { min-width: 18px; font-size: var(--fs-cap); line-height: 18px; }
/* Подпись бонуса на плитке пасса в 12 px обрезалась многоточием на
   первом слове — даём ей две строки. */
.bpp-lv-bt {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
}
/* Дни дропа в 12 px шире ячейки: колонки 1fr растягивались по самому
   широкому содержимому, и седьмой день уезжал за край. minmax(0, 1fr)
   держит семь равных колонок, «День» и номер встают в две строки. */
.wdr-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wdr-cell small { line-height: 1.1; text-align: center; }
/* кегли от ширины — пол поднят, рост тот же */
.lba-sub { font-size: max(var(--fs-cap), .9cqw); }
.lba-timer small { font-size: max(var(--fs-cap), .68cqw); }
.pl-status, .pl-col span { font-size: clamp(var(--fs-cap), 1.1vw, 14px); }
/* «Честность»: пояснения к таблице и шапка, строки не ниже 36 px (аудит) */
#page-fair .help { font-size: var(--fs-cap); line-height: 1.5; }
#page-fair table.tbl th { font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0; }
#page-fair table.tbl tr { height: 36px; }

@media (min-width: 881px) {
  .upa-dial .ring-sub { font-size: max(var(--fs-cap), calc(var(--upa-ring) * .04)); }
  .cs-drop-tx .cs-drop-w { font-size: var(--fs-cap); }
}
@media (max-width: 880px) {
  .cs-shelf-note, .ra-status, .lba-mhead > div > span, .pra-best-k, .wha-intro > .wha-kicker,
  .bpp-stat-tx small, .bpp-stat-tx small.n, .mw-online { font-size: var(--fs-cap); }
}
@media (max-width: 640px) {
  #page-mines .rbp .rbp-lbl { font-size: var(--fs-label); }
  #page-mines .mna-opt small, #page-mines .mna-step small { font-size: var(--fs-cap); }
}
@container mw (max-width: 560px) { .mw-stat small { font-size: var(--fs-cap); } }
@container sb (max-width: 699px) { .sb-row, .sb-row b { font-size: var(--fs-cap); } }
@container sb (max-width: 420px) { .sb-stat small { font-size: var(--fs-cap); } }

/* ---------------------------------------------------------- начертания (§2.1)

   800–900 — только от 24 px: герои, бренд и табло на сценах (HUD Milky Way и
   Space Ball, теги вагонов). Остальной текст мельче 24 px — не тяжелее 700.
   <b> внутри текста 600 браузер делает «bolder», то есть 900, — тоже 700. */
.mw-bal b, .mw-maxwin b, .mw-amt input, .mw-q, .mw-go-tx b, .mw-cash-tx b,
.mw-tbl .c-mult b, .mw-tbl .c-win b, .mw-howb-tx h2, .mw-howb-steps b,
.sb-row b, .sb-bal b, .sb-amt input, .sb-chip, .sb-go-tx b, .sb-cash-tx b,
.sb-tbl .c-mult b, .sb-tbl .c-win b, .sb-howb-tx h2, .sb-howb-steps b,
.cs-feed .online b, .pk-maxwin b { font-weight: 700; }
@media (max-width: 880px) { .tb-mid .page-title { font-weight: 700; } }

/* ---------------------------------------------------------- с реальными данными

   Нашлось при проверке на общей базе (16.10.2026): в локальной базе нет
   игроков на пьедестале, «горячих» и MEGA-кейсов, «Кейса недели». Бейджи и
   подписи — обычным регистром и не мельче пола; литералы MEGA и TOP
   остаются как в строке (латиница — ТЗ по текстам). */
.cs-card-hot, .cs-card-tag { font-size: var(--fs-cap); text-transform: none; letter-spacing: 0; }
.cs-week-perk { text-transform: none; letter-spacing: 0; }
.lba-p-k { font-size: max(var(--fs-cap), .64cqw); text-transform: none; letter-spacing: 0; }
.lba-p-prize > small { font-size: max(var(--fs-cap), .75cqw); text-transform: none; letter-spacing: 0; }
.lba-p-pts b small, .lba-p-prize b small { font-size: max(var(--fs-micro), 60%); }
@media (max-width: 880px) {
  .lba-mr-pz span { font-size: var(--fs-cap); text-transform: none; letter-spacing: 0; }
  .cs-week-perk { font-size: var(--fs-cap); }
}

/* Аудит №5: тап-таргеты на телефоне ≥40px. Чипы ставки и шаги автовывода на
   узком экране были 30px — мелко для пальца. Высоту растим только на мобильном
   (десктопную плотность и cqw-шрифты не трогаем). min-height уживается с
   заданной height:30px: элемент становится ровно 40px. */
@media (max-width: 640px) {
  .rbp-q, .pk-chip, .pk-seg, .bp-auto-step, .rbp-a { min-height: 40px; }
}

/* ---------------------------------------------------------- доделки по аудиту №5

   17.10.2026. Замер был чист, но аудит №5 нашёл то, чего счётчик не видит. */

/* Экраны лесенки мин стали русскими («Игра», «Взято», «Мина», «Бум»), а в
   Rajdhani кириллицы нет — надписи падали в системный monospace. Кириллица
   теперь Inter, цифры остаются Rajdhani. Капс — табло сцены, его даёт CSS. */
.mna-scr b { font-family: Rajdhani, var(--f-ui); text-transform: uppercase; }

/* «Открой ячейку» на месте главной кнопки мин — подсказка, а не действие:
   обычный регистр, 14 px, 600. Класс состояния был «hint» и совпадал с
   глобальным .hint — кружком «?» 16×16 px: кнопка сжималась в узкую
   пилюлю с текстом в две строки, отсюда «сломанная кнопка» в аудитах.
   Состояние переименовано в «tip» (mines.js). */
.rbp .rbp-main.tip, #page-mines .rbp .rbp-main.tip {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-ui); font-weight: 600;
}

/* Переключатель сложности Milky Way: «Сложно» и «Средне» обрезались
   многоточием — колонки на 1440 около 62 px. Внутренний отступ меньше и
   600 вместо 700: слово встаёт целиком, кегль тот же. */
.mw-segs button { padding: 0 2px; font-weight: 600; }

/* Дни дропа: номер дня крупно, слово «День» ушло из ячейки. */
.wdr-cell small { font: 700 var(--fs-ui)/1 var(--f-hd); color: #8d8d9c; }
.wdr-cell.done small { color: #8ff0b8; }
.wdr-cell.cur small { color: #ffa838; }

/* ============================================================ ALIVE · АУДИТ №3

   ТЗ_ПРАВКИ_АУДИТА_3.md: правки аудита №3, кроме типографики (она — в
   секции «ALIVE · ТИПОГРАФИКА»). Подразделы — по этапам ТЗ. Секция в конце
   файла: при равной специфичности побеждает последнее правило. */

/* ---------------------------------------------------------- 1.1 нули

   «0.0 Банк / 0 Игроки» и пустые таблицы читались как «сайт мёртв».
   Нулевую плашку прячем, но место держим — без рывка вёрстки. */
.ra-chip.is-zero { visibility: hidden; }
.bbl.is-empty .bbl-n, .bbl.is-empty .bbl-bar { visibility: hidden; }

/* Пустые состояния одного вида: маскот, короткий заголовок, при нужде одно
   действие. Витрину не трогаем — решение владельца. */
.rat-empty, .bbl-empty, .pk-empty, .mna-empty, .lba-empty, .mw-empty, .sb-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px 14px; text-align: center; color: var(--tx-2);
  font: 500 var(--fs-label)/1.4 var(--f-ui); letter-spacing: 0; text-transform: none;
}
.rat-empty::before, .bbl-empty::before, .pk-empty::before, .mna-empty::before,
.lba-empty::before, .mw-empty::before, .sb-empty::before {
  content: ''; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: url(/assets/mascots/logo-mark.webp) center / 64% no-repeat,
              radial-gradient(circle at 40% 35%, rgba(255, 176, 103, .22), rgba(255, 122, 24, .06) 70%);
  box-shadow: 0 0 18px rgba(255, 122, 24, .18);
}

/* ---------------------------------------------------------- 1.3 полоса для гостя

   Одна фраза и две кнопки над витриной — только гостю. Сама витрина не
   меняется. Крестик прячет полосу насовсем (localStorage). */
.gs-strip { display: none; }
body.guest .gs-strip:not([hidden]) {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 18px;
  padding: 12px 14px 12px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(90deg, rgba(255, 122, 24, .12), rgba(255, 255, 255, .02) 60%);
}
.gs-tx { flex: 1 1 260px; min-width: 0; }
.gs-tx b { display: block; color: var(--al-tx); font: 700 var(--fs-body)/1.3 var(--f-hd); }
.gs-tx span { display: block; margin-top: 2px; color: var(--tx-2); font: 400 var(--fs-label)/1.4 var(--f-ui); }
.gs-in, .gs-how {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px;
  border-radius: 10px; font: 700 var(--fs-label)/1 var(--f-hd); text-decoration: none; cursor: pointer;
}
.gs-in { border: 0; color: #180a00; background: linear-gradient(180deg, #ff8c2e, #ff6a00); }
.gs-how { border: 1px solid rgba(255, 168, 56, .55); color: #ffb067; background: transparent; }
.gs-x {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: transparent;
  color: var(--tx-3); font: 400 20px/1 var(--f-ui); cursor: pointer;
}
.gs-x:hover { color: var(--al-tx); background: rgba(255, 255, 255, .05); }

/* ---------------------------------------------------------- 1.5 18+ */
.lga-age {
  display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 0; cursor: pointer;
  color: var(--tx-2); font: 400 var(--fs-label)/1.4 var(--f-ui);
}
.lga-age input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: #ff7a18; }
.lga-age a { color: #ffb067; }
.lga-age.bad { color: #ff8a96; }
#modal:has(> .age-box) { max-width: 480px; }
.age-box { display: grid; gap: 14px; }
.age-box p { margin: 0; color: var(--tx-2); font: 400 var(--fs-ui)/1.5 var(--f-ui); }
.age-row { display: flex; gap: 10px; flex-wrap: wrap; }
.age-row button { min-height: 44px; }

/* ---------------------------------------------------------- 2.2 «Как играть?» у громкости

   Кнопка в полосе со звуком внизу сцены (mountHowto opts.slot): у Ракеты
   вверху лента множителей, у мин — экраны лесенки. Карточка — вверх. */
.howto-btn.in-slot { position: relative; top: auto; right: auto; pointer-events: auto; }
.howto-btn.in-slot .howto-pop { top: auto; bottom: calc(100% + 10px); }
.howto-btn.in-slot .howto-pop::before { top: auto; bottom: -6px; transform: rotate(225deg); }

/* ---------------------------------------------------------- 2.3 автовывод Ракеты: поле и переключатель */
.rbp-auto-tg {
  display: flex; align-items: center; gap: 8px; height: 100%; min-height: 40px; padding: 0 12px; margin: 0;
  border: 0; border-left: 1px solid rgba(255, 255, 255, .06); background: transparent; cursor: pointer;
  color: #a2a2b2; font: 600 var(--fs-label)/1 var(--f-ui);
}
.rbp-auto-tg > span { min-width: 30px; text-align: right; }
.rbp-auto-tg > i {
  position: relative; width: 32px; height: 18px; flex: none; border-radius: 9px;
  background: rgba(255, 255, 255, .14); transition: background .15s;
}
.rbp-auto-tg > i::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #ececf2; transition: transform .15s;
}
.rbp-auto-tg.on { color: #ececf2; }
.rbp-auto-tg.on > i { background: #ff7a18; }
.rbp-auto-tg.on > i::after { transform: translateX(14px); }
.rbp-auto-tg:focus-visible { outline: 2px solid rgba(255, 168, 56, .6); outline-offset: -2px; }
.rbp-auto-tg:disabled { cursor: default; opacity: .6; }
.rbp-auto:not(.on) .rbp-auto-in > span { opacity: .5; }
.rbp-auto-in input::placeholder { font: 500 var(--fs-label)/1 var(--f-ui); color: var(--tx-3); }

/* ---------------------------------------------------------- 2.4 «Поставить скинами»

   Ничего не выбрано — вместо подписи «Скины в ставке 0/5 —» и пунктира
   одна строка-ссылка; список с подписью — когда скины выбраны. */
.rbp-field.is-none > .rbp-lbl { display: none; }
.rbp-field.is-none .rbp-add {
  height: 40px; padding: 0 2px; gap: 10px; justify-content: flex-start; border: 0; background: none;
  color: #c4c4d0; font: 600 var(--fs-label)/1 var(--f-ui);
}
.rbp-field.is-none .rbp-add > span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 255, 255, .06); color: #ececf2; font-size: 16px;
}
.rbp-field.is-none .rbp-add:hover:not(:disabled) { background: none; color: #fff; }
.rbp-field.is-none .rbp-add:hover:not(:disabled) > span { background: rgba(255, 122, 24, .18); color: #ffa838; }
.rbp[data-game="mines"] .rbp-field.is-none .rbp-list { height: auto; }
@media (max-width: 640px) {
  #page-mines .rbp > .rbp-field.is-none { justify-content: center; }
  #page-mines .rbp[data-game="mines"] .rbp-field.is-none .rbp-list { height: auto; overflow: visible; }
}

/* ---------------------------------------------------------- 2.6 мины: одна раскладка до 1700 px

   Панель ставки и «Последние игры» под доской на любой ширине до 1700 px —
   и с лентой «Сейчас выпало», и без неё (было: стопкой до 1180, поверх
   доски 1181–1399, снова стопкой с лентой 1400–1679). Правила — копия
   блока «@media (max-width: 1180px)» секции «МИННОЕ ПОЛЕ». */
@media (min-width: 1181px) and (max-width: 1700px) {
  .mna-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .mna-board { grid-column: 1 / -1; }
  .mna-stage > .rbp, .mna-recent { position: static; width: auto; height: auto; }
  .mna-recent { min-height: 300px; max-height: 540px; }
  .mna-bottom { left: auto; right: 16px; }
  .mna-row2 { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---------------------------------------------------------- 2.7 «Мин в шаге»: подпись */
.mna-opts-sub {
  margin-top: -3px; color: var(--tx-2); font: 500 var(--fs-cap)/1.3 var(--f-ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mna-opts-sub:empty { display: none; }
@media (max-width: 640px) {
  #page-mines .mna-opts-sub { margin-top: -2px; white-space: normal; }
}

/* ---------------------------------------------------------- 2.8 Plinko: одна таблица

   Колонки «Последние падения» справа больше нет: сцена забирает её место,
   «Последние игры» — снизу. Брейкпоинты те же (@container pkpage). */
.pk { grid-template-columns: 320px minmax(0, 1fr); grid-template-areas: "panel stage" "recent recent"; }
@container pkpage (max-width: 1400px) {
  .pk { grid-template-columns: 290px minmax(0, 1fr); }
}
@container pkpage (max-width: 1080px) {
  .pk { grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "panel stage" "recent recent"; }
}
@container pkpage (max-width: 640px) {
  .pk { grid-template-columns: 1fr; grid-template-areas: "stage" "panel" "recent"; }
}
/* Высоту ряда задавали панель и лента; без ленты доска осталась бы ростом с
   панель. Сцене — своя высота по окну, панель не тянется за ней. Именно
   height, а не min-height: сцена — контейнер размеров (container-type:
   size), и высоту, набранную одним min-height, кадр в cqh не видит —
   доска схлопывалась в 0×0, а шарики летали по квадрату 200×200. */
@container pkpage (min-width: 1081px) {
  .pk-stage { height: clamp(520px, calc(100vh - 170px), 720px); }
  .pk-panel { align-self: start; }
}

/* ---------------------------------------------------------- 2.9 автозабор словами

   «после 2» шире цифры: на телефоне колонки по содержимому, а не равные. */
@media (max-width: 880px) {
  .auto-segs { grid-auto-columns: auto; }
}

/* ---------------------------------------------------------- 3.1 тап-цели на телефоне

   Зона нажатия ≥ 40 px, у «−/+» суммы ставки — 44 (замер tools/tap_audit.py).
   Расширяем зону, а не рисунок: прозрачный ::after с отрицательным inset
   (он считается от внутреннего края рамки — у элемента с рамкой на её ширину больше),
   у кружка «?» — прозрачная рамка (его ::before/::after заняты облаком), у
   ползунков — внутренний отступ с фоном по content-box. Где соседи ближе,
   чем нужно зоне, шаг ряда больше: подвал, оглавление условий, уровни
   колеса, автозабор (подпись над кнопками). */
@media (max-width: 880px) {
  #tbBack, #tbBurger, #tbDep, #tbLogo, #csMSort, .sndc-btn, .ra-hx, .bbl-tab, .pk-tab, .mna-opt,
  .mw-q, .mw-segs button, .mw-tabs button, .sb-tabs button, .auto-segs button, .mw-view,
  .mw-hist-re, .sb-hist-re, .mw-howb-more, .sb-howb-more, .cur-b, .rbp-step, .sb-pm, #upaFast,
  .rbp-add, .wdr-btn, .ft-link, .fb-links a, .frtp-d summary { position: relative; }
  #tbBack::after, #tbBurger::after, #tbDep::after, #tbLogo::after, #csMSort::after, .sndc-btn::after,
  .howto-btn::after, .ra-hx::after, .bbl-tab::after, .pk-tab::after, .mna-opt::after, .mw-q::after,
  .mw-segs button::after, .mw-tabs button::after, .sb-tabs button::after, .auto-segs button::after,
  .mw-view::after, .mw-hist-re::after, .sb-hist-re::after, .mw-howb-more::after, .sb-howb-more::after,
  .cur-b::after, .rbp-step::after, .sb-pm::after, #upaFast::after, .wdr-btn::after, .ft-link::after,
  .fb-links a::after, .frtp-d summary::after, .rbp-add::before {
    content: ''; position: absolute; inset: -3px;
  }
  #tbDep::after { inset: -7px; }
  #tbLogo::after { inset: -12px 0; }
  .sndc-btn::after { inset: -9px; }
  .howto-btn::after { inset: -5px; }
  .bbl-tab::after { inset: -6px -2px; }
  .pk-tab::after { inset: -6px -3px; }
  .mna-opt::after { inset: -3px -2px; }
  .mw-q { min-width: 38px; }
  .mw-q::after { inset: 0 -3px; }
  .mw-segs button::after, .mw-tabs button::after, .sb-tabs button::after { inset: -4px 0; }
  .mw-segs button { overflow: visible; }
  .auto-segs button::after { inset: -6px 0; }
  .mw-view::after { inset: -5px; }
  .mw-howb-more::after { inset: -15px 0; }
  .sb-howb-more::after { inset: -13px 0; }
  .cur-b::after { inset: -6px 0; }
  .rbp-step::after { inset: -4px 0; }
  .sb-pm::after { inset: -3px -4px; }
  #upaFast::after { inset: -6px; }
  .rbp-add::before { inset: -3px 0; }
  .wdr-btn::after { inset: -4px 0; }
  .frtp-d summary::after { inset: -11px -12px; }
  .pra-empty-b .go { min-height: 42px; }   /* overflow: hidden у кнопки срезал бы ::after */
  /* Кабинет: уровень, ссылка Steam, «выйти», «отправить ещё раз». */
  #meLvl, #meSteamId, #btnSignOut, #meMailResend { position: relative; }
  #meLvl::after, #meSteamId::after, #btnSignOut::after, #meMailResend::after { content: ''; position: absolute; }
  #meLvl::after { inset: -8px -5px; }
  #meSteamId::after, #meMailResend::after { inset: -14px 0; }
  #btnSignOut::after { inset: -10px 0; }

  /* Лента прошлых множителей Ракеты: клик открывает раунд (развилка 7).
     Полосе — запас по высоте, иначе overflow: hidden срежет зону. */
  .ra-hist { padding: 9px 0; margin-top: -9px; }
  .ra-hx::after { inset: -9px -3px; }

  /* Подвал: шаг строк 42 px, зона на всю высоту шага. */
  .ft-col ul { gap: 22px; }
  .ft-link::after { inset: -11px 0; }
  .fb-links { row-gap: 22px; }
  .fb-links a::after { inset: -11px 0; }

  /* Ползунки громкости и суммы апгрейда: зона по высоте за счёт отступа. */
  .sndc .sndc-vol { box-sizing: content-box; padding: 12px 0; margin: -12px 0; }
  #page-upgrade .upa-cash input[type=range] {
    box-sizing: content-box; padding: 18px 0; margin: -18px 0; background-clip: content-box;
  }

  /* Кружок «?»: рисунок 16 px, зона 42 — прозрачная рамка 13 px, кольцо тенью. */
  .hint, .rbp-lbl .hint, .pk-lbl .hint, .mw-card-h .hint, .sb-card-h .hint, .sb-table-h .hint,
  .pra-stat .hint, .wha-tiers-h .hint {
    box-sizing: content-box; border: 13px solid transparent; background-clip: padding-box;
    margin: -13px -13px -13px -7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  }
  .pra-xp small .hint, .pra-bal-p .hint { box-sizing: content-box; border: 14px solid transparent; background-clip: padding-box;
    margin: -14px -14px -14px -11px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  .hint:hover, .hint:focus-visible, .hint.on { border-color: transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px #ffa838; }

  /* Цели Space Ball: кольца рисуют ::before/::after от рамки внутрь —
     прозрачная рамка 5 px расширяет зону, не трогая колец. */
  .sb-t { box-sizing: content-box; border: 6px solid transparent; margin: -6px; }

  /* Строки, где соседи вплотную, и поля: 42 px (зона ровно в 40 браузер
     засчитывает на пиксель меньше — округление). */
  .dc-link { display: flex; align-items: center; min-height: 42px; }
  .wha-tiers .wha-tier, .wha-board-in .wha-tier { min-height: 42px; }
  .cs-groups button { min-height: 42px; }
  .ssa .ssa-q { height: 42px; }
  #page-fair .fld input, #page-fair .btn { min-height: 42px; }
  #page-upgrade #betAmount { min-height: 42px; }
  #page-mines .rbp .rbp-in input { height: 40px; }
  .mna-my-row { min-height: 42px; }
  .pk-sel { height: 42px; }

  /* Автозабор и автоигра: подпись строкой выше, кнопки — на всю ширину. */
  .auto-grp { flex-wrap: wrap; row-gap: 6px; }
  .auto-grp > .auto-k { flex: 1 1 100%; }
}

/* ---------------------------------------------------------- 3.2 «Открой ячейку» — подсказка

   Нажатий она и так не принимала: теперь и не похожа на кнопку — без фона и
   рамки, серый текст и стрелка вверх, к полю. */
.rbp .rbp-main.tip, #page-mines .rbp .rbp-main.tip {
  background: none; border-color: transparent; box-shadow: none; color: var(--tx-2);
}
.rbp .rbp-main.tip::before { content: '↑'; margin-right: 8px; font-weight: 700; color: #ececf2; }

/* ---------------------------------------------------------- 4.1 апгрейд: «Выбери цель» в кольце

   До выбора цели (или ставки) вместо «0.00%» — что сделать (Ring.set
   empty). Подсказка, а не число: нейтральным цветом и мельче цифр. */
.ring.is-empty .ring-sub { display: none; }
#page-upgrade .upa-dial .ring.is-empty .ring-val {
  font-size: clamp(18px, calc(var(--upa-ring, 320px) * .075), 26px); letter-spacing: 0; white-space: nowrap;
  color: #ececf2; text-shadow: none; font-variant-numeric: normal;
}

/* ---------------------------------------------------------- 4.2 колесо: уровни под колесом

   «Уровни колеса» переехали из правой колонки под кнопку «Крутить колесо»
   (index.html): колонка с дропом, уровнями и наградами упиралась в низ
   сцены. На десктопе — две колонки строк, окно с призами уровня — над
   строкой; на телефоне — список под кнопкой, как и был блок. */
.wha-center > .wha-tiers {
  width: 100%; max-width: 400px; box-sizing: border-box; margin-top: 14px; padding: 10px 12px 8px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(10, 10, 14, .74);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 2px;
}
@media (min-width: 881px) {
  .wha-center > .wha-tiers > .wha-tiers-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .wha-center > .wha-tiers.collapsed > .wha-tiers-list { display: none; }
  .wha-center .wha-tier > .wha-tier-pop { right: auto; left: 0; top: auto; bottom: calc(100% + 8px); transform: none; }
}

/* ---------------------------------------------------------- 4.3 Battle Pass

   Полоса уровня: главное число «Уровень N из 50» крупно, задания и награды —
   одной подписью вместо трёх чипов (место .bpp-stats в сетке плиты то же).
   Условия задания — под «?» у названия (battlepass.js taskTip). */
.bpp-cur-h .bpp-lvl {
  font: 700 20px/1.2 var(--f-hd); letter-spacing: .02em; text-transform: none; color: #ececf2;
}
.bpp-cur-h .bpp-lvl b { color: #ffa838; font-variant-numeric: tabular-nums; }
.bpp-stats.bpp-sub {
  display: block; overflow: visible; padding: 0; color: var(--tx-2); font: 500 var(--fs-label)/1.4 var(--f-ui);
}
.bpp-task-top b .hint, .bpp-week-tx b .hint { vertical-align: 1px; }
@media (max-width: 880px) {
  .bpp-cur-h .bpp-lvl { font-size: 17px; }
}

/* ---------------------------------------------------------- 4.5 кабинет

   «Связь и безопасность» — один блок (index.html .pra-sec): почта, Telegram,
   Trade URL строками; слева подпись, статус и пояснение, справа одно
   действие. Было три карточки, и Telegram один стоял на новой строке. */
@media (min-width: 881px) {
  .pra-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
}
.pra-sec {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 20px 4px;
  border-radius: var(--r-card); border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(160deg, rgba(20, 20, 28, .7), rgba(12, 12, 17, .65) 60%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pra-sec-h { margin: 0 0 4px; font: 700 var(--fs-body)/1.3 var(--f-hd); color: #ececf2; }
.pra-sec > .pra-link {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 6px 16px;
  padding: 14px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .07); border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
}
.pra-sec > .pra-link:first-of-type { border-top: 0; }
.pra-sec > .pra-link::before, .pra-sec .pra-hatch, .pra-sec .pra-link-line, .pra-sec .pra-link-glow { display: none; }
.pra-sec .pra-link-h > b { font-size: var(--fs-ui); color: var(--dot); }
.pra-sec .pra-link-f { margin-top: 0; }
.pra-sec .pra-link-again { grid-column: 2; margin-top: 0; justify-self: start; }
@media (max-width: 880px) {
  .pra-sec { padding: 14px 14px 2px; }
  .pra-sec > .pra-link { grid-template-columns: minmax(0, 1fr); }
  .pra-sec .pra-link-again { grid-column: 1; }
}

/* «Как вывести: 2 шага» в плитке «Выведено» и окно с шагами. */
.pra-howto {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: #ffb067; font: 700 var(--fs-ui)/1.3 var(--f-hd);
  text-decoration: underline; text-decoration-color: rgba(255, 176, 103, .4); text-underline-offset: 3px;
}
.pra-howto:hover { color: #ffd27a; }
#modal:has(> .wdh) { max-width: 520px; }
.wdh { display: grid; gap: 14px; }
.wdh h3 { margin: 0; font: 700 18px/1.2 var(--f-hd); color: #fff; }
.wdh-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: wdh; }
.wdh-steps li {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, .04); counter-increment: wdh;
}
.wdh-steps li::before {
  content: counter(wdh); grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #ececf2; font: 700 var(--fs-label)/1 var(--f-hd);
}
.wdh-steps li.ok::before { content: '✓'; background: rgba(53, 208, 127, .18); color: #5ee9a0; }
.wdh-steps b { grid-column: 2; color: #ececf2; font: 600 var(--fs-ui)/1.3 var(--f-ui); }
.wdh-steps span { grid-column: 2; color: var(--tx-2); font: 400 var(--fs-label)/1.4 var(--f-ui); }
.wdh-steps i, .wdh-steps .wdh-go { grid-column: 3; grid-row: 1 / 3; }
.wdh-steps i { font: 600 var(--fs-label)/1 var(--f-ui); font-style: normal; color: #5ee9a0; }
.wdh-go {
  min-height: 40px; padding: 0 14px; border-radius: var(--r-ctl); cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(255, 168, 56, .5); background: transparent; color: #ffb067; font: 700 var(--fs-label)/1 var(--f-hd);
}
.wdh-go:hover { background: rgba(255, 122, 24, .12); }
.wdh-tg { margin: 0; color: var(--tx-2); font: 400 var(--fs-label)/1.5 var(--f-ui); }
.wdh-tg .wdh-go { margin-left: 6px; min-height: 34px; vertical-align: middle; }

/* ---------------------------------------------------------- 4.6 первый вход

   Окно гостю на главной (guest.js onboard): три шага списком «Как вывести»
   (.wdh-steps) и строка про монету — это деньги, а не баллы. */
#modal:has(> .onb) { max-width: 520px; }
.onb { display: grid; gap: 14px; }
.onb h3 { margin: 0; font: 700 18px/1.2 var(--f-hd); color: #fff; }
.onb-coin {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: var(--r-ctl);
  background: rgba(255, 176, 103, .08); color: #ececf2; font: 500 var(--fs-label)/1.45 var(--f-ui);
}
.onb-coin > .coin { width: 20px; height: 20px; flex: none; }
.onb > .btn { justify-self: start; min-height: 44px; padding: 0 22px; }

/* ---------------------------------------------------------- 4.7 ссылка партнёра /r/<код>

   Полоса «Бонус от …» над витриной (partner.js paintRefStrip) — тот же вид,
   что у полосы гостя, но теплее: это подарок, а не справка. */
.rf-strip { display: none; }
body.guest .rf-strip:not([hidden]) {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px;
  padding: 12px 14px 12px 18px; border-radius: var(--r-card); border: 1px solid rgba(255, 168, 56, .35);
  background: linear-gradient(90deg, rgba(255, 122, 24, .22), rgba(255, 122, 24, .04) 70%);
}

/* Крестик окон «первый вход», «как вывести», «как играть» — в правом
   верхнем углу и зоной 40 px, а не строкой по центру над заголовком. */
.onb, .wdh, .howto-modal { position: relative; }
.onb > .modal-x, .wdh > .modal-x, .howto-modal > .modal-x {
  position: absolute; top: -8px; right: -8px; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
}
.onb > h3, .wdh > h3, .howto-modal > h3 { padding-right: 36px; }

/* ---------------------------------------------------------- 5 тексты

   «LIVE» → «В эфире» (развилка 10): разрядка была под латиницу капсом,
   строчным словом она читается по буквам. */
.bbl-live { letter-spacing: .01em; }

/* ---------------------------------------------------------- 6 вес

   Постер маскота колеса — кадр покоя с выбитым фоном, пока клип не дал
   первый кадр (wheelfx.js снимает класс). Страница пасса держит высоту
   экрана до прихода данных: иначе подвал стоял посреди экрана и уезжал
   вниз — сдвиг вёрстки 0.3–0.9 (CLS). */
.wha-hero-cv.poster { background: url(/assets/wheel/mascot-poster.webp) center / 100% 100% no-repeat; }
#page-battlepass.on { min-height: 100vh; }

/* ============================================================ ALIVE · АКЦЕНТЫ

   ТЗ_ПРАВКИ_АУДИТА_3.md, 2.1 и 2.5. Шкала акцентов на игровых страницах:
   заливка — одно главное действие на экране; контур — второе; остальное без
   цвета (серый фон, белый текст). Оранжевыми остаются главная кнопка,
   выбранный пункт меню, цифры множителя и состояния игры (следующий вагон,
   клетка хода, предметы в ставке). Радиусы — два: карточки 14, контролы 10;
   внутренние группы в панелях — без рамки, фон на полтона светлее.

   Перекрытия — теми же селекторами, что выигрывали (замер CDP 17.10):
   секция в конце файла, равная специфичность — побеждает она. Арт по
   макетам владельца не трогаем: плашки Space Ball (border-image), экраны и
   клетки мин, апгрейдер (макет 25.09). */
:root {
  --ac-line: rgba(255, 255, 255, .08);      /* рамка карточки в покое */
  --ac-line-2: rgba(255, 255, 255, .14);    /* пунктир «добавить», рамка вкладки */
  --ac-in: rgba(255, 255, 255, .05);        /* поле и чип внутри панели: на полтона светлее */
  --ac-in-2: rgba(255, 255, 255, .08);      /* то же при наведении */
  --ac-sel: rgba(255, 255, 255, .11);       /* выбранный чип / вкладка */
  --ac-sel-line: rgba(255, 255, 255, .26);
  --ac-focus: rgba(255, 140, 46, .75);      /* рамка поля в фокусе */
  --r-card: 14px;
  --r-ctl: 10px;
}

/* ---------------------------------------------------------- кружок «?»

   Был оранжевым на каждой подписи — седьмой акцент на панели Ракеты.
   В покое серый, при наведении и открытии — как раньше. */
.hint { background-color: rgba(255, 255, 255, .05); color: #a2a2b2; }
/* На телефоне рамка кружка прозрачная (зона 42 px, секция «АУДИТ №3», 3.1) — кольцо рисует тень. */
@media (min-width: 881px) { .hint { border-color: rgba(255, 255, 255, .22); } }

/* ---------------------------------------------------------- панель ставки (Ракета, мины) */
.rbp { border-color: var(--ac-line); border-radius: var(--r-card); }
.rbp-edge { border-radius: var(--r-card) var(--r-card) 0 0; opacity: .55; }
.mna-stage > .rbp { border-color: var(--ac-line); }
.rbp-step, .rbp-q { border-color: transparent; background: var(--ac-in); border-radius: var(--r-ctl); }
.rbp-step:hover:not(:disabled) { background: var(--ac-in-2); border-color: rgba(255, 122, 24, .4); }
.rbp-in { border-color: transparent; background: var(--ac-in); box-shadow: none; }
.rbp-in:focus-within { border-color: var(--ac-focus); }
.rbp .rbp-auto-in input { border-radius: 0; }
.rbp-auto { border-color: transparent; background: var(--ac-in); box-shadow: none; }
.rbp-auto:focus-within { border-color: var(--ac-focus); }
.rbp-add { border-color: var(--ac-line-2); background: transparent; }
.rbp-add > span { color: #ececf2; }
.rbp-more { border-color: var(--ac-line-2); color: #c4c4d0; border-radius: var(--r-ctl); }
.rbp-pick { border-radius: var(--r-ctl); }
.rbp-x { border-radius: 50%; }
.rbp-main { border-radius: var(--r-ctl); }

/* ---------------------------------------------------------- Ракета */
.ra-stage, .ra-box, .ra-readout { border-color: var(--ac-line); border-radius: var(--r-card); }
.ra-readout { border-color: rgba(255, 255, 255, .06); }
/* «Банк» — справка, не действие: рамка и значок серые, цифра остаётся тёплой. */
.ra-chip.bank { border-color: var(--ac-line); box-shadow: none; }
.ra-chip.bank .ra-chip-ic { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.bbl-tab { border-radius: var(--r-ctl); }
.bbl-tab.on { border-color: var(--ac-sel-line); background: var(--ac-sel); color: #fff; }
.ssa { border-color: var(--ac-line); border-radius: var(--r-card); }
.ssa .ssa-q { border-radius: var(--r-ctl); }

/* «Как играть?» — нейтральный контур, значок серый; оранжевый — при наведении. */
.howto-btn > svg { color: #a2a2b2; }
.howto-btn:hover > svg, .howto-btn:focus-visible > svg { color: #ffad32; }
.howto-steps b { background: rgba(255, 255, 255, .08); color: #ffb067; box-shadow: none; border-radius: var(--r-ctl); }

/* ---------------------------------------------------------- мины */
.mna-board, .mna-recent, .mna-my { border-color: var(--ac-line); border-radius: var(--r-card); }
.mna-tex { border-radius: var(--r-card); }
.mna-edge { border-radius: var(--r-card) var(--r-card) 0 0; opacity: .55; }
.mna-opt { border-color: transparent; background: var(--ac-in); }
.mna-opt.on { border-color: var(--ac-sel-line); background: var(--ac-sel); color: #fff; box-shadow: none; }
/* Строки списков — без рамки, фон светлее; своя игра — полоской слева. */
.mna-rw { border-color: transparent; background: rgba(255, 255, 255, .04); border-radius: var(--r-ctl); }
.mna-rw.me { border-color: transparent; background: rgba(255, 122, 24, .08); box-shadow: inset 3px 0 0 #ff7a18; }
.mna-my-row { border-color: transparent; background: rgba(255, 255, 255, .04); border-radius: var(--r-ctl); }
.mna-my-row:hover { border-color: transparent; background: rgba(255, 255, 255, .07); }

@media (max-width: 640px) {
  #page-mines .rbp > .mna-field-mines, #page-mines .rbp > .rbp-field:has(.rbp-list) {
    border-color: var(--ac-line); border-radius: var(--r-card);
  }
  #page-mines .mna-opt, #page-mines .rbp-add { border-radius: var(--r-ctl); }
  #page-mines .mna-stage::after { border-color: var(--ac-line); border-radius: var(--r-card); }
  #page-mines .rbp > .rbp-head h3 { border-color: var(--ac-line-2); background: rgba(255, 255, 255, .05); }
}

/* ---------------------------------------------------------- Plinko */
.pk-panel, .pk-recent { border-color: var(--ac-line); border-radius: var(--r-card); }
.pk-tabs { border-radius: var(--r-card); }
.pk-tab { border-radius: var(--r-ctl); }
.pk-tab.on { background: var(--ac-sel); color: #fff; }
.pk-amt-in { border-color: transparent; background: var(--ac-in); }
.pk-amt-in:focus-within { border-color: var(--ac-focus); }
.pk-amt-in input { border-radius: 0; }
.pk-amt-b, .pk-chip, .pk-seg { border-color: transparent; background: var(--ac-in); }
.pk-seg.on { border-color: var(--ac-sel-line); background: var(--ac-sel); color: #fff; box-shadow: none; }
.pk-go { border-radius: var(--r-ctl); }
.pk-sel { border-radius: var(--r-ctl); }

/* ---------------------------------------------------------- Milky Way и Space Ball

   Три поля — без рамок, фон на полтона светлее; «Прыгнуть»/«Ударить» —
   заливка (как было); «Забрать» — контур, подпись крупнее полей. */
.mw-card, .sb-card { border-color: transparent; background: linear-gradient(180deg, #1c1e24, #16171c); }
@media (min-width: 881px) { .mw-cash-tx b, .sb-cash-tx b { font-size: var(--fs-body); } }
.mw-stat.is-mult, .sb-stat.is-mult { border-color: rgba(255, 255, 255, .1); }
.mw-scene, .sb-scene, .mw-hist, .sb-hist, .sb-table { border-radius: var(--r-card); }
.mw-q, .mw-skins-add, .sb-pm, .sb-add, .mw-view { border-radius: var(--r-ctl); }
.mw-skins-add { border-color: var(--ac-line-2); color: #ececf2; }
.mw-segs, .mw-segs button { border-radius: var(--r-ctl); }
.mw-segs button.on { border-color: var(--ac-sel-line); box-shadow: none; }
.sb-add i { background: #3a3c45; color: #fff; box-shadow: 0 0 0 2px #121318; }
.mw-howb-bg, .sb-howb { border-color: var(--ac-line); }
.mw-howb, .sb-howb { border-radius: var(--r-card); }
.mw-howb-steps b, .sb-howb-steps b { background: rgba(255, 255, 255, .08); color: #ffb067; box-shadow: none; border-radius: var(--r-ctl); }

/* Полоса автозабора и автоигры (обе игры) */
.auto-bar { border-radius: var(--r-card); }
.auto-segs, .auto-segs button { border-radius: var(--r-ctl); }
.auto-segs button.on { border-color: var(--ac-sel-line); box-shadow: none; }

/* ---------------------------------------------------------- подтверждение личности
   Окно пароля / кода (reauth.js) встаёт поверх любой модалки — вывод и
   кошельки сами живут в модалке, и подменять её нельзя. Выше модалки (150)
   и тостов (200), ниже конфетти и полноэкранных сцен (300+). */
.reauth-bg {
  position: fixed; inset: 0; z-index: 250; display: grid; place-items: center;
  padding: 16px; background: rgba(4, 6, 14, .72);
}
.reauth { width: min(380px, 100%); display: grid; gap: 10px; margin: 0; }
.reauth h3 { margin: 0; }
.reauth .help { margin: 0; }
.reauth input { width: 100%; }
.reauth-err { margin: 0; color: var(--red, #ff6b6b); font-size: var(--fs-cap); }
.reauth-err:empty { display: none; }
.reauth-row { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Напоминание «подтверди 18+» в кабинете (№64). */
.pra-age {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid rgba(255, 168, 56, .45); background: rgba(255, 168, 56, .1);
  font-size: var(--fs-label);
}
.pra-age[hidden] { display: none; }

/* ======================================================================
   ALIVE · Дроп дня и «Награды» на странице колеса — адаптив (18.10)
   Блок живёт в правой колонке шириной от ~200 px (1024) до 340 px, а на
   планшете и телефоне — во всю ширину. Раскладка считается от ширины
   самого блока (container query), а не окна:
     • дни: 7 в ряд; уже 300 px — 4 + 3, где седьмой (скин) на две клетки;
     • кегль цифр растёт с шириной блока, «+150» не слипается с соседом;
     • «Награды · за уровень N» — одной строкой, плитки — иконка слева,
       подпись справа, сколько влезет в ряд.
   ====================================================================== */
@media (min-width: 881px) { .wha-side > #whaBoard { max-width: 340px; } }
#whaBoard .wha-drop, #whaBoard .wha-rw { container-type: inline-size; }
#whaBoard .wha-drop { margin: 0 0 4px; padding: 12px; }
#whaBoard .wdr-h { align-items: center; margin-bottom: 10px; white-space: nowrap; }
#whaBoard .wdr-h small { overflow: hidden; text-overflow: ellipsis; }
#whaBoard .wdr-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
#whaBoard .wdr-cell { min-width: 0; min-height: 54px; padding: 7px 1px 6px; gap: 3px; align-content: center; }
#whaBoard .wdr-cell small { font-size: 10px; letter-spacing: 0; }
#whaBoard .wdr-cell b { font-size: clamp(11px, 4.3cqw, 16px); letter-spacing: -.02em; white-space: nowrap; }
#whaBoard .wdr-cell i { font-size: 9px; }
#whaBoard .wdr-cell img { width: clamp(20px, 8cqw, 30px); height: auto; aspect-ratio: 1; }
#whaBoard .wdr-btn { padding: 11px 12px; line-height: 1.25; letter-spacing: .08em; }
@container (max-width: 300px) {
  #whaBoard .wdr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #whaBoard .wdr-cell.skin { grid-column: span 2; }
  #whaBoard .wdr-cell b { font-size: 14px; }
  #whaBoard .wdr-cell img { width: 26px; }
}
@container (max-width: 230px) {
  #whaBoard .wdr-grid { gap: 4px; }
  #whaBoard .wdr-cell b { font-size: 12px; letter-spacing: -.04em; }
}
#whaBoard .wha-rw { padding: 12px; gap: 10px; }
#whaBoard .wha-rw-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; }
#whaBoard .wha-rw-h > b { flex: none; width: auto; height: auto; padding: 4px 9px; border-radius: 999px;
  font-size: 11px; line-height: 1; letter-spacing: .02em; color: #ffb067;
  background: rgba(255, 122, 24, .12); border: 1px solid rgba(255, 122, 24, .38); }
#whaBoard .wha-rw-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 6px; }
#whaBoard .wha-tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
  min-width: 0; padding: 8px 10px; }
#whaBoard .wha-tile-ic { flex: none; width: 44px; height: 36px; }
#whaBoard .wha-tile-l { min-width: 0; text-align: left; font-size: 12px; line-height: 1.3; color: #d6d6e0; }
@media (max-width: 700px) {
  #whaBoard .wdr-cell { min-height: 50px; }
}

/* ---------------------------------------------------------- ALIVE · быстрый старт новичка

   Полоса над витриной для вошедшего новичка (задача №145, onboard.js):
   четыре шага с наградой. Тот же вид, что у полосы гостя. */
.nb-strip:not([hidden]) {
  display: grid; gap: 10px; margin: 0 0 18px; padding: 12px 14px 14px 18px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(90deg, rgba(255, 122, 24, .12), rgba(255, 255, 255, .02) 60%);
}
body.guest .nb-strip { display: none; }
.nb-head { display: flex; align-items: center; gap: 12px; }
.nb-head b { color: var(--al-tx); font: 700 var(--fs-body)/1.3 var(--f-hd); }
.nb-gift { color: #ffb067; font: 600 var(--fs-label)/1.3 var(--f-ui); }
.nb-head .gs-x { margin-left: auto; width: 32px; height: 32px; }
.nb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.nb-step button {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; height: 100%; padding: 10px 12px; text-align: left;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(10, 10, 14, .6);
  color: var(--tx-2); cursor: pointer;
}
.nb-step.next button { border-color: rgba(255, 168, 56, .55); }
.nb-step.done button { cursor: default; opacity: .6; }
.nb-n {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: rgba(255, 122, 24, .18); color: #ffb067; font: 700 var(--fs-label)/1 var(--f-hd);
}
.nb-step.done .nb-n { background: rgba(80, 200, 120, .2); color: var(--green); }
.nb-t { display: grid; gap: 2px; min-width: 0; }
.nb-t b { color: var(--al-tx); font: 600 var(--fs-label)/1.3 var(--f-hd); }
.nb-t small { color: var(--tx-3); font: 400 var(--fs-cap)/1.35 var(--f-ui); }
@media (max-width: 720px) { .nb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------- ALIVE · цена награды пасса

   Под названием награды на ленте пасса — её цена в долларах (задача №24). */
.bpp-ev { display: block; margin-top: 2px; font: 500 var(--fs-micro)/1.2 var(--f-ui); font-style: normal; color: var(--tx-3); }

/* ============================================================ ALIVE · БЛОК F · UX, АНИМАЦИИ, ИГРЫ
   Правки блока «Фронтенд: UX, анимации, игры» по ЗАДАЧИ_ОБЩИЙ_СПИСОК
   (номера в комментариях). Новые правила — только здесь: старые не
   переписываются, позднее правило побеждает. */

/* Кабинет гостя на телефоне (№122): вместо двух обрезанных «Авторизуйтесь»
   одна кнопка «Войти» на всю ширину. «Вывести» гостю нечего — он не вошёл. */
body.guest #meWithdraw { display: none; }
body.guest #meDep { flex: 1 1 auto; }

/* FAQ (№127): «ЧАСТО ЗАДАВАЕМЫЕ» в 50 px упиралось в края на 390. */
@media (max-width: 640px) {
  .sta.sta-faq .sta-hero > h1 { font-size: 33px; }
  .sta.sta-faq .sta-hero > h2 { font-size: 44px; }
}

/* Space Ball без layout в покое (№110): камни ехали по left — 60 пересчётов
   раскладки в секунду, даже когда никто не бьёт. Теперь transform в
   единицах ширины сцены (cqw: у .sb-scene container-type), фон «дышит» на
   своём слое, лампы светят прозрачностью без mix-blend, цели пульсируют
   масштабом и прозрачностью вместо filter. */
.sb-rock { left: 0; will-change: transform; }
@keyframes sbRock0 { from { transform: translateX(104cqw) rotate(0); } to { transform: translateX(-6cqw) rotate(-360deg); } }
@keyframes sbRock1 { from { transform: translateX(-6cqw) rotate(0); } to { transform: translateX(104cqw) rotate(300deg); } }
.sb-bg { will-change: transform; }
.sb-lamp { mix-blend-mode: normal; will-change: opacity; }
@keyframes sbPulse { 50% { transform: scale(1.07); opacity: .82; } }

/* Мины: полоса авто-режимов в узкой панели ставки (№149) — группы друг под
   другом, кнопки на всю ширину; на «Забрать» — цена следующего шага. */
#mnPanel .auto-bar { margin-top: 0; gap: 8px; padding: 9px 10px; }
#mnPanel .auto-grp { flex: 1 1 100%; justify-content: space-between; }
#mnPanel .auto-sub { display: none; }
#mnPanel .auto-segs { flex: 1 1 auto; grid-auto-columns: minmax(0, 1fr); }
#mnPanel .auto-state { margin-left: 0; flex: 1 1 100%; }
/* Телефон: панель ставки мин разобрана по сетке сцены (display: contents) —
   полоса встаёт отдельным рядом между суммой и кнопкой, ряды ниже сдвинуты. */
@media (max-width: 640px) {
  #page-mines .rbp > .auto-bar { grid-row: 6; grid-column: 1 / -1; z-index: 1; margin: 10px 12px 0; }
  #page-mines .rbp > .rbp-foot { grid-row: 7; }
  #page-mines .mna-stage::after { grid-row: 3 / 8; }
  #page-mines .mna-recent { grid-row: 8; }
}
.rbp-main .mna-next {
  display: block; margin-top: 4px; font: 600 var(--fs-micro, 11px)/1.1 var(--f-ui); letter-spacing: .02em;
  text-transform: none; opacity: .78;
}

/* Потолки ставки и выигрыша прямо в игре (№12, №13): Ракета, Milky Way,
   Plinko. Мелкая серая строка; у Ракеты — жёлтая, когда потолок выплаты
   этой ставкой уже достаётся. */
.ra-cap, .mw-cap, .pk-cap {
  margin: 8px 0 0; font: 500 var(--fs-micro, 11px)/1.35 var(--f-ui); color: #8a8a9a;
  text-align: center; text-wrap: balance;
}
.ra-cap:empty, .mw-cap:empty { display: none; }
.ra-cap.warn { color: #ffd27a; }
.pk-cap { display: block; margin-top: 4px; }
.mw-cap { text-align: left; }
/* Телефон: кнопка Ракеты стоит сразу под суммой (order), строка потолков —
   прямо под кнопкой, автоставка — после автовывода и скинов. */
@media (max-width: 880px) {
  #page-crash .rbp > .ra-cap { order: 1; margin-top: -4px; }
  #page-crash .rbp > .ra-ab { order: 3; margin-top: 0; }
}

/* Контраст и мелкий капс (№129). Space Ball: подписи запертой панели
   (гость, идущая серия) давали 2,8–3,9:1 — серый светлее и панель
   приглушена меньше. Инвентарь кабинета: износ капсом 11 px — строчными. */
.sb, .sb-float { --sb-tx2: #a2a2b2; }
.sb-panel.lock .sb-card { opacity: .82; }
.pra-it-wear { text-transform: none; letter-spacing: .02em; font-size: var(--fs-cap); }

/* Тап-цели кабинета (№130): «выйти», уровень, маркер предмета, кнопки
   карточки и страницы инвентаря — зона 42 px прозрачным ::after, рисунок
   прежний (как в разделе «3.1 тап-цели»). */
@media (max-width: 880px) {
  .pra-lvl, .pra-out, .pra-it-mk, .pra-it-act > button { position: relative; }
  .pra-lvl::after, .pra-out::after, .pra-it-mk::after, .pra-it-act > button::after {
    content: ''; position: absolute; inset: -7px;
  }
  .pra-out::after { inset: -9px -2px; }
  .pra-it-act > button::after { inset: -4px 0; }
  .pra-pages > button { min-width: 42px; min-height: 42px; }
}

/* «Выведено» без выводов (№131): на десктопе — кнопка «Как вывести»,
   на телефоне она спрятана, и вместо пустоты стоит прочерк. */
.pra-nil { display: none; }
@media (max-width: 880px) { .pra-nil { display: inline; } }

/* Тост нового уровня (№151): номер в шестиугольной плашке, две строки и
   кнопка к наградам. */
.toast.lvlup {
  display: flex; align-items: center; gap: 12px; width: min(92vw, 420px); box-sizing: border-box;
  border-color: rgba(255, 168, 56, .6);
}
.toast.lvlup .toast-act { flex: none; margin-left: auto; }
.lvlup-t { flex: 1 1 auto; }
.lvlup-n {
  flex: none; display: grid; place-items: center; width: 40px; height: 44px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(135deg, #ffd27a, #ff7a18); color: #180a00; font: 800 18px/1 var(--f-hd);
  animation: lvlupPop .6s cubic-bezier(.2, 1.6, .4, 1) both;
}
.lvlup-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lvlup-t b { font: 700 var(--fs-ui)/1.2 var(--f-hd); color: #fff; }
.lvlup-t small { font-size: var(--fs-cap); color: #a2a2b2; }
@keyframes lvlupPop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lvlup-n { animation: none; } }

/* Проверка игры Milky Way (№38): окно в стиле «Честной игры» Space Ball. */
.mw-verify dt { color: #a2a2b2; }
.mw-verify .mw-vok { color: #7ce4ae; }
.mw-verify .mw-vbad { color: #ff7a7a; }

/* /fair: цепь сидов «Ракеты» (№34) — обязательства отрезков. */
.fch-tbl { margin: 6px 0 12px; }
.fch-tbl .mono { font-size: var(--fs-micro); word-break: break-all; }
.fch-tbl tr.on td { color: #ffd27a; }
#fChain .kv .v.mono { font-size: var(--fs-micro); word-break: break-all; max-width: 70%; text-align: right; }

/* Ракета: автоставка под кнопкой (№150) — вид полосы автоигры лесенок. */
.ra-ab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.ra-ab .auto-segs { flex: 1 1 auto; grid-auto-columns: minmax(0, 1fr); }
.ra-ab-st { font: 600 var(--fs-cap)/1.3 var(--f-hd); color: #8a8a9a; }
.ra-ab-st b { color: #ffad32; }
.ra-ab-st:empty { display: none; }
.ra-ab.live .auto-segs { border-color: rgba(255, 121, 0, .45); }
/* «Стоп» серии рядом с «осталось N» (владелец, 24.10.2026): гасит серию
   вместе со ставкой раунда. Высота — как у кнопок полосы. */
.ra-ab-stop {
  height: 30px; padding: 0 12px; border-radius: 6px; cursor: pointer;
  background: rgba(255, 92, 0, .12); border: 1px solid rgba(255, 121, 0, .55); color: #ffad32;
  font: 700 var(--fs-label)/1 var(--f-hd); white-space: nowrap; transition: color .15s, background .15s;
}
.ra-ab-stop:hover, .ra-ab-stop:focus-visible { background: rgba(255, 92, 0, .24); color: #fff; }
.ra-ab-stop[hidden] { display: none; }
@media (max-width: 880px) {
  .ra-ab-stop { position: relative; }
  .ra-ab-stop::after { content: ''; position: absolute; inset: -6px 0; }
}

/* Анимации без раскладки (№114). Блики ехали по left — пересчёт раскладки
   на каждом кадре (alSweep — 29 в секунду на пустой витрине). Теперь их
   двигает свойство translate: оно складывается с skewX/rotate в transform
   и идёт на видеокарте. Путь тот же: в процентах ширины самого блика —
   расстояние left в процентах родителя, делённое на ширину блика
   (--sweep). Пульс подставки — scale вместо width. Одноимённые
   @keyframes ниже заменяют прежние. */
@keyframes shine { 0%, 62% { translate: 0 0; } 86%, 100% { translate: 596% 0; } }
@keyframes af-shine-run { from { translate: 0 0; } to { translate: 618% 0; } }
@keyframes alSweep { 0%, 60% { translate: 0 0; } 100% { translate: var(--sweep, 567%) 0; } }
@keyframes csSweep { 0%, 60% { translate: 0 0; } 100% { translate: var(--sweep, 773%) 0; } }
@keyframes copSweep { 0%, 60% { translate: 0 0; } 100% { translate: var(--sweep, 567%) 0; } }
@keyframes praSweep { 0%, 60% { translate: 0 0; } 100% { translate: var(--sweep, 567%) 0; } }
@keyframes coSweep { 0%, 60% { translate: 0 0; } 100% { translate: var(--sweep, 567%) 0; } }
.pra-sweep { --sweep: 773%; }                      /* ширина 22 % */
.pra-xp-track > i > span { --sweep: 425%; }        /* ширина 40 % */
@keyframes ped-pulse { 50% { scale: .832 1; opacity: .7; } }
.btn.primary::after, .af-shine::before, .bp-side::before, .quests::before, .cs-hero-sweep,
.copen-open::before, .pra-shine, .pra-sweep, .pra-xp-track > i > span, .plv-tier.cur .plv-card::before,
.co-sweep { will-change: translate; }

/* backdrop-filter над живыми сценами игр (№114): размытие пересчитывалось
   на каждый кадр холста под ним. Плашки над Ракетой, Space Ball и Milky Way,
   регулятор звука и «Как играть?» — на плотной подложке без размытия. */
.ra-hx, .ra-chip, .ra-readout, .sndc, .howto-btn, .mw-rules, .sb-fair, .sb-snd, .sb-table {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ra-chip, .ra-readout, .sndc, .howto-btn, .mw-rules, .sb-fair, .sb-snd { background-color: rgba(10, 10, 14, .82); }
.sb-table { background-color: rgba(10, 10, 14, .86); }

/* Шрифты 3 → 2 семейства (№117): Unbounded жил в двух правилах заголовка
   партнёрской страницы и тянул ещё один файл шрифта на каждую загрузку. */
.pta-h1, .pta-h1s { font-family: var(--f-hd); }

/* Окно пополнения на телефоне (№126): кнопка оплаты уезжала за нижний край
   окна — до неё надо было докрутить сводку. Теперь она прилипает к низу
   прокрутки окна и видна сразу, сводка прокручивается под ней. */
@media (max-width: 880px) {
  .dpa .dpa-cta {
    position: sticky; bottom: 0; z-index: 3;
    margin: 0 -16px -20px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(14, 14, 18, 0), rgba(14, 14, 18, .96) 18px);
  }
}

/* ============================================================ ALIVE · КЕЙС · ФОН, МАСКОТ, ПОЛОСА

   Три правки владельца 19.10.2026 по его снимку страницы кейса на 2560×1343.

   1. Фон на месте. .co-page-bg брал ширину max(колонка, 1.46 · высота
      героя) и стоял от верха страницы. Картинка портретная (1600×1985),
      и на широкой колонке росла вниз вместе с шириной: на 1440 (колонка
      1062 px) подиум под кейсом, на 1920 (1542 px) — уже под «Содержимым
      кейса», на 2560 (2182 px) — на 550 px ниже кейса, а в сцене остались
      потолок и банеры. Теперь картинка прибита к подиуму: передняя кромка
      его верха (49.61% ширины картинки от её верха, ≈794 px из 1600)
      стоит у низа кейса. Низ кейса = низ сцены − 33 px: сцена 320 px
      («сцена без прыжков»), кейс 290 px по центру и поднят на 18 px; низ
      сцены от верха страницы ставит case.js (--co-stage-b). Ширина — не
      меньше колонки и не меньше, чем нужно, чтобы кромка не ушла выше
      кейса: тогда сдвиг вверх всегда ≤ 0 и верх сцены закрыт картинкой.
      На 1440 у платного кейса (с тумблером демо) вид прежний: ширина 1064,
      сдвиг 0. Телефон (< 880) не трогаем: там подиум под кейсом и так,
      свой подъём --co-bg-top.
      Поднятая картинка на широком экране доходит до низа страницы
      решёткой пола, и рамка резала её ровной кромкой над подвалом
      (на 2560 кромка была и раньше, но по тёмному полу). Поэтому низ
      рамки фона на 200 px уходит в цвет страницы — оверлеем, а не
      mask-image: маска на слое 2182×1280 роняла вкладку Chromium при
      проверке на 2560. На 1440 картинка кончается выше — там без перемен.
   2. Маскот справа от кнопок убран. Картинка в разметке осталась ради
      .joy из case.js; с loading="lazy" скрытая, она не скачивается.
   3. Полоса на уровне кнопок. «Содержимое кейса» заходит на героя на
      90 px (.co-list: margin-top −90px, padding-top 90px), и в этих 90 px
      тень низа героя (.co-hero-shade, .38) ложилась поверх тени списка
      (.co-list-shade, сверху тоже .38): полоса вдвое темнее, с кромкой на
      верхнем краю. Тень списка теперь начинается под героем, где кончается
      его тень, — тон сходится без шва. */

@media (min-width: 881px) {
  #page-case .co-page-bg {
    width: max(100%, calc((var(--co-stage-b, 561px) - 33px) / .4961));
    top: min(0px, calc(var(--co-stage-b, 561px) - 33px - var(--co-hero-w, 1062px) * .4961));
  }
  #page-case .co-page-bgbox::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 8, 14, 0), #08080e);
  }
}
#page-case .co-mascot { display: none; }
#page-case .co-list-shade { top: 90px; }

/* ============================================================ ALIVE · РАКЕТА И МИНЫ · ГРОМКОСТЬ И АВТО-РЕЖИМЫ

   Две правки владельца 19.10.2026 по его снимкам на 2560×1343.

   1. Ракета: громкость лежала на ракете. .ra-bottom — строка внизу сцены
      (justify-content: space-between): регулятор слева, «Как играть?»
      справа (mountHowto opts.slot). Слева внизу — стартовая площадка, и
      регулятор закрывал маскота всё время приёма ставок. От 881 px полоса
      уходит вправо и встаёт столбиком: громкость над «Как играть?». Там
      всегда пусто: кончик кривой не заходит правее середины поля
      (geometry() в crash.js). На телефоне свой порядок (регулятор уже
      справа над «Банком» и «Игроками») — не трогаем.
   2. Мины: «Автозабор» и «Автоигра» налезали друг на друга. В панели
      ставки поверх доски (от 1701 px, ширина 284 px) подпись и кнопки
      стояли в одну строку, а колонки кнопок были minmax(0, 1fr): на
      кнопку оставалось 22–29 px при тексте 42–57 px («выкл», «после 2»),
      и надписи ложились на соседние. Теперь колонка не уже своего текста
      (minmax(max-content, 1fr); просто 1fr не спасает — у кнопок
      min-width: 0), а группа переносится: не влезают кнопки рядом с
      подписью — подпись строкой выше, кнопки на всю ширину. Где места
      хватает (1440, панель под доской), строка прежняя, кнопки равные.
      Две строки подписей — +44 px, а панель поверх доски была ровно по
      содержимому (535 px), и кнопка «Открой ячейку» вылезала за рамку.
      Поэтому там обе панели — ставка и «Последние игры», чтобы низ
      совпадал, — 590 px (доска в этом режиме не ниже ~630 px), зазоры
      панели ставки 12 → 10 px, под подписью 6 → 4 px: влезает и строка
      «Заберём сами после…», и статус серии в две строки. */

@media (min-width: 881px) {
  #page-crash .ra-bottom { left: auto; flex-direction: column; align-items: flex-end; gap: 8px; }
}
#mnPanel .auto-grp { flex-wrap: wrap; row-gap: 6px; }
#mnPanel .auto-segs { grid-auto-columns: minmax(max-content, 1fr); }
@media (min-width: 1701px) {
  .mna-stage > .rbp, .mna-recent { height: min(590px, calc(100% - 32px)); }
  #mnPanel { gap: 10px; }
  #mnPanel .auto-grp { row-gap: 4px; }
}

/* ======================================================= ALIVE · Меню «просто»

   Решение владельца 19.10 (аудит нейрослопа, вариант A): один набор линейных
   иконок, три раздела с подписями, активный пункт — полоска слева без
   обводки и свечения, два оранжевых блока сайдбара — один тихий «Прогресс». */

.nav-grp {
  padding: 14px 12px 4px; font: 700 var(--fs-micro)/1 var(--f-hd);
  letter-spacing: .14em; text-transform: uppercase; color: #6a6a7c;
}
.nav-grp:first-child { padding-top: 2px; }
.nav-btn .ic { width: 18px; height: 18px; display: grid; place-items: center; flex: none; opacity: .85; }
.nav-btn .ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn.on .ic { opacity: 1; }
.nav-btn.on {
  color: #fff; border-color: transparent;
  background: rgba(255, 255, 255, .05); box-shadow: none;
}
.nav-btn.on::before { box-shadow: none; animation: none; }
/* Пункт из запасной разметки — тот же вид, что из реестра. */
.nav-btn .nav-sep { display: none; }

/* Блок «Прогресс»: уровень с полосой, под ним складки заданий и быстрого
   старта. Те же #bpSide/#bpQuick внутри, но без своих рамок, градиентов и
   бегущего блика — одна тихая панель. */
.side-prog {
  flex: 0 0 auto; margin-top: 14px; padding: 12px 10px 6px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}
.side-prog[hidden] { display: none; }
.sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sp-head b { font: 700 var(--fs-ui)/1.2 var(--f-hd); color: var(--al-tx); }
.sp-head span { font: 600 var(--fs-micro)/1 var(--f-hd); color: var(--al-tx3); white-space: nowrap; }
.sp-head:empty, .sp-head b:empty + span:empty { display: none; }
.sp-bar { height: 4px; border-radius: 3px; background: #1c1c24; overflow: hidden; margin: 8px 0 2px; }
.sp-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #ff7a18; transition: width .3s ease; }
.side-prog .bp-side {
  margin: 0; padding: 8px 0 0; border: 0; border-radius: 0; background: none;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.side-prog .bp-side:first-of-type { border-top: 0; margin-top: 4px; }
.side-prog .bp-side::before { display: none; }
.side-prog .bps-head { color: var(--al-tx2); letter-spacing: .06em; text-transform: none; font-size: var(--fs-ui); margin-bottom: 8px; }
.side-prog .bp-side.closed .bps-head { margin-bottom: 6px; }
.side-prog .bps-head[data-fold]:hover { color: var(--al-tx); }
.side-prog .bps-n { box-shadow: none; }
/* «Миссии» — та же тихая панель, что и «Прогресс». */
.quests {
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025);
}
.quests::before { display: none; }
.quests-head { color: var(--al-tx2); letter-spacing: .06em; text-transform: none; font-size: var(--fs-ui); }
.quests-ready { box-shadow: none; }

/* ------------------------------------------------ ключ-значение на /fair
   Подпись и значение стояли в одной строке без зазора: «звеньев960». */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; min-width: 0; }
.kv .k { color: var(--tx-3); flex: none; }
.kv .v { min-width: 0; text-align: right; overflow-wrap: anywhere; }

/* ------------------------------------------------ названия кейсов в две строки
   «ПОМОГИТЕ НА …» резалось многоточием на первой же карточке в ряду. */
.case-card .case-name {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: clip; line-height: 1.2;
}

/* ------------------------------------------------ мины: витрина «Топ выигрышей» в блоке под доской */
.mna-my { overflow: hidden; }
.mna-my .rat-list { padding-right: 4px; }

/* ======================================================= ALIVE · Телефон, аудит 19.10

   Решения владельца по мобильному аудиту: цели для пальца, короткие
   заголовки, касса, колесо, лидеры, /fair карточками, FAQ без хиро,
   подвал аккордеонами, страница кейса короче. Всё — только под 880 px. */

@media (max-width: 880px) {
  /* «+» пополнения — главная монетизация, была 26–28 px. Как бургер. */
  .tb-dep { width: 40px; height: 40px; border-radius: 11px; font-size: 22px; }

  /* Поля ввода 16 px: меньше — iOS увеличивает страницу при фокусе. Ставка
     и свои крупные поля не трогаем: у них размер больше и так (max). */
  .page input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  .page select, .page textarea, .modal input, .modal select, .modal textarea { font-size: max(16px, 1em); }

  /* Заголовок полки с таймером: «обновятся через 1 ч 56 мин» не влезал в 360 px. */
  .cs-shelf-h { flex-wrap: wrap; }
  .cs-shelf-note { flex: 1 1 100%; order: 5; }

  /* Карточка витрины: одна тень вместо двух (вторая — цветное свечение,
     отдельный слой на каждую из сорока карточек). */
  .cs-card-art .case-photo img, .cs-card-art > svg { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .7)); }

  /* Касса: «Зачислим» над кнопкой и запас, чтобы кнопка не ложилась на сводку. */
  .dpa-r { padding-bottom: 28px; }
  /* Кнопка «Оплатить» на телефоне не липнет к низу: липкая она ложилась
     поверх сводки «К оплате» (бонус и «Зачислим» не были видны вовсе). */
  .dpa-cta { position: static; margin-top: 10px; }
  .dpa-promo input { font-size: 16px; }
  .dpa-credit { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 500 var(--fs-ui)/1.3 var(--f-ui); color: #a2a2b2; }
  .dpa-credit b { font: 700 18px/1 var(--f-hd); color: #ffa838; }
  .dpa-credit small { color: #7ce4ae; font-size: var(--fs-cap); }
  .dpa-credit[hidden] { display: none; }
  .pwd-x { width: 44px; height: 44px; }

  /* Колесо: табло уровня убрано (он есть в кабинете и в «Прогрессе»),
     диск 82 %, подписи на диске заменяет легенда, дроп дня — над диском. */
  .wha-center > .wha-xp { display: none; }
  .wha-center > .wha-wheel { max-width: 82%; }
  .wha-it > b, .wha-pct > span { display: none; }
  .wha-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 2px 0 6px;
    font: 600 var(--fs-cap)/1 var(--f-hd); color: #c4c4d0;
  }
  .wha-legend[hidden] { display: none; }
  .wha-legend > span { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; }
  #page-wheel .wha > .wha-side, #page-wheel .wha-side > .wha-board, #page-wheel .wha-board > .wha-board-in { display: contents; }
  #page-wheel .wha-ph { display: none; }
  #page-wheel .wha .wha-drop#whaDrop { order: -1; position: relative; z-index: 2; margin-bottom: 4px; }

  /* Лидеры: правила — плашкой, не оранжевой строкой на чёрном. */
  .lba-mrules {
    margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; color: #d6d6dc;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  }
  .lba-mlist .lba-empty { padding: 28px 16px; text-align: center; }

  /* /fair: таблица отдачи — карточка на игру. */
  .frtp-tbl thead { display: none; }
  .frtp-tbl, .frtp-tbl tbody { display: block; }
  .frtp-tbl tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
    height: auto; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .frtp-tbl td { display: block; padding: 0; border: 0; }
  .frtp-tbl td:first-child { grid-column: 1; grid-row: 1 / span 3; }
  .frtp-tbl td.num { text-align: right; white-space: normal; font-size: var(--fs-cap); color: #c4c4d0; }
  .frtp-tbl td:nth-child(2) { font-size: 17px; color: #fff; }
  .frtp-tbl td:nth-child(3)::before { content: 'диапазон '; color: var(--tx-3); }
  .frtp-tbl td:nth-child(4)::before { content: 'потолок '; color: var(--tx-3); }
  .frtp-tbl td small { max-width: none; }

  /* FAQ: без двухстрочного хиро, разделы — лентой чипов. */
  .sta.sta-faq .sta-hero > h1 { display: none; }
  .sta.sta-faq .sta-hero > h2 { font-size: 30px; }
  .sta-faq-body > .sta-cats { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  .sta-faq-body > .sta-cats::-webkit-scrollbar { display: none; }
  .sta-faq-body > .sta-cats > .sta-cat { flex: none; min-height: 44px; padding: 0 14px; }

  /* Кабинет: карточки статистики с прочерком не показываем. */
  .pra-stat.nil { display: none; }

  /* Подвал: колонки свёрнуты, заголовок раскрывает; ссылки по 44 px. */
  .ft-col > h4 {
    display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer;
    font-size: 15px;
  }
  .ft-col > h4::after {
    content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s; opacity: .7;
  }
  .ft-col.open > h4::after { transform: rotate(-135deg); }
  .ft-col > i { display: none; }
  .ft-col ul { display: none; margin: 4px 0 8px; gap: 0; }
  .ft-col.open ul { display: flex; }
  .ft-col li { min-height: 44px; }
  .ft-link { display: block; padding: 10px 0; }
  .ftr-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fb-links a { padding: 12px 18px; }
  .fb-lang { min-height: 44px; }

  /* Страница кейса: кнопка «Открыть» — на первом экране. */
  .co-hero { min-height: 0; }
  .co-stage { min-height: 150px; margin-top: 16px; }
  .co-idle { height: 160px; }
  .co-title { font-size: 28px; }
  .co-main { padding-bottom: 16px; }
}


/* ======================================================= ALIVE · Игры на телефоне, 19.10

   Решения владельца: Plinko — панель ставки как у Мин и Ракеты, без
   отдельной «карточки на фоне»; Space Ball и Milky Way — сцена во весь
   экран, под ней панель в том же материале, что у Мин; полоски-текстуры
   на панелях Мин убраны (JS). Только под 880 px. */

@media (max-width: 880px) {
  /* Plinko: страница на чёрном, как Мины; космос — только за полем; панель —
     тот же материал, что .mna-bet. */
  .content:has(#page-plinko.on) { background: var(--bg); }
  #page-plinko .pk { background: none; }
  .pk-stage {
    /* Фон-картинки plinko/bg.webp в ассетах нет (404) — правило всегда
       рисовало только тёмную подложку. Убрана битая ссылка, вид тот же. */
    background:
      linear-gradient(180deg, rgba(6, 6, 11, .3), rgba(6, 6, 11, .6)),
      #07070b;
  }
  .pk-panel, .pk-side, .pk-recent {
    border: 1px solid rgba(255, 122, 24, .16); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    background: linear-gradient(180deg, rgba(18, 18, 25, .9), rgba(11, 11, 16, .94));
  }
  .pk-stage { border-radius: 0; margin: 0 -12px; width: auto; }

  /* Space Ball и Milky Way: сцена от края до края, без скруглений и тени-рамки. */
  #page-spaceball .sb, #page-milkyway .mw { margin: -12px -12px 0; }
  .sb-scene, .mw-scene { border-radius: 0; box-shadow: none; }
  .sb-scene::before, .sb-scene::after { display: none; }
  .sb-scene { aspect-ratio: auto; height: min(62svh, 520px); max-height: none; }
  .mw-scene { aspect-ratio: auto; height: min(56svh, 480px); }
  .sb > *:not(.sb-stage), .mw > *:not(.mw-scene) { margin-left: 12px; margin-right: 12px; }
  .sb-stage > *:not(.sb-scene) { margin-left: 12px; margin-right: 12px; }
}

/* ============================================================ ALIVE · Space Ball на телефоне, 19.10

   Игра в один экран (решение владельца): сцена — всё между шапкой и панелью,
   лесенка множителей — строка чипов над воротами (следующий шаг держится в
   кадре, spaceball.js paintTable), ставка и «Ударить» закреплены внизу; в
   серии место суммы занимает «Забрать $x». Скины, автозабор/автоигра,
   последние игры и «Как играть» — чипы под панелью, каждый открывает шторку
   (узел страницы переезжает в неё и обратно, spaceball.js openDrawer).
   Движок сцены не тронут. Только под 880 px. */

.sb-dock, .sb-drawer { display: none; }

@media (max-width: 880px) {
  :root { --sb-bar: 112px; }
  body.sb-drawer-on { overflow: hidden; }
  .sb-scene { height: calc(100svh - var(--tb-h) - var(--sb-bar)); min-height: 440px; }
  /* страница = сцена: низ .content (18px) съедается, подвал под панелью не нужен */
  #page-spaceball .sb { margin-bottom: -18px; }
  body:has(#page-spaceball.on) .ftr { display: none; }
  .shell:has(> .main > .content > #page-spaceball.on) { min-height: 0; }
  .shell:has(> .main > .content > #page-spaceball.on) > .main { padding-bottom: 0; }
  /* панель и шторка на телефоне — дети body (spaceball.js placeBar) */
  body > .sb-float { margin: 0; }

  /* картинка поля прижата к низу (spaceball.js measure), над ней — космос */
  .sb-scene { background: linear-gradient(180deg, #04050a 0%, #090b14 55%, #0e1019 100%); }
  .sb-bg { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%); mask-image: linear-gradient(180deg, transparent, #000 14%); }

  /* лесенка — строка чипов над воротами */
  .sb-table { left: 0; right: 0; top: 8px; width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sb-table-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* Заголовок спрятан, а его «?» (рамка 13 px, кольцо тенью) из-под клипа
     торчал кружком в левом верхнем углу над чипами. */
  .sb-table-h .hint { display: none; }
  .sb-rows { position: relative; flex-direction: row; gap: 6px; padding: 0 10px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sb-rows::-webkit-scrollbar { display: none; }
  .sb-row, .sb-row:nth-child(even) { flex: none; flex-direction: column; justify-content: center; gap: 3px; height: 44px; min-width: 60px;
    padding: 0 10px; border-radius: 10px; scroll-snap-align: center; color: #b4b4c2; font: 700 10px/1 var(--f-hd); letter-spacing: .08em;
    background: rgba(10, 10, 14, .78); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
  .sb-row em { display: none; }
  .sb-row b { font-size: var(--fs-label); }
  .sb-row.done { color: #9ff0c4; background: rgba(53, 208, 127, .14); border-color: rgba(53, 208, 127, .4); }
  .sb-row.next { color: #fff; background: linear-gradient(180deg, rgba(255, 121, 0, .55), rgba(255, 121, 0, .22)); border-color: rgba(255, 160, 60, .8);
    box-shadow: 0 0 18px rgba(255, 121, 0, .4); }
  .sb-stage.busy .sb-table { opacity: 1; }
  /* кнопки «честная игра» и звук — в нижний правый угол сцены, верх занят лесенкой */
  .sb-tools { top: auto; bottom: 10px; right: 10px; }

  /* нижняя панель: «−», сумма, «×2», «Ударить»; в серии — «Забрать» и «Ударить» */
  .sb-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
    margin: 0 !important; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
    background: rgba(10, 10, 14, .94); border-top: 1px solid rgba(255, 122, 24, .18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .sb-bet { flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; opacity: 1 !important; }
  .sb-bet .sb-card-h { display: none; }
  .sb-bet-row { flex-wrap: nowrap; gap: 6px; }
  .sb-amt-box { flex: 1 1 0; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; }
  .sb-amt-box .sb-pm[data-pm="+"] { display: none; }
  .sb-pm, .sb-amt { height: 48px; }
  .sb-amt { padding: 0 8px; gap: 5px; }
  .sb-amt input { font-size: 16px; }
  .sb-chips { display: contents; }
  .sb-chips > [data-quick]:not([data-quick="x2"]) { display: none; }
  /* «×2» — без орнаментной рамки (владелец, 19.10), «Ударить» — без значка */
  .sb-chip { flex: none; width: 44px; height: 48px; border: 1px solid rgba(255, 255, 255, .12); border-image: none; border-radius: var(--r-ctl, 10px);
    background: var(--sb-surf); }
  .sb-chip.on { border-color: rgba(255, 121, 0, .6); background-color: #1d0900; box-shadow: none; filter: none; }
  .sb-go-ic { display: none; }
  .sb-panel.lock .sb-bet { display: none; }
  .sb-cash:not(.ready) { display: none; }
  .sb-cash.ready { flex: 1 1 0; min-height: 48px; padding: 0 10px; }
  .sb-cash-tx { gap: 3px; }
  .sb-go { flex: 1.25 1 0; min-height: 48px; padding: 0 14px; gap: 0; }
  .sb-go-tx { gap: 3px; }
  .sb-go-tx b { font-size: 15px; }
  .sb-go-tx small { font-size: 10px; -webkit-line-clamp: 1; }

  /* чипы под панелью */
  /* Три чипа делят строку поровну — без прокрутки на любом телефоне: на
     узком подпись переносится второй строкой («Последние / игры»). «Как
     играть» — вверху сцены, у честности и звука. */
  .sb-dock { flex-basis: 100%; display: flex; gap: 6px; }
  .sb-dock > button[data-drawer="how"] { display: none; }
  .sb-fair.sb-howto { display: inline-flex; }
  .sb-dock > button { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 32px; padding: 3px 6px; border-radius: 16px; cursor: pointer; flex-wrap: wrap; text-align: center;
    border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: #d7d7e0; font: 600 11px/1.1 var(--f-ui); }
  .sb-dock > button b { font: 700 11px/1.1 var(--f-hd); color: #ffb067; white-space: nowrap; }
  .sb-dock > button b[hidden] { display: none; }
  .sb-dock > button.on { border-color: rgba(255, 121, 0, .55); background: rgba(255, 121, 0, .1); color: #ffd6b0; }
  .sb-dock > button[aria-expanded="true"] { border-color: rgba(255, 160, 60, .9); background: rgba(255, 121, 0, .2); color: #fff; }

  /* в потоке страницы этих блоков на телефоне нет — только в шторке */
  .sb-panel > .sb-skinc, .sb > .auto-bar, .sb > .sb-hist, .sb > .sb-howb { display: none; }

  /* шторка */
  .sb-drawer { position: fixed; inset: 0; z-index: 120; display: block; }
  .sb-drawer[hidden] { display: none; }
  .sb-drawer-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); animation: fade .2s ease; }
  .sb-drawer-p { position: absolute; left: 0; right: 0; bottom: 0; max-height: 84svh; display: flex; flex-direction: column;
    border-radius: 18px 18px 0 0; background: #121318; border-top: 1px solid rgba(255, 122, 24, .2); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
    animation: sbDrawerIn .28s cubic-bezier(.2, .8, .3, 1) both; }
  .sb-drawer-p::before { content: ''; position: absolute; left: 50%; top: 7px; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
  .sb-drawer-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 16px 10px; }
  .sb-drawer-h b { font: 800 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
  .sb-drawer-x { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font: 600 16px/1 var(--f-ui); cursor: pointer; }
  .sb-drawer-b { min-height: 0; overflow-y: auto; padding: 0 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .sb-drawer-b > * { margin: 0 !important; }
  .sb-drawer-b > .sb-skinc { display: flex; }
  /* заголовок в шторке один — свой; счётчик скинов и обновление ленты остаются */
  .sb-drawer-b > .sb-skinc #sbSkinsH, .sb-drawer-b > .sb-hist .sb-hist-t { display: none; }
  .sb-drawer-b > .sb-skinc .sb-card-h { justify-content: flex-end; }
  .sb-drawer-b > .sb-hist { padding-top: 0; border: 0; background: none; }
  .sb-drawer-b > .sb-howb { display: grid; }
  .sb-drawer-b > .sb-howb::before { display: none; }
  .sb-drawer-b > .sb-howb .sb-howb-tx, .sb-drawer-b > .sb-howb .sb-howb-steps { margin: 0; }
  .sb-drawer-b > .sb-howb .sb-howb-tx h2 { display: none; }
  @keyframes sbDrawerIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ============================================================ ALIVE · Несколько кейсов, 19.10

   Лента на кейс, ряды один под другим во всю ширину сцены (концепт
   Higgsfield): на телефоне от двух кейсов, на десктопе от трёх (case.js
   playReels, .rl.rows). Номер кейса — бейдж слева, метка по центру,
   остановка по очереди. Результат на телефоне от двух скинов — список
   строк с суммой и лучшим предметом (.co-list); на десктопе — карточки,
   как были. Столбики .rl.cols больше не ставятся. */

.rl.rows { gap: 8px; }
/* Десктоп держит сцену в 320 px, чтобы кнопки не прыгали: четыре-пять
   рядов ужаты (.tight, ROW_H_D в case.js), а что выше сцены — уходит
   вверх, под заголовок, а не вниз на кнопки. */
@media (min-width: 881px) {
  #page-case .co-stage:has(> .rl.rows) { align-content: end; }
  .rl.rows.tight { gap: 6px; }
  .rl.rows.tight .rl-wrap.h { padding: 4px 8px 4px 40px; }
  .rl.rows.tight .rl-port { height: calc(var(--cellh) + 8px); }
  .rl.rows.tight .rl-track { top: 4px; }
}
.rl.rows .rl-wrap.h {
  padding: 6px 8px 6px 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(22, 22, 30, .96), rgba(12, 12, 18, .97));
  box-shadow: 0 10px 24px -14px #000, inset 0 1px 0 rgba(255, 255, 255, .05);
}
.rl.rows .rl-rivets { display: none; }
.rl.rows .rl-num {
  position: absolute; left: 8px; top: 50%; z-index: 6; margin: 0; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; font-size: var(--fs-cap);
}
.rl.rows .rl-num::after { display: none; }
.rl.rows .rl-port { height: calc(var(--cellh) + 12px); border-radius: 8px; box-shadow: inset 0 0 0 1px #000, inset 0 6px 14px rgba(0, 0, 0, .8), inset 0 -4px 12px rgba(0, 0, 0, .7); }
.rl.rows .rl-track { top: 6px; gap: 6px; }
.rl.rows .rl-cell { padding: 4px; gap: 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .05);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, transparent), rgba(12, 12, 17, .9)); }
.rl.rows .rl-glow, .rl.rows .rl-cap, .rl.rows .rl-glass { display: none; }
.rl.rows .rl-bar { left: 0; right: 0; top: 0; bottom: auto; height: 2px; border-radius: 0; box-shadow: none; opacity: .7; }
.rl.rows .rl-art, .rl.rows .rl-cell.hit .rl-art { width: 90%; height: calc(var(--cellh) * .82); }
.rl.rows .rl-cell.hit { border-color: var(--rc); box-shadow: 0 0 14px -2px var(--rc), inset 0 0 12px -6px var(--rc); }
.rl.rows .rl-fade { background: linear-gradient(90deg, #08080d, transparent 46px, transparent calc(100% - 46px), #08080d); }
.rl.rows .rl-mark { top: 2px; bottom: 2px; }
.rl.rows .rl-mark > b { display: none; }
.rl.rows .rl-wrap.stopped { border-color: color-mix(in srgb, var(--win, #ff7a18) 55%, transparent); box-shadow: 0 0 18px -6px var(--win, #ff7a18); }
.rl.rows .rl-wrap.stopped .rl-cell:not(.hit):not(.near) { opacity: .35; }
@media (max-width: 880px) {
  .rl.rows { gap: 6px; }
  .rl.rows .rl-wrap.h { padding: 4px 6px 4px 34px; border-top: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09); box-shadow: none; }
  .rl.rows .rl-num { left: 6px; width: 22px; height: 22px; font-size: var(--fs-micro); }
  .rl.rows .rl-wrap.h .rl-port { height: calc(var(--cellh) + 12px); background: transparent; }
  .rl.rows .rl-wrap.h .rl-track { top: 6px; }
  .rl.rows .rl-wrap.h .rl-art, .rl.rows .rl-wrap.h .rl-cell.hit .rl-art { height: calc(var(--cellh) * .82); }
  .rl.rows .rl-wrap.h .rl-cap { display: none; }
  .rl.rows .rl-wrap.h .rl-mark { top: 2px; bottom: 2px; }

  /* результат — список строк */
  #page-case .co-hero[data-phase="done"] .co-stage { place-items: stretch; }
  /* сцена держит высоту рядов (case.js holdStage) — кейс в покое стоит на подиуме внизу, а не висит посередине */
  #page-case .co-hero[data-phase="idle"] .co-stage, #page-case .co-hero[data-phase="arm"] .co-stage { align-content: end; }
  #page-case .co-hero[data-phase="done"] .co-stage:has(> .co-list) { align-content: center; }
  #page-case .co-drops.co-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  .co-list-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 2px; }
  .co-list-h > span { font: 800 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
  .co-list-h > b { font: 800 var(--fs-body)/1 var(--f-hd); color: #ffa838; }
  .co-list-h > small { font: 600 var(--fs-cap)/1 var(--f-ui); color: #a2a2b2; }
  .co-row {
    position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    min-height: 68px; padding: 6px 10px 6px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid var(--rc);
    background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 16%, rgba(12, 12, 18, .94)), rgba(12, 12, 18, .94) 45%);
    animation: fade .35s ease both; animation-delay: var(--d, 0s);
  }
  .co-row.best { border-color: rgba(255, 168, 56, .55); border-left-color: var(--rc); box-shadow: 0 0 22px -6px rgba(255, 138, 30, .7), inset 0 0 20px -12px rgba(255, 168, 56, .6); }
  .co-row.sold { opacity: .45; }
  .co-row.sold .co-row-sell { display: none; }
  .co-row-art { display: grid; place-items: center; width: 84px; height: 56px; }
  .co-row-art img, .co-row-art svg { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 55%, transparent)); }
  .co-row-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .co-row-tx > small { font: 600 var(--fs-micro)/1.1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #a2a2b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .co-row-tx > b { font: 700 var(--fs-ui)/1.15 var(--f-hd); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .co-row-r { font: 600 var(--fs-micro)/1.1 var(--f-ui); color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .co-row.best .co-row-r { color: #ffb347; }
  .co-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .co-row-p { font: 800 var(--fs-body)/1 var(--f-hd); color: #ffa838; white-space: nowrap; }
  .co-row-p .coin { width: .9em; height: .9em; }
  .co-row-sell { height: 28px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--rc); background: rgba(8, 8, 12, .55); color: #f4f4f8;
    font: 600 var(--fs-cap)/1 var(--f-hd); cursor: pointer; }
}


/* ============================================================ ALIVE · PLINKO (2026-10-20)
   Концепт «шахта» (решение владельца): сцена — подложка станции с пустой
   шахтой (scene.webp / scene_mob.webp), поверх — кран, лампы, пар на
   CSS-анимациях, canvas с узлами и ядрами, DOM-вагонетки и маскот на
   спрайт-ленте (steps). Под сценой одна полоса управления, справа лента
   последних множителей. Разметку строит plinko.js в #pkRoot. */
#page-plinko { max-width: 1500px; margin: 0 auto; position: relative; background: transparent;
  container-type: inline-size; container-name: pkpage; }
@media (min-width: 1200px) { #page-plinko { padding-right: 20px; } }
.pk {
  --pk-bg: #08090c; --pk-card: #101115; --pk-line: rgba(255, 255, 255, .075);
  --pk-or: #ff7900; --pk-amb: #ffad32; --pk-tx: #f2f2f4; --pk-tx2: #858894;
  position: relative; display: flex; flex-direction: column; gap: 14px; color: var(--pk-tx);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pk .num, .pk-plate, .pk-pill, .pk-amt input { font-variant-numeric: tabular-nums; }
.pk :is(button, [tabindex]):focus-visible { outline: 2px solid var(--pk-amb); outline-offset: 2px; }

/* ---- сцена и лента ---- */
.pk-top { display: block; }
.pk-stage { position: relative; min-width: 0; height: auto; }
.pk-scene {
  position: relative; width: 100%; overflow: hidden; border-radius: 14px; background: #0a0a0f;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .07);
  user-select: none; isolation: isolate; contain: layout paint;
}
.pk-scene::before, .pk-scene::after { content: ''; position: absolute; z-index: 12; width: 24px; height: 24px; pointer-events: none;
  border: 2px solid rgba(255, 121, 0, .85); filter: drop-shadow(0 0 5px rgba(255, 121, 0, .55)); }
.pk-scene::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.pk-scene::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
.pk-bg { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; display: block; z-index: 0; pointer-events: none; }
.pk-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.pk-carts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* вытяжка над шахтой: жерло дышит светом, при броске вздрагивает и вспыхивает */
.pk-hopper { position: absolute; z-index: 5; pointer-events: none; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .65)); transform-origin: 50% 0;
  animation: pkHopperMove 7s ease-in-out infinite alternate; }
/* труба ездит влево-вправо по просвету шахты (свойство translate — отдельно
   от transform, который занят вздрагиванием при броске) */
@keyframes pkHopperMove { from { translate: calc(-1 * var(--hx, 0px)) 0; } to { translate: var(--hx, 0px) 0; } }
.pk-hopper img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 0;
  animation: pkHopperSway 2.7s ease-in-out infinite; }
/* труба живая: чуть извивается и подрагивает, пока ездит */
@keyframes pkHopperSway {
  0% { transform: rotate(-1.6deg) translateY(0) skewX(.4deg); }
  22% { transform: rotate(.9deg) translateY(.8%) skewX(-.6deg); }
  47% { transform: rotate(1.7deg) translateY(-.4%) skewX(.3deg); }
  68% { transform: rotate(-.7deg) translateY(.6%) skewX(-.5deg); }
  100% { transform: rotate(-1.6deg) translateY(0) skewX(.4deg); }
}
.pk-hopper-glow { position: absolute; left: 10%; right: 10%; bottom: -14%; height: 40%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 190, 90, .7) 0%, rgba(255, 130, 30, .35) 40%, rgba(255, 120, 20, 0) 72%);
  mix-blend-mode: screen; animation: pkHopperGlow 3.2s ease-in-out infinite; }
@keyframes pkHopperGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.pk-hopper.kick img { animation: pkHopperKick .5s ease-out; transform-origin: 50% 0; }
.pk-hopper.kick .pk-hopper-glow { animation: pkHopperFlash .5s ease-out; }
@keyframes pkHopperKick { 0% { transform: translateY(0); } 18% { transform: translateY(1.5%) scale(1.02, .97); } 50% { transform: translateY(-.6%); } 100% { transform: translateY(0); } }
@keyframes pkHopperFlash { 0% { opacity: 1; filter: brightness(2.2); } 100% { opacity: .7; filter: brightness(1); } }
.pk-pops { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
/* Без z-index: слой не создаёт контекст наложения, и пар с лампами
   (mix-blend-mode: screen) смешиваются со сценой, а не с пустым слоем —
   иначе чёрный фон спрайтов пара рисовался чёрными квадратами. */
.pk-ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* кран: едет по балке туда-обратно, ковш чуть качается */
.pk-crane { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; animation: pkCrane 26s ease-in-out infinite; }
.pk-crane img { display: block; width: 100%; height: auto; transform-origin: 50% 8%; animation: pkSway 5.5s ease-in-out infinite; }
@keyframes pkCrane { 0%, 8% { transform: translateX(0); } 46%, 54% { transform: translateX(var(--travel, 6%)); } 92%, 100% { transform: translateX(0); } }
@keyframes pkSway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
/* лампы: мягкое свечение, дышит и изредка мигает */
.pk-lamp { position: absolute; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 190, 90, .55) 0%, rgba(255, 140, 40, .22) 35%, rgba(255, 120, 20, 0) 70%);
  mix-blend-mode: screen; animation: pkLamp 7s ease-in-out infinite; }
@keyframes pkLamp { 0%, 100% { opacity: .75; } 38% { opacity: 1; } 41% { opacity: .55; } 44% { opacity: .95; } 70% { opacity: .7; } }
/* пар: поднимается и тает, два слоя на вентиль */
.pk-steam { position: absolute; width: 16%; transform: translate(-50%, -30%); mix-blend-mode: screen; opacity: 0; pointer-events: none;
  animation: pkSteam 7s ease-out infinite; }
.pk-steam-b { width: 12%; animation-duration: 9s; }
@keyframes pkSteam { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: .55; } 100% { opacity: 0; transform: translate(-40%, -130%) scale(1.5); } }
.pk-puff { position: absolute; transform: translate(-50%, -50%); mix-blend-mode: screen; pointer-events: none; animation: pkPuff 1.2s ease-out forwards; }
@keyframes pkPuff { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.5); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1.6); } }
/* риск меняет атмосферу: на высоком пар и лампы живее, сцена темнее у краёв */
.pk-scene[data-risk="high"] .pk-steam { animation-duration: 5s; }
.pk-scene[data-risk="high"] .pk-lamp { animation-duration: 4.5s; }
.pk-scene[data-risk="low"] .pk-steam { opacity: 0; animation-duration: 10s; }
.pk-scene::after { box-shadow: none; }

/* вагонетки: картинка + табличка с множителем; попадание — проседание и вспышка */
.pk-cart { position: absolute; display: block; transform-origin: 50% 100%; }
.pk-cart img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* подпись — цифрами внутри вагонетки, без плашки и неярко (владелец, 20.10);
   цвет по множителю остаётся, но приглушён */
.pk-plate { position: absolute; left: 10%; right: 10%; top: 18%; height: 36%; display: grid; place-items: center;
  color: color-mix(in srgb, var(--c) 45%, #e9dccb); font: 700 1em/1 var(--f-hd); letter-spacing: .01em; white-space: nowrap; overflow: hidden;
  opacity: .9; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .6); }
.pk-cart.hit { animation: pkCartHit .5s ease-out; }
.pk-cart.hit-big { animation: pkCartHitBig .7s ease-out; }
.pk-cart.hit .pk-plate, .pk-cart.hit-big .pk-plate { animation: pkPlate .7s ease-out; }
@keyframes pkCartHit { 0% { transform: translateY(0); } 25% { transform: translateY(4%) scaleY(.94); } 100% { transform: translateY(0); } }
@keyframes pkCartHitBig { 0% { transform: translateY(0); } 20% { transform: translateY(6%) scaleY(.9); } 55% { transform: translateY(-3%); } 100% { transform: translateY(0); } }
@keyframes pkPlate { 0% { filter: brightness(1); } 15% { filter: brightness(2.4); text-shadow: 0 0 14px var(--g); } 100% { filter: brightness(1); } }
.pk-pop { position: absolute; transform: translate(-50%, -100%); font: 800 15px/1 var(--f-hd); color: #ffd27a; white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 150, 50, .8), 0 1px 2px #000; animation: pkPop 1.2s ease-out forwards; }
.pk-pop.big { font-size: 20px; color: #fff; }
@keyframes pkPop { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -110%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -220%); } }

/* лента поверх сцены, справа под кнопкой «Как играть?»: полупрозрачная
   колонка плашек, новая вспыхивает (владелец, 20.10: игра во всю ширину) */
.pk-feed { position: absolute; top: 58px; right: 14px; z-index: 8; width: 128px; max-height: calc(100% - 230px);
  display: flex; flex-direction: column; min-width: 0; padding: 10px 8px; border-radius: 12px; overflow: hidden;
  background: rgba(8, 9, 12, .66); border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.pk-side-h { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 10px;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a9acb7; }
.pk-sel { height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05); color: #d8d8e2; font: 600 var(--fs-cap)/1 var(--f-ui); letter-spacing: 0; text-transform: none; min-width: 0; }
.pk-feed-list { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.pk-pill { display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px 5px; border-radius: 8px; font: 800 var(--fs-label)/1 var(--f-hd);
  letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; overflow: hidden; }
.pk-pill b { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.pk-pill-ava { flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #2a2a38, #16161f); color: #ffb454; font: 700 10px/1 var(--f-hd); box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.pk-pill-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-pill.new { animation: pkPill .35s ease-out; }
@keyframes pkPill { from { transform: scale(.7); opacity: 0; } }
.pk-pill.blue   { color: #c9c9d1; background: rgba(255,255,255,.05);  border-color: rgba(255,255,255,.14); }
.pk-pill.green  { color: #e2b27a; background: rgba(154,90,28,.22);    border-color: rgba(154,90,28,.6); }
.pk-pill.yellow { color: #ffd0a0; background: rgba(255,122,24,.18);   border-color: rgba(255,122,24,.65);  box-shadow: 0 0 10px rgba(255,122,24,.3); }
.pk-pill.orange { color: #ffe3b0; background: rgba(255,180,58,.2);    border-color: rgba(255,180,58,.7);   box-shadow: 0 0 12px rgba(255,180,58,.38); }
.pk-pill.red    { color: #ffc2bd; background: rgba(255,59,31,.2);     border-color: rgba(255,59,31,.7);    box-shadow: 0 0 14px rgba(255,59,31,.45); }
.pk-pill.wild   { color: #d6ecff; background: rgba(90,180,255,.2);    border-color: rgba(90,180,255,.75);  box-shadow: 0 0 14px rgba(90,180,255,.45); }

/* ---- бонусы (владелец, 20.10) ---- */
/* заряд вытяжки: плашка слева вверху сцены, напротив ленты */
.pk-charge { position: absolute; top: 58px; left: 14px; z-index: 8; width: 150px; padding: 8px 10px; border-radius: 10px; display: none;
  background: rgba(10, 11, 15, .62); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35); pointer-events: auto; }
.pk-charge.on { display: block; cursor: pointer; }
.pk-charge:hover { border-color: rgba(255, 122, 24, .5); }
.pk-charge-q { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; margin-left: 2px;
  background: rgba(255, 255, 255, .1); color: #c9c9d1; font: 700 9px/1 var(--f-hd); letter-spacing: 0; }
.pk-charge-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a9acb7; white-space: nowrap; }
.pk-charge-h b { color: #ffd27a; letter-spacing: 0; }
.pk-charge-bar { height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.pk-charge-bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .35s ease-out;
  background: linear-gradient(90deg, #9a5a1c, #ff7a18 60%, #ffd23b); box-shadow: 0 0 8px rgba(255, 122, 24, .7); }
.pk-charge-tx { margin-top: 5px; min-height: 1em; font: 600 var(--fs-micro)/1 var(--f-ui); color: var(--pk-tx2); white-space: nowrap; }
.pk-charge.boost { border-color: rgba(255, 122, 24, .7); box-shadow: 0 0 18px rgba(255, 122, 24, .35); animation: pkChargeBoost 1.4s ease-in-out infinite; }
.pk-charge.boost .pk-charge-bar i { background: linear-gradient(90deg, #ff7a18, #ff3b1f); }
.pk-charge.boost .pk-charge-tx { color: #ffd27a; }
@keyframes pkChargeBoost { 0%, 100% { box-shadow: 0 0 10px rgba(255, 122, 24, .3); } 50% { box-shadow: 0 0 22px rgba(255, 90, 24, .7); } }
/* перегрев: жерло пылает красным, пока идут усиленные ядра */
.pk-hopper.boost .pk-hopper-glow { animation-duration: 1.1s;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 120, 60, .9) 0%, rgba(255, 60, 20, .5) 40%, rgba(255, 40, 10, 0) 72%); }
.pk-hopper.overheat img { animation: pkOverheat 1.6s ease-out; }
@keyframes pkOverheat { 0% { filter: brightness(1); } 15% { filter: brightness(1.9) saturate(1.6) drop-shadow(0 0 14px #ff3b1f); } 100% { filter: brightness(1); } }
/* горячая вагонетка: тлеет, ярлык +25 % */
.pk-hot-tag { position: absolute; left: 50%; top: -24%; transform: translateX(-50%); display: none; padding: 2px 5px; border-radius: 5px;
  font: 800 1em/1 var(--f-hd); color: #fff; background: linear-gradient(180deg, #ff5a1f, #c4260c); box-shadow: 0 0 8px rgba(255, 59, 31, .8); white-space: nowrap; }
.pk-cart.hot .pk-hot-tag { display: block; animation: pkHotTag 1.2s ease-in-out infinite; }
.pk-cart.hot img { filter: drop-shadow(0 0 6px rgba(255, 70, 20, .9)) brightness(1.12) saturate(1.2); animation: pkHotCart 1.2s ease-in-out infinite; }
.pk-cart.hot .pk-plate { color: #ffb3a0; opacity: 1; text-shadow: 0 0 8px rgba(255, 59, 31, .9), 0 1px 2px #000; }
@keyframes pkHotCart { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 70, 20, .6)) brightness(1.05); } 50% { filter: drop-shadow(0 0 10px rgba(255, 70, 20, 1)) brightness(1.2) saturate(1.3); } }
@keyframes pkHotTag { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-12%); } }
/* кнопка на бесплатных ядрах — синяя, как WILD */
.pk-go.bonus { background: linear-gradient(180deg, #6cc0ff 0%, #2f8df0 55%, #1d6fd0 100%); color: #06152b;
  box-shadow: 0 12px 30px rgba(60, 150, 255, .35), inset 0 1px 0 rgba(220, 240, 255, .6), inset 0 -2px 0 rgba(10, 40, 100, .35); }
.pk-pop.wild { color: #9fd4ff; text-shadow: 0 0 10px rgba(90, 180, 255, .9), 0 1px 2px #000; }
.pk-empty { padding: 10px 4px; text-align: center; color: var(--tx-3); font: 400 var(--fs-cap)/1.3 var(--f-ui); }

/* ---- панель на полу шахты: поверх нижней части сцены, плашки
   полупрозрачные (владелец, 20.10: интерфейс внедрён в сцену) ---- */
.pk-bar { position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 9;
  display: grid; gap: 8px; align-items: stretch;
  grid-template-columns: minmax(430px, 1.9fr) minmax(190px, 1fr) minmax(120px, .6fr) minmax(200px, .9fr) minmax(210px, 1.05fr);
  grid-template-areas: "bet risk rows auto go"; }
/* ставка: поле и чипы в одну строку — панель должна умещаться на полу под треком */
.pk-bar .pk-c-bet { display: grid; grid-template-columns: minmax(190px, 1fr) auto; grid-template-areas: "amt chips"; align-items: center; }
.pk-bar .pk-c-bet .pk-amt-in { min-width: 110px; }
/* поля ввода без своего фона: только тонкая рамка на плашке (владелец, 20.10) */
.pk-bar .pk-amt-in { background: transparent; border-color: rgba(255, 255, 255, .16); }
.pk-bar .pk-amt-in:focus-within { border-color: var(--pk-or); box-shadow: none; }
.pk-bar .pk-amt-in input, .pk-bar .pk-amt-in input[type=number] { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.pk-bar .pk-amt-b { background: transparent; border-color: rgba(255, 255, 255, .16); }
.pk-bar .pk-chip { padding: 0 8px; font-size: var(--fs-cap); }
.pk-bar .pk-chips { gap: 4px; }
/* автоигра: переключатель, счётчик с гарантированной шириной, подпись */
.pk-bar .pk-auto .pk-amt-sm { flex: none; width: 150px; }
.pk-amt-sm .pk-amt-in { padding: 0 6px; min-width: 0; }
.pk-amt-sm .pk-amt-in input { min-width: 28px; }
/* бесплатные ядра от WILD летят ставкой и набором того WILD: ставка, риск
   и ряды заблокированы, пока они не кончатся */
.pk-bar.lock .pk-c-bet, .pk-bar.lock .pk-c-risk, .pk-bar.lock .pk-c-rows { opacity: .45; pointer-events: none; }
/* на полу заголовки карточек не нужны: кнопки говорят сами за себя, а
   высоты под треком мало; баланс — в строке под панелью */
.pk-bar .pk-card-h { display: none; }
.pk-c-bet .pk-card-h { grid-area: h; }
.pk-c-bet .pk-amt { grid-area: amt; }
.pk-c-bet .pk-chips { grid-area: chips; }
.pk-c-bet { grid-area: bet; } .pk-c-risk { grid-area: risk; } .pk-c-rows { grid-area: rows; } .pk-c-auto { grid-area: auto; }
.pk-go { grid-area: go; } .pk-maxwin { grid-area: max; }
.pk-card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding: 8px 12px; border-radius: 10px;
  background: rgba(10, 11, 15, .72); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgba(0, 0, 0, .35); }
.pk-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
  font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a9acb7; white-space: nowrap; }
.pk-bal { font: 600 var(--fs-micro)/1 var(--f-ui); letter-spacing: .02em; text-transform: none; color: var(--pk-tx2); }
.pk-bal b { margin-left: 4px; color: #fff; font: 800 var(--fs-label)/1 var(--f-hd); }
.pk-amt { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 6px; }
.pk-amt-b { height: 38px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .04); color: #ececf2; font: 700 18px/1 var(--f-hd); }
.pk-amt-b:hover { border-color: rgba(255, 122, 24, .5); color: #ffa838; }
.pk-amt-in { display: flex; align-items: center; gap: 8px; min-width: 0; height: 38px; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .11); background: var(--pk-bg); transition: border-color .15s, box-shadow .15s; }
.pk-amt-in:focus-within { border-color: var(--pk-or); box-shadow: 0 0 0 3px rgba(255, 121, 0, .18); }
.pk-amt-in input { flex: 1; width: 100%; min-width: 48px; border: 0; background: none; outline: none; color: #fff;
  font: 800 17px/1 var(--f-hd); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.pk-amt-in input::-webkit-outer-spin-button, .pk-amt-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pk-coin { width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #e0920f 70%); box-shadow: 0 0 6px rgba(255,168,56,.5); }
.pk-amt-sm { grid-template-columns: 36px minmax(0, 1fr) 36px; }
.pk-amt-sm .pk-amt-b, .pk-amt-sm .pk-amt-in { height: 36px; }
.pk-chips, .pk-segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pk-segs { grid-template-columns: repeat(3, 1fr); }
.pk-chip, .pk-seg { height: 38px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px;
  cursor: pointer; background: rgba(255, 255, 255, .03); color: #c4c4d0; font: 700 var(--fs-label)/1 var(--f-hd); }
.pk-chip:hover, .pk-seg:hover { border-color: rgba(255, 122, 24, .45); color: #ffa838; }
.pk-seg.on { border-color: #ff7a18; color: #ffd23b; background: rgba(255, 122, 24, .14); box-shadow: 0 0 0 1px rgba(255, 122, 24, .4) inset; }
.pk-chip.is-max { color: #ffa838; }
.pk-auto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-auto .pk-amt { flex: 1; min-width: 0; }
.pk-auto-tx { font: 600 var(--fs-cap)/1 var(--f-ui); color: var(--pk-tx2); white-space: nowrap; }
.pk-sw { flex: none; position: relative; width: 44px; height: 24px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06); cursor: pointer; padding: 0; transition: background .15s, border-color .15s; }
.pk-sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #8a8a9a; transition: transform .15s, background .15s; }
.pk-sw.on { background: rgba(255, 122, 24, .25); border-color: rgba(255, 122, 24, .7); }
.pk-sw.on i { transform: translateX(20px); background: var(--pk-amb); }
.pk-go { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 62px; padding: 0 14px 0 12px; border: 0; border-radius: 10px;
  cursor: pointer; text-align: left; color: #160900;
  background: linear-gradient(180deg, #ff9a2e 0%, var(--pk-or) 55%, #ee6200 100%);
  box-shadow: 0 12px 30px rgba(255, 121, 0, .32), inset 0 1px 0 rgba(255, 230, 190, .6), inset 0 -2px 0 rgba(120, 40, 0, .35);
  transition: filter .15s, box-shadow .15s, transform .08s; }
.pk-go:hover:not(.off) { filter: brightness(1.06); }
.pk-go:active:not(.off) { transform: translateY(1px); }
.pk-go.off { opacity: .55; cursor: default; box-shadow: none; }
.pk-go.stop { background: linear-gradient(180deg, #3a3a46, #22222c); color: #ffd27a; box-shadow: none; }
.pk-go-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: rgba(40, 14, 0, .16); }
.pk-go-ic svg { width: 24px; height: 24px; }
.pk-go-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pk-go-tx b { font: 800 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; }
.pk-go-tx small { font: 600 var(--fs-micro)/1 var(--f-ui); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-go.stop .pk-go-ic { background: rgba(255, 210, 122, .12); }
.pk-maxwin { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; text-align: center; font: 600 var(--fs-cap)/1.2 var(--f-ui); color: #b9bac6; text-shadow: 0 1px 2px #000; }
.pk-maxwin .pk-bal { color: #b9bac6; }
.pk-maxwin b { color: #ffd27a; font-family: var(--f-hd); }

/* ---- брейкпоинты по ширине страницы ---- */
@container pkpage (max-width: 1180px) {
  .pk-bar { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr);
    grid-template-areas: "bet risk rows" "auto go go"; }
}
@container pkpage (max-width: 760px) {
  /* телефон: панель и лента под сценой, не поверх — на 375 px поверх не
     помещаются */
  .pk-bar { position: static; margin-top: 8px; gap: 10px; }
  .pk-bar .pk-c-bet { display: flex; }
  .pk-bar .pk-card-h { display: flex; }
  .pk-card { background: linear-gradient(180deg, #15171c, var(--pk-card)); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pk-feed { position: static; width: auto; max-height: none; margin-top: 8px;
    flex-direction: row; align-items: center; padding: 6px 8px; border-radius: 10px;
    background: linear-gradient(180deg, #15171c, var(--pk-card)); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pk-side-h { flex-direction: row; align-items: center; margin: 0 8px 0 0; }
  .pk-side-h .pk-sel { display: none; }
  .pk-feed-list { flex-direction: row; flex: 1; min-width: 0; }
  .pk-pill { flex: none; width: 84px; padding: 5px 6px 5px 4px; font-size: var(--fs-cap); }
  .pk-charge { top: 8px; left: 8px; width: 120px; padding: 6px 8px; }
  .pk-bar { grid-template-columns: 1fr 1fr; grid-template-areas: "bet bet" "risk risk" "rows auto" "go go"; }
  .pk-go { min-height: 56px; }
}
@media (max-width: 880px) {
  .pk-scene { border-radius: 10px; }
  .pk-pop { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-crane, .pk-crane img, .pk-lamp, .pk-steam, .pk-hopper, .pk-hopper-glow, .pk-charge, .pk-cart.hot img, .pk-hot-tag { animation: none !important; }
  .pk-hopper { translate: 0 0; }
  .pk-steam { opacity: .35; }
}
/* Способы оплаты под игрой не нужны (владелец, 20.10). Подвал живёт вне
   .content, поэтому условие — от body. */
body:has(#page-plinko.on) .ftr-pay { display: none !important; }

/* ================= ALIVE · PLINKO — ПРАВИЛА С ДЕМО (plinkorules.js, 2026-10-20) =================
   Окно с вкладками; каждая механика показана маленькой сценой на CSS-анимациях. */
.modal:has(.pkr) { max-width: 720px; }
.pkr { position: relative; }
.pkr > h3 { margin: 0 0 10px; padding-right: 36px; font: 900 20px/1.1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.pkr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pkr-tab { height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .03); color: #c4c4d0; font: 700 var(--fs-label)/1 var(--f-hd); }
.pkr-tab:hover { border-color: rgba(255, 122, 24, .45); color: #ffa838; }
.pkr-tab.on { border-color: #ff7a18; color: #ffd23b; background: rgba(255, 122, 24, .14); }
.pkr-body { min-height: 300px; }
.pkr-body p { margin: 0 0 12px; font: 500 var(--fs-label)/1.45 var(--f-ui); color: #d8d9df; }
.pkr-body p b, .pkr-list b, .pkr-note b { color: #ffd27a; }
.pkr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.pkr-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a9acb7; }
.pkr-h small { font: 500 var(--fs-micro)/1 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--tx-3); }
.pkr-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.pkr-segs { display: flex; gap: 4px; }
.pkr-seg { height: 30px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .03); color: #c4c4d0; font: 700 var(--fs-cap)/1 var(--f-hd); }
.pkr-seg.on { border-color: #ff7a18; color: #ffd23b; background: rgba(255, 122, 24, .14); }
/* живая таблица: столбик — шанс, подпись — множитель */
.pkr-table { display: flex; gap: 4px; align-items: stretch; height: 118px; padding: 8px 8px 6px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .06); }
.pkr-bin { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; border-radius: 6px; cursor: pointer; outline: 0; --c: #3a3d46; }
.pkr-bin:hover, .pkr-bin:focus-visible { background: rgba(255, 255, 255, .06); }
.pkr-bin .pkr-bar { width: 60%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 40%, #000)); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 50%, transparent); }
.pkr-bin b { font: 800 var(--fs-cap)/1 var(--f-hd); color: color-mix(in srgb, var(--c) 55%, #fff); white-space: nowrap; }
.pkr-bin small { font: 600 9px/1 var(--f-ui); color: var(--tx-3); white-space: nowrap; }
.pkr-bin.t-green { --c: #9a5a1c; } .pkr-bin.t-yellow { --c: #ff7a18; } .pkr-bin.t-orange { --c: #ffb43a; } .pkr-bin.t-red { --c: #ff3b1f; }
.pkr-note { margin-top: 8px; min-height: 2.6em; font: 500 var(--fs-cap)/1.4 var(--f-ui); color: #cfd1d8; }
/* демо-сцена */
.pkr-demo { position: relative; height: 240px; margin: 4px 0 10px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 110%, rgba(255, 122, 24, .18), transparent 55%), linear-gradient(180deg, #121318, #090a0d);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6); }
.pkr-demo::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, rgba(255, 170, 70, .5) 1.2px, transparent 1.6px); background-size: 26px 22px; background-position: 50% 78px; }
.pkr-hopper { position: absolute; top: -6px; left: 50%; width: 46px; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.pkr-hopper img { display: block; width: 100%; height: auto; transform-origin: 50% 0; animation: pkHopperSway 2.7s ease-in-out infinite; }
.pkr-hopper.kick img { animation: pkHopperKick .4s ease-out; }
.pkr-hopper-glow { position: absolute; left: 10%; right: 10%; bottom: -10%; height: 36%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 190, 90, .7) 0%, rgba(255, 130, 30, .35) 40%, rgba(255, 120, 20, 0) 72%); animation: pkHopperGlow 3.2s ease-in-out infinite; }
.pkr-demo.boost .pkr-hopper-glow { animation-duration: 1.1s; background: radial-gradient(ellipse at 50% 40%, rgba(255, 120, 60, .9) 0%, rgba(255, 60, 20, .5) 40%, rgba(255, 40, 10, 0) 72%); }
.pkr-lane { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pkr-ball { position: absolute; top: 74px; left: calc(50% + var(--tx, 0%)); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4d6, #ffb454 45%, #ff6a00 80%); box-shadow: 0 0 14px rgba(255, 150, 50, .9), 0 0 4px #ffd27a;
  animation: pkrFall .65s cubic-bezier(.35, 0, .8, .6) forwards; }
.pkr-ball.wild, .pkr-ball.free { background: radial-gradient(circle at 35% 30%, #e8f6ff, #5ab4ff 45%, #1d6fd0 80%); box-shadow: 0 0 14px rgba(90, 180, 255, .95), 0 0 4px #bfe3ff; }
.pkr-ball.free { opacity: .85; }
.pkr-ball.hot { box-shadow: 0 0 18px rgba(255, 70, 20, 1), 0 0 6px #ffd27a; }
.pkr-ball.hot::after { content: '⚡'; position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font-size: 12px; }
@keyframes pkrFall { 0% { transform: translateY(0) scale(.9); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(118px) scale(1); opacity: 1; } }
.pkr-cart { position: absolute; bottom: 14px; left: 50%; width: 110px; transform: translateX(-50%); z-index: 1; transform-origin: 50% 100%; }
.pkr-cart img { display: block; width: 100%; height: auto; }
.pkr-cart b { position: absolute; left: 10%; right: 10%; top: 16%; text-align: center; font: 800 15px/1 var(--f-hd); color: #e9dccb; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .6); white-space: nowrap; }
.pkr-cart.hit { animation: pkCartHit .5s ease-out; }
.pkr-demo-charge .pkr-cart { left: 36%; }
.pkr-demo-charge .pkr-hopper { left: 36%; }
.pkr-demo-charge .pkr-ball { left: calc(36% + var(--tx, 0%)); }
.pkr-gauge { position: absolute; top: 14px; right: 14px; width: 170px; padding: 8px 10px; border-radius: 10px; z-index: 4;
  background: rgba(10, 11, 15, .72); border: 1px solid rgba(255, 255, 255, .1); }
.pkr-gauge-h { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 6px; font: 700 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a9acb7; }
.pkr-gauge-h b { color: #ffd27a; letter-spacing: 0; }
.pkr-gauge-bar { height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.pkr-gauge-bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .3s ease-out; background: linear-gradient(90deg, #9a5a1c, #ff7a18 60%, #ffd23b); box-shadow: 0 0 8px rgba(255, 122, 24, .7); }
.pkr-gauge-tx { margin-top: 5px; font: 600 var(--fs-micro)/1 var(--f-ui); color: var(--pk-tx2); white-space: nowrap; }
.pkr-demo.boost .pkr-gauge { border-color: rgba(255, 122, 24, .7); animation: pkChargeBoost 1.4s ease-in-out infinite; }
.pkr-demo.boost .pkr-gauge-bar i { background: linear-gradient(90deg, #ff7a18, #ff3b1f); }
.pkr-demo.boost .pkr-gauge-tx { color: #ffd27a; }
.pkr-flash { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(.6); z-index: 5; pointer-events: none; opacity: 0;
  padding: 8px 16px; border-radius: 10px; background: linear-gradient(180deg, #ff5a1f, #c4260c); color: #fff; font: 900 20px/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 30px rgba(255, 59, 31, .8); white-space: nowrap; }
.pkr-flash.blue { background: linear-gradient(180deg, #6cc0ff, #1d6fd0); color: #06152b; box-shadow: 0 0 30px rgba(90, 180, 255, .8); }
.pkr-flash.on { animation: pkrFlash 1.5s ease-out forwards; }
@keyframes pkrFlash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.pkr-count { position: absolute; left: 14px; bottom: 10px; z-index: 4; font: 600 var(--fs-cap)/1.3 var(--f-ui); color: #cfd1d8; }
.pkr-count b { color: #ffd27a; }
.pkr-gobtn { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: flex; flex-direction: column; gap: 3px; min-width: 120px; padding: 10px 14px; border-radius: 10px; color: #160900;
  background: linear-gradient(180deg, #ff9a2e 0%, var(--pk-or) 55%, #ee6200 100%); box-shadow: 0 10px 24px rgba(255, 121, 0, .3); transition: background .2s; }
.pkr-gobtn b { font: 800 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; }
.pkr-gobtn small { font: 600 var(--fs-micro)/1 var(--f-ui); opacity: .8; white-space: nowrap; }
.pkr-gobtn.bonus { background: linear-gradient(180deg, #6cc0ff 0%, #2f8df0 55%, #1d6fd0 100%); color: #06152b; box-shadow: 0 10px 24px rgba(60, 150, 255, .35); }
.pkr-demo-wild .pkr-cart, .pkr-demo-wild .pkr-hopper { left: 36%; }
.pkr-demo-wild .pkr-ball { left: calc(36% + var(--tx, 0%)); }
/* горячая: ряд из пяти вагонеток, клик — ядро туда */
.pkr-demo-hot .pkr-ball { top: 66px; }
.pkr-row { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; gap: 2%; padding: 0 4%; z-index: 1; }
.pkr-cart.mini { position: relative; left: auto; bottom: auto; width: 17%; transform: none; cursor: pointer; outline: 0; border-radius: 8px; }
.pkr-cart.mini:hover, .pkr-cart.mini:focus-visible { filter: brightness(1.15); }
.pkr-cart.mini b { font-size: 13px; }
.pkr-cart.mini .pkr-hot-tag { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); display: none; padding: 2px 5px; border-radius: 5px;
  font: 800 10px/1 var(--f-hd); color: #fff; background: linear-gradient(180deg, #ff5a1f, #c4260c); box-shadow: 0 0 8px rgba(255, 59, 31, .8); }
.pkr-cart.mini .pkr-hot-timer { position: absolute; left: 10%; bottom: -8px; height: 3px; width: 0; border-radius: 2px; background: #ff5a1f; box-shadow: 0 0 6px rgba(255, 59, 31, .9); transition: width .12s linear; }
.pkr-cart.mini.hot .pkr-hot-tag { display: block; animation: pkHotTag 1.2s ease-in-out infinite; }
.pkr-cart.mini.hot img { animation: pkHotCart 1.2s ease-in-out infinite; }
.pkr-cart.mini.hot b { color: #ffb3a0; text-shadow: 0 0 8px rgba(255, 59, 31, .9), 0 1px 2px #000; }
/* подписи и списки */
.pkr-try { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font: 500 var(--fs-cap)/1.35 var(--f-ui); color: #b8b8c4; }
.pkr-try .btn { flex: none; }
.pkr-list { margin: 0 0 10px; padding: 0 0 0 18px; font: 500 var(--fs-label)/1.45 var(--f-ui); color: #d8d9df; }
.pkr-list li { margin: 0 0 4px; }
.pkr-formula { margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .06);
  font: 700 var(--fs-ui)/1.3 var(--f-hd); color: #ffd27a; }
.pkr-formula small { display: block; margin-top: 4px; font: 500 var(--fs-cap)/1.35 var(--f-ui); color: #b8b8c4; }
.pkr-tbl { margin: 8px 0 12px; }
.pkr-tbl td, .pkr-tbl th { padding: 5px 8px; text-align: left; }
.pkr-tbl td b { color: #ffd27a; }
.pkr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
@media (max-width: 760px) {
  .pkr-steps { grid-template-columns: minmax(0, 1fr); }
  .pkr-demo { height: 220px; }
  .pkr-gauge { width: 140px; }
  .pkr-tabs { gap: 4px; } .pkr-tab { height: 30px; padding: 0 9px; font-size: var(--fs-cap); }
  .pkr-foot { flex-direction: column-reverse; align-items: stretch; }
  .pkr-tbl { font-size: var(--fs-cap); }
}
@media (prefers-reduced-motion: reduce) {
  .pkr-hopper img, .pkr-hopper-glow, .pkr-cart.mini.hot img, .pkr-cart.mini .pkr-hot-tag, .pkr-demo.boost .pkr-gauge { animation: none !important; }
}


/* ============================================================ ALIVE · ОКНО ВЫИГРЫША «ПОБЕДА» (wp2)
   Переодетое окно winpicker.js под макет «ПОБЕДА»: hero с сундуком и суммой,
   выпадающие фильтры, сетка карточек с чекбоксом в углу и футер со счётом и
   двумя кнопками рядом — «Забрать скины» и «Вывести на баланс».
   Логика и маршруты не менялись — только вид (см. frontend/js/winpicker.js). */
.wp2 { gap: 14px; position: relative; }
.wp2 .wp-skinsview { display: flex; flex-direction: column; gap: 12px; }
.wp2 .wp-x {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  font-size: 15px; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(12, 14, 20, .55); border: 1px solid rgba(255, 255, 255, .14);
  transition: background .15s;
}
.wp2 .wp-x:hover { background: rgba(12, 14, 20, .82); }

/* --- hero --- */
.wp2 .wp-hero {
  position: relative; overflow: hidden; border-radius: 18px; min-height: 150px;
  padding: 22px 20px;
  background: radial-gradient(130% 120% at 85% 20%, rgba(255, 122, 24, .28), transparent 55%), #0e1016;
  border: 1px solid rgba(255, 168, 56, .22);
}
.wp2 .wp-hero-img {
  position: absolute; right: 0; top: 0; height: 100%; width: 60%;
  object-fit: cover; object-position: right center; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 52%);
          mask-image: linear-gradient(90deg, transparent, #000 52%);
}
.wp2 .wp-hero-l { position: relative; z-index: 2; }
.wp2 .wp-pobeda {
  font: 800 34px/0.95 var(--f-hd); letter-spacing: .02em; color: #fff;
  text-transform: uppercase; text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
.wp2 .wp-hero .wp-kicker {
  margin-top: 4px; font-size: var(--fs-cap); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx-3);
}
.wp2 .wp-hero .wp-amount {
  margin-top: 8px; display: flex; align-items: center;
  font: 800 40px/1 var(--f-hd); color: var(--or-2); white-space: nowrap;
}
.wp2 .wp-hero .wp-amount .coin { width: .8em; height: .8em; margin-right: .18em; }
/* Таймер — тонкой полосой вдоль низа hero (решение владельца): раньше висел
   отдельной плашкой под суммой и забирал место. Тёмный градиент снизу, чтобы
   читался поверх картинки сундука; на узком экране хвост фразы режется ellipsis. */
.wp2 .wp-hero .wp-timer {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 3; margin: 0;
  display: flex; align-items: center; gap: 8px; width: auto; max-width: none;
  padding: 7px 20px; border: 0; border-radius: 0 0 18px 18px;
  background: linear-gradient(transparent, rgba(6, 7, 11, .82) 55%);
}
.wp2 .wp-hero .wp-timer b { font-size: var(--fs-label); }
.wp2 .wp-hero .wp-timer span {
  font-size: var(--fs-cap); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- переключатель режимов --- */
.wp2 .wp-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wp2 .wp-mode-b {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 14px; border-radius: 14px; cursor: pointer;
  font: 700 var(--fs-body)/1 var(--f-hd); color: var(--tx-2);
  background: var(--panel); border: 1px solid var(--line); transition: all .15s;
}
.wp2 .wp-mode-b .wp-mi { width: 1.4em; height: 1.4em; color: inherit; flex: none; }
.wp2 .wp-mode-b .coin { width: 1.25em; height: 1.25em; margin: 0; flex: none; }
.wp2 .wp-mode-b.on {
  color: #fff; background: var(--or-soft); border-color: var(--or);
  box-shadow: 0 0 0 1px var(--or) inset, 0 6px 20px rgba(255, 122, 24, .18);
}
.wp2 .wp-mode-b.on .wp-mi { color: var(--or-2); }

/* --- строка бюджета --- */
.wp2 .wp-budget {
  text-align: center; color: var(--tx-2); font-size: var(--fs-label);
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
}

/* --- фильтры-выпадашки: общий .dd из dropdown.js, как в апгрейде --- */
.wp2 .wp-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wp2 .wp-tools .dd { display: flex; width: 100%; }
.wp2 .wp-tools .dd-btn {
  flex: 1; width: 100%; justify-content: space-between;
  height: 46px; padding: 0 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx);
  font: 600 var(--fs-label)/1 var(--f-ui);
}
.wp2 .wp-tools .dd-list { font-size: var(--fs-label); }

/* --- поиск --- */
.wp2 .wp-search {
  width: 100%; height: 46px; padding: 0 15px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx); font-size: var(--fs-label);
}

/* --- сетка карточек с чекбоксом в углу --- */
.wp2 .wp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 44vh; }
.wp2 .wp-grid .item { position: relative; cursor: pointer; }
/* Чекбокс рисуем через ::before: ::after у карточки занят базовым свечением. */
.wp2 .wp-grid .item::before {
  content: ""; position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 22px; height: 22px; border-radius: 7px; box-shadow: none;
  background: rgba(10, 12, 18, .55); border: 1.5px solid rgba(255, 255, 255, .32); transition: all .12s;
}
.wp2 .wp-grid .item.sel::before {
  background: var(--or) center / 15px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23241200' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E");
  border-color: var(--or); box-shadow: 0 0 0 3px rgba(255, 122, 24, .25);
}
.wp2 .wp-grid .item.sel { box-shadow: 0 0 0 2px var(--or), 0 8px 22px rgba(255, 122, 24, .2); }
.wp2 .wp-grid .item.wp-over::before { display: none; }

/* --- денежный режим --- */
.wp2 .wp-cashview {
  padding: 26px 18px; text-align: center; color: var(--tx-2); line-height: 1.5;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
}

/* --- футер: липнет к низу скроллящейся модалки, чтобы кнопка «Вывести» была
   видна всегда, даже когда сетка длиннее экрана (.modal скроллится целиком,
   max-height:86vh). Отрицательные поля гасят padding модалки на всю ширину. --- */
.wp2 .wp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  position: sticky; bottom: -20px; z-index: 5;
  margin: 0 -20px -20px; padding: 13px 20px;
  background: var(--panel); border-top: 1px solid var(--line);
}
.wp2 .wp-bill { padding: 0; margin: 0; background: none; border: 0; display: block; }
.wp2 .wp-bill-n { font-size: var(--fs-label); color: var(--tx-2); }
.wp2 .wp-bill-sum {
  margin-top: 2px; display: flex; align-items: center; gap: 6px;
  font: 800 20px/1 var(--f-hd); color: #fff;
}
.wp2 .wp-bill-slash { color: var(--tx-3); font-weight: 600; }
.wp2 .wp-cta {
  flex: 1 1 auto; max-width: 62%; min-height: 56px; padding: 0 20px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 14px; cursor: pointer; white-space: nowrap;
  font: 800 var(--fs-body) var(--f-hd); color: #241200;
  background: linear-gradient(180deg, #ffb43c, #ff7a18);
  box-shadow: 0 10px 26px rgba(255, 122, 24, .32); transition: filter .15s, transform .05s;
}
.wp2 .wp-cta .coin { width: 1em; height: 1em; }
.wp2 .wp-cta:hover { filter: brightness(1.05); }
.wp2 .wp-cta:active { transform: translateY(1px); }
.wp2 .wp-cta:disabled { opacity: .55; cursor: default; filter: none; }
/* Два действия рядом, одинаковой ширины: «Забрать скины» (основная, оранжевая)
   и «Вывести на баланс» (вторичная). Делят правую часть футера поровну и не
   наезжают на бейдж «Выбрано N / …» слева. */
.wp2 .wp-bill { flex: 0 0 auto; }
.wp2 .wp-acts { display: flex; gap: 12px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.wp2 .wp-acts .wp-cta { flex: 1 1 0; min-width: 0; max-width: 360px; }
.wp2 .wp-cta-ghost {
  background: var(--bg-2); background-image: none; color: var(--tx);
  border: 1px solid var(--line); box-shadow: none;
}
.wp2 .wp-cta-ghost:not(:disabled):hover { filter: none; border-color: var(--or); color: #fff; }

@media (max-width: 560px) {
  .wp2 .wp-pobeda { font-size: 28px; }
  .wp2 .wp-hero .wp-amount { font-size: 34px; }
  .wp2 .wp-hero-img { height: 100%; opacity: .92; }
  .wp2 .wp-foot { flex-direction: column; align-items: stretch; }
  .wp2 .wp-cta { max-width: none; width: 100%; min-height: 50px; }
  /* Две кнопки — в столбик на всю ширину, чтобы длинная «Вывести на баланс»
     не ломалась в тесной половине. */
  .wp2 .wp-acts { flex-direction: column; width: 100%; }
  .wp2 .wp-acts .wp-cta { max-width: none; }
  /* Фильтры и поиск — тоньше (46 → 40) и мельче текст: на телефоне поля
     смотрелись толстовато. */
  .wp2 .wp-tools .dd-btn, .wp2 .wp-search { height: 40px; }
  .wp2 .wp-tools .dd-btn, .wp2 .wp-tools .dd-list, .wp2 .wp-search { font-size: var(--fs-cap); }
}

/* ================= ALIVE · PLINKO — ТЕЛЕФОН (2026-10-22, «plinko mob ref») =================
   Один экран без прокрутки, 1 в 1 с референсом владельца. Размеры — от
   ширины сцены (cqw: 1 cqw = 1 % ширины, на референсе 853 px это 8.53 px),
   вертикальные позиции — в % высоты сцены: референс нарисован под ширину
   ~427 px, и в пикселях на 360–390 px всё выходило крупнее. Режим включает
   plinko.js классом .mob на #pkRoot (сцена уже 600 px). */
.pk-charge-ic, .pk-l-mob { display: none; }
.pk.mob { gap: 0; }
.pk.mob .pk-stage { margin-top: -72px; container-type: inline-size; }   /* шапка 60 + отступ 12 */
.pk.mob .pk-scene { border-radius: 0; box-shadow: none; }
.pk.mob .pk-scene::before, .pk.mob .pk-scene::after { display: none; }
.pk.mob .pk-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 7;
  pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 8, .55) 0%, rgba(5, 5, 8, .22) 60%, rgba(5, 5, 8, 0) 100%); }

/* «Как играть?» — справа в строке заряда. Названия на сцене нет: оно в
   шапке (владелец, 22.10). */
.pk.mob .howto-btn { top: 12.6%; right: 3.6cqw; z-index: 10; width: auto; height: 7.6cqw; padding: 0 3cqw 0 2.2cqw; gap: 1.8cqw;
  border-radius: 4cqw; background: rgba(16, 16, 20, .78); border: 1px solid rgba(255, 255, 255, .13);
  color: #e9e9ee; font: 500 2.9cqw/1 var(--f-ui); }
.pk.mob .howto-btn > span { display: inline; }
.pk.mob .howto-btn > svg { width: 4cqw; height: 4cqw; color: #e9e9ee; }

/* полоса последних: общая тёмная подложка, пять плашек */
.pk.mob .pk-feed { position: absolute; z-index: 8; top: 7.8%; left: 3.6cqw; right: 3.6cqw; width: auto; max-height: none;
  margin: 0; padding: 1.1cqw; display: block; border-radius: 2.6cqw;
  background: rgba(10, 10, 14, .72); border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.pk.mob .pk-side-h { display: none; }
.pk.mob .pk-feed-list { display: flex; flex-direction: row; gap: 1.3cqw; overflow: hidden; }
.pk.mob .pk-pill { flex: 1 1 0; min-width: 0; width: auto; height: 6.2cqw; padding: 0 1cqw 0 2.4cqw; gap: 1cqw;
  border-radius: 1.8cqw; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .05);
  color: #c9cad2; font: 500 2.65cqw/1 var(--f-ui); letter-spacing: 0; box-shadow: none; }
.pk.mob .pk-pill:nth-child(n+6) { display: none; }
.pk.mob .pk-pill-ava { display: none; }
.pk.mob .pk-pill::before { content: ''; flex: none; width: 1.9cqw; height: 1.9cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b9c2d6, #5f6984 70%); box-shadow: 0 0 5px rgba(120, 132, 160, .45); }
.pk.mob .pk-pill b { flex: 1; min-width: 0; text-align: center; font-weight: 500; text-overflow: clip; }
.pk.mob .pk-pill.green::before { background: radial-gradient(circle at 35% 30%, #f3c27a, #b8691c 70%); }
.pk.mob .pk-pill:is(.yellow, .orange, .red) { color: #ffb347;
  background: linear-gradient(180deg, rgba(255, 122, 24, .28), rgba(110, 36, 0, .4)); border-color: rgba(255, 140, 40, .5); }
.pk.mob .pk-pill:is(.yellow, .orange, .red) b { font-weight: 700; }
.pk.mob .pk-pill:is(.yellow, .orange, .red)::before { background: radial-gradient(circle at 35% 30%, #ffd08a, #ff7a18 65%);
  box-shadow: 0 0 7px rgba(255, 138, 31, .95); }
.pk.mob .pk-pill.wild::before { background: radial-gradient(circle at 35% 30%, #cfe9ff, #3d8ff0 70%); }

/* заряд вытяжки */
.pk.mob .pk-charge { top: 12.2%; left: 3.6cqw; width: 35.2cqw; min-width: 0; max-width: none; padding: 1.6cqw 2.4cqw 1.6cqw 1.6cqw;
  border-radius: 2.8cqw; background: rgba(12, 12, 16, .84); border: 1px solid rgba(255, 255, 255, .11);
  grid-template-columns: 6cqw minmax(0, 1fr); column-gap: 2cqw; row-gap: 1.2cqw; align-items: center; }
.pk.mob .pk-charge.on { display: grid; }
.pk.mob .pk-charge-ic { display: grid; place-items: center; grid-row: 1 / span 2; width: 6cqw; height: 6cqw; border-radius: 1.5cqw;
  background: linear-gradient(180deg, #2e3037, #16171c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 5px rgba(0, 0, 0, .5);
  color: #d6d9e1; }
.pk.mob .pk-charge-ic svg { width: 4.2cqw; height: 4.2cqw; }
.pk.mob .pk-charge.boost .pk-charge-ic { color: #ffb347; }
.pk.mob .pk-charge.boost .pk-charge-ic svg { animation: pkFan .6s linear infinite; }
@keyframes pkFan { to { transform: rotate(360deg); } }
.pk.mob .pk-charge-h { margin: 0; font: 600 2.2cqw/1 var(--f-ui); letter-spacing: .02em; color: #ececf1; white-space: nowrap; }
.pk.mob .pk-charge-h b { color: #ffb347; margin-left: 1.4cqw; font-weight: 800; }
.pk.mob .pk-charge-q { display: none; }
.pk.mob .pk-charge-bar { height: 1.2cqw; }
.pk.mob .pk-charge-tx { grid-column: 2; margin: 0; font-size: 2.1cqw; }
.pk.mob .pk-charge-tx:empty { display: none; }

/* ящики с множителями: металлическая рамка; дорогие — раскалённые изнутри */
.pk.mob .pk-cart { border-radius: 4px; overflow: visible;
  background: linear-gradient(180deg, #24252b 0%, #17181c 60%, #0f1013 100%);
  border: 2px solid #3d3f47;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -3px 0 rgba(0, 0, 0, .55),
    0 5px 10px rgba(0, 0, 0, .7); }
.pk.mob .pk-cart img { display: none; }
.pk.mob .pk-plate { left: 0; right: 0; top: 0; height: 100%; opacity: 1; color: #dedfe5; font-weight: 500;
  letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); font-family: var(--f-ui); }
.pk.mob .pk-cart:is(.t-green, .t-yellow, .t-orange, .t-red) {
  background: radial-gradient(ellipse at 50% 55%, #8a2a06 0%, #4a1203 70%, #2c0a02 100%); border-color: #ff8a1f;
  box-shadow: 0 0 10px rgba(255, 110, 20, .55), inset 0 0 8px rgba(255, 120, 30, .55), inset 0 2px 0 rgba(255, 200, 140, .3),
    0 5px 10px rgba(0, 0, 0, .65); }
.pk.mob .pk-cart:is(.t-green, .t-yellow, .t-orange, .t-red) .pk-plate { color: #ffb13a; font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 140, 30, .6), 0 1px 2px rgba(40, 8, 0, .9); }
.pk.mob .pk-cart.hot { border-color: #ff3b1f;
  background: radial-gradient(ellipse at 50% 55%, #7a0f08 0%, #420604 70%, #260302 100%);
  box-shadow: 0 0 12px rgba(255, 59, 31, .8), inset 0 0 8px rgba(255, 60, 30, .55), 0 5px 10px rgba(0, 0, 0, .6); }
.pk.mob .pk-cart.hot .pk-plate { color: #ff6a4a; font-weight: 700; text-shadow: 0 0 6px rgba(255, 70, 40, .6), 0 1px 2px #000; }
.pk.mob .pk-hot-tag { top: -16px; padding: 2px 4px; font-size: 9px !important; }

/* панель на полу */
/* панель прижата к низу сцены, «Запуск» — у нижнего края экрана (владелец, 22.10) */
.pk.mob .pk-bar { position: absolute; z-index: 9; left: 3.5cqw; right: 3.5cqw; top: auto; bottom: 1.2%; margin: 0;
  display: flex; flex-direction: column; gap: 0; padding: 4.2cqw 3.6cqw 4.2cqw; border-radius: 3.6cqw;
  background: linear-gradient(180deg, rgba(20, 20, 25, .9), rgba(10, 10, 13, .94));
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 -10px 36px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pk.mob .pk-bar .pk-card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; gap: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.pk.mob .pk-bar .pk-card-h { display: flex; font: 600 2.9cqw/1 var(--f-ui); letter-spacing: .03em; color: #e8e8ed; text-transform: uppercase; }
.pk.mob .pk-card-h .hint { display: none; }
.pk.mob .pk-l-full { display: none; }
.pk.mob .pk-l-mob { display: inline; }
.pk.mob .pk-c-risk { order: 1; display: grid; grid-template-columns: 12.6cqw minmax(0, 1fr); align-items: center;
  padding: 0 0 4.2cqw; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pk.mob .pk-bar .pk-c-bet { order: 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "amt" "chips";
  gap: 2.4cqw; padding: 4.2cqw 0 3.4cqw; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pk.mob .pk-c-rows { order: 3; display: grid; grid-template-columns: minmax(0, 1fr) 62%; align-items: center; padding: 3.4cqw 0 4.4cqw; }
.pk.mob .pk-c-auto { display: none; }
.pk.mob .pk-segs { display: grid; gap: .6cqw; }
.pk.mob #pkRisk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk.mob #pkRows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pk.mob .pk-seg { height: 7cqw; min-height: 7cqw; padding: 0 1cqw; border-radius: 1.6cqw; border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035); color: #b4b5bf; font: 500 2.6cqw/1 var(--f-ui); text-transform: uppercase; letter-spacing: .03em; }
.pk.mob .pk-seg.on { color: #ffb347; font-weight: 700; border-color: #ff8a1f;
  background: linear-gradient(180deg, rgba(255, 122, 24, .42), rgba(130, 44, 0, .55));
  box-shadow: 0 0 12px rgba(255, 122, 24, .4), inset 0 1px 0 rgba(255, 210, 150, .3); }
.pk.mob .pk-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; }
.pk.mob .pk-chip { height: 7.9cqw; min-height: 7.9cqw; padding: 0 1cqw; border-radius: 1.8cqw;
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .04);
  color: #e6e7ec; font: 500 3cqw/1 var(--f-ui); }
.pk.mob .pk-chip.is-max { color: #e6e7ec; text-transform: uppercase; font-size: 2.8cqw; }
.pk.mob .pk-bar .pk-amt { grid-template-columns: 12.7cqw minmax(0, 1fr) 12.7cqw; gap: 1.6cqw; }
.pk.mob .pk-bar .pk-amt-b, .pk.mob .pk-bar .pk-amt-in { height: 9.2cqw; border-radius: 2cqw;
  background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .09); }
.pk.mob .pk-bar .pk-amt-b { font-size: 4.6cqw; font-weight: 400; color: #ececf1; }
.pk.mob .pk-bar .pk-amt-in { justify-content: center; gap: 2.4cqw; }
.pk.mob .pk-bar .pk-amt-in input { flex: 0 1 auto; width: 5ch; min-width: 3ch; font-size: 4.7cqw; font-weight: 800; text-align: left; }
.pk.mob .pk-coin { width: 4.2cqw; height: 4.2cqw; }
.pk.mob .pk-go { order: 4; min-height: 16.4cqw; margin-top: 3.4cqw; justify-content: center; gap: 3.4cqw; border-radius: 3.4cqw;
  color: #1a0900; border: 1.5px solid rgba(255, 214, 150, .65);
  background: linear-gradient(180deg, #ffb347 0%, #ff8a1a 45%, #f06a00 100%);
  box-shadow: 0 0 22px rgba(255, 121, 0, .45), 0 10px 26px rgba(255, 90, 0, .3),
    inset 0 2px 0 rgba(255, 238, 200, .7), inset 0 -3px 0 rgba(140, 50, 0, .45); }
.pk.mob .pk-go-ic { width: auto; height: auto; background: none; }
.pk.mob .pk-go-ic circle { display: none; }
.pk.mob .pk-go-ic svg { width: 6.4cqw; height: 6.4cqw; transform: translateY(-1.2cqw) scale(1.35); }
.pk.mob .pk-go-tx { flex-direction: row; align-items: center; gap: 2.4cqw; }
.pk.mob .pk-go-tx b { font: 900 4.4cqw/1 var(--f-hd); letter-spacing: .1em; }
.pk.mob .pk-go-tx small { font: 600 3.6cqw/1 var(--f-ui); opacity: 1; overflow: visible; }
.pk.mob .pk-go-tx small::before { content: '·'; margin-right: 2.4cqw; font-weight: 900; }
.pk.mob .pk-go.stop .pk-go-ic svg { transform: none; }

/* Шапка на Plinko — обычная, как на остальных страницах (25.10): сцена
   больше не лежит под ней. */

/* ================= ALIVE · MILKY WAY — ТЕЛЕФОН (2026-10-22, референс владельца) =================
   Сцена — свой мир под вертикальный экран (bg_mob.webp, без поезда), на
   две трети экрана; под ней одна панель «Сумма ставки | Сложность» и
   большая «Прыгнуть». «Забрать выигрыш» появляется, когда идёт раунд.
   Скины, автоигра, история и «Как играть?» — ниже, как были. Размеры — в
   vw по замерам с референса 941×1672 (страница на телефоне во всю ширину).
   Режим включает milkyway.js классом .mob на #mwRoot (экран ≤ 600 px). */
.mw-step { display: none; }
.mw.mob .mw-scene { aspect-ratio: auto; height: max(320px, 65.5svh); border-radius: 0; box-shadow: none; }
.mw.mob .mw-scene::before, .mw.mob .mw-scene::after { display: none; }
.mw.mob .mw-logo, .mw.mob .mw-online, .mw.mob .mw-rules { display: none; }
.mw.mob .mw-wagon-tag { font-size: 11px; padding: 3px 7px; }

/* панель: ставка слева, сложность справа — одной карточкой с перегородкой */
.mw.mob .mw-panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "bet diff" "go go" "skins skins";
  gap: 0; margin-top: .6vw; }
.mw.mob .mw-panel.in-round { grid-template-areas: "bet diff" "cash go" "skins skins"; }
.mw.mob .mw-panel:not(.in-round) .mw-cash { display: none; }
.mw.mob .mw-card { gap: 2.1vw; padding: 2.8vw 2.6vw 3vw; justify-content: flex-start;
  background: linear-gradient(180deg, rgba(22, 23, 28, .96), rgba(13, 14, 17, .98)); border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgba(0, 0, 0, .4); }
.mw.mob .mw-bet { border-radius: 2.8vw 0 0 2.8vw; border-right: 0; }
.mw.mob .mw-diff { border-radius: 0 2.8vw 2.8vw 0; border-left: 0; }
.mw.mob .mw-diff::before { content: ''; position: absolute; left: 0; top: 2.8vw; bottom: 2.8vw; width: 1px; background: rgba(255, 255, 255, .08); }
.mw.mob .mw-card-h { font: 700 2.8vw/1 var(--f-ui); letter-spacing: .04em; color: #c3c6cf; text-transform: uppercase; }
.mw.mob .mw-bal, .mw.mob .mw-maxwin, .mw.mob .mw-cap, .mw.mob .mw-diff .hint { display: none; }
/* сумма: − [монета сумма] +, под ней чипы */
.mw.mob .mw-bet-row { grid-template-columns: 8.8vw minmax(0, 1fr) 8.8vw; grid-template-areas: "m amt p" "q q q"; gap: 2vw 1.3vw; }
.mw.mob .mw-step { display: grid; place-items: center; height: 8.8vw; padding: 0; border-radius: 1.7vw; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #e9e9ee; font: 400 5vw/1 var(--f-ui); }
.mw.mob .mw-step[data-step="-1"] { grid-area: m; } .mw.mob .mw-step[data-step="1"] { grid-area: p; }
.mw.mob .mw-step:disabled { opacity: .45; cursor: default; }
.mw.mob .mw-amt { grid-area: amt; height: 8.8vw; padding: 0 2.2vw; gap: 2.4vw; border-radius: 1.7vw; justify-content: flex-start;
  background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .08); }
.mw.mob .mw-amt .coin { width: 4.2vw; height: 4.2vw; }
.mw.mob .mw-amt input { font: 800 4.6vw/1 var(--f-ui); }
.mw.mob .mw-quick { grid-area: q; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.3vw; }
.mw.mob .mw-q { min-width: 0; height: 7.6vw; min-height: 7.6vw; padding: 0 1vw; border-radius: 1.6vw;
  background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .08); color: #e3e4ea; font: 600 3vw/1 var(--f-ui); }
.mw.mob .mw-q-max { color: #e3e4ea; text-transform: uppercase; }
/* сложность: три плитки, выбранная — оранжевой рамкой */
.mw.mob .mw-segs { gap: 0; padding: 0; border-radius: 1.8vw; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.mw.mob .mw-segs button { height: 8vw; min-height: 8vw; padding: 0 .6vw; border-radius: 1.6vw; color: #c3c5ce; font: 600 2.15vw/1 var(--f-ui);
  text-transform: uppercase; letter-spacing: 0; text-overflow: clip; }
.mw.mob .mw-segs button + button { border-left: 1px solid rgba(255, 255, 255, .07); border-radius: 0; }
.mw.mob .mw-segs button.on { color: #ffb347; border: 1px solid #ff8a1f; border-radius: 1.6vw;
  background: linear-gradient(180deg, rgba(255, 122, 24, .26), rgba(110, 36, 0, .38));
  box-shadow: 0 0 12px rgba(255, 122, 24, .35), inset 0 1px 0 rgba(255, 210, 150, .25); }
/* «Прыгнуть» во всю ширину */
.mw.mob .mw-go { min-height: 14.9vw; margin-top: 2.1vw; padding: 0 4vw; justify-content: center; gap: 3.4vw; border-radius: 3vw;
  border: 1.5px solid rgba(255, 214, 150, .55);
  background: linear-gradient(180deg, #ffa53a 0%, #ff8414 50%, #f06800 100%);
  box-shadow: 0 0 22px rgba(255, 121, 0, .4), 0 10px 26px rgba(255, 90, 0, .28), inset 0 2px 0 rgba(255, 238, 200, .6), inset 0 -3px 0 rgba(140, 50, 0, .4); }
.mw.mob .mw-go-ic { display: grid; width: auto; height: auto; background: none; }
.mw.mob .mw-go-ic svg { width: 10.5vw; height: 10.5vw; }
.mw.mob .mw-go-tx { flex: 0 1 auto; align-items: center; }
.mw.mob .mw-go-tx b { font: 900 4.6vw/1 var(--f-hd); letter-spacing: .08em; }
.mw.mob .mw-kbd { display: none; }
.mw.mob .mw-cash { min-height: 14.9vw; margin: 2.1vw 2vw 0 0; padding: 0 2.6vw; gap: 2vw; border-radius: 3vw; }
.mw.mob .mw-cash-ic { display: grid; width: 8vw; height: 8vw; }
.mw.mob .mw-cash-tx b { font-size: 2.9vw; white-space: normal; }
.mw.mob .mw-cash-tx small { font-size: 3.6vw; }
/* во время раунда «Прыгнуть ещё» делит строку с «Забрать»: без значка, мельче */
.mw.mob .mw-panel.in-round .mw-go { padding: 0 2.6vw; }
.mw.mob .mw-panel.in-round .mw-go-ic { display: none; }
.mw.mob .mw-panel.in-round .mw-go-tx b { font-size: 3.7vw; letter-spacing: .05em; white-space: normal; text-align: center; line-height: 1.1; }
.mw.mob .mw-skins { margin-top: 3vw; border-radius: 2.8vw; }

/* шапка: значок планеты и название «MILKY WAY» металлом; кнопка меню
   на месте (владелец, 22.10: без неё со страницы игры в меню не попасть) */
@media (max-width: 600px) {
  body:has(#mwRoot.mob) .tb-promo { display: none !important; }
  body:has(#mwRoot.mob) .tb-mid .page-title { display: inline-flex; align-items: center; gap: 2vw; overflow: visible;
    font: italic 900 4.4vw/1 var(--f-hd); letter-spacing: .03em; color: #eef0f4;
    background: linear-gradient(180deg, #ffffff 0%, #dfe2e8 50%, #9aa0ad 100%); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
  body:has(#mwRoot.mob) .tb-mid .page-title::before { content: ''; flex: none; width: 6vw; height: 6vw; -webkit-text-fill-color: initial;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffb347'/%3E%3Cstop offset='1' stop-color='%23ff6a00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='10.5' fill='none' stroke='url(%23g)' stroke-width='3'/%3E%3Cpath d='M4.5 27.5C1.5 24.8 7 18 17 13.8S35.8 9.6 36.6 13.4' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M36.6 13.4c.9 3.6-5.2 9.3-14.4 13.3' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
}
/* узкий телефон: название «MILKY WAY» рядом с балансом и меню без значка
   планеты, иначе обрезается */
@media (max-width: 380px) {
  body:has(#mwRoot.mob) .tb-mid .page-title::before { display: none; }
}

/* ============================================================ ГАЙД ПО ЭКРАНУ (tour.js)
   Затемняем всё, вырезаем окно вокруг блока огромной тенью на «дыре», рядом —
   карточка с пояснением. Логики сайта тур не трогает, только подсвечивает. */
.tour { position: fixed; inset: 0; z-index: 2147483000; }
body.tour-on { overflow: hidden; }            /* фон не скроллится под туром */
.tour-hole {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(6, 7, 11, .76), 0 0 0 2px rgba(255, 122, 24, .9),
    0 0 24px 2px rgba(255, 122, 24, .35);
  transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease;
}
.tour-card {
  position: fixed; width: min(360px, calc(100vw - 24px)); box-sizing: border-box;
  padding: 16px 18px; border-radius: 14px; pointer-events: auto;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  transition: left .28s ease, top .28s ease;
}
.tour-step { font: 700 var(--fs-cap)/1 var(--f-hd); letter-spacing: .1em; color: var(--or-2); margin-bottom: 8px; }
.tour-ttl { margin: 0 0 6px; font: 800 var(--fs-body)/1.15 var(--f-hd); color: #fff; }
.tour-tx { margin: 0 0 14px; font: 500 var(--fs-label)/1.5 var(--f-ui); color: var(--tx-2); }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-nav-r { display: flex; gap: 8px; }
.tour-skip { background: none; border: 0; color: var(--tx-3); font: 600 var(--fs-label)/1 var(--f-ui); cursor: pointer; padding: 8px 4px; }
.tour-skip:hover { color: var(--tx); }
.tour-back, .tour-next { height: 38px; padding: 0 16px; border-radius: 10px; cursor: pointer; font: 700 var(--fs-label)/1 var(--f-hd); }
.tour-back { background: var(--bg-2); border: 1px solid var(--line); color: var(--tx); }
.tour-back:disabled { opacity: .4; cursor: default; }
.tour-next { border: 0; color: #241200; background: linear-gradient(180deg, #ffb43c, #ff7a18); box-shadow: 0 8px 20px rgba(255, 122, 24, .3); }
.tour-next:hover { filter: brightness(1.05); }
/* Кнопка «Гайд» в шапке — лёгкий акцент, чтобы её замечали. */
.tb-guide { color: var(--or-2); }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none; } }

/* ============================================================ ALIVE · MILKY WAY · РАСКЛАДКА КАК В ИГРАХ (2026-10-24)

   Владелец 24.10, по своему примеру и как у Ракеты: слева карточка «Ставка»
   («Ручная / Авто», сумма, сложность, «Прыгнуть» внизу), справа сцена; под
   сценой ряд «Автоигра» · «Автозабор» · «Баланс» · «Забрать выигрыш»; ниже
   «Последние игры» и «Топ выигрышей» рядом, внизу баннер «Как играть?».
   Ставки скинами больше нет, строки «Ставка до … · выигрыш до …» под
   сложностью — тоже; «Забрать выигрыш» зелёная, пока выигрыш можно забрать.

   Широкая раскладка — от ширины страницы игры 1000 px (контейнер mw на
   #mwRoot; сетку держит обёртка .mw-in: контейнер сам себя не меряет).
   .mw-panel и .mw-row там display: contents — их карточки встают в одну
   сетку со сценой, а фон карточки «Ставка» рисует пустой .mw-side под ними.
   Уже 1000 px и на телефоне — прежняя раскладка столбиком (секции MILKY WAY
   выше), только без скинов и с новым рядом авто-режимов. */

.mw-in { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* телефон: сцена от края до края, остальное с отступом 12 px. Прежнее
   правило «.mw > *:not(.mw-scene)» после обёртки попадало в саму .mw-in
   и уводило сцену от краёв. */
@media (max-width: 880px) {
  .mw-in { gap: 10px; }
  .mw > .mw-in { margin-left: 0; margin-right: 0; }
  .mw-in > *:not(.mw-scene) { margin-left: 12px; margin-right: 12px; }
}
.mw-side, .mw-side-t, .mw-modes { display: none; }

/* ---- «Забрать выигрыш»: зелёная, пока выигрыш можно забрать ---- */
.mw-cash:enabled, .mw-cash.loading:disabled {
  border-color: rgba(70, 230, 140, .75); color: #f2fff7;
  background: linear-gradient(180deg, #23c06c 0%, #179a52 55%, #0f7a40 100%);
  box-shadow: 0 10px 26px rgba(35, 192, 108, .28), inset 0 1px 0 rgba(200, 255, 220, .45), inset 0 -2px 0 rgba(0, 60, 25, .35);
}
.mw-cash:enabled:hover { border-color: #7ff0b0; filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(35, 192, 108, .4), inset 0 1px 0 rgba(200, 255, 220, .45), inset 0 -2px 0 rgba(0, 60, 25, .35); }
.mw-cash:enabled .mw-cash-ic, .mw-cash.loading:disabled .mw-cash-ic { background: rgba(0, 50, 20, .22); color: #f2fff7; }
.mw-cash:enabled .mw-cash-tx small, .mw-cash.loading:disabled .mw-cash-tx small { color: #f2fff7; }

/* ---- ряд авто-режимов: карточки «Автоигра», «Автозабор», «Баланс» ---- */
.mw-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, .85fr); gap: 10px; }
.mw-row > .mw-card { justify-content: center; gap: 8px; padding: 10px 14px; }
.mw-ap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; }
.mw-ap-tg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mw-ap .mw-card-h, .mw-az .mw-card-h, .mw-balc .mw-card-h { gap: 6px; }
.mw-ap-n { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mw-ap-k { font: 600 var(--fs-micro)/1 var(--f-ui); color: var(--mw-tx2); white-space: nowrap; }
.mw-ap-segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 8px;
  background: var(--mw-bg); border: 1px solid rgba(255, 255, 255, .08); }
.mw-ap-segs button { height: 30px; min-width: 0; padding: 0 4px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; background: transparent;
  color: #9a9daa; font: 700 var(--fs-label)/1 var(--f-hd); font-variant-numeric: tabular-nums; transition: color .15s, background .15s; }
.mw-ap-segs button:hover:not(:disabled):not(.on) { color: #e3e4ea; }
.mw-ap-segs button.on { background: linear-gradient(180deg, #2a2014, #1d160e); color: var(--mw-amb); border-color: rgba(255, 121, 0, .7);
  box-shadow: 0 0 12px rgba(255, 121, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .06); }
.mw-ap-segs button:disabled { cursor: default; }
/* «осталось N» — для скринридера: на глаз то же число на «Стоп · N», а в
   карточке надпись ложилась на переключатель */
.mw-ap-st { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* переключатель «Автоигра» */
.mw-tg { position: relative; flex: none; width: 42px; height: 24px; padding: 0; border-radius: 999px; cursor: pointer;
  background: #23252c; border: 1px solid rgba(255, 255, 255, .14); transition: background .15s, border-color .15s; }
.mw-tg i { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #9a9daa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5); transition: transform .18s, background .15s; }
.mw-tg.on { background: linear-gradient(180deg, #ff9a2e, var(--mw-or)); border-color: #ffb35c; }
.mw-tg.on i { transform: translateX(18px); background: #fff; }
.mw-tg:disabled { cursor: default; opacity: .7; }
/* автозабор: «− после N-й платформы +», справа множитель этой платформы */
.mw-az-x { font: 800 var(--fs-cap)/1 var(--f-hd); color: var(--mw-amb); letter-spacing: .02em; text-transform: none; }
.mw-az-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 6px; }
.mw-az-b { display: grid; place-items: center; height: 32px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); background: var(--mw-surf); color: #e9e9ee; font: 500 18px/1 var(--f-ui); }
.mw-az-b:hover:not(:disabled) { border-color: rgba(255, 121, 0, .6); color: var(--mw-amb); }
.mw-az-b:disabled { opacity: .4; cursor: default; }
.mw-az-v { min-width: 0; text-align: center; font: 600 var(--fs-cap)/1.2 var(--f-ui); color: #c9cbd3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-az-v b { color: #fff; font: 800 var(--fs-body)/1 var(--f-hd); font-variant-numeric: tabular-nums; }
/* в ручной игре автоигра и автозабор приглушены; в серии — оранжевая рамка */
.mw-ap.off .mw-ap-n, .mw-az.off .mw-az-row, .mw-az.off .mw-az-x { opacity: .5; }
.mw-ap.live, .mw-az.live { border-color: rgba(255, 121, 0, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px rgba(255, 121, 0, .12); }
/* баланс */
.mw-balc-v { display: flex; align-items: center; gap: 6px; font: 800 var(--fs-h3, 20px)/1 var(--f-hd); color: #fff; white-space: nowrap; overflow: hidden; }
.mw-balc-v .coin { width: .85em; height: .85em; }

/* ---- «Последние игры» и «Топ выигрышей» ---- */
.mw-lists { display: grid; gap: 14px; min-width: 0; }
.mw-hist { container: mwh / inline-size; min-width: 0; }
.mw-top { min-width: 0; padding: 14px 16px 12px; border-radius: var(--r-card, 12px); background: linear-gradient(180deg, #121318, #0d0e12);
  border: 1px solid var(--mw-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.mw-top-ol { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mw-top-r { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  min-height: 46px; padding: 6px 12px 6px 8px; border-radius: 8px; background: #14161b; border: 1px solid transparent;
  font: 500 var(--fs-label)/1.2 var(--f-ui); color: #d9dbe2; }
.mw-top-r:nth-child(even) { background: #101216; }
.mw-top-r.me { box-shadow: inset 2px 0 0 var(--mw-or); }
.mw-top-r.p1 { border-color: rgba(255, 173, 50, .55); background: linear-gradient(90deg, rgba(255, 140, 20, .16), #14161b 60%); }
.mw-top-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #23252c; color: #c9cbd3;
  font: 800 var(--fs-cap)/1 var(--f-hd); }
.mw-top-r.p1 .mw-top-n { background: linear-gradient(180deg, #ffd27a, #ff9a2e); color: #2a1300; }
.mw-top-r.p2 .mw-top-n { background: linear-gradient(180deg, #e6e9ef, #a9afba); color: #1d2026; }
.mw-top-r.p3 .mw-top-n { background: linear-gradient(180deg, #e2a273, #a4602f); color: #241105; }
.mw-top-r .mw-who-n { max-width: none; }
.mw-top-bet { color: #c9cbd3; white-space: nowrap; }
.mw-top-x { color: var(--mw-or); font: 800 var(--fs-label)/1 var(--f-hd); white-space: nowrap; }
.mw-top-w { min-width: 64px; text-align: right; color: #5ee9a0; font: 800 var(--fs-ui)/1 var(--f-hd); white-space: nowrap; }
.mw-top-bet .coin, .mw-top-w .coin { width: .9em; height: .9em; }
/* сложность в таблице: точка цвета сложности и слово */
.mw-dif { display: inline-flex; align-items: center; gap: 7px; font: 600 var(--fs-cap)/1 var(--f-ui); color: #c9cbd3; }
.mw-dif::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6b6e7a; }
.mw-dif.easy::before { background: var(--mw-ok); box-shadow: 0 0 6px rgba(53, 208, 127, .55); }
.mw-dif.medium::before { background: var(--mw-amb); box-shadow: 0 0 6px rgba(255, 173, 50, .55); }
.mw-dif.hard::before { background: var(--mw-bad); box-shadow: 0 0 6px rgba(255, 77, 79, .55); }
/* таблица (страница шире 860 px) в узкой карточке: время и «глаз» уступают
   место главному, подробности открывает клик по строке. В карточном виде
   ленты (страница уже) — свои правила выше, их не трогаем. */
.mw-tbl tbody tr[data-view] { cursor: pointer; }
@container mw (min-width: 861px) {
  @container mwh (max-width: 1040px) {
    .mw-tbl th, .mw-tbl td { padding-left: 8px; padding-right: 8px; }
    .mw-prog-bar { grid-template-columns: repeat(var(--n, 11), 5px); gap: 1px; }
    .mw-who-n { max-width: 120px; }
    .mw-tbl .c-view { display: none; }
  }
  @container mwh (max-width: 800px) {
    .mw-tbl .c-time { display: none; }
    .mw-tbl th { letter-spacing: .04em; }
    .mw-who-n { max-width: 92px; }
    .mw-prog-n { min-width: 0; }
  }
}
/* «Топ» в узкой карточке — без ставки: имени нужнее место */
.mw-top { container: mwt / inline-size; }
@container mwt (max-width: 400px) {
  .mw-top-r { grid-template-columns: 26px minmax(0, 1fr) auto auto; }
  .mw-top-bet { display: none; }
}
@container mwt (max-width: 320px) {
  .mw-top-r { gap: 8px; padding-right: 10px; }
  .mw-top-r .mw-ava { display: none; }
  .mw-top-w { min-width: 0; }
}
/* «Автозабор» в узкой карточке — «после 2» без слова «платформы» */
.mw-az { container: mwaz / inline-size; }
@container mwaz (max-width: 250px) { .mw-az-w { display: none; } }

/* ---- столбиком (страница уже 1000 px): панель без скинов ---- */
@container mw (max-width: 999px) {
  .mw-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "bet diff" "go cash"; }
}
@container mw (max-width: 860px) { .mw-tbl tbody tr > td.c-diff { display: none; } }
@container mw (max-width: 720px) {
  .mw-panel { grid-template-areas: "bet diff" "cash go"; }
  .mw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-ap { grid-column: 1 / -1; }
}
@container mw (max-width: 560px) {
  .mw-panel { grid-template-areas: "bet bet" "cash go" "diff diff"; }
  .mw-row { grid-template-columns: minmax(0, 1fr); }
  .mw-ap { grid-template-columns: minmax(0, 1fr); }
  .mw-ap-tg { flex-direction: row; justify-content: space-between; align-items: center; }
}
/* телефон (.mob, экран ≤ 600 px): ставка | сложность, «Прыгнуть»; в раунде
   «Забрать | Прыгнуть ещё». Баланс — в шапке сайта, своей карточки нет. */
.mw.mob .mw-panel { grid-template-areas: "bet diff" "go go"; }
.mw.mob .mw-panel.in-round { grid-template-areas: "bet diff" "cash go"; }
.mw.mob .mw-balc { display: none; }
.mw.mob .mw-row { margin-top: 3vw; gap: 2.4vw; }
.mw.mob .mw-row > .mw-card { padding: 3vw 3.2vw; border-radius: 2.8vw; }

/* ---- широкая раскладка: «Ставка» слева, сцена справа ---- */
@container mw (min-width: 1000px) {
  .mw-in { display: grid; gap: 0 14px;
    grid-template-columns: clamp(268px, 25%, 320px) minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto auto auto;
    grid-template-areas:
      "st    scene scene scene scene"
      "sm    scene scene scene scene"
      "bet   scene scene scene scene"
      "diff  scene scene scene scene"
      ".     scene scene scene scene"
      "go    ap    az    bal   cash"
      "lists lists lists lists lists"
      "how   how   how   how   how"; }
  .mw-panel, .mw-row { display: contents; }
  .mw-scene { grid-area: scene; }
  /* карточка «Ставка» — фон под колонкой, от верха сцены до низа ряда */
  .mw-side { display: block; position: relative; z-index: 0; grid-area: 1 / 1 / 7 / 2; border-radius: var(--r-card, 12px);
    background: linear-gradient(180deg, #15171c, var(--mw-card)); border: 1px solid var(--mw-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 24px rgba(0, 0, 0, .35); }
  .mw-side-t { display: block; position: relative; grid-area: st; margin: 16px 16px 12px;
    font: 800 var(--fs-body)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--mw-amb); }
  .mw-modes { display: grid; position: relative; grid-area: sm; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0 16px 14px;
    padding: 3px; border-radius: 9px; background: var(--mw-bg); border: 1px solid rgba(255, 255, 255, .07); }
  .mw-modes button { height: 34px; min-width: 0; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; background: none;
    color: #9a9daa; font: 700 var(--fs-label)/1 var(--f-hd); transition: color .15s, background .15s; }
  .mw-modes button:hover:not(:disabled):not(.on) { color: #e3e4ea; }
  .mw-modes button.on { background: linear-gradient(180deg, #2a2014, #1d160e); color: var(--mw-amb); border-color: rgba(255, 121, 0, .7);
    box-shadow: 0 0 12px rgba(255, 121, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .06); }
  .mw-modes button:disabled { cursor: default; }
  /* сумма и сложность внутри «Ставки» — без своих рамок */
  .mw-bet, .mw-diff { margin: 0 16px 14px; padding: 0; gap: 8px; justify-content: flex-start;
    background: none; border: 0; border-radius: 0; box-shadow: none; }
  .mw-bet { grid-area: bet; } .mw-diff { grid-area: diff; }
  .mw-card-h { font-size: var(--fs-micro); }
  /* сумма: − [монета сумма] +, под ней четыре быстрые суммы */
  .mw-bet-row { grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "m amt p" "q q q"; gap: 6px; }
  .mw-step { display: grid; place-items: center; height: 40px; padding: 0; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .1); background: var(--mw-surf); color: #e9e9ee; font: 400 20px/1 var(--f-ui); }
  .mw-step[data-step="-1"] { grid-area: m; } .mw-step[data-step="1"] { grid-area: p; }
  .mw-step:hover:not(:disabled) { border-color: rgba(255, 121, 0, .6); color: var(--mw-amb); }
  .mw-step:disabled { opacity: .45; cursor: default; }
  .mw-amt { grid-area: amt; height: 40px; justify-content: center; }
  .mw-amt input { flex: 0 1 auto; width: 8ch; text-align: center; }
  .mw-quick { grid-area: q; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .mw-q { min-width: 0; height: 32px; padding: 0 4px; }
  .mw-segs button { height: 36px; }
  .mw-cap { margin: 0; font: 600 var(--fs-micro)/1 var(--f-ui); color: var(--mw-tx2); }
  .mw-cap b { color: var(--mw-amb); font: 800 var(--fs-cap)/1 var(--f-hd); }
  /* «Прыгнуть» — низ карточки, вровень с рядом под сценой */
  .mw-go { position: relative; grid-area: go; align-self: end; min-height: 56px; margin: 12px 16px 16px; }
  .mw-ap { grid-area: ap; } .mw-az { grid-area: az; } .mw-balc { grid-area: bal; } .mw-cash { grid-area: cash; }
  .mw-ap, .mw-az, .mw-balc, .mw-cash { margin-top: 12px; }
  .mw-cash { min-height: 0; }
  .mw-lists { grid-area: lists; margin-top: 14px; grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 400px); align-items: start; }
  .mw-howb { grid-area: how; margin-top: 14px; }
}
/* узкая широкая раскладка: значки кнопок уступают место подписям */
@container mw (min-width: 1000px) and (max-width: 1179px) {
  .mw-cash-ic { display: none; }
  .mw-cash { padding: 0 12px; }
  .mw-ap { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mw-ap-tg { flex-direction: row; justify-content: space-between; align-items: center; }
  .mw-ap-k { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mw-tg i { transition: none; } }

/* ============================================================ ALIVE · SPACE BALL · РАСКЛАДКА КАК В ИГРАХ (2026-10-24)

   Владелец 24.10, по своему примеру и как в Milky Way: слева карточка
   «Ставка» (#sbPanel: «Ручная / Авто», сумма, «Ударить», «Забрать»,
   автоигра и автозабор), справа сцена; на широкой странице справа ещё
   колонка — карточка игры с потолками, таблица выигрышей и «Как играть?»;
   ниже «Последние игры» и «Топ выигрышей» (день / неделя / месяц). Ставок
   скинами больше нет; «Забрать» зелёная, пока выигрыш можно забрать.

   Раскладку выбирает spaceball.js (placeWide) по ширине .sb и ставит класс:
   .w3 — от 1360 px (три колонки), .w2 — от 1000 px (две, таблица поверх
   сцены, как была). Блоки остаются прямыми детьми .sb — на этом держатся
   телефонные правила («.sb > .sb-hist» и т. п.) и шторки; переезжают только
   автоигра (в «Ставку»), таблица и «Как играть?» (в правую колонку). Уже
   1000 px — прежняя раскладка столбиком, телефон (19.10) — панель внизу и
   шторки, без скинов и с шторкой «Топ выигрышей». */

.sb-side, .sb-side-t, .sb-modes, .sb-right { display: none; }

/* ---- «Забрать»: зелёная, пока выигрыш можно забрать ---- */
.sb-cash.ready:enabled, .sb-cash.ready.busy:disabled {
  border-color: rgba(70, 230, 140, .75); color: #f2fff7;
  background: linear-gradient(180deg, #23c06c 0%, #179a52 55%, #0f7a40 100%);
  box-shadow: 0 10px 26px rgba(35, 192, 108, .28), inset 0 1px 0 rgba(200, 255, 220, .45), inset 0 -2px 0 rgba(0, 60, 25, .35);
}
.sb-cash.ready:enabled:hover { border-color: #7ff0b0; filter: brightness(1.06); }
.sb-cash.ready:enabled .sb-cash-ic, .sb-cash.ready.busy:disabled .sb-cash-ic { background: rgba(0, 50, 20, .22); color: #f2fff7; }
.sb-cash.ready:enabled .sb-cash-tx small, .sb-cash.ready.busy:disabled .sb-cash-tx small { color: #f2fff7; }

/* ---- панель столбиком (страница уже 1000 px): без скинов ---- */
.sb-panel { grid-template-columns: minmax(0, 2.2fr) minmax(195px, 1fr) minmax(155px, .8fr); grid-template-areas: "bet go cash"; }
@container sb (max-width: 1069px) { .sb-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "bet bet" "go cash"; } }
@container sb (max-width: 719px) { .sb-panel { grid-template-areas: "bet bet" "cash go"; } }

/* ---- автоигра и автозабор: две карточки ---- */
.sb-auto { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
.sb-auto > .sb-card { justify-content: center; gap: 8px; padding: 10px 14px; }
.sb-ap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; }
.sb-ap-tg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sb-ap .sb-card-h, .sb-az .sb-card-h { gap: 6px; }
.sb-ap-n { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sb-ap-k { font: 600 var(--fs-micro)/1 var(--f-ui); color: var(--sb-tx2); white-space: nowrap; }
.sb-ap-segs, .sb-az-segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 8px;
  background: var(--sb-bg); border: 1px solid rgba(255, 255, 255, .08); }
.sb-az-segs { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
.sb-ap-segs button, .sb-az-segs button { height: 30px; min-width: 0; padding: 0 4px; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  background: transparent; color: #9a9daa; font: 700 var(--fs-label)/1 var(--f-hd); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color .15s, background .15s; }
.sb-ap-segs button:hover:not(:disabled):not(.on), .sb-az-segs button:hover:not(:disabled):not(.on) { color: #e3e4ea; }
.sb-ap-segs button.on, .sb-az-segs button.on { background: linear-gradient(180deg, #2a2014, #1d160e); color: var(--sb-amb); border-color: rgba(255, 121, 0, .7);
  box-shadow: 0 0 12px rgba(255, 121, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sb-az-segs button.on[data-az="0"] { background: linear-gradient(180deg, #25272e, #1a1c22); color: #c4c4d0; border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.sb-ap-segs button:disabled, .sb-az-segs button:disabled { cursor: default; }
.sb-az-x { font: 800 var(--fs-cap)/1 var(--f-hd); color: var(--sb-amb); letter-spacing: .02em; text-transform: none; }
/* «осталось N» — для скринридера: на глаз то же на «Стоп · осталось N» */
.sb-ap-st { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sb-ap.off .sb-ap-n { opacity: .5; }
.sb-ap.live, .sb-az.live { border-color: rgba(255, 121, 0, .5); }
/* переключатель «Автоигра» */
.sb-tg { position: relative; flex: none; width: 42px; height: 24px; padding: 0; border-radius: 999px; cursor: pointer;
  background: #23252c; border: 1px solid rgba(255, 255, 255, .14); transition: background .15s, border-color .15s; }
.sb-tg i { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #9a9daa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5); transition: transform .18s, background .15s; }
.sb-tg.on { background: linear-gradient(180deg, #ff9a2e, var(--sb-or)); border-color: #ffb35c; }
.sb-tg.on i { transform: translateX(18px); background: #fff; }
.sb-tg:disabled { cursor: default; opacity: .7; }
@container sb (max-width: 719px) {
  .sb-auto { grid-template-columns: minmax(0, 1fr); }
  .sb-ap { grid-template-columns: minmax(0, 1fr); }
  .sb-ap-tg { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---- «Топ выигрышей» ---- */
.sb-top { container: sbt / inline-size; min-width: 0; padding: 14px 16px 12px; border-radius: var(--r-card, 12px);
  background: linear-gradient(180deg, #121318, #0d0e12); border: 1px solid var(--sb-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.sb-top-ol { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sb-top-r { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  min-height: 46px; padding: 6px 12px 6px 8px; border-radius: 8px; background: #14161b; border: 1px solid transparent;
  font: 500 var(--fs-label)/1.2 var(--f-ui); color: #d9dbe2; }
.sb-top-r:nth-child(even) { background: #101216; }
.sb-top-r.me { box-shadow: inset 2px 0 0 var(--sb-or); }
.sb-top-r.p1 { border-color: rgba(255, 173, 50, .55); background: linear-gradient(90deg, rgba(255, 140, 20, .16), #14161b 60%); }
.sb-top-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #23252c; color: #c9cbd3; font: 800 var(--fs-cap)/1 var(--f-hd); }
.sb-top-r.p1 .sb-top-n { background: linear-gradient(180deg, #ffd27a, #ff9a2e); color: #2a1300; }
.sb-top-r.p2 .sb-top-n { background: linear-gradient(180deg, #e6e9ef, #a9afba); color: #1d2026; }
.sb-top-r.p3 .sb-top-n { background: linear-gradient(180deg, #e2a273, #a4602f); color: #241105; }
.sb-top-r .sb-who-n { max-width: none; }
.sb-top-bet { color: #c9cbd3; white-space: nowrap; }
.sb-top-x { color: var(--sb-or); font: 800 var(--fs-label)/1 var(--f-hd); white-space: nowrap; }
.sb-top-w { min-width: 64px; text-align: right; color: #5ee9a0; font: 800 var(--fs-ui)/1 var(--f-hd); white-space: nowrap; }
.sb-top-bet .coin, .sb-top-w .coin { width: .9em; height: .9em; }
@container sbt (max-width: 400px) { .sb-top-r { grid-template-columns: 26px minmax(0, 1fr) auto auto; } .sb-top-bet { display: none; } }
@container sbt (max-width: 320px) { .sb-top-r { gap: 8px; padding-right: 10px; } .sb-top-r .sb-ava { display: none; } .sb-top-w { min-width: 0; } }

/* ---- «Последние игры» в узкой карточке (табличный вид): время уступает ---- */
.sb-hist { container: sbh / inline-size; min-width: 0; }
@container sb (min-width: 980px) {
  @container sbh (max-width: 900px) {
    .sb-tbl th, .sb-tbl td { padding-left: 8px; padding-right: 8px; }
    .sb-prog-bar { grid-template-columns: repeat(var(--n, 10), 6px); gap: 1px; }
    .sb-who-n { max-width: 120px; }
  }
  @container sbh (max-width: 720px) {
    .sb-tbl .c-time { display: none; }
    .sb-tbl th { letter-spacing: .04em; }
    .sb-who-n { max-width: 92px; }
    .sb-prog-n { min-width: 0; }
  }
}

/* ---- телефон: новые блоки — только в шторках ---- */
@media (max-width: 880px) {
  .sb > .sb-auto, .sb > .sb-top, .sb > .sb-right { display: none; }
  .sb-drawer-b > .sb-auto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sb-drawer-b > .sb-auto .sb-ap { grid-template-columns: minmax(0, 1fr); }
  .sb-drawer-b > .sb-auto .sb-ap-tg { flex-direction: row; justify-content: space-between; align-items: center; }
  .sb-drawer-b > .sb-top { padding-top: 0; border: 0; background: none; box-shadow: none; }
  .sb-drawer-b > .sb-top .sb-hist-t { display: none; }
  .sb-drawer-b > .sb-top .sb-tabs { width: 100%; margin-left: 0; }
  .sb-drawer-b > .sb-top .sb-tabs button { flex: 1; justify-content: center; padding: 0 6px; }
}

/* ---- широкие раскладки: «Ставка» слева, сцена справа ---- */
.sb.w2, .sb.w3 { display: grid; gap: 14px; align-items: start; }
.sb.w2 { grid-template-columns: clamp(270px, 25%, 310px) minmax(0, 1fr) clamp(280px, 28%, 380px);
  grid-template-areas: "panel scene scene" "hist hist top" "how how how"; }
.sb.w3 { grid-template-columns: clamp(270px, 20%, 310px) minmax(0, 1fr) 110px clamp(270px, 20%, 320px);
  grid-template-areas: "panel scene scene right" "hist hist top top"; }
.sb.w2 > .sb-stage, .sb.w3 > .sb-stage { grid-area: scene; align-self: stretch; }
.sb.w2 .sb-scene, .sb.w3 .sb-scene { flex: 1 1 auto; aspect-ratio: auto; height: auto; min-height: 460px; max-height: none; }
.sb.w2 > .sb-hist, .sb.w3 > .sb-hist { grid-area: hist; align-self: stretch; }
.sb.w2 > .sb-top, .sb.w3 > .sb-top { grid-area: top; align-self: stretch; }
.sb.w2 > .sb-howb { grid-area: how; margin-top: 0; }
/* карточка «Ставка» — сама #sbPanel */
/* container-type: normal — у панели свой контейнер sb для телефона (она
   живёт у body), и внутри узкой «Ставки» срабатывали правила узких экранов:
   шесть колонок быстрых сумм, мелкий шрифт, скрытые значки. Здесь панель
   меряется по .sb. */
.sb.w2 > .sb-panel, .sb.w3 > .sb-panel { container-type: normal; grid-area: panel; align-self: stretch; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 16px; border-radius: var(--r-card, 12px); background: linear-gradient(180deg, #15171c, var(--sb-card)); border: 1px solid var(--sb-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 24px rgba(0, 0, 0, .35); }
.sb.w2 .sb-side-t, .sb.w3 .sb-side-t { display: flex; align-items: center; gap: 6px; margin: 0;
  font: 800 var(--fs-body)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-amb); }
.sb.w2 .sb-modes, .sb.w3 .sb-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 9px;
  background: var(--sb-bg); border: 1px solid rgba(255, 255, 255, .07); }
.sb-modes button { height: 34px; min-width: 0; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; background: none;
  color: #9a9daa; font: 700 var(--fs-label)/1 var(--f-hd); transition: color .15s, background .15s; }
.sb-modes button:hover:not(:disabled):not(.on) { color: #e3e4ea; }
.sb-modes button.on { background: linear-gradient(180deg, #2a2014, #1d160e); color: var(--sb-amb); border-color: rgba(255, 121, 0, .7);
  box-shadow: 0 0 12px rgba(255, 121, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sb-modes button:disabled { cursor: default; }
/* блоки внутри «Ставки» — без своих рамок; автоигра и автозабор под чертой */
.sb.w2 .sb-panel > .sb-bet, .sb.w3 .sb-panel > .sb-bet { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.sb.w2 .sb-panel > .sb-go, .sb.w3 .sb-panel > .sb-go { min-height: 60px; }
.sb.w2 .sb-panel > .sb-cash, .sb.w3 .sb-panel > .sb-cash { min-height: 54px; }
.sb-panel > .sb-auto { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--sb-line); }
.sb-panel > .sb-auto > .sb-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; }
.sb-panel > .sb-auto .sb-ap { grid-template-columns: minmax(0, 1fr); }
.sb-panel > .sb-auto .sb-ap-tg { flex-direction: row; justify-content: space-between; align-items: center; }
.sb-panel.lock > .sb-auto .sb-card { opacity: 1; }
/* правая колонка (w3): карточка игры, таблица выигрышей, «Как играть?» */
.sb.w3 > .sb-right { display: flex; flex-direction: column; gap: 12px; grid-area: right; align-self: stretch; min-width: 0; }
.sb-info { padding: 14px 16px; border-radius: var(--r-card, 12px); background: linear-gradient(180deg, #15171c, var(--sb-card));
  border: 1px solid rgba(255, 121, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 24px rgba(0, 0, 0, .35); }
.sb-info-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sb-info-art { flex: none; width: 72px; height: 64px; border-radius: 10px; border: 1px solid rgba(255, 121, 0, .45);
  background: #0a0b0f url('/assets/spaceball/how-bg.webp') -14px -6px / auto 132px no-repeat; }
.sb-info-tx h2 { margin: 0 0 5px; font: 900 var(--fs-ui)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.sb-info-tx p { margin: 0; font: 500 var(--fs-cap)/1.35 var(--f-ui); color: #c9cbd3; }
.sb-info-lim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.sb-info-lim div { min-width: 0; }
.sb-info-lim dt { margin: 0 0 5px; font: 600 var(--fs-micro)/1.1 var(--f-ui); color: var(--sb-tx2); white-space: nowrap; }
.sb-info-lim dd { margin: 0; font: 800 var(--fs-cap)/1 var(--f-hd); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-info-lim dd .coin { width: .9em; height: .9em; }
.sb-right > .sb-table { position: static; width: auto; padding: 12px 12px 10px; opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, #15171c, var(--sb-card)); border: 1px solid var(--sb-line); }
.sb-right > .sb-table .sb-row { height: 26px; }
.sb-right > .sb-howb { display: block; min-height: 0; margin: 0; padding: 14px 16px; flex: 1 1 auto;
  background: var(--sb-card) url('/assets/spaceball/how-bg.webp') right center / cover no-repeat; }
.sb-right > .sb-howb::before { position: absolute; inset: 0; display: block; aspect-ratio: auto; min-height: 0; margin: 0; z-index: -1; -webkit-mask: none; mask: none;
  background: linear-gradient(90deg, rgba(8, 9, 12, .94) 30%, rgba(8, 9, 12, .55) 70%, rgba(8, 9, 12, .2)); }
.sb-right > .sb-howb .sb-howb-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; max-width: 78%; }
.sb-right > .sb-howb .sb-howb-tx h2 { font-size: var(--fs-ui); }
.sb-right > .sb-howb .sb-howb-tx p { font-size: var(--fs-cap); }
.sb-right > .sb-howb .sb-howb-steps { display: none; }
.sb.w2 .sb-panel .sb-chips, .sb.w3 .sb-panel .sb-chips { flex-basis: 100%; }
/* телефон уже 480 px: поле суммы в нижней панели было 11 px, и «1,5»
   резалось до «1,» (замер 24.10, так было и до раскладки) — «Ударить»
   уступает поровну, «−» уже */
@media (max-width: 480px) {
  .sb-go { flex: 1 1 0; }
  .sb-amt-box { grid-template-columns: 34px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .sb-tg i { transition: none; } }

/* ============================================================ ALIVE · ГЛАВНАЯ-ХАБ

   Референсы владельца «desc ref.jpg» (1280×657 — макет 1920, снятый в
   масштабе 2/3) и «mobile-ref.jpg» (607×1280 — телефон 390 в масштабе
   1.556), 2026-10-24. Числа ниже сняты с них: компьютер — ×1.5, телефон —
   ÷1.556. Меняется только экран главной (#page-home): меню слева, шапка
   и шторка телефона — прежние (владелец, 24.10). Арт — frontend/assets/home/
   (Higgsfield, по кадрам референса). Рисует home.js. */

:root { --hm-or: linear-gradient(180deg, #ffc35a 0%, #ff8a1e 55%, #ff6a00 100%); --f-exo: "Exo 2", var(--f-hd); }

/* ---------------------------------------------------------- главная: каркас */
#page-home .hm { container-type: inline-size; display: flex; flex-direction: column; }
.hm-chips, .hm-find, .hm-tile-go, .hm-h-m { display: none; }
@media (min-width: 881px) {
  .content:has(> #page-home.on) { padding: 15px 8px 24px 24px; }
}
/* Лента «Сейчас выпало» — та же, что на всём сайте: как у витрины, от
   881 px, 150 px ленты и 16 px воздуха. */
@media (min-width: 881px) {
  .content:has(> #page-home.on) > .cs-rail { display: block; }
  #csRail ~ #page-home.on { padding-right: 166px; }
}

/* ---------------------------------------------------------- баннер */
.hm-hero { position: relative; height: clamp(250px, 24.7cqw, 367px); border-radius: 12px; overflow: hidden; background: #07080c;
  border: 1px solid rgba(255, 255, 255, .07); isolation: isolate; }
.hm-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.hm-slide.on { opacity: 1; visibility: visible; }
.hm-slide picture, .hm-slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-slide img { object-fit: cover; object-position: 62% 38%; }
@media (min-width: 881px) { .hm-slide[data-i="0"] img { object-position: 50% 50%; } }
.hm-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 6, 10, .82) 0%, rgba(5, 6, 10, .55) 28%, rgba(5, 6, 10, 0) 52%),
    linear-gradient(0deg, rgba(5, 6, 10, .45), rgba(5, 6, 10, 0) 30%); }
/* Текст баннера — по центру высоты: с фиксированным отступом сверху кнопка
   длинного слайда («Лови множитель») прижималась к нижнему краю (владелец, 25.10). */
.hm-hero-tx { position: absolute; z-index: 2; left: clamp(28px, 3.7cqw, 55px); top: 50%; transform: translateY(-50%); }
.hm-hero-tx h1 { margin: 0; font: italic 900 66px/.98 var(--f-exo); font-size: clamp(38px, 4.44cqw, 66px); text-transform: uppercase; letter-spacing: -.005em;
  color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.hm-hero-tx h1 span { display: block; }
.hm-hero-tx h1 span:first-child { background: linear-gradient(180deg, #ffffff 30%, #c9ccd6); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
/* padding справа: курсив вылезает за рамку буквы, а градиент красит только рамку. */
.hm-hero-tx h1 em { font-style: inherit; padding-right: .08em; margin-right: -.08em;
  background: var(--hm-or); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 2px 14px rgba(255, 106, 0, .35)); }
.hm-hero-tx p { margin: clamp(8px, .95cqw, 14px) 0 0; font: 400 20px/1.3 var(--f-ui); font-size: clamp(14px, 1.35cqw, 20px); color: #e6e6ec; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.hm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(14px, 1.75cqw, 26px);
  width: clamp(190px, 18cqw, 268px); height: clamp(42px, 3.57cqw, 53px); border: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #ffa03a, #ff6f0f); color: #1d1004;
  font: 800 16px/1 var(--f-ui); font-size: clamp(13px, 1.08cqw, 16px); text-transform: uppercase; letter-spacing: .02em;
  box-shadow: 0 8px 26px rgba(255, 110, 15, .38), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hm-cta svg { width: 20px; height: 20px; }
.hm-cta:hover { filter: brightness(1.08); }
.hm-feats { position: absolute; z-index: 3; right: clamp(14px, 1.5cqw, 22px); bottom: clamp(12px, 1.2cqw, 18px); display: flex; gap: clamp(8px, .8cqw, 12px); }
.hm-feat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: clamp(96px, 9.3cqw, 138px); height: clamp(88px, 8.3cqw, 123px); padding: 0 6px; border-radius: 10px; cursor: pointer;
  background: rgba(13, 14, 19, .8); border: 1px solid rgba(255, 255, 255, .13); backdrop-filter: blur(6px);
  color: #f2f2f6; font: 600 14px/1.25 var(--f-ui); font-size: clamp(11px, .95cqw, 14px); text-align: center; }
.hm-feat img { width: clamp(30px, 3cqw, 44px); height: clamp(30px, 3cqw, 44px); object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 140, 30, .45)); }
.hm-feat:hover { border-color: rgba(255, 140, 30, .5); }
.hm-feat.static { cursor: default; }
.hm-feat.static:hover { border-color: rgba(255, 255, 255, .13); }
.hm-dots { position: absolute; z-index: 3; left: 50%; bottom: 14px; display: flex; gap: 8px; transform: translateX(-50%); }
.hm-dots button { width: 32px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #3a3d46; cursor: pointer; }
.hm-dots button.on { background: linear-gradient(90deg, #ffa03a, #ff6f0f); }

/* ---------------------------------------------------------- счётчик «N играют» */
.hm-live { display: inline-flex; align-items: center; gap: 7px; color: #a3a6b0; font: 500 12.5px/1 var(--f-ui); white-space: nowrap; }
.hm-live i { width: 7px; height: 7px; border-radius: 50%; background: #2ee26b; box-shadow: 0 0 8px rgba(46, 226, 107, .7); }

/* ---------------------------------------------------------- заголовки секций */
.hm-h { display: flex; align-items: center; gap: 12px; }
.hm-h > img { width: 32px; height: 32px; object-fit: contain; }
.hm-h h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 21px/1 var(--f-ui); color: #fff; }
.hm-h-chev { color: #c9cbd3; font: 400 26px/1 var(--f-ui); }
.hm-all { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
  color: #a4a7b1; font: 500 15px/1 var(--f-ui); cursor: pointer; }
.hm-all span { font-size: 18px; }
.hm-all:hover { color: #fff; }
.hm-games { margin-top: 20px; }
.hm-games > .hm-h { margin-bottom: 13px; }
.hm-h-more { display: none; }

/* ---------------------------------------------------------- плитки игр */
.hm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.hm-pop .hm-tile { grid-column: span 3; }
.hm-more .hm-tile { grid-column: span 4; }
.hm-pop, .hm-more { display: contents; }
.hm-tile { position: relative; display: block; height: 187px; padding: 0; overflow: hidden; border-radius: 10px; cursor: pointer;
  background: #0d0e12; border: 1px solid var(--tb, rgba(255, 140, 40, .28)); text-align: left; color: #fff;
  box-shadow: 0 0 0 0 transparent; transition: transform .2s ease, box-shadow .2s ease; }
.hm-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px var(--tg, rgba(255, 110, 15, .25)); }
.hm-tile[hidden] { display: none; }
.hm-tile-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--tp, 62% 40%);
  transition: transform .4s ease; }
.hm-tile:hover .hm-tile-art { transform: scale(1.05); }
.hm-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 7, 10, .92) 0%, rgba(6, 7, 10, .55) 32%, rgba(6, 7, 10, 0) 60%); }
.hm-tile-tx { position: absolute; z-index: 2; left: 12px; right: 52px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.hm-tile-t { display: block; font: italic 900 19px/.95 var(--f-exo); font-size: clamp(13px, 1.15cqw, 19px); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap;
  background: var(--tt, var(--hm-or)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); }
.hm-tile-t small { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .06em; }
.hm-tile .hm-live { font-size: 12px; color: #b9bcc5; }
.hm-tile-ic { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 9px; background: rgba(10, 10, 14, .72); border: 1px solid rgba(255, 255, 255, .12); }
.hm-tile-ic img { width: 34px; height: 34px; object-fit: contain; }
.hm-tile.t-or { --tt: var(--hm-or); }
.hm-tile.t-gr { --tt: linear-gradient(180deg, #ffffff 20%, #b9ffcf 100%); --tb: rgba(80, 230, 120, .32); --tg: rgba(60, 220, 110, .25); }
.hm-tile.t-wh { --tt: linear-gradient(180deg, #ffffff 30%, #ffd9a8 100%); }
.hm-tile.t-pu { --tt: linear-gradient(180deg, #f0b8ff 0%, #b56bff 60%, #8a5cff 100%); --tb: rgba(160, 110, 255, .35); --tg: rgba(150, 90, 255, .28); }
.hm-tile[data-go="upgrade"] { --tp: 70% 40%; }
.hm-tile[data-go="cases"] { --tp: 72% 45%; }
.hm-tile[data-go="crash"] { --tp: 60% 45%; }
.hm-tile[data-go="mines"] { --tp: 26% 45%; }
.hm-tile[data-go="plinko"] { --tp: 50% 45%; --tb: rgba(255, 160, 40, .4); }
.hm-tile[data-go="milkyway"] { --tp: 45% 50%; }
.hm-tile[data-go="spaceball"] { --tp: 64% 45%; --tb: rgba(255, 70, 50, .4); --tg: rgba(255, 70, 50, .25); }


/* ---------------------------------------------------------- популярные кейсы

   Полка витрины (cases.shelfHTML) во всю ширину — тот же вид, что «На
   скидке» на странице кейсов; на главной пять в ряд, на телефоне лентой. */
#hmCases { margin-top: 26px; }
#hmCases:empty { display: none; }
@media (min-width: 881px) {
  #page-home .cs-shelf-five .cs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}

/* ---------------------------------------------------------- последние выигрыши */
.hm-wins-box { margin: 24px -8px 0; padding: 14px 12px 12px; border-radius: 12px; background: #0e1015; border: 1px solid #1b1e25; }
.hm-wins-box > .hm-h { margin: 0 4px 13px; }
.hm-wins-box > .hm-h > img { width: 28px; height: 28px; }
.hm-wins-box > .hm-h h2 { font-size: 19px; }
.hm-wins { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.hm-wins.all { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@container (max-width: 1180px) { .hm-wins, .hm-wins.all { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hm-win { display: flex; align-items: center; gap: 8px; height: 93px; padding: 0 10px 0 6px; border-radius: 8px; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 20%, #15171d) 0%, #15171d 72%);
  border: 1px solid #23262d; color: #fff; text-align: left; min-width: 0; }
.hm-win:hover { border-color: color-mix(in srgb, var(--rc) 60%, #23262d); }
/* Живая лента: новый крупный выигрыш въезжает слева, остальные сдвигаются. */
.hm-win.in { animation: hmWinIn .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hmWinIn {
  0% { opacity: 0; transform: translateX(-24px) scale(.94); box-shadow: 0 0 0 0 transparent; }
  60% { opacity: 1; box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 55%, transparent); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 transparent; }
}
.hm-win-art { position: relative; flex: none; width: 72px; height: 54px; display: grid; place-items: center; overflow: hidden; }
.hm-win-art > * { max-width: 100%; max-height: 100%; }
.hm-win-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.hm-win-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hm-win-tx small { font: 400 12px/1.15 var(--f-ui); color: #9a9da8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-win-tx b { font: 700 13px/1.15 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-win-p { margin-top: 3px; font: 700 14px/1 var(--f-ui); color: #fff; white-space: nowrap; }
.hm-empty { grid-column: 1 / -1; padding: 20px; color: #8d909a; font: 400 14px/1.3 var(--f-ui); }


/* ---------------------------------------------------------- телефон */
@media (max-width: 880px) {
  .content:has(> #page-home.on) { padding-left: 14px; padding-right: 14px; padding-top: 0; }
  #page-home .hm { padding-bottom: 18px; }

  /* баннер */
  .hm-hero { height: 162px; margin: 0 -4px; border-radius: 12px; }
  .hm-slide img { object-position: 70% 40%; }
  .hm-slide::after { background: linear-gradient(90deg, rgba(5, 6, 10, .85) 0%, rgba(5, 6, 10, .45) 40%, rgba(5, 6, 10, 0) 62%); }
  .hm-hero-tx { left: 14px; top: 22px; transform: none; }
  /* Кегль прежний (владелец вернул, 29.10). На 320–384 «И выигрывай»
     доходит до ножа робота — оранжевые буквы отделены тёмной обводкой,
     чтобы «АЙ» не сливались с оранжевым ножом. */
  .hm-hero-tx h1 { font-size: 27px; line-height: 1; }
  .hm-hero-tx h1 em { filter: drop-shadow(0 0 1px #05060a) drop-shadow(0 1px 1px #05060a) drop-shadow(0 0 6px rgba(5, 6, 10, .85)); }
  .hm-hero-tx p { margin-top: 7px; font-size: 11.5px; line-height: 1.25; }
  .hm-cta { width: 140px; height: 32px; margin-top: 11px; gap: 7px; border-radius: 7px; font-size: 11px; }
  .hm-cta svg { width: 14px; height: 14px; }
  .hm-feats { display: none; }
  .hm-dots { left: auto; right: 12px; bottom: 11px; transform: none; gap: 5px; }
  .hm-dots button { width: 13px; height: 5px; border-radius: 3px; }
  .hm-dots button.on { width: 13px; }

  /* три преимущества и поиск */
  .hm-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
  .hm-chip { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 7px 0 8px; border-radius: 8px; cursor: pointer;
    background: #121419; border: 1px solid #23262d; color: #f0f0f4; font: 600 9.5px/1.2 var(--f-ui); text-align: left; }
  .hm-chip img { width: 20px; height: 20px; object-fit: contain; flex: none; }
  .hm-chip.static { cursor: default; }
  .hm-chip span { flex: 1; min-width: 0; }
  .hm-chip i { color: #8a8d97; font: 400 16px/1 var(--f-ui); font-style: normal; }
  .hm-find { display: flex; gap: 8px; margin-top: 9px; }
  .hm-find-in { flex: 1; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-radius: 8px;
    background: #121419; border: 1px solid #23262d; color: #8a8d97; }
  .hm-find-in svg { width: 16px; height: 16px; flex: none; }
  #page-home .hm-find-in input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
    box-shadow: none; border-radius: 0; -webkit-appearance: none; appearance: none; color: #fff; font: 400 13px/1 var(--f-ui); }
  .hm-find-in input::placeholder { color: #8a8d97; }
  .hm-filter { display: grid; place-items: center; width: 34px; height: 32px; padding: 0; border-radius: 8px; cursor: pointer;
    background: #121419; border: 1px solid #23262d; color: #c9cbd3; }
  .hm-filter.on { border-color: #ff8a1e; color: #ff8a1e; }
  .hm-filter svg { width: 18px; height: 18px; }


  /* заголовки */
  .hm-games { margin-top: 13px; }
  .hm-games > .hm-h { margin-bottom: 8px; }
  .hm-h { gap: 9px; }
  .hm-h > img { width: 20px; height: 20px; }
  .hm-h-d { display: none; }
  .hm-h-m { display: block; }
  .hm-h h2 { font: 900 11.5px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .03em; }
  .hm-h-chev { display: none; }
  .hm-all { font-size: 11px; gap: 6px; }
  .hm-all span { font-size: 14px; }

  /* плитки: 2×2 и 3 */
  .hm-grid { display: block; }
  .hm-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hm-pop .hm-tile, .hm-more .hm-tile { grid-column: auto; }
  .hm-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .hm-h-more { display: flex; margin: 14px 0 8px; }
  .hm-tile { height: 91px; border-radius: 9px; border-color: rgba(255, 255, 255, .1); }
  .hm-more .hm-tile { height: 82px; }
  .hm-tile-art { object-position: 80% 40%; }
  .hm-tile[data-go="mines"] .hm-tile-art { object-position: 30% 45%; }
  .hm-tile[data-go="milkyway"] .hm-tile-art { object-position: 50% 50%; }
  .hm-tile::after { background: linear-gradient(90deg, rgba(6, 7, 10, .75) 0%, rgba(6, 7, 10, .2) 55%, rgba(6, 7, 10, 0) 70%),
    linear-gradient(0deg, rgba(6, 7, 10, .8) 0%, rgba(6, 7, 10, 0) 55%); }
  .hm-tile-tx { left: 10px; right: 40px; bottom: 9px; gap: 5px; }
  .hm-tile-t { font-size: 14px; --tt: var(--hm-or); background: linear-gradient(180deg, #ffd66a 0%, #ff9a2a 60%, #ff7414 100%);
    -webkit-background-clip: text; background-clip: text; }
  .hm-tile-t small { font-size: 11px; margin-top: 0; letter-spacing: 0; }
  .hm-more .hm-tile-t { font-size: 12px; }
  .hm-tile .hm-live { font-size: 9.5px; gap: 5px; }
  .hm-tile .hm-live i { width: 6px; height: 6px; }
  .hm-more .hm-tile .hm-live { font-size: 8.5px; }
  .hm-tile-ic { display: none; }
  .hm-tile-go { display: grid; place-items: center; position: absolute; z-index: 2; right: 9px; bottom: 9px; width: 22px; height: 22px;
    border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); background: rgba(10, 10, 14, .35); color: #fff; }
  .hm-tile-go svg { width: 12px; height: 12px; }
  .hm-more .hm-tile-go { width: 19px; height: 19px; right: 7px; bottom: 8px; }
  .hm-more .hm-tile-go svg { width: 10px; height: 10px; }
  .hm-more .hm-tile-tx { right: 32px; left: 8px; }

  /* популярные кейсы — лента с прокруткой */
  #hmCases { margin-top: 16px; }
  #page-home #hmCases .cs-grid { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -14px; padding: 0 14px 4px; scroll-padding: 0 14px; scroll-snap-type: x proximity; }
  #page-home .cs-shelf-five .cs-grid::-webkit-scrollbar { display: none; }
  #page-home .cs-shelf-five .cs-card { flex: none; width: 44%; scroll-snap-align: start; }

  /* выигрыши: строка с прокруткой */
  .hm-wins-box { margin: 14px 0 0; padding: 0; background: none; border: 0; }
  .hm-wins-box > .hm-h { margin: 0 0 10px; }
  .hm-wins-box > .hm-h > img { width: 20px; height: 20px; }
  .hm-wins-box > .hm-h h2 { font-size: 11.5px; }
  .hm-wins, .hm-wins.all { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
  .hm-wins::-webkit-scrollbar { display: none; }
  .hm-win { flex: none; flex-direction: column; align-items: stretch; gap: 2px; width: 92px; height: 88px; padding: 5px 6px 7px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 16%, #14161b) 0%, #14161b 70%); }
  .hm-win-art { position: relative; flex: none; width: 100%; height: 34px; overflow: hidden; }
  .hm-win-tx { gap: 1px; }
  .hm-win-tx small { font-size: 9.5px; }
  .hm-win-tx b { font-size: 9.5px; }
  .hm-win-p { margin-top: 2px; font-size: 11px; }
}

/* ============================================================ ALIVE · MILKY WAY — ПАНЕЛЬ СТАВКИ КАК В РАКЕТЕ

   Владелец 24.10: на компьютере блок ставки — тот же, что у «Ракеты»
   (BetPanel, .rbp): сумма с −/+, быстрые суммы, «Скины в ставке». Внутрь
   панели milkyway.js переносит «Сложность», «Прыгнуть» и под ней «Забрать
   выигрыш» (placeNodes). Карточки «Баланс» под игрой нет. Телефон (.mw.mob)
   — прежняя панель плюс блок скинов #mwSkins. */
.mw-bp { display: none; }
.mw:not(.mob) .mw-bp { display: flex; }
.mw:not(.mob) .mw-panel { display: block; }
.mw:not(.mob) .mw-side, .mw:not(.mob) .mw-side-t, .mw:not(.mob) .mw-modes,
.mw:not(.mob) .mw-bet, .mw:not(.mob) #mwSkins { display: none !important; }
.mw-bp .rbp-main { display: none; }
.mw-bp .mw-bp-mid { display: flex; flex-direction: column; }
.mw-bp .mw-diff { margin: 0; padding: 0; gap: 8px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.mw-bp .mw-diff .mw-card-h { font-size: var(--fs-micro); }
.mw-bp .mw-segs button { height: 36px; }
.mw-bp .rbp-foot { gap: 8px; }
.mw-bp .mw-go, .mw-bp .mw-cash { width: 100%; margin: 0; min-height: 56px; }
.mw-bp .mw-cash { min-height: 52px; }
/* Ряд под сценой — автоигра и автозабор, без «Баланса» и «Забрать» */
.mw:not(.mob) .mw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container mw (min-width: 1000px) {
  .mw:not(.mob) .mw-in {
    grid-template-columns: clamp(268px, 25%, 320px) repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "bp    scene scene scene scene"
      "bp    ap    ap    az    az"
      "lists lists lists lists lists"
      "how   how   how   how   how"; }
  .mw:not(.mob) .mw-panel { display: contents; }
  .mw-bp { grid-area: bp; align-self: stretch; }
}
/* Телефон: скины — одной кнопкой в шапке «Сумма ставки» */
.mw.mob .mw-bet .mw-card-h { display: flex; align-items: center; justify-content: space-between; gap: 2vw; }
.mw.mob .mw-bet .mw-card-h .skb { padding: 0; background: none; border: 0; box-shadow: none; }
.mw.mob .mw-bet .mw-card-h .skb-chip, .mw.mob .mw-bet .mw-card-h .skb-x { height: 6.4vw; font-size: 2.6vw; text-transform: none; letter-spacing: 0; }
.mw.mob .mw-bet .mw-card-h .skb-x { width: 6.4vw; }
.skb-note { margin: 2px 0 0; font: 500 var(--fs-micro)/1.3 var(--f-ui); color: #8d909a; }

/* ============================================================ ALIVE · SPACE BALL — ПАНЕЛЬ СТАВКИ КАК В РАКЕТЕ

   Владелец 24.10: на компьютере (от 881 px) блок ставки — BetPanel «Ракеты»
   (.rbp, #sbBp): сумма, быстрые суммы, «Скины в ставке»; spaceball.js
   переносит в него «Ударить», «Забрать» (placeNodes) и, в широких
   раскладках, автоигру (placeWide). #sbPanel вокруг — прозрачная обёртка.
   Телефон — прежняя нижняя панель плюс блок скинов #sbSkins. */
.sb-bp { display: none; }
@media (min-width: 881px) {
  .sb-bp { display: flex; }
  #sbPanel > .sb-side, #sbPanel > .sb-side-t, #sbPanel > .sb-modes, #sbPanel > .sb-bet,
  #sbPanel > #sbSkins { display: none !important; }
  .sb > .sb-panel, .sb.w2 > .sb-panel, .sb.w3 > .sb-panel { display: block; padding: 0; background: none; border: 0; box-shadow: none; }
  .sb.w2 > .sb-panel > .sb-bp, .sb.w3 > .sb-panel > .sb-bp { height: 100%; }
  .sb-bp .rbp-main { display: none; }
  .sb-bp .sb-go { width: 100%; min-height: 60px; }
  .sb-bp .sb-cash { width: 100%; min-height: 54px; }
  .sb-bp > .sb-auto { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--sb-line); }
  .sb-bp > .sb-auto > .sb-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; }
  .sb-bp > .sb-auto .sb-ap { grid-template-columns: minmax(0, 1fr); }
  .sb-bp > .sb-auto .sb-ap-tg { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (max-width: 880px) {
  #sbSkins { flex-basis: 100%; padding: 8px 10px; }
  #sbSkins.is-none { padding: 0; background: none; border: 0; box-shadow: none; }
}

/* ============================================================ ALIVE · PLINKO — ПАНЕЛЬ СТАВКИ КАК В РАКЕТЕ

   Владелец 24.10: на широкой странице игры (.pk.wide, от 940 px — шахте
   остаётся от 620 px) блок ставки — BetPanel «Ракеты» слева от шахты:
   сумма, быстрые суммы, «Скины в ставке». plinko.js переносит в него риск,
   ряды, «Запуск» и автоигру (placeNodes); полоса на полу шахты пустеет и
   прячется. Уже — прежняя полоса и телефон, плюс блок скинов #pkSkins. */
.pk-bp { display: none; }
.pk.wide .pk-bp { display: flex; }
.pk.wide .pk-bar { display: none; }
.pk-bp .rbp-main { display: none; }
.pk-bp .pk-bp-mid { display: flex; flex-direction: column; gap: 14px; }
.pk-bp .pk-card { padding: 0; gap: 8px; background: none; border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.pk-bp .pk-card-h { display: flex; font: 600 var(--fs-micro)/1 var(--f-ui); color: #c9cbd3; }
.pk-bp .pk-segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.pk-bp .pk-seg { height: 36px; }
.pk-bp .pk-go { width: 100%; min-height: 58px; }
.pk-bp > .pk-c-auto { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.pk-bp .pk-auto { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* узкая страница и телефон: строка «Поставить скинами» в полосе */
.pk-c-skins.is-none { padding: 0; background: none; border: 0; box-shadow: none; }
.pk-bar .pk-c-skins { grid-column: 1 / -1; }
/* компактная строка скинов (SkinBet compact): кнопка и крестик */
.skb.is-compact { flex-direction: row; align-items: center; gap: 6px; }
.skb-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 7px; cursor: pointer;
  border: 1px dashed rgba(255, 168, 56, .45); background: rgba(255, 122, 24, .06); color: #ffb054; font: 700 var(--fs-micro)/1 var(--f-ui);
  white-space: nowrap; }
.skb-chip.on { border-style: solid; background: rgba(255, 122, 24, .14); }
.skb-x { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: none; color: #c9cbd3; font: 400 16px/1 var(--f-ui); }
.pk.mob .pk-c-bet .pk-card-h { align-items: center; justify-content: space-between; }
.pk.mob .pk-card-h .skb { margin-left: auto; }
.pk.mob .pk-card-h .skb-chip, .pk.mob .pk-card-h .skb-x { height: 7cqw; font-size: 2.9cqw; text-transform: none; letter-spacing: 0; }
.pk.mob .pk-card-h .skb-x { width: 7cqw; }

/* ---- Milky Way: панель ставки поверх сцены, сцена во всю ширину ----

   Владелец 24.10: «как будто больше погружен в игру». Сцена — на всю
   ширину страницы игры и высотой примерно как у «Минного поля»; панель
   «Ракеты» лежит поверх её левой части стеклом. Маскот и вагоны стоят
   правее панели (deskGeo в milkyway.js по M.inset), логотип и онлайн —
   справа. Автоигра и автозабор — внизу панели, ряда под сценой нет. */
@container mw (min-width: 1000px) {
  .mw:not(.mob) .mw-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "scene" "lists" "how"; }
  .mw:not(.mob) .mw-scene { grid-area: scene; aspect-ratio: auto; height: auto; min-height: 620px; align-self: stretch; }
  .mw:not(.mob) .mw-bp { grid-area: scene; justify-self: start; align-self: start; width: 312px; margin: 14px; z-index: 9;
    background: linear-gradient(180deg, rgba(16, 16, 22, .8), rgba(9, 9, 13, .86));
    backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-color: rgba(255, 122, 24, .28); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); }
  .mw:not(.mob) .mw-row { display: none; }
  .mw:not(.mob) .mw-logo { left: auto; right: 16px; bottom: 12px; }
  .mw:not(.mob) .mw-online { top: 66px; bottom: auto; right: 16px; }
}
.mw-bp > .mw-ap, .mw-bp > .mw-az { margin: 0; padding: 0; gap: 8px; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; }
.mw-bp > .mw-ap { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; }
.mw-bp > .mw-ap .mw-ap-tg { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.mw-bp > .mw-ap .mw-ap-k { display: none; }
.mw-bp > .mw-ap .mw-ap-n { display: block; width: 100%; }
.mw-bp > .mw-ap, .mw-bp > .mw-az { align-items: stretch; justify-content: flex-start; text-align: left; }
.mw-bp > .mw-ap .mw-ap-tg { width: 100%; }
.mw-bp > .mw-ap .mw-ap-segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.mw-bp > .mw-ap .mw-ap-segs button { height: 32px; }
.mw-bp > .mw-ap.off .mw-ap-n, .mw-bp > .mw-az.off { opacity: .55; }

/* ---- Space Ball: панель ставки поверх сцены, сцена во всю ширину ----

   Владелец 24.10, как Milky Way: сцена на всю ширину страницы игры и выше,
   панель «Ракеты» поверх левой части стеклом. Картинка с бьющим и воротами
   справа, слева под панелью — дорисованный стадион (bg_wide.webp, measure в
   spaceball.js). Таблица выигрышей — на сцене справа. */
.sb.w2 { grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 380px);
  grid-template-areas: "scene scene" "hist top" "how how"; }
.sb.w2 > .sb-panel { grid-area: scene; justify-self: start; align-self: start; width: 312px; margin: 14px; z-index: 9; }
.sb.w2 > .sb-panel > .sb-bp { height: auto;
  background: linear-gradient(180deg, rgba(16, 16, 22, .8), rgba(9, 9, 13, .86));
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-color: rgba(255, 122, 24, .28); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sb.w2 .sb-scene { min-height: 0; height: clamp(520px, 50vw - 120px, 680px); }
.sb.w2.tight .sb-scene > .sb-table { display: none; }

/* ---- Plinko: панель ставки поверх сцены, сцена во всю ширину ----

   Владелец 24.10, как Milky Way и Space Ball: на широкой странице (.wide)
   сцена — своя картинка scene_wide.webp (слева дорисован мир), панель
   «Ракеты» лежит поверх её левой части стеклом, шахта — правее панели. */
/* средняя ширина (.wide без .over): панель — колонкой слева, как у «Ракеты» */
.pk.wide:not(.over) .pk-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.pk.wide:not(.over) .pk-bp { align-self: stretch; }
.pk.over .pk-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pk.over .pk-bp { grid-area: 1 / 1; justify-self: start; align-self: start; width: 312px; margin: 14px; z-index: 20;
  background: linear-gradient(180deg, rgba(16, 16, 22, .78), rgba(9, 9, 13, .84));
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-color: rgba(255, 122, 24, .28); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); }
.pk.over .pk-stage { grid-area: 1 / 1; }
/* «Заряд вытяжки» — правее панели */
.pk.over .pk-charge { left: 340px; }

/* ---- Plinko: «Последние игры» и «Топ выигрышей» под шахтой — как у
   Milky Way (классы mw-*, их переменные — здесь) ---- */
.pk-lists { --mw-bg: #08090c; --mw-card: #101115; --mw-surf: #17191f; --mw-line: rgba(255, 255, 255, .075);
  --mw-or: #ff7900; --mw-amb: #ffad32; --mw-tx: #f2f2f4; --mw-tx2: #858894; --mw-ok: #35d07f; --mw-bad: #ff4d4f;
  color: var(--mw-tx); }
.pk-lists .mw-tbl td.num, .pk-lists .mw-tbl td { font-variant-numeric: tabular-nums; }
.pk-lists .dim { color: #6d707a; }
.pk-lists .pk-tag { padding: 1px 5px; border-radius: 4px; background: rgba(90, 180, 255, .16); color: #9fd4ff; font: 800 10px/1.4 var(--f-ui); }
@container pkpage (min-width: 900px) { .pk-lists { grid-template-columns: minmax(0, 1fr) clamp(280px, 30%, 400px); align-items: start; } }
.pk.mob .pk-lists { display: none; }
/* ---- Plinko: «Заряд вытяжки» крупнее, текст не у края; ряды заперты, пока летят ядра ---- */
.pk:not(.mob) .pk-charge { width: 210px; padding: 12px 16px 13px; border-radius: 12px; }
.pk:not(.mob) .pk-charge-h { margin-bottom: 9px; font-size: var(--fs-cap); }
.pk:not(.mob) .pk-charge-bar { height: 9px; }
.pk:not(.mob) .pk-charge-tx { margin-top: 7px; }
.pk-seg:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================ ALIVE · ДРУЗЬЯ

   «Приглашай друзей» (ТЗ_ПРИГЛАСИ_ДРУЗЕЙ.md) по макету docs/invite/maket.webp:
   окно (.ivt-*), блок «Друзья» в кабинете (.prf-*), полоса приглашённого
   гостя (.ivs-*) и строка в окне входа (.lga-inv). Префиксы проверены грепом.
   Окно — своим слоем, как окно входа (z 180: над модалкой 150, под тостами
   200 и окном входа 400). Сундука из макета нет — вместо арта свечение. */

.ivt[hidden], .ivs-strip[hidden], .lga-inv[hidden], .pra-friends[hidden] { display: none !important; }
body.ivt-on { overflow: hidden; }
/* Затемнение — фон самого прокручиваемого слоя. Отдельным position: fixed
   элементом оно перехватывало прокрутку: свайп, начатый у края экрана,
   уходил документу (overflow: hidden) и окно не листалось. */
.ivt {
  position: fixed; inset: 0; z-index: 180; display: flex;
  padding: 24px 16px; overflow: auto; overscroll-behavior: contain;
  background: rgba(4, 4, 6, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* margin: auto, а не place-items: center — окно выше экрана иначе
   обрезается сверху и до заголовка не доскроллить. */
.ivt > .ivt-win { margin: auto; }
.ivt-dim { display: none; }
.ivt-win {
  position: relative; width: min(1400px, 100%); padding: 40px 52px 36px; border-radius: 26px;
  display: grid; grid-template-columns: 1fr auto; gap: 26px 32px; overflow: hidden;
  border: 1px solid rgba(255, 122, 24, .28);
  background: radial-gradient(70% 90% at 92% 0%, rgba(255, 122, 24, .22), transparent 60%),
              linear-gradient(160deg, #131016 0%, #0b0b10 55%, #08080c 100%);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ivt-load { display: block; text-align: center; color: var(--tx-2); width: min(420px, 100%); }
.ivt-glow { position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 24, .35), transparent 65%); pointer-events: none; }
/* Маскот шапки — на телефоне (пример владельца); на десктопе шапка по макету без него. */
.ivt-mascot { display: none; }
.ivt-x {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px; color: #fff; cursor: pointer;
  background: rgba(10, 10, 14, .78); border: 1px solid rgba(255, 255, 255, .14);
}
.ivt-head { position: relative; z-index: 1; }
.ivt-head h2 { margin: 0; font: 800 clamp(30px, 3.9vw, 58px)/1.04 var(--f-hd); color: #fff;
  letter-spacing: -.01em; }
.ivt-head h2 em { font-style: normal; color: var(--or-2); }
.ivt-sub { margin: 14px 0 0; font-size: clamp(16px, 1.6vw, 26px); color: #9b9fb0; }

.ivt-count {
  position: relative; z-index: 1; align-self: center; margin-right: 64px;
  display: flex; align-items: center; gap: 18px; padding: 18px 26px; border-radius: 16px;
  background: rgba(14, 13, 18, .86); border: 1px solid rgba(255, 255, 255, .1);
}
.ivt-count-ic { width: 52px; height: 52px; color: var(--or-2); }
.ivt-count-ic svg { width: 100%; height: 100%; }
.ivt-count-tx { display: flex; flex-direction: column; gap: 4px; }
.ivt-count-tx b { font: 800 34px/1 var(--f-hd); color: #fff; }
.ivt-count-tx b i { font-style: normal; color: var(--or-2); }
.ivt-count-tx small { font-size: var(--fs-label); color: #c3c5cf; }
.ivt-count-tx .ivt-wip { color: var(--tx-2); font-size: var(--fs-cap); }

/* Узлы шкалы — над центрами карточек, как в макете: --x — доля ширины. */
.ivt-scale { grid-column: 1 / -1; position: relative; height: 104px; }
.ivt-track, .ivt-fill { position: absolute; left: 0; top: 34px; height: 6px; border-radius: 3px; }
.ivt-track { right: 0; background: rgba(255, 255, 255, .1); }
.ivt-fill { width: calc(var(--f) * 100%);
  background: linear-gradient(90deg, #ff7a18, #ffa838); box-shadow: 0 0 16px rgba(255, 122, 24, .6); }
.ivt-node { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ivt-dot { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  font: 800 30px/1 var(--f-hd); color: #fff; border: 2px solid rgba(255, 255, 255, .12);
  background: radial-gradient(circle, #23232c, #121217 70%); color: #8f93a3; }
.ivt-dot svg { width: 26px; height: 26px; }
.ivt-node.done .ivt-dot { color: #1a0d03; border-color: rgba(255, 190, 120, .6);
  background: radial-gradient(circle at 40% 35%, #ffb04a, #ff7a18 70%);
  box-shadow: 0 0 0 6px rgba(255, 122, 24, .14), 0 0 30px rgba(255, 122, 24, .7); }
/* Следующая цель — серый замок, как в макете, но с оранжевой обводкой. */
.ivt-node.cur .ivt-dot { color: #c9cbd4; border-color: rgba(255, 122, 24, .55);
  box-shadow: 0 0 22px -4px rgba(255, 122, 24, .5); }
.ivt-node b { font: 800 28px/1 var(--f-hd); color: #fff; }

.ivt-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.ivt-card {
  --ac: #ff8a1f; --ac-bg: rgba(255, 122, 24, .2);
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 340px;
  padding: 26px 34px 26px; border-radius: 18px; border: 2px solid var(--ac);
  background: radial-gradient(90% 70% at 50% 100%, var(--ac-bg), transparent 70%),
              linear-gradient(180deg, rgba(18, 16, 20, .96), rgba(12, 11, 15, .96));
  box-shadow: 0 0 30px -8px var(--ac), inset 0 0 40px -18px var(--ac);
}
.ivt-card.a-purple { --ac: #a855f7; --ac-bg: rgba(168, 85, 247, .22); }
.ivt-card.a-gold { --ac: #e2a33a; --ac-bg: rgba(226, 163, 58, .22); }
.ivt-card-h { margin: 0; text-align: center; font: 800 34px/1.1 var(--f-hd); color: var(--ac); }
.ivt-card.a-gold .ivt-card-h { color: #ffd27a; }
.ivt-art { flex: 1; display: grid; place-items: center; min-height: 170px; }
.ivt-art img { width: 100%; max-width: 360px; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.ivt-name { display: flex; flex-direction: column; gap: 2px; }
.ivt-name b { font: 700 25px/1.2 var(--f-hd); color: #fff; }
.ivt-name span { font-size: 22px; color: #c9cbd4; }
.ivt-meta { font-size: var(--fs-label); color: var(--tx-2); }
.ivt-foot-st { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ivt-st { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); color: #c9cbd4; }
.ivt-st svg { width: 16px; height: 16px; color: var(--tx-3); }
.ivt-st.ok { color: var(--green); }
.ivt-take { align-self: flex-start; padding: 12px 26px; border-radius: 11px; cursor: pointer;
  font: 800 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #1a0d03;
  border: 0; background: linear-gradient(180deg, #ffb04a, #ff7a18); box-shadow: 0 10px 26px -10px rgba(255, 122, 24, .9); }
.ivt-take:disabled { opacity: .6; cursor: default; }
.ivt-need { font-size: var(--fs-cap); color: var(--tx-2); line-height: 1.4; }

.ivt-rule { grid-column: 1 / -1; margin: -6px 0 0; font-size: var(--fs-label); color: var(--tx-2);
  line-height: 1.5; }

.ivt-foot { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 38px; align-items: stretch; }
.ivt-foot.guest { grid-template-columns: 1fr auto; align-items: center; }
.ivt-foot.guest p { margin: 0; color: #c3c5cf; font-size: var(--fs-body); }
.ivt-field { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 12px; border-radius: 16px; background: rgba(14, 13, 18, .9); border: 1px solid rgba(255, 255, 255, .1); }
.ivt-field-ic, .ivt-copy { width: 58px; height: 58px; border-radius: 12px; display: grid; place-items: center;
  color: #c9cbd4; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.ivt-field-ic svg, .ivt-copy svg { width: 26px; height: 26px; }
.ivt-copy { cursor: pointer; }
.ivt-field input { min-width: 0; height: 58px; padding: 0 14px; border-radius: 10px; border: 0; outline: 0;
  font-size: clamp(15px, 1.5vw, 22px); color: #d4d6de; background: rgba(0, 0, 0, .25); }
.ivt-go { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 84px;
  padding: 0 28px; border-radius: 16px; border: 0; cursor: pointer; color: #160a02;
  font: 800 clamp(18px, 2vw, 30px)/1 var(--f-hd);
  background: linear-gradient(180deg, #ffa53a, #ff7a18);
  box-shadow: 0 16px 40px -14px rgba(255, 122, 24, .95), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ivt-go svg { width: 34px; height: 34px; }

@media (max-width: 1100px) {
  .ivt-win { padding: 32px 26px 26px; gap: 22px; }
  .ivt-cards { gap: 16px; }
  .ivt-card { padding: 20px; min-height: 0; }
  .ivt-card-h { font-size: 26px; }
  .ivt-name b { font-size: 20px; }
  .ivt-name span { font-size: 17px; }
  .ivt-foot { gap: 16px; }
}
/* Телефон — по примеру владельца (25.10): окно-карточка с рамкой и
   отступами, арт с маскотом фоном шапки, компактная шкала, карточки наград
   в две колонки — текст слева, скин справа. */
@media (max-width: 760px) {
  .ivt { padding: 16px; }
  .ivt-win { grid-template-columns: 1fr; gap: 12px; padding: 36px 16px 16px; border-radius: 22px;
    border-color: rgba(255, 122, 24, .45); }
  .ivt-glow { display: none; }
  /* Арт владельца (hero.webp, 2:1, фон прозрачный, края рваные): маскот у
     правого края, сцена уходит под заголовок. Вылезает за окно справа и
     сверху — срезает рамка окна. Левая часть приглушена под текст, низ
     (там тело маскота обрезано) растворяется маской: наложенный градиент
     цвета панели выдавал край арта на оранжевом свечении окна. */
  .ivt-mascot { --aw: min(92%, 430px); display: block; position: absolute; top: 0; right: calc(var(--aw) * -.05);
    width: var(--aw); aspect-ratio: 2 / 1; margin-top: calc(var(--aw) * -.045); pointer-events: none;
    background: url(/assets/invite/hero.webp) left top / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 8%, rgba(0, 0, 0, .6) 38%, #000 58%),
                        linear-gradient(180deg, #000 66%, transparent 97%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 8%, rgba(0, 0, 0, .6) 38%, #000 58%),
                linear-gradient(180deg, #000 66%, transparent 97%);
    mask-composite: intersect; }
  .ivt-x { width: 34px; height: 34px; top: 10px; right: 10px; border-radius: 10px; font-size: 16px; }
  /* Заголовок — две строки слева от головы маскота, как на примере. */
  .ivt-head h2 { max-width: 74%; font-size: 20px; line-height: 1.16; }
  .ivt-sub { max-width: 72%; margin-top: 8px; font-size: 11px; }
  .ivt-head h2, .ivt-sub { text-shadow: 0 2px 12px rgba(0, 0, 0, .85); }
  /* Справа счётчик прозрачнее — сквозь него видно тело маскота. */
  .ivt-count { margin: 0; gap: 12px; padding: 10px 14px; border-radius: 12px;
    border-color: rgba(255, 122, 24, .3);
    background: linear-gradient(90deg, rgba(14, 13, 18, .92) 45%, rgba(14, 13, 18, .45)); }
  .ivt-count-ic { width: 30px; height: 30px; }
  .ivt-count-tx { gap: 2px; }
  .ivt-count-tx b { font-size: 21px; }
  .ivt-count-tx small { font-size: 11px; }
  .ivt-scale { height: 58px; margin-top: 2px; }
  .ivt-track, .ivt-fill { top: 15px; height: 4px; }
  .ivt-node { gap: 6px; }
  .ivt-dot { width: 34px; height: 34px; font-size: 15px; border-width: 1.5px; }
  .ivt-dot svg { width: 14px; height: 14px; }
  .ivt-node.done .ivt-dot { box-shadow: 0 0 0 4px rgba(255, 122, 24, .14), 0 0 18px rgba(255, 122, 24, .7); }
  .ivt-node b { font-size: 14px; }

  .ivt-cards { grid-template-columns: 1fr; gap: 10px; }
  .ivt-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "h art" "name art" "meta art" "st art"; grid-template-rows: auto auto auto 1fr;
    align-items: start; column-gap: 4px; min-height: 0; padding: 12px 14px; border-radius: 14px;
    border-width: 1.5px; overflow: hidden;
    background: linear-gradient(100deg, rgba(14, 12, 16, .97) 30%, rgba(14, 12, 16, .7)),
                radial-gradient(80% 120% at 100% 0%, var(--ac-bg), transparent 70%); }
  .ivt-card-h { grid-area: h; text-align: left; font-size: 20px; line-height: 1.1; margin-bottom: 4px; }
  .ivt-art { grid-area: art; position: relative; z-index: 0; min-height: 0; height: 100%; align-self: center; }
  /* Рендер Steam квадратный и с широкими полями: сам предмет — около двух
     третей кадра. Крупнее колонки и к правому краю, как на примере; лишнее
     срезает overflow карточки, высоту держат отрицательные поля. */
  .ivt-art img { width: 134%; max-width: none; height: auto; aspect-ratio: auto;
    margin: -17% -26% -17% -8%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
  /* Текст — над картинкой: длинное имя скина не уходит под ствол. */
  .ivt-card-h, .ivt-name, .ivt-meta, .ivt-foot-st { position: relative; z-index: 1; }
  .ivt-name { grid-area: name; gap: 0; }
  .ivt-name b { font-size: 15px; }
  .ivt-name span { font-size: 13px; }
  .ivt-meta { grid-area: meta; margin-top: 4px; font-size: 11px; }
  .ivt-foot-st { grid-area: st; margin-top: 6px; gap: 4px; }
  .ivt-st { font-size: 11px; gap: 6px; }
  .ivt-st svg { width: 12px; height: 12px; }
  .ivt-take { padding: 8px 14px; font-size: 11px; border-radius: 9px; }
  .ivt-need { font-size: 10px; }

  .ivt-rule { margin: 0; font-size: 11px; line-height: 1.45; }
  .ivt-foot, .ivt-foot.guest { grid-template-columns: 1fr; gap: 10px; }
  .ivt-foot.guest p { font-size: var(--fs-label); }
  .ivt-field { gap: 6px; padding: 5px; border-radius: 12px; }
  .ivt-field-ic, .ivt-copy { width: 34px; height: 34px; border-radius: 9px; }
  .ivt-field-ic svg, .ivt-copy svg { width: 17px; height: 17px; }
  .ivt-field input { height: 34px; padding: 0 8px; font-size: 13px; }
  .ivt-go { min-height: 46px; gap: 12px; border-radius: 12px; font-size: 16px; }
  .ivt-go svg { width: 22px; height: 22px; }
}

/* ---------------------------------------------------------- кабинет: «Друзья» */

.pra-friends { position: relative; display: flex; flex-direction: column; gap: 12px; }
.prf-head {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
  padding: 18px 24px 18px 22px; border-radius: 18px; border: 1px solid rgba(255, 122, 24, .32);
  background: linear-gradient(150deg, rgba(30, 19, 13, .78), rgba(13, 13, 18, .72) 55%, rgba(10, 10, 14, .62));
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .8), inset 0 0 60px -30px rgba(255, 122, 24, .35);
}
.prf-ic { position: relative; z-index: 2; width: 62px; height: 62px; border-radius: 50%; flex: none;
  display: grid; place-items: center; border: 1px solid rgba(255, 122, 24, .55);
  background: radial-gradient(circle, rgba(255, 122, 24, .26), rgba(12, 10, 9, .92) 72%);
  box-shadow: 0 0 26px -6px rgba(255, 122, 24, .75); }
.prf-ic svg { width: 30px; height: 30px; }
.prf-tt { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.prf-tt > b { display: flex; align-items: center; gap: 10px;
  font: 700 27px/1.1 var(--f-hd); color: #fff; }
.prf-n { font-style: normal; padding: 2px 9px; border-radius: 12px; font-size: var(--fs-label);
  color: #1a0d03; background: #ffa838; }
.prf-tt > small { font-size: var(--fs-label); line-height: 1.45; color: #a2a2b2; }
.prf-open { position: relative; z-index: 2; flex: none; padding: 13px 24px; border-radius: 11px; cursor: pointer;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #1a0d03;
  border: 0; background: linear-gradient(180deg, #ffb04a, #ff7a18); }
.prf-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 12px;
  align-items: center; padding: 12px 16px; border-radius: 12px;
  background: rgba(14, 13, 18, .72); border: 1px solid rgba(255, 255, 255, .07); }
.prf-nm { display: flex; flex-direction: column; font-weight: 700; color: #fff; }
.prf-nm small, .prf-row > small { font-weight: 400; font-size: var(--fs-cap); color: var(--tx-2); }
.prf-stt { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-label); color: #c9cbd4; }
.prf-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.prf-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7a18, #ffa838); }
.f-counted .prf-stt { color: var(--green); }
.f-rejected .prf-stt, .f-expired .prf-stt { color: var(--tx-3); }
.f-review .prf-stt { color: #ffd27a; }
.prf-empty { margin: 0; padding: 14px 16px; border-radius: 12px; color: var(--tx-2);
  background: rgba(14, 13, 18, .6); font-size: var(--fs-label); }
@media (max-width: 640px) {
  .prf-head { flex-wrap: wrap; padding: 16px; gap: 12px 14px; }
  .prf-ic { width: 46px; height: 46px; }
  .prf-tt > b { font-size: 20px; }
  .prf-open { width: 100%; }
  .prf-row { grid-template-columns: 1fr auto; }
  .prf-row > small { grid-column: 2; grid-row: 1; }
  .prf-stt { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- полоса гостя и окно входа */

.ivs-strip { display: none; }
body.guest .ivs-strip:not([hidden]) {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px;
  padding: 12px 14px 12px 18px; border-radius: var(--r-card); border: 1px solid rgba(255, 168, 56, .35);
  background: linear-gradient(90deg, rgba(255, 122, 24, .22), rgba(255, 122, 24, .04) 70%);
}
.ivs-ic { width: 30px; height: 30px; color: #ffa838; flex: none; }
.ivs-ic svg { width: 100%; height: 100%; }
.ivs-tx { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.ivs-tx b { color: #fff; font-size: var(--fs-ui); }
.ivs-tx span { color: #c9cbd4; font-size: var(--fs-label); }
.ivs-in { padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer; color: #1a0d03;
  font-weight: 800; background: linear-gradient(180deg, #ffb04a, #ff7a18); }
.lga-inv { margin: 10px 0 0; text-align: center; font-size: var(--fs-label); color: #ffa838; }

/* ============================================================ ALIVE · ДРУЗЬЯ · АДМИНКА

   Страница оператора «Друзья» (admininvites.js). Таблицы, кнопки и вкладки —
   общие классы панели (.tbl, .btn, .seg, .pa-head); здесь только своё. */

#ivaBody { display: flex; flex-direction: column; gap: 14px; }
.iva-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.iva-head input { min-width: 280px; padding: 9px 12px; border-radius: 9px; color: var(--tx);
  background: var(--panel-2); border: 1px solid var(--line-2); }
.iva-h { margin: 8px 0 0; font-size: var(--fs-ui); color: var(--tx-2); text-transform: uppercase;
  letter-spacing: .06em; }
.iva-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.iva-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); }
.iva-kpi span { font-size: var(--fs-cap); color: var(--tx-2); }
.iva-kpi b { font-size: 20px; color: var(--tx); }
.iva-kpi small { font-size: var(--fs-cap); color: var(--tx-3); }
.iva-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--fs-cap);
  background: rgba(255, 255, 255, .06); color: var(--tx-2); }
.iva-chip.ok { color: var(--green); background: rgba(53, 208, 127, .12); }
.iva-chip.warn { color: #ffd27a; background: rgba(255, 168, 56, .14); }
.iva-chip.bad { color: var(--red); background: rgba(255, 77, 94, .12); }
#ivaBody .bad { color: var(--red); }
.iva-bad td { background: rgba(255, 77, 94, .06); }
.iva-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.iva-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.iva-step { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line-2); }
.iva-step legend { padding: 0 6px; color: var(--or-2); font-weight: 700; }
.iva-f { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-cap); color: var(--tx-2); }
.iva-f input, .iva-f textarea { padding: 8px 10px; border-radius: 8px; color: var(--tx);
  background: var(--panel-2); border: 1px solid var(--line-2); font: inherit; font-size: var(--fs-ui); }
.iva-ask { display: flex; flex-direction: column; gap: 12px; min-width: min(420px, 80vw); }
.iva-ask textarea { padding: 10px; border-radius: 9px; color: var(--tx); background: var(--panel-2);
  border: 1px solid var(--line-2); font: inherit; }
.iva-ask-b { display: flex; gap: 8px; }

/* ---- Падение кейса на подиум (страница кейса) ----
   Владелец, 25.10: «когда заходишь внутрь — анимация падения сундука», как
   на кейс-сайтах. Классы ставит caseDrop в case.js: .drop при входе на
   страницу (1.5 с), .land после результата (0.6 с). Сдвиги — в долях
   самого кейса: падение сверху с поворотом на 30°, удар на 33% хода,
   отскок вверх с наклоном, второй удар на 80% и лёгкое покачивание.
   Свечение подиума (тень) растёт из точки к первому удару. */
.co-case.drop { animation: coDrop 1.5s both; }
.co-case.land { animation: coLand .6s both; }
.co-idle.drop .co-pod { animation: coDropPod 1.5s both; }
.co-idle.land .co-pod { animation: coLandPod .6s both; }
@keyframes coDrop {
  0%, 13.333% { transform: translate(0, -260%) rotate(30deg); opacity: 0; animation-timing-function: linear; }
  14% { opacity: 1; }
  33.333% { transform: translate(1.5%, -6%) rotate(4deg); animation-timing-function: cubic-bezier(.1, -.24, .15, .67); }
  43.333% { transform: translate(-4.6%, -31%) rotate(-8deg); animation-timing-function: cubic-bezier(.72, .69, .53, 1.5); }
  60% { transform: translate(-7.7%, -16%) rotate(-12deg); animation-timing-function: cubic-bezier(.91, .17, 1, 1); }
  80% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.25, 1, .5, 1); }
  86.667% { transform: translate(-.8%, -2.5%) rotate(-2deg); animation-timing-function: ease-out; }
  100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
@keyframes coLand {
  0% { transform: translate(0, -28%) rotate(-4deg); animation-timing-function: cubic-bezier(.91, .17, 1, 1); }
  50% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.25, 1, .5, 1); }
  66.667% { transform: translate(-.8%, -2.5%) rotate(-2deg); animation-timing-function: ease-out; }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes coDropPod {
  0%, 13.333% { opacity: 0; transform: translateX(-50%) scale(.4); }
  33.333% { opacity: .55; transform: translateX(-50%) scale(1); }
  43.333% { opacity: .3; transform: translateX(-50%) scale(.82); }
  80% { opacity: .55; transform: translateX(-50%) scale(1); }
  100% { opacity: .4; transform: translateX(-50%) scale(1); }
}
@keyframes coLandPod {
  0% { opacity: .25; transform: translateX(-50%) scale(.85); }
  50% { opacity: .55; transform: translateX(-50%) scale(1); }
  100% { opacity: .4; transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .co-case.drop, .co-case.land, .co-idle.drop .co-pod, .co-idle.land .co-pod { animation: none; }
}

/* ---- Сундуки на витрине: без подставки, пять в ряд ----
   Владелец, 25.10: сундуки (категории ch_*, backend/cases_chests.py) стоят
   без каменной плиты — сам сундук, крупно, по центру карточки; на полках
   сундуков по пять в ряд, как у образца. Карточка помечена cs-card-chest
   (cases.js), так что и в чужих полках (главная, скидки) плиты под ней нет. */
.cs-card-chest .cs-card-art::after { display: none; }
@media (min-width: 881px) {
  .cs-card-chest .cs-card-art { height: auto; aspect-ratio: 5 / 4; }
  .cs-card-chest .cs-card-art .case-photo { inset: 0; }
  .cs-card-chest .cs-card-art .case-photo img { object-position: 50% 50%;
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .65)); transition: transform .25s ease; }
  .cs-card-chest:hover .cs-card-art .case-photo img { transform: translateY(-4px) scale(1.03); }
  #page-cases .cs-shelf-chest .cs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  /* Пять в ряд — карточка узкая: длинное название («Поверхностная закалка»)
     переносится на вторую строку, а не режется многоточием; место под две
     строки у всех, чтобы цены в ряду стояли на одной линии. */
  .cs-shelf-chest .cs-card-name { white-space: normal; text-wrap: balance; font-size: 15px; line-height: 1.15;
    min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
}

/* ==============================================================
   ПРЕДЛОЖЕНИЯ НОВИЧКУ И КЭШБЭК В ШАПКЕ (offers.js, владелец 25.10)
   Макеты: ftd.jpg (приветственный бонус), 3inarow.jpg (серия пополнений),
   cashback.jpg (окно кэшбэка), значок — cashbackicon.jpg. */

/* ---- шапка: чип предложения и кнопка кэшбэка слева от баланса */
.tb-offer, .tb-cash {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px;
  border-radius: 12px; cursor: pointer; font: inherit; color: var(--tx);
  background: linear-gradient(180deg, rgba(255, 122, 0, .16), rgba(255, 122, 0, .06));
  border: 1px solid rgba(255, 122, 0, .42); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tb-offer:hover, .tb-cash:hover { border-color: var(--or); box-shadow: var(--glow-soft); }
.tb-offer[hidden], .tb-cash[hidden] { display: none; }
.tbo-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #140a02;
  background: linear-gradient(160deg, var(--or-hot), var(--or-3)); box-shadow: 0 0 14px rgba(255, 122, 0, .55); }
.tbo-ic .ofr-gi { width: 16px; height: 16px; }
.tbo-t { font-size: var(--fs-cap); font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.tbo-time { font-size: var(--fs-cap); color: var(--or-hot); font-variant-numeric: tabular-nums; }
.tb-offer.ready { animation: tboPulse 1.6s ease-in-out infinite; }
@keyframes tboPulse { 50% { box-shadow: 0 0 22px rgba(255, 122, 0, .55); } }
/* Кэшбэк — только значок (владелец 25.10); сумма — в окне по клику. */
.tb-cash { background: rgba(14, 14, 18, .8); border-color: rgba(255, 122, 0, .3); width: 40px; padding: 0;
  justify-content: center; position: relative; }
.tb-cash .tbc-tx { display: none; }
.tb-cash.ready::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--or-hot); box-shadow: 0 0 8px var(--or); }
.tb-cash img { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(255, 122, 0, .6)); }
.tbc-tx { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.tbc-tx small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); font-weight: 800; }
.tbc-tx b { font-size: var(--fs-label); color: var(--or-hot); }
.tb-cash.ready { border-color: var(--or); }
@media (max-width: 1200px) { .tbo-t { display: none; } }
@media (max-width: 880px) {
  .tb-offer, .tb-cash { height: 34px; padding: 0 8px; gap: 6px; border-radius: 10px; }
  .tb-cash { width: 34px; padding: 0; }
  .tbc-tx small { display: none; }
  .tbo-time { font-size: 11px; }
}
@media (max-width: 600px) {
  /* Узкая шапка: одно предложение за раз — «3 дня подряд» после первого. */
  #tbOffer:not([hidden]) ~ #tbStreak { display: none; }
  .tbc-tx, .tbo-time { display: none; }
  .tb-offer { padding: 0 5px; }
  .tb-offer .tbo-ic { width: 24px; height: 24px; }
}

/* ---- окна предложений: по макетам ftd.jpg и 3inarow.jpg ----
   Шрифт — Inter (как в макете), заголовок полужирный, без монеты в сумме. */
#modal:has(> .ofr) { max-width: 1180px; padding: 0; background: none; border: 0; overflow: visible; box-shadow: none; }
#modal:has(> .cbk) { padding: 0; background: none; border: 0; overflow: visible; box-shadow: none; }
.ofr {
  --ofr-or: #ff8a1a;
  position: relative; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .92fr); overflow: hidden;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); font-family: var(--f-ui);
  background: radial-gradient(70% 60% at 60% 0%, rgba(255, 110, 20, .1), transparent 70%), #0d0d11;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
.ofr-x { position: absolute; top: 20px; right: 20px; z-index: 3; width: 44px; height: 44px; border-radius: 10px;
  background: rgba(14, 14, 18, .85); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: 18px; }
.ofr-l { padding: 34px 36px 30px 48px; display: flex; flex-direction: column; gap: 0; position: relative; z-index: 2; }
.ofr-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px;
  border-radius: 8px; border: 1px solid rgba(255, 138, 26, .5); background: rgba(255, 138, 26, .07);
  color: var(--ofr-or); font: 500 15px/1 var(--f-ui); letter-spacing: .02em; text-transform: uppercase; }
.ofr-tag .ofr-gi { width: 20px; height: 20px; color: var(--ofr-or); }
.ofr-h { margin: 22px 0 0; font: 700 clamp(30px, 3.3vw, 50px)/1.12 var(--f-ui); color: #fff; letter-spacing: -.015em; }
.ofr-h em { font-style: normal; color: var(--ofr-or); }
.ofr-sub { margin: 18px 0 0; color: #a3a3b0; font: 400 20px/1.45 var(--f-ui); }
.ofr-sub em { font-style: normal; font-weight: 600; color: var(--ofr-or); }
.ofr-gifts { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.ofr-gift { display: flex; align-items: center; gap: 14px; min-height: 146px; padding: 12px 18px 12px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .08); }
.ofr-gift img { width: 132px; height: 112px; object-fit: contain; flex: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.ofr-gift b { display: block; font: 700 54px/1 var(--f-ui); color: var(--ofr-or); letter-spacing: -.02em; }
.ofr-gift small { display: block; margin-top: 8px; font: 500 15px/1.35 var(--f-ui); letter-spacing: .02em;
  text-transform: uppercase; color: #fff; }
.ofr-plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 42px; height: 42px;
  border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ofr-or); color: var(--ofr-or);
  font: 400 26px/1 var(--f-ui); background: #0d0d11; }
.ofr-go { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; height: 82px; margin-top: 24px;
  border-radius: 10px; border: 0; cursor: pointer; font: 600 22px/1 var(--f-ui); color: #141008;
  background: linear-gradient(90deg, #ff9a1c, #ff7e0e 55%, #ff9124); box-shadow: 0 14px 34px rgba(255, 122, 0, .3); }
.ofr-go:hover { filter: brightness(1.05); }
.ofr-go-p { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #120c05; color: #ff9a1c; }
.ofr-go-p svg { width: 18px; height: 18px; }
.ofr-go-g { display: grid; place-items: center; color: #120c05; }
.ofr-go-g .ofr-gi { width: 28px; height: 28px; }
.ofr-arr { position: absolute; right: 28px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); color: #120c05; }
.ofs .ofr-arr { position: static; transform: none; margin-left: 8px; }
.ofr-note { margin: 26px 0 0; display: flex; gap: 12px; color: #8b8b98; font: 400 16px/1.5 var(--f-ui); }
.ofr-i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-grid;
  place-items: center; font: 600 13px/1 var(--f-ui); margin-top: 2px; }
.ofr-r { position: relative; min-height: 100%; }
.ofr-r > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 26%); mask: linear-gradient(90deg, transparent, #000 26%); }

/* серия: кружки на линии, под ними карточки дней */
.ofs-days { position: relative; display: flex; align-items: stretch; gap: 0; margin-top: 38px; }
.ofs-days::before { content: ''; position: absolute; left: 16%; right: 16%; top: 0; height: 2px; background: rgba(255, 255, 255, .14); }
.ofs-days::after { content: ''; position: absolute; left: 16%; top: 0; height: 2px;
  width: calc((68% / 2) * min(var(--done), 2)); background: linear-gradient(90deg, var(--ofr-or), rgba(255, 138, 26, .2));
  box-shadow: 0 0 10px rgba(255, 138, 26, .7); }
.ofs-day { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 50px 8px 20px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.ofs-day b { font: 600 22px/1.1 var(--f-ui); color: #fff; }
.ofs-day small { color: #a3a3b0; font: 400 15px/1.45 var(--f-ui); }
.ofs-n { position: absolute; top: -27px; left: 50%; transform: translateX(-50%); z-index: 1; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; background: #0d0d11; border: 2px solid rgba(255, 255, 255, .22); font: 600 22px/1 var(--f-ui); color: #cfcfd8; }
.ofs-ok { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); display: grid; place-items: center;
  color: var(--ofr-or); margin-top: 8px; }
.ofs-ok svg { width: 22px; height: 22px; }
.ofs-day.done, .ofs-day.cur { border-color: rgba(255, 138, 26, .32);
  background: linear-gradient(180deg, rgba(255, 138, 26, .12), rgba(255, 138, 26, .03)); }
.ofs-day.done .ofs-n, .ofs-day.cur .ofs-n { border-color: var(--ofr-or); color: var(--ofr-or); box-shadow: 0 0 18px rgba(255, 138, 26, .55); }
.ofs-day.done .ofs-ok { border-color: var(--ofr-or); box-shadow: 0 0 12px rgba(255, 138, 26, .45); }
.ofs-arr { align-self: center; flex: none; width: 22px; text-align: center; color: var(--ofr-or); font: 400 24px/1 var(--f-ui); }
.ofs .ofr-go { height: 86px; margin-top: 46px; }
.ofs-plate { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); z-index: 2; text-align: center;
  padding: 22px 34px 18px; border-radius: 10px; background: rgba(10, 9, 8, .86); border: 1px solid rgba(255, 138, 26, .4); white-space: nowrap;
  box-shadow: 0 0 46px rgba(255, 110, 20, .35); min-width: 240px; font-family: var(--f-ui); }
.ofs-plate-g { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ofr-or); color: #140a02; box-shadow: 0 0 18px rgba(255, 138, 26, .8); }
.ofs-plate-g .ofr-gi { width: 20px; height: 20px; color: #140a02; }
.ofs-plate small { display: block; font: 600 20px/1.2 var(--f-ui); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.ofs-plate b { display: block; margin-top: 8px; font: 700 32px/1 var(--f-ui); color: var(--ofr-or); text-transform: uppercase; }
.ofs-how { position: absolute; left: 18px; right: 36px; bottom: 18px; z-index: 2; padding: 18px 22px; border-radius: 12px;
  background: rgba(10, 10, 13, .9); border: 1px solid rgba(255, 255, 255, .1); font: 400 15px/1.4 var(--f-ui); color: #a3a3b0; }
.ofs-how b { display: flex; align-items: center; gap: 12px; color: #fff; font: 600 18px/1 var(--f-ui); margin-bottom: 12px; }
.ofs-how b .ofr-i { color: #a3a3b0; margin: 0; }
.ofs-how ol { margin: 0; padding: 0 0 0 34px; list-style: none; display: grid; gap: 8px; }
.ofs-how li { display: flex; gap: 12px; align-items: flex-start; }
.ofs-how li span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: #fff; font: 600 12px/1 var(--f-ui); }

@media (max-width: 880px) {
  .ofr { grid-template-columns: 1fr; }
  .ofr-r { order: -1; height: 220px; min-height: 0; }
  .ofr-r > picture > img { object-position: 50% 50%; -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent); }
  .ofr-l { padding: 4px 18px 22px; }
  .ofr-h { margin-top: 16px; font-size: 30px; }
  .ofr-h br { display: none; }
  .ofr-sub { font-size: 15px; margin-top: 12px; }
  .ofr-gifts { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .ofr-gift { min-height: 0; padding: 8px 12px; }
  .ofr-gift img { width: 70px; height: 58px; }
  .ofr-gift b { font-size: 34px; }
  .ofr-gift small { font-size: 12px; margin-top: 4px; }
  .ofr-plus { width: 30px; height: 30px; font-size: 20px; }
  .ofr-go { height: 58px; font-size: 17px; margin-top: 18px; }
  .ofr-arr { right: 18px; width: 22px; }
  .ofr-note { font-size: 13px; margin-top: 14px; }
  .ofs .ofr-r { height: 250px; }
  .ofs-how { display: none; }
  .ofs-plate { top: 30%; padding: 14px 18px 10px; min-width: 0; }
  .ofs-plate small { font-size: 14px; }
  .ofs-plate b { font-size: 22px; }
  .ofs-days { margin-top: 30px; }
  .ofs-day { padding: 36px 4px 12px; }
  .ofs-day b { font-size: 16px; }
  .ofs-day small { font-size: 12px; }
  .ofs-n { width: 42px; height: 42px; top: -21px; font-size: 18px; }
  .ofs-arr { width: 12px; font-size: 18px; }
  .ofs .ofr-go { height: 60px; margin-top: 24px; }
}

/* ---- «Поздравляем»: тот же вид, что у предложения, плюс галочка и конфетти */
.ofd .ofr-h em { display: inline; }
.ofd-ok { color: #120c05; background: var(--ofr-or); border-color: var(--ofr-or); box-shadow: 0 0 18px rgba(255, 138, 26, .7); }
.ofd-ok svg { width: 22px; height: 22px; }
.ofd .ofr-gifts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ofd .ofr-gift { min-width: 0; gap: 10px; padding-right: 14px; }
.ofd .ofr-gift img { width: 96px; height: 86px; }
.ofd .ofr-gift > span { min-width: 0; }
.ofd .ofr-gift b { font-size: 40px; white-space: nowrap; }
.ofd .ofr-gift small { font-size: 13px; }
.ofd .ofr-gift { border-color: rgba(255, 138, 26, .32); background: linear-gradient(180deg, rgba(255, 138, 26, .1), rgba(255, 138, 26, .02)); }
.ofd .ofs-plate-g svg { width: 20px; height: 20px; color: #140a02; }
.ofd-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(3px 6px at 12% 18%, #ffb24a 60%, transparent 62%),
    radial-gradient(4px 4px at 28% 8%, #ff7a00 60%, transparent 62%),
    radial-gradient(3px 7px at 46% 22%, #ffd36a 60%, transparent 62%),
    radial-gradient(5px 3px at 64% 10%, #ff9a1c 60%, transparent 62%),
    radial-gradient(3px 6px at 82% 16%, #ffb24a 60%, transparent 62%),
    radial-gradient(4px 4px at 92% 34%, #ff7a00 60%, transparent 62%),
    radial-gradient(3px 6px at 20% 40%, #ffd36a 60%, transparent 62%),
    radial-gradient(5px 3px at 70% 44%, #ffb24a 60%, transparent 62%);
  animation: ofdFall 3.4s linear infinite; opacity: .9; }
@keyframes ofdFall { from { transform: translateY(-30px); opacity: 0; } 15% { opacity: .9; } to { transform: translateY(60px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ofd-confetti { animation: none; } }

/* ---- окно кэшбэка (cashback.jpg, в стиле ENIGGMA) ----
   Сейф выходит над карточкой, под ним оранжевое зарево; сумма крупно с
   монетой; плашка следующей ступени с полосой; кнопка «Забрать». */
#modal:has(> .cbk) { max-width: 430px; margin-top: 70px; }
.cbk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 150px 26px 24px; border-radius: 24px; isolation: isolate;
  border: 1px solid rgba(255, 122, 0, .38);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 122, 0, .28), rgba(255, 122, 0, .06) 45%, transparent 70%),
    linear-gradient(180deg, #17120d 0%, #0d0d11 55%, #0a0a0d 100%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03) inset,
    0 0 60px rgba(255, 122, 0, .12); }
.cbk-line { position: absolute; left: 18%; right: 18%; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--or-hot), transparent); box-shadow: 0 0 16px var(--or); }
.cbk .ofr-x { top: 14px; right: 14px; width: 38px; height: 38px; }
.cbk-art { position: absolute; left: 50%; top: -96px; transform: translateX(-50%); width: 240px; height: 240px; }
.cbk-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .7)); animation: cbkFloat 4s ease-in-out infinite; }
.cbk-glow { position: absolute; inset: 16%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(255, 150, 30, .65), transparent 70%); filter: blur(18px);
  animation: cbkGlow 2.6s ease-in-out infinite; }
@keyframes cbkFloat { 50% { transform: translateY(-7px) rotate(-1deg); } }
@keyframes cbkGlow { 50% { opacity: .5; transform: scale(.88); } }
.cbk-pill { padding: 5px 12px; border-radius: 999px; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--or-2); background: rgba(255, 122, 0, .1); border: 1px solid rgba(255, 122, 0, .35); }
.cbk-h { margin: 2px 0 0; font: 900 30px/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 24px rgba(255, 122, 0, .35); }
.cbk-sum { display: flex; align-items: center; gap: 12px; font: 900 52px/1 var(--f-hd); color: var(--or-2);
  text-shadow: 0 0 30px rgba(255, 122, 0, .45); font-variant-numeric: tabular-nums; }
.cbk-sum .coin { width: 42px; height: 42px; }
.cbk-max { margin-top: -2px; font-size: var(--fs-cap); font-weight: 700; color: var(--tx-3); letter-spacing: .02em; }
.cbk-lvl { align-self: stretch; margin-top: 6px; padding: 16px 18px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .09); }
.cbk-lvl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--fs-label); font-weight: 700; color: #ececf2; }
.cbk-lvl-h b { font: 900 26px/1 var(--f-hd); color: var(--or-hot); text-shadow: 0 0 18px rgba(255, 122, 0, .4); }
.cbk-lvl-s { display: block; margin-top: 4px; font-size: var(--fs-cap); color: var(--tx-3); }
.cbk-bar { position: relative; height: 10px; margin: 14px 0 8px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.cbk-bar i { display: block; height: 100%; border-radius: inherit;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 6px, transparent 6px 12px),
    linear-gradient(90deg, var(--or-3), var(--or-hot));
  box-shadow: 0 0 12px rgba(255, 122, 0, .7); }
.cbk-ends { display: flex; justify-content: space-between; font-size: var(--fs-cap); font-weight: 700; color: var(--tx-3); }
.cbk-go { position: relative; overflow: hidden; align-self: stretch; height: 58px; margin-top: 6px; border-radius: 14px;
  border: 0; cursor: pointer; display: grid; place-items: center; text-decoration: none;
  font: 900 18px/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #160c03;
  background: linear-gradient(180deg, #ffbe5c, #ff8a10 50%, #f26500); box-shadow: 0 12px 30px rgba(255, 122, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .45); }
.cbk-go::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: cbkShine 3.2s ease-in-out infinite; }
@keyframes cbkShine { 60%, 100% { left: 130%; } }
.cbk-go.off { filter: grayscale(.5) brightness(.6); cursor: default; box-shadow: none; }
.cbk-go.off::after { display: none; }
.cbk-go.warn { background: rgba(255, 122, 0, .1); color: var(--or-2); border: 1px solid rgba(255, 122, 0, .4);
  font-size: 14px; letter-spacing: 0; text-transform: none; box-shadow: none; }
.cbk-go.warn::after { display: none; }
.cbk-note { margin: 2px 0 0; text-align: center; color: var(--tx-3); font-size: var(--fs-cap); line-height: 1.45; }
.tb-streak .tbo-ic { background: linear-gradient(160deg, #ffd36a, #ff6a00); }
@media (prefers-reduced-motion: reduce) { .cbk-art img, .cbk-glow, .cbk-go::after { animation: none; } }
/* Телефон: окно кешбэка на весь экран (владелец, 25.10: шторка снизу с
   сейфом, торчащим над ней, выглядела поломанной). Сейф — внутри окна,
   всё по центру, кнопка внизу у большого пальца. */
.cbk-go b { font: inherit; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.cbk-go.off { display: flex; align-items: center; justify-content: center; gap: .45em; white-space: nowrap; }
@media (max-width: 880px) {
  .modal-bg:has(> #modal > .cbk) { padding: 0; place-items: stretch; }
  #modal:has(> .cbk) { max-width: none; width: 100%; height: 100%; max-height: none; margin: 0;
    border-radius: 0; overflow-y: auto; animation: fade .2s ease; }
  #modal:has(> .cbk)::before { display: none; }
  .cbk { min-height: 100%; justify-content: center; gap: 12px; border: 0; border-radius: 0;
    padding: calc(56px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .cbk-line { left: 0; right: 0; }
  .cbk .ofr-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; }
  .cbk-art { position: relative; left: auto; top: auto; transform: none; width: min(64vw, 250px); height: min(64vw, 250px); margin: 0 auto -4px; }
  .cbk-h { font-size: 34px; }
  .cbk-sum { font-size: 56px; }
  .cbk-go { margin-top: auto; height: 60px; font-size: 17px; }
  .cbk-go.off { letter-spacing: .06em; white-space: nowrap; }
  /* Предложения и «Поздравляем» — тоже на весь экран и с прокруткой:
     шторка обрезала кнопку и сноску снизу. */
  .modal-bg:has(> #modal > .ofr) { padding: 0; place-items: stretch; }
  #modal:has(> .ofr) { width: 100%; height: 100%; max-height: none; margin: 0; border-radius: 0;
    overflow-x: hidden; overflow-y: auto; animation: fade .2s ease; }
  #modal:has(> .ofr)::before { display: none; }
  .ofr { min-height: 100%; border: 0; border-radius: 0; align-content: start; }
  .ofr-l { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .ofr-x { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; }
}

/* ============================================================ Подвал · правила на телефоне, 25.10
   Ссылки «Условия / Политики / Ответственная игра» переносились строками с
   палочками-разделителями в начале каждой строки (владелец: «сделай лучше»).
   Теперь — сетка по две плитки, язык и копирайт по центру под ними. */
@media (max-width: 880px) {
  .ftr-bottom { align-items: stretch; gap: 14px; }
  .fb-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; row-gap: 8px; }
  .fb-links a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(255, 255, 255, .035);
    font-size: 13px; line-height: 1.25; text-align: center; white-space: normal; }
  .fb-links a:hover { border-color: rgba(255, 168, 56, .4); }
  .fb-links a::after { inset: 0; }
  .fb-links a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fb-end { order: 2; justify-content: center; }
  .fb-copy { order: 3; text-align: center; font-size: 12px; }
}

/* ============================================================ Мелочи по скринам владельца, 25.10
   · «+» пополнения на телефоне не доходил 5 px до правого края плашки
     баланса — кнопка встаёт вплотную.
   · «Последние большие выигрыши»: картинка скина (.skin-img, своя высота)
     вылезала из окна 34 px и уходила под название — теперь вписана. */
@media (max-width: 880px) {
  .tb-bal:has(> .tb-dep) { padding-right: 0; }
  .tb-bal > .tb-dep { border-radius: 11px; }
  .hm-win { height: 96px; }
  .hm-win-art { height: 40px; }
  .hm-win .hm-win-art > img, .hm-win .hm-win-art .skin-img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
}

/* ================= ALIVE · PLINKO — ТЕЛЕФОН v2 (2026-10-25, plinkomob.png) =================
   Владелец: «во всю ширину игровая зона и внизу простое и понятное меню».
   Сцена — полоса арта от вытяжки до вагонеток во всю ширину экрана (cropY в
   plinko.js), заряд и «?» — на ней. Ниже обычным потоком: «Последние»,
   карточка «Сумма ставки», «Риск» и «Ряды» рядом, большой «Запуск» и
   строка «Поставить скинами». Размеры в px — раскладка одна от 360 до 880. */
#pkRoot.pk.mob { gap: 10px; }
#pkRoot.pk.mob .pk-stage { margin: 0 -12px; container-type: normal; }
#pkRoot.pk.mob .pk-stage::before { display: none; }
#pkRoot.pk.mob .pk-scene { border-radius: 0; }

/* на сцене: заряд слева, «Как играть?» — кружок справа */
#pkRoot.pk.mob .pk-charge { top: 12px; left: 12px; width: 200px; padding: 9px 12px; border-radius: 12px;
  grid-template-columns: minmax(0, 1fr); row-gap: 7px; background: rgba(12, 12, 16, .8); }
#pkRoot.pk.mob .pk-charge-ic { display: none; }
#pkRoot.pk.mob .pk-charge-h { font: 700 12px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .04em; }
#pkRoot.pk.mob .pk-charge-h b { margin-left: 6px; }
#pkRoot.pk.mob .pk-charge-bar { height: 6px; }
#pkRoot.pk.mob .pk-charge-tx { grid-column: 1; font-size: 11px; }
#pkRoot.pk.mob .howto-btn { top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  justify-content: center; }
#pkRoot.pk.mob .howto-btn > span { display: none; }
#pkRoot.pk.mob .howto-btn > svg { width: 20px; height: 20px; }

/* вагонетки — кегль от ширины ящика, без cqw */
#pkRoot.pk.mob .pk-hot-tag { top: -14px; }

/* «Последние» — строка под сценой */
#pkRoot.pk.mob .pk-feed { position: static; display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
  padding: 8px 10px; border-radius: 12px; background: #121318; border: 1px solid rgba(255, 255, 255, .07); box-shadow: none; }
#pkRoot.pk.mob .pk-side-h { display: block; flex: none; font: 700 11px/1 var(--f-ui); letter-spacing: .08em;
  text-transform: uppercase; color: #a2a2b2; }
#pkRoot.pk.mob .pk-feed-list { flex: 1; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#pkRoot.pk.mob .pk-feed-list::-webkit-scrollbar { display: none; }
#pkRoot.pk.mob .pk-pill { flex: none; height: 28px; padding: 0 10px 0 8px; gap: 6px; border-radius: 999px; font-size: 12px; }
#pkRoot.pk.mob .pk-pill:nth-child(n+6) { display: flex; }
#pkRoot.pk.mob .pk-pill::before { width: 9px; height: 9px; }

/* меню: карточки обычным потоком */
#pkRoot.pk.mob .pk-bar { position: static; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "bet bet" "risk rows" "ap ap" "go go" "skins skins";
  background: none; border: 0; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
#pkRoot.pk.mob .pk-bar .pk-card { padding: 10px 12px; gap: 8px; border-radius: 14px; background: #121318;
  border: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; }
#pkRoot.pk.mob .pk-bar .pk-card-h { font: 700 12px/1 var(--f-ui); letter-spacing: .06em; color: #c9cad2; text-transform: uppercase; }
#pkRoot.pk.mob .pk-card-h .hint { display: inline-grid; }   /* grid: place-items центрует «?» в кружке */
#pkRoot.pk.mob .pk-l-full { display: inline; }
#pkRoot.pk.mob .pk-l-mob { display: none; }
#pkRoot.pk.mob .pk-bar .pk-c-bet { grid-area: bet; display: flex; align-items: center; padding: 12px 12px 14px; border: 1px solid rgba(255, 255, 255, .07); }
#pkRoot.pk.mob .pk-bar .pk-c-bet .pk-card-h { align-self: flex-start; }
#pkRoot.pk.mob .pk-bar .pk-amt { width: 100%; max-width: 440px; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 6px; }
#pkRoot.pk.mob .pk-bar .pk-amt-b, #pkRoot.pk.mob .pk-bar .pk-amt-in { height: 40px; border-radius: 9px; }
#pkRoot.pk.mob .pk-bar .pk-amt-b { font-size: 19px; }
#pkRoot.pk.mob .pk-bar .pk-amt-in { gap: 10px; }
#pkRoot.pk.mob .pk-bar .pk-amt-in input { width: 7ch; font-size: 17px; text-align: center; }
#pkRoot.pk.mob .pk-coin { width: 20px; height: 20px; }
#pkRoot.pk.mob .pk-chips { width: 100%; max-width: 440px; gap: 8px; }
#pkRoot.pk.mob .pk-chip { height: 32px; min-height: 32px; border-radius: 8px; font-size: 13px; }
#pkRoot.pk.mob .pk-chip.is-max { color: #ffa838; text-transform: none; font-size: 13px; }
#pkRoot.pk.mob .pk-bar .pk-c-risk { grid-area: risk; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
#pkRoot.pk.mob .pk-bar .pk-c-rows { grid-area: rows; padding: 10px 12px; }
#pkRoot.pk.mob .pk-bar :is(.pk-c-risk, .pk-c-rows) { align-items: stretch; }
#pkRoot.pk.mob .pk-bar :is(.pk-c-risk, .pk-c-rows) .pk-card-h { justify-content: flex-start; }
#pkRoot.pk.mob .pk-bar .pk-segs { display: grid; width: 100%; }
#pkRoot.pk.mob #pkRisk .pk-seg { font-size: 11.5px; padding: 0 2px; }
#pkRoot.pk.mob #pkRisk, #pkRoot.pk.mob #pkRows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#pkRoot.pk.mob .pk-seg { height: 34px; min-height: 34px; border-radius: 8px; font: 600 12.5px/1 var(--f-ui);
  text-transform: none; letter-spacing: 0; padding: 0 4px; }
/* Автоигра на телефоне — строкой: подпись слева, переключатель и число ядер
   справа (26.10: без неё «Запуск» бросал по одному ядру). Область сетки —
   «ap», не «auto»: auto в grid-area — ключевое слово (автоматическое место). */
#pkRoot.pk.mob .pk-bar .pk-c-auto { grid-area: ap; display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 10px; padding: 8px 12px; min-height: 52px; }
#pkRoot.pk.mob .pk-bar .pk-c-auto .pk-auto { display: flex; align-items: center; gap: 10px; }
#pkRoot.pk.mob .pk-bar .pk-c-auto .pk-amt-sm { width: 132px; grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 4px; }
#pkRoot.pk.mob .pk-bar .pk-c-auto .pk-amt-b, #pkRoot.pk.mob .pk-bar .pk-c-auto .pk-amt-in { height: 34px; }
#pkRoot.pk.mob .pk-bar .pk-c-auto .pk-amt-in input { width: 4ch; font-size: 15px; }

/* «Запуск»: значок слева, «ЗАПУСК» и «Ставка …» столбиком по центру */
#pkRoot.pk.mob .pk-go { grid-area: go; position: relative; min-height: 56px; margin: 0; border-radius: 13px;
  justify-content: center; gap: 0; }
#pkRoot.pk.mob .pk-go-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: rgba(120, 40, 0, .28); }
#pkRoot.pk.mob .pk-go-ic svg { width: 22px; height: 22px; transform: none; }
#pkRoot.pk.mob .pk-go-tx { flex-direction: column; align-items: center; gap: 5px; }
#pkRoot.pk.mob .pk-go-tx b { font: 900 18px/1 var(--f-hd); letter-spacing: .08em; }
#pkRoot.pk.mob .pk-go-tx small { font: 600 12px/1 var(--f-ui); text-transform: none; letter-spacing: 0; }
#pkRoot.pk.mob .pk-go-tx small::before { content: 'Ставка '; margin: 0; font-weight: 600; }

/* «Поставить скинами» — строкой под «Запуском» */
#pkRoot.pk.mob .pk-bar .pk-c-skins { grid-area: skins; padding: 0; background: none; border: 0; align-items: center; }

/* ============================================================ Лидеры · телефон, 25.10
   1 в 1 с «leaderboard mob.png»: баннер с кубком (assets/lb/hero-m.webp),
   таймер с «?», две плашки с иконками, строки первой десятки — у 1–3
   корона с номером и подсветка цветом места. */
@media (max-width: 880px) {
  #page-top .lba-mob { gap: 12px; }
  #page-top .lba-mhero { position: relative; overflow: hidden; margin: 0 -12px -6px; height: 330px; }
  #page-top .lba-mhero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 92% 38%; }
  #page-top .lba-mhero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 8, 12, .92) 0%, rgba(8, 8, 12, .6) 38%, rgba(8, 8, 12, 0) 62%),
      linear-gradient(180deg, rgba(8, 8, 12, 0) 75%, var(--bg, #0b0b0f) 100%); }
  #page-top .lba-mhero-tx { position: absolute; z-index: 1; left: 20px; top: 34px; display: flex; flex-direction: column; gap: 10px;
    max-width: 62%; transform: none; }
  #page-top .lba-mhero-tx h2 { margin: 0; font: italic 900 46px/.95 var(--f-exo, var(--f-hd)); text-transform: uppercase; color: #fff;
    letter-spacing: -.01em; text-shadow: 0 3px 14px rgba(0, 0, 0, .6); }
  #page-top .lba-mhero-tx h2 em { font-style: inherit; background: linear-gradient(180deg, #ffd27a, #ff7a18 70%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  #page-top .lba-mhero-tx p { margin: 0; font: 400 14px/1.35 var(--f-ui); color: #d8d8e0; max-width: 215px; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
  #page-top .lba-mtimer { align-self: flex-start; display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 12px 14px 12px 16px;
    border-radius: 14px; background: rgba(14, 14, 18, .82); border: 1px solid rgba(255, 255, 255, .12); }
  #page-top .lba-mtimer > span { display: flex; flex-direction: column; gap: 7px; padding-right: 14px;
    border-right: 1px solid rgba(255, 255, 255, .12); }
  #page-top .lba-mtimer small { font: 600 12px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: #c9cad2; }
  #page-top .lba-mtimer b { font: 800 22px/1 var(--f-hd); color: #ffa838; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
  #page-top .lba-mtimer-q { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .7); background: none; color: #fff; font: 700 14px/1 var(--f-ui); cursor: pointer; }

  #page-top .lba-mchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #page-top .lba-mchips:empty { display: none; }
  #page-top .lba-mchip { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; min-width: 0;
    background: #121318; border: 1px solid rgba(255, 255, 255, .08); }
  #page-top .lba-mchip-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
    background: rgba(255, 138, 26, .1); border: 1px solid rgba(255, 138, 26, .28); }
  #page-top .lba-mchip-ic svg { width: 22px; height: 22px; fill: none; stroke: #ffa838; stroke-width: 1.8; stroke-linejoin: round; }
  #page-top .lba-mchip-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  #page-top .lba-mchip small { font: 700 11px/1.15 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; color: #a2a2b2; }
  #page-top .lba-mchip b { display: flex; align-items: center; gap: 5px; font: 800 17px/1 var(--f-hd); color: #fff; white-space: nowrap; }
  #page-top .lba-mchip .lba-coin { width: 15px; height: 15px; }

  /* строки */
  #page-top .lba-mlist { gap: 8px; }
  #page-top .lba-mr { --ac: transparent; --ring: #ff8a1a; --pz: #ffa838; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 12px;
    background: #121318; border: 1px solid rgba(255, 255, 255, .07); box-shadow: none; }
  #page-top .lba-mr::before { display: none; }
  #page-top .lba-mr-rank { width: 44px; font: 700 20px/1 var(--f-hd); color: #8a8b96; }
  #page-top .lba-mr-ava { width: 52px; height: 52px; border: 2px solid var(--ring); box-shadow: 0 0 10px -3px var(--ring); }
  #page-top .lba-mr-name { font: 700 16px/1.1 var(--f-ui); }
  #page-top .lba-mr-pts { font: 400 13px/1 var(--f-ui); color: #8f8f9e; }
  #page-top .lba-mr-tx { gap: 6px; }
  #page-top .lba-mr-pz { gap: 6px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .1); align-items: center; min-width: 76px; }
  #page-top .lba-mr-pz span { font: 700 12px/1 var(--f-ui); letter-spacing: .06em; color: #a2a2b2; text-transform: uppercase; }
  #page-top .lba-mr-pz b { display: flex; align-items: center; gap: 5px; font: 800 18px/1 var(--f-hd); color: var(--pz); }
  #page-top .lba-mr-pz .lba-coin { width: 16px; height: 16px; }

  /* 1–3: корона, крупнее, подсветка цветом места */
  #page-top .lba-mr:is(.m1, .m2, .m3) { padding: 14px 16px 14px 12px; border-radius: 14px; }
  #page-top .lba-mr.m1 { --c: #ffc93b; --ring: #ffc93b; --pz: #ffb347; border-color: rgba(255, 190, 60, .75);
    background: linear-gradient(100deg, rgba(255, 170, 40, .26), rgba(60, 36, 8, .55) 55%, rgba(18, 18, 22, .9));
    box-shadow: 0 0 24px -8px rgba(255, 170, 40, .7), inset 0 0 0 1px rgba(255, 210, 120, .08); }
  #page-top .lba-mr.m2 { --c: #dfe3ee; --ring: #ff8a1a; --pz: #ffb347; border-color: rgba(220, 224, 236, .6);
    background: linear-gradient(100deg, rgba(220, 224, 236, .14), rgba(30, 30, 36, .7) 55%, rgba(18, 18, 22, .9));
    box-shadow: 0 0 20px -10px rgba(220, 224, 236, .6); }
  #page-top .lba-mr.m3 { --c: #ff8a3c; --ring: #ff8a1a; --pz: #ffb347; border-color: rgba(255, 122, 42, .6);
    background: linear-gradient(100deg, rgba(255, 110, 30, .2), rgba(50, 22, 8, .55) 55%, rgba(18, 18, 22, .9));
    box-shadow: 0 0 20px -10px rgba(255, 110, 30, .7); }
  #page-top .lba-mr:is(.m1, .m2, .m3) .lba-mr-ava { width: 62px; height: 62px; }
  #page-top .lba-mr:is(.m1, .m2, .m3) .lba-mr-name { font-size: 19px; }
  #page-top .lba-mr:is(.m1, .m2, .m3) .lba-mr-pts { font-size: 14px; }
  #page-top .lba-mr:is(.m1, .m2, .m3) .lba-mr-pz b { font-size: 22px; }
  #page-top .lba-mr-crown { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 38px; }
  #page-top .lba-mr-crown svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--c);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); }
  #page-top .lba-mr-crown b { position: relative; margin-top: 10px; font: 800 15px/1 var(--f-hd); color: #1a1206; }
}

/* ============================================================ ALIVE · Фиксы 25.10 · Награды
   «Ответственная игра»: строка текущего лимита депозита под чипами — лимит
   мог быть поставлен суммой, которой среди чипов нет. */
.sta-card > .sta-now { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: #a2a2b2; }
.sta-card > .sta-now > b { color: #ececf2; }

/* ---------------------------------------------------------- ALIVE · Фиксы 25.10 · Навигация

   Условия использования внутри окна 18+ (guest.js, paintAgeTerms): текст
   читается здесь же, поверх затемнения, а кнопка «Вернуться» остаётся на
   виду — прокручивается только сам документ. */
#modal:has(> .age-terms) { max-width: 680px; }
.age-terms .age-doc {
  max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--r);
}
.age-terms .dc-body { padding: 18px; }

/* ============================================================ ALIVE · Фиксы 25.10 · Игры

   Звук в Milky Way и Space Ball — общий регулятор игр (soundctl.js), как в
   «Ракете», «Минном поле» и апгрейде. У Space Ball он встал на место
   прежней кнопки ♪ (она меняла только подпись), у Milky Way регулятора не
   было вовсе — он в правом верхнем углу сцены, под «онлайн». */
.sb-tools .sndc { height: 42px; border-radius: 10px; padding: 0 12px 0 7px; }
@media (max-width: 880px) {
  .sb-tools .sndc { height: 46px; padding: 0 10px 0 6px; }
  /* Телефон: угол внизу сцены накрывала нижняя панель ставки, и регулятор
     (он шире прежней кнопки ♪) уходил под неё. Под строку лесенки. */
  .sb-tools { top: 62px; bottom: auto; }
}
/* Под «Как играть?»; на широкой сцене там же «онлайн» — регулятор ниже него.
   На телефоне «Как играть?» и «онлайн» скрыты — регулятор в самом углу. */
.mw-snd { position: absolute; right: 16px; top: 64px; z-index: 8; }
.mw-snd.sndc { height: 32px; border-radius: 10px; }
@container mw (min-width: 1000px) {
  .mw:not(.mob) .mw-snd { top: 108px; }
}
.mw.mob .mw-snd { top: 10px; right: 10px; }

/* Шапка телефона: с чипами предложений и кешбэком названию раздела
   оставалось 49 px на 390 и 19 px на 360 («НАГ…», «ЛИ…»). Ужимаем отступы,
   плашку баланса и значки, кегль названия — на пару пунктов (25.10). */
@media (max-width: 430px) {
  .topbar { gap: 4px; }
  .tb-mid .page-title { font-size: 13px; letter-spacing: .02em; }
  .tb-bal { gap: 5px; padding-left: 9px; }
  .tb-bal .v .coin { width: 15px; height: 15px; margin-right: 3px; }
  #tbStreak, #tbCash, #tbOffer { width: 32px; min-width: 32px; height: 32px; }
}

/* ============================================================ ALIVE · Фиксы 25.10 · Узкие телефоны

   Обход 320–430 px, альбомной и iPad (25.10). Горизонтальной прокрутки нет
   нигде; ломалось то, что режется внутри своих блоков. */

@media (max-width: 880px) {
  /* /fair: «строки не ниже 36 px» для десктопной таблицы на телефоне
     прижимали карточку игры к 36 px, и пояснения наезжали на соседние
     игры. Число справа не шире 45%, иначе название сжималось до 100 px. */
  #page-fair table.frtp-tbl tr { height: auto; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; }
  /* Число справа от длинного пояснения сжимало его до слова в строке:
     название с пояснением — на всю ширину, под ними отдача и диапазон. */
  #page-fair .frtp-tbl td:first-child { grid-column: 1 / -1; grid-row: 1; }
  #page-fair .frtp-tbl td:nth-child(2) { grid-column: 1; grid-row: 2; text-align: left; }
  #page-fair .frtp-tbl td:nth-child(3) { grid-column: 2; grid-row: 2; align-self: center; }
  #page-fair .frtp-tbl td.num { border: 0; }

  /* Milky Way: три плитки сложности в строку — кегль 2.15vw, 7–8 px на
     телефоне. Под ними в карточке пусто: ставим столбиком, кегль читаемый. */
  .mw.mob .mw-diff .mw-segs { display: grid; grid-template-columns: 1fr; }
  .mw.mob .mw-diff .mw-segs button { height: 7.4vw; min-height: 26px; font-size: clamp(11px, 3vw, 13px); }
  .mw.mob .mw-diff .mw-segs button + button { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .07); }

  /* Battle Pass: «Значок «Розжиг»» резался до «Значок «Ро…»» на любой
     ширине — подпись в две строки. */
  .bpp-lv-t { white-space: normal; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* Витрина: «Помогите на ск…» — название кейса в две строки. */
  #page-cases .cs-card-name { white-space: normal; text-wrap: balance; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }

  /* Акции: подпись «промокод с колеса, пасса или код акции» — переносом. */
  .promo-code-card .mt-h small { white-space: normal; }
}

@media (max-width: 374px) {
  /* Шапка на 320–374 px: названию раздела оставалось 42 px («КЕЙ…»). */
  .topbar { padding: 0 6px; gap: 3px; }
  .topbar .tb-back, #tbBurger { width: 32px; min-width: 32px; }
  .tb-right { gap: 4px; }
  #tbStreak, #tbCash, #tbOffer { width: 28px; min-width: 28px; height: 28px; }
  .tb-mid .page-title { font-size: 12px; letter-spacing: 0; }

  /* Plinko: «Низкий / Средний / Высокий» в половине ширины слипались —
     риск и ряды друг под другом. Строка "ap ap" (автоигра) обязательна:
     без неё .pk-c-auto с grid-area: ap получала неявные колонки, сетка
     становилась 4-колоночной, и все карточки ужимались в ~120 px слева
     с пустой полосой справа (телефон с крупным масштабом, ~320 px). */
  #pkRoot.pk.mob .pk-bar { grid-template-areas: "bet bet" "risk risk" "rows rows" "ap ap" "go go" "skins skins"; }

  /* Кабинет: «ПОПОЛНИТЬ» не влезал в половину строки. */
  .pra-dep, .pra-wd { padding: 0 8px; letter-spacing: 0; font-size: 13px; }
}

/* ===== ALIVE · Аудит 25.10 · Касса */

/* Окно вывода: сколько осталось отыграть — до нажатия, а не отказом после
   (cashout.js, paintLock). Текст и суммы — с сервера (/api/cashout). */
.pwd-lock {
  margin: 0; padding: 10px 12px; border-radius: 10px; font-size: var(--fs-cap); line-height: 1.45;
  color: #ffcf6e; background: rgba(255, 207, 110, .08); border: 1px solid rgba(255, 207, 110, .32);
}
.pwd-lock[hidden] { display: none; }
#modal .pwd-lock { margin: 0 0 10px; }
#modal .pwd .pwd-lock { margin: 0; }

/* Отмена своей заявки на проверке: второе нажатие подтверждает. */
.pwd-cancel, .ops-cancel {
  flex: none; padding: 3px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #a2a2b2;
  font: 700 var(--fs-cap)/1.5 var(--f-hd);
}
.pwd-cancel:hover, .ops-cancel:hover { color: #ececf2; border-color: rgba(255, 122, 24, .5); }
.pwd-cancel.sure, .ops-cancel.sure { color: #eb4b4b; border-color: rgba(235, 75, 75, .55); background: rgba(235, 75, 75, .1); }
.pwd-cancel:disabled, .ops-cancel:disabled { opacity: .6; cursor: default; }
.ops-cancel { margin-top: 10px; }
@media (max-width: 560px) {
  .pwd-r { flex-wrap: wrap; row-gap: 4px; }
  .pwd-r > .pwd-cancel { margin-left: auto; }
}

/* Шапка телефона: у гостя была только эмблема, подарок и бургер — войти
   было неоткуда, кроме шторки. Кнопка кабинета гостю — компактное «Войти»
   (подпись ставит app.js, класс guest — там же); у вошедшего её место
   по-прежнему занимает баланс. */
@media (max-width: 880px) {
  .topbar .account.guest {
    display: flex !important; flex: none; align-items: center; gap: 0;
    height: 34px; padding: 0 12px; border-radius: 10px;
  }
  .topbar .account.guest .account-ava,
  .topbar .account.guest .account-txt small { display: none; }
  .topbar .account.guest .account-txt { display: flex; }
  .topbar .account.guest .account-txt b { font: 700 13px/1 var(--f-hd); white-space: nowrap; }
}
@media (max-width: 374px) {
  .topbar .account.guest { height: 30px; padding: 0 8px; }
  .topbar .account.guest .account-txt b { font-size: 12px; }
}

/* ============================================================ админка SPA · аудит 25.10 */

/* Карточка игрока: вкладки «Сводка / Баланс / Игры / История игр». */
.pl-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 4px;
  border-bottom: 1px solid var(--line); }
.pl-tabs button {
  padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--tx-2); font: 600 var(--fs-ui) var(--f-hd, inherit); cursor: pointer; margin-bottom: -1px;
}
.pl-tabs button:hover { color: var(--tx); }
.pl-tabs button.on { color: var(--tx); border-bottom-color: var(--or); }
.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 8px; }
.pl-bar label { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-2);
  font-size: var(--fs-cap); }
.pl-bar input, .pl-bar select { max-width: 100%; }
.pl-card tr.plr { cursor: pointer; }
.pl-card tr.plr:hover td { background: rgba(255, 255, 255, .03); }
.pl-card tr.pl-gap td { background: rgba(255, 77, 94, .07); }
.pl-card td.red { color: var(--red); }
.pl-more { margin-top: 10px; }
.pl-empty { margin: 16px 0; }

/* Настройки оператора: черновик неприменённых правок. */
.set-draft {
  position: sticky; top: 8px; z-index: 5; margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid rgba(255, 122, 0, .45); border-radius: 10px; background: var(--panel-2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.set-draft[hidden] { display: none; }
.set-draft-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.set-draft-h .grow { flex: 1; }
.set-draft-l { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 4px 18px; font-size: var(--fs-cap); font-variant-numeric: tabular-nums; }
.set-draft-l li span { color: var(--tx-2); margin-right: 6px; }
.set-draft-l s { color: var(--tx-3); }

/* Меню: ссылка на кабинет оператора с графиками — отдельная страница. */
.nav-btn.nav-ext { text-decoration: none; }
.nav-ext-i { margin-left: auto; color: var(--tx-3); font-size: var(--fs-micro); }

/* ===== ALIVE · Аудит 25.10 · Партнёр

   Кабинет партнёра: вкладки «Статистика» (воронка, ступень, график по
   дням, разбивка по кодам и меткам sub), «Игроки» за период с разбивкой
   по играм и «Выплаты» с причинами задержки. Префикс pcb- — кабинет
   (partnercab.js); полосы периода и таблицы — на тех же токенах, что
   «Видео» и прежние «Игроки». На телефоне строки таблиц — карточки по две
   колонки с подписью из data-k. */

.pcb-per { row-gap: 10px; }
.pcb-per .pcb-pill { height: 44px; padding: 0 16px; }
.pcb-dates { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcb-dash { color: #8a8a9a; }
.pcb-date > input[type="date"] {
  width: auto; height: auto; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none;
  color: #ececf2; font: 600 var(--fs-ui)/1 var(--f-ui); color-scheme: dark;
}
.pcb-date:focus-within { border-color: rgba(255, 122, 24, .6); }
.pcb-lead-note { margin: -6px 0 -8px; line-height: 1.5; }
.pcb-mono { font-family: var(--f-ui); color: #ececf2; word-break: break-all; }

/* ---------------------------------------------------------- воронка и цифры */

.pcb-funnel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.pcb-step, .pcb-kpi {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
}
.pcb-step > small, .pcb-kpi > small { font: 600 var(--fs-cap)/1.2 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #8a8a9a; }
.pcb-step > b { font-size: 28px; line-height: 1; color: #ececf2; }
.pcb-kpi > b { font-size: 20px; line-height: 1.1; color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcb-step > em, .pcb-kpi > em { font-style: normal; font-size: var(--fs-label); color: #8a8a9a; }
.pcb-arrow { align-self: center; color: #ffa838; font-size: 22px; }
.pcb-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pcb-kpi > b.neg, .pcb-prow .neg, .pcb-g .neg { color: #eb4b4b; }

.pcb-progress { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pcb-progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb23d, #ff7a18); box-shadow: 0 0 12px rgba(255, 122, 24, .5); }

/* ---------------------------------------------------------- график по дням */

.pcb-chart-sum { margin-left: auto; font-size: var(--fs-label); color: #8a8a9a; white-space: nowrap; }
.pcb-chart-sum .coin, .pcb-chart-sum svg { vertical-align: -2px; }
.pcb-mts { display: flex; gap: 8px; flex-wrap: wrap; }
.pcb-mt { height: 36px; padding: 0 14px; font-size: var(--fs-label); }
.pcb-chart { position: relative; padding: 22px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pcb-chart > svg { display: block; width: 100%; height: 200px; overflow: visible; }
.pcb-chart-max, .pcb-chart-min { position: absolute; left: 0; font-size: var(--fs-cap); color: #8a8a9a; }
.pcb-chart-max { top: 0; }
.pcb-chart-min { bottom: 0; }
.pcb-dbar { fill: #ff7a18; transition: fill .12s; }
.pcb-dbar.neg { fill: #eb4b4b; }
.pcb-hit { fill: transparent; }
.pcb-chart g:hover .pcb-dbar { fill: #ffb23d; }
.pcb-chart g:hover .pcb-dbar.neg { fill: #ff7d7d; }
.pcb-chart g:hover .pcb-hit { fill: rgba(255, 255, 255, .04); }
.pcb-zero { stroke: rgba(255, 255, 255, .18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pcb-chart-x { display: flex; justify-content: space-between; font-size: var(--fs-cap); color: #8a8a9a; }
.pcb-chart-tip { margin: 0; min-height: 1.4em; font-size: var(--fs-ui); color: #ececf2; }

/* ---------------------------------------------------------- коды и метки */

.pcb-ctable { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pcb-cr {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, .8fr)) repeat(3, minmax(0, 1fr));
  align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); font-size: var(--fs-label); color: #b8b8c6;
}
.pcb-subs .pcb-cr { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .8fr)) repeat(3, minmax(0, 1fr)); }
.pcb-cr > .pcb-code { font-size: var(--fs-ui); }
.pcb-cr > .pcb-ngr { font-size: var(--fs-ui); }
.pcb-cr-h { border: 0; background: transparent; padding-top: 0; padding-bottom: 0; font: 600 var(--fs-cap)/1.3 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.pcb-cr-h > span:last-child { text-align: right; }

/* ---------------------------------------------------------- игроки */

.pcb-pcols, .pcb-prow { grid-template-columns: minmax(0, 1.8fr) .85fr 1.1fr 1fr .65fr 1fr .8fr 1fr 1fr; }
.pcb-prow { cursor: pointer; }
.pcb-prow:focus-visible { outline: 2px solid #ffa838; outline-offset: 2px; }
.pcb-prow.on { border-color: rgba(255, 122, 24, .6); background: rgba(255, 122, 24, .06); }
.pcb-prow.pcb-total { cursor: default; }
.pcb-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pcb-who > small { display: flex; gap: 4px; min-width: 0; font-size: var(--fs-cap); color: #8a8a9a; white-space: nowrap; }
.pcb-who > small > .pcb-mail { color: #8a8a9a; letter-spacing: .02em; }
.pcb-who > .pcb-sub { color: #ffa838; }
.pcb-prow > b:first-child, .pcb-who > b { font-size: var(--fs-ui); letter-spacing: 0; }
.pcb-total .pcb-who > b { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: #8a8a9a; }
.pcb-games {
  display: flex; flex-direction: column; gap: 4px; margin: -4px 0 4px 18px; padding: 10px 12px; border-radius: 12px;
  border-left: 2px solid rgba(255, 122, 24, .55); background: rgba(255, 255, 255, .025); animation: pcbRow .25s ease both;
}
.pcb-games > p { margin: 0; font-size: var(--fs-label); color: #8a8a9a; }
.pcb-g { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 6px 4px; font-size: var(--fs-label); color: #b8b8c6; }
.pcb-g > b { color: #ececf2; }
.pcb-g-h { font: 600 var(--fs-cap)/1.3 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }

/* ---------------------------------------------------------- выплаты */

.pcb-holds { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 168, 56, .45); background: rgba(255, 122, 24, .08); }
.pcb-holds.ok { border-color: rgba(53, 208, 127, .4); background: rgba(53, 208, 127, .07); }
.pcb-holds > b { font-size: var(--fs-ui); color: #ececf2; }
.pcb-holds > ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-ui); line-height: 1.5; color: #b8b8c6; }
.pcb-ycols, .pcb-yrow { grid-template-columns: .8fr .8fr 1fr .9fr 2.4fr; }
.pcb-ycols > span:last-child, .pcb-pcols > span:last-child { text-align: left; }
/* Шапка таблицы — по тем же отступам, что строки внутри карточки (14 + 10 +
   рамка), иначе доли колонок считаются от разной ширины и плывут. NGR в
   строке игрока — по левому краю, как и его заголовок. */
.pcb-thead.pcb-pcols, .pcb-thead.pcb-ycols { padding: 6px 25px 0; }
.pcb-prow > .pcb-ngr { text-align: left; }
.pcb-yrow {
  display: grid; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  animation: pcbRow .35s ease both; font-size: var(--fs-label); color: #b8b8c6;
}
.pcb-yrow > b { font-size: var(--fs-body); color: #ffa838; }
.pcb-why { line-height: 1.45; text-wrap: pretty; min-width: 0; }

/* ---------------------------------------------------------- телефон */

@media (max-width: 1180px) and (min-width: 881px) {
  .pcb-funnel { grid-template-columns: minmax(0, 1fr); }
  .pcb-arrow { display: none; }
}
@media (max-width: 880px) {
  .pcb-per .pcb-pill { flex: 1 1 auto; padding: 0 12px; }
  .pcb-dates { flex-basis: 100%; }
  .pcb-dates > .pcb-date { flex: 1; }
  .pcb-date > input[type="date"] { width: 100%; min-width: 0; }
  .pcb-funnel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pcb-arrow { justify-self: center; transform: rotate(90deg); font-size: 18px; line-height: 1; }
  .pcb-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pcb-kpi { padding: 12px; }
  .pcb-kpi > b { font-size: 17px; }
  .pcb-chart > svg { height: 160px; }
  .pcb-chart-sum { margin-left: 0; flex-basis: 100%; }
  .pcb-h { flex-wrap: wrap; }
  .pcb-mts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pcb-mt { flex: none; }
  .pcb-cr, .pcb-subs .pcb-cr, .pcb-g, .pcb-pcols, .pcb-prow, .pcb-ycols, .pcb-yrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pcb-cr-h, .pcb-g-h { display: none; }
  .pcb-cr > .pcb-code, .pcb-g > b, .pcb-who { grid-column: 1 / -1; }
  .pcb-cr > [data-k]::before, .pcb-g > [data-k]::before, .pcb-prow > [data-k]::before, .pcb-yrow > [data-k]::before {
    content: attr(data-k); display: block; margin-bottom: 3px;
    font: 600 var(--fs-micro)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3);
  }
  .pcb-prow > [data-k]:empty::before { content: none; }
  .pcb-cr > .pcb-ngr, .pcb-prow > .pcb-ngr { text-align: left; }
  .pcb-games { margin-left: 8px; }
  .pcb-yrow > .pcb-why { grid-column: 1 / -1; }
  .pcb-yrow > .pcb-st { justify-self: start; align-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .pcb-games, .pcb-yrow { animation: none; }
  .pcb-dbar { transition: none; }
}

/* Карточка партнёра в админке: столбики оборота за 30 дней (adminpartners.js). */
.ap-spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ap-spark > i { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: #ff7a18; }
.ap-spark > i:hover { background: #ffb23d; }
.ap-spark-x { display: flex; justify-content: space-between; margin: 4px 0 8px; font-size: 12px; }

/* ===== ALIVE · Аудит 25.10 · Награды */
/* Причина, по которой награда дня ждёт (ставки за сутки, бюджет дня), —
   фразой на кнопке: обычным регистром и в несколько строк, а не капсом
   в одну, иначе на телефоне она вылезала за кнопку. */
.plv-cta.off.why, .wdr-btn.off.why {
  text-transform: none; letter-spacing: 0; line-height: 1.3; white-space: normal;
}
.plv-cta.off.why { color: #ffd27a; border-color: rgba(255, 196, 60, .4); max-width: 100%; }

/* ===== ALIVE · Аудит 25.10 · Интерфейс

   Правки по аудиту интерфейса 25.10: окна с деньгами на телефоне, серия
   пополнений, строки наград в «Моих промокодах», цели нажатия,
   закреплённая строка игрока в лидерах. Тексты не меняются —
   только вёрстка. */

/* Серия пополнений · «Как это работает?»: правило `.ofs-how li span` красило
   ВСЕ span строки в серые кружки-номера — монета суммы становилась серым
   кругом, а текст с суммой разваливался на колонки флекса. Текст пункта
   теперь один абзац (.ofs-how-t), монета в нём — обычная. */
.ofs-how-t { margin: 0; min-width: 0; }
.ofs-how li .ofs-how-t span { all: revert; }
.ofs-how li .ofs-how-t .coin {
  display: inline-block; width: 1em; height: 1em; margin-right: .26em; vertical-align: -.15em;
  background: no-repeat center / contain url("/assets/ui/coin.png");
  background-image: image-set(url("/assets/ui/coin.png") 1x, url("/assets/ui/coin@2x.png") 2x);
}
.ofs-how li .ofs-how-t .vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}
.ofs-day small { white-space: normal; }
.ofs-day small .coin { margin-right: .2em; }

@media (max-width: 880px) {
  /* Окно на весь экран — сетка-подложка с колонкой auto растягивала его до
     min-content содержимого (347 px на 320): правый край с ✕, суммой и
     сноской уезжал за экран. Колонка — не шире экрана. */
  .modal-bg:has(> #modal > .ofr) { grid-template-columns: minmax(0, 1fr); }
  #modal:has(> .ofr) { min-width: 0; }

  /* Подарки столбиком: «+» / галочка — между карточками, а не поверх
     подписи «кейсов». */
  .ofr-gifts, .ofd .ofr-gifts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ofr-plus { position: relative; left: auto; top: auto; transform: none; justify-self: center; margin: -6px 0; }
  .ofd .ofr-gift { gap: 14px; padding: 8px 12px; }
  .ofd .ofr-gift img { width: 70px; height: 58px; }
  .ofd .ofr-gift b { font-size: 34px; }
  .ofd .ofr-gift small { font-size: 12px; }
  .ofd .ofr-gift b .coin { width: .8em; height: .8em; }

  /* Кнопка «Пополнить на …»: стрелка в потоке, а не поверх суммы. */
  .ofr-go { gap: 10px; padding: 0 14px; }
  .ofr-go > span:not([class]) { min-width: 0; text-align: center; }
  .ofr-go .ofr-arr { position: static; transform: none; flex: none; margin-left: 2px; }

  /* Серия: три карточки дней всегда в ширину экрана. */
  .ofs-day { min-width: 0; }
  .ofs-day b { white-space: nowrap; }
}
@media (max-width: 380px) {
  .ofr-l { padding-left: 14px; padding-right: 14px; }
  .ofr-h { font-size: 26px; }
  .ofr-go { font-size: 15px; }
  .ofr-go-p { width: 26px; height: 26px; }
  .ofs-day { padding: 32px 2px 10px; }
  .ofs-day b { font-size: 14px; }
  .ofs-day small { font-size: 11px; }
  .ofs-arr { width: 8px; }
}

/* Шапка 320–374 с чипом предложения или серии: логотип, чип, сейф,
   баланс и бургер не влезали на 27 px — страница становилась шире экрана,
   и окно предложения, открытое из этого чипа, уезжало вправо (✕, сумма и
   сноска за краем). Логотип и «+» пополнения — чуть меньше. */
@media (max-width: 374px) {
  .topbar:has(#tbOffer:not([hidden]), #tbStreak:not([hidden])) .tw-name,
  .topbar:has(#tbOffer:not([hidden]), #tbStreak:not([hidden])) .tw-dot { font-size: 14px; }
  .topbar:has(#tbOffer:not([hidden]), #tbStreak:not([hidden])) .tw-gg { font-size: 15px; }
  .topbar:has(#tbOffer:not([hidden]), #tbStreak:not([hidden])) .tb-bal > .tb-dep { width: 32px; min-width: 32px; }
  .topbar:has(#tbOffer:not([hidden]), #tbStreak:not([hidden])) .tb-right { gap: 3px; }
}

/* Окно пополнения на телефоне. Липкая «Оплатить» (№126) ложилась поверх
   сводки «К оплате»: бонус и комиссию не было видно, пока не докрутишь.
   Правило «не липнет» (касса, 25.10) уже было, но проигрывало по весу
   `.dpa .dpa-cta`. Кнопка — в потоке, сразу под сводкой. */
@media (max-width: 880px) {
  .dpa .dpa-cta { position: static; margin: 10px 0 0; padding: 0; background: none; }
}
/* 320–400: шапка окна (вкладки, баланс, ✕) и способы оплаты шире окна —
   ✕ и «Скины» уезжали за край (на 390 ✕ срезала рамка). Баланс — второй
   строкой, способы — в три равные колонки с переносом подписи. */
@media (max-width: 400px) {
  .modal-bg:has(.pwd) { padding: 12px; }
  .modal:has(.pwd) { max-width: calc(100vw - 24px); }
  .pwd-h { flex-wrap: wrap; gap: 6px 8px; padding: 14px 14px 0; }
  .pwd-tabs > button { padding: 9px 10px; }
  .pwd-x { margin-left: auto; }
  .pwd-bal { order: 3; flex: 1 1 100%; margin-left: 0; }
  .pwd-bal > b { display: inline; }
  .dpa-l { padding-left: 12px; padding-right: 12px; }
  .dpa-r { padding-left: 12px; padding-right: 12px; }
  .dpa-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: stretch; }
  .dpa-ways > .dep-seg-b { justify-content: center; gap: 5px; padding: 8px 4px; text-align: center; line-height: 1.15; }
  .pwd-glow { right: -40px; width: 260px; }
}

/* «Мои промокоды»: строка награды. `.prc-rw span` (обрезка в две строки)
   цеплял и монету суммы, и «?» отыгрыша: каждый становился отдельным
   блоком, и «+15% к депозиту · до 10.0 ?» вставало столбиком. Обрезка —
   только у текста, монета и «?» — в строке. */
.prc-rw > span { display: block; overflow: visible; -webkit-line-clamp: unset; }
.prc-rw > span .coin { display: inline-block; overflow: visible; }
.prc-rw > span .hint { display: inline-grid; vertical-align: -.2em; margin-left: 4px; }
.prc-rw { align-items: flex-start; }
.prc-rw img { margin-top: -1px; }

/* Карточка кода на самой узкой колонке (телефон 320–360): справа от отсчёта
   «2д 23:59:56» кнопке оставалось ~85 px — «Активировать» обрезалось, а чип
   «Ежедневное колесо» вылезал за карточку. Отсчёт и кнопка — друг под
   другом, чип — в ширину карточки. */
@container prccol (max-width: 380px) {
  .prc-card-r { grid-template-columns: minmax(0, 1fr); }
  .prc-card-r .prc-timer, .prc-card-r .prc-exp { grid-column: 1; justify-self: start; }
  .prc-card-r .prc-go { grid-column: 1; grid-row: auto; justify-self: stretch; max-width: none; margin-top: 4px; }
  .prc-src { max-width: 100%; height: auto; min-height: 22px; padding-top: 3px; padding-bottom: 3px; white-space: normal; line-height: 1.15; }
  /* Код целиком: арт уже, кегль кода меньше. */
  .prc-card { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .prc-card-art { height: 48px; padding-right: 6px; }
  .prc-card-art img { width: 40px; height: 40px; }
  .prc-code { font-size: 13px; padding: 0 8px; letter-spacing: .01em; }
  .prc-row .prc-code { font-size: 12px; letter-spacing: 0; }
  /* Строка использованного: значок статуса и дата — под кодом, а не
     справа, иначе на код оставалось 87 px. */
  .prc-row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; }
  .prc-row-r { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
}

/* /stats на 320–374: журнал на четыре колонки был шире карточки на 11–29 px
   (карточка вылезала за экран). Поля ячеек уже, «Игра» — переносом. */
@media (max-width: 374px) {
  #page-stats .card { min-width: 0; padding-left: 10px; padding-right: 10px; }
  #page-stats table.tbl th, #page-stats table.tbl td { padding-left: 5px; padding-right: 5px; }
  #page-stats table.tbl .tag { white-space: normal; }
}

/* Цели нажатия на телефоне (аудит 25.10): рисунок прежний, зона нажатия —
   прозрачным ::before/::after, как в «3.1 тап-цели». */
@media (max-width: 880px) {
  /* Серия, предложение и сейф кэшбэка в шапке: 28–32 px. ::after у сейфа
     занят точкой «готово» — зона на ::before. Соседи в 3–4 px: вбок зона
     растёт на 4 px, вверх-вниз — до 44. */
  #tbStreak, #tbOffer, #tbCash { position: relative; }
  #tbStreak::before, #tbOffer::before, #tbCash::before { content: ''; position: absolute; inset: -7px -4px; }
  /* Точки слайдера 13×5. */
  .hm-dots { gap: 10px; }
  .hm-dots button { position: relative; }
  .hm-dots button::after { content: ''; position: absolute; inset: -18px -5px; }
  /* «Все игры →» / «Все выигрыши →» — подпись 14 px высотой. */
  .hm-all { position: relative; }
  .hm-all::after { content: ''; position: absolute; inset: -15px -8px; }
  .hm-filter, .hm-cta, .hm-chip { position: relative; }
  .hm-filter::after { content: ''; position: absolute; inset: -5px -4px; }
  .hm-cta::after { content: ''; position: absolute; inset: -5px 0; }
  .hm-chip::after { content: ''; position: absolute; inset: -3px 0; }
  /* «Копировать ↗» у трейд-ссылки. */
  .pra-link-get { position: relative; }
  .pra-link-get::after { content: ''; position: absolute; inset: -14px -4px; }

  /* Milky Way: чипы сложности стоят столбиком вплотную — расширить зону
     некуда, поэтому сами кнопки 40 px; ставка рядом — в тот же рост. */
  .mw.mob .mw-diff .mw-segs button { height: 40px; min-height: 40px; }
  .mw.mob .mw-step { height: max(8.8vw, 40px); }
  .mw.mob .mw-bet-row { grid-template-columns: max(8.8vw, 40px) minmax(0, 1fr) max(8.8vw, 40px); }
  .mw.mob .mw-amt { height: max(8.8vw, 40px); }
  .mw.mob .mw-q { height: max(7.6vw, 36px); min-height: max(7.6vw, 36px); }
  .mw.mob .mw-q::after { inset: -2px -3px; }
  .mw-az-b, .mw-tg, .mw-ap-segs button { position: relative; }
  .mw-az-b::after { content: ''; position: absolute; inset: -5px; }
  .mw-tg::after { content: ''; position: absolute; inset: -9px -2px; }
  .mw-ap-segs button::after { content: ''; position: absolute; inset: -5px 0; }
}

/* Лидеры: строка «ты» (аудит 25.10). Своя строка в таблице подсвечена
   оранжевым краем; вне десятки — закреплённая строка под таблицей и под
   ней подсказка, сколько до призового места. */
.lba-tr.lba-me { background: linear-gradient(90deg, rgba(255, 122, 24, .14), rgba(255, 122, 24, .03) 60%, transparent);
  box-shadow: inset 3px 0 0 #ff8a1a; }
.lba-tr.lba-you { margin-top: 6px; border-top: 1px dashed rgba(255, 122, 24, .35); }
.lba-you .lba-ava { display: grid; place-items: center; }
.lba-you-tag { margin-left: 8px; padding: 2px 7px; border-radius: 6px; font: 700 10px/1.4 var(--f-ui);
  font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #ffa838;
  background: rgba(255, 122, 24, .14); border: 1px solid rgba(255, 122, 24, .4); vertical-align: 1px; }
.lba-you-note { margin: 0; padding: 10px 28px 16px; font-size: var(--fs-label); line-height: 1.45; color: #b9bcc5; }
.lba-you-note .lba-coin { width: 1em; height: 1em; vertical-align: -.15em; margin-right: 3px; }
#page-top .lba-mr.lba-me { box-shadow: inset 0 0 0 1px rgba(255, 138, 26, .55); background-color: rgba(255, 122, 24, .08); }
#page-top .lba-mr.lba-you { margin-top: 10px; }
.lba-mlist .lba-you-note { padding: 8px 4px 4px; font-size: 13px; }
#modal:has(> .lb-prize) { max-width: 460px; }

/* ============================================================ ALIVE · АПГРЕЙДЕР · РЕФЕРЕНС 26.10

   Апгрейд по референсу владельца (26.10): три блока в ряд — «Ваши скины»,
   кольцо с кнопками множителя и шанса, «Выберите скин (цель)» — и под ними
   таблица лайф-раунда. Сцена-ангар с подиумами, капсулы над кольцом и
   сетки инвентаря и целей ушли: инвентарь открывается окном, как у
   «Ракеты» (.ra-invpop), цели — полосой в правом блоке. Раскладка — от
   ширины самого апгрейда (container), а не окна: рядом бывают меню и
   лента «Сейчас выпало». Префикс upx- проверен грепом; upl- — лайф:
   переключатель, отсчёт, таблица. */

#page-upgrade.on { display: block; }
.upx {
  --upx-line: rgba(255, 255, 255, .08);
  --upx-box: rgba(255, 255, 255, .035);
  --upx-panel: linear-gradient(180deg, rgba(20, 20, 27, .9), rgba(11, 11, 15, .94));
  container: upx / inline-size;
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 1480px; margin: 0 auto; padding-bottom: 8px;
}
/* Фон — тёмный металл с оранжевыми бликами, как в референсе, и свечение
   за кольцом. */
.upx::before {
  content: ''; position: absolute; inset: -28px -24px auto; height: 760px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 26% 36% at 50% 34%, rgba(255, 106, 0, .26), transparent 72%),
    url('/assets/upg/card-bg.webp') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

/* ---- верхняя строка: LIVE / SOLO по центру, звук и «Как играть?» справа ---- */
.upx-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 38px; }
.upx-top > .upl-mode { grid-column: 2; }
.upx-tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.upx-tools .upa-snd { position: relative; inset: auto; margin: 0; pointer-events: auto; }
.upx-howto .howto-btn.in-slot .howto-pop { top: calc(100% + 10px); bottom: auto; right: 0; }
.upx-howto .howto-btn.in-slot .howto-pop::before { top: -6px; bottom: auto; transform: rotate(45deg); }
.upl-mode {
  display: inline-flex; gap: 0; padding: 3px; border-radius: 9px;
  border: 1px solid var(--upx-line); background: rgba(12, 12, 17, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.upl-mode button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 104px; padding: 9px 26px;
  border-radius: 7px; border: 0; background: transparent; color: #8a8a9a; cursor: pointer;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; transition: color .15s, background .15s;
}
.upl-mode button:hover { color: #ececf2; }
.upl-mode button.on {
  color: #fff; background: linear-gradient(180deg, #ff8a2a, #ff5c00);
  box-shadow: 0 0 18px rgba(255, 92, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.upl-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 8px #ff4d5e;
  animation: raPulse 1.4s ease-in-out infinite;
}
.upl-mode button.on .upl-dot { background: #fff; box-shadow: 0 0 6px #fff; }

/* ---- три блока ---- */
.upx-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
  grid-template-areas: "in core out"; gap: 18px; align-items: start;
}
.upx-in { grid-area: in; }
.upx-out { grid-area: out; }
.upx-core { grid-area: core; }
.upx-side {
  container-type: inline-size; position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
  border-radius: 14px; border: 1px solid var(--upx-line); background: var(--upx-panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.upx-hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.upx-h { margin: 0; font: 700 15px/1.2 var(--f-hd); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.upx-note { font: 500 var(--fs-cap)/1 var(--f-ui); color: var(--tx-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.upx-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.upx-tabs {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.upx-tabs button {
  height: 36px; min-width: 0; padding: 0 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--upx-line); background: var(--upx-box); color: #a2a2b2;
  font: 600 var(--fs-label)/1 var(--f-ui); transition: color .15s, border-color .15s, background .15s;
}
.upx-tabs button:hover { color: #ececf2; }
.upx-tabs button.on {
  color: #fff; border-color: #ff8a2a;
  background: linear-gradient(180deg, rgba(255, 122, 24, .3), rgba(255, 92, 0, .1));
  box-shadow: 0 0 14px rgba(255, 122, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.upx-bal {
  flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--upx-line); background: var(--upx-box);
  font: 700 var(--fs-ui)/1 var(--f-hd); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.upx-ic {
  flex: none; width: 38px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 8px;
  border: 1px solid var(--upx-line); background: var(--upx-box); color: #a2a2b2; cursor: pointer;
  font: 400 17px/1 var(--f-ui); transition: color .15s, border-color .15s;
}
.upx-ic:hover { color: #ffa838; border-color: rgba(255, 122, 24, .45); }
.upx-ic.spin { animation: upxSpin .7s linear; }
@keyframes upxSpin { to { transform: rotate(360deg); } }

/* ---- карточки: ставка слева, цели справа — одна форма ---- */
.upx-cards, .upx-tgts {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 3); gap: 10px;
  min-height: 160px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .45) transparent;
}
.upx-tgts { grid-auto-columns: calc((100% - 20px) / 3); padding-bottom: 2px; }
/* Старое правило сетки целей (#myItems, #targetGrid: flex-basis 0 и
   прокрутка вниз) сплющивало полосу в два пикселя — id сильнее класса. */
#targetGrid.upx-tgts {
  flex: none; min-height: 160px; max-height: none; overflow-x: auto; overflow-y: hidden;
  grid-template-columns: none; gap: 10px;
}
.upx-card {
  --rc: #8a8a9a;
  position: relative; min-width: 0; height: 160px; box-sizing: border-box; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; padding: 10px 11px 11px;
  border-radius: 10px; overflow: hidden; text-align: left;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(ellipse 85% 55% at 50% 42%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 74%),
    linear-gradient(180deg, #1b1b23, #101016);
  transition: border-color .15s, box-shadow .2s, transform .15s, opacity .2s;
}
.upx-card::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--rc); box-shadow: 0 0 12px var(--rc); opacity: .7;
}
.upx-card-p {
  position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center;
  font: 700 var(--fs-label)/1 var(--f-hd); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.upx-card-ch {
  position: absolute; right: 9px; top: 10px; z-index: 2; max-width: 46%; overflow: hidden; text-overflow: ellipsis;
  font: 700 var(--fs-micro)/1 var(--f-hd); color: #ffd27a; white-space: nowrap;
}
.upx-x {
  position: absolute; right: 5px; top: 5px; z-index: 3; width: 24px; height: 24px; padding: 0; display: grid;
  place-items: center; border: 0; border-radius: 6px; background: transparent; color: #a2a2b2; cursor: pointer;
  font: 400 19px/1 var(--f-ui); transition: color .15s, background .15s;
}
.upx-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.upx-card-art {
  position: absolute; left: 8px; right: 8px; top: 28px; bottom: 48px; display: grid; place-items: center; pointer-events: none;
}
.upx-card-art > * { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .65)); }
.upx-card-art > svg { width: 100%; height: 100%; }
.upx-card-w, .upx-card-n { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upx-card-w { font: 600 var(--fs-label)/1.2 var(--f-ui); color: #ececf2; }
.upx-card-n { font: 600 var(--fs-label)/1.25 var(--f-ui); color: color-mix(in srgb, var(--rc) 82%, #fff); }
.upx-st { margin-right: 5px; font: 700 var(--fs-micro)/1 var(--f-hd); font-style: normal; color: #ff8a2a; }
.upx-tgts .upx-card { cursor: pointer; }
.upx-tgts .upx-card:hover { border-color: rgba(255, 168, 56, .45); transform: translateY(-1px); }
.upx-card.sel {
  border-color: #ff8a2a;
  background:
    radial-gradient(ellipse 85% 55% at 50% 42%, rgba(255, 122, 24, .28), transparent 74%),
    linear-gradient(180deg, #251a12, #120e0c);
  box-shadow: 0 0 0 1px #ff8a2a, 0 0 22px rgba(255, 122, 24, .3);
}
.upx-card.far { opacity: .5; }
.upx-card.far:hover { opacity: .75; }
/* «Выберите скин» и пустые места. */
.upx-card.add {
  align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  background: linear-gradient(180deg, #17171e, #0f0f14); color: #a2a2b2;
  font: 500 var(--fs-label)/1.3 var(--f-ui); text-align: center;
}
.upx-card.add::after, .upx-card.ghost::after, .upx-card.coins::after { content: none; }
.upx-card.add:hover { border-color: rgba(255, 168, 56, .5); color: #ececf2; }
.upx-plus {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); color: #ececf2; font: 300 22px/1 var(--f-ui);
}
.upx-card.add:hover .upx-plus { border-color: #ff8a2a; color: #ffa838; }
.upx-card.ghost { border-style: dashed; border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .012); }
/* «Баланс»: вместо скинов — монеты, во всю ширину полосы; искать цель
   незачем — поиска и порядка нет. */
#page-upgrade.upg-money .upx-cards, #page-upgrade.upg-money #targetGrid.upx-tgts { display: flex; overflow: hidden; }
#page-upgrade.upg-money .upx-find, #page-upgrade.upg-money #targetRange { display: none; }
.upx-card.coins {
  flex: 1 1 auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px;
  padding: 14px 18px; cursor: default;
  background:
    radial-gradient(ellipse 50% 70% at 22% 50%, rgba(255, 168, 56, .22), transparent 72%),
    linear-gradient(180deg, #1d1810, #110f0c);
  border-color: rgba(255, 168, 56, .25);
}
.upx-card.coins.in { cursor: text; }
.upx-card.coins .upx-card-art { position: relative; inset: auto; flex: none; width: 38%; height: 100%; }
.upx-coins-tx { min-width: 0; display: grid; gap: 6px; }
.upx-coins-tx > span { font: 600 var(--fs-cap)/1.2 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #d8d8e2; }
.upx-coins-tx > b { display: inline-flex; align-items: center; font: 700 26px/1 var(--f-hd); color: #ffd27a; font-variant-numeric: tabular-nums; }
.upx-coins-tx > small { font: 500 var(--fs-cap)/1.35 var(--f-ui); color: #a2a2b2; }
/* Пустая полоса — знак слева, объяснение справа: в одну карточку высотой
   160 px вертикальная раскладка не помещается. */
#targetGrid.upx-tgts:has(> .up-empty) { display: block; overflow: visible; }
.upx-tgts .up-empty {
  box-sizing: border-box; width: 100%; height: auto; min-height: 160px; margin: 0; padding: 14px 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
  column-gap: 16px; row-gap: 6px; align-content: center; justify-items: start; text-align: left;
  border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .012);
}
.upx-tgts .up-empty .ue-mark { grid-row: 1 / span 3; align-self: center; margin: 0; }
.upx-tgts .up-empty .ue-title, .upx-tgts .up-empty .ue-text, .upx-tgts .up-empty .ue-hint { grid-column: 2; margin: 0; max-width: none; }
.upx-load {
  position: absolute; right: 26px; top: 128px; z-index: 4; padding: 5px 10px; border-radius: 999px;
  background: rgba(10, 10, 14, .88); border: 1px solid rgba(255, 122, 24, .35);
  font: 600 var(--fs-micro)/1 var(--f-ui); color: #ffd27a;
}

/* ---- сумма ставки ---- */
.upx-sum { display: grid; gap: 8px; }
.upx-sum-k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 600 var(--fs-ui)/1.2 var(--f-ui); color: #d8d8e2; white-space: nowrap; }
.upx-sum-k small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--fs-cap)/1.2 var(--f-ui); color: var(--tx-3); }
.upx-sum-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 4px; border-radius: 10px;
  border: 1px solid var(--upx-line); background: rgba(8, 8, 11, .55);
}
.upx-amt { flex: 1 1 96px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px; cursor: text; }
.upx-amt .coin { flex: none; width: 22px; height: 22px; margin: 0; }
.upx-amt input[type=text] {
  width: 100%; min-width: 0; height: 36px; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent;
  color: #fff; font: 700 20px/1 var(--f-hd); font-variant-numeric: tabular-nums;
}
.upx-amt input[type=text]:hover, .upx-amt input[type=text]:focus { border: 0; outline: none; box-shadow: none; background: transparent; }
.upx-amt input::placeholder { color: #5f5f6e; }
.upx-amt:focus-within { box-shadow: inset 0 -2px 0 #ff7a18; }
.upx-adds { flex: none; display: flex; gap: 6px; }
.upx-adds button {
  min-width: 42px; height: 34px; padding: 0 8px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, #24242d, #18181f);
  color: #ececf2; font: 700 var(--fs-label)/1 var(--f-hd); transition: border-color .15s, color .15s;
}
.upx-adds button:hover:not(:disabled) { border-color: rgba(255, 122, 24, .6); color: #ffd27a; }
.upx-adds button[data-add="max"] { color: #ffa838; }
.upx-adds button:disabled, .upx-amt input:disabled { opacity: .45; cursor: default; }

/* ---- «Вы получите» и «Коэффициент» ---- */
.upx-stats { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.upx-stat {
  min-width: 0; display: grid; gap: 9px; padding: 12px 16px 14px; border-radius: 10px;
  border: 1px solid var(--upx-line); background: rgba(8, 8, 11, .55);
}
.upx-stat > span { font: 500 var(--fs-label)/1.2 var(--f-ui); color: #a2a2b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upx-stat > span i { font-style: normal; }
.upx-stat > b {
  display: inline-flex; align-items: center; min-width: 0; font: 700 24px/1 var(--f-hd); color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.upx-stat > b .coin { width: 22px; height: 22px; margin-right: 8px; }

/* ---- поиск и порядок целей ---- */
.upx-q { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.upx-q > svg { position: absolute; left: 11px; width: 16px; height: 16px; color: #6f6f80; pointer-events: none; }
.upx-q input[type=search] {
  width: 100%; min-width: 0; height: 36px; padding: 0 12px 0 34px; border-radius: 8px; outline: none; box-shadow: none;
  border: 1px solid var(--upx-line); background: var(--upx-box); color: #ececf2; font: 400 var(--fs-label)/1 var(--f-ui);
}
.upx-q input[type=search]:hover { border-color: rgba(255, 255, 255, .14); background: var(--upx-box); box-shadow: none; }
.upx-q input[type=search]:focus { border-color: rgba(255, 122, 24, .5); }
.upx-find .dd-btn { height: 36px; padding: 0 12px; border-radius: 8px; border-color: var(--upx-line); background: var(--upx-box); }

/* ---- центр: отсчёт, кольцо, кнопки, «Создать ставку» ---- */
.upx-core { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.upx-core .upl-clock {
  position: static; inset: auto; transform: none; display: grid; justify-items: center; gap: 6px; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #d8d8e2; white-space: nowrap;
}
.upx-core .upl-clock b { font: 700 30px/1 var(--f-hd); letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; }
.upx-core .upl-clock.hot b { color: #ff4d5e; animation: raPulse 1s ease-in-out infinite; }
.upx-core .upl-clock.idle { padding: 8px 0 4px; font: 500 var(--fs-label)/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: #a2a2b2; }
.upx-ringrow { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.upx-arr {
  flex: none; width: 26px; text-align: center; font: 700 36px/1 var(--f-hd); color: #ff8a1e;
  text-shadow: 0 0 14px rgba(255, 122, 24, .85); animation: upxArr 1.8s ease-in-out infinite;
}
.upx-arr.r { animation-name: upxArrR; }
@keyframes upxArr { 50% { transform: translateX(4px); opacity: .7; } }
@keyframes upxArrR { 50% { transform: translateX(-4px); opacity: .7; } }
.upx-core .upa-dial { position: relative; flex: none; display: block; width: 236px; height: 236px; margin: 26px auto; padding: 0; }
.upx-core .upa-dial::before { width: 340px; height: 340px; }
.upx-core .upa-halo { width: 150%; height: 150%; }
.upx-core .upa-dial .ring-val,
.upx-core .upa-dial .ring.bonus-on:not(.win):not(.lose) .ring-val { font-size: 36px; }
.upx-core .upa-dial .roll-out { top: calc(100% + 30px); }

.upx-pre { width: 100%; display: grid; gap: 8px; }
.upx-prow {
  min-width: 0; display: flex; align-items: center; gap: 6px; height: 40px; box-sizing: border-box;
  padding: 4px 4px 4px 12px; border-radius: 9px; border: 1px solid var(--upx-line); background: rgba(12, 12, 17, .9);
}
.upx-prow2 { display: flex; gap: 6px; min-width: 0; }
.upx-prow2 > .upx-prow { flex: 1 1 auto; }
.upx-pk {
  flex: none; display: inline-flex; align-items: center; margin-right: auto;
  font: 500 var(--fs-cap)/1 var(--f-ui); color: #a2a2b2; white-space: nowrap;
}
.upx-pbtns { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; gap: 3px; }
/* Узкий центр (окно 1280 рядом с меню): «Шанс успеха» → «Шанс», иначе
   подпись наезжает на кнопки. */
@container (max-width: 329px) {
  .upx-pk-x { display: none; }
  .upx-prow { padding-left: 10px; }
}
.upx-pre .preset {
  flex: 1 1 0; min-width: 28px; max-width: 60px; height: 30px; padding: 0 2px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 6px; border: 1px solid transparent; background: transparent;
  color: #d8d8e2; font: 600 var(--fs-cap)/1 var(--f-hd); white-space: nowrap; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.upx-pre .preset:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.upx-pre .preset.on {
  color: #fff; border-color: #ff8a2a; background: linear-gradient(180deg, rgba(255, 122, 24, .32), rgba(255, 92, 0, .12));
  box-shadow: 0 0 12px rgba(255, 122, 24, .35);
}
.upx-pre .preset-own {
  flex: 0 0 56px; max-width: none; display: flex; align-items: center; justify-content: center; gap: 0;
  border-color: rgba(255, 255, 255, .12); cursor: text;
}
.upx-pre .preset-own input[type=text] {
  width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent;
  color: #fff; font: inherit; text-align: center;
}
/* Сброс рамок поля сайта при наведении и фокусе — без шрифта: иначе
   «font: inherit» из :focus перебивал бы 16 px телефона (iOS). */
.upx-pre .preset-own input[type=text]:hover, .upx-pre .preset-own input[type=text]:focus {
  border: 0; outline: none; box-shadow: none; background: transparent;
}
.upx-pre .preset-own input::placeholder { color: #8a8a9a; text-transform: uppercase; font: inherit; }
.upx-pre .preset-own .p-pct { display: none; }
.upx-pre .preset-own input:not(:placeholder-shown) { width: 2.6em; text-align: right; }
.upx-pre .preset-own input:not(:placeholder-shown) + .p-pct { display: inline; }
.upx-pre .preset-own.bad { border-color: rgba(255, 77, 94, .85); color: #ff4d5e; }
.upx-pre .preset-own.bad input { color: #ff4d5e; }
.upx-gearw { position: relative; flex: none; }
.upx-gear {
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--upx-line); background: rgba(12, 12, 17, .9); color: #8a8a9a; transition: color .15s, border-color .15s;
}
.upx-gear > svg { width: 18px; height: 18px; }
.upx-gear:hover, .upx-gear[aria-expanded="true"] { color: #ffa838; border-color: rgba(255, 122, 24, .5); }
.upx-gpop {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; width: 250px; display: grid; gap: 12px;
  padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 122, 24, .3);
  background: linear-gradient(180deg, rgba(24, 18, 12, .98), rgba(10, 9, 12, .98)); box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
.upx-sw {
  display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--fs-label)/1.2 var(--f-ui); color: #ececf2; text-align: left;
}
.upx-sw > span {
  position: relative; flex: none; width: 38px; height: 22px; box-sizing: border-box; border-radius: 12px;
  background: #1e1e26; border: 1px solid #33333f; transition: background .2s, border-color .2s;
}
.upx-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #6a6a7a; transition: left .2s, background .2s; }
.upx-sw.on > span { background: #ff7a18; border-color: #ff7a18; }
.upx-sw.on i { left: 18px; background: #180a00; }
.upx-glink { font: 500 var(--fs-cap)/1.35 var(--f-ui); color: #ffa838; text-decoration: none; }
.upx-glink:hover { color: #ffd27a; }

.upx-go {
  width: min(300px, 100%); height: 48px; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 0 22px; box-sizing: border-box; border-radius: 8px; cursor: pointer; overflow: hidden;
  border: 1px solid rgba(255, 210, 59, .55); background: linear-gradient(180deg, #ff9a3a, #ff6206); color: #1a0b00;
  font: 700 16px/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 28px rgba(255, 92, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35); transition: opacity .2s, filter .2s;
}
.upx-go::before {
  content: ''; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.upx-go:hover:not(.off) { filter: brightness(1.07); }
.upx-go.off { opacity: .5; cursor: default; }
.page.rolling .upx-cards, .page.rolling .upx-tgts, .page.rolling .upx-pre { pointer-events: none; }

/* ---- окно инвентаря (как у «Ракеты») ---- */
.upx-invpop .ssa { min-height: min(56vh, 520px); }

/* ---- таблица лайф-раунда ---- */
.upl-live {
  --upl-cols: 38px minmax(120px, 1.25fr) minmax(150px, 1.6fr) minmax(84px, .8fr) minmax(54px, .55fr)
    minmax(78px, .7fr) minmax(118px, 1fr) 84px;
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px;
  border-radius: 14px; border: 1px solid var(--upx-line); background: var(--upx-panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.upl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.upl-head h3 {
  margin: 0; display: inline-flex; align-items: center; gap: 9px;
  font: 700 19px/1.2 var(--f-hd); letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
.upl-head h3 em { font-style: normal; color: #ff8a2a; }
.upl-pulse {
  width: 24px; height: 18px; flex: none; background: #ff8a2a; filter: drop-shadow(0 0 6px rgba(255, 122, 24, .8));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M1 10h5l2.5-7 4 13 3-9 1.6 3H23'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M1 10h5l2.5-7 4 13 3-9 1.6 3H23'/%3E%3C/svg%3E") center / contain no-repeat;
}
.upl-no { color: #fff; font-variant-numeric: tabular-nums; }
.upl-state { font: 600 var(--fs-cap)/1 var(--f-ui); color: #ffd27a; font-variant-numeric: tabular-nums; }
.upl-sum { font: 500 var(--fs-cap)/1.4 var(--f-ui); color: var(--tx-3); white-space: nowrap; }
.upl-sum b { font: 700 var(--fs-label)/1 var(--f-hd); color: #ececf2; }
.upl-hist {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none;
  color: #a2a2b2; cursor: pointer; font: 500 var(--fs-label)/1 var(--f-ui); transition: color .15s;
}
.upl-hist i {
  width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14);
  color: #fff; font: 700 11px/1 var(--f-hd); font-style: normal;
}
.upl-hist:hover { color: #ffd27a; }
.upl-list {
  max-height: 480px; overflow-y: auto; display: grid; gap: 5px; padding-right: 2px; align-content: start;
  /* max-content, а не auto: в прокручиваемой сетке ограниченной высоты
     auto-ряды при переполнении сжимаются до min-height строки (то же у
     .bbl-list «Ракеты»). */
  grid-auto-rows: max-content;
  scrollbar-width: thin; scrollbar-color: rgba(255, 122, 24, .5) transparent;
}
.upl-row {
  display: grid; grid-template-columns: var(--upl-cols); align-items: center; gap: 12px;
  min-width: 0; min-height: 46px; padding: 4px 14px 4px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .05);
  background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .018));
  transition: background .2s, border-color .2s;
}
.upl-row:hover { border-color: rgba(255, 168, 56, .22); }
.upl-row.me { border-color: rgba(255, 122, 24, .4); background: linear-gradient(90deg, rgba(255, 122, 24, .12), rgba(255, 122, 24, .04)); }
.upl-row.in { animation: raRow .3s ease both; }
.upl-row.flash-win { animation: bblWon .9s ease-out both; }
.upl-row.flash-lose { animation: bblLost .9s ease-out both; }
.upl-ava {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--ac); color: #0a0a0f; font: 700 15px/1 var(--f-hd);
}
.upl-who { min-width: 0; display: flex; align-items: center; gap: 10px; }
.upl-who[data-uid] { cursor: pointer; }
.upl-lvl {
  flex: none; min-width: 26px; height: 22px; padding: 0 6px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08);
  font: 700 var(--fs-micro)/1 var(--f-hd); color: #d8d8e2;
}
.upl-name { min-width: 0; font: 600 var(--fs-label)/1.2 var(--f-hd); color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upl-row.me .upl-name, .upl-who[data-uid]:hover .upl-name { color: #ffa838; }
.upl-me {
  flex: none; padding: 1px 6px; border-radius: 5px; font: 700 10px/1.4 var(--f-hd); font-style: normal;
  color: #180a00; background: #ffa838;
}
.upl-stake { min-width: 0; display: flex; align-items: center; gap: 14px; }
.upl-box {
  --rc: #ff8a2a;
  position: relative; flex: none; width: 70px; height: 36px; display: grid; place-items: center; overflow: hidden;
  border-radius: 6px; background: radial-gradient(ellipse 70% 80% at 50% 50%, color-mix(in srgb, var(--rc) 32%, transparent), transparent 75%), #15151c;
}
.upl-box > img, .upl-box > svg { max-width: 92%; max-height: 32px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.upl-box.cash { --rc: #ffa838; }
.upl-box .upl-more { position: absolute; right: 2px; bottom: 2px; }
.upl-stx { min-width: 0; display: grid; gap: 2px; }
.upl-stx b, .upl-stx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upl-stx b { font: 600 var(--fs-label)/1.15 var(--f-ui); color: #ececf2; }
.upl-stx small { display: flex; align-items: center; gap: 4px; font: 500 var(--fs-micro)/1.2 var(--f-ui); color: #a2a2b2; }
.upl-more, .upl-plus {
  padding: 1px 5px; border-radius: 5px; font-style: normal; white-space: nowrap;
  background: #1b1b24; border: 1px solid rgba(255, 255, 255, .14); font: 700 10px/1.3 var(--f-hd); color: #ececf2;
}
.upl-plus .coin { width: 11px; height: 11px; margin: 0; vertical-align: -1px; }
.upl-coins { max-width: 100%; max-height: 34px; object-fit: contain; }
.upl-amt { display: inline-flex; align-items: center; font: 600 var(--fs-label)/1 var(--f-hd); color: #ececf2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.upl-ch { font: 700 var(--fs-ui)/1 var(--f-hd); color: color-mix(in srgb, var(--cc, #ffd27a) 80%, #fff); white-space: nowrap; font-variant-numeric: tabular-nums; }
.upl-x { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-label)/1 var(--f-hd); color: #d8d8e2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.upl-bars { width: 13px; height: 13px; flex: none; fill: #6f6f80; }
.upl-st { display: inline-flex; align-items: center; gap: 12px; min-width: 0; font: 600 var(--fs-label)/1.15 var(--f-hd); white-space: nowrap; }
.upl-st > svg { flex: none; width: 24px; height: 24px; }
.upl-st.pending { color: #ff8a2a; }
.upl-st.pending > svg { animation: upxSpin 1.4s linear infinite; }
.upl-st.pending > span { animation: raPulse 1.6s ease-in-out infinite; }
.upl-st.win { color: #3ddc84; }
.upl-st.lose { color: #ff4d5e; }
.upl-tgt { justify-self: end; width: 84px; height: 36px; display: grid; place-items: center; }
.upl-tgt > img, .upl-tgt > svg { max-width: 100%; max-height: 34px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.upl-foot { margin: 0; font: 500 var(--fs-cap)/1.4 var(--f-ui); color: var(--tx-3); }
.upl-empty { padding: 26px 12px 18px; text-align: center; display: grid; justify-items: center; gap: 8px; }
.upl-empty > b { font: 700 var(--fs-body)/1.2 var(--f-hd); color: #ffd27a; letter-spacing: .04em; }
.upl-empty > p { margin: 0; max-width: 520px; font: 500 var(--fs-label)/1.45 var(--f-ui); color: #a2a2b2; }
.upl-empty-last { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
.upl-empty-last > span { font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.upl-er {
  display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07);
  font: 500 var(--fs-cap)/1 var(--f-ui); color: #a2a2b2;
}
.upl-er b { font: 700 var(--fs-cap)/1 var(--f-hd); color: #ececf2; }
.upl-er i { font-style: normal; }
.upl-er i.w { color: #7ce4ae; }

/* ---- история раундов (окно) ---- */
.upl-hist-pop { display: grid; gap: 12px; }
.upl-hist-list { display: grid; gap: 4px; max-height: min(60vh, 520px); overflow-y: auto; }
.upl-hr {
  display: grid; grid-template-columns: 70px 64px 64px 1fr 86px 1fr; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, .028);
  font: 500 var(--fs-label)/1.2 var(--f-ui); color: #d8d8e2;
}
.upl-hr.head { background: none; font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.upl-hr b { font-family: var(--f-hd); color: #ffa838; }
.upl-hr .w { color: #7ce4ae; }

/* ---- узкий блок: сумма в две строки, кнопки «+5 … MAX» во всю ширину ---- */
@container (max-width: 400px) {
  .upx-sum-row { flex-wrap: wrap; }
  .upx-amt { flex-basis: 100%; }
  .upx-adds { flex: 1 1 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .upx-adds button { min-width: 0; }
  .upx-card { height: 140px; }
  .upx-cards, .upx-tgts, #targetGrid.upx-tgts { min-height: 140px; }
  .upx-stat > b { font-size: 20px; }
  .upx-stat > span i { display: none; }
  .upx-bal { padding: 0 10px; }
  /* Цена и шанс в узкой карточке в одну строку не встают — шанс ниже. */
  .upx-card-ch { top: 28px; }
  .upx-card-art { top: 40px; }
}
/* Совсем узко (телефон 320): по две с половиной карточки на ширину — третья
   выглядывает и подсказывает, что полоса листается. */
@container (max-width: 300px) {
  .upx-cards, .upx-tgts { grid-auto-columns: calc((100% - 20px) / 2.4); }
}

/* ---- ширина апгрейда меньше трёх колонок: кольцо сверху, блоки под ним ---- */
@container upx (max-width: 1019px) {
  .upx-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "core core" "in out"; }
  .upx-core { width: min(380px, 100%); justify-self: center; }
}
@container upx (max-width: 1239px) and (min-width: 1020px) {
  .upx-main { gap: 14px; }
  .upx-side { padding: 16px; }
}
@container upx (max-width: 1099px) and (min-width: 1020px) {
  .upx-main { grid-template-columns: minmax(0, 1fr) 304px minmax(0, 1fr); }
  .upx-core .upa-dial { width: 214px; height: 214px; }
}
@container upx (max-width: 1099px) {
  .upl-live { --upl-cols: 36px minmax(110px, 1.2fr) minmax(120px, 1.4fr) minmax(76px, .8fr) minmax(48px, .5fr) 0 minmax(108px, 1fr) 64px; }
  .upl-row > .upl-x { display: none; }
}

/* ---- телефон и узкие окна: один столбец ---- */
@container upx (max-width: 699px) {
  .upx { gap: 12px; }
  .upx-top { grid-template-columns: minmax(0, 1fr) auto; }
  .upx-top > .upl-mode { grid-column: 1; justify-self: start; }
  .upx-tools { grid-column: 2; }
  .upl-mode button { min-width: 0; padding: 9px 20px; }
  .upx-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "in" "out" "core"; gap: 12px; }
  .upx-core { width: 100%; }
  .upx-side { padding: 14px; gap: 12px; border-radius: 12px; }
  .upx-core .upa-dial { width: 220px; height: 220px; margin: 22px auto; }
  .upx-core .upa-dial .ring-val,
  .upx-core .upa-dial .ring.bonus-on:not(.win):not(.lose) .ring-val { font-size: 38px; }
  .upx-go { width: 100%; height: 52px; }
  .upl-live { padding: 14px 12px 12px; }
  .upl-head h3 { font-size: 16px; }
  .upl-row {
    grid-template-columns: 32px minmax(0, 1fr) auto auto 46px;
    grid-template-areas: "ava who ch st tgt" "ava stake amt amt tgt";
    gap: 4px 10px; padding: 7px 8px;
  }
  .upl-row > .upl-ava { grid-area: ava; width: 32px; height: 32px; align-self: center; }
  .upl-who { grid-area: who; gap: 6px; }
  .upl-ch { grid-area: ch; font-size: var(--fs-label); }
  .upl-st { grid-area: st; justify-self: end; gap: 6px; font-size: var(--fs-cap); }
  .upl-st > svg { width: 18px; height: 18px; }
  .upl-tgt { grid-area: tgt; width: 46px; }
  .upl-stake { grid-area: stake; gap: 8px; }
  .upl-box { width: 44px; height: 28px; }
  .upl-box > img, .upl-box > svg { max-height: 24px; }
  .upl-stx small { display: none; }
  .upl-amt { grid-area: amt; justify-self: end; }
  .upl-hr { grid-template-columns: 56px 50px 44px 1fr 1fr; }
  .upl-hr > :nth-child(5) { display: none; }
}

/* Прежняя сетка телефона (сцена «растворялась» в странице) больше не
   участвует: блоки стоят столбцом внутри .upx. */
@media (max-width: 880px) {
  #page-upgrade.on { display: block; margin: 0; padding: 0; min-height: 0; background: none; }
  /* iOS приближает страницу при фокусе в поле мельче 16 px. Подсказка
     «свой %» — шрифтом кнопок ряда, набранное — 16 px вместе со знаком «%». */
  .upx-pre .preset-own input[type=text], .upx-pre .preset-own .p-pct,
  .upx-amt input[type=text], .upx-q input[type=search] { font-size: 16px; }
  .upx-pre .preset-own input::placeholder { font-size: var(--fs-cap); }
  .upx-pre .preset-own { flex-basis: 72px; }
  .upx-pre .preset-own input:not(:placeholder-shown) { width: 3em; }
}

/* Лента «Сейчас выпало» рядом с апгрейдом — только от 1680 px: уже ей три
   блока референса в ряд не встают (до 1680 px колонкам остаётся меньше
   тысячи пикселей). На витрине, в кейсе, «Ракете» и «Минах» лента — как была. */
@media (min-width: 1400px) and (max-width: 1679.98px) {
  .content:has(> #page-upgrade.on) > .cs-rail { display: none; }
  #csRail ~ #page-upgrade.on { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .upl-dot, .upx-core .upl-clock.hot b, .upl-st.pending > span, .upl-st.pending > svg, .upl-row.in,
  .upl-row.flash-win, .upl-row.flash-lose, .upx-arr { animation: none; }
}

/* ============================================================ ALIVE · АПГРЕЙДЕР · ПРАВКИ 26.10

   Правки владельца 26.10 поверх «РЕФЕРЕНС 26.10»:
   * фон — на всю ширину страницы и под таблицей лайфа, с мягкими краями со
     всех сторон: в ширину сцены (1480 px) на широком экране были видны его
     вертикальные границы;
   * «Ваши скины» и «Выберите скин (цель)» тянутся до таблицы лайфа — вровень
     с кнопкой «Создать ставку» — на «Скинах» и на «Балансе» одинаково, и
     переключение вкладок блоки не двигает. Карточки растут до 1.5 своей
     ширины, остальное место — под ними; монеты «Баланса» заполняют полосу. */

.upx::before {
  inset: -28px auto -40px 50%; width: 100vw; height: auto; min-height: 760px; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 420px 280px at 50% 266px, rgba(255, 106, 0, .26), transparent 72%),
    url('/assets/upg/card-bg.webp') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 62%, transparent), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
/* В один столбец кольцо ниже блоков — свечение за ним там ни к чему, а фон
   на всю высоту столбца увеличивал картинку вдвое: только верх, 760 px. */
@media (max-width: 880px) {
  .upx::before { bottom: auto; height: 760px; background: url('/assets/upg/card-bg.webp') center top / cover no-repeat; }
}

.upx-main { align-items: stretch; }
.upx-side > .upx-cards, .upx-side > #targetGrid.upx-tgts { flex: 1 1 auto; }
.upx-card { height: auto; min-height: 160px; max-height: max(160px, calc((100cqw - 20px) / 3 * 1.5)); }
.upx-card.coins { max-height: none; }
.upx-tgts .up-empty { height: 100%; }
@container (max-width: 400px) {
  .upx-card { min-height: 140px; max-height: max(140px, calc((100cqw - 20px) / 3 * 1.5)); }
}

/* Правый отступ, как слева: у .content справа его нет (--chat-reserve: 0),
   а на 1400–1679 px ленты рядом с апгрейдом нет и её место снято в ноль —
   правый блок и таблица упирались в край окна. С лентой (от 1680 px) отступ
   по-прежнему её: 166 px. */
@media (min-width: 1200px) { #page-upgrade.on { padding-right: 20px; } }
@media (min-width: 1400px) and (max-width: 1679.98px) { #csRail ~ #page-upgrade.on { padding-right: 20px; } }

/* С отступом апгрейд на окне 1280 px — 1008 px, и сетка уходила в два столбца
   (кольцо сверху, блоки под ним, таблица ниже первого экрана). Три колонки
   держатся до 1000 px — как на 1020–1099 px. */
@container upx (min-width: 1000px) and (max-width: 1019px) {
  .upx-main { grid-template-columns: minmax(0, 1fr) 304px minmax(0, 1fr); grid-template-areas: "in core out"; gap: 14px; }
  .upx-core { width: auto; justify-self: stretch; }
  .upx-side { padding: 16px; }
  .upx-core .upa-dial { width: 214px; height: 214px; }
}

/* ============================================================ ALIVE · АПГРЕЙДЕР · ТЕЛЕФОН 26.10

   Телефон по примеру владельца (26.10): «Ваша ставка» и «Цель / Выигрыш на
   баланс» — два блока рядом, под ними кольцо, множитель и шанс, «Создать
   ставку» и таблица лайфа. Строка таблицы — в одну линию: аватар с уровнем,
   ник, ставка картинкой, сумма, шанс, множитель, статус. Баланс — в шапке
   сайта, в блоке его нет. Раньше блоки стояли столбцом, и кольцо уезжало за
   первый экран. */

@container upx (max-width: 699px) {
  .upx-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "in out" "core core"; gap: 10px; }
  .upx-side { padding: 12px 10px; gap: 10px; }
  .upx-h { font-size: 12px; letter-spacing: .04em; }
  .upx-note, .upx-bal { display: none; }
  .upx-bar { gap: 6px; }
  .upx-tabs { gap: 3px; }
  .upx-tabs button { height: 32px; padding: 0 4px; font-size: var(--fs-cap); }
  .upx-ic { width: 32px; height: 32px; font-size: 15px; }
  /* Поиск целей — во всю ширину, порядок и «обновить» — строкой ниже. */
  .upx-find { flex-wrap: wrap; }
  .upx-find .upx-q { flex: 1 1 100%; }
  .upx-find .upx-q input[type=search] { height: 32px; }
  .upx-find .dd, .upx-find select { flex: 1 1 auto; min-width: 0; }
  .upx-find .dd-btn { width: 100%; height: 32px; }
  .upx-core .upa-dial { width: 230px; height: 230px; }

  /* Строка лайфа в одну линию. */
  .upl-head { flex-wrap: nowrap; gap: 8px; }
  .upl-head h3 { font-size: 15px; white-space: nowrap; }
  .upl-hist { margin-left: auto; white-space: nowrap; }
  /* Отсчёт и итог раунда — над кольцом (#uplClock); в шапке таблицы, как в
     примере, только номер раунда и «История раундов». */
  .upl-state, .upl-sum { display: none; }
  .upl-row {
    position: relative; grid-template-columns: 34px minmax(0, 1fr) 40px auto auto auto auto;
    grid-template-areas: "ava who stake amt ch x st"; gap: 6px; min-height: 46px; padding: 6px 8px;
  }
  .upl-row > .upl-ava { grid-area: ava; width: 34px; height: 34px; }
  .upl-who { grid-area: who; gap: 4px; }
  .upl-lvl {
    position: absolute; left: 14px; bottom: 2px; z-index: 1; min-width: 22px; height: 15px; padding: 0 3px;
    border-radius: 5px; background: #16161d; border-color: rgba(255, 255, 255, .2); font-size: 9px;
  }
  .upl-stake { grid-area: stake; gap: 0; }
  .upl-box { width: 40px; height: 30px; }
  .upl-box > img, .upl-box > svg { max-height: 24px; }
  .upl-stx { display: none; }
  .upl-amt { grid-area: amt; justify-self: start; font-size: var(--fs-cap); }
  .upl-amt .coin { width: 12px; height: 12px; }
  .upl-ch { grid-area: ch; font-size: var(--fs-cap); }
  .upl-row > .upl-x { grid-area: x; display: inline-flex; gap: 0; font-size: var(--fs-cap); }
  .upl-bars { display: none; }
  .upl-st { grid-area: st; justify-self: end; gap: 5px; font-size: var(--fs-cap); }
  .upl-st > svg { width: 16px; height: 16px; }
  .upl-tgt { display: none; }
}
/* Телефон до 400 px: колонки строки плотнее — нику остаётся место и при
   множителе. */
@container upx (max-width: 379px) {
  .upl-row { grid-template-columns: 30px minmax(0, 1fr) 34px auto auto auto auto; gap: 5px; padding: 6px 6px; }
  .upl-row > .upl-ava { width: 30px; height: 30px; }
  .upl-box { width: 34px; height: 28px; }
  .upl-lvl { left: 10px; }
  .upl-me { padding: 0 4px; }
}
/* Совсем узкий телефон (уже 360): множитель из строки — иначе нику не
   остаётся места. */
@container upx (max-width: 339px) {
  .upl-row { grid-template-columns: 34px minmax(0, 1fr) 40px auto auto auto; grid-template-areas: "ava who stake amt ch st"; }
  .upl-row > .upl-x { display: none; }
}

/* Узкий блок (телефон, блоки рядом): карточки по полторы на ширину,
   монеты и подписи мельче, «Сумма ставки» и её пределы — в две строки,
   пустая полоса целей — знак над текстом. */
@container (max-width: 240px) {
  .upx-cards, .upx-tgts { grid-auto-columns: calc((100% - 10px) / 1.4); }
  .upx-card { min-height: 128px; max-height: none; }
  .upx-cards, .upx-tgts, #targetGrid.upx-tgts { min-height: 128px; }
  /* Монеты — как в примере: картинка слева, подписи справа. */
  .upx-card.coins { gap: 6px; padding: 8px 7px; }
  .upx-card.coins .upx-card-art { width: 42%; height: auto; max-height: 86px; }
  .upx-coins-tx { gap: 3px; }
  .upx-coins-tx > span { font-size: 9px; letter-spacing: .03em; }
  .upx-coins-tx > b { font-size: 17px; }
  .upx-coins-tx > b .coin { width: 14px; height: 14px; }
  .upx-coins-tx > small { font-size: 9px; }
  .upx-sum-k { flex-wrap: wrap; row-gap: 2px; white-space: normal; font-size: var(--fs-label); }
  .upx-sum-row { padding: 4px; gap: 4px; }
  .upx-amt { padding: 0 4px; gap: 6px; }
  .upx-amt input[type=text] { font-size: 16px; height: 32px; }
  .upx-adds { gap: 3px; }
  .upx-adds button { height: 30px; padding: 0; font-size: 10px; }
  .upx-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .upx-stat { padding: 8px 5px; gap: 6px; }
  .upx-stat > span { white-space: normal; font-size: 9.5px; line-height: 1.25; letter-spacing: -.01em; }
  .upx-stat > b { font-size: 16px; }
  /* Монета — flex: none: в узкой ячейке она сжималась вместе с числом в точку. */
  .upx-stat > b .coin { flex: none; width: 14px; height: 14px; margin-right: 4px; }
  .upx-tgts .up-empty { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 10px 8px; row-gap: 4px; }
  .upx-tgts .up-empty .ue-mark { grid-row: auto; transform: scale(.8); }
  .upx-tgts .up-empty .ue-title, .upx-tgts .up-empty .ue-text { grid-column: 1; }
  /* Длинный текст пустой полосы растягивал оба блока на полэкрана — в узком
     блоке остаются знак и заголовок. */
  .upx-tgts .up-empty .ue-text, .upx-tgts .up-empty .ue-hint { display: none; }
  .upx-tgts .up-empty .ue-title { font-size: var(--fs-label); line-height: 1.3; }
  /* Цена карточки мельче: в узкой карточке она наезжала на крестик и шанс. */
  .upx-card-p { font-size: 10px; }
  .upx-card-p .coin { width: 11px; height: 11px; margin-right: 3px; }
}
/* Телефон до 375 px: поле суммы не уже 80 px, «MAX» влезает в кнопку,
   карточка цели — по одной с четвертью на ширину, чтобы цене хватало места. */
@container (max-width: 180px) {
  .upx-cards, .upx-tgts { grid-auto-columns: calc((100% - 10px) / 1.25); }
  .upx-sum-row { padding: 3px; }
  .upx-amt { padding: 0 2px; gap: 4px; }
  .upx-amt .coin { width: 16px; height: 16px; }
  .upx-adds { gap: 2px; }
  .upx-adds button { font-size: 9px; letter-spacing: -.02em; border-radius: 6px; }
}
/* Совсем узко (телефоны 320–360): подписи монет и «Вы получите /
   Коэффициент» в ряд не влезают — монеты картинкой над текстом, два
   значения друг под другом. */
@container (max-width: 150px) {
  .upx-card.coins { flex-direction: column; justify-content: center; text-align: center; }
  .upx-card.coins .upx-card-art { width: 70%; max-height: 56px; }
  .upx-coins-tx { justify-items: center; }
  .upx-stats { grid-template-columns: minmax(0, 1fr); }
}
@container upx (max-width: 359px) {
  .upx-main { gap: 8px; }
  .upx-side { padding: 10px 8px; }
  /* «История раундов» на 320 px уходила за край шапки таблицы. */
  .upl-head h3 { font-size: 13px; }
  .upl-hist { font-size: var(--fs-micro); gap: 4px; }
  /* Своя строка и так подсвечена — метка «ты» уступает место нику. */
  .upl-me { display: none; }
}

/* ============================================================ ALIVE · АПГРЕЙДЕР · ЦЕЛИ СЕТКОЙ, РОВНЫЕ БЛОКИ 26.10

   Правки владельца 26.10 (вечер):
   * цели — сеткой мелких карточек с прокруткой вниз, а не полосой вбок:
     на экране их помещается втрое больше; догрузка — у нижнего края;
   * «Ваша ставка» и «Цель / Выигрыш на баланс» делят строки (subgrid):
     заголовок, панель, карточки, нижний блок. Карточки и монеты обоих
     блоков стоят на одном уровне и одного размера на любой вкладке и
     ширине — справа нет панели вкладок, и раньше монеты «Выигрыша на баланс»
     начинались выше и были больше;
   * «Вы получите» — как «Сумма ставки»: подпись сверху, справа
     «Коэффициент», под ними поле во всю ширину блока;
   * ставка скинами — такой же сеткой, как цели: те же карточки и прокрутка
     вниз, пустых мест — сколько скинов войдёт в ставку (MAX_INPUT). */

/* ---- общие строки боковых блоков ---- */
.upx-main { grid-template-areas: none; grid-template-rows: auto auto minmax(0, 1fr) auto; row-gap: 14px; }
.upx-in { grid-column: 1; grid-row: 1 / 5; }
.upx-core { grid-column: 2; grid-row: 1 / 5; }
.upx-out { grid-column: 3; grid-row: 1 / 5; }
/* Подсеткой блок становится только без container-type: контейнер запроса
   ширины не может быть подсеткой (layout containment), и subgrid молча
   превращался в none. Запросы без имени (@container (max-width: …)) теперь
   ловят строки блока — их ширина равна ширине блока без полей, пороги
   прежние. Свою ширину строка не видит: собственные правила «Вы получите»
   пересчитаны ниже в ширину апгрейда. */
.upx-side { container-type: normal; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
.upx-side > .upx-hrow, .upx-side > .upx-bar, .upx-side > .upx-cards, .upx-side > #targetGrid,
.upx-side > .upx-sum, .upx-side > .upx-stats { container-type: inline-size; }
/* Заголовок — по центру строки: по базовой линии подпись «60 из 4960»
   делала строку на 4 px выше, и на «Балансе» (подписи нет) вкладки
   подпрыгивали. */
.upx-side > .upx-hrow { grid-row: 1; align-items: center; }
.upx-side > .upx-bar { grid-row: 2; }
.upx-side > .upx-cards, .upx-side > #targetGrid { grid-row: 3; }
.upx-side > .upx-sum, .upx-side > .upx-stats { grid-row: 4; }
.upx-side > .upx-load {
  grid-row: 3; grid-column: 1; top: auto; right: auto; bottom: 8px; left: 50%; transform: translateX(-50%);
}

/* ---- ставка и цели: сетка мелких карточек, прокрутка вниз ---- */
/* Размер сетки задаёт строка блоков, а не число карточек: без contain список
   из шестидесяти целей растягивал строку, а с ним — оба блока. Монеты
   «Баланса» слева — без contain: когда целей нет, высоту строки задают они. */
#inBody.upx-cards, #targetGrid.upx-tgts {
  min-height: 0; max-height: none; align-self: stretch;
  grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-columns: auto;
  grid-auto-rows: 112px; align-content: start; gap: 8px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: none; padding: 0 4px 0 0;
}
#targetGrid.upx-tgts, #page-upgrade:not(.upg-money) #inBody.upx-cards { contain: size; }
/* Монеты прокрутки не знают — поле под полосу прокрутки им ни к чему. */
#page-upgrade.upg-money :is(#inBody, #targetGrid) { padding: 0; }
/* Мелкие карточки — только у скинов: монеты остаются во всю полосу (раньше
   правила целей сдвигали картинку монет «Выигрыша на баланс» на 22 px). */
:is(#inBody, #targetGrid) > .upx-card:not(.coins) {
  height: auto; min-height: 0; max-height: none; padding: 6px 7px 7px; border-radius: 9px; scroll-snap-align: none;
}
:is(#inBody, #targetGrid) .upx-card-p { left: 7px; top: 7px; max-width: 56%; overflow: hidden; font-size: 10px; }
:is(#inBody, #targetGrid) .upx-card-p .coin { width: 11px; height: 11px; margin-right: 3px; }
:is(#inBody, #targetGrid) .upx-card-ch { right: 6px; top: 7px; max-width: 40%; font-size: 9px; }
:is(#inBody, #targetGrid) .upx-x { right: 2px; top: 2px; width: 20px; height: 20px; font-size: 16px; }
:is(#inBody, #targetGrid) > .upx-card:not(.coins) .upx-card-art { left: 6px; right: 6px; top: 22px; bottom: 30px; }
:is(#inBody, #targetGrid) .upx-card-w, :is(#inBody, #targetGrid) .upx-card-n { font-size: 10px; line-height: 1.2; }
:is(#inBody, #targetGrid) .upx-card::after { left: 18%; right: 18%; }
#inBody .upx-card.add { gap: 8px; }
#inBody .upx-plus { width: 28px; height: 28px; font-size: 20px; }

/* Колонка суммы — не шире блока: подпись «скины … + с баланса …» на
   телефоне длиннее блока и выталкивала поле суммы и «MAX» за его край (так
   было и до 26.10 — нашёл стенд со скинами в ставке). Подпись режется
   многоточием, целиком — во всплывающей подсказке. */
.upx-sum { grid-template-columns: minmax(0, 1fr); }

/* ---- «Вы получите» как «Сумма ставки» ---- */
/* Поле тянется до низа строки: в узком блоке сумма и кнопки «+5 … MAX»
   встают в две строки, и поле «Вы получите» выходит той же высоты. */
.upx-stats {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(48px, 1fr);
  column-gap: 12px; row-gap: 8px;
}
.upx-stats::before {
  content: ''; grid-row: 2; grid-column: 1 / -1; border-radius: 10px;
  border: 1px solid var(--upx-line); background: rgba(8, 8, 11, .55);
}
.upx-stat { display: contents; }
.upx-stat > span {
  grid-row: 1; min-width: 0; align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 var(--fs-ui)/1.2 var(--f-ui); color: #d8d8e2;
}
.upx-stat > span i { font-style: normal; font-weight: 500; color: var(--tx-3); }
.upx-stat:first-child > span { grid-column: 1; }
.upx-stat:last-child > span { grid-column: 2; justify-self: end; font: 500 var(--fs-cap)/1.2 var(--f-ui); color: var(--tx-3); }
.upx-stat > b { grid-row: 2; z-index: 1; align-self: center; min-width: 0; }
.upx-stat:first-child > b { grid-column: 1; padding-left: 12px; font: 700 20px/1 var(--f-hd); }
.upx-stat:first-child > b .coin { width: 22px; height: 22px; margin-right: 8px; }
.upx-stat:last-child > b { grid-column: 2; justify-self: end; padding-right: 14px; font: 700 18px/1 var(--f-hd); color: #ffd27a; }

/* ---- два столбца (ширина апгрейда 700–999 px): кольцо сверху, блоки под ним ---- */
@container upx (min-width: 700px) and (max-width: 999px) {
  .upx-main { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .upx-core { grid-column: 1 / -1; grid-row: 1; }
  .upx-in { grid-column: 1; grid-row: 2 / 6; }
  .upx-out { grid-column: 2; grid-row: 2 / 6; }
  .upx-side > .upx-hrow { grid-row: 1; }
  #page-upgrade:not(.upg-money) #targetGrid.upx-tgts { height: 260px; }
}

/* ---- телефон: блоки рядом, кольцо под ними ---- */
@container upx (max-width: 699px) {
  .upx-main { grid-template-rows: auto auto minmax(0, 1fr) auto auto; row-gap: 10px; }
  .upx-in { grid-column: 1; grid-row: 1 / 5; }
  .upx-out { grid-column: 2; grid-row: 1 / 5; }
  .upx-core { grid-column: 1 / -1; grid-row: 5; }
  .upx-side { row-gap: 10px; }
  #page-upgrade:not(.upg-money) #targetGrid.upx-tgts { height: 214px; }
  #inBody.upx-cards, #targetGrid.upx-tgts {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); grid-auto-rows: 100px; gap: 6px; padding-right: 2px;
  }
  :is(#inBody, #targetGrid) > .upx-card:not(.coins) { padding: 5px 5px 6px; }
  :is(#inBody, #targetGrid) .upx-card-p { left: 5px; top: 5px; font-size: 9px; }
  :is(#inBody, #targetGrid) .upx-card-p .coin { width: 9px; height: 9px; margin-right: 2px; }
  :is(#inBody, #targetGrid) .upx-card-ch { right: 4px; top: 18px; max-width: 70%; font-size: 8px; }
  :is(#inBody, #targetGrid) .upx-x { right: 1px; top: 1px; width: 18px; height: 18px; font-size: 14px; }
  :is(#inBody, #targetGrid) > .upx-card:not(.coins) .upx-card-art { left: 4px; right: 4px; top: 28px; bottom: 26px; }
  :is(#inBody, #targetGrid) .upx-card-w, :is(#inBody, #targetGrid) .upx-card-n { font-size: 9px; }
  #inBody .upx-card.add { gap: 5px; font-size: 10px; line-height: 1.2; }
  #inBody .upx-plus { width: 24px; height: 24px; font-size: 17px; }
  /* Порядок и «обновить» — одной строкой под поиском: на 320 px «обновить»
     уходил третьей строкой, и вкладки слева стояли над пустотой. */
  .upx-find .dd { flex: 1 1 0; }
  .upx-find .dd-btn { min-width: 0; padding: 0 8px; }
}

/* Блок «Вы получите» — сам контейнер, и его порог по ширине блока (240 px) —
   в ширине апгрейда: на телефоне блок без полей = (ширина − 10) / 2 − 20.
   «Сумма ставки» и её пределы здесь в две строки — подписи «Вы получите»
   опущены на ту же высоту, и оба поля начинаются вровень. */
@container upx (max-width: 530px) {
  .upx-sum-k { min-height: 32px; align-content: flex-end; }
  .upx-stats { column-gap: 6px; grid-template-rows: 32px minmax(38px, 1fr); }
}

/* Узкий блок (телефон): значения «Вы получите» мельче. */
@container (max-width: 240px) {
  .upx-stat > span { font-size: 10px; }
  .upx-stat > span i { display: none; }
  .upx-stat:last-child > span { font-size: 9px; }
  .upx-stat:first-child > b { padding-left: 7px; font-size: 14px; }
  .upx-stat:first-child > b .coin { flex: none; width: 13px; height: 13px; margin-right: 4px; }
  .upx-stat:last-child > b { padding-right: 7px; font-size: 13px; }
}
/* Совсем узко (320–360): подпись «Коэффициент» уступает место «Вы
   получите» — множитель и так читается по «x». */
@container (max-width: 150px) {
  .upx-stat:last-child > span { display: none; }
  .upx-stat:first-child > b { font-size: 12px; padding-left: 5px; }
  .upx-stat:last-child > b { font-size: 11px; padding-right: 5px; }
}

/* ============================================================ Телефон · окна во весь экран, 26.10
   Владелец: «на мобилке делай модалки во весь экран — без рамок». Любое
   окно (#modal) на ширине до 880px занимает весь экран: без шторки, рамки,
   скругления и тени; прокрутка внутри окна. Окна со своей карточкой
   (пополнение, предложения, кешбэк) тоже теряют рамку. Кнопку закрытия
   окну без своей ставит ui.modal (.modal-x-auto). */
.modal-x-auto { display: none; }
@media (max-width: 880px) {
  #modalBg.modal-bg { padding: 0; place-items: stretch; }
  #modalBg > #modal.modal {
    width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0;
    border: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: auto;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    animation: fade .18s ease;
  }
  #modalBg > #modal.modal::before { display: none; }
  #modalBg > #modal.modal:has(> :is(.pwd, .dpa, .ofr, .cbk)) { padding-top: 0; }
  #modal > :is(.pwd, .dpa, .ofr, .cbk) { min-height: 100%; border: 0; border-radius: 0; box-shadow: none; max-width: none; }
  #modal > .modal-x-auto {
    display: grid; place-items: center; position: sticky; top: 0; z-index: 3; float: right;
    width: 40px; height: 40px; margin: -6px -6px 6px 10px; border-radius: 12px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #ececf2; font-size: 16px;
  }
}

/* ============================================================ Телефон · предложения значками справа, 26.10
   Владелец: «предложения на мобилке — как в мобильных играх, иконками
   справа, чтобы не засорять хидер». В шапке на телефоне их больше нет:
   столбик значков у правого края под шапкой, под значком — отсчёт или
   прогресс серии. */
.ofr-dock { display: none; }
@media (max-width: 880px) {
  #tbOffer, #tbStreak, #tbLeaders { display: none !important; }
  .ofr-dock {
    position: fixed; z-index: 90; right: 8px; top: calc(76px + env(safe-area-inset-top, 0px));
    display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none;
  }
  .ofd-b {
    pointer-events: auto; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .ofd-b[hidden] { display: none; }
  .ofd-ic {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #1a0c02;
    background: linear-gradient(160deg, #ffd36a, #ff7a18 60%, #e85a00);
    border: 1.5px solid rgba(255, 230, 170, .85);
    box-shadow: 0 6px 18px -4px rgba(255, 122, 24, .75), inset 0 1px 0 rgba(255, 255, 255, .55);
    animation: ofdPulse 2.4s ease-in-out infinite;
  }
  .ofd-ic .ofr-gi { width: 26px; height: 26px; }
  .ofd-streak .ofd-ic { background: linear-gradient(160deg, #ffe08a, #ff9a1f 55%, #ff4d00); }
  .ofd-b.ready .ofd-ic { animation: ofdPulse 1.2s ease-in-out infinite; }
  .ofd-t {
    margin-top: -8px; min-width: 44px; padding: 3px 6px; border-radius: 8px; text-align: center;
    font: 800 10.5px/1 var(--f-hd); letter-spacing: .02em; color: #fff; white-space: nowrap;
    background: #120c08; border: 1px solid rgba(255, 168, 56, .7); box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  }
  .ofd-b.ready .ofd-t { color: #120c08; background: #ffd23b; border-color: #ffd23b; }
  body:has(#modalBg.on) .ofr-dock, body.mnd-open .ofr-dock { display: none; }
}
@keyframes ofdPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .ofd-ic { animation: none !important; } }

/* ============================================================ ALIVE · АПГРЕЙДЕР · ЛАЙФ ПО «live upg ref.jpg», 26.10
   Владелец: «сделай лайф 1 в 1 как на скриншоте, всё живое»; потом —
   «меньше блёсток, кольцо по центру, соло оставить как было, блоки со
   скинами выше». Всё ниже — только для лайфа (#page-upgrade):
   соло выглядит как до 26.10 вечера.
   • фон сцены — оранжевые лучи из центра (assets/upg/live-bg.webp,
     Higgsfield по референсу);
   • .upa-hole — рама-портал вокруг кольца (assets/upg/live-portal.webp,
     Higgsfield по вырезке референса, пустой центр выровнен по середине
     картинки), медленно вращается; .upa-rim — огненное кольцо у края
     циферблата; .upa-fx — холст с редкими искрами (upgfx.js);
   • кольцо — толстые оранжевые сегменты (upgfx.skinRing), тёмный диск с
     «ШАНС / МНОЖИТЕЛЬ», без металлического безеля;
   • три колонки от 900 px ширины апгрейда; боковые блоки по высоте
     содержимого: ставка и цели — строка карточек по три (выше, чтобы скин
     помещался целиком), дальше листается вниз; «Сумма ставки» и «+5 … MAX»
     — одной строкой; «Вы получите» и «Коэффициент» — две плашки. */
.upa-hole, .upa-fx { display: none; }
#page-upgrade { overflow-x: clip; }
#page-upgrade .upa-hole, #page-upgrade .upa-fx {
  display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
  max-width: none; height: auto; z-index: -1;
}
/* Фон сцены лайфа — сам фон референса, привязанный к кольцу (.upa-hole);
   общий фон сцены (.upx::before) в лайфе не нужен. */
#page-upgrade .upx::before { display: none; }
#page-upgrade .upx-side { z-index: 1; }
/* Картинка 16:9; тёмный круг референса — в точке (53.9 %, 32.2 %), его
   край — сразу за сегментами кольца: ширина слоя — 7.36 диаметра кольца. */
#page-upgrade .upa-hole { width: 736%; aspect-ratio: 16 / 9; transform: translate(-53.9%, -32.2%);
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 53.9% 32.2%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 60% at 53.9% 32.2%, #000 62%, transparent 100%); }
#page-upgrade .upa-hole > i { position: absolute; inset: 0;
  background: url('/assets/upg/live-bg.webp') center / cover no-repeat; animation: uplBgBreath 14s ease-in-out infinite; }
/* Свечение за кольцом медленно разгорается и гаснет. */
#page-upgrade .upa-hole::after { content: ''; position: absolute; left: 53.9%; top: 32.2%; width: 22%; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 110, 20, .22) 30%, rgba(255, 110, 20, .07) 52%, transparent 70%);
  animation: uplGlow 6s ease-in-out infinite; }
@keyframes uplBgBreath { 50% { transform: scale(1.012); filter: brightness(1.08); } }
@keyframes uplGlow { 50% { opacity: .45; } }
#page-upgrade .upa-fx { width: min(300%, 100vw); aspect-ratio: 1; }
@media (max-width: 880px) {
  #page-upgrade .upa-hole > i { background-image: url('/assets/upg/live-bg-m.webp'); }
}
@media (prefers-reduced-motion: reduce) {
  #page-upgrade .upa-hole > i, #page-upgrade .upa-hole::after { animation: none; }
  #page-upgrade .upa-fx { display: none; }
}

/* ---- три колонки и раскладка блоков (от 900 px ширины апгрейда) ---- */
@container upx (min-width: 900px) and (max-width: 999px) {
  #page-upgrade .upx-main { grid-template-columns: minmax(0, 1fr) 272px minmax(0, 1fr); gap: 12px; }
  #page-upgrade .upx-in { grid-column: 1; }
  #page-upgrade .upx-core { grid-column: 2; width: auto; justify-self: stretch; }
  #page-upgrade .upx-out { grid-column: 3; }
  #page-upgrade .upx-side { padding: 14px; }
  #page-upgrade .upx-core .upa-dial { width: 200px; height: 200px; margin: 22px auto; }
}
@container upx (min-width: 900px) {
  #page-upgrade .upx-main { grid-template-rows: auto auto auto auto minmax(0, 1fr); align-items: start; }
  #page-upgrade .upx-in { grid-row: 1 / 5; }
  #page-upgrade .upx-out { grid-row: 1 / 5; }
  #page-upgrade .upx-core { grid-row: 1 / 6; }
  #page-upgrade .upx-side { background: linear-gradient(180deg, rgba(18, 18, 24, .88), rgba(10, 10, 14, .92)); }
  #page-upgrade #inBody.upx-cards, #page-upgrade #targetGrid.upx-tgts {
    height: 168px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 168px;
  }
  /* Скин — крупно, почти во всю карточку, как на референсе. */
  #page-upgrade :is(#inBody, #targetGrid) > .upx-card:not(.coins) .upx-card-art { left: 2px; right: 2px; top: 22px; bottom: 34px; }
  #page-upgrade :is(#inBody, #targetGrid) > .upx-card:not(.coins) .upx-card-art img { transform: scale(1.18); }
  #page-upgrade.upg-money :is(#inBody, #targetGrid) { height: 168px; }
  #page-upgrade #targetGrid.upx-tgts:has(> .up-empty) { height: auto; min-height: 168px; }
  /* Таблица лайфа — все столбцы, как на референсе (множитель «x1.72»). */
  #page-upgrade .upl-live { --upl-cols: 34px minmax(104px, 1.1fr) minmax(120px, 1.35fr) minmax(70px, .7fr) minmax(44px, .45fr) minmax(54px, .5fr) minmax(100px, .95fr) 60px; }
  #page-upgrade .upl-row > .upl-x { display: revert; }
  /* сумма — одной строкой */
  #page-upgrade .upx-sum-row { flex-wrap: nowrap; }
  #page-upgrade .upx-amt { flex: 1 1 auto; flex-basis: auto; }
  #page-upgrade .upx-adds { flex: none; display: flex; gap: 5px; }
  #page-upgrade .upx-adds button { width: 36px; min-width: 0; padding: 0; font-size: 12px; }
  #page-upgrade .upx-adds button[data-add="max"] { width: 42px; }
  /* две плашки рядом */
  #page-upgrade .upx-stats { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto; column-gap: 12px; }
  #page-upgrade .upx-stats::before { display: none; }
  #page-upgrade .upx-stat {
    display: grid; align-content: center; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--upx-line); background: rgba(8, 8, 11, .6);
  }
  #page-upgrade .upx-stat > span {
    grid-row: auto; grid-column: auto; justify-self: start; align-self: auto;
    font: 500 var(--fs-label)/1.2 var(--f-ui); color: #a2a2b2;
  }
  #page-upgrade .upx-stat > b {
    grid-row: auto; grid-column: auto; justify-self: start; padding: 0; color: #fff; font: 700 21px/1 var(--f-hd);
  }
}

/* ---- кольцо лайфа ---- */
#page-upgrade .upa-bezel { display: none; }
#page-upgrade .upx-core .upa-disc {
  width: 68%; height: 68%;
  background: radial-gradient(circle at 50% 40%, #16161d, #08080b 72%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .95), 0 0 0 1.5px rgba(255, 122, 24, .5), 0 0 14px rgba(255, 106, 0, .25);
}
#page-upgrade .upx-core .upa-halo { width: 150%; height: 150%;
  background: radial-gradient(circle, rgba(255, 106, 0, .16) 0, rgba(255, 106, 0, .05) 36%, transparent 60%); }
.r-gaps { display: none; }
#page-upgrade .ring .r-gaps { display: inline; }
#page-upgrade .ring .r-base { stroke: rgba(255, 106, 0, .08); stroke-width: 22px; }
#page-upgrade .ring .r-track { stroke: #3e1a0a; stroke-width: 22px; stroke-dasharray: var(--seg); }
#page-upgrade .ring .r-d99, #page-upgrade .ring .r-d78 { opacity: 0; }
#page-upgrade .ring .r-d104 { stroke: rgba(255, 138, 42, .4); stroke-dasharray: none; }
#page-upgrade .ring .r-zone, #page-upgrade .ring .r-zone-glow { stroke: url(#rzLive); }
#page-upgrade .upx-core .upa-dial .r-zone, #page-upgrade .upx-core .upa-dial .r-zone-glow,
#page-upgrade .upx-core .upa-dial .r-zone-bonus, #page-upgrade .upx-core .upa-dial .r-zone-bonus-glow { stroke-width: 22px; }
#page-upgrade .ring .r-zone-glow { opacity: .45; }
/* Центр: «ШАНС / 58% / МНОЖИТЕЛЬ / 1.72» */
#page-upgrade .ring:not(.is-empty) .ring-sub { font-size: 0; }
#page-upgrade .ring:not(.is-empty) .ring-sub::before {
  content: 'Шанс'; font: 600 11px/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #a8a8b8;
}
#page-upgrade .ring .ring-sub { margin-bottom: 6px; }
#page-upgrade .ring .ring-val { font: 800 34px/1 var(--f-hd); color: #fff; letter-spacing: -.01em; }
#page-upgrade .ring .ring-note:not(:empty) { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 10px;
  font: 700 17px/1 var(--f-hd); color: #fff; }
#page-upgrade .ring .ring-note:not(:empty)::before {
  content: 'Множитель'; font: 600 11px/1 var(--f-hd); letter-spacing: .12em; text-transform: uppercase; color: #a8a8b8;
}

/* ============================================================ ЛАЙФ · ПУСТОЙ РАУНД «СТАВОК ПОКА НЕТ», 26.10
   Как у skinhole: большой тёмный блок, в нём в невесомости плавают три
   скина (upgradelive.emptyHTML) — каждый по своей траектории и со своим
   периодом, под ним тень, которая «дышит» вместе с высотой. */
.upl-void { position: relative; overflow: hidden; display: grid; justify-items: center; align-content: end; gap: 6px;
  min-height: 300px; padding: 0 16px 18px; border-radius: 12px; text-align: center;
  background: radial-gradient(ellipse 60% 70% at 50% 38%, rgba(255, 122, 24, .06), transparent 70%), rgba(8, 8, 11, .55); }
.upl-void::before, .upl-void::after { content: ''; position: absolute; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 24, .55), transparent); }
.upl-void::before { left: 58%; width: 220px; top: 34px; }
.upl-void::after { left: 10%; width: 260px; bottom: 70px; opacity: .6; }
.upl-void-sky { position: absolute; inset: 0 0 86px; pointer-events: none; }
.upl-fl { position: absolute; top: 18%; width: clamp(130px, 17vw, 210px); aspect-ratio: 4 / 3; translate: -50% 0; }
.upl-fl.f0 { left: 26%; }
.upl-fl.f1 { left: 50%; top: 6%; width: clamp(150px, 20vw, 250px); }
.upl-fl.f2 { left: 74%; top: 16%; }
.upl-fl-in { position: absolute; inset: 0; display: block; animation: uplFloatA 9s ease-in-out infinite; }
.upl-fl.f1 .upl-fl-in { animation: uplFloatB 11s ease-in-out infinite; }
.upl-fl.f2 .upl-fl-in { animation: uplFloatC 13s ease-in-out infinite; }
.upl-fl-in img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px color-mix(in srgb, var(--rc, #ff7a18) 35%, transparent)); }
.upl-fl > i { position: absolute; left: 18%; right: 18%; bottom: -16%; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .65), transparent 70%); animation: uplShadow 9s ease-in-out infinite; }
.upl-fl.f1 > i { animation-duration: 11s; }
.upl-fl.f2 > i { animation-duration: 13s; }
@keyframes uplFloatA {
  0%, 100% { transform: translate(0, 0) rotate(-14deg); }
  25% { transform: translate(10px, -16px) rotate(-9deg); }
  50% { transform: translate(-4px, -26px) rotate(-16deg); }
  75% { transform: translate(-12px, -10px) rotate(-11deg); }
}
@keyframes uplFloatB {
  0%, 100% { transform: translate(0, 0) rotate(6deg); }
  30% { transform: translate(-12px, -20px) rotate(10deg); }
  60% { transform: translate(8px, -30px) rotate(3deg); }
  80% { transform: translate(12px, -12px) rotate(8deg); }
}
@keyframes uplFloatC {
  0%, 100% { transform: translate(0, 0) rotate(24deg); }
  35% { transform: translate(12px, -22px) rotate(30deg); }
  65% { transform: translate(-10px, -14px) rotate(20deg); }
}
@keyframes uplShadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.72); opacity: .5; } }
.upl-void-tx { position: relative; display: grid; gap: 6px; justify-items: center; }
.upl-void-tx > b { font: 800 22px/1.1 var(--f-hd); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.upl-void-tx > p { margin: 0; max-width: 520px; font: 500 var(--fs-label)/1.45 var(--f-ui); color: #a2a2b2; }
.upl-void > .upl-empty-last { position: relative; }
.upl-void > .upl-empty-last:empty { display: none; }
@media (max-width: 880px) {
  .upl-void { min-height: 250px; }
  .upl-fl { width: 30vw; top: 20%; }
  .upl-fl.f1 { width: 36vw; }
  .upl-void-tx > b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .upl-fl-in, .upl-fl > i { animation: none; } }

/* ============================================================ Подвал · компьютер, 26.10
   Владелец: правовые ссылки — одной строкой, колонки разделов — на всю
   ширину подвала (раньше теснились справа в 960 px). */
@media (min-width: 881px) {
  .ftr-cols { flex: 1 1 0; max-width: none; margin-left: clamp(24px, 6vw, 120px);
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; justify-items: start; }
  .fb-links { flex: 0 1 auto; flex-wrap: nowrap; justify-content: center; row-gap: 0; }
  .fb-links a { padding-top: 0; padding-bottom: 0; }
}

/* ============================================================ ALIVE · ЛЕНТА КЕЙСА В РАМКЕ, 27.10
   Владелец по «case open ref.png»: «в таком стиле оформи полосу открытия
   (рамку), для 3, 4, 5 кейсов — вертикально; видна половина верхнего
   скина, выпавший и половина нижнего; вёрстка не должна скакать».
   • .rl-frame — рамка Higgsfield (assets/reel/frame.webp: металл с
     оранжевым кантом и срезанными углами) девятью кусками border-image:
     одна картинка и на барабан, и на широкую полосу. Срез 64 px из 376 —
     угол со скосом; лента рамки в картинке ~50 px, поэтому ширина
     border-image в 1.28 раза больше видимой толщины --fr.
   • .rl-arrow / .rl-mark > b — стрелка-засечка с той же картинки
     (assets/reel/marker.webp): на боках барабана и сверху/снизу полосы.
   • Барабан (.rl.vert, case.js playReels): окно — две ячейки (--viewh),
     ширина --drumw и толщина рамки --fr ставятся из JS по ширине сцены, так
     что пять барабанов входят в ряд, а высота с номером — в сцену 320 px. */
.rl-frame { display: none; }
.rl.vert .rl-frame, .rl.horiz:not(.rows) .rl-frame {
  display: block; position: absolute; inset: 0; z-index: 8; pointer-events: none; box-sizing: border-box;
  border: calc(var(--fr, 16px) * 1.28) solid transparent;
  border-image: url('/assets/reel/frame.webp') 64 stretch;
  filter: drop-shadow(0 0 6px rgba(255, 106, 0, .35));
  transition: filter .45s;
}
.rl-wrap.stopped .rl-frame { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--win, #ff7a18) 70%, transparent)); }

/* ---- барабаны: 3–5 кейсов ---- */
.rl.vert { flex-direction: row; justify-content: center; align-items: flex-start; gap: var(--gap, 18px); padding-top: 15px; perspective: none; }
.rl.vert .rl-wrap.v {
  flex: 0 0 var(--drumw); width: var(--drumw); min-width: 0; padding: var(--fr); border: 0; border-radius: 0;
  background: radial-gradient(120% 70% at 50% 50%, #131527, #07070c 82%);
  box-shadow: 0 24px 40px -22px #000;
}
.rl.vert .rl-wrap.v.spin { animation: none; }
.rl.vert .rl-wrap.stopped { border: 0; box-shadow: 0 24px 44px -20px var(--win, #ff7a18); }
.rl.vert .rl-port { height: var(--viewh); border-radius: 3px; background: #07070c; box-shadow: inset 0 0 0 1px #000; }
.rl.vert .rl-track { top: 0; flex-direction: column; gap: 0; width: 100%; }
.rl.vert .rl-cell { width: 100%; height: var(--cellh); padding: 5px 6px; gap: 0; }
.rl.vert .rl-cell::before {
  content: ''; position: absolute; inset: 4px 4px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--rc) 22%, transparent);
  background: radial-gradient(110% 95% at 50% 100%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 72%),
              linear-gradient(180deg, #151730, #0b0c18);
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.rl.vert .rl-cell.hit::before {
  border-color: var(--rc);
  background: radial-gradient(110% 100% at 50% 60%, color-mix(in srgb, var(--rc) 72%, transparent), transparent 78%),
              linear-gradient(180deg, color-mix(in srgb, var(--rc) 30%, #12142a), #0b0c18);
  box-shadow: 0 0 18px -2px var(--rc), inset 0 0 18px -6px var(--rc);
}
.rl.vert .rl-glow, .rl.vert .rl-bar, .rl.vert .rl-cap, .rl.vert .rl-glass { display: none; }
.rl.vert .rl-art { width: 92%; height: calc(var(--cellh) * .8); }
.rl.vert .rl-cell.hit .rl-art { width: 100%; height: calc(var(--cellh) * .9); }
.rl.vert .rl-fade {
  background: linear-gradient(180deg, rgba(7, 7, 12, .8), rgba(7, 7, 12, .2) 18%, transparent 25%,
              transparent 75%, rgba(7, 7, 12, .2) 82%, rgba(7, 7, 12, .8));
}
.rl.vert .rl-wrap.stopped .rl-cell:not(.hit):not(.near) { opacity: .3; }
.rl.vert .rl-wrap.stopped .rl-cell.near:not(.hit) { opacity: .75; }
/* Линия выигрыша через окно с треугольником по центру, как в образце. */
.rl-line {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 6; height: 2px; transform: translateY(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--win, #ff7a18) 10%, var(--win, #ff7a18) 90%, transparent);
  box-shadow: 0 0 10px var(--win, #ff7a18), 0 0 2px var(--win, #ff7a18); opacity: .9; transition: background .4s, box-shadow .4s;
}
.rl-line::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--win, #ff7a18);
  filter: drop-shadow(0 0 4px var(--win, #ff7a18));
}
/* Стрелки на боках рамки — по линии выигрыша. */
.rl-arrow {
  position: absolute; top: calc(var(--fr) + var(--viewh) / 2); z-index: 9; width: calc(var(--fr) * 1.7); aspect-ratio: 42 / 116;
  background: url('/assets/reel/marker.webp') center / contain no-repeat; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 122, 24, .8)); transition: filter .4s;
}
.rl-arrow.l { left: calc(var(--fr) * -.45); transform: translateY(-50%); }
.rl-arrow.r { right: calc(var(--fr) * -.45); transform: translateY(-50%) scaleX(-1); }
.rl-wrap.stopped .rl-arrow { filter: drop-shadow(0 0 8px var(--win, #ff7a18)); }
/* Номер кейса — кружок на верхней кромке рамки. */
.rl.vert .rl-num {
  position: absolute; left: 50%; top: -14px; z-index: 10; margin: 0; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ff9a2e;
  background: radial-gradient(circle at 50% 35%, #2a1606, #0d0703); color: #ffc070;
  font: 800 var(--fs-label)/1 var(--f-hd); box-shadow: 0 0 14px -2px rgba(255, 122, 24, .85);
}
.rl.vert .rl-num::after { display: none; }
.rl.vert .rl-burst { width: 20px; height: 20px; }
@media (min-width: 881px) {
  #page-case .co-stage:has(> .rl.vert) { align-content: end; }
}
@media (max-width: 880px) {
  .rl.vert { padding-top: 12px; }
  .rl.vert .rl-num { top: -11px; width: 22px; height: 22px; border-width: 1.5px; font-size: var(--fs-micro); }
  .rl.vert .rl-cell { padding: 3px 3px; }
  .rl.vert .rl-cell::before { inset: 2px; border-radius: 4px; }
  .rl-line::after { border-left-width: 4px; border-right-width: 4px; border-top-width: 4px; }
}

/* ---- полоса: 1–2 кейса ---- */
.rl.horiz:not(.rows) .rl-wrap.h {
  --fr: 16px;
  padding: calc(var(--fr) + 2px) calc(var(--fr) + 4px); border: 0; border-radius: 0;
  background: radial-gradient(120% 90% at 50% 50%, #131527, #07070c 82%);
  box-shadow: 0 24px 44px -22px #000;
}
.rl.horiz:not(.rows) .rl-rivets { display: none; }
.rl.horiz:not(.rows) .rl-wrap.stopped { border: 0; box-shadow: 0 24px 46px -22px var(--win, #ff7a18); }
.rl.horiz:not(.rows) .rl-port { border-radius: 3px; background: #07070c; box-shadow: inset 0 0 0 1px #000; }
.rl.horiz:not(.rows) .rl-cell { border-radius: 8px; }
.rl.horiz:not(.rows) .rl-cell::before {
  content: ''; position: absolute; inset: 0; border-radius: 8px; z-index: -1;
  border: 1px solid color-mix(in srgb, var(--rc) 20%, transparent);
  background: radial-gradient(110% 95% at 50% 100%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 72%),
              linear-gradient(180deg, #151730, #0b0c18);
}
.rl.horiz:not(.rows) .rl-cell { isolation: isolate; }
.rl.horiz:not(.rows) .rl-cell.hit::before {
  border-color: var(--rc);
  background: radial-gradient(110% 100% at 50% 60%, color-mix(in srgb, var(--rc) 65%, transparent), transparent 78%),
              linear-gradient(180deg, color-mix(in srgb, var(--rc) 28%, #12142a), #0b0c18);
  box-shadow: 0 0 18px -2px var(--rc);
}
/* Метка: стрелки с рамки сверху и снизу, повёрнутые к ленте. */
.rl.horiz:not(.rows) .rl-mark { top: 4px; bottom: 4px; z-index: 9; }
.rl.horiz:not(.rows) .rl-mark > b {
  width: 22px; height: 61px; border: 0; background: url('/assets/reel/marker.webp') center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--mc));
}
.rl.horiz:not(.rows) .rl-mark > b:first-child { top: -26px; transform: translateX(-50%) rotate(90deg); }
.rl.horiz:not(.rows) .rl-mark > b:last-child { bottom: -26px; transform: translateX(-50%) rotate(-90deg); }
@media (max-width: 880px) {
  /* 5 + 150 + 5 = 160 — высота сцены в покое (см. VERT_CELL_M в case.js). */
  .rl.horiz:not(.rows) .rl-wrap.h { --fr: 8px; padding: 5px calc(var(--fr) + 2px); }
  .rl.horiz:not(.rows) .rl-wrap.h .rl-port { background: #07070c; }
  .rl.horiz:not(.rows) .rl-mark > b { display: block; width: 16px; height: 44px; }
  .rl.horiz:not(.rows) .rl-mark > b:first-child { top: -18px; }
  .rl.horiz:not(.rows) .rl-mark > b:last-child { bottom: -18px; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-frame, .rl-arrow, .rl-line { transition: none; }
}
/* ---- конец секции «ЛЕНТА КЕЙСА В РАМКЕ» ---- */

/* ============ ALIVE · ИКОНКИ HIGGSFIELD, 27.10
   Владелец: часть значков «непонятные» — перерисованы в нашем стиле
   (глянцевые оранжевые, /assets/icons/*.webp, 128×128). Глифы и эмодзи
   заменены картинками; здесь — только размеры картинок в прежних коробках
   и фон плиток, на котором оранжевый значок иначе бы потерялся. Коробки
   вокруг значков своих размеров не меняют. */
img[src^="/assets/icons/"] { -webkit-user-drag: none; user-select: none; }

/* Battle Pass: таймер сезона, замок, галочки забранного, быстрые задания */
.bpp-timer-ic > img { width: 26px; height: 26px; display: block; }
.bpp-card .bpp-lock > img { width: 14px; height: 14px; display: block; max-width: none; max-height: none; }
.bpp-ok { background: none; box-shadow: none; }
.bpp-ok > img, .bpp-lv-b .bpp-ok > img {
  width: 100%; height: 100%; max-width: none; max-height: none; display: block;
  filter: drop-shadow(0 0 6px rgba(255, 122, 24, .7));
}
.bps-mk { display: inline-grid; place-items: center; width: 1em; height: 1em; vertical-align: -.14em; }
.bps-mk > img { width: 100%; height: 100%; display: block; }
.bps-mk.off { box-sizing: border-box; width: .86em; height: .86em; border: 1.5px solid currentColor; border-radius: 50%; opacity: .55; }

/* Шапка: «3 дня подряд» — огонь на тёмной плитке с оранжевой рамкой
   (на оранжевой глянцевый огонь сливался), кэшбэк — свой значок. */
.tb-streak .tbo-ic {
  background: radial-gradient(circle at 50% 35%, #2a170a, #0e0c10);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 40, .55), 0 0 12px rgba(255, 122, 0, .35);
}
.tbo-ic .ofr-gi-img { width: 20px; height: 20px; display: block; }
@media (max-width: 880px) {
  .ofd-streak .ofd-ic { background: radial-gradient(circle at 50% 30%, #3a1f0a, #120d0e 75%); }
  .ofd-ic .ofr-gi-img { width: 34px; height: 34px; display: block; }
}

/* Окно пополнения: карта, крипта, скины */
/* поля подогнаны под ширину прежних глифов (14/12/12px) — кнопки не шире */
.dpa-ways > .dep-seg-b > .dpa-wi { width: 16px; height: 16px; margin: -1px -1px; flex: none; display: block; }
.dpa-ways > .dep-seg-b > .dpa-wi-crypto { margin: -1px -2px; }
.dpa-ways > .dep-seg-b > .dpa-wi-skins { width: 20px; height: 20px; margin: -3px -4px; }
.dpa-ways > .dep-seg-b:not(.on) > .dpa-wi { opacity: .7; filter: saturate(.6); }

/* Кейс: «Открыть» — ключ, «Открыть быстро» — двойная стрелка */
.co-bi { width: 24px; height: 24px; margin: -4px 0; flex: none; display: block; }
/* блочный flex: картинка не сдвигает базовую линию подписи */
.co-open > span:has(> .co-bi) { display: flex; justify-content: center; }
.co-open .co-bi { filter: drop-shadow(0 1px 1.5px rgba(70, 25, 0, .75)); }
.co-fast .co-bi { width: 20px; height: 20px; margin: -2px -3.5px -2px 0; }
.co-list-ic > img { width: 22px; height: 22px; display: block; }
.co-win-btns .co-wb-ic { width: 22px; height: 22px; margin: -4px 0; flex: none; }
.case-opens i > img, .cs-card-opens i > img { width: 12px; height: 12px; display: block; }

/* Мини-карточка игрока */
.mpa-mark > img { width: 18px; height: 18px; display: block; }
.mpa-crown > img { width: 1.05em; height: 1.05em; display: block; }
.mpa-rank > i > img { width: 16px; height: 16px; display: block; margin: -2px 0; }

/* Апгрейд: молния быстрой прокрутки — тусклая выключенной, яркая включённой */
.preset-fast > img { width: 18px; height: 18px; display: block; opacity: .7; filter: grayscale(.45); transition: opacity .2s, filter .2s; }
.preset-fast:hover > img { opacity: .85; filter: grayscale(.2); }
.preset-fast.on > img { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 168, 56, .9)); }
@media (max-width: 880px) { .preset-fast > img { width: 20px; height: 20px; } }
.upx-sw-ic { width: 18px; height: 18px; margin: 0 -4px 0 0; flex: none; }

/* Поиск по кейсам и инвентарю */
.cs-search > span > img, .pra-search > span > img { width: 16px; height: 16px; display: block; opacity: .8; }

/* Инвентарь: отметка на вывод. Отмеченная — тёмный круг с оранжевой рамкой,
   иначе оранжевая галочка тонула в оранжевой заливке. */
.pra-it-mk > img { width: 16px; height: 16px; display: block; pointer-events: none; }
.pra-it.on .pra-it-mk { background: rgba(8, 8, 10, .82); }
.pra-it.on .pra-it-mk > img { width: 22px; height: 22px; }

/* Шторка на телефоне: «Боевой пропуск» */
.mnd-bp-ic > img { width: 24px; height: 24px; margin: 0 -2px; display: block; }

/* Plinko «Запуск» и Spaceball «Ударить»: значок в тёмной лунке кнопки */
.pk-go-ic:has(> img), .sb-go-ic:has(> img) { background: rgba(40, 14, 0, .42); }
.pk-go-ic > img { width: 28px; height: 28px; display: block; }
.sb-go-ic > img { width: 30px; height: 30px; display: block; }
@container sb (max-width: 1239px) { .sb-go-ic > img { width: 26px; height: 26px; } }
.sb-go.busy .sb-go-ic > img { animation: sbGoSpin .9s linear infinite; }
/* ярлыки усиления и горячей вагонетки (история, всплывашки, правила) */
.pk-emo { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* Лента дропа: «Все» и «Редкие». На оранжевой активной вкладке значку —
   тёмный ореол, чтобы он читался. */
.cs-feed-tabs .cs-ft-ic { width: 18px; height: 18px; margin: -1px; flex: none; display: block; }
.cs-feed-tabs button:not(.on) .cs-ft-ic { opacity: .75; }
.cs-feed-tabs button.on .cs-ft-ic { filter: drop-shadow(0 0 1px rgba(24, 10, 0, .95)) drop-shadow(0 1px 2px rgba(24, 10, 0, .7)); }

/* FAQ, ответственная игра, о проекте, контакты */
.sta-ic > .sta-png { width: 26px; height: 26px; display: block; }
.sta-cat > span > .sta-png { width: 24px; height: 24px; display: block; }
.sta-cat:not(.on) > span > .sta-png { opacity: .7; filter: saturate(.55); }

/* Колесо: «Призы в барабане» */
.wh-prizes h4 .wh-h-ic { width: 1.5em; height: 1.5em; margin: -.3em .4em -.3em 0; vertical-align: middle; }
.whp .wh-prizes h4 .wh-h-ic { margin-right: 0; }
/* ---- конец секции «ИКОНКИ HIGGSFIELD» ---- */

/* ============================================================ ALIVE · ПРОГРЕСС В МЕНЮ · СТРЕЛКИ СКЛАДОК 28.10

   Стрелка складки («Задания пропуска», «Быстрый старт», «Пополнения
   сезона») — квадрат 10 px с двумя рамками, повёрнутый на 45°: его угол
   выходит за свою коробку на 2 с лишним px. В «Прогрессе» у складки нет
   полей по бокам, а overflow: hidden у .bp-side срезал острие стрелки
   (замер: правый край 210.4 при крае блока 208). Отступ 4 px держит
   острие внутри блока в обоих положениях. */

.bps-chev { margin-right: 4px; }

/* ============================================================ ALIVE · МЕНЮ · ТОЧКА НЕЗАВЕРШЁННОЙ ИГРЫ 28.10

   Просьба владельца 28.10: в левом меню у Минного поля, Plinko, Milky Way
   и Space Ball горит точка, пока у игрока есть незавершённая игра (раунд
   не забран, у Plinko — не сброшены бесплатные ядра WILD), как на
   телефоне (.mnd-dot). Раньше точку на компьютере гасило правило
   «светлячки убраны» вместе с зелёными «раунды идут»; зелёные так и
   остаются выключенными. Вид — как на телефоне: 8 px, оранжевая, со
   свечением, у правого края пункта. */

.nav-btn .nav-dot {
  display: inline-block !important; flex: none; width: 8px; height: 8px; margin-left: auto;
  border-radius: 50%; background: var(--al-or2, #ff5c00); box-shadow: 0 0 8px var(--al-or2, #ff5c00);
}

/* ============================================================ ALIVE · «КАК ИГРАТЬ?» КАРТИНКОЙ (28.10)

   Окно «Как играть?» Ракеты, Мин, Plinko, Milky Way и «Честная игра» Space
   Ball — картинка макета владельца целиком (frontend/assets/howto/), без
   рамки и фона окна: рамка нарисована в самой картинке. Кнопки макета —
   прозрачные зоны .howto-hit поверх нарисованных (howto.js, openHowtoPic).
   Ширина — не больше самой картинки, окна и высоты окна в пересчёте по
   пропорции, чтобы картинка помещалась целиком. */
.modal:has(> .howto-pic) {
  width: auto; max-width: none; max-height: none; padding: 0; overflow: visible;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.howto-pic {
  width: min(1280px, calc(100vw - 40px), calc((100vh - 40px) * var(--ar)));
  display: grid; gap: 10px;
}
.howto-pic-art { position: relative; line-height: 0; }
/* Поля картинки за нарисованной рамкой — размытый снимок сайта; без
   растушёвки они читались бы вторым прямоугольником вокруг окна. */
.howto-pic-art > img {
  display: block; width: 100%; height: auto; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent),
    linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent),
    linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
.howto-hit {
  position: absolute; z-index: 1; display: block; padding: 0; margin: 0; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; transition: background .15s, box-shadow .15s;
}
.howto-hit:hover { background: rgba(255, 168, 56, .08); box-shadow: 0 0 0 1px rgba(255, 168, 56, .35); }
.howto-hit:focus-visible { outline: 2px solid #ffa838; outline-offset: 2px; }
/* Живые данные под картинкой (сиды идущей серии Space Ball). */
.howto-pic-after {
  padding: 12px 16px; border-radius: 12px; line-height: 1.4;
  background: rgba(12, 12, 17, .94); border: 1px solid rgba(255, 122, 24, .25);
}
.howto-pic-after dl { margin: 0; }

/* Телефон: вертикальная картинка макета (pic.mobile), обрезанная по рамке.
   Не нижняя шторка, как прочие окна телефона, а сама картинка по центру,
   почти во всю ширину; длиннее экрана — окно листается. Края не
   растушёвываются: рамка нарисована у самого края картинки. */
.modal-bg:has(> #modal > .howto-pic.tall) {
  padding: 10px; place-items: safe center; overflow-y: auto; overscroll-behavior: contain;
}
.modal:has(> .howto-pic.tall) {
  width: auto; max-width: none; max-height: none; padding: 0; overflow: visible;
  background: none; border: 0; border-radius: 0; box-shadow: none; animation: fade .2s ease;
}
.modal:has(> .howto-pic.tall)::before { content: none; display: none; }
.howto-pic.tall { width: min(520px, calc(100vw - 20px), 100%); }
.howto-pic.tall .howto-pic-art > img {
  -webkit-mask-image: none; mask-image: none; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
}
/* Окна телефона — во весь экран (секция «Телефон · окна во весь экран»):
   картинка «Как играть?» — по центру этого окна, по вертикали тоже, пока
   влезает; длиннее экрана — окно листается. */
@media (max-width: 880px) {
  #modalBg.modal-bg:has(> #modal > .howto-pic.tall) { padding: 0; }
  #modalBg > #modal.modal:has(> .howto-pic.tall) {
    display: grid; place-items: safe center; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px
      calc(10px + env(safe-area-inset-bottom, 0px));
    background: none;
  }
}
/* ============================================================ ALIVE · АПГРЕЙДЕР · ОДИН МАКЕТ LIVE / SOLO, 27.10
   Владелец: «сделай 1 в 1 версию live и solo по «upgrader ref.jpg», всё с
   анимациями, живо и красиво: возле циферблата летают сундуки и скины, как
   в невесомости, и будто их затягивает чёрная дыра; телефон — по
   «upgrader mob ref.jpg»; ставок в лайве нет — скины летят слева направо и
   по центру апгрейдятся». Старая соло-разметка убрана: оба режима — .upx.
   • сцена: фон Higgsfield по референсу (assets/upg/fx/bg.webp, телефон —
     bg-m.webp) привязан к циферблату — тёмная дыра картинки под ним; безель
     (fx/bezel.webp) поверх кольца; холст невесомости (upgfx.js) — сундуки,
     гильзы, шестерня, скины;
   • центр: «ШАНС УСПЕХА / 52.63% / x1.90», стрелка сверху — с безеля,
     засечка снизу — .upa-tip;
   • кнопки: ряд множителей без подписи, ряд «Шанс успеха» с «СВОЙ %» и
     шестерёнкой, «Создать ставку» с подписью (телефон);
   • лайф-раунды — карточками (.upl-card), пустой раунд — конвейер скинов
     (.upl-void / .upl-fly) с значком апгрейда по центру (.upl-up);
   • телефон: карточки «Ваш скин» / «Вы получите» (.upm-card) по бокам
     циферблата, полоса инвентаря (#inBody) под кнопкой, блок целей скрыт. */

.upx-core { --dial: 300px; }
.upx-main { --core: 380px; }

/* ---- верхняя строка: LIVE / SOLO, под ним отсчёт; звук и «Как играть?» справа ---- */
.upx-top { grid-template-rows: auto auto; row-gap: 6px; }
.upx-top > .upl-mode { grid-column: 2; grid-row: 1; }
.upx-top > .upx-tools { grid-column: 3; grid-row: 1; }
.upx-top > .upl-clock {
  grid-column: 2; grid-row: 2; justify-self: center; display: grid; justify-items: center; gap: 4px; min-height: 18px;
  position: static; inset: auto; transform: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #d8d8e2; white-space: nowrap;
}
.upx-top > .upl-clock b { font: 800 26px/1 var(--f-hd); letter-spacing: .02em; color: #ff9a2e; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 122, 24, .55); }
.upx-top > .upl-clock.hot b { color: #ff4d5e; animation: raPulse 1s ease-in-out infinite; }
.upx-top > .upl-clock.idle { font: 500 var(--fs-label)/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: #a2a2b2; }
.upx-top > .upl-clock[hidden] { display: none; }

/* ---- сцена вокруг циферблата ---- */
.upx-core { position: relative; gap: 10px; }
.upx-ringrow { justify-content: center; gap: 8px; }
.upx-core .upa-dial { width: var(--dial); height: var(--dial); margin: 6px auto 16px; }
/* Сцена (Higgsfield по макету): видео fx/scene.mp4 — сундуки макета плывут
   в невесомости вокруг портала (владелец 28.10: «как на макете, только в
   невесомости»), под ним кадр-постер fx/bg.webp. 16:9, чёрная дыра портала
   — в точке (50.3 %, 46.4 %); ширина слоя такая, что дыра чуть шире безеля.
   Видео вставляет upgfx.js двумя слоями и сшивает петлю перекрёстным
   затуханием (.upa-vid.on). */
#page-upgrade .upa-hole {
  width: calc(var(--dial) * 1.62); aspect-ratio: 16 / 9; transform: translate(-50.3%, -46.4%);
  -webkit-mask-image: radial-gradient(ellipse 50% 62% at 50.3% 46.4%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 62% at 50.3% 46.4%, #000 58%, transparent 100%);
}
#page-upgrade .upa-hole > i { background-image: url('/assets/upg/fx/bg.webp'); }
#page-upgrade .upa-hole::after { left: 50.3%; top: 46.4%; width: 44%; }
.upa-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s linear; pointer-events: none; }
.upa-vid.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .upa-vid { display: none; } }
/* Поле невесомости — круг вокруг циферблата, к краю тает: предметы не
   залетают под шапку сайта и не обрываются на границе холста. */
#page-upgrade .upa-fx { width: min(260%, 100vw); top: 56%;
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 40%, transparent 64%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 40%, transparent 64%); }
/* Безель Higgsfield поверх кольца; кольцо — внутри безеля. */
#page-upgrade .upa-bezel {
  display: block; position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; max-width: none; pointer-events: none;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .7));
  animation: upxBezel 7s ease-in-out infinite;
}
@keyframes upxBezel { 50% { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .7)) brightness(1.08); } }
.upx-core .upa-dial .ring { position: absolute; inset: 8%; width: auto; height: auto; }
.upx-core .upa-dial .ring > svg { width: 100%; height: 100%; display: block; }
.upx-core .upa-disc { width: 56%; height: 56%; }
#page-upgrade .upx-core .upa-halo { width: 170%; height: 170%; }
/* Засечка снизу — треугольник, как на референсе. */
.upa-tip {
  position: absolute; left: 50%; bottom: 1.5%; z-index: 4; width: 0; height: 0; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #ffb04a;
  filter: drop-shadow(0 0 6px rgba(255, 150, 40, .9)); pointer-events: none;
}
/* Центр: «ШАНС УСПЕХА / 52.63% / x1.90» */
#page-upgrade .ring:not(.is-empty) .ring-sub::before { content: 'Шанс успеха'; font-size: 10px; letter-spacing: .14em; color: #c8c8d4; }
#page-upgrade .ring .ring-val { font: 800 38px/1 var(--f-hd); color: #ff9a2e; letter-spacing: -.01em;
  text-shadow: 0 0 22px rgba(255, 122, 24, .45); }
#page-upgrade .ring.is-empty .ring-val { font-size: 15px; color: #d8d8e2; text-shadow: none; letter-spacing: 0; }
#page-upgrade .ring .ring-note:not(:empty) { margin-top: 6px; gap: 0; font: 700 18px/1 var(--f-hd); color: #fff; }
#page-upgrade .ring .ring-note:not(:empty)::before { content: none; }
@container upx (max-width: 1099px) { .upx-core { --dial: 260px; } }

/* ---- кнопки под циферблатом ---- */
.upx-pre { gap: 8px; }
.upx-prow { height: 42px; padding: 4px; }
.upx-prow.mu .upx-pk { display: none; }
.upx-prow.mu { padding: 4px; }
.upx-prow.ch { padding-left: 12px; }
.upx-pre .preset {
  max-width: none; height: 32px; border-radius: 7px; border-color: rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, #1c1c24, #121218); font-size: 13px;
}
.upx-pre .preset:hover { background: linear-gradient(180deg, #24242e, #15151c); }
.upx-pre .preset.on {
  border-color: #ff8a2a; color: #fff;
  background: linear-gradient(180deg, rgba(255, 122, 24, .5), rgba(255, 92, 0, .22));
  box-shadow: 0 0 14px rgba(255, 122, 24, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.upx-pre .preset-own { flex: 0 0 64px; }
.upx-pre .preset-own input::placeholder { letter-spacing: .02em; }
.upx-gear { width: 42px; height: 42px; }

/* «Создать ставку»: заголовок и подпись (потенциальный выигрыш — телефон). */
.upx-go { flex-wrap: wrap; row-gap: 2px; width: min(340px, 100%); height: auto; min-height: 50px; padding: 7px 22px; }
.upx-go-t { display: inline; }
.upx-go-s { flex: 1 1 100%; text-align: center; font: 600 11px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none;
  color: rgba(26, 11, 0, .78); }
.upx-go-s[hidden] { display: none; }
@media (min-width: 881px) { .upx-go-s { display: none; } }

/* ---- боковые блоки: по четыре карточки в ряд, две строки ---- */
@container upx (min-width: 900px) {
  .upx-main { grid-template-columns: minmax(0, 1fr) var(--core, 380px) minmax(0, 1fr); gap: 16px; }
  #page-upgrade #inBody.upx-cards, #page-upgrade #targetGrid.upx-tgts {
    height: 248px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 120px;
  }
  #page-upgrade :is(#inBody, #targetGrid) > .upx-card:not(.coins) .upx-card-art { top: 24px; bottom: 32px; }
  #page-upgrade.upg-money :is(#inBody, #targetGrid) { height: 248px; }
  #page-upgrade #targetGrid.upx-tgts:has(> .up-empty) { height: auto; min-height: 248px; }
}
@container upx (min-width: 900px) and (max-width: 1099px) { .upx-main { --core: 320px; } }
@container upx (min-width: 1300px) { .upx-main { --core: 420px; } }
/* Цена и название — чуть крупнее, как на референсе; шанс — под ценой: с
   четырёхзначными ценами в одну строку они не встают. */
:is(#inBody, #targetGrid) .upx-card-p { font-size: 11px; max-width: calc(100% - 22px); }
:is(#inBody, #targetGrid) .upx-card-ch { right: auto; left: 7px; top: 22px; max-width: 70%; font-size: 10px; color: #ffb04a; }
#page-upgrade :is(#inBody, #targetGrid) > .upx-card:not(.coins):has(> .upx-card-ch) .upx-card-art { top: 34px; }
:is(#inBody, #targetGrid) .upx-card-w { font-size: 10.5px; }
:is(#inBody, #targetGrid) .upx-card-n { font-size: 10.5px; font-weight: 700; }
/* Телефонные узлы на компьютере скрыты. */
.upm-card, .upx-msort, .upx-mq, .upx-mqrow, .upx-tab-n { display: none; }
.dd:has(> .upx-msort) { display: none; }

/* ---- лайф-раунды карточками ---- */
.upl-live { padding: 16px 18px 16px; }
.upl-hist i { width: auto; height: auto; background: none; font-size: 16px; line-height: 1; }
.upl-list {
  display: flex; gap: 12px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px; align-items: stretch;
  grid-auto-rows: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.upl-card {
  --rc: #ff8a2a; --cc: #ffd27a;
  position: relative; flex: 0 0 150px; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 10px 10px; border-radius: 12px; scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(22, 22, 29, .95), rgba(12, 12, 16, .98));
  box-shadow: 0 14px 30px -18px #000; transition: border-color .25s, box-shadow .25s, opacity .3s, transform .2s;
}
.upl-card.in { animation: raRow .3s ease both; }
.upl-card.me { border-color: rgba(255, 138, 42, .85); box-shadow: 0 0 0 1px rgba(255, 138, 42, .5), 0 0 24px rgba(255, 122, 24, .3); }
.upl-card.win { border-color: rgba(61, 220, 132, .7); box-shadow: 0 0 0 1px rgba(61, 220, 132, .35), 0 0 24px rgba(61, 220, 132, .25); }
.upl-card.lose { opacity: .62; }
.upl-card.lose:hover { opacity: .85; }
.upl-card.flash-win { animation: bblWon .9s ease-out both; }
.upl-card.flash-lose { animation: bblLost .9s ease-out both; }
.upl-ctop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.upl-card .upl-ava { flex: none; width: 34px; height: 34px; }
.upl-cwho { min-width: 0; display: grid; gap: 2px; }
.upl-cwho[data-uid] { cursor: pointer; }
.upl-cwho .upl-name { font: 700 var(--fs-label)/1.15 var(--f-hd); color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upl-card.me .upl-name, .upl-cwho[data-uid]:hover .upl-name { color: #ffa838; }
.upl-camt { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--f-hd); color: #ffd27a; white-space: nowrap; }
.upl-camt .coin { width: 12px; height: 12px; margin: 0; }
.upl-card .upl-me { position: absolute; right: 8px; top: 8px; z-index: 2; }
.upl-cart {
  position: relative; height: 78px; display: grid; place-items: center; border-radius: 9px; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 60%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 76%), #0d0d12;
}
.upl-cart > img, .upl-cart > svg { max-width: 88%; max-height: 66px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7)); }
.upl-cart .upl-coins { max-height: 58px; }
.upl-cart .upl-more { position: absolute; left: 5px; bottom: 5px; }
.upl-cart .upl-plus { position: absolute; left: 5px; top: 5px; }
/* Множитель — в нижнем правом углу: верхний занят картинкой цели. */
.upl-cart .upl-cx { position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; border-radius: 5px; font-style: normal;
  background: rgba(8, 8, 11, .75); border: 1px solid rgba(255, 255, 255, .1); font: 700 10px/1.2 var(--f-hd); color: #d8d8e2; }
.upl-card .upl-lvl { position: absolute; left: 30px; top: 30px; z-index: 2; min-width: 18px; height: 15px; padding: 0 3px;
  border-radius: 5px; background: #16161d; border-color: rgba(255, 255, 255, .2); font-size: 9px; }
.upl-ctgt {
  --rc: #ff8a2a;
  position: absolute; right: 8px; top: 50px; z-index: 2; width: 36px; height: 28px; display: grid; place-items: center; border-radius: 6px;
  background: color-mix(in srgb, var(--rc) 22%, #15151c); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
}
.upl-ctgt > img, .upl-ctgt > svg { max-width: 92%; max-height: 24px; object-fit: contain; }
.upl-ctgt.cash { --rc: #ffa838; }
.upl-cfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.upl-cch { font: 800 var(--fs-ui)/1 var(--f-hd); color: color-mix(in srgb, var(--cc) 85%, #fff); white-space: nowrap; }
.upl-card.win .upl-cch { color: #3ddc84; }
.upl-card.lose .upl-cch { color: #ff4d5e; }
.upl-crng { font: 600 var(--fs-micro)/1 var(--f-hd); color: #8a8a9a; white-space: nowrap; }
.upl-cbar { position: relative; height: 6px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.upl-cbar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ff6a12, #ffb04a);
  box-shadow: 0 0 10px rgba(255, 122, 24, .7); transition: width .4s; }
.upl-card.pending .upl-cbar > i::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: uplBarRun 1.6s linear infinite;
}
@keyframes uplBarRun { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.upl-card.win .upl-cbar > i { background: linear-gradient(90deg, #22b866, #7ce4ae); box-shadow: 0 0 10px rgba(61, 220, 132, .6); }
.upl-card.lose .upl-cbar > i { background: linear-gradient(90deg, #a52a38, #ff4d5e); box-shadow: none; }
.upl-cst {
  position: absolute; left: 8px; top: 50px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 5px;
  border-radius: 999px; background: rgba(8, 8, 11, .82); border: 1px solid rgba(255, 255, 255, .1);
  font: 700 10px/1 var(--f-hd); white-space: nowrap;
}
.upl-cst > svg { width: 14px; height: 14px; }
.upl-cst.pending { color: #ff9a2e; }
.upl-cst.pending > svg { animation: upxSpin 1.4s linear infinite; }
.upl-cst.win { color: #3ddc84; border-color: rgba(61, 220, 132, .4); }
.upl-cst.lose { color: #ff4d5e; border-color: rgba(255, 77, 94, .4); }

/* ---- пустой раунд: конвейер скинов с апгрейдом по центру ---- */
.upl-void {
  display: grid; justify-items: center; align-content: end; gap: 6px; width: 100%; min-height: 320px; padding: 0 16px 18px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .05); text-align: center;
  background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(255, 122, 24, .07), transparent 70%), rgba(6, 6, 9, .72);
}
.upl-void::before, .upl-void::after { content: none; }
.upl-lane { position: absolute; inset: 0 0 96px; overflow: hidden; pointer-events: none; }
.upl-lane-l, .upl-lane-r { position: absolute; height: 1px; pointer-events: none; opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 24, .7), transparent); animation: uplLane 6s ease-in-out infinite; }
.upl-lane-l { left: 8%; width: 24%; top: 62%; }
.upl-lane-r { right: 4%; width: 22%; top: 36%; animation-delay: -3s; }
@keyframes uplLane { 50% { opacity: .25; transform: translateX(14px); } }
.upl-flyers { position: absolute; inset: 0; }
.upl-fly { position: absolute; left: 0; top: 0; display: block; aspect-ratio: 4 / 3; will-change: transform; }
.upl-fly img, .upl-fly svg { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .75)) drop-shadow(0 0 14px color-mix(in srgb, var(--rc, #ff7a18) 30%, transparent)); }
.upl-fly.flash img, .upl-fly.flash svg { animation: uplFlyUp .7s ease-out; }
@keyframes uplFlyUp {
  0% { transform: scale(.7); filter: brightness(3) drop-shadow(0 0 24px var(--rc, #ff7a18)); }
  60% { transform: scale(1.12); filter: brightness(1.4) drop-shadow(0 0 22px var(--rc, #ff7a18)); }
  100% { transform: scale(1); }
}
.upl-up {
  position: absolute; left: 50%; top: 40%; width: 46px; height: 46px; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  pointer-events: none;
}
.upl-up img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 16px rgba(255, 122, 24, .9)); }
.upl-up.pop { animation: uplUpPop .9s ease-out both; }
@keyframes uplUpPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  60% { opacity: 1; transform: translate(-50%, -90%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(.8); }
}
.upl-void-tx > b { font-size: 20px; }
@media (prefers-reduced-motion: reduce) {
  .upl-lane-l, .upl-lane-r, .upl-fly.flash img, .upl-up.pop, .upl-card.pending .upl-cbar > i::after, .upa-bezel { animation: none; }
}

/* Телефон: шрифт кнопок — как у подсказки «свой %» (var(--fs-cap), см.
   правило iOS выше). */
@media (max-width: 880px) { .upx-pre .preset { font-size: var(--fs-cap); } }

/* ============================================================ телефон (по «upgrader mob ref.jpg») */
@container upx (max-width: 699px) {
  .upx-core { --dial: clamp(160px, 46cqw, 240px); }
  .upx { gap: 10px; }
  /* LIVE / SOLO по центру, отсчёт под ним, звук и «Как играть?» справа. */
  .upx-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); row-gap: 4px; }
  .upx-top > .upl-mode { grid-column: 2; justify-self: center; }
  .upx-top > .upl-clock b { font-size: 22px; }
  .upl-mode button { min-width: 0; padding: 9px 18px; }
  /* Столбец: циферблат с карточками, кнопки, «Создать ставку», полоса своих скинов. */
  .upx-main { display: flex; flex-direction: column; gap: 10px; min-height: 0 !important; }
  .upx-core { order: 1; width: 100%; gap: 8px; }
  .upx-in { order: 2; }
  .upx-side { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
  .upx-side.upx-out { display: none; }
  /* Регулятор звука — одной кнопкой: ползунок наезжал на переключатель. */
  .upx-tools .upa-snd input[type=range] { display: none; }
  .upx-side > .upx-hrow { display: none; }
  /* Карточки у циферблата. */
  .upx-ringrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
  .upx-core .upa-dial { margin: 10px auto 8px; }
  /* Фон телефона — портрет (fx/bg-m.webp): дыра в точке (49.1 %, 46.7 %). */
  #page-upgrade .upa-hole {
    width: calc(var(--dial) * 1.73); aspect-ratio: 9 / 16; transform: translate(-49.1%, -46.7%);
    -webkit-mask-image: radial-gradient(ellipse 60% 42% at 49.1% 46.7%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 42% at 49.1% 46.7%, #000 55%, transparent 100%);
  }
  #page-upgrade .upa-hole > i { background-image: url('/assets/upg/fx/bg-m.webp'); }
  #page-upgrade .upa-hole::after { left: 49.1%; top: 46.7%; width: 70%; }
  .upm-card {
    --rc: #ff8a2a;
    position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 9px 9px 10px;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(20, 20, 27, .94), rgba(11, 11, 15, .96));
    box-shadow: 0 16px 36px -18px #000, inset 0 1px 0 rgba(255, 255, 255, .04);
  }
  .upm-card.upm-in { border-color: color-mix(in srgb, var(--rc) 45%, rgba(255, 255, 255, .08)); }
  .upm-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 20px; }
  .upm-h > b { font: 700 9.5px/1.05 var(--f-hd); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
  /* Центр циферблата — под его размер на телефоне. */
  #page-upgrade .ring .ring-val { font-size: clamp(20px, 16cqw, 34px); }
  #page-upgrade .ring:not(.is-empty) .ring-sub::before { font-size: 8px; letter-spacing: .1em; }
  #page-upgrade .ring .ring-note:not(:empty) { margin-top: 3px; font-size: 14px; }
  #page-upgrade .upx-core .upa-dial .ring.is-empty .ring-val { font-size: 12px; line-height: 1.2; }
  .upm-x { flex: none; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .06); color: #d8d8e2; font: 400 16px/1 var(--f-ui); }
  .upm-art {
    position: relative; height: 64px; display: grid; place-items: center; border-radius: 8px;
    background: radial-gradient(ellipse 80% 70% at 50% 65%, color-mix(in srgb, var(--rc) 32%, transparent), transparent 76%);
  }
  .upm-art.empty { border: 1px dashed rgba(255, 255, 255, .1); }
  .upm-art > img, .upm-art > svg { max-width: 92%; max-height: 60px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7)); }
  .upm-art .upg-coins { max-height: 56px; }
  .upm-more { position: absolute; right: 2px; bottom: 2px; padding: 1px 5px; border-radius: 5px; font: 700 10px/1.3 var(--f-hd); font-style: normal;
    color: #ececf2; background: #1b1b24; border: 1px solid rgba(255, 255, 255, .14); }
  .upm-n { display: grid; gap: 1px; min-width: 0; }
  .upm-n > b, .upm-n > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .upm-n > b { font: 600 var(--fs-cap)/1.2 var(--f-ui); color: #ececf2; }
  .upm-n > span { font: 700 var(--fs-cap)/1.2 var(--f-ui); color: color-mix(in srgb, var(--rc) 85%, #fff); }
  .upm-n.muted { font: 500 10px/1.3 var(--f-ui); color: #8a8a9a; white-space: normal; }
  .upm-p { display: inline-flex; align-items: center; font: 800 var(--fs-ui)/1 var(--f-hd); color: #fff; }
  .upm-p .coin { width: 14px; height: 14px; margin-right: 4px; }
  .upm-btn {
    margin-top: 2px; height: 34px; padding: 0 8px; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, #1f1f28, #14141a); color: #ececf2;
    font: 600 var(--fs-cap)/1 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Кнопки: множители одной сеткой, шанс с подписью. */
  .upx-prow.mu { height: auto; padding: 0; border: 0; background: none; }
  .upx-prow.mu .upx-pbtns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .upx-prow.mu .preset { height: 40px; min-width: 0; font-size: 13px; border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .08); background: rgba(12, 12, 17, .92); }
  .upx-prow.ch { height: 44px; }
  .upx-prow.ch .upx-pk { font: 700 10px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #ececf2; }
  .upx-pre .preset-own { flex-basis: 60px; }
  .upx-gear { width: 44px; height: 44px; }
  .upx-go { width: 100%; min-height: 56px; }
  /* Полоса своих скинов: вкладки с числом, порядок и поиск; карточки вбок. */
  .upx-bar { gap: 6px; }
  .upx-tabs { flex: 0 1 auto; display: inline-flex; gap: 4px; }
  .upx-tabs button { height: 34px; padding: 0 10px; font-size: var(--fs-cap); white-space: nowrap; }
  .upx-tab-n { display: inline-grid; place-items: center; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 6px; background: rgba(255, 255, 255, .12); font: 700 10px/1 var(--f-hd); font-style: normal; color: #fff; }
  .upx-tab-n[hidden] { display: none; }
  .upx-bal, #myRefresh { display: none; }
  .dd:has(> .upx-msort) { display: block; flex: 0 0 auto; margin-left: auto; }
  .dd:has(> .upx-msort) .dd-btn { height: 34px; padding: 0 10px; border-radius: 8px; border-color: var(--upx-line); background: var(--upx-box); }
  .upx-mq { display: grid; width: 34px; height: 34px; }
  .upx-mq > svg { width: 16px; height: 16px; }
  .upx-mqrow { display: flex; }
  .upx-mqrow[hidden] { display: none; }
  .upx-mqrow input[type=search] { height: 34px; }
  #page-upgrade #inBody.upx-cards {
    display: flex; height: auto; min-height: 0; contain: none; overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 2px 2px 6px;
    scroll-snap-type: x proximity;
  }
  /* contain: size из сетки компьютера весит больше (:not(.upg-money)) и
     перебивал contain: none выше: высота полосы считалась нулём, и от
     инвентаря оставалась щель в 8 px с верхушками карточек. */
  #page-upgrade:not(.upg-money) #inBody.upx-cards { contain: none; }
  #page-upgrade #inBody.upx-cards > .upx-card:not(.coins) { flex: 0 0 calc((100% - 16px) / 3); height: 132px; padding: 7px 7px 8px; scroll-snap-align: start; }
  #page-upgrade #inBody.upx-cards > .upx-card:not(.coins) .upx-card-art { top: 24px; bottom: 32px; }
  #page-upgrade #inBody.upx-cards > .upx-card.sel { border-color: #ff8a2a; box-shadow: 0 0 0 1px #ff8a2a, 0 0 18px rgba(255, 122, 24, .35); }
  #page-upgrade #inBody.upx-cards > .up-empty { width: 100%; min-height: 110px; }
  #page-upgrade.upg-money #inBody.upx-cards { display: flex; }
  /* Сумма ставки — только на «Балансе»: на «Скинах» ставка видна в карточке. */
  #page-upgrade:not(.upg-money) .upx-sum { display: none; }
  /* Карточки раунда уже. */
  .upl-live { padding: 12px 10px 10px; }
  .upl-card { flex-basis: 134px; }
  .upl-void { min-height: 260px; }
  .upl-lane { bottom: 90px; }
  .upl-void-tx > b { font-size: 16px; }
}
@container upx (max-width: 379px) {
  .upx-core { --dial: clamp(140px, 40cqw, 200px); }
  .upx-ringrow { gap: 4px; }
  .upm-card { padding: 7px 7px 8px; }
  .upm-art { height: 54px; }
  .upm-art > img, .upm-art > svg { max-height: 50px; }
  .upm-btn { height: 30px; font-size: 10px; }
  .upx-prow.mu .upx-pbtns { gap: 4px; }
  .upx-prow.mu .preset { height: 36px; font-size: 12px; }
  .upx-tabs button { padding: 0 8px; }
}
/* ---- конец секции «ОДИН МАКЕТ LIVE / SOLO» ---- */

/* ============================================================ АПГРЕЙДЕР · ПРАВКИ ВЛАДЕЛЬЦА 28.10
   • блок лайф-раундов без своего фона и рамки; карточка — по примеру
     владельца в наших цветах (аватар, «N предметов», сумма, скин, шанс и
     окно); мини-кольца последних раундов у «Истории раундов»;
   • «Скины / Баланс» — как фильтры на витрине кейсов (.cs-groups: косые
     стыки, активная — сплошная оранжевая); кнопки баланса и обновления в
     блоке больше нет;
   • фон сцены без сундуков — сундуки макета плывут на холсте (upgfx). */
.upl-live { padding: 0; border: 0; background: none; box-shadow: none; }
.upl-head { padding: 0 2px; }
.upl-void { background: none; border: 1px solid rgba(255, 255, 255, .06); min-height: 320px; }
/* В блоке только полёт и «Ставок пока нет» (владелец 28.10). */
.upl-lane { inset: 0 0 56px; }
.upl-void > .upl-empty-last { display: none; }
.upl-list { padding: 2px 2px 6px; }
.upl-card { flex-basis: 168px; gap: 7px; padding: 10px; background: linear-gradient(180deg, #16171d, #0f1014); }
.upl-card .upl-ava { width: 32px; height: 32px; }
.upl-cwho { gap: 3px; }
.upl-cn { font: 600 var(--fs-cap)/1.15 var(--f-ui); color: #a2a2b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upl-camt { font: 800 13px/1 var(--f-hd); color: #fff; }
.upl-camt .coin { width: 13px; height: 13px; margin-right: 4px; }
.upl-cart { height: 98px; border-radius: 10px; }
.upl-cart > img, .upl-cart > svg { max-width: 90%; max-height: 86px; }
.upl-cart .upl-coins { max-height: 72px; }
.upl-cfoot { align-items: center; padding: 0 1px; }
.upl-cch { font: 800 18px/1 var(--f-hd); color: #ff9a2e; }
.upl-crng { font: 700 12px/1 var(--f-hd); color: #8a8a9a; }
.upl-card.lose { opacity: .72; }
.upl-card.win { background: linear-gradient(180deg, #152019, #0f1412); }
/* мини-кольца последних раундов */
.upl-rings { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.upl-rings:empty { display: none; }
.upl-ring { flex: none; width: 24px; height: 24px; color: #2a2a33; }
.upl-ring .upl-ring-a { stroke: #8a4a22; }
.upl-ring.w .upl-ring-a { stroke: #ff7a18; filter: drop-shadow(0 0 3px rgba(255, 122, 24, .85)); }
.upl-hist { margin-left: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--upx-line); background: var(--upx-box); }
.upl-rings:empty + .upl-hist { margin-left: auto; }
@container upx (max-width: 699px) {
  .upl-live { padding: 0; }
  .upl-card { flex-basis: 146px; }
  /* Шапка в две строки: заголовок и «История», ниже — кольца раундов. */
  .upl-head { flex-wrap: wrap; row-gap: 6px; }
  .upl-rings { order: 3; flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
  .upl-hist { margin-left: auto; }
  .upl-ring:nth-child(n+7) { display: none; }
}
/* «Скины / Баланс» как фильтры кейсов */
.upx-tabs {
  flex: 1 1 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; min-width: 0;
  overflow: hidden; border-radius: 9px; border: 1px solid var(--upx-line); background: rgba(8, 8, 10, .7);
}
.upx-tabs button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: 38px; min-width: 0; padding: 0 14px;
  border: 0; border-radius: 0; background: transparent; color: #c4c4d0; font: 600 var(--fs-label)/1 var(--f-hd); letter-spacing: .02em;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); margin: 0 -6px; transition: background .25s ease, color .25s ease;
}
.upx-tabs button:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); margin-left: 0; }
.upx-tabs button:last-child { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); margin-right: 0; }
.upx-tabs button:hover { background: rgba(255, 255, 255, .05); color: #ececf2; }
.upx-tabs button.on { background: #ff7a18; color: #180a00; box-shadow: none; border: 0; }
.upx-tabs button.on .upx-tab-n { background: rgba(24, 10, 0, .28); color: #180a00; }
.upx-in > .upx-bar { gap: 8px; }
/* Ползунок доплаты с баланса под полем суммы. */
.upx-slide { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.upx-slide input[type=range] {
  flex: 1 1 auto; min-width: 0; height: 22px; margin: 0; padding: 0; background: transparent; accent-color: #ff7a18; cursor: pointer;
}
.upx-slide input[type=range] { -webkit-appearance: none; appearance: none; }
.upx-slide input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.upx-slide input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.upx-slide input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: #ff7a18; }
.upx-slide input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ffb04a, #ff7a18); border: 2px solid #1a0b00; box-shadow: 0 0 10px rgba(255, 122, 24, .7);
}
.upx-slide input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffb04a, #ff7a18);
  border: 2px solid #1a0b00; box-shadow: 0 0 10px rgba(255, 122, 24, .7);
}
.upx-slide input[type=range]:disabled { opacity: .45; cursor: default; }
.upx-slide-k { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 600 var(--fs-cap)/1 var(--f-ui); color: #a2a2b2; white-space: nowrap; }
.upx-slide-k .coin { width: 12px; height: 12px; margin: 0 2px 0 0; }
/* Без «Коэффициента»: плашка «Вы получите» одна, во всю ширину; в центре
   кольца множитель не пишется. */
#page-upgrade .upx-stats, #page-upgrade .upx-stats:is(div) { grid-template-columns: minmax(0, 1fr); }
#page-upgrade .upx-stat:first-child > b { grid-column: 1; }
#page-upgrade .ring .ring-note, #page-upgrade .ring .ring-note:not(:empty) { display: none; }
/* ---- конец секции «ПРАВКИ ВЛАДЕЛЬЦА 28.10» ---- */

/* ============================================================ АПГРЕЙДЕР · ПРАВКИ ВЛАДЕЛЬЦА 28.10 (3)
   • «Сумма ставки»: поле и ползунок, кнопок «+5 … MAX» и подписи нет;
   • цель: выбранный скин — один на весь блок с крестиком (.upx-tfull),
     «Вы получите» и «60 из N» убраны;
   • сцена крупнее (2× диаметра), холст предметов — над циферблатом;
   • колесо больше, кнопка «Создать ставку» — вровень с низом блоков;
   • «Шанс успеха» — фишками, как фильтры кейсов на витрине. */
.upx-sum-row { padding: 5px 8px; }
.upx-amt { flex: 1 1 auto; }
.upx-slide { padding: 2px 2px 0; }
#page-upgrade .upx-stats { display: none; }
/* выбранная цель на весь блок */
#page-upgrade #targetGrid.upx-tgts.full, #page-upgrade #inBody.upx-cards.full {
  display: block; height: auto; min-height: 248px; contain: none; overflow: visible; padding: 0;
}
.upx-tfull {
  --rc: #8a8a9a;
  position: relative; box-sizing: border-box; min-height: 248px; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding: 16px 14px 14px; border-radius: 12px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--rc) 55%, rgba(255, 255, 255, .08));
  background:
    radial-gradient(ellipse 80% 60% at 50% 42%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 76%),
    linear-gradient(180deg, #1b1b23, #101016);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent), 0 0 28px color-mix(in srgb, var(--rc) 22%, transparent);
}
.upx-tfull::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px; border-radius: 2px; background: var(--rc); box-shadow: 0 0 12px var(--rc); opacity: .8; }
.upx-tfull-x { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .07); color: #ececf2; font-size: 22px; }
.upx-tfull-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.upx-tfull-art { display: grid; place-items: center; width: 100%; height: 150px; }
.upx-tfull-art > img, .upx-tfull-art > svg { max-width: 92%; max-height: 146px; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .7)); }
.upx-tfull-w { font: 600 var(--fs-label)/1.2 var(--f-ui); color: #ececf2; }
.upx-tfull-n { max-width: 100%; font: 800 17px/1.2 var(--f-hd); color: color-mix(in srgb, var(--rc) 82%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upx-tfull-m { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; font: 800 22px/1 var(--f-hd); color: #fff; }
.upx-tfull-m .coin { width: 20px; height: 20px; margin-right: 6px; }
.upx-tfull-m > i { font: 800 15px/1 var(--f-hd); font-style: normal; color: #ffb04a; }
.upx-tfull > small { font: 500 var(--fs-cap)/1.2 var(--f-ui); color: #8a8a9a; }
/* сцена крупнее, предметы над циферблатом */
#page-upgrade .upa-hole {
  width: calc(var(--dial) * 2.05);
  -webkit-mask-image: radial-gradient(ellipse 48% 58% at 50.3% 46.4%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 58% at 50.3% 46.4%, #000 52%, transparent 100%);
}
/* Холст — над безелем, но только внутри циферблата: сам циферблат —
   отдельный контекст наложения, кнопки, переключатель и боковые блоки
   лежат поверх него. */
#page-upgrade .upa-fx { z-index: 6; }
.upx-core .upa-dial { isolation: isolate; }
.upx-pre, .upx-go { position: relative; }
.upx-top { position: relative; z-index: 2; }
/* колесо больше, кнопка вровень с низом блоков */
@container upx (min-width: 900px) {
  .upx-core { --dial: 300px; justify-content: space-between; }
  .upx-core .upa-dial { margin: 2px auto 10px; }
  .upx-pre { margin-top: auto; }
}
@container upx (min-width: 1100px) { .upx-core { --dial: 340px; } .upx-main { --core: 420px; } }
@container upx (min-width: 1300px) { .upx-core { --dial: 380px; } .upx-main { --core: 470px; } }
/* «Шанс успеха» — фишки как фильтры кейсов */
.upx-prow.ch { height: 46px; padding: 5px 5px 5px 12px; }
.upx-prow.ch .upx-pbtns {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; height: 100%; min-width: 0;
  overflow: hidden; border-radius: 7px; border: 1px solid var(--upx-line); background: rgba(8, 8, 10, .7);
}
.upx-prow.ch .preset, .upx-prow.ch .preset-own {
  flex: none; height: 100%; max-width: none; min-width: 0; margin: 0 -6px; padding: 0 8px; border: 0; border-radius: 0; background: transparent;
  color: #c4c4d0; font: 600 var(--fs-label)/1 var(--f-hd); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background .25s ease, color .25s ease;
}
.upx-prow.ch .preset:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); margin-left: 0; }
.upx-prow.ch .preset-own { clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); margin-right: 0; padding: 0 10px; }
/* Ячейка «свой %» шире прочих: косой стык съедает место у поля. */
.upx-prow.ch .upx-pbtns { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr); }
/* Подпись ряда — короткое «Шанс»: длинная отнимала место у «свой %». */
.upx-prow.ch .upx-pk-x { display: none; }
.upx-prow.ch .preset-own input[type=text] { text-align: center; padding: 0; }
.upx-prow.ch .preset-own input[type=text] { min-width: 0; }
@media (max-width: 880px) {
  .upx-prow.ch .preset, .upx-prow.ch .preset-own { font-size: var(--fs-cap); }
  .upx-prow.ch .preset-own { padding: 0 7px; }
}
.upx-prow.ch .preset:hover { background: rgba(255, 255, 255, .05); color: #ececf2; }
.upx-prow.ch .preset.on, .upx-prow.ch .preset-own.on { background: #ff7a18; color: #180a00; box-shadow: none; border: 0; }
.upx-prow.ch .preset-own.on input { color: #180a00; }
.upx-prow.ch .preset-own.bad { background: rgba(255, 77, 94, .22); color: #ff4d5e; }
.upx-prow.ch .preset-own input::placeholder { color: inherit; text-transform: uppercase; }
/* Циферблат ближе к реализму (владелец 28.10): металлический диск с
   фаской и бликом, сегменты с объёмом и внутренней тенью, тёмная канавка
   между диском и шкалой. Диск раньше прятало старое правило (display:
   none) — сквозь кольцо просвечивало видео сцены с гильзами. */
#page-upgrade .upx-core .upa-dial .upa-disc {
  display: block !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56%; height: 56%; border-radius: 50%; z-index: 1;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .07), transparent 46%),
    radial-gradient(circle at 50% 50%, #1a1a21 0, #101015 58%, #07070a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 2px 6px rgba(255, 255, 255, .05), inset 0 -10px 24px rgba(0, 0, 0, .9),
    0 0 0 3px #050507, 0 0 0 4px rgba(255, 122, 24, .35), 0 0 0 7px #0b0b0f, 0 0 26px rgba(255, 106, 0, .22);
}
#page-upgrade .ring .r-track { stroke: #2a2229; }
#page-upgrade .ring .r-base { stroke: rgba(0, 0, 0, .55); stroke-width: 26px; }
#page-upgrade .ring .r-d104 { stroke: rgba(255, 138, 42, .22); }
#page-upgrade .ring .r-zone { filter: drop-shadow(0 0 2px rgba(255, 140, 40, .9)); }
#page-upgrade .ring .r-zone-glow { opacity: .6; }
#page-upgrade .ring > svg { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
#page-upgrade .upa-bezel { inset: -4%; width: 108%; height: 108%; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .8)) brightness(1.12) contrast(1.05); }
/* ---- конец секции «ПРАВКИ ВЛАДЕЛЬЦА 28.10 (3)» ---- */

/* ---- карточка раунда по примеру владельца 28.10 (второй): ярлык «Твоя
   ставка», низ карточки в цвете редкости, при наведении снизу всплывает
   «Желаемый скин» — цель ставки; под своей ставкой до раскрытия крутится
   кольцо. Всё внутри карточки: полоса карточек листается вбок, и
   вылезающее за край она бы обрезала. ---- */
.upl-card { position: relative; overflow: hidden; gap: 6px; padding: 10px 10px 12px; }
.upl-card.me { padding-top: 26px; }
.upl-mine-tag {
  position: absolute; left: 50%; top: 0; z-index: 3; transform: translateX(-50%); padding: 4px 12px; border-radius: 0 0 8px 8px;
  background: #ff7a18; color: #180a00; font: 800 9px/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; font-style: normal; white-space: nowrap;
}
.upl-cart { overflow: visible; background: none; }
.upl-cart::before {
  content: ''; position: absolute; inset: 0; border-radius: 10px; z-index: -1;
  background: radial-gradient(ellipse 90% 70% at 50% 100%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 76%);
}
.upl-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rc, #ff8a2a) 22%, transparent));
}
.upl-card > * { position: relative; z-index: 1; }
.upl-card.me.pending { padding-bottom: 40px; }
.upl-cspin { position: absolute; left: 50%; bottom: 8px; z-index: 2; width: 26px; height: 26px; transform: translateX(-50%); color: #ff7a18; }
.upl-cspin > svg { width: 100%; height: 100%; animation: upxSpin 1.4s linear infinite; filter: drop-shadow(0 0 6px rgba(255, 122, 24, .8)); }
.upl-card:not(.pending) .upl-cspin { display: none; }
/* всплывашка цели */
.upl-tip {
  position: absolute; left: 6px; right: 6px; bottom: 44px; z-index: 4; display: grid; justify-items: center; gap: 4px; padding: 8px 8px 10px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  background: linear-gradient(180deg, rgba(30, 30, 38, .97), rgba(16, 16, 22, .98)); box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(14px); transition: opacity .22s ease, transform .25s ease; pointer-events: none;
}
.upl-tip > b { font: 700 10px/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase; color: #ececf2; }
.upl-tip-art { display: grid; place-items: center; width: 100%; height: 56px; }
.upl-tip-art > img, .upl-tip-art > svg { max-width: 90%; max-height: 54px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.upl-tip > small { max-width: 100%; font: 600 10px/1.2 var(--f-ui); color: color-mix(in srgb, var(--rc) 80%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upl-card:hover .upl-tip, .upl-card:focus-within .upl-tip { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .upl-tip { transition: none; } .upl-cspin > svg { animation: none; } }

/* ---- 28.10 (4): ряд шанса — только фишки, шестерёнка последней фишкой;
   поле суммы без подложки ---- */
.upx-prow.ch .upx-pk { display: none; }
.upx-prow2 {
  display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 0; align-items: stretch; height: 40px;
  border-radius: 8px; border: 1px solid var(--upx-line); background: rgba(8, 8, 10, .7);
}
.upx-prow2 > .upx-prow.ch { height: 100%; padding: 0; border: 0; border-radius: 0; background: none; }
.upx-prow.ch .upx-pbtns { border: 0; border-radius: 0; background: none; overflow: visible; }
.upx-prow.ch .preset:first-child { border-radius: 7px 0 0 7px; }
.upx-prow.ch .preset-own { clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); margin-right: 0; padding: 0 12px; }
.upx-gearw { height: 100%; }
.upx-gear {
  position: relative; z-index: 1; width: calc(100% + 12px); height: 100%; margin-left: -12px; border: 0; border-radius: 0 7px 7px 0; background: transparent; color: #c4c4d0;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); transition: background .25s ease, color .25s ease;
}
.upx-gear:hover, .upx-gear[aria-expanded="true"] { background: rgba(255, 255, 255, .06); color: #ffa838; border-color: transparent; }
.upx-gpop { bottom: calc(100% + 10px); }
/* Поле суммы — без подложки и рамки. */
.upx-sum-row { padding: 0; border: 0; background: none; }
.upx-amt { padding: 0 2px; }
.upx-amt:focus-within { box-shadow: inset 0 -2px 0 #ff7a18; }
@container upx (max-width: 699px) {
  .upx-prow2 { height: 44px; grid-template-columns: minmax(0, 1fr) 48px; }
  .upx-prow2 > .upx-prow.ch { height: 100%; }
  .upx-gear { width: 100%; height: 100%; }
}

/* ---- 28.10 (5): карточки целей и своих скинов — название сверху,
   картинка, цена снизу; процента нет ---- */
#page-upgrade :is(#targetGrid, #inBody) > .upx-card:not(.coins):not(.add):not(.ghost) { justify-content: flex-start; gap: 2px; padding: 7px 7px 7px; }
#page-upgrade :is(#targetGrid, #inBody) > .upx-card:not(.coins) .upx-card-w { order: 1; }
#page-upgrade :is(#targetGrid, #inBody) > .upx-card:not(.coins) .upx-card-n { order: 2; }
/* Место под крестик — у выбранной цели и у скина в ставке. */
#page-upgrade #targetGrid > .upx-card.sel :is(.upx-card-w, .upx-card-n),
#page-upgrade #inBody > .upx-card:has(> .upx-x) :is(.upx-card-w, .upx-card-n) { padding-right: 18px; }
#page-upgrade :is(#targetGrid, #inBody) > .upx-card:not(.coins) .upx-card-art { order: 3; position: static; flex: 1 1 auto; min-height: 0; margin: 2px 0; }
#page-upgrade :is(#targetGrid, #inBody) > .upx-card:not(.coins) .upx-card-art img { transform: none; max-height: 100%; }
#page-upgrade :is(#targetGrid, #inBody) > .upx-card:not(.coins) .upx-card-p { order: 4; position: static; align-self: flex-start; max-width: 100%; margin-top: 1px; font-size: 11px; }
#page-upgrade :is(#targetGrid, #inBody) > .upx-card:not(.coins) .upx-card-ch { display: none; }
/* «Выберите скин» и пустые места — как были. */
#page-upgrade #inBody > .upx-card.add { justify-content: center; }
#page-upgrade #inBody > .upx-card.add .upx-card-art { position: absolute; }

/* ---- 28.10 (6): большая живая карточка выбранного скина (цель и ставка) ----
   Фон — Higgsfield (fx/card-bg.webp — оранжевый постамент, для ставки
   fx/card-bg-in.webp — холодный), поверх: лучи из-под скина (медленно
   вращаются), пульс свечения в цвете редкости, угольки поднимаются,
   картинка парит. Процента нет. */
.upx-tfull { overflow: hidden; isolation: isolate; padding: 18px 14px 14px; gap: 3px; border-color: color-mix(in srgb, var(--rc) 50%, rgba(255, 255, 255, .1)); }
.upx-tfull > * { position: relative; z-index: 2; }
.upx-tfull-bg { position: absolute; inset: 0; z-index: 0; background: url('/assets/upg/fx/card-bg.webp') center / cover no-repeat; opacity: .95; }
.upx-tfull.in .upx-tfull-bg { background-image: url('/assets/upg/fx/card-bg-in.webp'); }
.upx-tfull::after { z-index: 3; }
.upx-tfull-rays {
  position: absolute; left: 50%; top: 58%; z-index: 1; width: 220%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 8deg, color-mix(in srgb, var(--rc) 22%, transparent) 8deg 11deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 22%, transparent 42%);
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 22%, transparent 42%);
  mix-blend-mode: screen; opacity: .55; animation: upxRays 48s linear infinite;
}
@keyframes upxRays { to { rotate: 360deg; } }
.upx-tfull-glow {
  position: absolute; left: 50%; top: 62%; z-index: 1; width: 120%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 55%, transparent) 0, color-mix(in srgb, var(--rc) 18%, transparent) 30%, transparent 60%);
  mix-blend-mode: screen; animation: upxGlowPulse 4.5s ease-in-out infinite;
}
@keyframes upxGlowPulse { 50% { opacity: .55; scale: 1.08; } }
.upx-tfull-emb { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.upx-tfull-emb > i {
  position: absolute; bottom: 10%; left: calc(14% + var(--i) * 11%); width: 3px; height: 3px; border-radius: 50%;
  background: #ffc070; box-shadow: 0 0 8px 2px rgba(255, 140, 40, .8); opacity: 0;
  animation: upxEmber 6s ease-in infinite; animation-delay: calc(var(--i) * -.9s);
}
@keyframes upxEmber {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: .9; }
  60% { opacity: .5; }
  100% { opacity: 0; transform: translate(calc((var(--i) - 3) * 6px), -180px) scale(1.1); }
}
.upx-tfull-art { height: 150px; animation: upxFloat 5s ease-in-out infinite; }
.upx-tfull-art > img, .upx-tfull-art > svg { max-height: 146px; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .75)) drop-shadow(0 0 18px color-mix(in srgb, var(--rc) 45%, transparent)); }
@keyframes upxFloat { 50% { translate: 0 -7px; } }
.upx-tfull-w { color: #d8d8e2; }
.upx-tfull-n { font-size: 18px; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.upx-tfull-m { font-size: 24px; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.upx-tfull > small { color: #a2a2b2; }
.upx-tfull-x { background: rgba(8, 8, 11, .6); border: 1px solid rgba(255, 255, 255, .12); }
.upx-tfull-add {
  margin-top: 8px; height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(8, 8, 11, .55); color: #ececf2;
  font: 600 var(--fs-cap)/1 var(--f-ui); transition: border-color .15s, color .15s;
}
.upx-tfull-add:hover { border-color: rgba(255, 168, 56, .6); color: #ffd27a; }
@media (prefers-reduced-motion: reduce) {
  .upx-tfull-rays, .upx-tfull-glow, .upx-tfull-emb > i, .upx-tfull-art { animation: none; }
}

/* ---- 28.10 (7): большая карточка — проще. Владелец: «интерфейс перегружен,
   убери бордеры, оставь один внешний». Без фона-постамента, лучей и
   угольков, без своей рамки и линии снизу — рамка остаётся только у
   блока. Остаются скин с мягким свечением в цвете редкости, название и
   цена. ---- */
.upx-tfull { border: 0; box-shadow: none; background: none; padding: 10px 10px 12px; gap: 3px; }
.upx-tfull::after { content: none; }
.upx-tfull-bg, .upx-tfull-rays, .upx-tfull-emb { display: none; }
.upx-tfull-glow {
  top: 52%; width: 110%; animation: upxGlowPulse 6s ease-in-out infinite;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 34%, transparent) 0, color-mix(in srgb, var(--rc) 10%, transparent) 32%, transparent 60%);
}
.upx-tfull-art > img, .upx-tfull-art > svg { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .7)) drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 35%, transparent)); }
.upx-tfull-n { font-size: 17px; text-shadow: none; }
.upx-tfull-m { font-size: 22px; text-shadow: none; }
.upx-tfull-x { background: transparent; border: 0; }
.upx-tfull-x:hover { background: rgba(255, 255, 255, .08); }
.upx-tfull-add { border: 0; background: none; color: #a2a2b2; text-decoration: underline; text-underline-offset: 3px; }
.upx-tfull-add:hover { color: #ffd27a; }

/* ============================================================ ALIVE · ПОПОЛНЕНИЕ КРИПТОЙ (29.10)

   По crypto top up.jpg владельца: монеты — карточками по три в ряд,
   крупная монета с значком сети на краю (иконки Higgsfield в
   assets/crypto), выбранная — в оранжевой рамке с галочкой. Справа —
   «Реквизиты»: сводка в рамке, ниже карточка с QR, адресом, суммами и
   предупреждением. Окно в режиме крипты шире (.dpa.crypto). Телефон —
   одна колонка, монеты по две. */

.modal:has(.dpa.crypto) { width: 1060px; }
.dpa.crypto .dpa-cols { grid-template-columns: minmax(0, 1fr) 330px; }
.dpa.crypto .dep-sec { display: flex; flex-direction: column; gap: 10px; }
.dpa.crypto .dep-nets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dpa.crypto .dep-net {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 76px;
  padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid #26262f; background: linear-gradient(180deg, rgba(20, 20, 26, .9), rgba(10, 10, 14, .9));
  color: #ececf2; transition: border-color .15s, box-shadow .15s, background .15s;
}
.dpa.crypto .dep-net:hover { border-color: rgba(255, 122, 24, .5); }
.dpa.crypto .dep-net.on {
  border-color: #ff8a1f;
  background: linear-gradient(180deg, rgba(255, 122, 24, .16), rgba(255, 122, 24, .04) 70%), #0d0b0a;
  box-shadow: 0 0 0 1px rgba(255, 138, 31, .35), 0 0 22px -6px rgba(255, 122, 24, .75);
}
.dpa.crypto .dep-net > .dep-net-ic {
  position: relative; flex: none; width: 46px; height: 46px; display: block;
  min-width: 0; overflow: visible; white-space: normal;
}
.dpa.crypto .dep-net-ic > img {
  width: 46px; height: 46px; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}
.dpa.crypto .dep-net-ic > img.nb {
  position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px;
  border-radius: 50%; box-shadow: 0 0 0 2px #0d0b0a; filter: none;
}
.dpa.crypto .dep-net-ic > i {
  display: block; width: 46px; height: 46px; border-radius: 50%;
  background: var(--dot, #ffa838); box-shadow: none;
}
.dpa.crypto .dep-net > .dep-net-tx {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: visible;
  font: inherit; color: inherit;
}
.dpa.crypto .dep-net-tx > b { font: 700 16px/1.1 var(--f-hd); color: #fff; letter-spacing: .01em; }
.dpa.crypto .dep-net-tx > span {
  font: 500 var(--fs-cap)/1.2 var(--f-ui); color: #8f8f9e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dpa.crypto .dep-net > i.dep-net-ok {
  position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  display: none; background: #ff8a1f; box-shadow: 0 0 10px rgba(255, 122, 24, .8);
}
.dpa.crypto .dep-net > i.dep-net-ok::after {
  content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px;
  border: solid #1a0c00; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dpa.crypto .dep-net.on > i.dep-net-ok { display: block; }
.dpa.crypto .dep-net-tx > span.sh { display: none; }

/* Правая колонка: «Реквизиты» — сводка в рамке и карточка адреса. */
.dpa.crypto .dpa-r { gap: 14px; padding: 18px 20px 22px; }
.dpa.crypto #dpRightK { font-size: var(--fs-label); letter-spacing: .14em; color: #b9b9c6; }
.dpa.crypto .dep-sum {
  padding: 14px 16px; border-radius: 14px; gap: 8px;
  border: 1px solid rgba(255, 122, 24, .35); background: rgba(14, 12, 12, .85);
  box-shadow: inset 0 0 30px -18px rgba(255, 122, 24, .6);
}
.dpa.crypto .dep-sum .dep-row { font-size: var(--fs-ui); }
.dpa.crypto .dep-sum .dep-row.tot b { font-size: 20px; }
.dpa.crypto .dpa-addr .dep-addr {
  gap: 12px; padding: 16px; border-radius: 14px;
  border: 1px solid rgba(255, 122, 24, .28); background: rgba(12, 11, 12, .9);
}
.dpa.crypto .dpa-addr .dep-qr { width: 168px; height: 168px; padding: 10px; border-radius: 12px; }
.dpa.crypto .dpa-addr .dep-addr-k {
  display: flex; flex-direction: column; gap: 2px; font: 600 var(--fs-label)/1.35 var(--f-hd);
  letter-spacing: .04em; text-transform: uppercase; color: #d4d4de;
}
.dpa.crypto .dpa-addr .dep-addr-k > small {
  font: 600 var(--fs-cap)/1.3 var(--f-hd); letter-spacing: .02em; color: #9a9aa8; text-transform: none;
}
.dpa.crypto .dpa-addr .dep-addr-row { padding: 6px 6px 6px 12px; border-radius: 10px; }
.dpa.crypto .dpa-addr .dep-addr-row code { font: 700 var(--fs-cap)/1.3 var(--f-hd); }
.dpa.crypto .dpa-addr .dep-copy {
  padding: 8px 12px; border-radius: 8px; border-color: #ff8a1f; background: rgba(255, 122, 24, .12);
  font-size: var(--fs-cap);
}
.dpa.crypto .dpa-addr .dep-addr-li {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 10px;
  font-size: var(--fs-ui); color: #a2a2b2;
}
.dpa.crypto .dpa-addr .dep-addr-li > :last-child {
  display: block; max-width: none; color: #ececf2; text-align: left; line-height: 1.35;
}
.dpa.crypto .dpa-addr .dep-addr-li > b { font: 700 var(--fs-ui)/1.35 var(--f-hd); }
.dpa.crypto .dpa-addr .cp-warn {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  font-size: var(--fs-cap); line-height: 1.45; color: #9a9aa8;
}
.dpa.crypto .dpa-addr .cp-warn b { color: #ececf2; }
.dpa.crypto .cp-ic {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid #9a9aa8; font: 700 12px/1 var(--f-hd); font-style: normal; color: #9a9aa8;
}
.dpa.crypto .dpa-credit { font: 700 var(--fs-body)/1.2 var(--f-hd); color: #ececf2; }
.dpa.crypto .dpa-credit b { color: #ffa838; font-size: 20px; }

@media (max-width: 1100px) and (min-width: 881px) {
  .dpa.crypto .dep-nets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .modal:has(.dpa.crypto) { width: 100%; }
  .dpa.crypto .dpa-cols { grid-template-columns: minmax(0, 1fr); }
  .dpa.crypto .dep-nets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dpa.crypto .dep-net { min-height: 64px; gap: 10px; padding: 10px; }
  .dpa.crypto .dep-net > .dep-net-ic, .dpa.crypto .dep-net-ic > img, .dpa.crypto .dep-net-ic > i { width: 38px; height: 38px; }
  .dpa.crypto .dep-net-ic > img.nb { width: 17px; height: 17px; right: -4px; bottom: -3px; }
  .dpa.crypto .dep-net-tx > b { font-size: 15px; }
  .dpa.crypto .dep-net-tx > span { font-size: var(--fs-micro); }
  .dpa.crypto .dep-net-tx > span.fl { display: none; }
  .dpa.crypto .dep-net-tx > span.sh { display: block; }
  .dpa.crypto .dep-net > i.dep-net-ok { top: 6px; right: 6px; width: 16px; height: 16px; }
  .dpa.crypto .dep-net > i.dep-net-ok::after { left: 5px; top: 2px; }
  .dpa.crypto .dpa-r { padding: 16px; }
  .dpa.crypto .dpa-addr .dep-addr { padding: 14px; }
  .dpa.crypto .dpa-addr .dep-addr-li > :last-child { max-width: 66%; }
}

/* ============================================================ ALIVE · ВИТРИНА КЕЙСОВ · ТЕЛЕФОН БЕЗ ПРЫЖКОВ (29.10)

   Владелец: «при скролле кейсов лагает и прыгает экран». На телефоне у
   арта карточки высота «авто», а ленивая картинка до загрузки — заглушка
   в 1 px: каждая подъехавшая порция карточек вырастала на ~100 px, когда
   приходили картинки, и всё ниже ехало (замер: layout-shift от
   .case-photo 1 → 116 px на каждой подгрузке). Теперь место под арт
   занято сразу — квадрат, картинка вписана в него и стоит по низу, как
   на плите. Превью кейсов почти все 1:1 (те — ровно как раньше) и 5:4 (те
   во всю ширину, с полем сверху); ряды карточек теперь одной высоты. */
@media (max-width: 880px) {
  .cs-card-art .case-photo { aspect-ratio: 1 / 1; height: auto; }
  .cs-card-art .case-photo img {
    width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: 50% 100%;
  }
  .cs-card-art > svg { aspect-ratio: 1 / 1; height: auto; }
}

/* ============================================================ АПГРЕЙДЕР · «ВАШИ ПРЕДМЕТЫ» 2×2 И ЦЕЛЬ (29.10)

   По latest upgrade.jpg владельца: остальное на странице как было.
   • Ставка из 2–4 скинов — сетка 2×2 (.quad): оружие и название сверху
     слева (ST™ оранжевым), крестик справа, скин справа внизу, цена слева
     внизу, рамка и подсветка цветом редкости; под сеткой — «Очистить».
     Один скин — по-прежнему большая карточка (28.10).
   • Цель — карточка с огненным фоном Higgsfield (assets/upg/target-bg.webp)
     и оранжевой рамкой: бейджи износа и StatTrak™ слева сверху, стрелки к
     соседним целям, имя оранжевым; под ней «Выбрать другой предмет». */

#page-upgrade #inBody.upx-cards.quad {
  display: grid; height: 248px; padding: 0; overflow: hidden; contain: size;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)) 34px;
  grid-auto-rows: unset; gap: 8px;
}
#page-upgrade #inBody.quad > .upx-card.add, #page-upgrade #inBody.quad > .upx-card.ghost { height: auto; min-height: 0; }
#page-upgrade #inBody.quad > .upx-card.add { flex-direction: row; gap: 10px; }
.upx-qc {
  --rc: #8a8a9a;
  position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--rc) 70%, transparent);
  background:
    radial-gradient(ellipse 70% 85% at 74% 62%, color-mix(in srgb, var(--rc) 32%, transparent), transparent 72%),
    linear-gradient(160deg, #1a1a22, #0e0e13);
  box-shadow: inset 0 0 22px -10px var(--rc), 0 0 14px -8px var(--rc);
}
.upx-qc-t {
  position: absolute; left: 10px; top: 8px; right: 30px; z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.upx-qc-t > b, .upx-qc-t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upx-qc-t > b { font: 700 12.5px/1.2 var(--f-hd); color: #fff; }
.upx-qc-t > span { font: 500 11px/1.2 var(--f-ui); color: #9a9aa8; }
.upx-qc .upx-st { margin-right: 4px; font: 700 11px/1 var(--f-hd); color: #ff8a2a; }
.upx-qc .upx-x { right: 4px; top: 4px; width: 22px; height: 22px; font-size: 17px; color: #d0d0da; }
.upx-qc-art {
  position: absolute; left: 30%; right: 6px; top: 34%; bottom: 8px; z-index: 1;
  display: grid; place-items: center; pointer-events: none;
}
.upx-qc-art > img, .upx-qc-art > svg {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .7));
}
.upx-qc-art > svg { width: 100%; height: 100%; }
.upx-qc-p {
  position: absolute; left: 10px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center;
  font: 700 12.5px/1 var(--f-hd); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.upx-qc-p .coin { width: 13px; height: 13px; margin-right: 4px; }
.upx-clear {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 0;
  border-radius: 9px; border: 1px solid #26262f; background: rgba(255, 255, 255, .04); color: #c4c4d0;
  font: 600 13px/1 var(--f-hd); cursor: pointer; transition: border-color .15s, color .15s;
}
.upx-clear svg { width: 16px; height: 16px; }
.upx-clear:hover:not(:disabled) { border-color: rgba(255, 122, 24, .5); color: #fff; }
.upx-clear:disabled { opacity: .45; cursor: default; }

/* Цель: карточка + кнопка под ней на всю высоту блока. */
#page-upgrade #targetGrid.upx-tgts.full { display: flex; flex-direction: column; gap: 8px; }
/* Под блоком цели — запас до низа строки: карточка с кнопкой занимают его. */
@container upx (min-width: 900px) {
  #page-upgrade #targetGrid.upx-tgts.full:has(> .upx-tfull.out) { min-height: 334px; }
}
#page-upgrade #targetGrid.full > .upx-tfull.out {
  flex: 1 1 auto; min-height: 202px; height: auto; padding: 12px 12px 12px; gap: 2px; border-radius: 12px;
  border: 1px solid rgba(255, 138, 31, .7);
  background: #0b0807;
  box-shadow: 0 0 0 1px rgba(255, 122, 24, .25), 0 0 30px -8px rgba(255, 100, 0, .55), inset 0 0 40px -16px rgba(255, 122, 24, .5);
}
.upx-tfull.out .upx-tfull-bg {
  display: block; background: url('/assets/upg/target-bg.webp') center 60% / cover no-repeat; opacity: .9;
}
.upx-tfull.out .upx-tfull-glow { top: 50%; }
#page-upgrade #targetGrid.upx-tgts.full:has(> .upx-tfull.out) {
  overflow: visible; -webkit-mask-image: none; mask-image: none;
}
.upx-tfull.out .upx-tfull-art { flex: none; height: 136px; margin-top: 14px; }
.upx-tfull.out .upx-tfull-art > img, .upx-tfull.out .upx-tfull-art > svg { max-width: 78%; max-height: 132px; }
.upx-tfull.out .upx-tfull-w { font: 700 13px/1.2 var(--f-hd); color: #ffb04a; }
.upx-tfull.out .upx-tfull-n { font: 800 17px/1.15 var(--f-hd); color: #ff8a1f; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.upx-tfull.out .upx-tfull-m { margin-top: 2px; font-size: 22px; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.upx-tfull.out > small { display: none; }
.upx-tfull-chips { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; gap: 6px; }
.upx-tfull-chips > i {
  padding: 5px 8px; border-radius: 6px; font: 700 11px/1 var(--f-hd); font-style: normal; color: #ececf2;
  background: rgba(8, 8, 10, .7); border: 1px solid rgba(255, 255, 255, .14);
}
.upx-tfull-chips > i.st { color: #ff9a2e; border-color: rgba(255, 122, 24, .5); background: rgba(40, 18, 4, .75); }
.upx-tnav {
  position: absolute; top: 44%; z-index: 3; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff; font: 400 22px/1 var(--f-ui);
  background: rgba(8, 8, 10, .6); border: 1px solid rgba(255, 255, 255, .16); transition: border-color .15s, background .15s;
}
.upx-tnav:hover { border-color: rgba(255, 138, 31, .8); background: rgba(40, 18, 4, .8); }
.upx-tnav.l { left: 10px; }
.upx-tnav.r { right: 10px; }
.upx-tfull.out > .upx-tfull-x {
  position: absolute; right: 8px; top: 8px; z-index: 4; background: rgba(8, 8, 10, .6); border: 1px solid rgba(255, 255, 255, .14);
}
.upx-tfull.out > .upx-tfull-chips, .upx-tfull.out > .upx-tnav { position: absolute; }
.upx-tother {
  flex: none; height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; border: 1px solid #26262f; background: rgba(255, 255, 255, .04); color: #d8d8e2;
  font: 600 13px/1 var(--f-hd); cursor: pointer; transition: border-color .15s, color .15s;
}
.upx-tother svg { width: 18px; height: 18px; }
.upx-tother:hover { border-color: rgba(255, 122, 24, .5); color: #fff; }

/* Телефон: карточка «Вы получите» с выбранной целью — тот же огненный фон. */
@media (max-width: 880px) {
  #upmOut:has(> .upm-art:not(.empty)) {
    background: linear-gradient(180deg, rgba(8, 6, 5, .35), rgba(8, 6, 5, .7)), url('/assets/upg/target-bg.webp') center 60% / cover no-repeat, #0b0807;
    border-color: rgba(255, 138, 31, .7); box-shadow: 0 0 22px -8px rgba(255, 100, 0, .6);
  }
  #upmOut:has(> .upm-art:not(.empty)) .upm-n > span { color: #ff8a1f; }
}

/* ============================================================ ОКНА ПО «POP UPS» (29.10)

   pop ups.jpg владельца: металлическая рамка с оранжевыми уголками, арт
   Higgsfield (assets/popups), заголовок белым и оранжевым.
   • Дроп дня (#whaDrop.wdd) — широкая панель под сценой колеса: сундук
     слева, «ДРОП ДНЯ», стрик, семь ячеек, внизу условие или «Забрать».
     На телефоне — первой на странице, сундук мелко рядом с заголовком.
   • Гонка лидеров (.epop): «Ты в призах» (кубок) и «Ты не вошёл в топ»
     (пустой постамент) с кнопкой «Хочу в лидеры» → окно акции (.ofr.ofl,
     рамка приветственного бонуса, арт +40%). На телефоне — во весь экран,
     как все окна (26.10). */

/* ---------------------------------------------------------- рамка */
.wdd, .epop {
  --pop-or: #ff8a1f;
  position: relative; isolation: isolate; box-sizing: border-box;
  border: 1px solid rgba(255, 138, 31, .32); border-radius: 16px;
  background:
    radial-gradient(60% 80% at 0% 50%, rgba(255, 100, 20, .16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #121014, #0a090b);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 40px -18px rgba(255, 122, 24, .45), 0 24px 60px rgba(0, 0, 0, .6);
}
.wdd::before, .epop::before {
  content: ''; position: absolute; left: 50%; top: -1px; z-index: 2; width: 34%; height: 3px; translate: -50% 0;
  border-radius: 0 0 3px 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pop-or) 18%, var(--pop-or) 30%, transparent 31%, transparent 69%, var(--pop-or) 70%, var(--pop-or) 82%, transparent);
  box-shadow: 0 0 12px rgba(255, 122, 24, .8);
}
:is(.wdd-c, .epop-c) {
  position: absolute; z-index: 2; width: 26px; height: 26px; pointer-events: none;
  border: 0 solid var(--pop-or); filter: drop-shadow(0 0 6px rgba(255, 122, 24, .8));
}
:is(.wdd-c, .epop-c).tl { left: -1px; top: -1px; border-left-width: 3px; border-top-width: 3px; border-top-left-radius: 16px; }
:is(.wdd-c, .epop-c).tr { right: -1px; top: -1px; border-right-width: 3px; border-top-width: 3px; border-top-right-radius: 16px; }
:is(.wdd-c, .epop-c).bl { left: -1px; bottom: -1px; border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 16px; }
:is(.wdd-c, .epop-c).br { right: -1px; bottom: -1px; border-right-width: 3px; border-bottom-width: 3px; border-bottom-right-radius: 16px; }

/* ---------------------------------------------------------- дроп дня */
.wha > .wha-drop.wdd {
  grid-column: 1 / -1; z-index: 3; width: 100%; max-width: 1240px; margin: 6px auto 0; padding: 22px 26px 22px 0;
  display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); align-items: center; gap: 8px;
}
.wha > .wha-drop.wdd[hidden] { display: none; }
.wdd-art { position: relative; align-self: stretch; display: grid; place-items: center; margin: -36px 0 -30px; }
.wdd-art::before {
  content: ''; position: absolute; inset: 14% 8%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 110, 20, .38), transparent);
}
.wdd-art > img { width: 112%; max-width: none; height: auto; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .7)); }
.wdd-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wdd-h { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.wdd-h > h3 { margin: 0; font: 900 34px/1 var(--f-hd); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.wdd-h > h3 > span { color: var(--pop-or); text-shadow: 0 0 18px rgba(255, 122, 24, .55); }
.wdd-h > small { font: 600 var(--fs-label)/1.3 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #a2a2b2; }
.wdd-ice { font-style: normal; color: #6fc3ff; }
.wdd-note { margin: 0; font: 400 var(--fs-ui)/1.5 var(--f-ui); color: #b9b9c6; }
.wdd-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.wdd-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 112px; padding: 10px 4px; border-radius: 10px; text-align: center;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(30, 28, 34, .9), rgba(14, 13, 16, .95));
}
.wdd-cell > small { position: absolute; top: 9px; left: 0; right: 0; font: 700 var(--fs-label)/1 var(--f-hd); color: #b9b9c6; }
.wdd-cell > b { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 800 22px/1 var(--f-hd); color: #fff; font-variant-numeric: tabular-nums; }
.wdd-cell > i { font: 600 var(--fs-label)/1 var(--f-hd); font-style: normal; color: #a2a2b2; }
.wdd-cell > img { width: 62px; height: 62px; margin-top: 12px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.wdd-coin { display: inline-block; width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: url(/assets/lb/coin.png) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255, 122, 24, .5)); }
.wdd-cell.cur {
  border: 2px solid #ffb347;
  background: radial-gradient(90% 70% at 50% 100%, rgba(255, 140, 30, .28), transparent 70%), linear-gradient(180deg, #2a1c10, #140d08);
  box-shadow: 0 0 0 1px rgba(255, 179, 71, .25), 0 0 26px -4px rgba(255, 140, 30, .7);
}
.wdd-cell.cur > small { color: #ffb347; }
.wdd-cell.done { opacity: .6; }
.wdd-cell.done::after {
  content: '✓'; position: absolute; right: 7px; top: 6px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font: 700 11px/1 var(--f-hd); color: #07210f; background: #35d07f;
}
.wdd-foot { min-width: 0; }
.wdd-msg {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 8px 16px; box-sizing: border-box;
  border-radius: 10px; border: 1px solid rgba(255, 138, 31, .28); background: rgba(255, 122, 24, .05);
  font: 500 var(--fs-ui)/1.35 var(--f-ui); color: #c9c9d6; text-align: center; text-decoration: none;
}
.wdd-msg.warn { border-color: rgba(255, 196, 60, .4); color: #ffd27a; }
.wdd-gi { flex: none; width: 22px; height: 22px; color: var(--pop-or); }
.wdd-btn {
  display: block; width: 100%; height: 50px; border: 0; border-radius: 10px; cursor: pointer;
  font: 800 var(--fs-body)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #1a0b00;
  background: linear-gradient(180deg, #ffb043, #ff6a00); box-shadow: 0 10px 30px -10px rgba(255, 100, 0, .8);
}
.wdd-btn:hover { filter: brightness(1.07); }

@media (max-width: 1180px) and (min-width: 881px) {
  .wha > .wha-drop.wdd { grid-template-columns: 190px minmax(0, 1fr); padding-right: 18px; }
  .wdd-cell { min-height: 96px; }
  .wdd-cell > b { font-size: 17px; }
  .wdd-cell > img { width: 48px; height: 48px; }
  .wdd-coin { width: 17px; height: 17px; }
}
@media (max-width: 880px) {
  .wha > .wha-drop.wdd {
    order: -1; margin: 0; padding: 14px 12px 12px; gap: 10px 10px; border-radius: 14px;
    grid-template-columns: 78px minmax(0, 1fr); grid-template-areas: "art head" "grid grid" "foot foot";
  }
  .wdd-main { display: contents; }
  .wdd-art { grid-area: art; margin: -10px -6px -6px -8px; }
  .wdd-art > img { width: 100%; }
  .wdd-h { grid-area: head; flex-direction: column; gap: 6px; align-self: center; padding-right: 58px; }
  .wdd-h > h3 { font-size: 26px; }
  .wdd-h > small { font-size: var(--fs-micro); letter-spacing: .05em; }
  .wdd-grid, .wdd-note { grid-area: grid; }
  .wdd-foot { grid-area: foot; }
  .wdd-grid { gap: 5px; }
  .wdd-cell { min-height: 70px; padding: 6px 2px; gap: 3px; border-radius: 8px; }
  .wdd-cell > small { top: 5px; font-size: 10px; }
  .wdd-cell > b { margin-top: 10px; gap: 2px; flex-direction: column; font-size: 13px; }
  .wdd-coin { width: 13px; height: 13px; }
  .wdd-cell > i { font-size: 9px; }
  .wdd-cell > img { width: 32px; height: 32px; margin-top: 10px; }
  .wdd-cell.done::after { width: 14px; height: 14px; right: 3px; top: 3px; font-size: 9px; }
  .wdd-msg { font-size: var(--fs-cap); min-height: 40px; padding: 8px 10px; gap: 8px; }
  .wdd-gi { width: 18px; height: 18px; }
  .wdd-btn { height: 46px; }
  :is(.wdd-c, .epop-c) { width: 18px; height: 18px; }
}

/* ---------------------------------------------------------- гонка лидеров */
#modal:has(> .epop) { width: 820px; max-width: calc(100vw - 32px); padding: 0; background: none; border: 0; overflow: visible; box-shadow: none; }
#modal:has(> .epop)::before { display: none; }
.epop {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: center; min-height: 340px;
  padding: 34px 0 34px 40px; overflow: hidden; color: #ececf2; font-family: var(--f-ui);
  background:
    radial-gradient(55% 90% at 100% 40%, rgba(255, 100, 20, .3), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #121014, #0a090b);
}
.epop.miss {
  background:
    radial-gradient(55% 90% at 100% 40%, rgba(255, 100, 20, .16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #111014, #09090b);
}
.epop-x {
  position: absolute; right: 16px; top: 16px; z-index: 4; width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; font-size: 16px; color: #ececf2;
  background: rgba(10, 9, 11, .75); border: 1px solid rgba(255, 138, 31, .45);
}
.epop-x:hover { background: rgba(255, 122, 24, .15); }
.epop-b { position: relative; z-index: 3; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-right: 8px; }
.epop-art { position: relative; z-index: 1; grid-column: 2; grid-row: 1; align-self: stretch; display: grid; place-items: center; margin: -34px 0; }
.epop-art::before {
  content: ''; position: absolute; inset: 12%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 110, 20, .4), transparent);
}
.epop.miss .epop-art::before { background: radial-gradient(closest-side, rgba(255, 110, 20, .22), transparent); }
.epop-art > img { width: 100%; max-height: 380px; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .7)); }
.epop-h { margin: 0; display: flex; flex-direction: column; gap: 4px; font: 900 38px/1.02 var(--f-hd); text-transform: uppercase; color: #fff; letter-spacing: .01em; }
.epop-h > span { color: var(--pop-or); text-shadow: 0 0 22px rgba(255, 122, 24, .55); }
.epop.miss .epop-h { font-size: 32px; }
.epop-t { margin: 0; font: 400 17px/1.5 var(--f-ui); color: #c9c9d6; max-width: 420px; }
.epop-t > b { color: #fff; font-weight: 700; }
.epop-sum { display: inline-flex; align-items: center; gap: 6px; color: #ffb043 !important; }
.epop-sum .lba-coin { width: 20px; height: 20px; }
.epop-hot { color: var(--pop-or) !important; }
.epop-btns { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 12px; margin-top: 8px; max-width: 440px; }
.epop-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  font: 800 var(--fs-ui)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.epop-btn svg { width: 20px; height: 20px; flex: none; }
.epop-btn.ghost { border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 9, 11, .7); color: #ececf2; }
.epop-btn.ghost:hover { border-color: rgba(255, 138, 31, .6); }
.epop-btn.go { border: 0; color: #1a0b00; background: linear-gradient(180deg, #ffb043, #ff6a00); box-shadow: 0 10px 30px -10px rgba(255, 100, 0, .8); }
.epop-btn.go:hover { filter: brightness(1.07); }

/* «Хочу в лидеры» — арт без фона: вписан, со свечением. */
.ofl .ofr-r.ofl-r {
  display: grid; place-items: center; min-height: 100%;
  background: radial-gradient(60% 55% at 50% 52%, rgba(255, 110, 20, .32), transparent 72%);
}
.ofl .ofl-r > img { width: 92%; max-height: 520px; object-fit: contain; filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .7)); }
.ofl-big {
  display: flex; align-items: center; gap: 18px; margin-top: 26px; padding: 16px 20px; border-radius: 12px;
  border: 1px solid rgba(255, 138, 26, .35); background: rgba(255, 122, 24, .06);
}
.ofl-big > b { font: 800 56px/1 var(--f-ui); color: var(--ofr-or); letter-spacing: -.02em; text-shadow: 0 0 22px rgba(255, 122, 24, .45); }
.ofl-big > small { font: 500 16px/1.35 var(--f-ui); color: #c9c9d6; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 880px) {
  #modal:has(> .epop) { width: 100%; max-width: none; }
  #modalBg > #modal.modal:has(> .epop) { padding-top: 0; }
  #modal > .epop { min-height: 100%; border: 0; border-radius: 0; }
  .epop { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0 18px 24px; gap: 4px; }
  .epop::before, .epop-c { display: none; }
  .epop-art { grid-column: 1; grid-row: 1; margin: 8px -18px 0; height: 290px; overflow: hidden; }
  .epop-b { grid-row: 2; padding-right: 0; }
  .epop-art > img { width: auto; height: 280px; max-width: 100%; max-height: none; object-fit: contain; }
  .epop-h { font-size: 30px; }
  .epop.miss .epop-h { font-size: 27px; }
  .epop-t { font-size: 15px; max-width: none; }
  .epop-btns { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .epop-btns > .go { order: -1; }
  .epop-btn { height: 52px; }
  .ofl .ofr-r.ofl-r { height: 260px; }
  .ofl .ofl-r > img { width: auto; height: 100%; max-height: 250px; }
  .ofl-big { margin-top: 16px; padding: 12px 14px; }
  .ofl-big > b { font-size: 40px; }
  .ofl-big > small { font-size: 13px; }
}

/* ============================================================ ЛОЯЛЬНОСТЬ · ОКНО ПРОГРЕССИИ (29.10)

   Владелец: «помимо линии с наградами там куча тегов или текста —
   передизайни». Шапка — значок уровня в рамке Higgsfield
   (assets/loyalty/badge.webp) и полоса опыта уровня с одной строкой
   цифр; лента наград — на фоне с постаментами (track-bg.webp); вместо
   текстовых тегов у вех — галочка или замок с уровнем; вместо девяти
   тегов «как копить XP» — сетка плиток с иконками (xp-*.webp), полный
   текст в подсказке. Префикс plv2 поверх старого plv. */

.modal:has(.plv2) { width: 900px; }
.plv2 .plv-h { padding: 22px 26px 4px; gap: 18px; }
.plv2 .plv-ava { width: 82px; height: 78px; }
.plv2 .plv-ring { display: none; }
.plv2 .plv-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(255, 122, 24, .35));
}
.plv2 .plv-num {
  inset: 18% 0 0; background: none; animation: none; box-shadow: none;
  color: #fff; font: 900 26px/1 var(--f-hd); text-shadow: 0 0 14px rgba(255, 122, 24, .9), 0 2px 4px rgba(0, 0, 0, .8);
}
.plv2 .plv-t { gap: 8px; }
.plv2 .plv-t > b { font: 800 24px/1.1 var(--f-hd); text-transform: uppercase; letter-spacing: .02em; }
.plv2 .plv-xp {
  position: relative; height: 10px; max-width: 520px; border-radius: 6px; overflow: hidden;
  background: #1a1a22; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.plv2 .plv-xp > i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px;
  background: linear-gradient(90deg, #ff5c00, #ffb043); box-shadow: 0 0 14px rgba(255, 122, 24, .8);
}
.plv2 .plv-t > span { font-size: var(--fs-cap); color: #9a9aa8; }
.plv2 .plv-t > span b { color: #ffb043; font-weight: 700; }

/* Лента наград на фоне-постаментах. */
.plv2 .plv-b {
  margin: 16px 18px 0; padding: 18px 14px 10px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 138, 31, .2);
  background: linear-gradient(180deg, rgba(8, 6, 6, .25), rgba(8, 6, 6, .55)), url('/assets/loyalty/track-bg.webp') center 70% / cover no-repeat, #0a0807;
}
.plv2 .plv-card { background: rgba(10, 9, 11, .72); border-color: rgba(255, 255, 255, .08); opacity: .8; gap: 6px; padding: 12px 8px 10px; }
.plv2 .plv-tier.done .plv-card { background: rgba(26, 16, 10, .8); }
.plv2 .plv-tier.cur .plv-card { background: linear-gradient(180deg, rgba(60, 30, 10, .85), rgba(18, 12, 10, .85)); box-shadow: 0 0 22px -6px rgba(255, 122, 24, .7); }
.plv2 .plv-tt > b { font: 700 var(--fs-cap)/1.2 var(--f-hd); }
.plv2 .plv-tt > small { color: #8a8a96; }
.plv2 .plv-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; letter-spacing: .04em; text-transform: none; }
.plv2 .plv-tag.cur { text-transform: uppercase; letter-spacing: .08em; }
.plv2 .plv-tag.done { padding: 0; background: none; }
.plv2 .plv-tag.lock { background: rgba(255, 255, 255, .05); color: #8a8a96; font-size: var(--fs-micro); }
.plv2 .plv-ok {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  background: #35d07f; color: #062312; font: 800 13px/1 var(--f-hd); box-shadow: 0 0 12px rgba(53, 208, 127, .55);
}
.plv2 .plv-lk {
  position: relative; width: 10px; height: 8px; margin-top: 4px; border-radius: 2px; background: currentColor;
}
.plv2 .plv-lk::before {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 6px; height: 6px;
  border: 2px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0;
}

/* Как копить опыт: плитки. */
.plv2 .plv-f { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 18px 22px; }
.plv2 .plv-k { padding: 0 4px; }
.plv2 .plv-xps { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.plv-xt {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 10px 4px 9px;
  border-radius: 12px; text-align: center; cursor: default;
  border: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(180deg, rgba(26, 22, 26, .9), rgba(12, 11, 14, .95));
  transition: border-color .15s, transform .15s;
}
.plv-xt:hover { border-color: rgba(255, 138, 31, .5); transform: translateY(-2px); }
.plv-xt > img { width: 46px; height: 46px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.plv-xt > b { font: 800 15px/1 var(--f-hd); color: #ffb043; white-space: nowrap; }
.plv-xt > small { max-width: 100%; font: 600 11px/1.2 var(--f-hd); color: #ececf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plv-xt > i { font: 400 10px/1.2 var(--f-ui); font-style: normal; color: #7b7b88; }
.plv2 .plv-cta { width: 100%; min-height: 52px; font-size: var(--fs-body); }

@media (max-width: 880px) {
  .modal:has(.plv2) { width: 100%; }
  .plv2 .plv-h { padding: 16px 16px 2px; gap: 12px; }
  .plv2 .plv-ava { width: 62px; height: 60px; }
  .plv2 .plv-num { font-size: 20px; }
  .plv2 .plv-t > b { font-size: 18px; padding-right: 36px; }
  .plv2 .plv-b { margin: 12px 12px 0; padding: 14px 10px 8px; }
  .plv2 .plv-card { background: rgba(10, 9, 11, .72) !important; border-radius: 12px; padding: 10px 6px; }
  .plv2 .plv-f { padding: 14px 12px 18px; }
  .plv2 .plv-xps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .plv-xt { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; column-gap: 6px; row-gap: 1px; padding: 8px; text-align: left; }
  .plv-xt > img { width: 30px; height: 30px; margin: 0; }
  .plv-xt > b { font-size: 13px; }
  .plv-xt > small { flex: 1 1 100%; font-size: 10.5px; }
  .plv-xt > i { flex: 1 1 100%; font-size: 9.5px; }
}

/* ============================================================ ДРОП ДНЯ · ШИРОКИЕ ЭКРАНЫ (29.10)

   Владелец: «на большом разрешении дроп дня смотрится плохо». Панель
   висела поверх пола сцены узкой полосой (не шире 1240 px) посреди сцены
   в 1700–2400 px. Теперь — во всю ширину сетки страницы, отделена от
   сцены тенью сверху; на широких экранах крупнее ячейки, сундук и цифры. */
@media (min-width: 881px) {
  .wha > .wha-drop.wdd {
    grid-column: 1 / -1; max-width: none; margin: 18px 0 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 40px -18px rgba(255, 122, 24, .45),
      0 0 0 1px rgba(255, 138, 31, .12), 0 30px 80px rgba(0, 0, 0, .85), 0 -30px 60px rgba(7, 7, 10, .7);
  }
}
@media (min-width: 1700px) {
  .wha > .wha-drop.wdd { grid-template-columns: 380px minmax(0, 1fr); padding: 30px 36px 30px 0; gap: 18px; }
  .wdd-main { gap: 20px; }
  .wdd-h > h3 { font-size: 42px; }
  .wdd-h > small { font-size: var(--fs-ui); }
  .wdd-grid { gap: 14px; }
  .wdd-cell { min-height: 140px; border-radius: 12px; }
  .wdd-cell > small { top: 12px; font-size: var(--fs-ui); }
  .wdd-cell > b { font-size: 28px; }
  .wdd-coin { width: 26px; height: 26px; }
  .wdd-cell > i { font-size: var(--fs-ui); }
  .wdd-cell > img { width: 82px; height: 82px; }
  .wdd-msg { min-height: 54px; font-size: var(--fs-body); }
  .wdd-btn { height: 56px; }
}
@media (min-width: 2200px) {
  .wha > .wha-drop.wdd { grid-template-columns: 440px minmax(0, 1fr); }
  .wdd-cell { min-height: 160px; }
  .wdd-cell > b { font-size: 32px; }
  .wdd-cell > img { width: 96px; height: 96px; }
}

/* ============================================================ АПГРЕЙДЕР · БЛОКИ 1 В 1 С LATEST UPGRADE (29.10, 2)

   Владелец: «блоки слева и справа 1 в 1 как на референсе — карточки не
   перегруженные и с прикольным стилем».
   • Карточки ставки: рамка цветом редкости со свечением, внутри тёмный
     градиент с подсветкой снизу; «ST™» отдельной оранжевой строкой,
     оружие белым жирным, название серым; скин крупно справа снизу, цена с
     монетой слева внизу. Пустые места — тонкой пунктирной рамкой.
   • Низ блока: тонкая линия (ползунок доплаты), «Итого к апгрейду» и сумма
     крупно с монетой — поле без рамки.
   • Цель: бейджи «● MW» и «StatTrak™», справа сверху круглые «♥» и
     оранжевая «⟳», стрелки в кругах, оружие и название оранжевым по центру,
     цена крупно; кнопка «Выбрать другой предмет» под карточкой. */

#page-upgrade .upx-h { font: 800 16px/1.2 var(--f-hd); letter-spacing: .04em; text-transform: uppercase; color: #fff; }

/* ---- карточки ставки ---- */
#page-upgrade #inBody.upx-cards.quad { gap: 10px; grid-template-rows: repeat(2, minmax(0, 1fr)) 40px; height: 268px; }
.upx-qc {
  border: 1.5px solid color-mix(in srgb, var(--rc) 85%, #fff 0%); border-radius: 10px;
  background:
    radial-gradient(90% 70% at 60% 110%, color-mix(in srgb, var(--rc) 38%, transparent), transparent 70%),
    linear-gradient(180deg, #17161d 0%, #0d0c11 100%);
  box-shadow: 0 0 16px -4px color-mix(in srgb, var(--rc) 70%, transparent), inset 0 0 18px -8px color-mix(in srgb, var(--rc) 80%, transparent);
}
.upx-qc-t { left: 11px; top: 9px; gap: 1px; }
.upx-qc-t > .upx-st { display: block; margin: 0 0 1px; font: 800 12px/1.1 var(--f-hd); color: #ff7a1a; letter-spacing: .02em; }
.upx-qc-t > b { font: 800 13px/1.2 var(--f-hd); color: #fff; }
.upx-qc-t > span { font: 500 12px/1.25 var(--f-ui); color: #9b9ba8; }
.upx-qc .upx-x { right: 6px; top: 6px; width: 22px; height: 22px; font-size: 18px; color: #e6e6ee; }
.upx-qc-art { left: 26%; right: 4px; top: 30%; bottom: 4px; }
.upx-qc-art > img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .75)); }
.upx-qc-p { left: 11px; bottom: 9px; font: 800 13px/1 var(--f-hd); }
.upx-qc-p .coin { width: 15px; height: 15px; margin-right: 5px; }
#page-upgrade #inBody.quad > .upx-card.ghost { border: 1px dashed rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .015); }
#page-upgrade #inBody.quad > .upx-card.add { border: 1px dashed rgba(255, 138, 31, .45); background: rgba(255, 122, 24, .04); color: #d8d8e2; }
.upx-clear { border-radius: 10px; border-color: #24242c; background: #141419; font: 700 14px/1 var(--f-hd); color: #e2e2ea; }
.upx-clear svg { width: 18px; height: 18px; }

/* ---- «Итого к апгрейду» ---- */
#page-upgrade:not(.upg-money) .upx-side.upx-in > .upx-sum { display: flex; flex-direction: column; gap: 4px; }
#page-upgrade .upx-side.upx-in > .upx-sum > .upx-slide { order: -1; padding: 0 0 4px; }
#page-upgrade .upx-side.upx-in > .upx-sum > .upx-slide input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(255, 255, 255, .12); }
#page-upgrade .upx-side.upx-in > .upx-sum > .upx-slide input[type=range]::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .12); }
#page-upgrade .upx-side.upx-in > .upx-sum { position: relative; }
#page-upgrade .upx-side.upx-in > .upx-sum .upx-sum-k {
  position: absolute; left: 42px; top: 14px; z-index: 2; min-height: 0; padding: 0; pointer-events: none;
}
#page-upgrade .upx-side.upx-in > .upx-sum .upx-sum-k > span { font: 500 12px/1.2 var(--f-ui); color: #9b9ba8; text-transform: none; letter-spacing: 0; }
#page-upgrade .upx-side.upx-in > .upx-sum .upx-sum-k > small { display: none; }
#page-upgrade .upx-side.upx-in > .upx-sum .upx-sum-row { margin: 0; padding: 0; background: none; border: 0; }
#page-upgrade .upx-side.upx-in > .upx-sum .upx-amt { gap: 10px; align-items: flex-end; background: none; box-shadow: none; }
#page-upgrade .upx-side.upx-in > .upx-sum .upx-amt .coin { width: 32px; height: 32px; flex: none; }
#page-upgrade .upx-side.upx-in > .upx-sum .upx-amt input {
  height: auto; padding: 16px 0 0; border: 0; background: none; -webkit-mask-image: none; mask-image: none;
  font: 800 24px/1.1 var(--f-hd); color: #fff;
}
#page-upgrade .upx-side.upx-in > .upx-sum > .upx-slide input[type=range]::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; }

/* ---- цель ---- */
#page-upgrade #targetGrid.full > .upx-tfull.out { border: 1.5px solid #ff8a1f; border-radius: 12px; padding: 14px 14px 14px; }
.upx-tfull.out .upx-tfull-bg { opacity: 1; }
.upx-tfull-chips { left: 12px; top: 12px; gap: 8px; }
.upx-tfull-chips > i {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  font: 800 12px/1 var(--f-hd); color: #fff; background: rgba(12, 11, 14, .82); border: 1px solid rgba(255, 255, 255, .12);
}
.upx-tfull-chips > i > .dot {
  width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #ffd27a 0 30%, #ff9a1c 32% 52%, transparent 55%), #3a2a10;
  box-shadow: 0 0 0 1.5px #ffb043;
}
.upx-tfull-chips > i.st { color: #ffa14a; background: rgba(70, 30, 6, .85); border-color: rgba(255, 122, 24, .45); }
.upx-tfull.out > .upx-tfull-acts { position: absolute; right: 12px; top: 12px; z-index: 4; display: flex; gap: 8px; }
.upx-tact {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(12, 11, 14, .82); border: 1px solid rgba(255, 255, 255, .14); color: #e6e6ee; transition: border-color .15s, color .15s;
}
.upx-tact svg { width: 17px; height: 17px; }
.upx-tact.fav svg path { fill: none; }
.upx-tact.fav.on { color: #ff5577; border-color: rgba(255, 85, 119, .6); }
.upx-tact.fav.on svg path { fill: currentColor; }
.upx-tact.rnd { color: #ff8a1f; border-color: rgba(255, 138, 31, .55); }
.upx-tact:hover { border-color: #ff8a1f; }
.upx-tnav { width: 38px; height: 38px; top: 42%; background: rgba(12, 11, 14, .72); border-color: rgba(255, 255, 255, .12); font-size: 24px; }
.upx-tnav.l { left: 12px; }
.upx-tnav.r { right: 12px; }
.upx-tfull.out .upx-tfull-art { height: 150px; margin-top: 26px; }
.upx-tfull.out .upx-tfull-art > img, .upx-tfull.out .upx-tfull-art > svg { max-width: 74%; max-height: 146px; }
.upx-tfull.out .upx-tfull-w { font: 800 15px/1.2 var(--f-hd); color: #ff9a2e; }
.upx-tfull.out .upx-tfull-n { font: 800 15px/1.2 var(--f-hd); color: #ff9a2e; }
.upx-tfull.out .upx-tfull-m { margin-top: 6px; font: 800 24px/1 var(--f-hd); }
.upx-tfull.out .upx-tfull-m .coin { width: 22px; height: 22px; }
.upx-tother { height: 44px; border-radius: 10px; border-color: #24242c; background: #141419; font: 700 14px/1 var(--f-hd); color: #e2e2ea; }
@container upx (min-width: 900px) {
  #page-upgrade #targetGrid.upx-tgts.full:has(> .upx-tfull.out) { min-height: 352px; }
}

/* ============================================================ «ХОЧУ В ЛИДЕРЫ» · УТП (29.10)

   Чип в шапке с отсчётом 48 ч (на телефоне — значок у края с +40%),
   отдельное окно-УТП (.ofl: тег с таймером, крупно +40%, три выгоды) и
   плашка в окне пополнения — нажатие ставит сумму на порог акции. */
.tb-leaders { border-color: rgba(255, 196, 60, .55); background: linear-gradient(180deg, rgba(255, 170, 30, .2), rgba(255, 122, 0, .06)); }
.tb-leaders .tbo-ic { color: #ffc43c; }
.ofd-leaders .ofd-ic { color: #ffc43c; }
.ofl .ofr-tag b { color: #fff; font-variant-numeric: tabular-nums; }
.ofl-usp { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ofl-usp > li { display: flex; align-items: center; gap: 14px; }
.ofl-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ofr-or);
  background: rgba(255, 122, 24, .1); border: 1px solid rgba(255, 138, 26, .35);
}
.ofl-ic .ofr-gi { width: 22px; height: 22px; }
.ofl-usp > li > span:last-child { display: flex; flex-direction: column; gap: 2px; font: 400 15px/1.35 var(--f-ui); color: #a3a3b0; }
.ofl-usp > li b { font: 600 17px/1.25 var(--f-ui); color: #fff; }
.ofl-usp > li small { display: block; font: inherit; color: inherit; }
.ofl .ofr-go { margin-top: 26px; }

.dpa-usp {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px 8px 8px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 170, 40, .55); color: #ececf2;
  background: radial-gradient(60% 120% at 0% 50%, rgba(255, 140, 30, .28), transparent 70%), rgba(30, 18, 8, .85);
  box-shadow: 0 0 22px -8px rgba(255, 122, 24, .7);
}
.dpa-usp > img { width: 54px; height: 54px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.dpa-usp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dpa-usp-t > b { font: 800 15px/1.2 var(--f-hd); color: #ffb043; }
.dpa-usp-t > small { font: 400 var(--fs-cap)/1.3 var(--f-ui); color: #b9b9c6; }
.dpa-usp > i { flex: none; padding: 8px 12px; border-radius: 8px; font: 700 var(--fs-cap)/1 var(--f-hd); font-style: normal;
  color: #1a0b00; background: linear-gradient(180deg, #ffb043, #ff6a00); }
.dpa-usp:hover { border-color: #ffb043; }
@media (max-width: 880px) {
  .ofl-usp { gap: 8px; margin-top: 14px; }
  .ofl-ic { width: 34px; height: 34px; border-radius: 10px; }
  .ofl-usp > li > span:last-child { font-size: 13px; }
  .ofl-usp > li b { font-size: 14px; }
  .dpa-usp > img { width: 44px; height: 44px; }
  .dpa-usp-t > b { font-size: 13.5px; }
}

/* Карточки ставки тянутся на всю строку подсетки (она общая с колесом и
   выше 268 px): без пустоты между «Очистить» и «Итого», как на референсе. */
@container upx (min-width: 900px) {
  #page-upgrade #inBody.upx-cards.quad {
    height: auto; min-height: 268px; align-self: stretch; contain: none;
    grid-template-rows: repeat(2, minmax(110px, 1fr)) 42px;
  }
  #page-upgrade .upx-side.upx-in > .upx-sum { align-self: end; }
}

/* ============================================================ ALIVE · ДРОП ДНЯ · ФОН И СТУПЕНИ (29.10, 2)

   Владелец: «блок дроп дня выглядит пустым — отрисуй бэкграунд или
   задизайни». Фон Higgsfield (assets/popups/drop-bg.webp): лава и камни
   слева — под сундук, справа тёмные броне-панели с оранжевыми швами.
   Поверх — затемнение вправо, чтобы ячейки и текст читались.
   • Ячейки — стеклянные плашки с подсветкой сверху; седьмой день (скин)
     — золотая, это цель недели. Под картинками — подпись, что это.
   • Строка ступени: дроп растёт с уровнем лояльности (шесть ступеней, как
     у колеса) — где игрок сейчас и что даст следующая. */
.wha > .wha-drop.wdd {
  background:
    linear-gradient(90deg, rgba(10, 9, 11, 0) 0%, rgba(10, 9, 11, .25) 30%, rgba(10, 9, 11, .62) 62%, rgba(10, 9, 11, .78) 100%),
    linear-gradient(0deg, rgba(10, 9, 11, .55), rgba(10, 9, 11, 0) 45%),
    url(/assets/popups/drop-bg.webp) left center / cover no-repeat,
    #0a090b;
}
.wdd-art::before { background: radial-gradient(closest-side, rgba(255, 110, 20, .5), transparent); }
.wdd-cell {
  backdrop-filter: blur(3px);
  border-color: rgba(255, 255, 255, .09);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(255, 138, 31, .14), transparent 70%),
    linear-gradient(180deg, rgba(28, 25, 31, .82), rgba(12, 11, 14, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 24px -14px rgba(0, 0, 0, .9);
  transition: transform .18s ease, border-color .18s ease;
}
.wdd-cell:not(.done):hover { transform: translateY(-2px); border-color: rgba(255, 138, 31, .45); }
.wdd-cell > img { margin-top: 10px; }
.wdd-cap {
  max-width: 100%; padding: 0 4px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 var(--fs-label)/1.15 var(--f-hd); font-style: normal; color: #d8d2c8;
}
.wdd-cell.top:not(.cur) {
  border-color: rgba(255, 196, 60, .55);
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(255, 186, 40, .22), transparent 70%),
    linear-gradient(180deg, #2a2010, #120d06);
  box-shadow: 0 0 0 1px rgba(255, 196, 60, .15), 0 0 24px -6px rgba(255, 186, 40, .55);
}
.wdd-cell.top > .wdd-cap { color: #ffd27a; }
.wdd-cell.top > small { color: #ffd27a; }

.wdd-tier {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0;
  padding: 8px 14px; border-radius: 10px; box-sizing: border-box;
  border: 1px solid rgba(255, 138, 31, .22);
  background: linear-gradient(90deg, rgba(255, 122, 24, .12), rgba(255, 122, 24, .02) 60%), rgba(10, 9, 11, .55);
}
.wdd-tier-now { display: flex; align-items: baseline; gap: 8px; }
.wdd-tier-now > small {
  font: 600 var(--fs-micro)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #a2a2b2;
}
.wdd-tier-now > b { font: 800 var(--fs-body)/1 var(--f-hd); color: #ffb347; text-transform: uppercase; letter-spacing: .04em; }
.wdd-pips { display: inline-flex; gap: 4px; }
.wdd-pips > i { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.wdd-pips > i.on { background: rgba(255, 138, 31, .6); }
.wdd-pips > i.cur { background: #ff8a1f; box-shadow: 0 0 8px rgba(255, 138, 31, .8); }
.wdd-tier-nx { flex: 1 1 220px; min-width: 0; font: 500 var(--fs-cap)/1.35 var(--f-ui); color: #b9b9c6; }

@media (min-width: 1700px) {
  .wdd-cap { font-size: var(--fs-cap); }
  .wdd-tier { padding: 10px 18px; }
  .wdd-tier-nx { font-size: var(--fs-ui); }
}
@media (max-width: 1180px) and (min-width: 881px) {
  .wdd-cap { font-size: var(--fs-micro); }
}
@media (max-width: 880px) {
  .wha > .wha-drop.wdd {
    grid-template-areas: "art head" "tier tier" "grid grid" "foot foot";
    background:
      linear-gradient(90deg, rgba(10, 9, 11, .1), rgba(10, 9, 11, .7) 55%),
      url(/assets/popups/drop-bg-m.webp) left top / auto 100% no-repeat,
      #0a090b;
  }
  .wdd-tier { grid-area: tier; padding: 6px 10px; gap: 8px 10px; }
  .wdd-tier-now > b { font-size: var(--fs-cap); }
  .wdd-pips > i { width: 12px; height: 4px; }
  .wdd-tier-nx { flex-basis: 100%; font-size: var(--fs-micro); }
  .wdd-cap { font-size: 9px; padding: 0 1px; }
  .wdd-cell > img { margin-top: 8px; }
}
@media (max-width: 880px) {
  .wdd-cap-l { display: none; }
  .wdd-cap { font-size: 10px; }
}

/* ============================================================ ALIVE · ДРОП, ЛОЯЛЬНОСТЬ, КОЛЕСО — БЕЗ ЛИШНИХ НАДПИСЕЙ (29.10, 3)

   Владелец: убрать «заморозку», строку ступени, подвал-условие и длинные
   кнопки; «Забрать» — маленькая полупрозрачная под днём, под забранными —
   галочка. В окне лояльности «Забрать» — в карточке на месте «Активно».
   На колесе — без «Наград» справа и «Уровней колеса» снизу; тир колеса
   крупно своим цветом на плашке над диском. */

/* ---------- дроп дня */
.wdd-h { align-items: center; }
.wdd-lv {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  font: 800 var(--fs-label)/1 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #ffcf6a;
  border: 1px solid rgba(255, 196, 60, .45); background: rgba(255, 170, 40, .1);
  box-shadow: 0 0 16px -4px rgba(255, 170, 40, .6);
}
.wdd-day { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wdd-slot { display: grid; place-items: center; height: 32px; }
.wdd-cell.done::after { content: none; }
.wdd-cell.done { opacity: .55; }
.wdd-ok {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 800 13px/1 var(--f-hd); font-style: normal; color: #07210f; background: #35d07f;
  box-shadow: 0 0 12px -2px rgba(53, 208, 127, .7);
}
.wdd-take {
  height: 30px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  font: 800 var(--fs-micro)/1 var(--f-hd); letter-spacing: .08em; text-transform: uppercase; color: #ffd8a8;
  border: 1px solid rgba(255, 138, 31, .55); background: rgba(255, 122, 24, .16); backdrop-filter: blur(4px);
  transition: background .15s ease, color .15s ease;
}
.wdd-take:hover { background: rgba(255, 122, 24, .32); color: #fff; }
.wdd-take:disabled { opacity: .5; cursor: default; }
.wdd-wait { font: 600 var(--fs-micro)/1 var(--f-hd); font-style: normal; color: #8f8f9c; white-space: nowrap; }
.wdd-btn.sm { width: auto; height: 40px; padding: 0 22px; justify-self: start; font-size: var(--fs-label); }
.wdd-foot:has(> .wdd-btn.sm) { display: flex; }
@media (min-width: 1700px) {
  .wdd-lv { height: 32px; font-size: var(--fs-ui); }
  .wdd-slot { height: 36px; }
  .wdd-take { height: 34px; font-size: var(--fs-cap); }
}
@media (max-width: 880px) {
  .wha > .wha-drop.wdd { grid-template-areas: "art head" "grid grid" "foot foot"; }
  .wdd-h { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .wdd-lv { height: 22px; padding: 0 8px; font-size: 10px; }
  .wdd-day { gap: 5px; }
  .wdd-slot { height: 24px; }
  .wdd-take { height: 24px; padding: 0 4px; width: 100%; font-size: 8.5px; letter-spacing: .02em; border-radius: 6px; }
  .wdd-ok { width: 18px; height: 18px; font-size: 10px; }
  .wdd-wait { font-size: 9px; }
}

/* ---------- окно лояльности */
.plv2 .plv-act {
  cursor: pointer; border: 0; font: 800 var(--fs-micro)/1 var(--f-hd);
  box-shadow: 0 0 0 0 rgba(255, 122, 24, .6); animation: plvPulse 1.8s ease-out infinite;
}
.plv2 .plv-act:hover { filter: brightness(1.1); }
.plv2 .plv-act:disabled { opacity: .6; animation: none; cursor: default; }
.plv2 .plv-tier.ready .plv-card { border-color: rgba(255, 138, 31, .7); box-shadow: 0 0 22px -6px rgba(255, 122, 24, .8); }
@keyframes plvPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 122, 24, .55); }
  70% { box-shadow: 0 0 0 8px rgba(255, 122, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 24, 0); }
}
@media (prefers-reduced-motion: reduce) { .plv2 .plv-act { animation: none; } }

/* ---------- колесо: тир крупно на плашке */
.wha-xp > .wha-xp-txt { gap: 3px; }
.wha-xp-txt > b {
  font: 900 26px/1 var(--f-hd); letter-spacing: .14em;
  background: linear-gradient(180deg, #fff, var(--tier-c, #d8d8e2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px var(--tier-g, rgba(255, 255, 255, .25)));
}
.wha-xp-txt > span { order: -1; font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: #8f8f9c; }
.wha-xp[data-tier="0"] { --tier-c: #c4c4d0; --tier-g: rgba(196, 196, 208, .35); }
.wha-xp[data-tier="1"] { --tier-c: #e0a066; --tier-g: rgba(224, 140, 70, .55); }
.wha-xp[data-tier="2"] { --tier-c: #dfe7f0; --tier-g: rgba(200, 220, 240, .55); }
.wha-xp[data-tier="3"] { --tier-c: #ffcf4a; --tier-g: rgba(255, 196, 40, .7); }
.wha-xp[data-tier="4"] { --tier-c: #9fe7ff; --tier-g: rgba(120, 220, 255, .6); }
.wha-xp[data-tier="5"] { --tier-c: #c9a2ff; --tier-g: rgba(180, 130, 255, .7); }
@media (max-width: 880px) {
  /* На телефоне плашка была скрыта; тир теперь главное в ней — показываем
     компактно над диском. */
  .wha-center > .wha-xp { display: block; max-width: 230px; margin: 0 auto 6px; }
  .wha-xp-txt > b { font-size: 17px; }
  .wha-xp-txt > span { font-size: 8px; }
}

/* ---------- окно лояльности: карточки одного размера (29.10, 4)
   Владелец: «сделай блоки наград одинаковыми по размеру». Высота одна на
   всех; название и подпись — не больше двух строк, кнопка или статус —
   всегда внизу, на одной линии. */
.plv2 .plv-tier { align-items: stretch; }
.plv2 .plv-card { height: 186px; justify-content: flex-start; }
.plv2 .plv-tt { flex: 1 1 auto; min-height: 0; justify-content: flex-start; }
.plv2 .plv-tt > b, .plv2 .plv-tt > small {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.plv2 .plv-tag, .plv2 .plv-act { flex: none; margin-top: auto; align-self: center; }
@media (max-width: 880px) {
  .plv2 .plv-card { height: 176px; }
}

/* ============================================================ ALIVE · ЛУЧШИЙ ДРОП И ПОДВАЛ · ТЕЛЕФОН (30.10)

   Владелец: «в карточке скина — название сверху, монетки снизу, чтобы
   скин влез крупнее» и «вкладки в футере — плавно, а то скачет вёрстка». */
@media (max-width: 880px) {
  /* Лучший дроп: название → скин крупно → цена. Подписи — в одну строку. */
  .hm-win { width: 104px; height: 128px; gap: 3px; padding: 7px 7px 8px; }
  .hm-win > .hm-win-tx { display: contents; }
  .hm-win-tx > small { order: 0; font-size: 9.5px; }
  .hm-win-tx > b { order: 1; font-size: 10.5px; }
  .hm-win > .hm-win-art { order: 2; flex: 1 1 auto; height: auto; min-height: 0; margin: 2px -3px; }
  .hm-win-p { order: 3; margin-top: 0; font-size: 12px; }

  /* Подвал: список раскрывается плавно; max-height ставит footer.js по
     настоящей высоте списка. */
  .ft-col ul {
    display: flex; flex-direction: column; overflow: hidden; max-height: 0; opacity: 0; margin: 0;
    transition: max-height .32s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, margin .32s ease;
  }
  .ft-col.open ul { display: flex; opacity: 1; margin: 4px 0 8px; }
}
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .ft-col ul { transition: none; }
}

/* ============================================================ ALIVE · ГОНКА ЛИДЕРОВ · СУММА В ОКНЕ ПРИЗА 30.10

   «1 место за прошлый период — ¤19.6 уже на балансе»: сумма была
   inline-flex, а первой в ней шла монета без текста — базовой линией
   строки браузер брал низ монеты, и сумма висела выше слов. Теперь сумма —
   обычный текст строки, монета опущена к буквам. */

.epop-sum { display: inline; white-space: nowrap; }
.epop-sum .lba-coin { display: inline-block; vertical-align: -.2em; margin-right: 6px; }

/* ============ ALIVE · PLINKO И КЕШБЭК · ТЕЛЕФОН (30.10)
   Plinko (владелец: «последние коэффициенты сверху на фоне игры
   полупрозрачными, как в Ракете, чтобы запуск влезал в игровую зону»):
   лента «Последние» — не отдельная строка под сценой, а ряд чипов поверх
   верха сцены, как .ra-hist у Ракеты: тёмная полупрозрачная подложка,
   цвет текста и обводки — по множителю (--hc ставит plinko.js через
   toneColor). «?» — справа в той же строке, заряд — под чипами. На 360–374 «Запуск» —
   сразу под ставкой: риск и ряды там идут друг под другом и уводили кнопку
   за край экрана 740 px; заодно в сетке появилась пропавшая область «ap»
   (автоигра без неё ломала колонки).
   Кешбэк: на телефоне окно на весь экран и один крестик 44×44 справа
   вверху (offers.js кладёт свой крестик сразу, общий .modal-x-auto не
   ставится). Plinko — по классу .mob, как секция «PLINKO — ТЕЛЕФОН v2». */
#pkRoot.pk.mob .pk-feed { position: absolute; z-index: 8; top: 10px; left: 10px; right: 56px; width: auto; max-height: none;
  display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
#pkRoot.pk.mob .pk-side-h { display: none; }
#pkRoot.pk.mob .pk-feed-list { display: flex; flex-direction: row; gap: 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
#pkRoot.pk.mob .pk-pill { flex: none; width: auto; height: 26px; padding: 0 9px; gap: 0; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hc, #a2a2b2) 33%, transparent); background: rgba(8, 8, 14, .7);
  color: var(--hc, #a2a2b2); font: 700 13px/1 var(--f-hd); letter-spacing: 0; box-shadow: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: auto; }
#pkRoot.pk.mob .pk-pill::before, #pkRoot.pk.mob .pk-pill-ava { display: none; }
#pkRoot.pk.mob .pk-pill b { flex: none; font-weight: 700; overflow: visible; }
#pkRoot.pk.mob .pk-feed .pk-empty { display: none; }

/* «Как играть?» — в одну строку с чипами, справа. Заряд — под чипами и
   узкий: шире 110 px он закрывал жерло вытяжки, откуда падает ядро
   (труба ездит по просвету между рельсами). Подпись — «Заряд». */
#pkRoot.pk.mob .howto-btn { top: 5px; right: 10px; width: 36px; height: 36px; }
#pkRoot.pk.mob .howto-btn > svg { width: 18px; height: 18px; }
#pkRoot.pk.mob .pk-charge { top: 44px; left: 10px; width: 108px; padding: 8px 10px; row-gap: 6px; }
#pkRoot.pk.mob .pk-charge-h { font-size: 11px; }
#pkRoot.pk.mob .pk-charge-h .pk-l-full { display: none; }
#pkRoot.pk.mob .pk-charge-h .pk-l-mob { display: inline; }
#pkRoot.pk.mob .pk-charge-tx { font-size: 10.5px; line-height: 1.3; white-space: normal; }

/* меню сразу под сценой: отступ раньше давала строка «Последние» */
#pkRoot.pk.mob .pk-bar { margin-top: 10px; }

@media (max-width: 374px) {
  #pkRoot.pk.mob .pk-bar { grid-template-areas: "bet bet" "go go" "skins skins" "risk risk" "rows rows" "ap ap"; }
}

/* кешбэк */
@media (max-width: 880px) {
  #modal:has(> .cbk [data-close]) > .modal-x-auto { display: none; }
  #modal > .cbk { width: 100%; }
  #modal > .cbk .ofr-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 12px; font-size: 18px; }
}
/* ---- конец секции «PLINKO И КЕШБЭК · ТЕЛЕФОН (30.10)» ---- */

/* ============ ALIVE · ИНВЕНТАРЬ · ТЕЛЕФОН (30.10) */
/* Кабинет, инвентарь: «Выбрать все» в заголовке на телефоне, на карточке
   скина «Продать» и квадрат Steam, полоса выбора с двумя выходами —
   «В Steam» и «На баланс». Разметка — index.html, логика — inventory.js. */

/* Знак Steam (inline SVG): цвет — от кнопки. */
.pra-steam-ic { display: block; width: 16px; height: 16px; flex: none; }

/* Кнопка выбора в заголовке — только на телефоне: на десктопе та же
   работа у «Отметить всё» в панели инструментов. */
.pra-inv-all { display: none; }

/* Карточка: «Продать» и Steam. Цена на кнопке — только на телефоне. */
.pra-it-act > button.sl { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pra-it-act > button.sl > b { display: none; }
.pra-it-act > button.s.st {
  display: grid; place-items: center; color: #ececf2;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s, color .15s;
}
.pra-it-act > button.s.st:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* Полоса выбора: счётчик, «Выбрано» с суммой, «Снять», две кнопки. */
.pra-selbar { gap: 14px; }
.pra-selbar-t { gap: 2px; }
.pra-selbar-t > small {
  font: 600 var(--fs-micro)/1.2 var(--f-hd); letter-spacing: .1em; text-transform: uppercase; color: #a2a2b2;
}
.pra-selbar-t > .pra-selbar-s { margin: 0; font-size: 20px; line-height: 1.15; }
.pra-selbar-x { margin-left: auto; height: 40px; padding: 0 14px; }
.pra-selbar-b { display: flex; gap: 8px; }
.pra-selbar-b > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px;
  border-radius: 10px; cursor: pointer; white-space: nowrap;
  font: 700 var(--fs-ui)/1 var(--f-hd); letter-spacing: .06em; text-transform: uppercase;
}
.pra-selbar-st {
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); color: #ececf2;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .15s, border-color .15s;
}
.pra-selbar-st:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .32); }
.pra-selbar-st:disabled { opacity: .55; cursor: progress; }
.pra-selbar-st > .pra-steam-ic { width: 18px; height: 18px; }

@media (max-width: 880px) {
  /* Заголовок: «Инвентарь» и «Выбрать все» в строку, счёт — под ними. */
  .pra-inv-h { flex-wrap: wrap; align-items: center; row-gap: 6px; }
  .pra-inv-h > #invCount { order: 2; flex-basis: 100%; }
  .pra-inv-all {
    order: 1; margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px 0 12px; border-radius: 11px; cursor: pointer;
    border: 1px solid rgba(255, 122, 24, .45); background: rgba(255, 122, 24, .1); color: #ffb15c;
    font: 700 var(--fs-ui)/1 var(--f-hd); transition: background .15s, color .15s;
  }
  .pra-inv-all > i {
    width: 18px; height: 18px; flex: none; border-radius: 6px; box-sizing: border-box;
    border: 1.5px solid currentColor; background: transparent center / 14px no-repeat;
  }
  .pra-inv-all.on { background: #ff7a18; border-color: #ff7a18; color: #180a00; box-shadow: 0 0 16px rgba(255, 122, 24, .45); }
  .pra-inv-all.on > i { border-color: #180a00; background-color: #180a00; background-image: url(/assets/icons/check.webp); }

  /* Действия карточки — всегда на виду: наведения на телефоне нет. Скин:
     слева «Продать» с ценой (не влезла — цена уходит второй строкой),
     справа квадрат Steam. Строку цены над кнопками у скина прячем. */
  .pra-it { padding-bottom: 10px; }
  .pra-it.sk .pra-it-pr { display: none; }
  .pra-it-act {
    position: relative; inset: auto; z-index: 4; margin-top: 10px; padding: 0; gap: 6px;
    background: none; opacity: 1; transform: none; pointer-events: auto;
  }
  .pra-it-act > button { height: 40px; padding: 0 6px; border-radius: 10px; }
  .pra-it-act > button.sl {
    flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-content: center; column-gap: 6px; row-gap: 1px;
  }
  .pra-it-act > button.sl > span { font: 700 var(--fs-micro)/1.1 var(--f-hd); letter-spacing: .06em; }
  .pra-it-act > button.sl > b {
    display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
    font: 700 13px/1.1 var(--f-hd); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
  }
  .pra-it-act > button.sl > b > .coin { width: 13px; height: 13px; }
  .pra-it-act > button.s { width: 40px; flex: none; }
  .pra-it-act > button.st > .pra-steam-ic { width: 20px; height: 20px; }

  /* Полоса выбора — во всю ширину у нижнего края экрана: сверху счёт и
     сумма со «Снять», снизу две крупные кнопки. Под неё — запас у
     страницы, чтобы она не закрывала конец кабинета. */
  #page-me:has(#invSellBar:not([hidden])) { padding-bottom: 150px; }
  /* Вход страницы (fade) оставлял на .pra transform после анимации, и
     fixed-полоса считалась от неё, а не от экрана. */
  #page-me.on > .pra { animation-fill-mode: backwards; }
  .pra-selbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t x" "b b b";
    align-items: center; gap: 12px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, #24150b, #0d0c10);
    box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, .85), 0 -10px 34px -18px rgba(255, 122, 24, .65);
  }
  .pra-selbar-n { grid-area: n; }
  .pra-selbar-t { grid-area: t; flex: none; }
  .pra-selbar-t > .pra-selbar-s { font-size: 20px; }
  .pra-selbar-x { grid-area: x; flex: none; margin: 0; height: 40px; }
  .pra-selbar-b { grid-area: b; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; }
  .pra-selbar-b > button { height: 50px; padding: 0 10px; border-radius: 13px; flex: none; }
  .pra-selbar-st { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pra-selbar-st > .pra-steam-ic { width: 20px; height: 20px; }
}

/* ============================================================ ALIVE · PLINKO И ИНВЕНТАРЬ · ДОРАБОТКИ (30.10, 2)

   Владелец: «у Запуска иконка не нужна», «риск „низкий, средний,
   высокий“ не помещается — текст меньше», «в инвентаре убери иконки слева
   в углу — дублируют подсветку». */
.pk-go { justify-content: center; text-align: center; }
.pk-go-tx { align-items: center; }
#pkRoot.pk.mob #pkRisk .pk-seg, .pk.mob #pkRisk .pk-seg {
  font-size: 10px; letter-spacing: 0; padding: 0 1px; white-space: nowrap;
}
@media (max-width: 374px) {
  #pkRoot.pk.mob #pkRisk .pk-seg, .pk.mob #pkRisk .pk-seg { font-size: 9px; }
}
.pra-it-mk { display: none; }

/* ============================================================ ALIVE · АПГРЕЙДЕР · ПРАВКИ ВЛАДЕЛЬЦА 30.10

   1. Карточки ставки 2×2 — картинка целиком: она стояла в сетке со строкой
      «по содержимому», max-height: 100% там не работает, и квадратный
      рендер 256 px вылезал за карточку (обрезало ствол и низ).
   2. Соло: под блоками — «Последние удачные апгрейды» (#upsWins).
   3. «Выбрать другой предмет» крупнее и внизу блока: цель тянется на две
      строки сетки (строка «Вы получите» справа пустая с 28.10), под
      кнопкой больше нет пустоты.
   4. Огненный фон цели темнее к низу, оружие белым, название оранжевым —
      подписи больше не сливаются с фоном.
   5. LIVE → SOLO без скачка: место строки отсчёта держится и в соло.
      Ролик сцены — холстом: над кольцом нет кнопок плеера браузера.
   6. Телефон по референсам 30.10: «Ваши скины» / «Выбрать скины» / «×N»,
      «Вы получите» в одну строку, процент шанса внутри кольца, на
      «Балансе» — множитель плашкой, «мин.» у суммы, поле суммы в рамке,
      фишки 5 · 10 · 25 · 50 · 100. */

/* ---- 1. карточки ставки 2×2 ---- */
/* Сетка ставки — не ниже 330 px: карточки крупнее (как на референсе), а
   строка сетки, растянутая ей, держит и карточку цели справа. */
#page-upgrade #inBody.upx-cards.quad { height: auto; min-height: 330px; align-self: stretch; }
/* «Баланс» — той же высоты: иначе на компьютере блоки и лента под ними
   прыгали на 50–80 px при каждом переключении «Скины / Баланс». */
@container upx (min-width: 700px) {
  #page-upgrade.upg-money .upx-side > #inBody.upx-cards { min-height: 330px; }
}
.upx-qc-art { display: block; left: 24%; right: 2px; top: 12%; bottom: 2px; }
.upx-qc-art > img, .upx-qc-art > svg {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: contain; object-position: center;
}

/* ---- 2. последние удачные апгрейды (соло) ---- */
.ups-wins {
  position: relative; padding: 14px 16px 16px; border-radius: 14px;
  border: 1px solid rgba(255, 138, 31, .32);
  background: linear-gradient(180deg, rgba(255, 122, 24, .07), rgba(255, 122, 24, 0) 55%), rgba(12, 11, 15, .92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 34px -16px rgba(255, 100, 0, .7);
}
.ups-wins[hidden] { display: none; }
.ups-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ups-head h3 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font: 800 16px/1.2 var(--f-hd); letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.ups-crown { flex: none; width: 22px; height: 22px; color: #ffa838; filter: drop-shadow(0 0 6px rgba(255, 138, 31, .6)); }
.ups-next {
  flex: none; width: 36px; height: 28px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 1px solid #2a2a33; background: #17171d; color: #fff; font: 600 16px/1 var(--f-ui);
  transition: border-color .15s;
}
.ups-next:hover:not(:disabled) { border-color: rgba(255, 138, 31, .7); }
.ups-next:disabled { opacity: .35; cursor: default; }
.ups-wrap { position: relative; }
.ups-list {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.ups-list::-webkit-scrollbar { display: none; }
.ups-card {
  --rc: #8a8a9a;
  position: relative; flex: 0 0 auto; width: 184px; height: 104px; overflow: hidden; scroll-snap-align: start;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .07);
  background:
    radial-gradient(ellipse 70% 85% at 28% 55%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 72%),
    linear-gradient(180deg, #17161d, #0e0d12);
}
.ups-art { position: absolute; left: 6px; top: 8px; width: 56%; height: 68%; display: grid; place-items: center; }
.ups-art > img, .ups-art > svg {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7));
}
.ups-x {
  position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font: 800 13px/1 var(--f-hd); color: #ffb043; font-variant-numeric: tabular-nums;
}
.ups-up { flex: none; width: 18px; height: 18px; color: #35d07f; filter: drop-shadow(0 0 4px rgba(53, 208, 127, .55)); }
.ups-p {
  position: absolute; right: 10px; top: 40px; display: inline-flex; align-items: center;
  font: 800 14px/1 var(--f-hd); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ups-p .coin { width: 14px; height: 14px; margin-right: 5px; }
.ups-ago { position: absolute; left: 10px; bottom: 8px; font: 500 11px/1 var(--f-ui); color: #8d8d9a; white-space: nowrap; }
.ups-prev {
  position: absolute; left: -8px; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 28px; height: 46px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid #2a2a33; background: rgba(14, 14, 18, .94); color: #fff; font: 400 22px/1 var(--f-ui);
}
.ups-prev[hidden] { display: none; }
.ups-empty { margin: 0; padding: 30px 0; text-align: center; font: 500 13px/1.3 var(--f-ui); color: #8d8d9a; }

/* ---- 3. цель на две строки, кнопка внизу ---- */
#page-upgrade:not(.upg-money) .upx-side.upx-out > #targetGrid { grid-row: 3 / 5; }
#page-upgrade #targetGrid.full > .upx-tfull.out { flex: 1 1 auto; }
.upx-tother { flex: none; height: 52px; gap: 10px; border-radius: 12px; font: 700 15px/1 var(--f-hd); }
.upx-tother svg { width: 20px; height: 20px; }

/* ---- 4. огненный фон цели темнее, подписи читаются ---- */
.upx-tfull.out .upx-tfull-bg {
  background:
    linear-gradient(180deg, rgba(7, 6, 6, .3) 0%, rgba(7, 6, 6, .15) 32%, rgba(7, 6, 6, .6) 62%, rgba(7, 6, 6, .9) 100%),
    url('/assets/upg/target-bg.webp') center 60% / cover no-repeat;
}
.upx-tfull.out .upx-tfull-w { color: #fff; text-shadow: 0 1px 2px #000, 0 2px 10px rgba(0, 0, 0, .9); }
.upx-tfull.out .upx-tfull-n { color: #ffa94d; text-shadow: 0 1px 2px #000, 0 2px 10px rgba(0, 0, 0, .9); }
.upx-tfull.out .upx-tfull-m { text-shadow: 0 1px 2px #000, 0 2px 12px rgba(0, 0, 0, .9); }

/* ---- 5. LIVE → SOLO без скачка, видео без кнопок браузера ---- */
#page-upgrade:has(#upgMode:not([hidden])) #uplClock[hidden] { display: block !important; visibility: hidden; min-height: 18px; }
/* Ролик сцены — холстом (upgfx.js): <video> в странице нет, и браузеру не
   над чем рисовать кнопки плеера («⧉», «⏭»). */
.upa-vcv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .upa-vcv { display: none; } }

/* ---- 7 (второй заход 30.10). Цели — крупнее и до низа блока; монеты
   «Баланса» — одного размера, содержимое по центру ----
   Правило «по четыре карточки в ряд» (27.10) задавало обеим полосам
   height: 248px — сетка целей и правые монеты кончались посреди блока.
   Теперь высота — от строк сетки (цель на строки 3–4), три колонки,
   карточка 4:5. Высота карточки — от ширины сетки (cqw: сетка — контейнер
   запроса), а не aspect-ratio: строки сетки его не учитывали и выходили
   по 16 px, карточки налезали друг на друга.
   Монеты «Баланса» (третий заход 30.10, владелец: «жёлтые карточки
   одинакового размера и по центру»): обе — на строке 3, той же высоты и
   вровень; монеты с подписью — по центру карточки. */
@container upx (min-width: 700px) {
  #page-upgrade .upx-side.upx-out > #targetGrid.upx-tgts { height: auto; align-self: stretch; }
  #page-upgrade:not(.upg-money) .upx-side.upx-out > #targetGrid.upx-tgts:not(.full) {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px;
  }
  #page-upgrade .upx-side.upx-out > #targetGrid:not(.full) > .upx-card:not(.coins) { height: calc((100cqw - 20px) / 3 * 1.25); }
  #page-upgrade .upx-side.upx-out > #targetGrid:not(.full) > .upx-card:not(.coins) :is(.upx-card-w, .upx-card-n) { font-size: 12px; }
  #page-upgrade .upx-side.upx-out > #targetGrid:not(.full) > .upx-card:not(.coins) .upx-card-p { font-size: 13px; }
  #page-upgrade.upg-money .upx-side > :is(#inBody, #targetGrid) > .upx-card.coins { justify-content: center; }
  /* Затухание низа сетки целей — для прокрутки; монетам оно срезало рамку. */
  #page-upgrade.upg-money .upx-side.upx-out > #targetGrid.upx-tgts { -webkit-mask-image: none; mask-image: none; }
}

/* ---- 8. подпись ползунка и «Всего» ----
   Над ползунком на «Скинах» — «Добавить с баланса» и сколько добавлено.
   «Итого к апгрейду» → «Всего»; подпись суммы — строкой над ней от левого
   края блока (раньше она висела над числом со сдвигом 42 px — «съехала»),
   справа — «мин.». */
#page-upgrade .upx-side.upx-in > .upx-sum > .upx-slide-k {
  order: -2; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font: 500 12px/1.2 var(--f-ui); color: #9b9ba8;
}
.upx-slide-k > b { display: inline-flex; align-items: center; font: 700 12px/1 var(--f-hd); color: #e6e6ee; font-variant-numeric: tabular-nums; white-space: nowrap; }
.upx-slide-k > b .coin { width: 13px; height: 13px; margin-right: 4px; }
/* На «Балансе» ползунок — сама ставка, подписи над ним нет; место её
   держится, чтобы блоки не прыгали при «Скины / Баланс». */
#page-upgrade.upg-money .upx-side.upx-in > .upx-sum > .upx-slide-k { visibility: hidden; }
/* Блок суммы — одной раскладки на обеих вкладках (на «Балансе» был grid с
   другим зазором, и блоки расходились по высоте на 12 px). */
#page-upgrade .upx-side.upx-in > .upx-sum { display: flex; flex-direction: column; gap: 4px; }
#page-upgrade .upx-side.upx-in > .upx-sum .upx-sum-k {
  position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  min-height: 0; padding: 0; pointer-events: auto;
}
#page-upgrade .upx-side.upx-in > .upx-sum .upx-sum-k > span { font: 500 12px/1.2 var(--f-ui); color: #9b9ba8; text-transform: none; letter-spacing: 0; }
.upx-min { display: inline-flex; align-items: center; font: 600 12px/1 var(--f-ui); font-style: normal; color: #9b9ba8; white-space: nowrap; }
.upx-min .coin { width: 13px; height: 13px; margin: 0 3px 0 5px; }
#page-upgrade .upx-side.upx-in > .upx-sum .upx-amt input { padding: 0; }

/* ---- 6. телефон ---- */
.upx-chips { display: none; }
@container upx (max-width: 699px) {
  #page-upgrade .upx-core .upa-dial .ring:not(.is-empty) .ring-val { font-size: calc(var(--dial) * .15); }
  .upm-h > b { white-space: nowrap; font-size: 9px; letter-spacing: .02em; }
  .upm-art { height: 76px; }
  .upm-art > img, .upm-art > svg { max-height: 72px; }
  .upm-more { font-size: 11px; padding: 2px 6px; }
  .upm-swap svg { width: 14px; height: 14px; }
  /* «Выбрать скины» / «Поменять скин»: в узкой карточке — двумя строками,
     а не многоточием. */
  .upm-btn {
    height: auto; min-height: 34px; padding: 4px; font-size: 10.5px; line-height: 1.15; letter-spacing: -.01em;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  /* Плавающие предложения (#ofrDock, справа под шапкой) закрывали «?» и
     звук: верхний ряд отступает под них, переключатель — по центру
     оставшегося места. */
  body:has(#ofrDock .ofd-b:not([hidden])) #page-upgrade .upx-top { grid-template-columns: minmax(0, 1fr) auto; padding-right: 54px; }
  body:has(#ofrDock .ofd-b:not([hidden])) #page-upgrade .upx-top > .upl-mode { grid-column: 1; grid-row: 1; justify-self: center; }
  body:has(#ofrDock .ofd-b:not([hidden])) #page-upgrade .upx-top > .upx-tools { grid-column: 2; grid-row: 1; }
  body:has(#ofrDock .ofd-b:not([hidden])) #page-upgrade .upx-top > .upl-clock { grid-column: 1 / -1; grid-row: 2; }
  .upm-mult {
    align-self: flex-start; padding: 4px 7px; border-radius: 6px; font: 700 11px/1 var(--f-hd); font-style: normal;
    color: #ffb043; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
  }
  /* «Итого к апгрейду» / «Сумма ставки» и «мин.» — строкой над полем в рамке. */
  #page-upgrade .upx-side.upx-in > .upx-sum .upx-sum-k {
    position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 0 2px; pointer-events: auto;
  }
  #page-upgrade .upx-side.upx-in > .upx-sum .upx-sum-k > span { font: 500 13px/1.2 var(--f-ui); color: #9b9ba8; }
  #page-upgrade .upx-side.upx-in > .upx-sum > .upx-slide-k { font-size: 13px; padding: 0 2px; }
  /* «Вы получите» — как «Ваши скины» (третий заход 30.10): без огненного
     фона цели (29.10), рамка и название — цветом редкости, тот же фон и
     тень карточки. */
  #page-upgrade #upmOut, #page-upgrade #upmOut:has(> .upm-art:not(.empty)) {
    border-color: color-mix(in srgb, var(--rc) 45%, rgba(255, 255, 255, .08));
    background: linear-gradient(180deg, rgba(20, 20, 27, .94), rgba(11, 11, 15, .96));
    box-shadow: 0 16px 36px -18px #000, inset 0 1px 0 rgba(255, 255, 255, .04);
  }
  #page-upgrade #upmOut:has(> .upm-art:not(.empty)) .upm-n > span { color: color-mix(in srgb, var(--rc) 85%, #fff); }
  /* «Вы получите» — как «Ваши скины»: той же высоты, кнопка внизу. */
  .upx-ringrow { align-items: stretch; }
  .upx-ringrow > .upa-dial { align-self: center; }
  .upm-card > .upm-btn { margin-top: auto; }
  #page-upgrade .upx-side.upx-in > .upx-sum .upx-sum-row {
    padding: 10px 14px; border: 1px solid #2a2a33; border-radius: 12px; background: rgba(8, 8, 11, .6);
  }
  #page-upgrade .upx-side.upx-in > .upx-sum .upx-amt { align-items: center; }
  #page-upgrade .upx-side.upx-in > .upx-sum .upx-amt input { padding: 0; font-size: 24px; }
  /* Фишки суммы — только на «Балансе». */
  #page-upgrade.upg-money .upx-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .upx-chips button {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 40px; min-width: 0; padding: 0;
    border-radius: 10px; border: 1px solid #2a2a33; background: #141419; color: #e6e6ee; cursor: pointer;
    font: 700 13px/1 var(--f-hd); font-variant-numeric: tabular-nums;
  }
  .upx-chips button.on { border-color: #ff8a1f; color: #ffb043; background: rgba(255, 122, 24, .1); }
  .upx-chips .coin { flex: none; width: 14px; height: 14px; }
  /* Монеты в полосе «Баланса»: заголовок, оранжевая черта, подпись; сумма —
     в поле ниже. */
  #page-upgrade.upg-money #inBody .upx-card.coins .upx-coins-tx > b { display: none; }
  #page-upgrade.upg-money #inBody .upx-card.coins .upx-coins-tx > span::after {
    content: ''; display: block; width: 28px; height: 3px; margin-top: 12px; border-radius: 2px; background: #ff8a1f;
  }
  /* Лента удачных апгрейдов уже. */
  .ups-wins { padding: 12px 10px 12px; }
  .ups-head h3 { font-size: 13px; gap: 8px; }
  .ups-crown { width: 18px; height: 18px; }
  .ups-card { width: 150px; height: 92px; }
  .ups-p { top: 36px; font-size: 13px; }
}
@container upx (max-width: 379px) {
  /* Карточки у кольца на 320–360 уже 85 px: «Вы получите» и «С баланса»
     резались многоточием. */
  .upm-h > b { min-width: 0; font-size: 8px; letter-spacing: 0; white-space: normal; }
  .upm-h > .upm-x { width: 18px; height: 18px; font-size: 14px; }
  .upm-n > b { font-size: 10.5px; }
  .upx-chips { gap: 5px; }
  .upx-chips button { font-size: 12px; gap: 3px; }
  .upx-chips .coin { width: 12px; height: 12px; }
}