@charset "UTF-8";
/* ============================================================
   MinecraftZone - glass.css: тема «стекло на фоне»
   Картинка закреплена за всем сайтом, шапка страницы - открытое небо, содержимое лежит на ней полупрозрачным
   матовым листом (.sheet). Файл подключается ПОСЛЕДНИМ на каждой странице и перекрывает старые стили шапки и блоков.
   Размытие (backdrop-filter) висит только на псевдоэлементах ::before: у элемента-предка с backdrop-filter
   position:fixed внутри считается от самого предка, а не от окна (так «уехали» бы левая колонка гайдов и кнопка «Наверх»).
   Чтобы откатить тему, уберите подключение этого файла со страниц.
   ============================================================ */

:root {
    color-scheme: dark;
    --glass-nav: rgba(27, 27, 27, 0.74);
    --glass-sheet: rgba(27, 27, 27, 0.72);
    --sheet-top: rgba(20, 18, 16, 0.64);
    --sheet-bottom: rgba(20, 18, 16, 0.78);
    --glass-fx-sheet: blur(22px) saturate(1.3);
    --r-btn: 10px;
    --r-card: 14px;
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-line: rgba(255, 255, 255, 0.10);
    --glass-foot: rgba(14, 14, 14, 0.80);
    --glass-line: rgba(255, 255, 255, 0.08);
    --glass-gold: rgba(240, 199, 94, 0.55);
    --glass-fx: blur(16px) saturate(1.1);
    --sheet-radius: 20px;
    --sheet-overlap: 40px;
    /* карточки и плашки на матовом листу должны быть заметнее, чем на сплошном фоне */
    --stats-background: rgba(216, 208, 193, 0.06);
}

@media (max-width: 819px) {
    :root {
        --glass-fx: blur(8px) saturate(1.05);
        --glass-fx-sheet: blur(12px) saturate(1.2);
        --sheet-radius: 14px;
    }
}

/* без поддержки размытия текст на картинке теряет контраст: делаем стекло почти сплошным */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body .navbar .links .nav-dropdown-menu {
        background: rgba(20, 18, 16, 0.97);
    }

    :root {
        --glass-nav: rgba(27, 27, 27, 0.94);
        --glass-sheet: rgba(27, 27, 27, 0.94);
        --sheet-top: rgba(27, 27, 27, 0.94);
        --sheet-bottom: rgba(27, 27, 27, 0.94);
        --glass-fx-sheet: none;
        --glass-foot: rgba(14, 14, 14, 0.96);
        --glass-fx: none;
    }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    body .navbar .links .nav-dropdown-menu {
        background: #1B1B1B;
    }

    :root {
        --glass-nav: #1B1B1B;
        --glass-sheet: #1B1B1B;
        --sheet-top: #1B1B1B;
        --sheet-bottom: #1B1B1B;
        --glass-fx-sheet: none;
        --glass-foot: #0E0E0E;
        --glass-fx: none;
        --glass-line: rgba(216, 208, 193, 0.5);
    }
}

/* --- 1. Закреплённый фон на весь сайт --- */
html {
    background: #1B1B1B;
}

body {
    background: transparent;
    isolation: isolate;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(14, 14, 14, 0.05), rgba(14, 14, 14, 0.18) 55%, rgba(27, 27, 27, 0.45)),
        url("../images/header-background.jpg?v=e183acde88") center top / cover no-repeat,
        #1B1B1B;
}

/* --- 2. Матовая панель навигации --- */
body .navbar {
    background: none;
    isolation: isolate;
}

body .navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--glass-nav);
    -webkit-backdrop-filter: var(--glass-fx);
    backdrop-filter: var(--glass-fx);
    border-bottom: 1px solid var(--glass-line);
}

/* выпадающее меню «Гайды»: матовое стекло, висит под нижней кромкой панели навигации (а не лежит на строке меню),
   выпадает плавно, наверху «носик» к кнопке. Размытие видит страницу позади, потому что фильтр панели висит на ::before */
body .navbar .links .nav-dropdown::after {
    height: 40px; /* невидимый мостик от кнопки до меню, чтобы оно не закрывалось, пока двигаете курсор */
}

body .navbar .links .nav-dropdown-menu {
    display: flex;
    top: calc(100% + 28px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    background: rgba(20, 18, 16, 0.70);
    -webkit-backdrop-filter: var(--glass-fx);
    backdrop-filter: var(--glass-fx);
    border: 1px solid var(--glass-line);
    box-shadow: inset 0 1px 0 var(--glass-gold), 0 18px 44px rgba(0, 0, 0, 0.45);
}

body .navbar .links .nav-dropdown:hover .nav-dropdown-menu,
body .navbar .links .nav-dropdown:focus-within .nav-dropdown-menu,
body .navbar .links .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

/* «носик» над меню */
body .navbar .links .nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(32, 29, 26, 0.96);
    border-top: 1px solid var(--glass-gold);
    border-left: 1px solid var(--glass-line);
}

/* пока меню открыто, кнопка «Гайды» подсвечена золотом */
body .navbar .links .nav-dropdown:hover > a,
body .navbar .links .nav-dropdown:focus-within > a,
body .navbar .links .nav-dropdown.open > a {
    color: var(--main-color);
}

/* стрелка у «Гайды» поворачивается, пока список открыт */
body .navbar .links .nav-dropdown > a i {
    transition: transform 0.16s ease;
}

body .navbar .links .nav-dropdown.open > a i {
    transform: rotate(180deg);
}

/* в мобильном меню список «Гайды» свёрнут и раскрывается нажатием; наведение и фокус там не считаются
   (после нажатия на телефоне они «залипают» и держали бы список открытым), без своей панели, анимации и «носика» */
@media (max-width: 960px) {
    body .navbar .links .nav-dropdown-menu,
    body .navbar .links .nav-dropdown:hover .nav-dropdown-menu,
    body .navbar .links .nav-dropdown:focus-within .nav-dropdown-menu {
        display: none;
        position: static;
        top: auto;
        opacity: 1;
        /* visibility наследуем от списка ссылок: у свёрнутого меню он hidden, и подпункты не должны ловить нажатия поверх страницы
           (раньше тут стояло visible, невидимые пункты «Гайдов» лежали на описании и открывали страницы) */
        visibility: inherit;
        pointer-events: auto;
        transform: none;
        transition: none;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 0;
        box-shadow: none;
    }

    body .navbar .links .nav-dropdown.open .nav-dropdown-menu {
        display: flex;
        opacity: 1;
        visibility: inherit;
        transform: none;
    }

    body .navbar .links .nav-dropdown-menu::before {
        display: none;
    }
}

/* --- 3. Шапка страницы: открытое небо без сплошного затемнения --- */
body #header {
    overflow-x: clip;
    background: none;
    min-height: 360px;
    height: auto;
    padding: 0 0 var(--sheet-overlap);
    display: flex;
    align-items: center;
    overflow: visible;
    position: relative;
    z-index: 1;
}

body #header::before {
    content: none;
}

body #header .content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
    padding: 80px 24px 56px;
    text-align: center;
}

/* локальное затемнение прямо под текстом: на светлом небе заголовок остаётся читаемым */
body #header .content::before {
    content: "";
    position: absolute;
    inset: -36px -48px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(14, 14, 14, 0.74) 0, rgba(14, 14, 14, 0.52) 55%, transparent 82%);
}

body #header .content .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

/* IP над заголовком - небольшая плашка */
body #header .content .info .minecraft-server-ip {
    display: inline-block;
    margin: 0;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(27, 27, 27, 0.72);
    border: 1px solid var(--glass-line);
    color: var(--main-color);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: none;
    text-shadow: none;
}

body #header .content .info .title {
    margin: 0;
    color: #F3EEE2;
    font-size: clamp(30px, 5vw, 56px);
    overflow-wrap: break-word;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
}

body #header .content .info .title span {
    color: var(--main-color);
}

body #header .content .description {
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #F5F0E4;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 16px rgba(0, 0, 0, 0.9);
}

/* --- 3a. Главная: своя разметка шапки (.left), тоже по центру --- */
body #header .content .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
    margin: 0 auto;
    background: none;
    text-align: center;
}

body #header .content .left .server-name {
    align-items: center;
    text-align: center;
}

body #header .content .left .server-description {
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
    background: none;
    color: #F0EBDD;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* карточка шапки главной: описание, кнопки и статус лежат на одном матовом стекле */
body #header .content .left .hero-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 720px;
    margin-top: 6px;
    padding: 26px 32px 22px;
    background: linear-gradient(rgba(10, 10, 10, 0.34), rgba(10, 10, 10, 0.46));
    -webkit-backdrop-filter: var(--glass-fx);
    backdrop-filter: var(--glass-fx);
    border: 0;
    border-radius: 18px;
    box-shadow: inset 0 1px 0 var(--glass-gold);
}

body #header .content .left .hero-card .server-description,
body #header .content .left .hero-card .buttons {
    margin: 0;
}

body #header .content .left .hero-card .hero-status-bar {
    margin: 0 auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* подпись «MinecraftZone» над IP на главной дублирует логотип в навигации: прячем, оставляем один крупный заголовок */
body #header .content .left .server-name p {
    display: none;
}

body #header .content .left .server-name .minecraft-server-ip {
    font-size: clamp(26px, 6.2vw, 68px);
    line-height: 1.08;
}

/* «Показать больше» лежит на солнце: нужен свой тёмный фон */
body #header .content .left .buttons .how-to-join {
    background: rgba(27, 27, 27, 0.72);
    color: #F0EBDD;
}

body #header .content .left .buttons,
body #header .content .left .hero-status-bar {
    justify-content: center;
}

body #header .content .left .hero-status-bar {
    margin-left: auto;
    margin-right: auto;
}

/* --- 4. Лист с содержимым --- */
.sheet {
    position: relative;
    isolation: isolate;
    z-index: 2;
    width: calc(100% - 32px);
    max-width: 1680px;
    margin: 0 auto 32px;
}

/* на телефоне лист на всю ширину, на очень широких экранах слева остаётся место под колонку быстрого перехода (124 пикселя) */
@media (max-width: 819px) {
    .sheet {
        width: 100%;
    }
}

@media (min-width: 1650px) {
    .sheet {
        width: calc(100% - 320px);
    }
}

/* внутри листа у блоков общие отступы из global.css были по 90-150 пикселей с каждой стороны: текст и картинки сидели в узком коридоре */
.sheet > section:not(#header):not(#guides) .content {
    padding: clamp(40px, 5vw, 80px) clamp(20px, 4.5vw, 88px);
}

#header + .sheet {
    margin-top: calc(-1 * var(--sheet-overlap));
}

.sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--sheet-radius);
    /* блик матового стекла сверху + заливка: прозрачнее у верха, где виден лес, и плотнее к низу, где длинный текст */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 160px),
        linear-gradient(180deg, var(--sheet-top) 0, var(--sheet-bottom) 700px);
    -webkit-backdrop-filter: var(--glass-fx-sheet);
    backdrop-filter: var(--glass-fx-sheet);
    border: 1px solid var(--glass-line);
    box-shadow: inset 0 1px 0 var(--glass-gold), 0 -24px 60px rgba(0, 0, 0, 0.25), 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* у блоков внутри листа своего фона нет: всё лежит на одном стекле, блоки разделены тонкими линиями */
.sheet > section {
    background: none !important;
}

.sheet > section + section {
    border-top: 1px solid rgba(216, 208, 193, 0.08);
}

/* нижний блок «Готовы...?» теперь часть листа, а не отдельная картинка */
.sheet > #join-server {
    padding: 56px 24px;
    min-width: 0;
}

.sheet > #join-server .content {
    padding: 0;
}

/* поля форм на стекле: нужна рамка, иначе они сливаются */
.sheet input,
.sheet textarea {
    background: rgba(14, 14, 14, 0.55);
    border: 1px solid rgba(216, 208, 193, 0.22);
}

/* полоса быстрого перехода (правила, гайды): тоже матовое стекло, а не сплошная тёмная лента;
   на широких экранах (от 1650 пикселей) это левая колонка без фона, её не трогаем */
@media (max-width: 1649px) {
    body .side-jump {
        background: var(--glass-sheet);
        -webkit-backdrop-filter: var(--glass-fx);
        backdrop-filter: var(--glass-fx);
        border-bottom: 1px solid var(--glass-line);
        /* полоса лежит внутри листа первой: повторяем его скругление сверху, иначе квадратный фон перекроет углы и золотую линию */
        border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    }

    /* вложенное размытие внутри полосы не нужно: плашка с кнопками просто чуть темнее */
    body .side-jump .side-jump-in {
        background: rgba(14, 14, 14, 0.30);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        border: 1px solid var(--glass-line);
    }
}

/* широкие экраны: подписи левой колонки лежат прямо на картинке, поэтому даём им стеклянную подложку */
@media (min-width: 1650px) {
    body .side-jump {
        background: rgba(27, 27, 27, 0.62);
        -webkit-backdrop-filter: var(--glass-fx);
        backdrop-filter: var(--glass-fx);
        border: 1px solid var(--glass-line);
        border-radius: 14px;
        padding: 10px 6px;
    }
}

/* на 404 страница короткая: подвал прижимаем вниз */
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

/* --- 5. Подвал --- */
body #footer {
    position: relative;
    isolation: isolate;
    z-index: 1;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

body #footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--glass-foot);
    -webkit-backdrop-filter: var(--glass-fx);
    backdrop-filter: var(--glass-fx);
    border-top: 1px solid var(--glass-gold);
}

#footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
}

#footer .footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--description-color);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

#footer .footer-links a:hover,
#footer .footer-links a:focus-visible {
    color: var(--main-color);
}

#footer .footer-links i {
    font-size: 18px;
}

/* --- 6. Кнопка Telegram в шапке главной и в блоке «Присоединяйся» --- */
.status-discord.status-telegram i,
.status-telegram i {
    color: #2AABEE;
}

#discord .content .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

a.join-telegram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 30px;
    border: 2px solid var(--description-color);
    border-radius: 3px;
    background: var(--how-to-join-button-background);
    color: var(--description-color);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

a.join-telegram:hover {
    opacity: 0.8;
}

a.join-telegram i {
    color: #2AABEE;
}

/* --- 8. Главная: блок «Проголосуйте» пересобран под стекло ---
   раньше текст стоял узкой колонкой слева, а две карточки висели отдельно посередине; теперь заголовок и текст сверху,
   карточки одинаковой высоты рядом, а на телефоне друг под другом */
.sheet #vote .content {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
}

.sheet #vote .content .info {
    flex: none;
    gap: 28px;
}

.sheet #vote .content .info .section-description {
    max-width: 720px;
}

.sheet #vote .content .links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.sheet #vote .content .links .url {
    display: flex;
}

.sheet #vote .content .links .link {
    width: 100%;
    max-width: none;
    padding: 22px 24px;
    background: rgba(14, 14, 14, 0.34);
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.sheet #vote .content .links .url:hover .link,
.sheet #vote .content .links .url:focus-visible .link {
    background: rgba(14, 14, 14, 0.46);
    border-color: var(--glass-gold);
    transform: translateY(-2px);
}

.sheet #vote .content .links .link .link-description {
    flex: 1;
    justify-content: space-between;
    gap: 24px;
}

.sheet #vote .content .links .link .link-description .icon {
    flex: none;
    padding: 0;
    background: none;
}

.sheet #vote .content .links .link .link-description .icon i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--main-color);
    color: #1B1B1B;
    font-size: 20px;
}

@media (max-width: 760px) {
    .sheet #vote .content .links {
        grid-template-columns: 1fr;
    }
}

/* --- 9. Исправления по независимой проверке контраста --- */

/* кнопки на листе: сплошная тёмно-оранжевая заливка вместо полупрозрачной коричневой (контраст был 3,2-4,5) */
.sheet .copy-ip,
.sheet a.join-discord,
.sheet #contacts form button[type="submit"] {
    background: #8A5410 !important;
    border-color: var(--main-color) !important;
    color: #F3EEE2 !important;
}

/* красное предупреждение на правилах */
.sheet #rules .warning {
    background: rgba(110, 24, 40, 0.62);
}

.sheet #rules .warning p {
    color: #F6C6CD;
}

/* цвета команд на карточках доната осветляем */
#donate .tier-perks code,
#donate .tier-perks a {
    color: var(--tier-color);
    color: color-mix(in srgb, var(--tier-color) 66%, #fff);
}

/* левая колонка быстрого перехода: чуть шире, чтобы подписи не переносились по слову */
@media (min-width: 1650px) {
    body .side-jump {
        width: 138px;
    }
}

@media (max-width: 819px) {
    /* на телефоне подложка под текст шапки - сплошной мягкий слой на всю ширину, у заголовка на небе иначе контраст ниже 2 */
    body #header .content::before {
        inset: 0;
        background: linear-gradient(rgba(14, 14, 14, 0.68), rgba(14, 14, 14, 0.52));
    }

    /* кнопка «Наверх» не должна лежать поверх текста подвала */
    body #footer {
        padding-bottom: 76px;
    }

    /* в строке статуса на главной разделитель-палочка остаётся «висеть» при переносе: на узких экранах он не нужен */
    .hero-status-bar .status-divider {
        display: none;
    }

    #discord .content .buttons {
        flex-direction: column;
        align-items: stretch;
        width: min(100%, 320px);
    }

    #discord .content .buttons > a {
        justify-content: center;
        text-align: center;
    }
}

/* --- 10. Кнопка «Копировать IP»: сообщение о копировании на самой кнопке --- */
/* отдельная строка «IP успешно скопирован!» больше не используется: она сдвигала страницу */
.ip-copied {
    display: none !important;
}

.copy-ip {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sheet .copy-ip.copied,
.copy-ip.copied {
    background: #2F6B3A !important;
    border-color: #8FD698 !important;
    color: #F3EEE2 !important;
}

.sheet .copy-ip.copy-error,
.copy-ip.copy-error {
    -webkit-user-select: all;
    user-select: all;
    background: #6E1828 !important;
    border-color: #E07C8A !important;
    color: #F6C6CD !important;
}

/* --- 11. Копирование IP из навигации и из шапки внутренних страниц --- */
.nav-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--glass-gold);
    border-radius: 999px;
    background: rgba(240, 199, 94, 0.12);
    color: var(--main-color);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.nav-copy:hover,
.nav-copy:focus-visible {
    background: rgba(240, 199, 94, 0.22);
}

.nav-copy svg,
.hero-ip svg {
    flex: none;
    width: 16px;
    height: 16px;
}

/* на компьютере кнопка последняя в списке ссылок, на телефоне - значок рядом с гамбургером */
.nav-copy--mobile {
    display: none;
}

@media (max-width: 960px) {
    .nav-copy--desktop {
        display: none;
    }

    .nav-copy--mobile {
        display: inline-flex;
        margin-left: auto;
        margin-right: 12px;
        padding: 9px 11px;
    }
}

/* IP в шапке внутренних страниц - кнопка-плашка */
button.minecraft-server-ip.hero-ip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

button.minecraft-server-ip.hero-ip:hover,
button.minecraft-server-ip.hero-ip:focus-visible {
    border-color: var(--glass-gold);
    background: rgba(27, 27, 27, 0.88);
}

button.minecraft-server-ip.hero-ip.copied {
    background: #2F6B3A !important;
    color: #F3EEE2 !important;
}

/* единая обводка фокуса для кнопок и ссылок */
.copy-ip:focus-visible,
.nav-copy:focus-visible,
.sheet a:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

/* --- 12. Единая система: карточки, кнопки, статус, «читать дальше», фокус и движение --- */

/* 12.1 Карточки: тонкая светлая рамка и лёгкая заливка вместо чёрных прямоугольников */
.sheet .accordion-item,
.sheet #faq .content .accordion .accordion-item,
.sheet #donate .donate-note,
.sheet #vote .content .links .link,
.sheet #admin-team .group {
    background: var(--card-bg);
    border: 1px solid var(--card-line);
    border-radius: var(--r-card);
    box-shadow: none;
}

.sheet .accordion-item-header {
    background: none;
}

.sheet .accordion-item-body-content {
    background: rgba(255, 255, 255, 0.02);
}

/* карточки тарифов: цветная полоса сверху остаётся, остальные стороны - общая рамка */
.sheet #donate .tier {
    background: var(--card-bg);
    border-right: 1px solid var(--card-line);
    border-bottom: 1px solid var(--card-line);
    border-left: 1px solid var(--card-line);
    border-radius: var(--r-card);
    box-shadow: none;
}

.sheet #vote .content .links .url:hover .link,
.sheet #vote .content .links .url:focus-visible .link {
    background: rgba(255, 255, 255, 0.07);
}

/* 12.2 Кнопки: три вида и один радиус.
   основная - тёмно-оранжевая (блок 9), контурная - ниже, золотая - «Копировать IP» в шапке главной и в навигации */
.sheet .copy-ip,
.sheet a.join-discord,
.sheet #contacts form button[type="submit"],
a.join-telegram,
#header .content .left .buttons .copy-ip,
#header .content .left .buttons .how-to-join,
.nav-copy,
#discord .join-discord {
    border-radius: var(--r-btn) !important;
    min-height: 44px;
    font-size: 16px;
    font-weight: 600;
    transition-duration: 0.15s;
}

a.join-telegram,
#header .content .left .buttons .how-to-join {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(216, 208, 193, 0.35) !important;
    color: #F5F0E4 !important;
}

a.join-telegram:hover,
#header .content .left .buttons .how-to-join:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    opacity: 1;
}

.nav-copy {
    min-height: 0;
    border-radius: 999px !important;
}

/* 12.3 Статус сервера: красная точка, когда сервер недоступен или выключен */
.status-pill.is-down .pulse-dot {
    background-color: #E5484D;
    animation: none;
    box-shadow: none;
}

/* 12.5 Фокус с клавиатуры: одна золотая обводка на всём сайте */
body a:focus-visible,
body button:focus-visible,
body [tabindex]:focus-visible,
body summary:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

/* 12.6 Движение: людям с настройкой «уменьшить движение» отключаем плавную прокрутку, пульсацию и переходы */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- 7. Печать и доступность --- */
@media (forced-colors: active) {
    body::before {
        display: none;
    }

    .sheet::before,
    body .navbar::before,
    body #footer::before {
        background: Canvas;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid CanvasText;
    }
}

@media print {
    html,
    body {
        background: #fff !important;
    }

    body::before,
    .sheet::before,
    body .navbar::before,
    body #footer::before,
    body #header .content::before {
        display: none !important;
    }

    .side-jump,
    .to-top,
    .skip-link,
    .navbar .menu-mobile .hamburger {
        display: none !important;
    }

    .sheet {
        margin: 0 !important;
        max-width: none;
    }

    body #header {
        padding-bottom: 0;
    }

    body {
        display: block;
        min-height: 0;
    }

    .accordion-item-body {
        max-height: none !important;
    }

    body,
    body * {
        color: #000 !important;
        background: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }
}

/* у полей формы в contact.css снята обводка, поэтому ставим заметный фокус сами */
.sheet input:focus-visible,
.sheet textarea:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

/* строка «Сейчас в команде: N человек» в шапке «Команды сервера» лежит прямо на картинке */
#header .description .at-total {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 16px rgba(0, 0, 0, 0.95);
}

/* свёрнутое мобильное меню целиком не принимает нажатий: невидимый список не должен перехватывать касания над содержимым страницы */
@media (max-width: 960px) {
    body .navbar:not(.active) .links {
        pointer-events: none;
    }
}