/* public/css/in-game-web/ability-stats.css
 *
 * Блок «Характеристики» на странице профиля (шаг 4 плана stat-research/10-*.md).
 *
 * Классы и палитра повторяют эталонную страницу NCSoft
 * (D:\PROJ\Ncsoft\...\character.1.css): правила оттуда СКОПИРОВАНЫ сюда,
 * файл посторонним способом не подключается.
 *
 * ГЕОМЕТРИЯ — по эталону (всё внутри .contents-wrap { width:920px }):
 *   .info-character { width:250px; margin:0 14px 0 15px }   = 279
 *   .info-item      { width:205px; margin-right:10px; overflow:auto }   = 215
 *   .info-ability   { width:420px; height:610px; overflow:auto }        = 420
 *   итого 914 из 920 px. Внутри .ability-view { display:grid;
 *   grid-template-columns:206px 204px; width:410px } — две группы строк
 *   ПОРЯДОМ (по ~205 px каждая), высота строки 35px, шеврон 34px справа.
 *
 * Наши классы:
 *   .page-char   — страница /character (область просмотра фиксированной высоты
 *                  639px, колонки растягиваются на неё и прокручиваются сами);
 *   .page-ingame — страница /character-in-game (колонка справа от экипировки
 *                  480px, высота ограничена 610px — страница не растёт).
 */

/* ============================================= совместимость с движком клиента
 * Движок внутриигрового окна старый: он не знает flex-gap (и display:grid —
 * см. .ability-view ниже), поэтому зазоры gap из character-in-game.css там
 * просто не работают. Гасим gap и ставим те же отступы маргинами: в
 * современных браузерах картинка не меняется (те же 4/8/10px — gap обнулён,
 * марджин даёт ровно их), а в клиенте зазоры появляются.
 * Правила лежат здесь, а не в исходном css: этот файл подключается ПОСЛЕ
 * character-in-game.css и перекрывает его (см. ?v= в character-in-game.ejs).
 */
.info-left,
.info-right {
    gap: 0;
}

.info-left > * + *,
.info-right > * + * {
    margin-top: 4px;                 /* прежний gap: 4px */
}

.header-icons {
    gap: 0;
}

.header-icons > * + * {
    margin-left: 8px;                /* прежний gap: 8px */
}

.top-search-wrapper {
    gap: 0;
}

.top-search-wrapper > * + * {
    margin-left: 10px;               /* прежний gap: 10px */
}

/* ------------------------------------------------------------------ заголовок */
.ability-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ability-title {
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8fb2d4;
}

/* кнопка «Показать подробнее» - copy of .btn-wrap .btn-more из эталона */
.btn-more {
    display: inline-block;
    padding: 6px 8px;
    min-height: 30px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    background-color: #2a5177;
    border: 1px solid #2a5177;
    background-clip: padding-box;
    cursor: pointer;
    white-space: nowrap;
}

.btn-more:hover {
    text-decoration: none;
    background-image: linear-gradient(#3b679e, #4374ab);
    border: 1px solid #4c85ba;
}

.btn-more:active {
    background-image: linear-gradient(#27466c, #294970);
    border: 1px solid #2a4a72;
    color: rgba(255, 255, 255, .5);
}

/* ------------------------------------------- боковая колонка = .info-ability */
.ability-section.ability-side {
    clear: none;
    flex: 0 0 420px;
    min-width: 0;
    max-width: 420px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 5px 14px;          /* внутренняя ширина 410px — как .ability-view у эталона */
    background: #1419281a;
    border-radius: 5px;
    align-self: flex-start;
    max-height: 610px;            /* эталон: height:610px */
    overflow-y: auto;
    overflow-x: hidden;
}

/* заголовок остаётся на месте при прокрутке колонки.
 * margin-bottom 8 -> 2px: просьба пользователя «сократить отступ между
 * названием блока и самим блоком» (под «ХАРАКТЕРИСТИКИ» красной пометкой на
 * снимке); вместе с .stat-group-title (margin-top 6 -> 2px) зазор до «АТАКА»
 * сокращается с ~14px до ~4px */
.ability-side .ability-head {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -5px 2px;
    padding: 10px 5px 8px;
    background: #141928f2;
    border-bottom: 1px solid #ffffff14;
}

/* страница /character: колонка занимает всю высоту области просмотра (639px) */
.page-char.has-stats > .ability-section.ability-side {
    align-self: stretch;
    max-height: none;
}

/* ------------------------- раскладка страницы /character по эталону (920px) */
.page-char.has-stats {
    padding-left: 0;
    padding-right: 0;
}

/* эталон: .info-character { width:250px; margin:0 14px 0 15px } */
.page-char.has-stats > .left-panel {
    margin-left: 15px;
}

/* эталон: .info-item { width:205px; margin-right:10px; overflow:auto } */
.page-char.has-stats > .equipment-panel {
    flex: 0 0 205px;
    min-width: 0;
    max-width: 205px;
    margin-right: 10px;
    padding: 10px;
}

/* /character: блок камней оружия поднят наверх — рядом с иконкой оружия
   (в пустое место справа от неё), 2 камня в ряд (3 ряда).
   Строки блока: [иконка + полоса прочности | камни] / [название оружия] */
.page-char .weapon-main-content {
    flex-wrap: wrap;
}

.page-char .weapon-gems {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin-top: 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;   /* порядок 1 4 / 2 5 / 3 6 — заполнение по столбцам */
    gap: 6px 8px;
    justify-items: center;
    align-content: start;
}

.page-char .weapon-info {
    /* Название оружия из окна убрано, чтобы текст не занимал место.
       Элемент остаётся в разметке: из него берётся имя для подсказки
       по наведению на иконку оружия (getWeaponTooltipData, character.js). */
    display: none;
}

/* /character: аксессуары сеткой 4 в ряд (порядок задан в character.ejs).
   max-width держит ячейки компактными и на широкой панели без статов. */
.page-char .accessory-wrap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 6px;
    max-width: 190px;
}

/* подписей нет — иконка центрируется в ячейке и занимает её целиком */
.page-char .accessory-wrap > div {
    padding: 0;
    justify-content: center;
}

.page-char .accessory-wrap .item-img {
    margin-right: 0;
}

/* /character: у аксессуаров убраны обе подписи — обозначение слота (КОЛЬЦО, СЕРЬГА…)
   и название предмета. Остаётся только иконка; полная информация по наведению
   на иконку (getAccessoryTooltipData, character.js — вешается на .item-img). */
.page-char .accessory-wrap .item-name {
    display: none;
}

/* тонкий скролл колонки экипировки — стиль скроллбара эталона (.info-item) */
.page-char.has-stats > .equipment-panel::-webkit-scrollbar {
    width: 6px;
}

.page-char.has-stats > .equipment-panel::-webkit-scrollbar-thumb {
    background: #105180;
    border-radius: 20px;
}

.page-char.has-stats > .equipment-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 20px;
}

/* ------------------------------------------------- страница /character-in-game
 * Надпись «Экипировка» — по центру над ячейками «украшение для наряда» и
 * «головной убор» (в оригинале она была прижата влево: text-align:left;
 * padding-left:22px в character-in-game.css).
 *
 * Геометрия (окно 660px, .equipment-container и заголовок имеют один и тот же
 * левый край):
 *   .accessories-grid  left:260px, ячейка 42px + 3px зазор = шаг 45px, 4 в ряд;
 *   ряд 1: НАРЯД [260..302], УКРАШЕНИЕ ДЛЯ НАРЯДА [305..347],
 *          ГОЛОВНОЙ УБОР [350..392], УКРАШЕНИЕ ДЛЯ ЛИЦА [395..437];
 *   общий центр двух нужных ячеек = (305 + 392) / 2 = 348.5px;
 *   текст центрируется в содержимой части бокса: (padding-left + 660) / 2,
 *   поэтому padding-left = 2 * 348.5 - 660 = 37px.
 *
 * Работает и со статами, и без них. */
.page-ingame .equipment-title {
    text-align: center;
    padding-left: 37px;
}

/* Верхний зазор над блоками (просьба пользователя «совсем немного приподнять»):
 * шапка даёт margin-bottom:15px, .main-content — padding-top:5px, плюс
 * внутренний leading строки заголовка (~4px). Итого ~24px пустой полосы над
 * «Экипировка»/«Характеристика» — убираем 10px (5 + 5), блоки поднимаются
 * к разделителю шапки.
 * На странице поиска (.top-search-container) этих классов нет — не задевает. */

/* ТОЧНАЯ ПОДГОНКА ВЫСОТЫ — вместо клампов 100vh (раунд «почему появился
 * системный ползунок», снимок пользователя: «блок по высоте немного не влез,
 * из-за этого появился правый ползунок и из-за него держится смещение»).
 *
 * Прежний механизм: колонка = max-height: calc(100vh - 170px) (в стеке —
 * 100vh - 450px). Это константа, которая держалась на двух допущениях:
 * 100vh равен высоте контейнера и шапка всегда одной высоты. В клиенте они
 * разошлись ~на 20px, запас «колонка до кнопки» (~11px) исчезал, содержимое
 * перекрывало низ — и .container выдавал системный вертикальный ползунок.
 * Полоса прокрутки забирала ~17px справа, пара центрировалась уже в узком
 * контейнере — отсюда «смещение, которое держится».
 *
 * Теперь измерять нечего — высота складывается сама:
 *   .contents-wrap.wrap-fill  — flex-колонка на всю высоту контейнера;
 *   .main-content.page-ingame — flex:1, min-height:0 — забирает РОВНО остаток
 *        между фактической шапкой и кнопкой «Назад к поиску»;
 *   margin-bottom:50px        — резерв под кнопку (40px + 10px отступа,
 *        кнопка absolute внизу contents-wrap);
 *   колонка                    — align-self:stretch, т.е. высота = .main-content
 *        (с правилами ниже), максимум — эталонные 610px.
 * Ни одного 100vh: невысокий клиент и «другая» шапка больше не дают прокрутки.
 *
 * Класс wrap-fill ставит character-in-game.ejs (строка contents-wrap); на
 * /character и на странице поиска его нет — их раскладка не меняется. */
.contents-wrap.wrap-fill {
    display: flex;
    flex-direction: column;
}

.main-content.page-ingame {
    padding-top: 0;
    margin-top: -5px;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 50px;
}

/* Центрируются ОБА блока одной группой: [снаряжение 480][зазор 29]
 * [колонка характеристик 480] = 989px встаёт по центру страницы.
 * Заголовок «Экипировка» лежит ВНУТРИ колонки снаряжения (.equipment-block,
 * div в character-in-game.ejs), поэтому он всегда остаётся ровно над ней.
 *
 * ТРИ ЩЕЛИ ПО ПРОСЬБЕ ПОЛЬЗОВАТЕЛЯ (снимок из клиента: «уменьши все 3 щели
 * примерно одинаково, результат отцентруй»). В окне ~1030px было:
 *     слева 45.5 | посередине 90.6 | справа 40.5   (сумма 177px)
 * Сумму трёх щелей меняет только ширина колонки (снаряжение — арт-геометрия
 * 480px), поэтому колонка 420 -> 480, зазор 49 -> 29 и пара становится 989px:
 *     слева 23   | посередине 70.6 | справа 23      (сумма 116.6px)
 * Все три уменьшились на ~20px (-22.5 / -20 / -17.5), величины W-независимы.
 *
 * ОПТИЧЕСКОЕ ЦЕНТРИРОВАНИЕ: видимая левая граница кластера — не край блока,
 * а картинка .enchant-gems (left:5px внутри блока), правая — правый край
 * .trigrams-bg (438.4px из 480). Без компенсации левое поле на 5px больше
 * правого. padding-right = padding-left + 5px выравнивает видимые поля
 * (при justify-content:center на положение влияет только разница отступов):
 *     левое поле = правое поле = (ширина_контента - 984) / 2.
 * padding-left/right — ещё и предохранитель: пока в паре есть место, отступы
 * не влияют на центр, а при узком окне колонка (flex-shrink:1) сжимается
 * раньше, чем появится горизонтальная прокрутка.
 *
 * ШИРИНА БЛОКА СНАРЯЖЕНИЯ = ШИРИНЕ ВИДИМОГО КЛАСТЕРА, а не оригинальному
 * окну 660px: в character-in-game.css кластер размечен со сдвигом (см.
 * правила ниже) — видимые границы 145..625 внутри 660px, слева от оружия
 * оставалось мёртвое поле 145px, справа 35px. Пара целиком упиралась в
 * края окна, поэтому это поле вычиталось из левого поля страницы и вся
 * композиция «снаряжение + характеристики» уезжала вправо на
 * 145/2 ≈ 72px (в браузере на широком окне то же смещение было, но
 * среди больших полей незаметно).
 *
 * Зазор 49px сохраняет прежний ВИЗУАЛЬНЫЙ отступ «триграммы ↔ колонка»:
 * старый блок 660px заканчивался на 35px правее видимой картинки, плюс
 * старый flex-зазор 14px = 49px.
 *
 * Окно клиента (~1096px, из него же снята ингейм-раскладка): пара 949px
 * влезает целиком, колонка не сжимается и не переносится.
 * flex-wrap: nowrap обязателен - перенос считается по flex-basis (420px)
 * ДО сжатия, поэтому при wrap колонка уезжала на вторую строку и сжаться
 * уже не могла; узкие окна (<=1024px) складывает медиазапрос ниже. */
.page-ingame.has-stats {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    /* зазора пары gap:0 29px здесь больше НЕТ — он переехал отступом на
       .equipment-block (см. ниже): клиент flex-gap не знает */
    padding-left: 10px;
    padding-right: 15px;            /* = padding-left + 5px (см. выше) */
}

.page-ingame.has-stats .equipment-block {
    flex: 0 0 480px;
    min-width: 0;
    /* ЗАЗОР ПАРЫ — отступом, а не gap (прежнее место: gap: 0 29px в
       .page-ingame.has-stats). Движок внутриигрового окна не знает flex-gap
       (ему, как выяснилось при разборе «одного столбца», неизвестен и
       display:grid — см. .ability-view), и щель «экипировка → колонка»
       схлопывалась: пара стояла вплотную, визуальный зазор давали только
       вписанные поля кластера (≈42px вместо проектных 70.6px). В браузере
       результат тот же: 29px — либо gap, либо margin, не вместе. */
    margin-right: 29px;
}

/* Кластер прижат к левому краю блока: внутри 660px он стоял в 145..625,
 * здесь — в 0..480 (все четыре позиции сдвинуты на -145px, ВНУТРЕННЯЯ
 * геометрия кластера не меняется: оружие → аксессуары → триграммы).
 * Блок и контейнер сжаты до 480px = границы содержимого, поэтому мёртвых
 * полей в паре нет и контейнер (был 660px) не вылезает за блок —
 * иначе появилась бы горизонтальная прокрутка страницы. */
.page-ingame.has-stats .equipment-container {
    width: 480px;
    margin: 0;
}

.page-ingame.has-stats .weapon-slot {
    left: 0;
}

.page-ingame.has-stats .weapon-gems {
    left: 35px;
}

.page-ingame.has-stats .accessories-grid {
    left: 115px;
}

.page-ingame.has-stats .trigrams-container {
    left: 300px;
}

/* Заголовок — по центру над ячейками «украшение для наряда» [160..202] и
 * «головной убор» [205..247] (ячки тоже сдвинуты на -145px, общий центр
 * 203.5px): (480 - padding-right) / 2 = 203.5 → padding-right = 73px.
 * Общее правило .page-ingame .equipment-title выше (padding-left:37px,
 * центр 348.5px) действует для НЕсжатого блока 660px — здесь гасится. */
.page-ingame.has-stats .equipment-title {
    padding-left: 0;
    padding-right: 73px;
    /* ВЫРАВНИВАНИЕ УРОВНЕЙ по снимку пользователя: «расхождение в уровне
     * расположения блока характеристик и блока снаряжения». Оба блока начинаются
     * с одной строки (top у .equipment-block и .ability-side одинаковый), но
     * «Экипировка» — первая строка своего блока (центр ≈ top + 9), а
     * «ХАРАКТЕРИСТИКИ» отцентрована в липком колонтитуле с кнопкой высотой 30px
     * (padding-top:10 + половина строки ≈ top + 25). Разница ≈ 16px — столько же
     * и опускаем заголовок снаряжения; контейнер с ячейками (абсолютные дети)
     * едет вместе с ним, внизу пусто — ничего не задевает. */
    margin-top: 16px;
}

/* снаряжение не сжимается (дети позиционированы абсолютно внутри 660px),
 * сжимается только колонка: 480px — максимум, минимума нет (min-width:0),
 * поэтому пара никогда не вызывает горизонтальную прокрутку страницы.
 * 480px = ширина блока снаряжения: колонка «забирает» те ~60px, которые
 * освободили уменьшенные боковые и средняя щели (см. расчёт выше).
 * Высота: align-self:stretch берёт РОВНО остаток .main-content (см.
 * .contents-wrap.wrap-fill выше) — до кнопки «Назад к поиску» всегда ровный
 * зазор, системного ползунка у страницы нет, сколько бы ни разошлись в
 * клиенте 100vh и высота контейнера. Максимум — эталонные 610px на высоких
 * окнах; прежний кламп calc(100vh - 170px) удалён: его «11px запаса» как
 * раз и исчезал, отчего колонка «чуть не влезала». Остаток строк колонка
 * прокручивает сама (overflow-y: auto). */
.page-ingame.has-stats > .ability-section.ability-side {
    flex: 0 1 480px;
    min-width: 0;
    max-width: 480px;
    align-self: stretch;
    max-height: 610px;
}

.page-ingame.has-stats .clear {
    display: none;
}

/* ------------------------------------------- две группы строк = .ability-view */
/* эталон: .ability-view { display:grid; grid-template-columns:206px 204px; gap:0 2px }
 *
 * ВНУТРИ ИГРЫ display:grid НЕ ПРИМЕНЯЕТСЯ: движок окна клиента сетки не
 * знает — невалидное значение отбрасывается, блок остаётся display:block, и
 * обе группы идут друг под другом во всю ширину колонки: строки видны «одним
 * очень широким столбцом» (снимок пользователя). Доказательство, что дело в
 * движке, а не в данных: один .stat-group в ЖИВОЙ сетке занял бы только
 * первую колонку 1fr 1fr (≈234px), а у пользователя строки во всю 480-ю
 * колонку — значит grid-правило не сработало вовсе. На /character в браузере
 * та же разметка рисуется сеткой нормально (там движок современный).
 *
 * Раскладываем группы плаванием: работает на любом движке; там, где grid
 * поддержан, даёт ту же картину — две колонки по 50% с прежним зазором 2px. */
.ability-view {
    display: block;
}

/* clearfix: плавающие группы задают высоту контейнеру. Не overflow:hidden —
   чтобы ничего не резать у краёв группы (подсказки строк). */
.ability-view::after {
    content: '';
    display: table;
    clear: both;
}

.ability-view .stat-group {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-right: 2px;        /* прежний grid-gap: 0 2px */
}

.ability-side .stat-group {
    min-width: 0;
    flex: none;
}

.stat-group-title {
    /* margin-top 6 -> 2px: вместе с margin-bottom колонтитула (8 -> 2px) это
       «сокращённый отступ между названием блока и самим блоком» (снимок) */
    margin: 2px 0 4px;
    padding-left: 2px;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8fb2d4;
}

dl.stat-define {
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* dt: строка с названием и итоговым числом
   эталон: height:35px; line-height:35px; margin:2px 0 0; padding-right:34px */
.stat-title {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 35px;
    margin-top: 2px;
    padding: 0 34px 0 10px;
    border-radius: 2px;
    background-color: rgba(30, 79, 122, .5);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.stat-title .title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stat-title .stat-point {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 10px;
    color: #87c770;
    font-weight: 600;
    white-space: nowrap;
}

/* в узкой колонке числа чуть мельче, чтобы под них осталось место названию */
.ability-side .stat-title {
    font-size: 13px;
}

.ability-side .stat-title .stat-point {
    font-size: 12px;
}

/* вместо шеврона из icons.png у эталона */
.stat-title::after {
    content: '\25BE';
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: rgba(255, 255, 255, .55);
    transition: transform .15s ease;
}

/* первая строка группы всегда подсвечена (у эталона class stat-important) */
.stat-title.stat-important,
.stat-title.is-active {
    background-color: #1e4f7a;
}

.stat-title.is-active::after {
    transform: rotate(-180deg);
}

/* у строк без раскрытой части («Сноровка», «Сила воли») шеврона нет -
   в эталоне: .ability-view .stat-title.empty:after { display:none } */
.stat-title.empty::after {
    display: none;
}

/* dd: раскрытая часть с колонками «База» / «Экипировка» */
.stat-description {
    display: none;
    margin: -3px 0 0;
    padding: 14px 15px 12px;
    background-color: rgba(30, 79, 122, .75);
    border-radius: 0 0 5px 5px;
}

.stat-title.is-active + .stat-description {
    display: block;
}

.stat-description .ratio {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stat-description .ratio li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    height: 22px;
    line-height: 22px;
    font-size: 13px;
    color: #fff;
}

.stat-description .ratio li .title {
    opacity: .75;
}

.stat-description .ratio li .stat-point {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

/* подписи с тегами достоверности под блоком */
.ability-notes {
    margin: 12px 0 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
    color: #9db4c9;
}

/* тонкий скролл колонки - как у эталона (.info-ability) */
.ability-section.ability-side::-webkit-scrollbar {
    width: 6px;
}

.ability-section.ability-side::-webkit-scrollbar-thumb {
    background: #105180;
    border-radius: 20px;
}

.ability-section.ability-side::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 20px;
}

/* ------------------------------------------------------------------ узкие окна */
@media (max-width: 1024px) {
    /* на узких экранах блок оружия складывается в колонку (см. character.css) —
       там flex-basis в процентах/нолях мешает, гасим */
    .page-char .weapon-gems {
        flex: none;
        width: auto;
        max-width: 160px;
    }

    /* у /character область просмотра на узких экранах становится вертикальной */
    .page-char.has-stats {
        padding: 0 15px 20px;
    }

    .page-char.has-stats > .left-panel {
        margin-left: 0;
    }

    .page-char.has-stats > .equipment-panel {
        flex: none;
        width: 100%;
        max-width: none;
        margin-right: 0;
        padding: 15px;
    }

    .page-char.has-stats > .ability-section.ability-side {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 420px;
        margin-top: 14px;
    }

    /* узкое окно: одна колонка строк. Прежнее grid-template-columns:1fr в
       клиенте не работало (grid ему неизвестен — см. .ability-view), гасим
       здесь так же, как оно включается в основном правиле — float: none */
    .ability-view .stat-group {
        float: none;
        width: auto;
        padding-right: 0;
    }

    /* на очень узких окнах рядом не ужиться — складываем, как раньше:
       оба блока по центру колонки страницы. Не display:block, а flex-КОЛОНКА —
       чтобы колонка характеристик забирала остаток высоты так же точно, как
       в ряду (см. .contents-wrap.wrap-fill): в колонке высота складывается
       из фактической шапки + экипировки + margin-bottom:50px под кнопку,
       без единого 100vh. */
    .page-ingame.has-stats {
        display: flex;
        flex-direction: column;
        /* эти align/justify в колонке работают по ДРУГОЙ оси, чем в ряду
           (flex-start центрировал бы стек по горизонтали, а flex-start по
           вертикали при justify-content:center) — возвращаем «как у block»:
           сверху вниз, дети на всю ширину (центрируют себя margin:0 auto) */
        justify-content: flex-start;
        align-items: stretch;
        /* асимметричные отступы пары (10/15) работают только в flex-раскладке;
           в стеке они сдвигали бы контент на 2.5px влево */
        padding-left: 0;
        padding-right: 0;
    }

    .page-ingame.has-stats .clear {
        display: block;
    }

    .page-ingame.has-stats .equipment-block {
        /* в колонке flex-basis:480px (правило для ряды) задавал бы ВЫСОТУ
           блока — гасим: ширина и так растягивается на всю строку, как и
           при прежнем display:block */
        flex: 0 0 auto;
        margin-right: 0;    /* зазор пары (margin-right:29px для ряды) в стеке не нужен */
    }

    .page-ingame.has-stats .equipment-container {
        /* в стеке контейнер отцентрован по странице так же, как заголовок
           (оба — по центру), поэтому надпись остаётся над ячейками;
           ширина = ширине сдвинутого кластера (480px), а не 100% — иначе
           кластер прижимался бы к левому краю, а колонка стояла бы по
           центру (прежнее смещение, только вертикальное). */
        width: 480px;
        margin: 0 auto;
    }

    .page-ingame.has-stats .ability-section.ability-side {
        margin: 14px auto 0;
        /* в стеке колонка остаётся эталонных 420px (в строке она теперь
           480px — правило выше действует только пока пара стоит в ряд) */
        width: 100%;
        max-width: 420px;
        /* растёт на весь остаток .main-content между экипировкой и кнопкой
           «Назад к поиску» (см. .contents-wrap.wrap-fill) — прежний кламп
           min(420px, 100vh - 450px) удалён: 100vh в клиенте расходится с
           контейнером, и колонка «чуть не влезла», давая странице системный
           ползунок. Максимум — эталонные 420px, минимума нет (min-height:0:
           сжимается и сама прокручивает строки). */
        flex: 1 1 auto;
        min-height: 0;
        max-height: 420px;
    }
}