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

:root {
  --ink: #0b1a26;
  --sky-a: #1d5c92;
  --sky-b: #0e2f4d;
  --panel: #14293c;
  --panel-2: #1b3550;
  --line: #0b1a26;
  --text: #dfebf5;
  --dim: #9fbdd6;
  --gold: #ffd23f;
  --gold-d: #f0a91c;
  --gold-sh: #a86f0d;
  --blue: #3a9ce0;
  --blue-d: #2179b8;
  --blue-sh: #14507e;
  --green: #48c85a;
  --green-d: #33a544;
  --green-sh: #1f7a2c;
  --red: #ef5350;
  --red-d: #d13c39;
  --red-sh: #8f2320;
  /* AzSymbols стоит до системного фолбэка: символы-украшения ников (✦♛⚡)
     обязаны идти из своего файла, а не из шрифта ОС. Букв он не касается —
     его unicode-range только на эти знаки, всё остальное берётся из Rubik. */
  --font: 'Rubik', 'AzSymbols', 'Segoe UI', sans-serif;
  /* Russo One — только акценты; навигация и числа остаются в Rubik. */
  --font-display: 'Russo One', 'Rubik', 'AzSymbols', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0b1a26;
  font-family: var(--font);
  color: var(--text);
  user-select: none;
}

#game {
  display: block;
  width: 100vw; height: 100vh;
  cursor: crosshair;
  outline: none;
}

/* ---------- экран ---------- */

/* Сцена: единственный кадр, в котором живёт вся мета-игра. Те же логические
   1200x675, что и у боя, — окно только меняет масштаб, а композиция экрана
   от его размера не зависит вообще. До этого дом сидел в своём кадре, а
   остальные экраны растекались по окну: на широком мониторе сетка бойцов
   расползалась в ленту, а шапка уезжала от сцены на сотни пикселей. */
#stage {
  --ui-scale: 1;
  position: fixed; z-index: 1;
  left: 50%; top: 50%;
  width: 1200px; height: 675px;
  transform: translate(-50%, -50%) scale(var(--ui-scale));
  transform-origin: center;
  /* Сама сцена мышь не ловит, ловят только экраны внутри. Иначе в бою,
     когда все экраны скрыты, пустая сцена продолжает лежать поверх канваса
     и забирает себе всё: ходьба работает (клавиши слушает окно), а прицел
     мёртв — mousemove до канваса не доходит. */
  pointer-events: none;
}

/* Фон рисует отдельный канвас (ui/bg.js) — он один на все экраны, поэтому
   переход между ними не сбрасывает движение. Сами экраны прозрачные. */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  pointer-events: auto;      /* скрытый экран не ловит ничего: у него display:none */
}
.screen.hidden { display: none; }
.screen > * { position: relative; }
#loading { background: #0b2540; }

/* ---------- поиск игры ---------- */

.matchmaking {
  overflow: hidden;
  background: transparent;
}
.match-count {
  position: absolute; z-index: 1; top: 34px; left: 50%; transform: translateX(-50%);
  min-width: 180px; text-align: center;
}
.match-count small, .match-center > span {
  display: block; color: #a9cee5; font: 700 13px/1 var(--font); letter-spacing: 2px;
}
.match-count strong {
  display: block; margin-top: 5px; color: #fff; font: 700 36px/1 var(--font-display);
  letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.match-center {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -44%);
  display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center;
}
.match-center > b {
  color: var(--gold); font: 700 23px/1 var(--font-display); letter-spacing: 1.5px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.match-star {
  width: 154px; height: 154px; margin-bottom: 8px;
  display: grid; place-items: center;
  color: var(--gold); font: 700 142px/.9 var(--font-display);
  text-shadow: 0 6px 0 #a86f0d, -3px -3px 0 var(--ink), 3px -3px 0 var(--ink),
               -3px 3px 0 var(--ink), 3px 3px 0 var(--ink);
  animation: match-star-spin 5.5s linear infinite;
}
#searchCancel { position: absolute; z-index: 2; left: 28px; bottom: 30px; min-width: 164px; }
@keyframes match-star-spin { to { transform: rotate(360deg); } }

/* Редактор карт вынесен из сцены: он инструмент во весь экран, как и матч.
   Холст там свой, со своим зумом, и вписывать его во внешний масштаб значило
   бы рисовать карту дважды уменьшенной. */
#s-editor { position: fixed; inset: 0; z-index: 2; }

/* ---------- шапка ---------- */

.bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  flex: none;
}
.bar-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 5px 0 rgba(0, 0, 0, .3);
}
.bar-side { min-width: 116px; display: flex; gap: 10px; align-items: center; }
.bar-side.right { justify-content: flex-end; }

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

.btn {
  --c: var(--blue);
  --cd: var(--blue-d);
  --cs: var(--blue-sh);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  font: 600 18px/1.1 var(--font-display);
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(var(--c), var(--cd));
  border: 3px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--cs), inset 0 2px 0 rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: filter .1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cs), inset 0 2px 0 rgba(255, 255, 255, .3); }
.btn:focus-visible, .event:focus-visible, .home-drawer-scrim:focus-visible {
  outline: 4px solid #ffffff;
  outline-offset: 3px;
}

.btn--gold { --c: var(--gold); --cd: var(--gold-d); --cs: var(--gold-sh); color: #3a2b00; text-shadow: 0 2px 0 rgba(255, 255, 255, .25); }
.btn--green { --c: var(--green); --cd: var(--green-d); --cs: var(--green-sh); }
.btn--red { --c: var(--red); --cd: var(--red-d); --cs: var(--red-sh); }
.btn--ghost { --c: #2c4a66; --cd: #22394f; --cs: #142633; }

.btn--icon { padding: 11px 16px; font-size: 22px; min-width: 54px; }
.btn--wide { width: 100%; }

.btn--play {
  padding: 20px 56px;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 2px;
  border-radius: 16px;
  border-width: 4px;
  box-shadow: 0 8px 0 var(--cs), inset 0 3px 0 rgba(255, 255, 255, .35);
}
.btn--play:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--cs), inset 0 3px 0 rgba(255, 255, 255, .35); }

.btn[disabled] { filter: grayscale(.7) brightness(.7); cursor: default; pointer-events: none; }

/* ---------- домашний экран ---------- */

/* Дом — такой же экран сцены, как остальные: масштаб теперь общий (#stage),
   и подгонять его отдельно больше не нужно. */
.home-frame {
  position: absolute; inset: 0;
  overflow: hidden;
}

.home-brand {
  position: absolute; z-index: 3;
  left: 20px; top: 18px;
  width: 258px; height: 82px;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 9px 11px;
  background: linear-gradient(#42536f, #27344c);
  border: 4px solid var(--ink);
  border-radius: 7px;
  box-shadow: 0 7px 0 rgba(3, 12, 22, .72), inset 0 3px 0 rgba(255, 255, 255, .22);
  transform: skew(-2deg);
}
.home-brand > * { transform: skew(2deg); }
.home-brand > span:last-child { display: flex; flex-direction: column; line-height: .88; }
.home-brand b, .home-brand strong {
  font: 700 30px/1 var(--font-display);
  letter-spacing: 2.5px;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
               -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 4px 0 rgba(0,0,0,.35);
}
.home-brand b { color: #ffffff; }
.home-brand strong { color: var(--gold); }
/* Там, где раньше стоял логотип в две строки, теперь имя игрока и его тег.
   На имя в кнопке остаётся около ста пикселей — шире её не сделать, справа
   Trophy Road. Шестнадцать символов туда не влезут никаким кеглем, поэтому
   кегль взят такой, чтобы влезало обычное короткое имя, а длинное
   обрезается многоточием: целиком оно видно в самом профиле. */
.home-brand > span:last-child { flex: 1; min-width: 0; }
.home-brand #homeBrandName {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 18px; line-height: 1.2; letter-spacing: .3px;
}
.home-brand #homeBrandTag { font-size: 13px; letter-spacing: 1px; margin-top: 1px; }

.home-menu-toggle {
  position: absolute; z-index: 12;
  right: 18px; top: 18px;
  width: 66px; height: 58px;
  padding: 10px;
  border-radius: 7px;
}

.home-side {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; gap: 15px;
}
.home-side--left { left: 22px; top: 236px; width: 224px; }
.home-side .btn {
  justify-content: flex-start;
  width: 100%; height: 70px;
  padding: 12px 17px;
  border-radius: 7px;
  border-width: 4px;
  font-size: 23px;
  box-shadow: 0 7px 0 var(--cs), inset 0 3px 0 rgba(255,255,255,.3);
}
.home-side .btn:active { box-shadow: 0 1px 0 var(--cs), inset 0 3px 0 rgba(255,255,255,.3); }

.home-stage {
  position: absolute;
  left: 286px; top: 62px;
  width: 624px; height: 508px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 0;
  pointer-events: none;
}
.home-stage::before {
  content: '';
  position: absolute;
  left: 50%; top: 47%;
  width: 550px; height: 550px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 252, 255, .5), rgba(39, 202, 242, .15) 46%, transparent 71%);
}
/* Боец рисуется ПОВЕРХ карточки и заезжает на неё. Запас над головой в кадре
   у всех общий, а занимают его по-разному: у Вольта под шапкой полсотни
   пустых пикселей, у Шквала поднятое оружие упирается в самый край. Убрать
   зазор одинаково для всех нельзя — а вот пустить фигуру перед карточкой
   можно: у кого запас есть, у того щель просто исчезает, у кого нет —
   ствол выходит на карточку, и это читается как задумка, а не как накладка. */
#homeHero {
  display: block; position: relative; z-index: 3;
  pointer-events: auto;
  cursor: pointer;
  /* margin-top ставит liftHero() в menu.js: он свой у каждого бойца */
}
/* `flex: none` — не украшение, а починка: карточка лежит во флекс-колонке
   рядом с канвасом, её сжимало под остаток места, и нижний ряд значков
   срезался `overflow: hidden` ровно посередине. Ужиматься ей нельзя. */
.home-identity {
  position: relative; z-index: 2;
  flex: none;
  min-width: 248px;
  padding: 0;
  text-align: center;
  background: linear-gradient(#3f506d, #25334a);
  border: 4px solid var(--ink);
  border-radius: 9px;
  box-shadow: 0 6px 0 rgba(3, 12, 22, .65), inset 0 2px 0 rgba(255,255,255,.18);
  overflow: hidden;
  pointer-events: auto;     /* сцена мышь не ловит, а карточка — кнопка */
  cursor: pointer;
  font-family: var(--font);
  color: var(--text);
}
.home-identity:hover { filter: brightness(1.1); }
.home-identity:active { transform: translateY(3px); }
.home-name {
  font: 700 30px/.95 var(--font-display);
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
               -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}

.home-bottom {
  position: absolute; z-index: 3;
  left: 304px; right: 18px; bottom: 18px;
  height: 96px;
  display: flex; align-items: stretch; gap: 15px;
}

/* карточка текущего режима — она же кнопка перехода к выбору */
.event {
  flex: 1;
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
  padding: 9px 15px;
  text-align: left;
  background: linear-gradient(105deg, #192b42, #101c2c);
  border: 4px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 7px 0 rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255,255,255,.1);
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-display);
}
.event:hover { background: var(--panel-2); }
.event:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.event canvas { border-radius: 5px; border: 3px solid var(--line); flex: none; background: rgba(0, 0, 0, .3); }
.event-txt { min-width: 0; display: block; }
.event-kicker, .event-name, .event-map { display: block; }
.event-kicker { font: 700 11px/1 var(--font); letter-spacing: 1.5px; color: var(--dim); text-transform: uppercase; }
.event-name { margin-top: 5px; font-size: 25px; font-weight: 700; letter-spacing: 1.2px; white-space: nowrap; }
.event-map { margin-top: 2px; font: 600 14px/1 var(--font); color: var(--gold); }

.home-bottom .btn--play {
  width: 280px;
  padding: 16px 34px;
  border-radius: 8px;
  font-size: 42px;
}

.home-drawer-scrim {
  position: absolute; z-index: 8; inset: 0;
  display: block;
  padding: 0; border: 0;
  background: rgba(2, 8, 16, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out;
}
.home-drawer {
  position: absolute; z-index: 10;
  right: 0; top: 0;
  width: 340px; height: 675px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 96px 20px 24px;
  background: linear-gradient(100deg, rgba(9, 13, 23, .96), #070a12 72%);
  border-left: 5px solid #050910;
  box-shadow: -12px 0 28px rgba(0,0,0,.48);
  transform: translateX(105%);
  transition: transform .2s ease-out;
  pointer-events: none;
}
.home-drawer-title {
  margin-bottom: 2px;
  font: 700 28px/1 var(--font-display);
  letter-spacing: 2px;
  color: var(--dim);
  text-align: center;
}
.home-drawer .btn {
  justify-content: flex-start;
  width: 100%; height: 74px;
  padding: 13px 18px;
  border-radius: 7px;
  border-width: 4px;
  font-size: 23px;
}
.home-frame.drawer-open .home-drawer { transform: none; pointer-events: auto; }
.home-frame.drawer-open .home-drawer-scrim { opacity: 1; pointer-events: auto; }

/* ---------- сетки ---------- */

.body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 4px 22px 26px;
}
.grid {
  display: grid; gap: 16px;
  max-width: 1180px; margin: 0 auto;
}
.grid--modes { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
/* Карт у режима бывает и одна: auto-fit схлопнул бы пустые колонки, и
   единственная арена растянулась бы во всю ширину плакатом. */
.grid--maps { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.grid--heroes { grid-template-columns: repeat(3, 1fr); max-width: 900px; }

/* карточка режима: цветная шапка с названием и картой, под ней сама карта */
.mode-card {
  padding: 0; overflow: hidden;
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  cursor: pointer; text-align: left;
  color: var(--text); font-family: var(--font);
}
.mode-card:hover { filter: brightness(1.06); }
.mode-card:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.mode-card.sel { border-color: var(--gold); }
.mode-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--c, #6c4bd6);
  border-bottom: 3px solid var(--line);
}
.mode-head .ico { font-size: 26px; }
.mode-title, .mode-map { display: block; }
.mode-title { font-size: 21px; font-weight: 700; letter-spacing: 1px; line-height: 1.15; }
.mode-map { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.mode-thumb { display: block; width: 100%; background: rgba(0, 0, 0, .25); }
.mode-note { padding: 9px 14px; font-size: 13px; color: var(--dim); line-height: 1.4; }
.mode-card.sel .mode-note { color: var(--gold); }

/* экран карт: вкладки режимов, ряд инструментов и те же карточки, что у режимов */
.tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 1180px; margin: 0 auto 14px;
}
.tab {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--panel);
  border: 3px solid var(--line); border-radius: 12px;
  color: var(--dim); font-family: var(--font); font-weight: 900; letter-spacing: 1px;
  font-size: 14px; cursor: pointer;
}
.tab.sel { border-color: var(--c, var(--gold)); color: var(--text); background: rgba(255, 255, 255, .06); }
.row--tools { max-width: 1180px; margin: 0 auto 14px; justify-content: flex-start; }
.mode-acts { display: flex; gap: 8px; padding: 10px 14px; }
.btn--small { padding: 6px 12px; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.btn--danger { --c: #a03a3a; --cd: #7f2c2c; --cs: #521c1c; }

/* Карточка бойца в сетке: портрет на подложке цвета редкости и табличка
   с именем. Цвет на карточке ровно один — `--rc`, редкость. Полоса цвета
   класса под портретом тут была и убрана намеренно: два цветных элемента
   на карточке размером с ноготь читались как один пёстрый, а класс и так
   подписан словом. Название редкости не подписано по той же причине —
   цвет уже сказал всё, а слово отнимало бы место у имени. */
.hero-card {
  padding: 0; overflow: hidden;
  /* Затемняющая плёнка поверх сплошного цвета редкости, а не смешивание
     цветов: так любой цвет из шкалы — от серого до жёлтого — садится на одну
     и ту же глубину, и белая подпись читается на всех шести одинаково. */
  background: linear-gradient(180deg, rgba(11, 26, 38, .34), rgba(20, 41, 60, .93) 76%), var(--rc, var(--panel));
  border: 3px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  cursor: pointer; text-align: left;
  color: var(--text); font-family: var(--font);
  position: relative;
}
.hero-card:hover { filter: brightness(1.07); }
.hero-card:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.hero-card.sel { border-color: var(--gold); box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 0 4px rgba(255,210,63,.28); }
/**
 * Портрет и корешок справа от него.
 *
 * Канва держит свой размер сама: `drawPortrait` пишет ей инлайновые width и
 * height под devicePixelRatio, и растянуть её на ширину карточки правилом
 * отсюда нельзя. Колонка сетки при этом шире портрета на два десятка
 * пикселей. Пока ни один портрет не доходил до краёв своего кадра, остаток
 * был просто фоном и в глаза не бросался; у Нилла вода идёт до самого края,
 * и арт стал обрываться об этот остаток на полуслове.
 *
 * Поэтому остаток теперь нарочный: рубчатый корешок с тёмной гранью у края
 * картинки — продолжением арта он не читается, и пустым местом тоже. Ширина
 * числом не задана: корешок забирает флексом ровно то, что осталось от канвы,
 * и правило переживёт смену размера портрета. Фоном карточки его не сделать —
 * канва портрета прозрачная (цвет редкости светит сквозь неё насквозь), и
 * рубчик лёг бы на всю картинку.
 */
.hero-art { display: flex; align-items: stretch; }
.hero-card canvas { display: block; flex: none; }
.hero-spine {
  flex: 1; min-width: 0;
  border-left: 3px solid var(--line);
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, rgba(8, 20, 32, .10), rgba(8, 20, 32, .66));
}
.hero-plate {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 11px;
  background: rgba(0, 0, 0, .42);
  border-top: 3px solid var(--line);
}
.hero-plate b { font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.hero-plate span { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }

/* Закрытый боец или режим — открывается на пути трофеев. Карточка остаётся
   кнопкой: бойца можно попробовать, а замок режима ведёт к его этапу пути. */
.hero-card.locked canvas, .mode-card.locked .mode-thumb { filter: grayscale(1) brightness(.45); }
.mode-card { position: relative; }
.lock {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 16, 24, .5);
}

/* ---------- экран бойца ---------- */

/* Раскладка оригинала: кто он — слева, сам боец — в центре, его сила —
   справа. Экран не прокручивается: всё, что не влезло, ушло в окно «i». */
#s-hero .body { overflow: hidden; padding-bottom: 18px; }
.detail {
  display: grid;
  grid-template-columns: 340px 1fr 340px;
  gap: 16px;
  height: 100%;
  max-width: 1180px; margin: 0 auto;
}

.panel {
  background: rgba(6, 20, 32, .55);
  border: 3px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.panel h3 {
  margin: 0 0 8px;
  font-size: 13px; letter-spacing: 2px; color: var(--dim); text-transform: uppercase;
}

.detail-left { display: flex; flex-direction: column; min-height: 0; }

/* Лента с именем уходит за левый край экрана: так она читается как
   вывеска, а не как ещё одна карточка среди карточек. Цвет — редкости
   (--rc ставит menu.js): слева он высветлен, чтобы имя не тонуло в тёмных
   эпической и мифической. */
.detail-ribbon {
  margin-left: -60px; padding: 8px 24px 8px 72px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--rc, #8fa6bb) 45%, #fff) 0%, var(--rc, #8fa6bb) 100%);
  border: 3px solid var(--ink); border-left: 0;
  transform: skewX(-12deg); transform-origin: 0 100%;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .3);
}
.detail-ribbon > * { transform: skewX(12deg); }
.detail-name {
  font: 400 44px/1 var(--font-display); letter-spacing: 1px; color: #fff;
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    0 5px 0 var(--ink);
}
.detail-cls {
  margin-top: 4px; font: 400 17px/1 var(--font-display); color: #fff; letter-spacing: 1px; text-transform: uppercase;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
.detail-rarity {
  align-self: flex-end; margin: 6px 6px 0 0;
  font: italic 400 15px/1 var(--font-display); letter-spacing: 1px; text-transform: uppercase;
  color: var(--rc, var(--gold));
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}

.detail-rank { display: flex; align-items: center; gap: 0; margin-top: 14px; }
.detail-rank-badge { position: relative; z-index: 1; flex: none; display: block; margin: -10px 0; }
.detail-rank-badge canvas { display: block; }
.detail-rank-bar {
  position: relative; flex: 1; height: 34px; margin-left: -14px;
  background: #3a1628; border: 3px solid var(--ink); border-radius: 0 8px 8px 0;
  overflow: hidden;
}
.detail-rank-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#d64a6a, #962d4b); }
.detail-rank-bar em {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%;
  font: 400 18px/1 var(--font-display); font-style: normal; color: #fff; text-shadow: 0 2px 0 var(--ink);
}

.detail-desc {
  margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.detail-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.detail-pick { padding-block: 18px; font-size: 26px; }
/* С замком на кнопке уже не «выбрать», а куда идти за бойцом — строка длиннее. */
.detail-pick:has(.icon) { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 20px; white-space: nowrap; }
.detail-try { padding-block: 10px; font-size: 18px; }

.detail-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.detail-stage canvas { display: block; }

/* Облачко пина у головы бойца — та же форма, в какой пин всплывёт в бою.
   Оно и есть вход в выбор пинов: отдельная кнопка «пины» объясняла бы то,
   что облачко говорит само. */
.detail-pin {
  position: absolute; top: 22%; right: 16%;
  display: grid; place-items: center;
  width: 76px; height: 68px; padding: 0;
  background: #fff; border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .3);
  cursor: pointer;
}
.detail-pin::after {
  content: ''; position: absolute; left: 8px; bottom: -14px;
  width: 18px; height: 18px;
  background: #fff; border: 3px solid var(--ink); border-top: 0; border-right: 0;
  transform: skewY(-35deg);
}
.detail-pin:hover { transform: scale(1.06); }
.detail-pin:focus-visible, .detail-more:focus-visible, .detail-info:focus-visible,
.pins-slot:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.detail-right { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

/* Уровень силы — строка текста, а не плашка: подпись приглушена, число
   ярче и крупнее — читается именно оно. */
.detail-level { text-align: center; font-family: var(--font-display); letter-spacing: 1px; text-shadow: 0 3px 0 var(--ink); }
.detail-level span { font-size: 20px; color: #b9cad9; }
.detail-level b { font-size: 30px; font-weight: 400; color: #fff; }

.detail-abilities { position: relative; display: flex; justify-content: center; }
.detail-star { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.detail-star small {
  font: 400 13px/1 var(--font-display); letter-spacing: 1px; color: #fff;
  text-shadow: 0 2px 0 var(--ink);
}
/* Слот выключен: блёклая звезда и замок поверх — «сюда встанет, но не сегодня». */
.detail-star-slot {
  position: relative; display: grid; place-items: center;
  width: 60px; height: 64px;
  background: linear-gradient(#27496f, #16304d);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.detail-star-slot .icon:first-child { opacity: .45; }
.detail-star-slot .icon:last-child { position: absolute; right: 10px; bottom: 10px; }
/* У бойца с силами слот — кнопка, и в нём уже сам значок: подложка не нужна. */
button.detail-star { padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
button.detail-star:hover .detail-star-slot { filter: brightness(1.12); transform: scale(1.05); }
button.detail-star:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.detail-star-slot.is-real { width: 64px; height: 64px; background: none; clip-path: none; transition: transform .12s; }
.detail-more {
  position: absolute; right: 4px; bottom: 4px;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: radial-gradient(circle at 50% 30%, #5ab8ff, #2179b8);
  border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
  cursor: pointer;
}
.detail-more:hover, .detail-info:hover { filter: brightness(1.12); }

.detail-info {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0; background: none; border: 0; color: inherit; text-align: left;
  cursor: pointer;
}
.info-row { display: flex; align-items: stretch; }
.info-tile {
  position: relative; z-index: 1;
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px;
  background: var(--tone); border: 3px solid var(--ink); border-radius: 6px;
  transform: skewX(-8deg);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25);
}
.info-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  margin-left: -6px; padding: 4px 10px 4px 16px;
  background: rgba(8, 22, 40, .78); border: 3px solid var(--ink); border-left: 0; border-radius: 0 6px 6px 0;
}
.info-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.info-head small {
  font: 400 15px/1 var(--font-display); letter-spacing: .5px; color: var(--tone);
  text-shadow: 0 2px 0 var(--ink);
}
.info-head b { font: 600 13px/1 var(--font); color: #fff; }
.info-segs { display: flex; gap: 3px; }
.info-segs i { flex: 1; height: 10px; background: rgba(255, 255, 255, .12); transform: skewX(-20deg); }
.info-segs i.on { background: var(--tone); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3); }

.detail-power {
  position: relative; display: flex; align-items: center;
  height: 36px; margin-top: auto;
  background: #0d1a2c; border: 3px solid var(--ink); border-radius: 18px;
  overflow: hidden;
}
.detail-power .icon { position: relative; z-index: 1; margin-left: 2px; }
.detail-power i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#6ee27e, #2f9e41); }
.detail-power b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 18px/1 var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink);
}
.detail-power small {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 600 11px/1 var(--font); color: #ffc3e4; text-shadow: 0 1px 0 var(--ink);
}

.detail-upgrade { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-block: 8px 10px; }
.detail-upgrade small { font: 400 13px/1 var(--font-display); letter-spacing: 1px; }
.detail-upgrade span { display: flex; align-items: center; gap: 6px; font-size: 26px; }
/* Не хватает — кнопка приглушена, но жива: окно за ней скажет, чего именно. */
.detail-upgrade.is-short { filter: grayscale(.6) brightness(.85); }
.detail-note {
  margin: auto 0 0; padding: 10px 12px;
  background: rgba(8, 22, 40, .78); border: 3px solid var(--ink); border-radius: 8px;
  font-size: 13px; line-height: 1.45; color: #cfe3f2;
}

/* ---------- окна экрана бойца ---------- */

.hero-modal {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(4, 14, 26, .74);
}
.hero-modal-panel {
  width: 560px;
  background: linear-gradient(#2f93ea, #1f7ad2);
  border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .4);
}
.hero-modal--info .hero-modal-panel { width: 940px; }
.hero-modal-head {
  position: relative;
  padding: 14px 80px;
  background: linear-gradient(#2a88dc, #1c6fc0);
  border-bottom: 3px solid rgba(11, 26, 38, .6);
}
.hero-modal-head h2 {
  margin: 0; text-align: center;
  font: 400 32px/1.1 var(--font-display); color: #fff; letter-spacing: .5px;
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 4px 0 var(--ink);
}
.hero-modal-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 54px; height: 46px; padding: 0; font-size: 26px;
}
.hero-modal-close:active { transform: translateY(calc(-50% + 4px)); }
.hero-modal-body { padding: 18px 22px 20px; }
.hero-modal-note { margin: 14px 0 0; text-align: center; font-size: 14px; color: #eaf5ff; text-shadow: 0 1px 0 var(--ink); }

/* Звёздные силы: значки в ряд, под выбранным — светлая колонна до панели
   описания, как в оригинале: видно, чьё это описание, без подписи. */
.hero-modal--stars .hero-modal-panel { width: 680px; }
.stars-row { display: flex; justify-content: center; gap: 40px; }
.stars-pick {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 150px; padding: 10px 0 14px; margin-bottom: -2px;
  background: none; border: 0; color: #fff; cursor: pointer;
}
.stars-pick.is-focus { background: linear-gradient(rgba(120, 200, 255, 0), rgba(120, 200, 255, .35)); }
.stars-pick:hover .star-badge { transform: scale(1.06); }
.stars-pick .star-badge { transition: transform .12s; }
.stars-pick:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.stars-pick small {
  min-height: 18px;
  font: 400 17px/1 var(--font-display); letter-spacing: .5px; color: #fff;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
/* Высота панели постоянная: окно стоит по центру экрана, и панель без кнопки
   покупки иначе подтягивала бы его вверх при каждом переключении значка. */
.stars-panel {
  position: relative; display: flex; flex-direction: column; min-height: 240px;
  padding: 14px 20px 16px; text-align: center;
  background: #1aa6ef; border: 3px solid var(--ink); border-radius: 4px;
}
.stars-panel::before {
  content: ''; position: absolute; top: -14px; left: var(--at, 50%);
  width: 22px; height: 22px; transform: translateX(-50%) rotate(45deg);
  background: #1aa6ef; border: 3px solid var(--ink); border-right: 0; border-bottom: 0;
}
.stars-panel h3 {
  margin: 0; font: 400 30px/1.1 var(--font-display); color: #ffd23f; letter-spacing: .5px;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink);
}
.stars-panel p { margin: 10px auto 0; max-width: 560px; font: 600 17px/1.45 var(--font); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.stars-panel p b { color: #6ef07e; }
.stars-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; }
.stars-foot .stars-note { margin: 0; font: 600 14px/1.4 var(--font); color: #eaf5ff; }
.stars-btn { display: flex; align-items: center; gap: 8px; min-width: 240px; justify-content: center; font-size: 24px; }

.pins-row { display: flex; justify-content: center; gap: 16px; }
.pins-slot {
  display: grid; place-items: center; width: 112px; height: 112px; padding: 0;
  background: #0d2744; border: 3px solid var(--ink); border-radius: 12px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}
.pins-slot:hover { filter: brightness(1.15); }

.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hm-wide { grid-column: 1 / -1; }
.hm-wide .hm-facts { grid-template-columns: repeat(4, 1fr); }
.hm-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  background: rgba(120, 200, 255, .22);
  border: 2px solid rgba(11, 26, 38, .35); border-radius: 4px;
}
.hm-tile {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px;
  background: var(--tone); border: 3px solid var(--ink); border-radius: 6px;
  transform: skewX(-8deg);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 4px 0 rgba(0, 0, 0, .3);
}
.hm-body { flex: 1; min-width: 0; }
.hm-kicker, .hm-fact small {
  display: block;
  font: 400 17px/1.1 var(--font-display); color: color-mix(in srgb, var(--tone) 60%, #fff); letter-spacing: .5px;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
.hm-fact small { color: color-mix(in srgb, var(--tone) 55%, #fff); font-size: 15px; }
.hm-title {
  display: block; margin-top: 4px;
  font: 400 24px/1.1 var(--font-display); color: #fff; text-transform: uppercase;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
.hm-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: #fff; text-shadow: 0 1px 0 var(--ink); }
.hm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; }
.hm-body > .hm-facts:first-child { margin-top: 0; }
.hm-fact b {
  display: block; margin-top: 4px; padding: 6px 10px;
  background: #0b2a4f; border-radius: 2px;
  font: 400 20px/1.1 var(--font-display); color: #fff; white-space: nowrap;
}
.hm-fact ins { margin-left: 6px; color: #6ef07e; text-decoration: none; }

.hm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 16px; }
.hm-stock { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; color: #eaf5ff; text-shadow: 0 1px 0 var(--ink); }
.hm-stock .icon { display: inline-block; vertical-align: -4px; }
.hm-upgrade { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 300px; padding-block: 8px 12px; }
.hm-upgrade small { font: 400 15px/1 var(--font-display); letter-spacing: 1px; }
.hm-upgrade span { display: flex; align-items: center; gap: 22px; }
.hm-upgrade em { display: flex; align-items: center; gap: 6px; font: 400 28px/1 var(--font-display); font-style: normal; }
.hm-upgrade em.short { color: #ffb0a8; }

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

.rows { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting-label { font-size: 17px; font-weight: 600; letter-spacing: 1px; }
.setting-note { font-size: 13px; color: var(--dim); margin-top: 3px; font-weight: 400; letter-spacing: 0; }

.toggle { display: flex; border: 3px solid var(--line); border-radius: 12px; overflow: hidden; flex: none; }
.toggle button {
  padding: 11px 26px;
  font: 600 16px/1 var(--font); letter-spacing: 1px;
  color: var(--dim);
  background: #22394f;
  border: 0; cursor: pointer;
}
.toggle button.on { color: #fff; background: linear-gradient(var(--green), var(--green-d)); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.toggle button.off { color: #fff; background: linear-gradient(var(--red), var(--red-d)); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
/* выбор из нескольких: четыре кнопки по 26px полей не влезли бы рядом с подписью на телефоне */
.toggle--pick button { padding: 11px 14px; }

.keys { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; align-items: baseline; }
.keys dt { text-align: right; }
.keys dd { margin: 0; font-size: 14.5px; color: #dcecf8; line-height: 1.5; }
.kbd {
  display: inline-block; padding: 5px 11px;
  font: 600 14px/1 var(--font);
  background: #22394f; color: #fff;
  border: 2px solid var(--line); border-radius: 7px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}

/* ---------- с друзьями ---------- */

/* Строка состояния: обрыв, отказ, «вошёл такой-то». Одна и сверху —
   читается раньше кнопок, ради которых её показали. */
.net-say { padding: 10px 14px; border-radius: 10px; background: rgba(6, 20, 32, .7); color: #ffe07a; font-size: 15px; text-align: center; }
.net-join { display: flex; gap: 10px; align-items: center; flex: none; }
.net-code {
  width: 120px; padding: 8px 10px;
  font: 600 22px/1 var(--font); letter-spacing: 6px; text-align: center; text-transform: uppercase;
  color: #fff; background: #22394f;
  border: 3px solid var(--line); border-radius: 10px; outline: none;
}
.net-code:focus { border-color: var(--green); }
/* Стороны рядом, на узком экране — одна под другой; три пары — уже. */
.net-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.net-sides--pairs { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.net-people { display: flex; flex-direction: column; gap: 6px; }
.net-people.is-mine { border-color: #4ec3ff; }
.net-side-head { font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--dim); }
.net-people.is-mine .net-side-head { color: #8be9ff; }
.net-people .btn { align-self: flex-start; }
.net-person { display: flex; justify-content: space-between; gap: 12px; padding: 6px 4px; font-size: 16px; }
.net-person span { color: var(--dim); }
.net-person.is-me b { color: #8be9ff; }
.net-person.is-bot { color: var(--dim); font-style: italic; }
.net-person.is-away { opacity: .55; }
.net-person.is-ready b { color: #5ee06a; }
/* Пять режимов длинными именами рядом с подписью не встают: выбор — под ней. */
.panel.net-mode { flex-direction: column; align-items: stretch; }
.net-modes { flex-wrap: wrap; }
.net-modes button { flex: 1 1 auto; }
.net-modes button:disabled { cursor: default; }

/* ---------- загрузка ---------- */

.row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
#loading { align-items: center; justify-content: center; font-size: 22px; color: #cfe3f2; }

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

/* ---------- фон, кошелёк, иконки ---------- */

#bg {
  position: fixed; inset: 0;
  display: block;
  z-index: 0;
}
#bg.hidden { display: none; }

.icon { display: block; flex: none; }
.btn .icon { margin-right: 2px; }

.purse { display: flex; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 8px;
  background: rgba(6, 20, 34, .62);
  border: 3px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.chip b { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.chip--big { padding: 10px 20px 10px 12px; }
.chip--big b { font-size: 26px; color: var(--gold); }

.home-purse {
  position: absolute; z-index: 4;
  top: 18px; right: 98px;
}
.home-purse .purse { gap: 9px; }
.home-purse .chip {
  min-width: 112px; height: 54px;
  justify-content: flex-start;
  padding: 6px 16px 6px 9px;
  background: linear-gradient(#172131, #090e17);
  border-width: 4px;
  border-radius: 7px;
  box-shadow: 0 6px 0 rgba(0,0,0,.58), inset 0 2px 0 rgba(255,255,255,.12);
}
.home-purse .chip b { margin-left: auto; font: 700 22px/1 var(--font-display); }
.reward { display: flex; gap: 14px; }

.vol { display: flex; align-items: center; gap: 10px; }
.vol i {
  display: block; width: 130px; height: 14px;
  background: rgba(0, 0, 0, .45);
  border: 3px solid var(--line); border-radius: 8px; overflow: hidden;
}
.vol i b { display: block; height: 100%; background: linear-gradient(var(--gold), var(--gold-d)); }

.setting-label { display: flex; align-items: flex-start; gap: 11px; }
.setting-label b { font-size: 17px; font-weight: 600; letter-spacing: 1px; }

/* ---------- появление ---------- */

/* Экран не возникает рывком, а всплывает: короткое движение снизу с лёгким
   масштабом. Двадцать пять сотых секунды — ровно столько, чтобы переход
   читался как переход и при этом не начал раздражать на десятом заходе. */
/* Прозрачность в анимациях не трогаем совсем. Если браузер притормозит
   анимацию (свёрнутая вкладка, экономия энергии), элемент с opacity:0
   останется невидимым — а движение в худшем случае просто не проиграется. */
@keyframes pop {
  from { transform: translateY(12px) scale(.985); }
  to { transform: none; }
}
.screen:not(.hidden) { animation: pop .22s ease-out; }

@keyframes cardIn {
  from { transform: translateY(16px); }
  to { transform: none; }
}
/* Без ступенчатой задержки и без backwards: карточка, которой браузер
   притормозил анимацию, обязана остаться видимой. Красивее было со сдвигом
   по одной, но «красивее» не стоит риска пустого экрана. */
.grid > * { animation: cardIn .26s ease-out; }
.reward .chip { animation: pop .3s ease-out; }

/* Кнопка боя чуть дышит: она главная на экране. */
@keyframes breathe { 50% { transform: translateY(-3px); } }
.btn--play:not(:active) { animation: breathe 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .screen:not(.hidden), .grid > *, .reward .chip, .btn--play:not(:active) { animation: none; }
  .home-drawer, .home-drawer-scrim { transition: none; }
}

/* Компактное лобби: свободный центр и три самостоятельные группы навигации. */
.home-brand { width: 172px; height: 76px; padding: 8px; gap: 6px; cursor: pointer; color: white; }
.home-brand small { font: 600 9px var(--font); letter-spacing: 2px; margin-bottom: 4px; color: #bbd2e7; }
.home-brand b, .home-brand strong { font-size: 23px; letter-spacing: 1px; }
.home-menu-toggle { width: 48px; height: 44px; }
.home-purse { right: 78px; }
.home-purse .chip { min-width: 86px; height: 42px; border-width: 3px; }
.home-purse .chip b { font-size: 18px; }
.home-side--left { top: 192px; width: 160px; gap: 14px; }
.home-side .btn { height: 54px; border-width: 3px; padding: 10px; font-size: 17px; }
.home-stage { left: 326px; top: 128px; width: 390px; height: 411px; }
.home-stage::before { width: 460px; height: 460px; }
.home-identity { min-width: 218px; border-width: 3px; }
.home-name { font-size: 24px; }
.home-bottom { left: 352px; height: 80px; gap: 12px; bottom: 22px; }
.home-bottom .btn--play { width: 232px; font-size: 34px; padding: 12px; }
.event { gap: 10px; padding: 7px 9px; border-width: 3px; }
.event canvas { width: 72px; height: 56px; }
.event-name { font-size: 20px; letter-spacing: .4px; }
.event-kicker { font-size: 9px; letter-spacing: .8px; }
.event-map { font-size: 12px; }
.lobby-card { display: flex; text-align: left; color: white; font-family: var(--font); border: 3px solid var(--ink); border-radius: 7px; background: linear-gradient(120deg,#33445f,#1b2b43); box-shadow: 0 5px 0 #06172aa6,inset 0 2px 0 #ffffff25; cursor: pointer; }
.lobby-card:hover, .home-brand:hover { filter: brightness(1.12); }
.lobby-card:active { transform: translateY(3px); }
button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.lobby-card small { display: block; font-size: 10px; color: #bcd6ec; }
.lobby-card b { display: block; font: 600 19px var(--font-display); letter-spacing: .7px; }
.home-trophies { position: absolute; left: 207px; top: 18px; width: 238px; height: 76px; align-items: center; gap: 10px; padding: 8px 12px; }
.home-trophies > span { flex: 1; }
.home-trophies b { font-size: 17px; color: #ffd85e; }
.mini-progress { display: block; height: 8px; border-radius: 3px; background: #071a2f; border: 1px solid #071321; margin: 6px 0 4px; overflow: hidden; }
.mini-progress i { display: block; height: 100%; width: 0; background: #ffd23f; }
/* ---- комната с друзьями на главном экране (ui/party.js) ---- */
/* Колонка кончается над нижней полосой с кнопкой боя: друзей в ней до пяти,
   и лишние уходят в прокрутку, а не под кнопку. */
.home-right { position: absolute; top: 136px; right: 22px; width: 254px; max-height: 424px; display: flex; flex-direction: column; gap: 10px; }
.party-door { display: flex; align-items: center; gap: 12px; }
.party-plus {
  flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(#ffe46b, #f5b72a);
  box-shadow: 0 4px 0 #06172aa6, inset 0 2px 0 #ffffff80; cursor: pointer;
}
.party-plus:hover { filter: brightness(1.08); }
.party-plus:active { transform: translateY(3px); box-shadow: 0 1px 0 #06172aa6; }
.party-plus:disabled { filter: grayscale(.6); cursor: default; }
.party-door-text b { display: block; font: 600 17px var(--font-display); letter-spacing: .6px; color: white; }
.party-door-text small { display: block; font-size: 11px; color: #bcd6ec; margin-top: 3px; }
.party-join { display: flex; gap: 8px; align-items: center; }
.party-join .net-code { width: 0; flex: 1; min-width: 0; height: 40px; font-size: 18px; }
.party-say { padding: 7px 10px; border-radius: 8px; background: rgba(6, 20, 32, .7); color: #ffe07a; font-size: 12px; line-height: 1.35; }
.party-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.party-code small { display: block; font: 600 9px var(--font); letter-spacing: 2px; color: #b2efff; }
.party-code b { display: block; font: 700 28px/1 var(--font-display); letter-spacing: 4px; color: var(--gold); user-select: text; }
.party-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.party-friend {
  position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px;
  border: 3px solid var(--ink); border-radius: 9px; background: linear-gradient(120deg,#33445f,#1b2b43);
  box-shadow: 0 4px 0 #06172aa6, inset 0 2px 0 #ffffff25;
}
.party-friend.is-foe { background: linear-gradient(120deg,#5c2f3f,#2b1b2b); }
.party-friend.is-away { opacity: .55; }
.party-face {
  position: relative; flex: none; width: 58px; height: 58px; border-radius: 7px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--rc), #0c1c30 75%); border: 2px solid #0a1626;
}
.party-face canvas { display: block; }
/* «Готов» — клеймом поверх бойца, как у своего в середине экрана:
   с первого взгляда на колонку видно, кого ещё ждём. */
.party-ready, .home-ready {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg);
  padding: 2px 6px; border: 2px solid var(--ink); border-radius: 5px;
  background: #5ee06a; color: #0b2a12; font: 700 13px var(--font-display); letter-spacing: 1px;
  box-shadow: 0 2px 0 #06172aa6; pointer-events: none; white-space: nowrap;
}
.party-who { min-width: 0; flex: 1; }
.party-who b { display: block; font: 600 15px var(--font-display); color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-who small { display: block; font-size: 11px; color: #bcd6ec; margin: 1px 0 4px; }
.party-stats { display: flex; gap: 6px; align-items: center; }
.party-troph, .party-lvl { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; background: #0c203beb; font: 600 12px var(--font); }
.party-troph { color: #f0d18c; }
.party-lvl { color: #d9a7ff; }
.party-tag { position: absolute; top: -8px; right: 8px; padding: 1px 6px; border-radius: 4px; background: #e2485d; color: white; font: 700 9px var(--font); letter-spacing: 1px; }
.party-friend.is-away .party-tag { background: #53657d; }
.party-slot {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 10px; border: 2px dashed #9fc3e366; border-radius: 9px;
  color: #bcd6ec; font-size: 12px;
}
.party-sides { align-self: flex-start; }
.home-ready { top: auto; bottom: 22px; transform: translateX(-50%) rotate(-8deg); z-index: 4; padding: 4px 14px; font-size: 30px; border-width: 3px; border-radius: 8px; }
.home-pass { position: absolute; left: 22px; bottom: 22px; width: 310px; height: 96px; align-items: center; gap: 10px; padding: 10px; background: linear-gradient(115deg,#67502a,#293044); }
.pass-ticket { display: flex; align-items: center; justify-content: center; width: 58px; height: 57px; background: #ffce39; border: 3px solid #142035; border-radius: 8px; transform: rotate(-9deg); }
.pass-ticket .icon { width: 44px!important; height: 44px!important; }
.home-pass > span:last-child { flex: 1; }
.home-pass b { color: #ffdc62; margin-top: 4px; font-size: 24px; }
.home-pass small { font-size: 8px; }
.home-pass small span, .home-pass b span { float: right; }
.home-drawer { width: 292px; gap: 12px; padding: 83px 18px 20px; }
.home-drawer-title { font-size: 20px; text-align: left; }
.home-drawer .btn { height: 54px; flex: none; border-width: 3px; font-size: 16px; padding: 10px; }

.page-icon .icon { width: 26px!important; height: 26px!important; }

/* Общие детали страниц мета-игры. Контент прокручивается независимо от шапки. */
.lobby-page { background: linear-gradient(120deg,#081c36e8,#163a60df); }
.lobby-page .bar { background: #091b30aa; border-bottom: 1px solid #9ad1ff22; padding: 12px 22px; }
.lobby-page .bar-title { font-size: clamp(20px,2.4vw,30px); }
.lobby-content { max-width: 1200px; margin: auto; padding: 22px 10px 18px; }
.page-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2px; color: #83d9fa; }
.page-intro h1 { font: 700 clamp(26px,3.3vw,44px) var(--font-display); letter-spacing: 1px; margin: 7px 0; }
.lobby-page p { color: #bdd1e5; font-size: 13px; line-height: 1.6; margin: 6px 0 12px; }
.lobby-page h2 { font: 600 23px var(--font-display); letter-spacing: .8px; margin: 0 0 10px; }
.lobby-page h3 { font-size: 14px; margin: 0 0 7px; }
.lobby-page small { font-size: 11px; color: #aac3dc; }
.demo-label { flex: none; display: inline-block; padding: 6px 10px; border: 1px solid #b0cfff40; border-radius: 4px; color: #a8c1d8; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.page-icon { display: inline-flex; align-items: center; justify-content: center; }
.info-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.lobby-page .panel { background: #152d47; border: 1px solid #52749466; border-radius: 9px; padding: 22px; }
/* ---------- профиль ---------- */

/* Раскладка «любимый боец слева, игрок справа». Вся страница помещается
   в кадр сцены без прокрутки: профиль — это витрина, и листать её, чтобы
   увидеть боевую карточку, значило бы прятать главное под сгиб. */
.pf { display: grid; grid-template-columns: 340px 1fr; gap: 24px; padding: 0 12px; }
#s-profile .lobby-content { padding-top: 12px; padding-bottom: 8px; }

/* Любимый боец стоит на сиянии цвета своей редкости — тем же цветом, что
   и его карточка в сетке бойцов, чтобы это читалось как один и тот же боец. */
.pf-fav {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px;
  min-height: 536px; padding: 18px 20px 22px;
  background: linear-gradient(#123a63, #0b2140);
  border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
}
.pf-fav::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, var(--rc, var(--blue)) 0%, transparent 62%);
  opacity: .55;
}
.pf-fav > * { position: relative; }
.pf-fav .pf-fav-stage { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); }
.lobby-page .pf-caption { font: 400 13px var(--font-display); letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.pf-fav .pf-plate { width: 100%; justify-content: center; }

/* Плашка — тот же приём, что у кнопки профиля на главном экране: заливка,
   светлая фаска, толстая обводка и жёсткая тень. Шестерёнка слева говорит,
   что по плашке можно нажать и поменять написанное. */
.pf-plate {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 7px 16px 7px 10px;
  background: linear-gradient(#42536f, #27344c);
  border: 4px solid var(--ink); border-radius: 7px;
  box-shadow: 0 5px 0 rgba(3, 12, 22, .72), inset 0 3px 0 rgba(255, 255, 255, .22);
  color: #fff; font: 400 24px/1.15 var(--font-display); letter-spacing: .5px;
  text-shadow: 0 2px 0 var(--ink);
  cursor: pointer; text-align: left;
}
.pf-plate span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-plate .icon { flex: none; }
.pf-plate:hover { filter: brightness(1.1); }
.pf-plate:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(3, 12, 22, .72), inset 0 3px 0 rgba(255, 255, 255, .22); }
.pf-plate:focus-visible, .pf-pick:focus-visible, .pf-avatar:focus-visible, .pf-slot:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.pf-name-input { width: 100%; cursor: text; outline: 3px solid var(--gold); outline-offset: 2px; }

.pf-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pf-head { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; }
/* Рамку и заливку аватарка берёт у самой иконки: та же картинка стоит
   и на боевой карточке, и второй рамки вокруг неё здесь быть не должно. */
.pf-avatar {
  position: relative; display: block;
  width: 120px; height: 120px; padding: 0;
  background: none; border: 0; border-radius: 14px; cursor: pointer;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35));
}
.pf-avatar > canvas:first-child { display: block; }
.pf-avatar .icon { position: absolute; right: -8px; top: -8px; }
.pf-avatar:hover { filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)) brightness(1.1); }
.lobby-page .pf-tag {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  padding: 3px 9px; background: var(--ink); border-radius: 6px;
  color: #fff; font: 600 13px/1.2 var(--font); letter-spacing: 1px; white-space: nowrap;
}
.pf-id { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pf-id .pf-plate { max-width: 460px; }

.pf-road { display: flex; align-items: center; max-width: 460px; }
.pf-road-badge {
  z-index: 1; flex: none; display: grid; place-items: center;
  width: 54px; height: 54px; margin-right: -16px;
  background: linear-gradient(#3a6f9e, #1e4468);
  border: 4px solid var(--ink); border-radius: 50%;
}
.pf-road-bar {
  position: relative; flex: 1; height: 34px; overflow: hidden;
  background: #0b1a26; border: 3px solid var(--ink); border-radius: 8px;
}
.pf-road-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffc24d, #e8871c); }
.pf-road-bar b {
  position: relative; display: block; text-align: center;
  font: 400 17px/28px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink);
}

.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 22px; }
.pf-stat { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lobby-page .pf-stat > small {
  text-align: center; font: 400 12px var(--font-display); letter-spacing: .6px;
  color: #eaf3fb; text-shadow: 0 2px 0 var(--ink); white-space: nowrap;
}
.pf-stat > div {
  position: relative; display: flex; align-items: center;
  height: 46px; padding-left: 40px;
  background: #0f3a64; border-radius: 8px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}
.pf-stat .icon { position: absolute; left: -8px; top: 50%; transform: translateY(-50%); }
.pf-stat b { flex: 1; text-align: center; font: 400 24px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink); }

.pf-card {
  margin-top: auto;   /* низ карточки вровень с низом колонки бойца */
  padding: 12px 18px 12px;
  background: linear-gradient(#1b3f6c, #142f52);
  border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .3);
}
.lobby-page .pf-eyebrow { font: 400 13px var(--font-display); letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.pf-card-body { display: flex; align-items: center; gap: 22px; margin-top: 8px; }
.pf-card-preview { flex: none; transform: skewX(-4.5deg); }
.pf-slots { display: flex; gap: 12px; flex: 1; }
.pf-slot {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: 118px; padding: 0;
  background: #0d2744; border: 3px solid var(--ink); border-radius: 10px;
  cursor: pointer;
}
.pf-slot:hover { filter: brightness(1.15); }
.pf-slot--empty { border-style: dashed; border-color: #3d638a; }
.lobby-page .pf-slot small { color: #d6e6f4; font: 600 11px var(--font); letter-spacing: 1px; }
.lobby-page .pf-note { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: #8fb0cc; }

/* Слой выбора — любимого бойца, аватарки, иконок и пина. Бойцы идут
   по редкостям и тем же цветом карточек, что и сетка бойцов; у иконок
   и пинов подложка своя, нейтральная: цвет у них уже нарисован. */
.pf-picker {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: rgba(4, 14, 26, .74);
}
.pf-picker-panel {
  width: 760px; padding: 18px 22px 20px; text-align: center;
  background: var(--panel); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .4);
}
.pf-picker-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 12px; margin: 12px 0 16px; }
.pf-picker-actions { display: flex; justify-content: center; gap: 14px; }
.pf-pick {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 6px 8px;
  background: linear-gradient(180deg, rgba(11, 26, 38, .34), rgba(20, 41, 60, .93) 76%), var(--rc, var(--panel));
  border: 3px solid var(--ink); border-radius: 10px;
  color: #fff; font-family: var(--font-display); cursor: pointer;
}
.pf-pick b { font-weight: 400; font-size: 16px; }
.pf-pick--plain { padding-top: 10px; background: linear-gradient(#1f4a78, #15314f); }
.pf-pick--plain b { font-size: 13px; white-space: nowrap; }
.pf-pick:hover { filter: brightness(1.08); }
.pf-pick.sel { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 63, .32); }
.pf-pick:disabled { cursor: default; filter: grayscale(1) brightness(.5); }
.map-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.map-preview-card { overflow: hidden; background: #172e48; border: 2px solid #4d718d; border-radius: 9px; }
.map-preview-card canvas { display: block; width: 100%; height: 185px; object-fit: contain; background: #102338; }
.map-preview-card > div { padding: 15px 20px; }
.map-preview-card h2 { margin-top: 5px; }
.new-map { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border: 2px dashed #619ca7; border-radius: 10px; background: #1e545a60; text-align: center; }
.map-plus { font: 300 60px var(--font); color: #7ce9c1; }
.workshop-tools { margin-top: 20px; }
.news-feature { position: relative; overflow: hidden; padding: 38px; background: linear-gradient(120deg,#4b3f84,#226882); border: 2px solid #7996cc; border-radius: 12px; }
.news-feature h2 { font-size: 42px; margin: 15px 0; }
.news-feature > .page-icon { position: absolute; right: 9%; top: 50%; transform: translateY(-50%) rotate(-12deg); opacity: .35; }
.news-feature > .page-icon .icon { width: 200px!important; height: 200px!important; }
.empty-lobby { display: flex; align-items: center; flex-direction: column; text-align: center; padding: 48px 25px; border: 1px solid #557b9d66; border-radius: 12px; background: radial-gradient(ellipse at top,#2b4a72,#13283e); }
.empty-lobby > .page-icon .icon { width: 85px!important; height: 85px!important; margin-bottom: 24px; }
.podium { display: flex; align-items: flex-end; gap: 8px; margin-top: 25px; }
.podium span { width: 85px; height: 70px; padding-top: 20px; background: #46617d; border-radius: 6px 6px 0 0; font: 700 28px var(--font-display); }
.podium span:nth-child(2) { height: 100px; background: #987338; }
.podium span:nth-child(3) { height: 50px; background: #685347; }
/* Иконки страниц рисуются с запасом разрешения, независимо от размера плашки. */

.home-pass > span:last-child { min-width: 0; }

/* Читаемая типографика: мягкий цвет текста, свободные буквы и лёгкая тень. */
.bar-title, .home-brand b, .home-brand strong, .home-name {
  text-shadow: 0 2px 3px #07172b70;
  letter-spacing: .4px;
}
.btn { color: var(--text); letter-spacing: .3px; line-height: 1.3; text-shadow: 0 1px 2px #07172b50; }
.btn--gold { color: #423211; text-shadow: none; }
.home-brand b, .home-brand strong { font-size: 20px; line-height: 1.05; }
.home-side .btn { font-size: 15px; }
.home-drawer .btn { font-size: 14px; }
.home-name { font-size: 22px; line-height: 1.2; }
.home-stage { top: 112px; height: 439px; }
.home-trophies b { font-size: 15px; }
.home-pass b { font-size: 20px; letter-spacing: .2px; }
.home-pass b span { font-family: var(--font); }
.event-name { font-size: 18px; white-space: normal; line-height: 1.2; letter-spacing: .1px; }
.event-kicker { line-height: 1.35; }
.home-bottom .btn--play { font-size: 30px; font-weight: 700; }
.lobby-card { color: var(--text); }
.lobby-page h1, .lobby-page h2 { line-height: 1.25; letter-spacing: .1px; }
.lobby-page .bar-title { font-weight: 600; }
.page-intro h1 { font-size: clamp(26px,3vw,38px); }
.hero-trophy-badge { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #e7bb6150; border-radius: 6px; background: #0c203beb; color: #f0d18c; font: 600 13px var(--font); }
.trophy-result { display: flex; align-items: center; gap: 16px; background: #142e47; border: 1px solid #f1c96c70; border-radius: 10px; padding: 16px 28px; min-width: 280px; }
.trophy-result[hidden] { display: none; }
.trophy-result strong { display: block; font: 600 25px var(--font); }
.trophy-result small { display: block; margin-top: 5px; color: #bccfe0; font-size: 13px; }
.gain { color: #99dfb6; }
.loss { color: #f2aa9e; }
.trophy-rules h2 { margin-top: 10px; }
.rules-scroll { overflow-x: auto; margin: 18px 0; }
.trophy-rules table { width: 100%; min-width: 870px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.trophy-rules caption { text-align: left; color: #abc0d5; padding-bottom: 12px; font-size: 11px; }
.trophy-rules th, .trophy-rules td { padding: 12px 8px; text-align: center; border-bottom: 1px solid #6886a12d; }
.trophy-rules th { font-weight: 600; color: #c6d9e9; }
.trophy-rules th:first-child { text-align: left; white-space: nowrap; }
.trophy-rules thead { background: #0d253c; }
.active-band { background: #dec07317; outline: 1px solid #dec07360; outline-offset: -1px; }
.trophy-rules .active-band th { color: #f1cf85; }

/* У Russo One одно начертание: не добавляем искусственную жирность. */
html { font-synthesis: none; }
.btn, .event, .lobby-card b, .home-purse .chip b,
.podium span {
  font-family: var(--font);
}
.bar-title, .lobby-page .bar-title, .home-brand b, .home-brand strong,
.home-name, .detail-name, .page-intro h1, .lobby-page h2,
.btn--play, .home-bottom .btn--play,
.home-pass b {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .3px;
}
.home-pass b { font-size: 19px; }
.home-brand b, .home-brand strong { font-size: 20px; }
.home-drawer .btn { font-size: 13px; }
.home-side .btn { font-size: 14px; }

/* ---------- редактор карт ---------- */
.ed { display: flex; flex-direction: column; height: 100%; }
.ed-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(8, 22, 36, .92);
  border-bottom: 3px solid var(--line);
}
.ed-spacer { flex: 1; }
.ed-name {
  width: 200px; padding: 7px 12px;
  background: rgba(255, 255, 255, .07);
  border: 3px solid var(--line); border-radius: 10px;
  color: var(--text); font-family: var(--font); font-weight: 900; font-size: 15px;
}
.ed-mode { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--dim); }
.ed-main { flex: 1; display: flex; min-height: 0; }
.ed-tools {
  width: 214px; flex: none; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  background: rgba(8, 22, 36, .92);
  border-right: 3px solid var(--line);
}
.ed-brush {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, .05);
  border: 3px solid transparent; border-radius: 10px;
  color: var(--dim); font-family: var(--font); font-weight: 900; font-size: 13px;
  letter-spacing: .5px; cursor: pointer; text-align: left;
}
.ed-brush:hover { background: rgba(255, 255, 255, .1); }
.ed-brush.sel { border-color: var(--gold); color: var(--text); }
.ed-brush i {
  width: 20px; height: 20px; flex: none;
  background: var(--c); border: 2px solid var(--line); border-radius: 5px;
}
.ed-brush span { flex: 1; }
.ed-brush em {
  font-style: normal; font-size: 11px; color: var(--dim);
  padding: 1px 6px; border: 2px solid var(--line); border-radius: 6px;
}
.ed-sizes { display: flex; gap: 6px; margin-top: 6px; }
.ed-sizes .btn { flex: 1; padding: 6px 0; }
.ed-sizes .btn.sel { --c: var(--gold); --cd: var(--gold-d); --cs: var(--gold-sh); color: #3a2b00; }
.ed-canvas { flex: 1; min-width: 0; display: block; cursor: crosshair; touch-action: none; }
.ed-status {
  padding: 7px 14px;
  background: rgba(8, 22, 36, .92);
  border-top: 3px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* панель редактора: заголовки разделов, форма размера */
.ed-group { display: flex; flex-direction: column; gap: 6px; }
.ed-group b {
  display: block; margin: 4px 0 6px; font-size: 11px; letter-spacing: 1.5px; color: var(--dim);
}
.ed-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-cols .ed-brush { padding: 6px 8px; font-size: 11px; letter-spacing: 0; }
.ed-cols .ed-brush em { padding: 0 4px; }
.ed-size.hidden { display: none; }
.ed-size {
  position: absolute; left: 200px; top: 84px; z-index: 3;
  width: 260px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel);
  border: 3px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .35);
}
.ed-size b { font-size: 14px; letter-spacing: 1.5px; }
.ed-size-row { display: flex; align-items: center; gap: 8px; }
.ed-num {
  width: 78px; padding: 6px 10px;
  background: rgba(255, 255, 255, .07);
  border: 3px solid var(--line); border-radius: 9px;
  color: var(--text); font-family: var(--font); font-weight: 900; font-size: 15px;
}
.ed-anchor { display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; }
.ed-anchor-cell {
  width: 26px; height: 26px;
  background: rgba(255, 255, 255, .07);
  border: 2px solid var(--line); border-radius: 6px; cursor: pointer;
}
.ed-anchor-cell.sel { background: var(--gold); border-color: var(--gold-sh); }
.ed-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--dim); }
.ed-main { position: relative; }

/* панель проверки — справа от холста, поверх него */
.ed-check {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  width: 264px; max-height: calc(100% - 24px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: rgba(8, 22, 36, .93);
  border: 3px solid var(--line); border-radius: 14px;
}
.ed-check.hidden { display: none; }
.ed-check > b { font-size: 14px; letter-spacing: 1.5px; }
.ed-check > b.good { color: #58d868; }
.ed-check > b.warn { color: var(--gold); }
.ed-check > b.bad { color: #ff6a6a; }
.ed-issue {
  padding: 7px 9px; border-radius: 9px;
  font-size: 12px; font-weight: 700; line-height: 1.35;
}
.ed-issue.bad { background: rgba(255, 90, 90, .16); color: #ffc4c4; }
.ed-issue.warn { background: rgba(255, 210, 63, .14); color: #ffe9a8; }
.ed-facts { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ed-facts span { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ed-facts i { font-style: normal; color: var(--dim); }
.ed-facts b { font-weight: 900; }

/* ---------- карточка бойца над сценой ---------- */

/**
 * Раньше здесь был прямоугольник с именем и строчкой «столько-то трофеев».
 * Теперь это две части: верх называет бойца, низ показывает его состояние —
 * ранг, трофеи, уровень силы и слот под звёздную силу.
 *
 * Слот пустой нарочно и выключен: способности в игре ещё нет. Но место,
 * в котором она появится, занято уже сейчас — иначе, когда она появится,
 * карточка перестроится у игрока под руками.
 */
.home-identity-top { padding: 7px 22px 8px; }
.home-identity-bar {
  display: flex; align-items: stretch; gap: 5px;
  padding: 6px;
  background: linear-gradient(#16233a, #0d1626);
  border-top: 3px solid var(--ink);
}

.home-identity-bar > * {
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18);
}

/* Значок ранга рисуется канвасом со своей обводкой — рамка ячейки ему не нужна,
   а сам он чуть выступает за полосу, как медаль. */
.home-identity-bar > .id-rank { border: 0; box-shadow: none; margin: -10px -2px -6px; }
.id-rank canvas { display: block; }

.id-trophies {
  flex: 1;
  gap: 5px;
  padding: 4px 10px;
  background: linear-gradient(#3d4a63, #232f47);
  font: 700 15px/1 var(--font); color: #ffd98a;
}
.id-trophies .icon { width: 18px !important; height: 18px !important; }

.id-level {
  width: 34px;
  background: radial-gradient(circle at 50% 30%, #ff7ad0, #c93a92);
  border-radius: 50%;
  font: 700 16px/1 var(--font); color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* Слот: цветной кружок с бледным значком. Выключенный вид — это и есть
   сообщение «сюда что-то встанет, но не сегодня». */
.id-slot {
  width: 34px;
  border-radius: 50%;
  filter: saturate(.55) brightness(.72);
}
.id-slot--star { background: radial-gradient(circle at 50% 30%, #ffd75e, #d18a12); }
.id-slot .icon { width: 22px !important; height: 22px !important; opacity: .8; }
/* Сила выбрана и работает — слот оживает: сам значок, без подложки и приглушения. */
.id-slot.is-on { background: none; filter: none; display: grid; place-items: center; }
.id-slot.is-on .star-badge { margin: -4px; }

/* ---------- уровень силы ---------- */

.hero-level-badge {
  position: absolute; left: 10px; top: 10px;
  display: flex; align-items: baseline; gap: 4px;
  padding: 4px 9px;
  background: linear-gradient(#c93a92, #8d2a68);
  border: 1px solid #ff9fd855; border-radius: 6px;
  color: #fff;
}
.hero-level-badge small { font: 600 9px/1 var(--font); letter-spacing: 1px; opacity: .85; }
.hero-level-badge b { font: 700 14px/1 var(--font); }

/* ---------- журнал боёв ---------- */

/**
 * Одна запись — одна карточка: сверху итог, снизу состав. Раскладок состава
 * две, и обе повторяют то, что показывает сам режим: командный матч идёт
 * двумя тройками через «VS», королевская битва — общей сеткой из одиннадцати.
 */
.log-entry {
  margin-bottom: 16px;
  background: #152d47;
  border: 1px solid #52749466;
  border-left: 5px solid var(--c, #4a9e3c);
  border-radius: 9px;
  overflow: hidden;
}

.log-head {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px;
  background: rgba(6, 20, 34, .45);
  border-bottom: 1px solid #52749444;
}
.log-mode { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.log-mode b { display: block; font: 600 17px/1.2 var(--font-display); letter-spacing: .4px; }
.log-mode small { display: block; margin-top: 3px; font-size: 11px; color: #8fd9ff; }

.log-verdict {
  flex: none;
  font: 600 19px/1 var(--font-display); letter-spacing: 1px;
}
.log-verdict.win { color: #6ef07f; }
.log-verdict.lose { color: #ff8a86; }
.log-verdict.draw { color: #ffd98a; }

.log-troph {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: #0c203b;
  border: 1px solid #e7bb6150; border-radius: 7px;
  font: 700 17px/1 var(--font); color: #f0d18c;
}

.log-when { flex: none; text-align: right; min-width: 130px; }
.log-when b { display: block; font: 600 13px/1 var(--font); color: #c6d9e9; }
.log-when small { display: block; margin-top: 4px; font-size: 10px; color: #8faecb; }

.log-roster { padding: 14px 18px 16px; }
.log-roster--grid { display: flex; flex-wrap: wrap; gap: 12px; }
.log-roster--vs { display: flex; align-items: center; gap: 18px; }
.log-roster--vs > div { display: flex; gap: 12px; flex: 1; }
.log-roster--vs > div:last-child { justify-content: flex-end; }
.log-vs { flex: none; text-align: center; }
.log-vs b { display: block; font: 700 24px/1 var(--font-display); color: #cfe3f2; }
.log-vs small { display: block; margin-top: 5px; font-size: 11px; color: #8faecb; }

.log-fighter { display: block; width: 92px; text-align: center; }
.log-fighter > small { display: block; margin-top: 5px; font-size: 10px; color: #b6cde2; }
.log-fighter.you > small { color: #ffd98a; font-weight: 600; }

.log-portrait {
  position: relative; display: block;
  border: 3px solid var(--line); border-radius: 8px;
  border-bottom-width: 5px; border-bottom-color: var(--hc, var(--line));
  overflow: hidden;
  background: #0c1c2d;
}
.log-fighter.you .log-portrait { outline: 2px solid var(--gold); outline-offset: 1px; }
.log-portrait canvas { display: block; }

.log-fighter-troph {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 3px;
  padding: 2px 5px 3px 4px;
  background: rgba(6, 16, 28, .82);
  border-bottom-right-radius: 6px;
  font: 700 11px/1 var(--font); color: #f0d18c;
}
.log-fighter-lvl {
  position: absolute; right: 0; bottom: 0;
  padding: 2px 5px 3px;
  background: rgba(6, 16, 28, .82);
  border-top-left-radius: 6px;
  font: 700 10px/1 var(--font); color: #ffb2e0;
}

/* Картинку позже можно подключить одной строкой: --match-loading-art: url(...).
   Фиолетовая заливка остаётся запасным фоном, если изображение не загрузилось. */
.match-loading {
  --match-loading-art: none;
  position: fixed; inset: 0; z-index: 1000;
  background-color: #713bc1;
  background-image: var(--match-loading-art);
  background-position: center;
  background-size: cover;
  pointer-events: auto;
  animation: match-loading-in .18s ease-out both;
}
.match-loading[hidden] { display: none; }
.match-loading__bar {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  width: min(560px, 76vw); height: 30px;
  overflow: hidden; border: 3px solid #321b57; border-radius: 7px;
  background: #472477;
}
.match-loading__fill {
  width: 0; height: 100%; background: #c99aff;
  /* Ширина меняется скачком: CSS-интерполяция скрыла бы характер загрузки. */
}
.match-loading__percent {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font: 700 18px var(--font-ui, sans-serif);
  text-shadow: 0 2px 2px #321b57;
}
@keyframes match-loading-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .match-loading { animation: none; }
}

.match-loading__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- пины в бою ---------- */

/* Слой повторяет кадр 1200×675 и растягивается вместе с ним: кнопка стоит
   в координатах кадра, как HUD, а не в углу окна. Сам слой клики не ловит —
   их ловят только кнопки, всё остальное уходит канвасу. */
.pin-dock {
  position: fixed; left: 0; top: 0; z-index: 5;
  transform-origin: 0 0; pointer-events: none;
}
.pin-toggle, .pin-menu { position: absolute; pointer-events: auto; }
.pin-toggle {
  display: grid; place-items: center; width: 72px; height: 72px; padding: 0;
  background: rgba(0, 0, 0, .45); border: 0; border-radius: 50%; cursor: pointer;
}
.pin-toggle:hover, .pin-toggle.open { background: rgba(0, 0, 0, .62); }
/* Откат — тёмный сектор, убывающий по часовой: видно, сколько ждать,
   без цифр поверх облачка. */
.pin-toggle.cooling::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(0, 0, 0, .55) calc(var(--cool, 0) * 360deg), transparent 0);
}
.pin-menu {
  display: flex; gap: 8px; padding: 8px;
  background: rgba(6, 20, 32, .82); border: 3px solid #0b1a26; border-radius: 16px;
}
.pin-menu[hidden] { display: none; }
.pin-choice {
  display: grid; place-items: center; width: 66px; height: 66px; padding: 0;
  background: rgba(255, 255, 255, .08); border: 0; border-radius: 12px; cursor: pointer;
}
.pin-choice:hover { background: rgba(255, 255, 255, .2); transform: scale(1.06); }
.pin-dock.cooling .pin-choice { opacity: .4; cursor: default; transform: none; }

/* ---------- Trophy Road ---------- */

/* Лента пути — вся страница: шапка со счётом сверху, дальше одна полоса
   этапов во всю ширину кадра. Вертикальной прокрутки нет вовсе — колесо
   мыши листает ленту вбок (ui/road.js). */
#s-trophies .body { display: flex; overflow: hidden; padding: 0; }
/* min-width: 0 обязателен: иначе flex-элемент растягивается по ширине ленты
   (семь с лишним тысяч пикселей), и прокручивать становится нечего. */
#s-trophies .lobby-content { display: flex; flex: 1; min-width: 0; min-height: 0; max-width: none; padding: 0; }
.tr {
  display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0;
  background: radial-gradient(ellipse at 50% 38%, #2f7fe066, transparent 70%);
}
.tr-head { display: flex; align-items: center; gap: 24px; padding: 12px 28px 4px; }
.tr-score {
  display: flex; align-items: center; gap: 14px; padding: 6px 18px 6px 10px;
  background: #0b2140cc; border: 3px solid var(--ink); border-radius: 10px;
}
.lobby-page .tr-score small { display: block; font: 600 10px var(--font); letter-spacing: 1.5px; color: #9fc3e3; }
.tr-score b { font: 400 30px/1 var(--font-display); color: #ffd85e; }
.tr-best { padding-left: 14px; border-left: 2px solid #ffffff22; }
.tr-score .tr-best b { font-size: 20px; color: #fff; }
.lobby-page .tr-note { flex: 1; margin: 0; font-size: 13px; line-height: 1.45; color: #cfe3f5; text-align: center; }
.tr-acts { display: flex; gap: 10px; }

.tr-scroll {
  position: relative; flex: 1; min-height: 0;
  overflow-x: auto; overflow-y: hidden; cursor: grab;
  scrollbar-color: #ffd23f66 transparent;
}
.tr-scroll.is-dragging { cursor: grabbing; }
.tr-track { position: relative; height: 100%; min-height: 470px; }

.tr-step {
  position: absolute; top: 16px; width: 164px; margin-left: -82px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.tr-card {
  position: relative; width: 164px; height: 236px;
  display: flex; flex-direction: column; align-items: center; padding: 10px 8px 14px;
  background: linear-gradient(180deg, #54acff, #2466c9);
  border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35), inset 0 2px 0 #ffffff40;
  text-align: center;
}
.tr-card--hero, .tr-card--mode, .tr-card--box { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .3)), var(--rc); }
.tr-art { flex: 1; display: grid; place-items: center; min-height: 0; }
.tr-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.tr-amount {
  font: 400 28px/1.05 var(--font-display); color: #fff;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink);
}
.tr-card--hero .tr-amount, .tr-card--mode .tr-amount, .tr-card--box .tr-amount { font-size: 17px; }
.lobby-page .tr-label { margin-top: 5px; font: 600 10px var(--font); letter-spacing: 1.2px; color: #eef5ff; }

/* Забранное гаснет, но не серее закрытого: оно уже твоё, просто позади. */
.is-claimed .tr-card { filter: saturate(.5) brightness(.72); }
.tr-check {
  position: absolute; left: -10px; top: -10px; width: 38px; height: 38px;
  background: #3fbf55; border: 3px solid var(--ink); border-radius: 50%;
}
.tr-check::after {
  content: ''; position: absolute; left: 11px; top: 5px; width: 9px; height: 16px;
  border: solid #fff; border-width: 0 5px 5px 0; transform: rotate(40deg);
}
.tr-lock { position: absolute; right: 6px; top: 6px; }
.is-ready .tr-card {
  border-color: #fff4b8;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 0 4px #ffd23f99, 0 0 28px #ffd23faa;
  animation: tr-glow 1.3s ease-in-out infinite alternate;
}
@keyframes tr-glow { to { box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 0 6px #ffd23fcc, 0 0 40px #ffd23f; } }
.tr-claim { width: 156px; padding: 10px 0; font-size: 18px; }
.tr-soon {
  padding: 8px 14px; background: #0b2140; border: 2px solid #9ad1ff44; border-radius: 8px;
  font: 600 12px var(--font); letter-spacing: 1.5px; color: #bcd6ec;
}
.is-focus .tr-card { outline: 4px solid #fff; outline-offset: 5px; }

.tr-bar {
  position: absolute; left: 0; right: 0; top: 340px; height: 30px;
  background: #5a1a36; border-block: 3px solid var(--ink);
}
.tr-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffae4a, #e8671c); }
.tr-stop { position: absolute; top: 335px; width: 0; display: flex; flex-direction: column; align-items: center; }
.tr-node { flex: none; width: 40px; height: 40px; background: #2a3d57; border: 4px solid var(--ink); border-radius: 50%; }
.is-reached .tr-node { background: radial-gradient(circle at 40% 35%, #fff6b0, #ffd23f 45%, #e8a41c); }
.lobby-page .tr-stop small {
  margin-top: 6px; white-space: nowrap;
  font: 400 17px var(--font-display); color: #8fb0cc; text-shadow: 0 2px 0 var(--ink);
}
.lobby-page .tr-stop.is-reached small { color: #fff; }
.tr-marker {
  position: absolute; top: 414px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px;
  background: #ffb23d; border: 3px solid var(--ink); border-radius: 8px;
  font: 400 20px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink);
}
.tr-marker::before {
  content: ''; position: absolute; left: 50%; top: -14px; margin-left: -9px;
  border: 9px solid transparent; border-bottom: 9px solid var(--ink); border-top: 0;
}

.tr-layer .trophy-rules { text-align: left; }
.tr-reveal {
  display: flex; flex-direction: column; align-items: center; width: 340px; margin: 12px auto 18px; padding: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .3)), var(--rc, #2466c9);
  border: 3px solid var(--ink); border-radius: 14px;
}
.tr-reveal-art { display: grid; place-items: center; min-height: 220px; }
.tr-reveal b {
  font: 400 30px var(--font-display); color: #fff;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
.lobby-page .tr-reveal small { font: 600 12px var(--font); letter-spacing: 1.5px; color: #fff; }

/* Число готовых наград на кнопке пути на главном экране. */
.road-badge {
  position: absolute; right: -10px; top: -10px; min-width: 30px; height: 30px; padding: 0 7px;
  background: #e0455e; border: 3px solid var(--ink); border-radius: 15px;
  font: 400 15px/24px var(--font-display); color: #fff; text-align: center;
}
.road-badge[hidden] { display: none; }

/* Бирка на закрытой карточке: замок и число трофеев, на котором он снимается. */
.lock--road { flex-direction: column; gap: 8px; }
.lock--road b {
  display: flex; align-items: center; gap: 6px; padding: 4px 12px;
  background: #0b1a26d9; border-radius: 8px;
  font: 400 18px var(--font-display); color: #ffd85e;
}

@media (prefers-reduced-motion: reduce) {
  .is-ready .tr-card { animation: none; }
}

/* ---------- открытие ящика ---------- */

/* Экран открытия ложится поверх любого экрана сцены: он приходит и с пути
   трофеев, и из меню, и возвращает туда же. Рисует его один канвас (ui/boxopen.js). */
.box-screen { z-index: 30; background: #16328f; outline: none; }
.box-canvas { display: block; width: 1200px; height: 675px; cursor: pointer; touch-action: none; }
.box-actions { position: absolute; left: 0; right: 0; bottom: 46px; display: flex; justify-content: center; }
.box-actions[hidden] { display: none; }
/* Кнопка короткая и толстая, по размеру слова: длинная плоская полоса под
   плитками читалась как поле ввода, а не как «забрать и выйти». */
.box-actions .btn { padding: 14px 42px; font-size: 26px; border-radius: 14px; }

/* Очки силы бойца: полоска над плашкой в сетке и строка на экране бойца. */
.hero-power {
  position: absolute; left: 10px; right: 10px; bottom: 50px; height: 22px;
  display: flex; align-items: center;
  background: #0c1d33e0; border: 2px solid var(--ink); border-radius: 11px; overflow: hidden;
}
.hero-power .icon { position: relative; z-index: 1; margin-left: 3px; flex: none; }
.hero-power i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ff7cc0, #c23c8f); }
.hero-power b { position: relative; z-index: 1; flex: 1; text-align: center; font: 600 12px var(--font); color: #fff; text-shadow: 0 1px 0 var(--ink); }
.hero-power.is-muted i { background: #4a5b70; }

/* ---------- Battle Pass и задания ---------- */

/* Обе страницы, как и путь трофеев, — во весь кадр без вертикальной
   прокрутки страницы: лента наград листается вбок (ui/pass.js), а список
   сезонных заданий прокручивается сам внутри своей колонки. */
#s-pass .body, #s-quests .body { display: flex; overflow: hidden; padding: 0; }
#s-pass .lobby-content, #s-quests .lobby-content { display: flex; flex: 1; min-width: 0; min-height: 0; max-width: none; padding: 0; }
.bp {
  display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0;
  background: radial-gradient(ellipse at 60% 40%, #8a3fe066, transparent 70%), linear-gradient(120deg, #3b1a86cc, #5a2bb0aa);
}

.bp-head { display: flex; align-items: center; gap: 22px; padding: 10px 24px; background: #0b1a2699; border-bottom: 3px solid var(--ink); }
.bp-season { display: flex; flex-direction: column; min-width: 190px; }
.lobby-page .bp-season small { font: 600 10px var(--font); letter-spacing: 1.5px; color: #b9d7ff; }
.bp-season b { font: 400 20px/1.1 var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.lobby-page .bp-season .bp-ends { color: #7ff0ff; }
.bp-tabs { display: flex; }
.bp-tab {
  padding: 10px 22px; background: #2b3950; border: 3px solid var(--ink); color: #cfe0f0;
  font: 400 17px var(--font-display); letter-spacing: .5px; cursor: pointer;
}
.bp-tab:first-child { border-radius: 8px 0 0 8px; }
.bp-tab:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.bp-tab.is-active { background: linear-gradient(#ffae4a, #e8671c); color: #fff; text-shadow: 0 2px 0 var(--ink); cursor: default; }
.bp-xp { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.bp-level {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  background: radial-gradient(circle at 40% 35%, #fff6b0, #ffd23f 45%, #e8a41c); border: 3px solid var(--ink); border-radius: 50%;
  font: 400 18px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink);
}
.bp-level.is-next { background: #1c2a3d; }
.bp-xp-bar { position: relative; width: 240px; height: 30px; background: #1c2a3d; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; }
.bp-xp-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffe27a, #e8a21c); }
.bp-xp-bar b { position: relative; display: block; text-align: center; font: 400 16px/24px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.bp-doubler { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; background: #0b1a26cc; border: 3px solid var(--ink); border-radius: 8px; }
.bp-doubler b { font: 400 15px var(--font-display); color: #ffb8e0; }

.bp-main { display: flex; flex: 1; min-height: 0; }
.bp-side {
  flex: none; width: 210px; display: flex; flex-direction: column; gap: 12px; padding: 14px 14px;
  background: #0b1a2666; border-right: 3px solid var(--ink);
}
.bp-ticket {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px;
  border: 3px solid var(--ink); border-radius: 12px; text-align: center;
}
.bp-ticket--paid { flex: 1.3; justify-content: center; background: linear-gradient(160deg, #ff7ad9, #8a3fe0); }
.bp-ticket--free { flex: 1; justify-content: center; background: linear-gradient(160deg, #4c8ff2, #2442b8); }
.bp-ticket b { font: 400 20px var(--font-display); color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink); }
.lobby-page .bp-ticket small { font: 600 11px/1.3 var(--font); color: #fff; }
.bp-buy { gap: 6px; padding: 8px 18px; font-size: 22px; }
.bp-active { padding: 6px 12px; background: #3fbf55; border: 3px solid var(--ink); border-radius: 8px; font: 400 14px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.bp-all { padding: 10px 6px; font-size: 16px; }

.bp-scroll {
  position: relative; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; cursor: grab;
  scrollbar-color: #ffd23f66 transparent;
}
.bp-scroll.is-dragging { cursor: grabbing; }
.bp-track { position: relative; height: 100%; min-height: 440px; }

.bp-card {
  position: absolute; width: 150px; height: 160px; margin-left: -75px;
  display: flex; flex-direction: column; align-items: center; padding: 8px 6px 10px;
  border: 3px solid var(--ink); border-radius: 12px; color: #fff; font: inherit; text-align: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .35), inset 0 2px 0 #ffffff40;
}
button.bp-card { cursor: pointer; }
.bp-card--paid { top: 10px; background: linear-gradient(180deg, #ffc24a, #e8671c); }
.bp-card--free { top: 234px; background: linear-gradient(180deg, #54acff, #2466c9); }
.bp-card--bonus { top: 110px; height: 180px; background: linear-gradient(180deg, #b37dff, #5a2bb0); }
.bp-art { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 0; }
.bp-amount {
  font: 400 21px/1.1 var(--font-display); color: #fff; white-space: nowrap; overflow: hidden; max-width: 100%;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink);
}
.bp-amount.is-long { font-size: 15px; line-height: 21px; }
.lobby-page .bp-label { margin-top: 3px; font: 600 9px var(--font); letter-spacing: 1px; color: #fff; }
.bp-card.is-claimed { filter: saturate(.45) brightness(.7); }
.bp-card.is-locked { filter: brightness(.82); }
.bp-card.is-premium { filter: brightness(.9); }
.bp-lock { position: absolute; right: 5px; top: 5px; }
.bp-card.is-ready {
  border-color: #fff4b8; box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 0 0 4px #ffd23f99, 0 0 24px #ffd23faa;
  animation: tr-glow 1.3s ease-in-out infinite alternate;
}
/* Кнопка встаёт на место подписи, внутрь карточки: снаружи верхний ряд
   налезал бы ею на номера уровней. */
.bp-card.is-ready { padding-bottom: 36px; }
.bp-card.is-ready .bp-label { display: none; }
.bp-claim {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  padding: 4px 14px; background: linear-gradient(#ffe27a, #e8a21c); border: 3px solid var(--ink); border-radius: 8px;
  font: 400 14px var(--font-display); color: #3a2b00; white-space: nowrap;
}

.bp-bar { position: absolute; left: 0; right: 0; top: 196px; height: 24px; background: #2a1a5a; border-block: 3px solid var(--ink); }
.bp-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffae4a, #e8671c); }
.bp-stop {
  position: absolute; top: 186px; width: 42px; height: 42px; margin-left: -21px;
  display: grid; place-items: center; background: #1c2a3d; border: 3px solid var(--ink); border-radius: 50%;
  font: 400 17px var(--font-display); color: #9fb6cc; text-shadow: 0 2px 0 var(--ink);
}
.bp-stop.is-reached { background: radial-gradient(circle at 40% 35%, #fff6b0, #ffd23f 45%, #e8a41c); color: #fff; }

.bp-got { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 640px; margin: 14px auto 18px; }
.bp-got-tile {
  display: flex; flex-direction: column; align-items: center; width: 130px; padding: 10px 6px;
  background: linear-gradient(180deg, #54acff, #2466c9); border: 3px solid var(--ink); border-radius: 12px;
}
.bp-got-tile b { font: 400 18px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.lobby-page .bp-got-tile small { font: 600 9px var(--font); letter-spacing: 1px; color: #fff; }
.lobby-page .bp-got-note { flex-basis: 100%; margin: 0; text-align: center; }

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

.qs-main { display: grid; grid-template-columns: 290px 300px 1fr; gap: 16px; flex: 1; min-height: 0; padding: 12px 18px; }
.qs-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.qs-head { display: flex; align-items: baseline; gap: 10px; }
.lobby-page .qs-head h2 { margin: 0; font: 400 20px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.lobby-page .qs-head small { flex: 1; font: 600 11px var(--font); color: #b9d7ff; }
.qs-head .btn { align-self: center; }
.qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; overflow-y: auto; min-height: 0; padding: 8px 4px 8px 8px; }
.lobby-page .qs-empty { grid-column: 1 / -1; }

.qs-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 10px;
  background: linear-gradient(180deg, #4c8ff2, #2442b8); border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35); color: #fff; font: inherit; text-align: left;
}
.qs-col--daily .qs-card { min-height: 134px; }
.qs-body { display: flex; align-items: center; gap: 10px; flex: 1; }
.qs-body canvas, .qs-body .icon { flex: none; }
.lobby-page .qs-text { margin: 0; font: 400 14px/1.25 var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.qs-progress { position: relative; height: 22px; margin-right: 76px; background: #0b1a26; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.qs-progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#7dff8a, #2fae4a); }
.qs-progress b { position: relative; display: block; text-align: center; font: 400 13px/18px var(--font-display); color: #fff; text-shadow: 0 1px 0 var(--ink); }
.qs-xp {
  position: absolute; right: 8px; bottom: 7px; display: flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 4px; background: #0b1a26; border: 2px solid var(--ink); border-radius: 6px;
}
.qs-xp b { font: 400 14px var(--font-display); color: #fff; }
.qs-ribbon {
  position: absolute; left: 10px; top: -11px; padding: 2px 8px; background: linear-gradient(#ffe27a, #e8a21c);
  border: 2px solid var(--ink); border-radius: 5px; font: 400 10px var(--font-display); color: #3a2b00; letter-spacing: .5px;
}
.qs-card.is-done { filter: saturate(.5) brightness(.75); }
.qs-card.is-locked { filter: brightness(.7); }
.qs-card.is-swap { cursor: pointer; outline: 3px dashed #ffd23f; outline-offset: 3px; }
.qs-swap {
  position: absolute; right: 8px; top: 8px; padding: 2px 10px; background: #e0455e; border: 2px solid var(--ink); border-radius: 6px;
  font: 400 12px var(--font-display); color: #fff;
}

.qs-mega {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 14px; background: linear-gradient(160deg, #54acff, #2442b8); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35); text-align: center;
}
.qs-mega .qs-progress { align-self: stretch; margin-right: 0; }
.qs-mega.is-locked > :not(.bp-lock):not(.qs-ribbon) { filter: brightness(.65); }
.qs-mega.is-ready { border-color: #fff4b8; box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 0 4px #ffd23f99, 0 0 24px #ffd23faa; }
.qs-reward { display: flex; align-items: center; gap: 8px; }
.qs-reward .qs-xp { position: static; }
.qs-plus { font: 400 22px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.qs-reward-tile { display: flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; background: #0b1a26; border: 2px solid var(--ink); border-radius: 8px; }
.qs-reward-tile b { font: 400 16px var(--font-display); color: #ffd85e; }
.qs-mega-btn { align-self: stretch; }
.qs-choices { display: grid; gap: 12px; width: 420px; margin: 12px auto 16px; }
.qs-choice { cursor: pointer; }
.qs-choice.is-chosen { border-color: #fff4b8; box-shadow: 0 0 0 4px #ffd23f99; }

/* Задания на экране результата: что матч сдвинул. */
.quest-result { display: flex; flex-direction: column; gap: 6px; width: 460px; margin-top: 14px; }
.quest-line {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px;
  background: #0b1a26b0; border: 2px solid #2a4460; border-radius: 8px; font-size: 14px;
}
.quest-line span { flex: 1; }
.quest-line b { font: 400 15px var(--font-display); color: #cfe3f5; }
.quest-line.is-done { border-color: #ffd23f; }
.quest-line.is-done b { color: #ffd85e; }
.home-pass .road-badge { right: -8px; top: -8px; }

@media (prefers-reduced-motion: reduce) {
  .bp-card.is-ready { animation: none; }
}

/* ---------- результат матча ---------- */

/* Два кадра одного экрана (src/ui/results.js): команды и ранг. Всё стоит
   абсолютными координатами кадра 1200×675 — место бойца в обоих кадрах
   известно заранее, и переезд между ними делает один `transform`.

   Фон свой, а не общий канвас меню: синий и красный здесь означают стороны
   матча, а не оформление. */
.result {
  background:
    linear-gradient(160deg, transparent 0 22%, #ffffff14 22% 30%, transparent 30%),
    linear-gradient(170deg, #2f7ff0, #3f8ff5 45%, #2a6be0);
}
.result > * { position: absolute; }

/* Красная половина уезжает вправо целиком, а не гаснет: так видно, что
   соперники ушли из кадра, а синий фон остался твоим. */
.res-red {
  inset: 0; z-index: 0;
  background: linear-gradient(165deg, #d8262d, #b81e2a 60%, #a11724);
  clip-path: polygon(760px 0, 1200px 0, 1200px 675px, 700px 675px);
  transition: transform .6s cubic-bezier(.55, 0, .85, .4);
}
.res-red::before {
  content: ''; position: absolute; inset: 0;
  background: #ff5a4a;
  clip-path: polygon(760px 0, 772px 0, 712px 675px, 700px 675px);
}

.res-head { left: 44px; top: 22px; z-index: 3; }
.res-head h1 {
  margin: 0;
  color: #fff4b8;
  font: 400 84px/1 var(--font-display);
  letter-spacing: 1px;
  transform: skewX(-9deg);
  transform-origin: left bottom;
  text-shadow: -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink), 4px 4px 0 var(--ink),
               0 9px 0 var(--ink);
  animation: res-title .45s cubic-bezier(.2, 1.4, .4, 1);
}
.result.lose .res-head h1 { color: #ffb0a8; }
.result.draw .res-head h1 { color: #e3edf7; }
.res-mode {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 0 6px;
  color: #fff; font: 400 26px/1 var(--font-display);
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 4px 0 var(--ink);
}
@keyframes res-title { from { transform: skewX(-9deg) scale(1.35); } }

/* --- кадр команд --- */

.res-team { inset: 0; z-index: 1; pointer-events: none; }
.res-slot {
  position: absolute; top: 0; bottom: 0;
  transition: transform .45s cubic-bezier(.5, 0, .9, .5), opacity .35s ease-in, visibility 0s .45s;
  animation: res-in-left .5s cubic-bezier(.2, .9, .3, 1.15) var(--d) backwards;
}
.res-slot--foe { animation-name: res-in-right; }
.res-slot > * { position: absolute; }
@keyframes res-in-left { from { transform: translateX(-420px); } }
@keyframes res-in-right { from { transform: translateX(520px); } }

.res-figure { z-index: 1; }
.res-shadow {
  left: 50%; width: 62%; height: 26px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #0b1a2670, transparent);
}
.res-slot--foe .res-shadow { height: 18px; }

/* Сноп света за лучшим игроком — как у референса: его видно раньше подписи. */
.res-glow {
  left: 8%; right: 8%;
  background: linear-gradient(to top, #ffe76ab0, #ffe76a30 70%, transparent);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.res-star {
  left: 0; right: 0; z-index: 3; text-align: center;
  color: #ffe45c; font: 400 24px/1 var(--font-display);
  transform: skewX(-9deg);
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink);
}
.res-slot--foe .res-star { font-size: 16px; }

.res-card {
  left: 0; right: 0; z-index: 2;
  background: #0e2350;
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px #2f64b8, 0 5px 0 #0b1a2660;
  color: #fff;
}
.res-slot--foe .res-card { background: #4a0c14; box-shadow: inset 0 0 0 2px #97232c, 0 5px 0 #0b1a2660; }
.res-card-name {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px 0 10px;
  background: #0a1a3c;
  font: 400 18px/1 var(--font-display);
}
.res-slot--foe .res-card-name { background: #33070d; }
.res-card-name span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.res-card.is-me .res-card-name span { color: var(--gold); }
.res-card-stats { display: flex; gap: 4px; padding: 6px 6px 0; }
.res-card-stats span {
  flex: 1; display: flex; align-items: center; justify-content: space-evenly;
  height: 42px; background: #ffffff12;
}
.res-card b { font: 400 26px/1 var(--font-display); text-shadow: 0 2px 0 var(--ink); }
.res-card-dmg { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; }
.res-card-dmg b { font-size: 23px; }

.res-card--small .res-card-name { height: 28px; font-size: 13px; padding: 0 4px 0 6px; }
.res-card--small .res-card-stats { padding: 4px 4px 0; gap: 3px; }
.res-card--small .res-card-stats span { height: 30px; }
.res-card--small b { font-size: 18px; }
.res-card--small .res-card-dmg { height: 30px; gap: 5px; }
.res-card--small .res-card-dmg b { font-size: 16px; }

.res-title {
  left: -10px; right: -10px; z-index: 3; text-align: center;
  color: #ffd84a; font: 400 19px/1.05 var(--font-display);
  transform: skewX(-6deg);
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink);
}
.res-slot--foe .res-title { font-size: 13px; left: -4px; right: -4px; }

.res-next {
  right: 36px; bottom: 30px; z-index: 4;
  width: 270px; height: 74px;
  font: 400 30px/1 var(--font-display); letter-spacing: 1px;
  transition: opacity .25s, visibility 0s .25s;
}

/* --- твой боец: один на оба кадра --- */

.res-hero {
  left: 0; top: 0; z-index: 2;
  width: 300px; height: 400px;
  transform-origin: 0 0;
  pointer-events: none;
  transition: transform .75s cubic-bezier(.3, .9, .3, 1) .12s;
}
.res-hero canvas { display: block; transform-origin: 50% 100%; }
.res-floor {
  left: 470px; top: 436px; width: 260px; height: 44px; z-index: 1;
  background: radial-gradient(closest-side, #0b1a2680, transparent);
  opacity: 0; transition: opacity .4s .5s;
}

/* --- кадр ранга --- */

.res-rank { inset: 0; z-index: 3; visibility: hidden; pointer-events: none; }
.res-rank > * {
  position: absolute;
  opacity: 0; transform: translateY(26px);
  transition: opacity .4s ease-out, transform .5s cubic-bezier(.2, .9, .3, 1.1);
}
.res-text {
  left: 52px; top: 150px; width: 600px; margin: 0;
  color: #eaf4ff; font: 500 17px/1.4 var(--font);
  text-shadow: 0 2px 0 #0b1a2680;
}
.res-me { left: 110px; top: 300px; width: 310px; }
.res-me > * { position: absolute; }
.res-me .res-title { top: 164px; font-size: 22px; }
.res-card--big { top: 0; }
.res-card-sub {
  padding: 4px 10px 0; color: #bfe0ff; font: 400 15px/1 var(--font-display);
}

.res-rewards {
  right: 40px; top: 140px; width: 360px;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
.res-rewards .trophy-result { min-width: 0; padding: 12px 18px; background: #0e2350e6; border: 3px solid var(--ink); }
.res-rewards .reward { justify-content: flex-start; flex-wrap: wrap; }
.res-rewards .quest-result { width: 100%; margin-top: 0; }
.res-actions { right: 36px; bottom: 30px; display: flex; gap: 14px; }
.res-actions .btn { min-width: 200px; height: 74px; font: 400 28px/1 var(--font-display); }
/* Журнал сети — над кнопками, тихой строкой: нужен он редко и тому,
   кто проверяет связь, а не каждому после каждого боя. */
.res-netlog {
  right: 36px; bottom: 116px; padding: 6px 12px;
  background: #0b1a26b3; border: 2px solid #9fc3e366; border-radius: 10px;
  color: #bfe0ff; font: 500 15px/1 var(--font); cursor: pointer;
}
.res-netlog:hover { color: #fff; border-color: #bfe0ff; }
.res-netlog[hidden] { display: none; }
.result.is-rank .res-netlog { transition-delay: .58s; }

.result.is-rank .res-slot--ally { transform: translateX(-200px); opacity: 0; visibility: hidden; }
.result.is-rank .res-slot--foe { transform: translateX(320px); opacity: 0; visibility: hidden; }
.result.is-rank .res-red { transform: translateX(640px); }
.result.is-rank .res-next { opacity: 0; visibility: hidden; }
.result.is-rank .res-floor { opacity: 1; }
.result.is-rank .res-rank { visibility: visible; pointer-events: auto; }
.result.is-rank .res-rank > * { opacity: 1; transform: none; }
.result.is-rank .res-text { transition-delay: .3s; }
.result.is-rank .res-me { transition-delay: .42s; }
.result.is-rank .res-rewards { transition-delay: .5s; }
.result.is-rank .res-actions { transition-delay: .58s; }

/* Без команды экран открывается сразу вторым кадром: переходить не из чего,
   поэтому боец не переезжает, а выходит на сцену сам. */
.result.is-solo .res-red, .result.is-solo .res-team, .result.is-solo .res-next { display: none; }
.result.is-solo .res-hero { transition: none; }
.result.is-solo .res-hero canvas { animation: res-pop .5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes res-pop { from { transform: translateY(40px) scale(.8); } }

@media (prefers-reduced-motion: reduce) {
  .res-head h1, .res-slot, .result.is-solo .res-hero canvas { animation: none; }
  .res-red, .res-slot, .res-hero, .res-floor, .res-next, .res-rank > * { transition: none; }
}

/* ---------- профиль: чужой и правка имени ---------- */

#s-player .lobby-content { padding-top: 12px; padding-bottom: 8px; }
/* Чужой профиль: те же плашки и слоты, но ничто не нажимается и не обещает
   нажатия — ни курсора, ни подсветки, ни пунктира у пустого слота. */
.pf-plate--static, .pf-avatar--static, .pf-slot--static { cursor: default; }
.pf-plate--static { padding-left: 16px; }
.pf-plate--static:hover, .pf-slot--static:hover { filter: none; }
.pf-plate--static:active { transform: none; box-shadow: 0 5px 0 rgba(3, 12, 22, .72), inset 0 3px 0 rgba(255, 255, 255, .22); }
.pf-avatar--static:hover { filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.pf-slot--static.pf-slot--empty { border-style: solid; border-color: var(--ink); }
.pf-slot-none { font: 400 30px/1 var(--font-display); color: #3d638a; }

/* Подсказка под полем имени встаёт в щель между полем и полосой трофеев.
   Щель на время правки чуть шире: подсказка не должна закрывать полосу,
   а сдвиг на десять пикселей глазу почти не заметен. */
.pf-id:has(.pf-name-edit) { gap: 26px; }
.pf-name-edit { position: relative; max-width: 460px; }
.lobby-page .pf-name-hint {
  position: absolute; left: 4px; top: calc(100% + 5px); z-index: 2;
  padding: 2px 8px; background: var(--ink); border-radius: 5px;
  font: 600 12px/1.4 var(--font); color: #9fc3e3; white-space: nowrap;
}
.pf-name-edit.bad .pf-name-input { outline-color: var(--red); }
.lobby-page .pf-name-edit.bad .pf-name-hint { color: #ff8a80; }
.pf-name-edit.shake { animation: pf-shake .3s; }
@keyframes pf-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- таблица лидеров ---------- */

/* Страница без общей прокрутки: левая колонка стоит на месте, прокручивается
   только сама таблица, а своя строка прибита под ней. */
#s-leaders .body { display: flex; overflow: hidden; padding: 0; }
#s-leaders .lobby-content { display: flex; flex: 1; height: 100%; min-height: 0; max-width: none; padding: 0; }
/* Строка сетки — minmax(0, 1fr), а не auto: иначе сетка вырастает под все
   двести строк таблицы, и прокручивать внутри становится нечего. */
.lb { display: grid; grid-template-columns: 400px 1fr; grid-template-rows: minmax(0, 1fr); gap: 26px; flex: 1; min-height: 0; padding: 16px 30px 18px; }

.lb-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.lb-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); border: 4px solid var(--ink); border-radius: 10px; gap: 4px; }
.lb-tab {
  height: 58px; padding: 0 8px;
  background: linear-gradient(#3a4250, #262c37); border: 0; border-radius: 6px;
  color: #fff; font: 400 17px/1.1 var(--font-display); letter-spacing: .4px; text-shadow: 0 2px 0 var(--ink);
  transform: skewX(-6deg); cursor: pointer;
}
.lb-tab:hover { filter: brightness(1.15); }
.lb-tab.sel { background: linear-gradient(#ff9b3d, #e8701c); cursor: default; filter: none; }
.lb-tab:focus-visible, .lb-hero:focus-visible, .lb-row:focus-visible, .lb-step:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.lb-side-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  padding: 16px; background: #0b2140aa; border: 3px solid var(--ink); border-radius: 12px;
}

.lb-heroes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lb-hero {
  aspect-ratio: 1; padding: 0; overflow: hidden;
  background: var(--rc, var(--panel)); border: 4px solid var(--ink); border-radius: 6px; cursor: pointer;
}
.lb-hero canvas { display: block; width: 100% !important; height: 100% !important; }
.lb-hero:hover { filter: brightness(1.12); }
.lb-hero.sel { border-color: #fff; box-shadow: 0 0 0 3px var(--ink); }
.lb-hero-name { margin-top: auto; padding-top: 14px; text-align: center; }
.lb-hero-name b { display: block; font: 400 30px/1.1 var(--font-display); color: #fff; text-shadow: 0 3px 0 var(--ink); }
.lobby-page .lb-hero-name small { font: 600 11px var(--font); letter-spacing: 1.2px; color: #9fc3e3; }

.lb-podium { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; }
.lb-step {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 0 0 14px; background: none; border: 0; color: #fff; cursor: pointer;
}
.lb-step::after {
  content: ''; order: 3; align-self: stretch; margin-top: 4px;
  background: linear-gradient(#5a7a9c, #33506f); border: 3px solid var(--ink); border-radius: 8px 8px 0 0;
}
.lb-step--1::after { height: 150px; background: linear-gradient(#ffd966, #d9920f); }
.lb-step--2::after { height: 104px; background: linear-gradient(#eef3f8, #8d9cab); }
.lb-step--3::after { height: 70px; background: linear-gradient(#e6a36a, #97582a); }
.lb-step > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px var(--font-display); text-shadow: 0 2px 0 var(--ink); }
.lb-step .lb-troph b { font-size: 16px; }
.lb-step-place {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 1;
  font: 400 40px/1 var(--font-display); color: #fff; text-shadow: 0 3px 0 var(--ink);
}
.lb-step:not(div):hover .lb-avatar { filter: brightness(1.12); }
.lobby-page .lb-note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: #9fc3e3; text-align: center; }

.lb-board {
  display: flex; flex-direction: column; min-height: 0;
  background: #0b2140cc; border: 4px solid var(--ink); border-radius: 12px; overflow: hidden;
}
.lb-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 4px; }
.lb-row {
  display: grid; grid-template-columns: 62px 50px 1fr auto; align-items: center; gap: 12px;
  width: 100%; height: 64px; margin-bottom: 6px; padding: 0 18px 0 8px;
  background: linear-gradient(#5c5a70, #4a4860); border: 3px solid var(--ink); border-radius: 6px;
  color: #fff; text-align: left; cursor: pointer;
}
.lb-row:hover { filter: brightness(1.12); }
.lb-rank {
  display: grid; place-items: center; height: 46px;
  background: #34334a; border-radius: 4px;
  font: 400 24px/1 var(--font-display); color: #c9c7dc; text-shadow: 0 2px 0 var(--ink);
}
.lb-rank--out { font-size: 17px; }
.lb-row--top1 .lb-rank { background: linear-gradient(#ffd966, #d9920f); color: #fff; }
.lb-row--top2 .lb-rank { background: linear-gradient(#eef3f8, #8d9cab); color: #fff; }
.lb-row--top3 .lb-rank { background: linear-gradient(#e6a36a, #97582a); color: #fff; }
.lb-avatar { display: block; border-radius: 6px; }
.lb-who { display: flex; flex-direction: column; min-width: 0; }
.lb-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 22px/1.15 var(--font-display); text-shadow: 0 2px 0 var(--ink); }
.lobby-page .lb-who small { font: 600 12px/1.3 var(--font); letter-spacing: .6px; color: #d7d4ea; }
.lb-troph { display: flex; align-items: center; gap: 6px; }
.lb-troph b { font: 400 24px/1 var(--font-display); color: #ffd23f; text-shadow: 0 2px 0 var(--ink); }

/* Своя строка — оранжевая, как в жанре; прибитая копия под таблицей
   отделена тенью, чтобы не читаться последней строкой списка. */
.lb-row--you { background: linear-gradient(#ff9b3d, #e8701c); }
.lb-row--you .lb-rank { background: #c85a12; color: #fff; }
.lobby-page .lb-row--you .lb-who small { color: #fff3e0; }
.lb-row--pinned { flex: none; width: auto; margin: 0; border-width: 4px 0 0; border-radius: 0; height: 70px; padding-left: 16px; box-shadow: 0 -6px 12px rgba(0, 0, 0, .35); }

/* ---- серия побед на главном экране ---- */
/* Узкая плашка слева от режима: режим отдаёт ей часть ширины. Холодная, пока
   серии нет, и горячая со второй победы — тогда серия уже приносит трофеи. */
.home-streak {
  flex: none; width: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(160deg, #1d2c40, #111b29);
  border: 3px solid var(--line); border-radius: 7px;
  box-shadow: 0 7px 0 rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255,255,255,.1);
  color: var(--dim); font-family: var(--font-display); text-align: center;
}
.home-streak small { font: 700 9px/1 var(--font); letter-spacing: .8px; text-transform: uppercase; }
.home-streak b { display: flex; align-items: center; gap: 4px; font-size: 28px; line-height: 1; color: var(--text); }
.home-streak-icon { display: flex; filter: grayscale(1) brightness(.8); }
.home-streak-icon .icon { width: 26px !important; height: 26px !important; }
.home-streak.hot { background: linear-gradient(160deg, #6b3514, #2a1a18); border-color: #ff9d3c; color: #ffd08a; }
.home-streak.hot .home-streak-icon { filter: none; }
.home-streak.hot b { color: #ffdc62; }
.trophy-result .streak-line { color: #ffb45c; font-weight: 700; }
.trophy-result .streak-line.lost { color: #9fb2c6; font-weight: 600; }

/* ---------- метка записи (L) ---------- */

/* Поверх всего, включая переход между экранами: метка отладочная, и её
   задача — не дать человеку отыграть четверть часа в уверенности, что
   пишется, когда не пишется. Кликов не ловит вовсе. */
.rec-badge {
  position: fixed; left: 16px; top: 16px; z-index: 2000;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 11px;
  background: rgba(0, 0, 0, .5); border-radius: 8px;
  font: bold 14px var(--font); color: rgba(255, 255, 255, .85);
  pointer-events: none;
}
.rec-badge i { width: 12px; height: 12px; border-radius: 50%; background: #ff5147; animation: recBlink 1.3s ease-in-out infinite; }

/* Мигает, потому что неподвижный кружок читается как значок, а не как
   «пишется прямо сейчас». */
@keyframes recBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- панель dev-полигона (F2) ---------- */

/* Прижата к правому краю и скроллится: чисел у бойца полтора десятка, а
   панель не должна закрывать того, на ком их проверяют. Ширина взята так,
   чтобы ползунок и поле помещались в строку — иначе на каждое число ушло
   бы по две, и список перестал бы читаться целиком. */
.devpanel {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 3000;
  width: 340px; max-width: 46vw;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px 16px;
  overflow-y: auto;
  background: rgba(10, 20, 30, .92);
  border-left: 2px solid rgba(120, 180, 230, .35);
  font: 12px var(--font); color: #d6e6f5;
}
.dev-head { display: flex; align-items: center; gap: 8px; }
.dev-head b { font-size: 15px; letter-spacing: .06em; color: #ffd24a; }
.dev-hint { color: #7f95a8; font-size: 11px; }
.dev-x {
  margin-left: auto; width: 24px; height: 24px;
  background: rgba(255, 255, 255, .08); border: 0; border-radius: 6px;
  color: #d6e6f5; cursor: pointer; font-size: 13px;
}
.dev-sec { display: flex; flex-direction: column; gap: 7px; }
.dev-sec h4 {
  margin: 0; font-size: 11px; letter-spacing: .09em;
  color: #86a6c2; font-weight: 700;
}
.dev-row { display: flex; gap: 6px; }
.dev-row--wrap { flex-wrap: wrap; }
.devpanel select, .devpanel input[type="number"], .dev-out {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(140, 190, 230, .25);
  border-radius: 6px; color: #eaf3fb; font: 12px var(--font); padding: 4px 6px;
  min-width: 0;
}
.devpanel select { flex: 1; }
.dev-btn {
  flex: 1; padding: 7px 8px; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(140, 190, 230, .25);
  border-radius: 6px; color: #eaf3fb; font: bold 12px var(--font);
}
.dev-btn:hover { background: rgba(255, 255, 255, .15); }
.dev-btn--go { background: #1d6fb8; border-color: #3c9de0; }
.dev-btn--go:hover { background: #2585d6; }
.dev-check { display: flex; align-items: center; gap: 5px; cursor: pointer; }

.dev-stats { display: flex; flex-direction: column; gap: 2px; }
/* Строка числа: название — ползунок — поле, подпись под ними во всю ширину.
   Подпись живёт отдельной строкой нарочно: «3.50 тайла/с · полная дальность
   за 2.00 с» в строку с ползунком не влезает, а это и есть то, ради чего
   панель открывают. */
.dev-stat {
  display: grid; grid-template-columns: 96px 1fr 62px;
  gap: 6px; align-items: center;
  padding: 3px 4px; border-radius: 5px;
}
.dev-stat.is-changed { background: rgba(255, 210, 74, .12); }
.dev-stat-key { color: #9fb6c9; overflow: hidden; text-overflow: ellipsis; }
.dev-stat.is-changed .dev-stat-key { color: #ffd24a; }
.dev-stat input[type="range"] { width: 100%; accent-color: #3c9de0; }
.dev-stat-unit { grid-column: 1 / -1; color: #7f95a8; font-size: 11px; }
.dev-stat-unit:empty { display: none; }
.dev-out { width: 100%; resize: vertical; font-size: 11px; }

/* ---------- сенсорное управление ---------- */

/* Слой касаний — на всё окно, под облачком пинов. touch-action: none — иначе протяжка пальцем прокручивала бы страницу,
   а двойной тап приближал её посреди боя. */
.touch-layer {
  position: fixed; inset: 0; z-index: 4; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.touch-layer[hidden] { display: none; }

/* ---------- «поверни телефон» ---------- */

/* Только в портретной ориентации и только там, где играют пальцем:
   у телефона указатель «грубый», а включённые в настройках джойстики
   (body.touch-on) — это то же самое сказанное вслух. Узкое высокое окно
   за компьютером — не повод закрывать игру: кадр в нём просто сожмётся
   с полями, как в любом окне. */
#rotate {
  display: none; position: fixed; inset: 0; z-index: 3500;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center;
  background: radial-gradient(circle at 50% 40%, var(--sky-a), var(--sky-b) 70%);
  color: var(--text); font-family: var(--font);
}
#rotate b { font: 900 26px var(--font-display); letter-spacing: 1px; text-shadow: 0 3px 0 var(--ink); }
#rotate span { color: var(--dim); font-size: 15px; font-weight: 700; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }
@media (orientation: portrait) { body.touch-on #rotate { display: flex; } }

/* Телефон рисуется рамкой и поворачивается на бок — жест, который просят
   сделать, показан, а не описан. */
.rotate-phone {
  position: relative; width: 64px; height: 110px; margin-bottom: 18px;
  border: 6px solid var(--text); border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink);
  animation: rotatePhone 2.4s ease-in-out infinite;
}
.rotate-phone i {
  position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px;
  background: var(--text); border-radius: 2px;
}
@keyframes rotatePhone {
  0%, 20% { transform: rotate(0deg); }
  50%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rotate-phone { animation: none; transform: rotate(-90deg); }
}

/* ---------- низкая сцена ---------- */

/* На джойстиках сцена тянется по ширине экрана и становится ниже 675
   (ui/menu.js, resizeStage): телефон вытянут сильнее 16:9, и поля по бокам
   делали бы меню на четверть мельче. Всё, что свёрстано от верха до низа
   кадра, здесь поджимается; раскладка при этом та же, меняются отступы. */
#stage.short .home-side--left { top: 112px; }
/* Колонка комнаты кончается над нижней полосой: сцена ниже — и она короче. */
#stage.short .home-right { top: 100px; max-height: calc(100% - 222px); }
#stage.short .home-stage { top: 100px; height: 340px; }
/* Описание бойца в низкой сцене выталкивало «Выбрать» за край: теперь оно
   само прокручивается, а кнопки остаются на месте. */
#stage.short .detail-desc { flex: 1 1 0; min-height: 0; overflow-y: auto; margin-bottom: 10px; }
#stage.short .detail-rank { margin-top: 8px; }
#stage.short .detail-pick { padding-block: 12px; }
#stage.short .detail-try { padding-block: 8px; }
/* Trophy Road: лента свёрстана под полные 675 — карточки, полоса и метка
   трофеев стоят по высоте абсолютно. Здесь всё то же, только плотнее. */
#stage.short .tr-head { padding: 6px 28px 2px; }
#stage.short .tr-track { min-height: 370px; }
#stage.short .tr-step { top: 8px; }
#stage.short .tr-card { height: 190px; }
#stage.short .tr-bar { top: 262px; }
#stage.short .tr-stop { top: 257px; }
#stage.short .tr-marker { top: 332px; }
/* Задания: колонки росли по содержимому и уходили за низ сцены. В низкой
   сцене строка сетки ограничена высотой, а каждая колонка прокручивается сама. */
#stage.short .qs-main { grid-template-rows: minmax(0, 1fr); padding-block: 8px; }
#stage.short .qs-col { overflow-y: auto; }
#stage.short .qs-col--daily .qs-card { min-height: 112px; }
/* Пасс и задания — одна раскладка: `margin: auto` у .lobby-content
   центрирует её и заодно отпускает по высоте содержимого, а в низкой сцене
   содержимое выше экрана. Без поля блок тянется ровно на высоту экрана. */
#stage.short #s-pass .lobby-content, #stage.short #s-quests .lobby-content { margin: 0; }
/* Дорожка пасса: два ряда карточек и полоса между ними стоят по высоте
   абсолютно; в низкой сцене нижний ряд уходил под край. */
#stage.short .bp-track { min-height: 0; }
#stage.short .bp-card { height: 140px; }
#stage.short .bp-card--paid { top: 6px; }
#stage.short .bp-card--free { top: 198px; }
#stage.short .bp-card--bonus { top: 88px; height: 160px; }
#stage.short .bp-bar { top: 164px; }
#stage.short .bp-stop { top: 154px; }
/* Пьедестал лидеров ниже: ступени фиксированной высоты выталкивали
   пояснение под край сцены. */
#stage.short .lb { padding-block: 10px; }
#stage.short .lb-step--1::after { height: 100px; }
#stage.short .lb-step--2::after { height: 70px; }
#stage.short .lb-step--3::after { height: 46px; }
/* Открытие ящика — один холст 1200×675 с надписями от верха до низа.
   Обрезать его нечем, поэтому в низкой сцене он вписывается по высоте:
   ящик здесь чуть мельче, зато «Нажми» и счётчик не уходят за край. */
#stage.short .box-screen { align-items: center; }
#stage.short .box-canvas { width: auto; height: 100%; aspect-ratio: 16 / 9; }
/* Экран результатов свёрстан абсолютными числами под 1200×675 (ui/results.js)
   и живёт на переездах между ними. Перекладывать эти числа под каждую
   высоту незачем: экран вписывается в низкую сцену целиком, по высоте,
   и встаёт по центру. --short-k — во сколько раз сцена ниже 675. */
#stage.short #s-result {
  inset: auto; top: 0; width: 1200px; height: 675px;
  left: calc(600px * (1 - var(--short-k)) / var(--short-k));
  zoom: var(--short-k);
}

/* Экран бойца собран из крупных плашек под полную высоту: ужатые по
   отступам, они всё равно не влезали, а панель прокачки уходила за низ.
   Поэтому он, как результаты, уменьшается целиком — раскладка остаётся
   той же, что на ПК. Ширина при этом не теряется: сетка раздвигается на
   всю сцену, и лента с именем по-прежнему уходит за левый край. Окна
   экрана — улучшение, силы, пины — ужимаются так же. */
#stage.short #s-hero .detail {
  zoom: var(--short-k);
  max-width: none; margin: 0;
}
#stage.short #s-hero .hero-modal-panel { zoom: var(--short-k); }

/* Выдвижное меню дома — во всю высоту сцены, а не фиксированные 675. */
#stage.short .home-drawer { height: 100%; gap: 8px; padding-top: 76px; overflow-y: auto; }
#stage.short .home-drawer .btn { height: 46px; }

/* Мелкие подписи меню. Сцена на телефоне сжимается примерно в 0.76 раза,
   и всё, что в кадре набрано 8–13 px, выходило на экране в 6–10 px —
   читать нечем. Здесь те же правила с кеглем покрупнее: ≤11 → 13, 12 → 14,
   13 → 15. Раскладку это не трогает — только сами буквы.
   :where() держит специфичность исходного правила: переопределение
   побеждает ровно его и уступает всему, что было конкретнее, — иначе общее
   «.lobby-page small» ужало бы и крупные подписи, которые его перебивали. */
:where(#stage.short) .demo-label,
:where(#stage.short) .detail-power small,
:where(#stage.short) .event-kicker,
:where(#stage.short) .eyebrow,
:where(#stage.short) .hero-level-badge small,
:where(#stage.short) .hero-plate span,
:where(#stage.short) .home-brand small,
:where(#stage.short) .home-pass small,
:where(#stage.short) .home-streak small,
:where(#stage.short) .lobby-card small,
:where(#stage.short) .lobby-page .bp-got-tile small,
:where(#stage.short) .lobby-page .bp-label,
:where(#stage.short) .lobby-page .bp-season small,
:where(#stage.short) .lobby-page .bp-ticket small,
:where(#stage.short) .lobby-page .lb-hero-name small,
:where(#stage.short) .lobby-page .pf-note,
:where(#stage.short) .lobby-page .pf-slot small,
:where(#stage.short) .lobby-page .qs-head small,
:where(#stage.short) .lobby-page .tr-label,
:where(#stage.short) .lobby-page .tr-score small,
:where(#stage.short) .lobby-page small,
:where(#stage.short) .log-fighter > small,
:where(#stage.short) .log-fighter-lvl,
:where(#stage.short) .log-fighter-troph,
:where(#stage.short) .log-mode small,
:where(#stage.short) .log-vs small,
:where(#stage.short) .log-when small,
:where(#stage.short) .qs-ribbon,
:where(#stage.short) .trophy-rules caption { font-size: 13px; }
:where(#stage.short) .btn--small,
:where(#stage.short) .event-map,
:where(#stage.short) .hero-power b,
:where(#stage.short) .lobby-page .lb-note,
:where(#stage.short) .lobby-page .lb-who small,
:where(#stage.short) .lobby-page .pf-name-hint,
:where(#stage.short) .lobby-page .pf-stat > small,
:where(#stage.short) .lobby-page .tr-reveal small,
:where(#stage.short) .qs-swap,
:where(#stage.short) .tr-soon,
:where(#stage.short) .trophy-rules table { font-size: 14px; }
:where(#stage.short) .detail-note,
:where(#stage.short) .detail-star small,
:where(#stage.short) .detail-upgrade small,
:where(#stage.short) .hero-trophy-badge,
:where(#stage.short) .hm-stock,
:where(#stage.short) .home-drawer .btn,
:where(#stage.short) .info-head b,
:where(#stage.short) .lobby-page .pf-caption,
:where(#stage.short) .lobby-page .pf-eyebrow,
:where(#stage.short) .lobby-page .pf-tag,
:where(#stage.short) .lobby-page .tr-note,
:where(#stage.short) .lobby-page p,
:where(#stage.short) .log-when b,
:where(#stage.short) .match-center > span,
:where(#stage.short) .match-count small,
:where(#stage.short) .mode-note,
:where(#stage.short) .panel h3,
:where(#stage.short) .pf-pick--plain b,
:where(#stage.short) .qs-progress b,
:where(#stage.short) .res-card--small .res-card-name,
:where(#stage.short) .res-slot--foe .res-title,
:where(#stage.short) .setting-note,
:where(#stage.short) .trophy-result small { font-size: 15px; }

/* ---------- тест скорости ---------- */

/* Отчёт теста (ui/bench.js) — поверх всего, вне сцены меню: он живёт
   в окне целиком и на телефоне читается без растяжки сцены. Текст
   моноширинный — это таблица, выровненная пробелами, и её копируют. */
.bench-report {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 12px;
  background: rgba(4, 14, 26, .8);
}
.bench-panel {
  display: flex; flex-direction: column; gap: 10px;
  width: min(100%, 980px); max-height: 100%;
  padding: 14px 16px;
  background: #10263a; border: 3px solid var(--ink); border-radius: 10px;
}
.bench-panel h2 { margin: 0; font: 400 22px/1 var(--font-display); color: #fff; letter-spacing: 1px; }
.bench-panel pre {
  flex: 1 1 auto; min-height: 0; margin: 0; overflow: auto;
  font: 12px/1.45 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #dcebf6;
  white-space: pre; user-select: text;
}
.bench-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- магазин ---------- */

/* Лента разделов, как у жанра: наборы, ежедневные, скины, ресурсы. Каждый
   раздел — синяя панель со своим таймером, карточки внутри — с ценником
   во всю ширину снизу: цена — то, что ищут глазами первым. */
#s-shop .lobby-content { display: flex; flex: 1; min-width: 0; min-height: 0; max-width: none; padding: 0; }
/* Лучи — на экране, а не на ленте: окно покупки висит поверх ленты, не в ней. */
#s-shop { --sh-rays: repeating-conic-gradient(from 0deg at 50% 46%, #ffffff1c 0 9deg, transparent 9deg 18deg); }
.sh {
  display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0;
  background: radial-gradient(ellipse at 50% 35%, #3fa0ff55, transparent 70%), linear-gradient(120deg, #1646a8, #2a6ae0);
}
.sh-scroll {
  flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; cursor: grab;
  scrollbar-color: #ffd23f66 transparent;
}
.sh-scroll.is-dragging { cursor: grabbing; }
.sh-lane { display: flex; gap: 22px; height: 100%; padding: 14px 22px 12px; width: max-content; }

.sh-section {
  display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 14px;
  background: #0b1a2633; border: 3px solid #0b1a2699; border-radius: 12px;
}
.sh-head { position: relative; display: flex; justify-content: center; align-items: center; min-height: 30px; }
.lobby-page .sh-head h2 {
  margin: 0; font: 400 20px var(--font-display); color: #fff; letter-spacing: .6px;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
.sh-timer {
  position: absolute; left: 0; top: 2px; padding: 3px 10px;
  background: var(--ink); border-radius: 6px; font: 600 12px var(--font); color: #fff; letter-spacing: .5px;
}

.sh-grid { display: grid; gap: 12px; flex: 1; min-height: 0; }
.sh-grid--offers { grid-auto-flow: column; grid-auto-columns: 250px; }
.sh-grid--daily { grid-template-columns: repeat(3, 172px); grid-template-rows: repeat(2, 1fr); }
.sh-grid--skins { grid-auto-columns: 230px; }
.sh-grid--resources { display: flex; gap: 12px; }

/* ---- карточка ---- */

.sh-card {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  padding: 0; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #5cb8ff, #2466c9); color: #fff; font: inherit; text-align: center;
  border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .35), inset 0 2px 0 #ffffff40;
  transition: transform .08s;
}
.sh-card:not(:disabled):hover { transform: translateY(-2px); }
.sh-card:not(:disabled):active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.sh-card:disabled { cursor: default; filter: saturate(.35) brightness(.72); }
.sh-top { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 6px 0 2px; }
.sh-title {
  max-width: 100%; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 16px/1.2 var(--font-display); letter-spacing: .3px;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink);
}
.sh-title.is-long { font-size: 13px; line-height: 19px; }
.lobby-page .sh-sub { font: 600 10px var(--font); letter-spacing: 1px; color: #eaf4ff; text-shadow: 0 1px 0 var(--ink); }
.sh-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 6px 8px; }
.sh-art { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; width: 100%; }
.sh-art canvas { max-width: 100%; max-height: 100%; }

/* Сколько — плашкой под картинкой, как у жанра: число, а не «+500» в углу. */
.sh-amount {
  position: relative; z-index: 1; margin-top: -8px; padding: 0 14px; white-space: nowrap;
  background: linear-gradient(#6ee07a, #2e9e45); border: 3px solid var(--ink); border-radius: 16px;
  font: 400 20px/28px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink);
}
.sh-badge {
  position: absolute; left: 50%; top: 30px; transform: translateX(-50%); padding: 1px 8px; white-space: nowrap;
  background: #e0455e; border: 2px solid var(--ink); border-radius: 6px;
  font: 400 13px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink);
}

.sh-price {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; background: #0b1a26e6; border-top: 3px solid var(--ink);
  font: 400 20px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink);
}
.sh-was { margin-right: 4px; font-size: 15px; color: #ff9aa8; text-decoration-thickness: 3px; }
.sh-price.is-free { background: linear-gradient(#6ee07a, #2e9e45); }
.sh-price.is-short span { color: #ff9aa8; }
.sh-price.is-done { font-size: 15px; color: #cfe3f2; }
.sh-info {
  position: absolute; z-index: 3; right: 6px; top: 32px; display: grid; place-items: center; width: 28px; height: 28px;
  background: #0b1a26cc; border: 2px solid #ffffff88; border-radius: 50%; cursor: pointer;
}

/* Бесплатная ячейка светится: ради неё в магазин и заходят каждый день. */
.sh-card.is-ready:has(.is-free) {
  border-color: #fff4b8; box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 0 0 4px #7dff8c88, 0 0 22px #7dff8caa;
  animation: tr-glow 1.3s ease-in-out infinite alternate;
}

/* ---- наборы ---- */

/* Заголовок набора — на своей тёмной полосе, отдельно от картинки: поверх
   нарядной подложки с лучами белые буквы иначе теряются. */
.sh-card--offer { background: #1b4fb0; }
.sh-card--offer .sh-top {
  padding: 8px 0 6px; background: linear-gradient(#2f7ef0, #1c56c4);
  border-bottom: 3px solid var(--ink); box-shadow: 0 3px 0 #ffffff26 inset;
}
.sh-card--offer .sh-title, .sh-card--offer .sh-title.is-long { font-size: 19px; }
.sh-card--offer .sh-body {
  background: var(--sh-rays), radial-gradient(circle at 50% 46%, #b4f0ff, #4cc0ff 34%, #2584e6 68%, #1b5fc9);
  padding-bottom: 14px;
}
.sh-card--offer .sh-amount { font-size: 24px; line-height: 32px; padding: 0 18px; }
.sh-card--offer .sh-price { height: 50px; font-size: 26px; }
.sh-tagname {
  position: absolute; right: 10px; top: 8px; display: flex; flex-direction: column; align-items: flex-end;
  font: 400 16px/1.1 var(--font-display); color: #fff; text-align: right;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
/* «i» набора — слева: справа в углу стоит имя товара. */
.sh-card--offer .sh-info { left: 8px; right: auto; top: 48px; }
.sh-tagname small { font: 400 11px var(--font-display); color: #9ff0ff; }
/* Выгода набора — звезда в углу, как в жанре: её видно раньше цены. */
.sh-value {
  position: absolute; z-index: 3; right: 6px; bottom: 58px; display: grid; place-items: center; width: 58px; height: 58px;
  padding-bottom: 10px; background: #e0455e; border: 3px solid var(--ink); border-radius: 50%; transform: rotate(-12deg);
  font: 400 20px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink);
}
.sh-value::after { content: 'ВЫГОДА'; position: absolute; bottom: 8px; font: 600 8px var(--font); letter-spacing: .5px; text-shadow: none; }

/* ---- ежедневные ---- */

/* Боец на карточке — крупно и на цвете своей редкости, как в сетке бойцов. */
.sh-hero-art {
  position: relative; display: grid; place-items: end center;
  background: var(--sh-rays), radial-gradient(circle at 50% 40%, #ffffff66, transparent 60%), var(--rc, #3a9ce0);
}
.sh-card--power .sh-top, .sh-card--star .sh-top { background: #0b1a2699; border-bottom: 3px solid var(--ink); }
.sh-card--power .sh-body, .sh-card--star .sh-body { padding: 0; }
.sh-card--power .sh-art, .sh-card--star .sh-art { align-items: stretch; }
.sh-card--power .sh-hero-art, .sh-card--star .sh-hero-art { width: 100%; }
.sh-card--star .star-badge { position: absolute; right: 6px; bottom: 6px; }
.sh-card--power, .sh-card--star { background: var(--panel); }

/* Полоска очков: сколько у бойца уже есть из нужных на следующий уровень. */
.sh-prow {
  position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.sh-pbar {
  position: relative; flex: 1; display: flex; align-items: center; gap: 3px; height: 24px; padding-right: 6px;
  background: #0b1a26d9; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden;
}
.sh-pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ff7ad0, #c2338f); }
.sh-pbar canvas { position: relative; margin-left: -2px; }
.sh-pbar span { position: relative; font: 400 13px var(--font-display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.sh-pplus { font: 400 18px var(--font-display); color: #7dff8c; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink); }

.sh-card--box { background: var(--sh-rays), linear-gradient(180deg, #b37dff, #5a2bb0); }
.sh-card--doubler { background: var(--sh-rays), linear-gradient(180deg, #64e0ff, #1d7fc9); }
.sh-card--coins { background: var(--sh-rays), linear-gradient(180deg, #ffcf45, #e8871c); }
.sh-coins { display: grid; place-items: center; }
.sh-coins > * { grid-area: 1 / 1; }

/* ---- скины ---- */

/* Места под скины пока нет товара: силуэт бойца обещает, что здесь будет. */
.sh-card--soon {
  align-items: center; padding-top: 10px; cursor: default;
  background: var(--sh-rays), radial-gradient(circle at 50% 45%, #7b4fd0, #2e1a63 75%);
}
.sh-card--soon canvas { filter: brightness(0) opacity(.55); }
.sh-soon-note { padding: 0 12px 16px; font: 600 12px var(--font); letter-spacing: 1px; color: #d9c9ff; text-transform: uppercase; }

/* ---- ресурсы ---- */

/* Три колонки на своих подложках: ящики, монеты, удвоители. */
.sh-group {
  display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 12px;
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 2px 0 #ffffff33;
}
.lobby-page .sh-group h3 {
  margin: 0; text-align: center; font: 400 17px var(--font-display); color: #fff; letter-spacing: .5px;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
.sh-col { flex: 1; min-height: 0; display: grid; gap: 10px; grid-template-rows: repeat(2, 1fr); grid-auto-columns: 148px; grid-auto-flow: column; }
.sh-group--coins .sh-col { grid-auto-flow: row; grid-template-columns: repeat(2, 148px); }
.sh-group--box { background: repeating-linear-gradient(135deg, #ffffff12 0 16px, transparent 16px 32px), linear-gradient(#3d9cf5, #1f5fc4); }
.sh-group--coins { background: repeating-linear-gradient(135deg, #ffffff12 0 16px, transparent 16px 32px), linear-gradient(#e0a431, #a8620f); }
.sh-group--doubler { background: repeating-linear-gradient(135deg, #ffffff12 0 16px, transparent 16px 32px), linear-gradient(#8a5ae6, #4a2598); }
.sh-group--box .sh-card--box { background: var(--sh-rays), radial-gradient(circle at 50% 45%, #9fe0ff, #3f9cf0 60%, #2466c9); }

.sh-tabs {
  flex: none; display: flex; justify-content: center; gap: 6px; padding: 6px 12px;
  background: #0b1a26cc; border-top: 3px solid var(--ink);
}
.sh-tab {
  display: flex; align-items: center; gap: 8px; padding: 6px 18px; background: none; border: 0; cursor: pointer;
  font: 400 17px var(--font-display); color: #ffd85e; letter-spacing: .5px; text-shadow: 0 2px 0 var(--ink);
}
.sh-tab:hover { color: #fff; }
.sh-tab-free {
  padding: 1px 6px; background: #2e9e45; border: 2px solid var(--ink); border-radius: 4px;
  font: 600 10px var(--font); color: #fff; text-shadow: none;
}

/* ---- окно покупки и «что внутри ящика» ---- */

/* Общая панель слоёв рассчитана на сетку выбора (760px); товару в ней
   просторно до пустоты, поэтому окно покупки уже и всё в нём по центру. */
.pf-picker-panel:has(.sh-ask), .pf-picker-panel:has(.sh-info-box) { width: 460px; }
.sh-ask, .sh-info-box { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px auto 18px; }
.sh-ask-art {
  display: grid; place-items: center; width: 260px; height: 170px; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  background: var(--sh-rays), radial-gradient(circle at 50% 46%, #b4f0ff, #4cc0ff 34%, #2584e6 68%, #1b5fc9);
}
.sh-ask-art canvas { max-width: 100%; max-height: 100%; }
.sh-ask-art .sh-hero-art { width: 100%; height: 100%; }
.sh-ask-art .star-badge { position: absolute; right: 8px; bottom: 8px; }
.sh-ask-art.sh-card--box { background: var(--sh-rays), linear-gradient(180deg, #b37dff, #5a2bb0); }
.sh-ask-art.sh-card--coins { background: var(--sh-rays), linear-gradient(180deg, #ffcf45, #e8871c); }
.sh-ask-art.sh-card--doubler { background: var(--sh-rays), linear-gradient(180deg, #64e0ff, #1d7fc9); }
.sh-ask-name {
  font: 400 22px var(--font-display); color: #fff; letter-spacing: .4px;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
.lobby-page .sh-ask-text { margin: 0; max-width: 360px; text-align: center; font-size: 14px; line-height: 1.45; color: #e6f1fb; }
.lobby-page .sh-ask-short { margin: 0; color: #ff9aa8; font-weight: 600; }
.sh-buy { display: inline-flex; align-items: center; gap: 8px; }
.sh-buy .icon { margin-left: 4px; }
.sh-odds { list-style: none; margin: 0; padding: 0; width: 360px; }
.sh-odds li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 2px; border-bottom: 1px solid #ffffff1f; font-size: 14px; color: #dbe9ff; }
.sh-odds b { color: #fff; font-weight: 700; }
.lobby-page .sh-odds-note { margin: 4px 0 0; font-size: 12px; line-height: 1.4; text-align: center; color: #9fc3e3; }

.home-shop { position: relative; }
.home-shop .road-badge { right: -10px; top: -10px; }

@media (prefers-reduced-motion: reduce) {
  .sh-card.is-ready:has(.is-free) { animation: none; }
}

/* ---------- админ-меню (ui/admin.js) ---------- */
.panel.adm-panel { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.adm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.adm-row, .adm-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-heroes { display: flex; flex-direction: column; gap: 4px; }
.adm-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 2px; border-top: 1px solid rgba(255, 255, 255, .08); }
.adm-hero:first-child { border-top: 0; }
.adm-name { display: flex; flex-direction: column; min-width: 140px; }

/* ---------- полоса зрителя (выбыл из сетевой битвы) ---------- */

/* Внизу по центру: верх экрана занят счётом режима, а углы — кнопками. */
.watch-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 1500;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 16px;
  background: rgba(0, 0, 0, .55); border-radius: 10px;
  font: bold 15px var(--font); color: rgba(255, 255, 255, .9);
}
.watch-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-bar button {
  flex: none; padding: 8px 14px; border: 0; border-radius: 8px;
  background: #ffc93c; color: #2a1a00; font: bold 15px var(--font); cursor: pointer;
}