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

   ВАЖНО ПРО ЕДИНИЦЫ. В теме у `html` плавающий размер шрифта:
   75% до 540 px, 87% до 840 px, дальше 100%. То есть на телефоне
   1rem — это 12 пикселей, а не 16, и размеры в rem молча ужимаются
   на четверть. Поэтому всё, что должно быть заданного размера —
   высота шапки, логотипа, кнопок — пишем в пикселях.

   Язык темы, которого держимся: восьмиугольники со срезанными под 45°
   углами, бронзовая волосяная окантовка поверх холодной стали.
       #907b5b  бронза, окантовка
       #c6b89a  светлая бронза, текст и блики
       #31373c  сталь, верх
       #3d4145  сталь, низ
       #1c2023  тёмная подложка                                        */

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

/* В main.css опечатка: `display: inlnie-flex`, правило браузером
   отбрасывается и ссылка остаётся строчной. Возвращаем задуманное. */
.logo {
    display: inline-flex;
}

/* Логотип отдаётся файлом двойной плотности (568 x 144) и ужимается
   стилями: так он остаётся резким на плотных экранах, а файл один. */
.logo__img {
    width: auto;
    height: 52px;
    transition: height .4s;
}

.logo__img_hover {
    width: 100%;
}

/* Шапка на десктопе высотой 100 px, при прокрутке ужимается до 60 —
   логотип идёт за ней, иначе вылезет за край. */
@media (min-width: 1200px) {
    .logo__img {
        height: 72px;
    }

    .nav-scroll .logo__img {
        height: 44px;
    }
}

/* ======================= Заставка загрузки =======================

   Была пустая страница с логотипом посередине. Добавлены три вещи:
   логотип дышит, за ним пульсирует бронзовое пятно света, под ним ходит
   искра по направляющей. Настоящего прогресса взять неоткуда, поэтому
   полоса не отмеряет проценты, а просто говорит: грузится, не зависло. */

.preload {
    background-image: radial-gradient(ellipse at 50% 45%,
    rgba(144, 123, 91, .07) 0%, rgba(21, 24, 29, 0) 62%);
}

.preload__box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

/* Пятно света за знаком, в противофазе с ним: когда логотип гаснет,
   свечение разгорается, и заставка не проваливается в темноту. */
.preload__box:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    width: 360px;
    height: 360px;
    max-width: 90vw;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
    rgba(144, 123, 91, .26) 0%,
    rgba(144, 123, 91, .10) 38%,
    rgba(21, 24, 29, 0) 68%);
    pointer-events: none;
    animation: preload-bloom 1.5s ease-in-out infinite;
}

.preload__logo {
    position: relative;
    width: 284px;
    max-width: 70vw;
    height: auto;
    animation: preload-pulse 1.5s ease-in-out infinite;
}

/* Направляющая с ромбами по краям — тот же приём, что в разделителях
   заголовков темы. */
.preload__rail {
    position: relative;
    display: block;
    width: 220px;
    max-width: 60vw;
    height: 2px;
    overflow: hidden;
    background: rgba(144, 123, 91, .18);
}

.preload__spark {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: linear-gradient(90deg,
    rgba(144, 123, 91, 0) 0%,
    rgba(198, 184, 154, .95) 50%,
    rgba(144, 123, 91, 0) 100%);
    animation: preload-spark 1.5s ease-in-out infinite alternate;
}

@keyframes preload-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .5;
        transform: scale(.985);
    }
}

@keyframes preload-bloom {
    0%, 100% {
        opacity: .55;
        transform: translate(-50%, -50%) scale(.94);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes preload-spark {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(163%);
    }
}

/* Кому движение мешает — остаётся статичная заставка. */
@media (prefers-reduced-motion: reduce) {
    .preload__logo,
    .preload__box:before,
    .preload__spark {
        animation: none;
    }
}

/* ================ Шапка на планшете и телефоне ================

   До 1440 px меню спрятано за бургером и спозиционировано абсолютно,
   до 1200 px скрыт блок входа. Значит в строке остаются только язык и
   бургер, и логотип можно честно поставить по центру.               */

@media (max-width: 1199.98px) {
    /* Шапка была 60 px — логотипу в ней тесно. Переменную читает и
       выпадающая панель меню, так что она съедет следом сама. */
    :root {
        --navigation-height: 72px;
        --navigation-height-scroll: 72px;
    }
}

@media (max-width: 1439.98px) {
    /* Тема обнуляет боковые поля контейнера уже с 768 px, из-за чего
       всё упиралось в край экрана. Поля задаём самой шапке, чтобы не
       трогать раскладку остальных страниц. */
    .navigation {
        position: relative;
        justify-content: space-between;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Логотип выводим из потока: слева и справа от него блоки разной
       ширины, и в обычном потоке центр съезжает. */
    .navigation__logotype {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        transform: translateX(-50%);
        margin-right: 0;
        pointer-events: none;
    }

    /* Нажимается сама ссылка, а не пустое место вокруг неё — иначе
       логотип перекрыл бы язык и бургер. */
    .navigation__logotype .logo {
        pointer-events: auto;
    }

    .navigation__lang {
        order: 1;
        margin-left: 0;
        align-self: center;
    }

    .navigation__gw-burger {
        order: 3;
        margin-left: 0;
    }
}

/* Узкие экраны: между языком и бургером логотипу остаётся мало места. */
@media (max-width: 400px) {
    :root {
        --navigation-height: 64px;
        --navigation-height-scroll: 64px;
    }

    .navigation {
        padding-left: 12px;
        padding-right: 12px;
    }

    .logo__img {
        height: 42px;
    }
}

/* ================ Фоны блоков ниже первого экрана ================

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

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

[data-section=news].news-bg {
    position: relative;
    background-image: url(../../../../../img/bg/section-news.webp);
    background-position: 50% 54%;
}

[data-section=invite] {
    position: relative;
    background-color: transparent;
    background-image: url(../../../../../img/bg/section-community.webp);
    background-size: cover;
    background-position: 50% 44%;
    background-repeat: no-repeat;
}

[data-section=news]:before,
[data-section=invite]:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
    #15181d 0%,
    rgba(21, 24, 29, .92) 10%,
    rgba(21, 24, 29, .78) 40%,
    rgba(21, 24, 29, .85) 72%,
    rgba(21, 24, 29, .97) 94%,
    #15181d 100%);
}

/* Телефон: от широкого арта в узкой колонке остаётся вертикальная
   полоска, и под десктопным затемнением она пропадала совсем. Здесь
   затемнение слабее, а кадр взят правее и ниже — там, где у обоих
   артов есть содержимое, а не пустое небо. */
@media (max-width: 767.98px) {
    [data-section=news].news-bg {
        background-position: 62% 58%;
    }

    [data-section=invite] {
        background-position: 38% 52%;
    }

    [data-section=news]:before,
    [data-section=invite]:before {
        background: linear-gradient(180deg,
        #15181d 0%,
        rgba(21, 24, 29, .82) 8%,
        rgba(21, 24, 29, .56) 38%,
        rgba(21, 24, 29, .66) 74%,
        rgba(21, 24, 29, .94) 95%,
        #15181d 100%);
    }
}

/* Содержимое — поверх затемнения. */
[data-section=news] > .container,
[data-section=invite] > .container,
[data-section=news] > .section-decor,
[data-section=invite] > .section-decor {
    position: relative;
    z-index: 1;
}

/* ================ Вход и регистрация в шапке ================

   Образец, который принёс владелец 21.10.2026: пара золотых кнопок —
   одна с заливкой и тёмной надписью, вторая тёмная с золотым
   контуром и золотой надписью. Собрано стилями, а не картинкой:
   остаётся резким на любом экране и красится переменными.

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

.lnk__pic {
    display: none;
}

.auth__lnk.lnk,
.auth__btn.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px 0 48px;
    border-radius: 7px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 18px 18px;
    transition: filter .25s, box-shadow .25s, color .25s, border-color .25s;
}

/* «Войти» — тёмная с золотым контуром. */
.auth__lnk.lnk {
    box-sizing: border-box;
    border: 1.5px solid #d9a44f;
    color: #e8b964;
    background-color: rgba(10, 10, 11, .72);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b964' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M10 4H5v16h5'/%3E%3Cpath d='M14.5 8.5 18 12l-3.5 3.5M8.5 12H18'/%3E%3C/svg%3E");
}

.auth__lnk.lnk:hover {
    border-color: #f2cd86;
    color: #f8dca2;
    box-shadow: 0 0 18px rgba(217, 164, 79, .3);
}

/* «Регистрация» — золото с заливкой и тёмной надписью. Картинку из
   темы выключаем: её рисовал --btn-bg. */
.auth__btn.btn {
    --btn-bg: none;
    --w: auto;
    --h: 44px;
    width: auto;
    box-sizing: border-box;
    border: 1.5px solid #e9bd72;
    color: #17120a;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120a' stroke-width='1.9' stroke-linecap='square'%3E%3Cpath d='M9.5 11.2a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8Z'/%3E%3Cpath d='M3 19.8c0-3.1 2.9-5.2 6.5-5.2 1.3 0 2.5.3 3.5.8'/%3E%3Cpath d='M17.6 13.4v6.2M14.5 16.5h6.2'/%3E%3C/svg%3E"),
    linear-gradient(135deg,
    #a8702a 0%, #e3b76a 26%, #f8e3b4 48%, #d8a558 72%, #9c6a28 100%);
    /* Два слоя: значок и заливка. Размер и место нужно задать каждому
       отдельно, иначе общий `background-size` из правила выше режет
       градиент до размера значка. */
    background-size: 18px 18px, 100% 100%;
    background-position: 20px center, 50% 50%;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    text-shadow: none;
}

.auth__btn.btn:before {
    display: none;
}

.auth__btn.btn:hover {
    filter: brightness(108%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 0 20px rgba(233, 189, 114, .3);
}

/* Та же пара в выпадающем меню на телефоне: там у кнопок свои
   классы, но вид должен быть один. */
.menu__auth-lnk,
.menu__auth-btn.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    border-radius: 7px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.menu__auth .menu__auth-lnk {
    box-sizing: border-box;
    border: 1.5px solid #d9a44f;
    color: #e8b964;
    background: rgba(10, 10, 11, .72);
}

.menu__auth-btn.btn {
    --btn-bg: none;
    --w: auto;
    --h: 46px;
    width: auto;
    box-sizing: border-box;
    border: 1.5px solid #e9bd72;
    color: #17120a;
    background: linear-gradient(135deg,
    #a8702a 0%, #e3b76a 26%, #f8e3b4 48%, #d8a558 72%, #9c6a28 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    text-shadow: none;
}

.menu__auth-btn.btn:before {
    display: none;
}

/* ======================= Переключатель языка =======================

   Было: круглая картинка-подложка из шаблона, стрелка картинкой и
   пустая колонка в 28 px под флажок, которого в разметке нет, — из-за
   неё надпись стояла не по центру. Собираем заново.                 */

.lang {
    padding-left: 0;
    padding-right: 0;
}

.lang__current {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: auto;
    /* Высота и скругление — как у пары «Войти/Регистрация» рядом. */
    height: 44px;
    border-radius: 7px;
    padding: 0 26px 0 15px;
    /* Плотная бронза, как метка рейтов и кнопка «Присоединиться»:
       решение владельца 21.10.2026. Полой рамки больше нет — знаки
       внутри тёмные, по заливке. */
    background: linear-gradient(180deg, #efe2c4 0%, #907b5b 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    transition: filter .3s;
}

/* Стальная подложка из прежней оправы больше не нужна. */
.lang__current:before {
    display: none;
}

/* Стрелку рисуем уголком из двух границ вместо картинки: она тогда
   поворачивается при раскрытии и красится вместе с текстом. */
.lang__current:after {
    background-image: none;
    width: 6px;
    height: 6px;
    right: 12px;
    border-right: 1.5px solid #14171a;
    border-bottom: 1.5px solid #14171a;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .3s;
}

.lang__current .lang__name {
    position: relative;
    z-index: 1;
    color: #14171a;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .1em;
}

.lang:hover .lang__current,
.lang:focus-within .lang__current {
    filter: brightness(108%);
}

.lang:hover .lang__current:after,
.lang:focus-within .lang__current:after {
    transform: translateY(-20%) rotate(225deg);
}

/* Список: та же оправа, вплотную к кнопке — иначе между ними остаётся
   щель, на которой наведение срывается. */
.lang__list {
    left: 0;
    top: 100%;
    min-width: 100%;
    padding: 1px;
    border-radius: 0;
    background: #907b5b;
}

.lang__list:before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    background: #1c2023;
}

.lang__link_sub {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 11px 16px;
    color: #bcae92;
    font-size: 13px;
    letter-spacing: .1em;
    transition: color .2s, background .2s;
}

.lang__link_sub:hover {
    background: rgba(198, 184, 154, .14);
    color: #efe2c4;
}

/* ======================= Бургер =======================

   Классы navigation__gw-burger и gw-burger висят на одном элементе, и
   обработчик нажатия тема вешает именно на .gw-burger — поэтому рамкой
   становится он сам, а полоски уехали во вложенный .gw-burger__box.
   Иначе их `left: 0; right: 0` растянулись бы на всю рамку.          */

@media (max-width: 1439.98px) {
    /* Рамки нет: решение владельца 21.10.2026. Остаются три полосы
       разной длины — средняя короче и темнее. Площадь нажатия при
       этом прежние 44 px, просто она прозрачная. */
    .navigation__gw-burger.gw-burger {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        align-self: center;
        width: 44px;
        height: 44px;
        background: none;
    }

    .navigation__gw-burger.gw-burger:before {
        display: none;
    }

    .gw-burger__box {
        position: relative;
        z-index: 1;
        width: 26px;
        height: 16px;
    }

    .gw-burger__line {
        height: 2px;
        background-color: #c6b89a;
        transition: background-color .3s, top .3s .3s, right .3s .3s,
        left .3s .2s, bottom .3s .3s, opacity .3s .4s, transform .3s 0s;
    }

    /* Средняя короче — тема и так сдвигает её левый край, остаётся
       приглушить цвет, чтобы разница читалась. */
    .gw-burger__line_pos_middle {
        background-color: #907b5b;
    }

    .navigation__gw-burger.gw-burger:hover .gw-burger__line {
        background-color: #efe2c4;
    }

    /* Раскрытое меню: полосы складываются в крестик — это делает сама
       тема, нам остаётся подсветить их. */
    .mob-menu-active .gw-burger__line {
        background-color: #efe2c4;
    }
}

/* ======================= Первый экран =======================

   Два врождённых изъяна шаблона, которые здесь и лечим.

   Первый: index.blade.php вписывает в страницу правило
   `.logotype__img { max-height: <SITE_LOGO_HEIGHT>px }`. Оно задумано
   под горизонтальную связку и зажимало вертикальную до высоты шапки.

   Второй: фон первого экрана — светлый туман, и текст под него покрашен
   тёмным (`.header__desc` — #262b2e). На тёмном сайте это читается как
   чужая вставка, а заголовок на белом тумане пропадает совсем. Кладём
   затемнение и возвращаем тексту светлый цвет.                        */

[data-section=header] {
    padding-top: calc(var(--navigation-height) + 32px);
    padding-bottom: 56px;
}

/* Затемнение: сверху плотное, чтобы читалась шапка; в середине реже,
   чтобы осталась видна картинка; снизу уходит в цвет страницы, и стык
   со следующим блоком перестаёт быть заметным.

   Плотность подобрана под тёмный арт. Прежние значения (.94 сверху,
   .38 в середине) достались от светлых обоев: на нынешнем арте они
   гасили картинку, и логотип на её фоне казался слишком ярким. */
[data-section=header]:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
    rgba(21, 24, 29, .80) 0%,
    rgba(21, 24, 29, .40) 20%,
    rgba(21, 24, 29, .18) 44%,
    rgba(21, 24, 29, .52) 74%,
    rgba(21, 24, 29, .90) 93%,
    #15181d 100%);
}

/* Расстояние между логотипом, статусом, заголовком и кнопкой: в теме
   .625rem, то есть на телефоне всего 7 пикселей. */
.header__box {
    gap: 20px;
}

/* Знак на первом экране. Квадратный, поэтому размер задаём высотой,
   ширина идёт за ней. max-height снимаем: см. причину выше. */
.header__logotype {
    position: relative;
    display: flex;
    justify-content: center;
}

.header__logotype .logotype__img {
    width: auto;
    height: 240px;
    max-width: 86vw;
    max-height: none;
    /* Знак нарисован плоско и уже в наших цветах — приглушать его,
       как глянцевую связку, не нужно. Остаётся мягкая тёплая тень:
       она отделяет знак от дыма на арте, не обводя его контуром. */
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .6))
    drop-shadow(0 0 26px rgba(24, 18, 10, .55));
}

/* Бронзовое свечение за знаком — не ореол по контуру, а мягкое пятно
   света позади: оно поднимает знак над фоном, но не делает из него
   неоновую вывеску. */
.header__logotype:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 168%;
    height: 168%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse,
    rgba(144, 123, 91, .15) 0%,
    rgba(144, 123, 91, .07) 36%,
    rgba(144, 123, 91, .02) 56%,
    rgba(21, 24, 29, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

/* Медленное дыхание: восемь пикселей за семь секунд, на грани
   заметности — знак выглядит живым, а не дёргается. */
@keyframes hero-mark {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Кому движение мешает — выключаем. */
@media (prefers-reduced-motion: reduce) {
    .header__logotype .logotype__img {
        animation: none;
    }
}

/* Между текстом и кнопкой была дыра: к промежутку добавлялись отступ
   кнопки в 2.5rem и поля пустого блока под таймер, который на телефоне
   остаётся в разметке, даже когда таймера нет. */
.header__btns {
    margin-top: 24px;
}

.header__countdown-mobile:empty {
    margin: 0;
}

/* Текст на затемнённом фоне. */
.header__desc,
.header__box p {
    color: #b2bac1;
}

.header__title {
    color: #c6b89a;
}

@media (min-width: 840px) {
    [data-section=header] {
        padding-top: calc(var(--navigation-height) + 48px);
        padding-bottom: 72px;
    }

    .header__box {
        gap: 24px;
    }

    .header__logotype .logotype__img {
        height: 280px;
    }
}

@media (min-width: 1200px) {
    .header__logotype .logotype__img {
        height: 330px;
    }
}

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

   Решение владельца 21.10.2026: «на мобилке с первого экрана убери
   логотип, оставь только в шапке». */
@media (max-width: 1439.98px) {
    .header__logotype {
        display: none;
    }
}

/* Раскладка первого экрана на десктопе.

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

   В теме всё лежало одной стопкой справа по центру высоты
   (`margin: auto 0 auto auto` от 1050 px) — это было рассчитано на
   персонажа шаблона, который стоял слева. Персонажа мы убрали. */
/* До 1050 px карточка сервера и колонка идут друг под другом: в теме
   `.header` — строка, и после выноса карточки из колонки они встали
   бок о бок. Карточка поднимается выше кнопки, как было. */
@media (max-width: 1049.98px) {
    .header {
        flex-direction: column;
        width: 100%;
    }

    .header__box {
        width: 100%;
    }

    .header__server {
        order: -1;
    }

    /* На телефоне карточка идёт во всю ширину экрана, и метка рейтов
       своим вылетом влево упиралась в край — срезало угол. */
    .srv__rate {
        left: -14px;
    }
}

@media (min-width: 1050px) {
    /* Высота первого экрана — ровно экран.

       В теме внутренний контейнер тянется на `100vh - 100px`, а
       секция сверху добавляет свои отступы: вместе выходило 1200 px
       при экране 1080. Обои 1920×1080 растягивались по высоте на
       11 % и мылились. Укорачиваем контейнер ровно на эти отступы —
       секция становится высотой в экран, а картинка показывается
       пиксель в пиксель.

       Трогаем именно контейнер, а не секцию: к его нижнему краю
       прижат блок с логотипом, и отпускать его высоту нельзя. */
    .header {
        position: relative;
        width: 100%;
        min-height: calc(100vh - var(--navigation-height) - 48px - 72px);
    }

    /* Логотип и кнопка — левый нижний угол. */
    .header__box {
        margin: auto auto 0 0;
        align-items: flex-start;
        text-align: left;
        /* Нижний отступ приподнимает пару «логотип + кнопка» над краем
           экрана: впритык кнопка читалась как прилипшая. */
        padding-bottom: 74px;
    }

    /* Кнопка стоит по центру логотипа, а не по левому краю колонки.
       Колонка шириной с логотип — он самый широкий в ней, — поэтому
       растянутой строке с кнопкой достаточно центрировать содержимое.
       Привязки к пикселям нет: поменяется размер логотипа — кнопка
       останется под его серединой. */
    /* Знак уже кнопки, поэтому обоим даём ширину колонки и
       центрируем внутри: тогда они стоят на одной оси. */
    .header__logotype {
        align-self: stretch;
    }

    /* Кнопка подтянута к знаку. Колонка прижата к низу, поэтому
       просто уменьшить промежуток нельзя — вниз уехал бы знак.
       Сколько снимаем с промежутка, столько добавляем к нижнему
       отступу: знак остаётся на месте, кнопка поднимается. */
    .header__btns {
        align-self: stretch;
        justify-content: center;
        margin-top: 6px;
    }

    /* Правый край заливки прозрачный, и при обычном центрировании
       видимая часть кнопки уезжала левее середины логотипа. Снимаем
       хвост отрицательным отступом — центр считается по тому, что
       видно. */
    .header__btn {
        margin-right: -46px;
    }

    /* Карточка сервера выходит из общей колонки и встаёт в правый
       верхний угол экрана. */
    .header__server {
        position: absolute;
        right: 0;
        top: 0;
        width: 430px;
        margin: 0;
    }

    /* Оба блока прижимаются к краям окна, а не к краям контейнера.

       Контейнер темы уже окна и обрывается далеко от границы, из-за
       чего по бокам оставались пустые полосы. `50vw - 50%` — это и
       есть расстояние от края контейнера до края окна: проценты в
       `right` и `margin-left` считаются от ширины `.header`. Вычитаем
       его и оставляем 24 px воздуха. */
    .header__server {
        right: calc(24px - (50vw - 50%));
    }

    /* Колонка с логотипом отодвинута от края чуть дальше карточки:
       слева у арта край плотный, и вплотную к нему блок смотрелся
       прижатым. Решение владельца 21.10.2026. */
    .header__box {
        margin-left: calc(68px - (50vw - 50%));
    }
}

/* Обои первого экрана. В теме прописан свой файл в main.css, здесь
   он перекрывается: арт заказной и лежит вне папки шаблона, чтобы
   переустановка темы его не затёрла. */
[data-section=header] {
    background-image: url(../../../../../img/bg/hero-desktop.webp);
}

/* Телефон: свои обои первого экрана.

   Горизонтальный арт на вертикальном экране обрезается до середины
   кадра, и от композиции не остаётся ничего. Поэтому под телефон
   нарисован отдельный портретный кадр. Решение владельца 21.10.2026.

   Планшет и повёрнутый телефон шире 768 px и берут обычный арт. */
@media (max-width: 767.98px) {
    [data-section=header] {
        background-image: url(../../../../../img/bg/hero-mobile.webp);
    }
}

/* Без логотипа первый экран стал ростом с одну карточку сервера и
   занимал меньше половины телефона — на экран это больше не похоже.
   Возвращаем ему высоту.

   Содержимое при этом уводим вниз, а не ставим по центру: арт должен
   остаться открытым. По центру карточка сервера ложилась ровно на
   героев, и от картинки оставались поля. Решение владельца
   21.10.2026: «арт должен быть открытым, содержимое ниже».

   Нижний отступ больше обычного — под ним стоит подсказка «листать
   вниз», она прижата к краю секции. */
@media (max-width: 1023.98px) {
    [data-section=header] {
        min-height: 100vh;
        min-height: 100svh;
        /* колонка: вниз содержимое уводит justify-content */
        justify-content: flex-end;
        padding-bottom: 58px;
    }

    /* Подсказка ужимается и прижимается к самому краю: иначе она не
       пускает карточку с кнопкой ниже. */
    .scroll-hint {
        bottom: 12px;
        gap: 5px;
    }

    .scroll-hint__rail {
        height: 22px;
    }
}

/* Узкие экраны: связка высокая, иначе кнопка уезжает за сгиб. */
@media (max-width: 400px) {
    [data-section=header] {
        padding-top: calc(var(--navigation-height) + 24px);
        padding-bottom: 44px;
    }

    .header__logotype .logotype__img {
        height: 200px;
    }
}

/* ================ Выпадающее меню на телефоне ================

   Было: серые пункты (#7c7c7c) на тёмном фоне, во всю ширину экрана без
   полей, белёсые разделители и иконки, которые тема при наведении ещё и
   гасила до 30%. Плюс попасть в кабинет с телефона было неоткуда: блок
   входа тема прячет до 1200 px.                                      */

.menu__auth {
    display: none;
}

@media (max-width: 1439.98px) {
    .menu {
        border-top: 1px solid rgba(144, 123, 91, .3);
    }

    /* Боковые поля: .container обнуляет их с 768 px. */
    .menu__content {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Полос между пунктами нет: вместо них каждый пункт — своя плашка
       со срезанными углами, как язык, бургер и карточки серверов.
       Список перестаёт читаться таблицей. */
    .menu__list {
        gap: 8px;
        padding-top: 12px;
        padding-bottom: 20px;
    }

    .menu__el {
        border-bottom: 0;
    }

    /* Два пустых пункта в конце списка — контейнеры, которые в этой
       теме никто не заполняет: обработчика data-place-from в ней нет. */
    .menu__el[data-place-from] {
        display: none;
    }

    .menu__item {
        gap: 14px;
        padding: 14px 16px;
        font-size: 15px;
        letter-spacing: .07em;
        color: #b9ad94;
        /* Фон элемента — окантовка, сталь кладём слоем поверх. */
        background: rgba(144, 123, 91, .3);
        transition: background .3s, color .3s;
    }

    /* Слой уводим под содержимое: надпись пункта не обёрнута тегом и
       не может встать выше. */
    .menu__item:before {
        content: "";
        position: absolute;
        left: 1px;
        top: 1px;
        right: 1px;
        bottom: 1px;
        z-index: -1;
        background: linear-gradient(180deg,
        rgba(49, 55, 60, .85) 0%, rgba(28, 32, 35, .9) 100%);
        transition: background .3s;
    }

    .menu__item:after {
        display: none;
    }

    .menu__item:hover,
    .menu__item_accent {
        background: rgba(198, 184, 154, .55);
        color: #e0d6bf;
    }

    /* Иконки — плоский серый силуэт #606060. Перекрашиваем под бронзу
       фильтром и проявляем при наведении: тема, наоборот, гасила их. */
    .menu__pic {
        width: 24px;
        height: 24px;
        margin-right: 0;
        opacity: .85;
    }

    .menu__ico {
        filter: sepia(.85) saturate(1.05) hue-rotate(-4deg) brightness(1.1);
    }

    .menu__item:hover .menu__pic,
    .menu__el:hover [data-menu-open-sub-list] .menu__pic,
    .menu__item_open:hover .menu__pic {
        opacity: 1;
    }
}

/* Вход и регистрация внизу панели: на широких экранах они в шапке. */
@media (max-width: 1199.98px) {
    /* Две кнопки парой: одинаковая форма и размер, по половине ряда.
       Вход в окантовке, регистрация сплошной бронзой — так видно, что
       главное действие второе. */
    .menu__auth {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 22px 14px 12px;
    }

    .menu__auth-lnk,
    .menu__auth-btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        box-sizing: border-box;
        width: 100%;
        height: 46px;
        padding: 0 10px;
        text-decoration: none;
        text-align: center;
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
        transition: background .3s, color .3s;
    }

    /* Вход: бронза фоном — это окантовка, сталь кладём слоем поверх. */
    .menu__auth-lnk {
        position: relative;
        /* Свой слой: надпись внутри не обёрнута тегом и не может встать
           выше стального слоя — значит слой уводим под неё. */
        z-index: 0;
        background: rgba(144, 123, 91, .55);
        color: #c6b89a;
    }

    .menu__auth-lnk:before {
        content: "";
        position: absolute;
        left: 1px;
        top: 1px;
        right: 1px;
        bottom: 1px;
        background: linear-gradient(180deg, #31373c 0%, #3d4145 100%);
        z-index: -1;
    }

    .menu__auth-lnk:hover {
        background: #c6b89a;
        color: #e0d6bf;
    }

    /* Регистрация: тема рисует кнопку картинкой через --btn-bg, здесь
       она не нужна — рамка у нас своя. */
    .menu__auth-btn {
        --btn-bg: none;
        --w: auto;
        --h: auto;
        --scale: 1;
        background: #907b5b;
        color: #1b1f23;
    }

    .menu__auth-btn:before,
    .menu__auth-btn:after {
        display: none;
    }

    .menu__auth-btn:hover {
        background: #c6b89a;
        color: #14181b;
    }

    .menu__auth-ico {
        position: relative;
        z-index: 1;
        width: 16px;
        height: 16px;
        opacity: .9;
        filter: sepia(.85) saturate(1.05) hue-rotate(-4deg) brightness(1.1);
    }

}

/* ======================= Шрифты =======================

   Надпись в логотипе нарисованная: узкие прописные с плоскими концами
   штрихов. Philosopher, на котором стоит весь сайт, — антиква с
   каплевидными засечками, рядом с логотипом она звучит из другой оперы.

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

:root {
    --font-display: "Oswald", "PT Sans Narrow", "Open Sans", Arial, sans-serif;
}

.server,
.btn,
.menu__item,
.menu__auth-lnk,
.lang__name {
    font-family: var(--font-display);
}

/* Oswald уже узкий, поэтому разрядка нужна меньше, чем у антиквы,
   иначе слова рассыпаются. */
.btn {
    letter-spacing: .06em;
}

.server {
    letter-spacing: .03em;
}

/* ================ Кнопка на первом экране ================

   Тема рисует кнопку картинкой через переменную --btn-bg, поэтому
   встраиваемся её же механикой: подменяем картинку и пропорции, а
   подсветку при наведении тема делает сама фильтром.

   Пропорции рамки 1238 x 365, это 3.39 к 1 — у стандартной кнопки темы
   5 к 1, поэтому размеры задаём заново. В пикселях: у темы они в rem,
   а rem на телефоне равен 12, и кнопка выходила мельче задуманного.

   Рамка пришла картинкой на белом фоне; фон вырезан связными
   компонентами (внутренний мрамор при этом остался непрозрачным),
   исходник — в переписке, результат — btn-frame.webp. Прежняя рамка
   btn-join.webp оставлена рядом на случай отката. */

.header__btn {
    /* Заливка вместо картинки: бронза слева плотная, вправо уходит в
       ничто. Тот же приём, что у карточки сервера, — два угла первого
       экрана читаются как одна композиция. Решение владельца
       21.10.2026 после того, как две готовые рамки не сели в арт. */
    --btn-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h21M17.5 1.2 21.3 5l-3.8 3.8' fill='none' stroke='%2314171a' stroke-width='1.3' stroke-opacity='.8'/%3E%3C/svg%3E"),
    linear-gradient(90deg,
    #efe2c4 0%, #d5c4a0 34%, #b7a27c 58%,
    rgba(144, 123, 91, .3) 86%, rgba(144, 123, 91, 0) 100%);
    --scale: 1;
    --w: 250px;
    --h: 50px;
    /* Надпись прижата влево, к плотной части заливки. */
    justify-content: flex-start;
    padding: 0 0 0 26px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    color: #14171a;
    text-shadow: none;
    transition: transform .2s, filter .2s;
}

/* Стрелка нарисована слоем поверх заливки, а не отдельным элементом:
   у кнопки один псевдоэлемент, и он занят подложкой. Стоит там, где
   бронза ещё читается, при наведении уходит правее — в прозрачную
   часть, как будто ведёт за собой. */
.header__btn:before {
    background-size: 26px 10px, 100% 100%;
    background-position: 71% center, 50% 50%;
    background-repeat: no-repeat, no-repeat;
    transition: background-position .25s, filter .2s;
}

.header__btn:hover {
    color: #0f1214;
    transform: translateY(-1px);
}

.header__btn:hover:before {
    background-position: 76% center, 50% 50%;
}

.header__btn:active {
    transform: translateY(0) scale(.99);
}

/* Подсветка у темы в 130% для заливки слишком резкая: бронза
   выбеливается. */
.header__btn:hover:before {
    filter: brightness(106%);
}

@media (min-width: 840px) {
    .header__btn {
        --w: 300px;
        --h: 54px;
        font-size: 13px;
    }
}

@media (min-width: 1200px) {
    .header__btn {
        --w: 330px;
        --h: 56px;
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .header__btn {
        --w: 220px;
        --h: 46px;
        font-size: 11px;
    }
}

/* ================ Блок серверов на первом экране ================

   Было: одна строка «1200:OFFLINE» в декоративной рамке, рассчитанная
   ровно на один сервер. Серверов будет несколько, поэтому собираем
   список карточек.

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

.header__server {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 430px;
    min-height: 0;
    padding: 0;
    text-transform: none;
}

/* Декоративная рамка темы была нарисована под одну строку. */
.header__server:before {
    display: none;
}

.srv {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 14px;
    box-sizing: border-box;
    width: 100%;
    /* сверху место под метку рейтов: она выходит за верхний край */
    padding: 34px 22px 0 24px;
    text-align: left;
    background: transparent;
}

/* Подложки как таковой нет. Карточка не лежит на арте прямоугольной
   наклейкой, а растворяется в нём: слева затемнение плотное, чтобы
   читался текст, вправо оно сходит на нет и картинка остаётся
   открытой. Рамки нет вовсе — роль края играет бронзовая стойка. */
.srv:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(100deg,
    rgba(8, 10, 13, .90) 0%, rgba(8, 10, 13, .76) 48%,
    rgba(8, 10, 13, .34) 80%, rgba(8, 10, 13, 0) 100%);
    /* Сверху и снизу затемнение тоже сходит на нет: без этого
       карточка снова становится прямоугольной наклейкой. */
    -webkit-mask-image: linear-gradient(180deg,
    transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(180deg,
    transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.srv:hover:before {
    background: linear-gradient(100deg,
    rgba(8, 10, 13, .93) 0%, rgba(8, 10, 13, .80) 48%,
    rgba(8, 10, 13, .38) 80%, rgba(8, 10, 13, 0) 100%);
}

/* Герб — не значок в строке, а водяной знак: крупный, полупрозрачный,
   уходит за правый край. Он связывает карточку с артом, а не спорит
   с ним. */
.srv__mark {
    position: absolute;
    right: -4px;
    top: 16px;
    z-index: 0;
    width: 132px;
    height: 132px;
    pointer-events: none;
    background-image: url(../../../../../img/logo/favicon.svg);
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    opacity: .13;
}

.srv__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* Порядок строк: имя, крупные цифры, факты. Самое важное у сервера,
   который ещё не открылся, — сколько осталось, поэтому время стоит
   выше хроники и даты. */
.srv__title { order: 1 }
.srv__timer { order: 2 }
.srv__meta  { order: 3 }

.srv__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.srv__name {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: .92;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Рейты — бронзовая метка, вынесенная за верхний левый угол. Она
   единственная плотная деталь в карточке и держит всю композицию:
   взгляд цепляется за неё первой. */
.srv__rate {
    position: absolute;
    /* Отсчёт идёт от тела карточки — у него своё позиционирование,
       поэтому смещения с запасом: метка должна выйти и за левый, и за
       верхний край самой карточки. */
    left: -32px;
    top: -48px;
    z-index: 3;
    padding: 8px 14px 6px;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    color: #14171a;
    background: linear-gradient(145deg, #efe2c4 0%, #a8906a 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}

.srv__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 11px;
    gap: 4px 10px;
    font-family: var(--font-1);
    font-size: 12px;
    line-height: 1.3;
    color: #99a1a8;
}

/* Разделитель между фактами. Был ромб — мелкая точка, которую не
   видно. Стала косая черта: тот же наклон, что у курсива, читается
   как типографский знак, а не как пылинка. */
.srv__fact + .srv__fact:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin-right: 10px;
    vertical-align: -2px;
    background: linear-gradient(180deg, rgba(198, 184, 154, .85), rgba(144, 123, 91, .3));
    transform: skewX(-18deg);
}

/* Состояние: бронзовая плашка у живого сервера, приглушённая у спящего. */
.srv__state {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    margin-top: 2px;
    padding: 6px 11px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.srv__dot {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
}

/* Живой сервер — зелёным. Цвет приглушённый, болотно-нефритовый: это
   единственное зелёное пятно на бронзовом сайте, и чистый салатовый
   рядом с золотом смотрелся бы чужой наклейкой. */
.srv_on .srv__state {
    background: linear-gradient(180deg, #58a06a 0%, #3c7a4f 100%);
    box-shadow: 0 0 14px rgba(88, 160, 106, .35);
    color: #0d1a11;
}

.srv_on .srv__dot {
    background: #0d1a11;
    animation: srv-pulse 2.6s ease-in-out infinite;
}

.srv_off .srv__state {
    background: rgba(108, 117, 125, .18);
    box-shadow: inset 0 0 0 1px rgba(140, 148, 155, .35);
    color: #99a1a8;
}

.srv_off .srv__dot {
    background: #6f787f;
}

@keyframes srv-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .srv_on .srv__dot {
        animation: none;
    }
}

/* Узкие экраны: плашка состояния уходит под текст, иначе имя сервера
   сжимается до многоточия. */
@media (max-width: 400px) {
    .srv {
        flex-wrap: wrap;
        gap: 10px;
    }

    .srv__body {
        flex: 1 1 140px;
    }

    .srv__name {
        font-size: 16px;
    }
}

/* ================ Подсказка «листать вниз» ================

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

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    transform: translateX(-50%);
    pointer-events: none;
}

.scroll-hint__rail {
    position: relative;
    display: block;
    width: 1px;
    height: 34px;
    overflow: hidden;
    background: linear-gradient(180deg,
    rgba(144, 123, 91, 0) 0%, rgba(144, 123, 91, .4) 100%);
}

.scroll-hint__spark {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 13px;
    background: linear-gradient(180deg,
    rgba(198, 184, 154, 0) 0%, rgba(198, 184, 154, .95) 100%);
    animation: scroll-hint-fall 2s ease-in-out infinite;
}

.scroll-hint__chevron {
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1px solid rgba(198, 184, 154, .75);
    border-bottom: 1px solid rgba(198, 184, 154, .75);
    animation: scroll-hint-bob 2s ease-in-out infinite;
}

@keyframes scroll-hint-fall {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: translateY(280%);
        opacity: 0;
    }
}

/* Поворот держим внутри кадров: иначе он слетает при анимации. */
@keyframes scroll-hint-bob {
    0%, 100% {
        transform: rotate(45deg) translate(0, 0);
    }
    50% {
        transform: rotate(45deg) translate(2px, 2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-hint__spark,
    .scroll-hint__chevron {
        animation: none;
    }

    .scroll-hint__chevron {
        transform: rotate(45deg);
    }
}

/* Обратный отсчёт в карточке сервера, который ещё не открылся.
   Цифры бронзой, подписи приглушены — строка читается как продолжение
   фактов выше, а не как отдельный виджет. */
/* Время — отдельная полоса во всю ширину карточки, своя строка
   сетки. Она чуть темнее тела и так же растворяется вправо, поэтому
   читается как подножие карточки, а не как ещё один прямоугольник. */
.srv__timer {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin: 18px -22px 0 -24px;
    padding: 13px 22px 14px 24px;
}

.srv__timer:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(100deg,
    rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, 0) 100%);
}

/* Волосок над полосой — тоже сходит на нет вправо. */
.srv__timer:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
    rgba(198, 184, 154, .5) 0%, rgba(198, 184, 154, 0) 78%);
}

.srv__ticks {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}

.srv__tick {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

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


.srv__tick {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

.srv__num {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    color: #e4d8bd;
}

.srv__unit {
    font-family: var(--font-1);
    font-size: 11px;
    font-style: normal;
    color: #828a91;
}

.srv__tick_done {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #c6b89a;
}

.srv__tlabel {
    font-family: var(--font-display);
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #907b5b;
}

/* Пока скрипт не отработал, внутри лежит строка, посчитанная на
   сервере, — она не должна ломать раскладку. */
.srv__ticks:not(:has(.srv__tick)) {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: .04em;
    color: #c6b89a;
}

/* ================ Новости ================

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

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

.post {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Пиксель отступа — чтобы содержимое не наезжало на окантовку:
       фон элемента и есть окантовка, а картинка иначе закрывает её
       сверху и с боков, и рамка видна только снизу. */
    padding: 1px;
    box-sizing: border-box;
    background: rgba(144, 123, 91, .45);
    transition: background .3s, transform .3s;
}

.post:before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    background: linear-gradient(180deg, #262b30 0%, #1b1f23 100%);
}

.post:hover {
    background: rgba(198, 184, 154, .6);
    transform: translateY(-3px);
}

/* Картинка */
.post__pic {
    position: relative;
    z-index: 1;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.post__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

/* Поворот и выбеливание из темы убираем: остаётся спокойный наезд. */
.post:hover .post__img {
    transform: scale(1.06);
    filter: none;
}

/* Низ картинки растворяется в карточке, чтобы стык не резал глаз. */
.post__pic:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(180deg,
    rgba(27, 31, 35, 0) 0%, rgba(27, 31, 35, .75) 70%, #1f2429 100%);
    pointer-events: none;
}

/* Дата плашкой поверх картинки */
.post__date {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 11px 6px;
    background: rgba(18, 21, 24, .86);
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .55);
}

.post__day {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    color: #e0d6bf;
}

.post__month {
    font-family: var(--font-display);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #907b5b;
}

/* Текстовая часть */
.post__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 auto;
    padding: 14px 16px 16px;
}

.post__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #e0d6bf;
    margin: 0;
    transition: color .3s;
    /* Две строки максимум: заголовки разной длины не должны ломать ряд. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post:hover .post__title {
    color: #f0e7d4;
}

.post__desc {
    font-family: var(--font-1);
    font-size: 13px;
    line-height: 1.45;
    color: #8c949b;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* «Читать» с уголком — прижато к низу карточки. */
.post__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #907b5b;
    transition: color .3s, gap .3s;
}

.post__chevron {
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

.post:hover .post__more {
    color: #c6b89a;
    gap: 12px;
}

/* Боковые поля блока: тема обнуляет их у контейнера с 768 px, и
   карточки упирались в края экрана. */
@media (max-width: 768px) {
    [data-section=news] .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Слайды одной высоты, иначе карточки с коротким текстом проваливаются.
   Ширина была прописана прямо в разметке и не давала ужать карточку на
   телефоне — перенесена сюда. */
.news__list .swiper-wrapper {
    align-items: stretch;
}

.news__swiper-slide {
    height: auto;
    max-width: 400px;
}

@media (max-width: 768px) {
    .news__swiper-slide {
        max-width: 100%;
    }
}

/* ================ Заголовки одной гарнитурой ================

   В теме заголовки разделов идут Philosopher'ом (правило
   `.itm__content, .title`), а карточки и кнопки мы уже перевели на
   Oswald — получались две разные гарнитуры в одном экране. Сводим всё
   к Oswald: он же роднит текст с нарисованной надписью логотипа.     */

.title,
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .02em;
}

/* Крупный заголовок раздела: в Oswald буквы узкие, поэтому прописные с
   разрядкой читаются лучше обычного начертания. */
.heading .title {
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ================ Текстовая гарнитура ================

   Длинные тексты — статьи, описания, форум — переводим на PT Serif. Она
   рисовалась под кириллицу, и на длинном чтении это заметно: у Open Sans
   и Philosopher, которые стояли раньше, с кириллицей компромиссы.

   Система держится на двух гарнитурах:
       Oswald    — заголовки и управление: кнопки, меню, подписи, плашки
       PT Serif  — всё, что читают подряд

   Переменные темы переопределяем целиком, чтобы Philosopher и Open Sans
   не всплывали в местах, до которых мы не добрались поимённо. Там, где
   нужен Oswald, он задан явно и перебивает переменную. */

:root {
    --font-text: "PT Serif", "Times New Roman", Times, serif;
    --font-0: var(--font-text);
    --font-1: var(--font-text);
}

body {
    font-family: var(--font-text);
}

/* ================ Разделители между секциями ================

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

   Попутно уходит и горизонтальная прокрутка: прежняя ширина в 1818 px
   вылезала за экран. */

.section-decor {
    width: 100%;
    max-width: 100%;
    height: 16px;
    background-color: transparent;
    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cg fill='none' stroke='%23907b5b' stroke-width='1'%3E%3Cpath d='M60 2.5 L65.5 8 L60 13.5 L54.5 8 Z'/%3E%3C/g%3E%3Cpath d='M60 5.5 L62.5 8 L60 10.5 L57.5 8 Z' fill='%23c6b89a'/%3E%3Cpath d='M33 8 L36 5 L39 8 L36 11 Z' fill='%23907b5b'/%3E%3Cpath d='M81 8 L84 5 L87 8 L84 11 Z' fill='%23907b5b'/%3E%3C/svg%3E"),
    linear-gradient(90deg,
    rgba(144, 123, 91, 0) 0%,
    rgba(144, 123, 91, .44) 24%,
    rgba(144, 123, 91, .44) 76%,
    rgba(144, 123, 91, 0) 100%);
    background-size: 120px 16px, 100% 1px;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
}

/* Разделитель садится ровно на стык секций, а не нависает над ним. */
.section-decor_pos_bottom {
    top: calc(100% - 8px);
}

.section-decor_pos_top {
    bottom: calc(100% - 8px);
}

/* ================ Лента соцсетей на первом экране ================

   Это вертикальная стойка у правого края первого экрана. Было два
   серых квадратика со значками — на светлых обоях они читались как
   случайные пятна.

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

   Прямые углы: ни скруглений, ни срезов. */

.header-scl-box {
    right: 32px;
    width: 52px;
}

.scl {
    width: 100%;
}

.scl__list {
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 38px 0;
}

/* Нить, на которой держатся значки. К краям растворяется, чтобы не
   выглядела обрубленной палкой. */
.scl__list:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -1px;
    background: linear-gradient(180deg,
    rgba(144, 123, 91, 0) 0%, rgba(144, 123, 91, .5) 24%,
    rgba(144, 123, 91, .5) 76%, rgba(144, 123, 91, 0) 100%);
    pointer-events: none;
}

.scl__item {
    width: 52px;
    height: 52px;
    color: #c6b89a;
    background: rgba(144, 123, 91, .75);
    /* тень отрывает блок от обоев: они могут быть и светлыми */
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    transition: background .3s, color .3s, transform .3s, box-shadow .3s;
}

/* Подложка: картинку из темы убираем, слой используем под стекло.
   Размытие нужно именно здесь — обои первого экрана меняются, и
   плотная заливка под значком выглядела бы заплаткой. */
.scl__item:before {
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: auto;
    height: auto;
    background-color: transparent;
    background-image: linear-gradient(180deg,
    rgba(27, 31, 35, .78) 0%, rgba(16, 19, 22, .86) 100%);
    background-size: auto;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: background .3s;
}

.scl__item:after {
    display: none;
}

.scl__glyph {
    position: relative;
    z-index: 1;
    width: 21px;
    height: 21px;
    display: block;
}

/* Знаки из шрифта иконок темы — для соцсетей, которые могут включить
   обратно: размер и цвет те же, что у нарисованных. */
.scl__item .gwi {
    position: relative;
    z-index: 1;
    font-size: 20px;
    line-height: 1;
}

/* Название сети. Прижато к значку вплотную: общая кромка читается
   как один блок, а не как подсказка рядом. */
.scl__name {
    position: absolute;
    right: calc(100% - 1px);
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #e4dac2;
    background: linear-gradient(180deg,
    rgba(27, 31, 35, .78) 0%, rgba(16, 19, 22, .86) 100%);
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .75),
    0 6px 18px rgba(0, 0, 0, .3);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity .28s, transform .28s, color .28s, background .28s;
}

.scl__item:hover {
    background: #c6b89a;
    color: #15181b;
    transform: translateX(-4px);
    box-shadow: 0 0 18px rgba(144, 123, 91, .35), 0 8px 22px rgba(0, 0, 0, .35);
}

.scl__item:hover:before {
    background-image: linear-gradient(180deg, #d2c3a4 0%, #907b5b 100%);
}

.scl__item:hover .scl__name {
    opacity: 1;
    transform: translateX(0);
}

/* Телефон и планшет: стойки нет вовсе — тема прячет её до 680 px. */

/* ================ Карточки соцсетей ================

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

   Подложки лежат в public/img/ui и заменяются файлами с теми же
   именами — разметку и стили при этом трогать не нужно. */

.invite__social {
    width: 100%;
}

.sclcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.sclcard {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    min-height: 190px;
    padding: 1px;
    box-sizing: border-box;
    text-decoration: none;
    background: rgba(144, 123, 91, .5);
    transition: background .3s, transform .3s;
}

.sclcard:hover {
    background: rgba(198, 184, 154, .65);
    transform: translateY(-3px);
}

/* Арт во всю карточку, под содержимым. */
.sclcard__art {
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -1;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    transition: transform .5s;
}

.sclcard:hover .sclcard__art {
    transform: scale(1.04);
}

/* Затемнение снизу, чтобы текст читался на любом арте. */
.sclcard__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    padding: 18px 20px 17px;
    box-sizing: border-box;
    background: linear-gradient(180deg,
    rgba(18, 21, 24, 0) 0%, rgba(18, 21, 24, .72) 45%, rgba(18, 21, 24, .92) 100%);
}

.sclcard__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sclcard__glyph {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #c6b89a;
}

.sclcard__name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #e8e0cd;
}

.sclcard__text {
    font-family: var(--font-text);
    font-size: 13px;
    line-height: 1.4;
    color: #9aa2a9;
}

.sclcard__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #907b5b;
    transition: color .3s, gap .3s;
}

.sclcard__chev {
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}

.sclcard:hover .sclcard__action {
    color: #c6b89a;
    gap: 12px;
}

@media (min-width: 840px) {
    .sclcard {
        min-height: 230px;
    }

    .sclcard__name {
        font-size: 21px;
    }

    .sclcard__text {
        font-size: 14px;
    }
}

/* ================ Логотип в шапке: тень и отсвет ================

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

.logo__img {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8))
    drop-shadow(0 0 5px rgba(198, 184, 154, .5))
    drop-shadow(0 0 18px rgba(144, 123, 91, .25));
}

/* ================ Блок сообщества: воздух ================

   Карточки упирались в края экрана и сливались с фоном страницы, а
   между ними и логотипом внизу места почти не оставалось. */

@media (max-width: 768px) {
    [data-section=invite] .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Низ у секции был 10.6rem — на телефоне это полтора экрана пустоты. */
    .invite {
        padding-bottom: 64px;
    }
}

.invite__social {
    margin: 44px 0 52px;
}

.invite__btns {
    margin-top: 36px;
}

/* Знак без надписи: связка уже стоит в шапке. Размер задаём высотой
   — картинка квадратная. */
.invite__logotype .logotype__img {
    width: auto;
    height: 78px;
    max-width: none;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6));
}

/* Подпись проекта: хроника крупно, приписка мелко в разрядку, по
   бокам линии, затухающие к краям. Плашки нет намеренно — блок не
   должен загораживать арт. */
.invtag {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 430px;
    margin: 22px auto 0;
}

.invtag__rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 184, 154, .55));
}

.invtag__rule_r {
    background: linear-gradient(90deg, rgba(198, 184, 154, .55), transparent);
}

.invtag__tx {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.invtag__name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #f2e6cc;
    /* разрядка добавляет пустоту справа — возвращаем строку в центр */
    padding-left: .2em;
}

.invtag__sub {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--bc-bronze, #907b5b);
    padding-left: .4em;
}

@media (max-width: 479.98px) {
    .invtag {
        gap: 12px;
    }

    .invtag__name {
        font-size: 17px;
    }
}

/* Кнопка «Начать играть» — та же золотая пара, что в шапке, только
   крупнее. Картинку темы выключаем, всё делают заливка и кромка. */
.invite__btns {
    margin-top: 26px;
}

.invite__btns .btn {
    --btn-bg: none;
    --btn-color: 23, 18, 10;
    --scale: 1;
    --w: auto;
    --h: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 54px;
    padding: 0 40px;
    box-sizing: border-box;
    border: 1.5px solid #e9bd72;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .11em;
    color: #17120a;
    background: linear-gradient(135deg,
    #a8702a 0%, #e3b76a 26%, #f8e3b4 48%, #d8a558 72%, #9c6a28 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
    text-shadow: none;
    transition: filter .25s, box-shadow .25s;
}

.invite__btns .btn:before,
.invite__btns .btn:after {
    display: none;
}

.invite__btns .btn:hover {
    filter: brightness(108%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(233, 189, 114, .28);
}

@media (max-width: 479.98px) {
    .invite__btns .btn {
        height: 50px;
        padding: 0 30px;
        font-size: 14px;
    }
}

/* ================ Окно «Файлы для игры» ================

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

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

.fmod {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}

.fmod[hidden] {
    display: none;
}

/* Завеса: почти чёрная, с бронзовым свечением из середины — то же
   пятно, что на заставке загрузки. */
.fmod__veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 42%,
    rgba(144, 123, 91, .13) 0%, rgba(6, 8, 10, .86) 58%, rgba(6, 8, 10, .94) 100%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .25s;
}

.fmod__win {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    max-height: calc(100vh - 48px);
    box-sizing: border-box;
    background: linear-gradient(180deg, #181b1f 0%, #101316 100%);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(144, 123, 91, .22);
    opacity: 0;
    transform: translateY(16px) scale(.985);
    transition: opacity .28s, transform .28s;
    outline: none;
}

/* Бронзовая полоса по верхнему краю, затухающая к бокам: тот же приём
   растворения, что у карточки сервера, — край есть, рамки нет. */
.fmod__win:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
    rgba(144, 123, 91, 0) 0%, #c6b89a 22%, #efe2c4 50%, #c6b89a 78%, rgba(144, 123, 91, 0) 100%);
}

.fmod_open .fmod__veil {
    opacity: 1;
}

.fmod_open .fmod__win {
    opacity: 1;
    transform: translateY(0) scale(1);
}

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

.fmod__x {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: background .25s;
}

.fmod__x:hover {
    background: rgba(144, 123, 91, .14);
}

.fmod__xline {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1px;
    margin: 0 0 0 -8px;
    background: #c6b89a;
    transform: rotate(45deg);
    transition: background .25s;
}

.fmod__xline_b {
    transform: rotate(-45deg);
}

.fmod__x:hover .fmod__xline {
    background: #efe2c4;
}

/* ---- шапка окна ---- */

.fmod__head {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 26px 56px 22px 28px;
    border-bottom: 1px solid rgba(144, 123, 91, .18);
}

.fmod__ttl {
    position: relative;
    flex: 0 0 auto;
    padding-right: 22px;
}

/* Вертикальная бронзовая стойка между названием и пояснением. */
.fmod__ttl:after {
    content: "";
    position: absolute;
    right: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: linear-gradient(180deg,
    rgba(144, 123, 91, 0) 0%, rgba(198, 184, 154, .7) 50%, rgba(144, 123, 91, 0) 100%);
}

.fmod__h {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
}

.fmod__sub {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #907b5b;
}

.fmod__note {
    flex: 1 1 260px;
    min-width: 0;
    margin: 0;
    font-family: var(--font-text);
    font-size: 13px;
    line-height: 1.5;
    color: #9aa2a9;
}

/* ---- содержимое ---- */

.fmod__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    padding: 24px 28px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(144, 123, 91, .5) transparent;
}

.fmod__body::-webkit-scrollbar {
    width: 6px;
}

.fmod__body::-webkit-scrollbar-thumb {
    background: rgba(144, 123, 91, .5);
}

.fgrp__name {
    margin: 0;
    padding-bottom: 10px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #e8e0cd;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
    rgba(198, 184, 154, .55) 0%, rgba(144, 123, 91, .18) 60%, rgba(144, 123, 91, 0) 100%) 1;
}

/* Подпись выводится всегда, даже пустая, и занимает две строки: иначе
   соседние колонки съезжают друг относительно друга и ряды кнопок
   начинаются с разной высоты. */
.fgrp__desc {
    margin: 9px 0 0;
    font-family: var(--font-text);
    font-size: 12.5px;
    line-height: 1.45;
    color: #8c949b;
}

@media (min-width: 841px) {
    .fgrp__desc {
        min-height: 36px;
    }
}

.fgrp__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.fgrp__empty {
    margin: 14px 0 0;
    font-family: var(--font-text);
    font-size: 12.5px;
    color: #6f787f;
}

/* ---- кнопка ссылки ---- */

.fbtn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px 11px 16px;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(49, 55, 60, .85) 0%, rgba(28, 32, 35, .85) 100%);
    box-shadow: inset 0 0 0 1px rgba(144, 123, 91, .16);
    transition: transform .2s, box-shadow .25s, background .25s;
}

/* Бронзовая стойка слева — единственная плотная деталь кнопки. */
.fbtn:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #efe2c4 0%, #907b5b 100%);
    transition: width .22s;
}

.fbtn:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(58, 65, 70, .92) 0%, rgba(34, 39, 43, .92) 100%);
    box-shadow: inset 0 0 0 1px rgba(198, 184, 154, .38), 0 10px 24px rgba(0, 0, 0, .4);
}

.fbtn:hover:before {
    width: 5px;
}

.fbtn:active {
    transform: translateY(0);
}

.fbtn__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #c6b89a;
    transition: color .25s;
}

.fbtn__ico svg {
    width: 22px;
    height: 22px;
}

/* Картинка из админки бывает цветной, поэтому приглушаем её под общий
   тон — иначе логотип облака горит пятном на бронзовой плашке. */
.fbtn__img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: .85;
}

.fbtn:hover .fbtn__ico {
    color: #efe2c4;
}

.fbtn__tx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.fbtn__name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.15;
    color: #e0d6bf;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fbtn__size {
    font-family: var(--font-1);
    font-size: 11px;
    line-height: 1.2;
    color: #8c949b;
}

/* Шеврон уходит вправо на наведении: кнопка «ведёт», а не просто
   подсвечивается. */
.fbtn__arr {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-top: 1px solid #907b5b;
    border-right: 1px solid #907b5b;
    transform: rotate(45deg);
    transition: transform .22s, border-color .25s;
}

.fbtn:hover .fbtn__arr {
    border-color: #efe2c4;
    transform: rotate(45deg) translate(3px, -3px);
}

/* ---- низ окна ---- */

.fmod__foot {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 28px 22px;
    border-top: 1px solid rgba(144, 123, 91, .18);
    background: rgba(8, 10, 13, .4);
}

/* Та же бронзовая полоса, что у кнопки на первом экране: плотная
   слева, растворяется вправо. */
.fmod__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 60px 0 22px;
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    color: #14171a;
    background: linear-gradient(90deg,
    #efe2c4 0%, #d5c4a0 34%, #b7a27c 58%,
    rgba(144, 123, 91, .3) 86%, rgba(144, 123, 91, 0) 100%);
    transition: transform .2s, filter .2s;
}

.fmod__cta:after {
    content: "";
    position: absolute;
    right: 26px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: 1px solid rgba(20, 23, 26, .8);
    border-right: 1px solid rgba(20, 23, 26, .8);
    transform: rotate(45deg);
    transition: right .25s;
}

.fmod__cta:hover {
    color: #0f1214;
    transform: translateY(-1px);
    filter: brightness(106%);
}

.fmod__cta:hover:after {
    right: 20px;
}

.fmod__help {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
    font-family: var(--font-text);
    font-size: 12px;
    line-height: 1.45;
    color: #7e868d;
}

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

@media (max-width: 840px) {
    .fmod {
        padding: 0;
    }

    .fmod__win {
        max-width: none;
        max-height: 100vh;
        height: 100%;
    }

    .fmod__head {
        gap: 12px;
        padding: 20px 52px 16px 18px;
    }

    .fmod__ttl {
        flex: 1 1 100%;
        padding-right: 0;
    }

    .fmod__ttl:after {
        display: none;
    }

    .fmod__h {
        font-size: 22px;
    }

    .fmod__note {
        flex-basis: 100%;
        font-size: 12px;
    }

    .fmod__body {
        gap: 22px;
        padding: 18px 18px 22px;
    }

    .fmod__foot {
        padding: 16px 18px 20px;
    }

    .fmod__cta {
        flex: 1 1 100%;
        justify-content: center;
        padding: 0 22px;
        /* В полную ширину растворение вправо читается как обрезанная
           кнопка, поэтому здесь заливка ровная. */
        background: linear-gradient(90deg, #efe2c4 0%, #c9b690 100%);
    }

    .fmod__cta:after {
        display: none;
    }
}

/* Прокрутка страницы под открытым окном. */
.fmod-lock {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

    .fmod__veil,
    .fmod__win,
    .fbtn,
    .fbtn:before,
    .fbtn__arr {
        transition: none;
    }
}