* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Акцент и «успех» те же, что были: #ff003c и #27ae60. Изменились фон и
       границы — вместо кроваво-красного контура мягкие тёмные плоскости. */
    --primary-color: #ff003c;
    --secondary-color: #2f2632;
    --accent-color: #ff3d63;
    --success-color: #27ae60;
    --success-hover: #2ecc71;
    --bg-dark: #0f0c11;
    --bg-card: #1a151c;
    --text-primary: #f5f2f6;
    --text-secondary: #b8b0bc;
    --border-color: #3a2f3c;
    --hover-color: #ff3d63;

    /* Слои поверх фона: строка таблицы, наведение, разделитель, третичный
       текст. Ими же питается duels.css — палитра описана здесь одна на всех. */
    --panel: #1a151c;
    --panel-2: #241d27;
    --panel-3: #2f2632;
    --line: #3a2f3c;
    --text-mute: #7f7686;
    --danger-color: #ff3355;
    /* Шестнадцать цветов Minecraft — константа игры, а не наш выбор. Здесь они
       объявлены один раз: до этого те же значения были переписаны руками в
       разметке трижды (панель кодов RU, панель EN, легенда в магазине).
       Разбор текста в js/utils/mc-text.js держит свою копию — она нужна, чтобы
       красить куски пользовательской строки на лету. */
    --mc-0: #000000;
    --mc-1: #0000AA;
    --mc-2: #00AA00;
    --mc-3: #00AAAA;
    --mc-4: #AA0000;
    --mc-5: #AA00AA;
    --mc-6: #FFAA00;
    --mc-7: #AAAAAA;
    --mc-8: #555555;
    --mc-9: #5555FF;
    --mc-a: #55FF55;
    --mc-b: #55FFFF;
    --mc-c: #FF5555;
    --mc-d: #FF55FF;
    --mc-e: #FFFF55;
    --mc-f: #FFFFFF;

    --gold: #ffd166;
    --silver: #cbd5e1;
    --bronze: #d08c60;
    --warning-color: #e0a44a;
    --info-color: #5aa9e6;

    /* Радиусы и тень — одни на весь сайт, чтобы карточки не разъезжались. */
    --radius-card: 16px;
    --radius-control: 10px;
    --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.3);

    /* Шкала кегля: семь ступеней, вынутых из duels.css — раздела, по которому
       равняется остальной сайт. До неё в файле жило 32 размера, десять из них
       между 10.4px и 13.6px: разницу никто не видел, она означала только, что
       каждый блок верстался заново.

       В пикселях и намеренно: высоты строк и капсул тут всё равно жёсткие,
       а смесь rem и px не даёт увидеть шкалу глазами прямо в коде. */
    --fs-label: 11px;
    --fs-note: 12.5px;
    --fs-cell: 14px;
    --fs-body: 15px;
    --fs-card: 17px;
    --fs-section: 22px;
    --fs-page: 30px;

    /* Шаг отступов, кратный четырём. Новых значений не заводить: если блоку
       не хватает шага, он свёрстан неправильно, а не нуждается в 26px. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    --c-bg: #0f0c11;
    --c-red-neon: #ff003c;
    --c-red-dark: #3a2f3c;
    --c-grid: rgba(255, 0, 40, 0.08);
}

body {
    font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--c-bg);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
}

/* --- 1. Background: Subtle dark gradient with faint grid --- */
.grid-bg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -2;
    pointer-events: none;
    background:
        /* Сетка и свечение приглушены: на длинных таблицах прежний контраст
           рябил и мешал читать строки. */
        linear-gradient(rgba(255, 0, 60, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 60, 0.02) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 22%, rgba(255, 0, 60, 0.05) 0%, transparent 70%),
        linear-gradient(180deg, #171219 0%, #0f0c11 55%, #0f0c11 100%);
    background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%;
}

/* --- 2. CRT overlay removed --- */
.crt-overlay {
    display: none;
}

/* Когда открыто мобильное/бургер-меню — блокируем скролл страницы */
html.menu-open,
body.menu-open {
    overflow: hidden;
    height: 100%;
}


/* --- УПРАВЛЕНИЕ КУРСОРОМ И ВЫДЕЛЕНИЕМ --- */

/* 1. По умолчанию запрещаем выделение и ставим обычную стрелку */
body {
    -webkit-user-select: none;
    /* Для Safari/Chrome */
    -moz-user-select: none;
    /* Для Firefox */
    -ms-user-select: none;
    /* Для IE/Edge */
    user-select: none;
    /* Стандарт */
    cursor: default;
    /* Всегда показывать стрелку */
}

/* 2. Разрешаем выделение и курсор-текст ТОЛЬКО для контента */
p,
h1,
h2,
h3,
h4,
h5,
h6,
.rule-list li,
input,
textarea,
.selectable-text,
.mc-text-wrapper,
.toast-message {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    cursor: text;
    /* Меняем курсор на "I-beam" (палочку) */
}

/* 3. Убедимся, что на интерактивных элементах курсор — "рука" */
a,
button,
select,
.btn,
.nav-link,
.close {
    cursor: pointer;
}

/* Фокус с клавиатуры (Tab) на ссылках и кнопках нигде не был переопределён —
   там, где он вообще виден, это стандартная синяя рамка браузера, чужая
   палитре сайта. Одно общее правило вместо частных :focus-visible по каждой
   кнопке отдельно; .host и .rank-select-display ниже дублировали именно
   этот же стиль для тех же тегов — дубликаты убраны. */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 4. Особый случай для полей ввода - они должны быть полностью доступны */
input,
textarea {
    cursor: text;
    user-select: text;
}

/* Navigation */
.navbar {
    background: #0b090d;
    padding: var(--sp-3) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

/* Когда открыт десктопный бургер (режим overflow-hidden) — растягиваем навбар на всю высоту экрана */
body.menu-open .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
}

body.menu-open .nav-container {
    align-items: flex-start;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    /* Ровно тот же отступ, что у .main-content, и на телефоне они сужаются
       вместе — иначе логотип стоит не там, где начинается содержимое под ним. */
    padding: 0 var(--sp-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    /* Только по горизонтали: свёрнутое меню-бургер переносится на свою строку,
       и вертикальный зазор раздувал навбар на телефоне до 109px. */
    gap: 0 var(--sp-6);
}

.nav-container>.logo {
    order: 1;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 0;
}

.nav-container>.nav-menu {
    order: 2;
    flex-shrink: 0;
    margin-left: 0;
}

.nav-container>.nav-menu.overflow-hidden {
    order: 3;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 95%;
    min-width: 0;
    flex-basis: 0;
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 95%;
}

.nav-container>.nav-menu.overflow-hidden.active {
    margin-top: var(--sp-4);

    flex-basis: 95%;
}

.nav-container>.hamburger {
    order: 4;
    flex-shrink: 0;
    position: absolute;
    right: 2rem;
    /* По центру строки с логотипом: она 24px, бургер — 17px. */
    top: 4px;
    z-index: 1001;
    margin: 0;
    align-self: flex-start;
}

.nav-container>.hamburger.show {
    order: 3;
    position: absolute;
    right: 2rem;
    /* По центру строки с логотипом: она 24px, бургер — 17px. */
    top: 4px;
    margin: 0;
    align-self: flex-start;
}

/* --- 3. Логотип ----------------------------------------------------------
   Набран тем же пиксельным шрифтом, что ники игроков и адреса серверов, и с
   тенью, как текст в самой игре: копия надписи на один «пиксель» шрифта
   ниже-правее, тёмным тоном (24px — это ровно 3px на пиксель глифа). До этого
   был Courier New с красно-белым глитчем — единственное место на сайте с
   таким шрифтом и тремя бесконечными анимациями.

   Класс остался прежним: его ищет js/i18n/translations.js, а data-text нужен
   сезонной теме (halloween.css рисует по нему свечение). */
.logo {
    display: flex;
    align-items: center;
    position: relative;
}

.logo-text-glitch {
    font-family: 'Minecraft', 'Courier New', monospace;
    font-size: 24px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
    position: relative;
    text-shadow: 3px 3px 0 #6b0019;
    cursor: pointer;
}

.logo-text-glitch::before,
.logo-text-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 1.2rem;
    /* поменьше расстояние между пунктами, чтобы влазило больше */
    align-items: center;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0;
    font-size: var(--fs-cell);
    line-height: 20px;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 7px 14px;
    border-radius: var(--radius-control);
    position: relative;
    display: inline-block;
    text-align: center;
}

/* Подсветка активного пункта — плашкой, а не неоновым подчёркиванием:
   свечение под каждым пунктом спорило с акцентом внутри страницы. */
.nav-link:hover {
    color: var(--text-primary);
    background: var(--panel-2);
}

.nav-link.active {
    color: var(--text-primary);
    background: var(--panel-2);
}

.login-btn {
    background: var(--primary-color);
    border: 0;
    color: #fff !important;
    font-weight: 600;
    padding: 7px 18px !important;
    border-radius: 999px;
}

.login-btn::after {
    display: none;
}

.login-btn:hover {
    background: var(--hover-color);
    color: #fff !important;
}


.user-link {
    background: var(--success-color) !important;
    cursor: pointer;
}

.user-link:hover {
    background: var(--success-hover) !important;
}

.language-selector {
    margin-left: auto;
    position: relative;
}

.language-select {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--panel-2);
    color: var(--text-secondary);
    font-size: var(--fs-cell);
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    position: relative;
    min-width: 60px;
    justify-content: center;
}

.language-select:hover {
    border-color: var(--panel-3);
    background: var(--panel-3);
    color: var(--text-primary);
}

.language-select:active,
.language-select.active {
    border-color: var(--primary-color);
    background: var(--panel-3);
    color: var(--text-primary);
}

.language-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.language-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
    display: block;
    flex-shrink: 0;
}

.language-code {
    font-size: var(--fs-cell);
    letter-spacing: 0.02em;
    font-weight: 600;
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 96px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    overflow: hidden;
}

.language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-option {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--fs-cell);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-family: inherit;
}

.language-option * {
    pointer-events: none;
}

.language-option:last-child {
    border-bottom: none;
}

.language-option:hover {
    background: var(--panel-3);
}

.language-option:active {
    background: var(--panel-3);
}

.language-option .language-flag {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
    display: block;
    flex-shrink: 0;
}

.language-option .language-code {
    font-size: var(--fs-cell);
    letter-spacing: 0.5px;
    font-weight: 600;
    flex: 1;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: var(--sp-1);
}

.hamburger.show {
    display: flex;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 3px;
    transition: transform 0.3s, opacity 0.3s;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Main Content */
.main-content {
    max-width: 1200px;
    margin: var(--sp-5) auto;
    padding: 0 var(--sp-6);
    min-height: calc(100vh - 200px);
    position: relative;
    z-index: 1;
}

.page {
    display: none;
    animation: fadeIn 0.5s;
    position: relative;
    z-index: 1;
}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Заголовок страницы --- */
/* Единственный заголовок страницы на сайте. Был бегущим градиентом в капсе со
   свечением; теперь вес и размер задают иерархию сами, а анимация не отвлекает
   от данных под ним. */
.dashboard-title {
    font-size: var(--fs-page);
    font-weight: 800;
    margin-bottom: 0;
    letter-spacing: -0.025em;
    line-height: 1.15;
    font-family: 'Outfit', 'Segoe UI', sans-serif;
    color: var(--text-primary);
    text-wrap: balance;
}

/* ═══ Первый экран главной ═══════════════════════════════════════════════

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

.hero {
    padding: var(--sp-7) 0 var(--sp-6);
    max-width: 720px;
}

.hero-eyebrow {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: var(--sp-4);
}

/* Единственный крупный кегль на сайте: у витрины должна быть точка входа,
   и ею работает заголовок, а не рамка вокруг него. */
.hero-title {
    font-size: clamp(34px, 6vw, 56px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    text-wrap: balance;
    margin-bottom: var(--sp-4);
}

.hero-lead {
    font-size: var(--fs-card);
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 46ch;
    margin-bottom: var(--sp-6);
}

/* --- Числа о сервере ---------------------------------------------------- */

.hero-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--sp-5);
}

/* Та же строка показателей, но на три числа — в шапке страницы Fastbuilder. */
.hero-facts.facts-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.fact-n {
    display: block;
    font-size: var(--fs-section);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fact-of {
    font-size: var(--fs-cell);
    font-weight: 500;
    color: var(--text-mute);
}

.fact-l {
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
    line-height: 1.35;
}

/* --- Адрес сервера ------------------------------------------------------ */

/* Копирует вся плашка целиком, а не иконка размером с ноготь: это главное
   действие первого экрана, и промахнуться по нему нельзя. */
/* Адрес сервера — единственное, ради чего сюда приходят в первый раз, и
   обрезать его нельзя. На адрес в карточке остаётся её ширина минус 155px
   (флаг, пинг, кнопка копирования, отступы), а самому адресу нужно 189 —
   то есть карточке не меньше 344. Рядом их две, и в отведённые герою 720px
   они помещаются впритык; когда окно уже, auto-fit роняет их в колонку сам.
   Раньше здесь стояли жёсткие две колонки, и на окне 708px карточка сжималась
   до 325px — адрес превращался в «deu.weakestw…». */
.hero-connect {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(352px, 100%), 1fr));
    gap: var(--sp-3);
}

.host {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.host:hover {
    background: var(--panel-3);
    border-color: var(--primary-color);
}

.host-flag {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
}

.host-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.host-label {
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.host-ip {
    font-family: 'Minecraft', 'Courier New', monospace;
    font-size: var(--fs-card);
    letter-spacing: 0.5px;
    line-height: 1.3;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.host-copy {
    width: 16px;
    height: 16px;
    color: var(--text-mute);
    flex: none;
}

.host:hover .host-copy {
    color: var(--text-primary);
}

.hero-hint {
    margin-top: var(--sp-3);
    font-size: var(--fs-note);
    color: var(--text-mute);
}

.hero-reserve {
    margin-top: var(--sp-2);
    font-size: var(--fs-note);
}

.hero-reserve summary {
    color: var(--text-mute);
    cursor: pointer;
}

.hero-reserve summary:hover {
    color: var(--text-primary);
}

.hero-reserve .hero-hint {
    margin: var(--sp-2) 0 var(--sp-3);
}

.hero-reserve .host-flag {
    color: var(--text-mute);
}

/* --- Во что играть ------------------------------------------------------ */

.home-block {
    margin-top: var(--sp-6);
}

.block-title {
    display: block;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: var(--sp-3);
}

/* Два занятия, и они не равнозначны. Fastbuilder занимает две трети ширины
   не для красоты: за тридцать дней он собирает в пятнадцать раз больше
   забегов, чем дуэли — матчей, и витрина обязана это показывать. */
.plays {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-3);
    align-items: start;
}

.play {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.play-main:hover,
.play:hover {
    background: var(--panel-3);
    border-color: var(--primary-color);
}

.play-name {
    font-size: var(--fs-card);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-decoration: none;
}

.play-main .play-name {
    font-size: var(--fs-section);
}

.play-facts {
    font-size: var(--fs-cell);
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

.play-note {
    font-size: var(--fs-cell);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Названия режимов — просто перечень: сюда идут те, кому нужен конкретный. */
.play-modes {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-2);
    font-size: var(--fs-note);
}

.play-modes a {
    color: var(--text-secondary);
    text-decoration: none;
}

.play-modes a:hover {
    color: var(--primary-color);
}

.play-modes .sep {
    color: var(--text-mute);
}

/* --- Частые вопросы -----------------------------------------------------
   Список раскрывашек одной колонкой: ответы короткие, читать их удобнее
   строкой не шире 70 знаков. */

.faq-list {
    max-width: 760px;
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    color: var(--text-mute);
    font-weight: 400;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item summary:hover,
.faq-item summary:hover::after {
    color: var(--primary-color);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.faq-item p {
    max-width: 70ch;
    padding-bottom: var(--sp-4);
    font-size: var(--fs-cell);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* --- Шапка графика ------------------------------------------------------ */

.chart-head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
}

.chart-peak {
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.chart-peak b {
    font-size: var(--fs-card);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    margin-left: var(--sp-1);
}

@media (max-width: 900px) {
    .hero-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4) var(--sp-3);
    }

    .plays {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .hero {
        padding: var(--sp-6) 0 var(--sp-5);
    }
}

/* --- Dashboard Grid --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    width: 100%;
    margin-top: var(--sp-6);
}

.dash-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
    position: relative;
    transition: background 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.dash-card:hover {
    background: var(--panel-2);
}

.dash-card h3 {
    font-size: var(--fs-card);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--sp-4);
}

/* Connect Card */


/* «Смотреть забег» в строке топа — вход в Replay Studio для тех, кто не знает
   про /viewer в игре. Ведёт на /r/<id>, аккаунт не нужен. */
.watch-replay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
    border-radius: 4px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 0, 60, 0.25);
    font-size: var(--fs-label);
    text-decoration: none;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.watch-replay-btn:hover {
    color: var(--primary-color);
    background: rgba(255, 0, 60, 0.14);
    border-color: var(--primary-color);
}

.location-ping {
    font-size: var(--fs-note);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

.ping-good {
    color: var(--success-color);
    font-weight: 600;
}

.ping-ok {
    color: var(--warning-color);
}

.ping-bad {
    color: var(--primary-color);
}


/* Online Card */
.dash-card-online {
    justify-content: flex-start;
    min-height: 220px;
}

.online-chart-canvas {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 72%;
    z-index: 1;
    pointer-events: none;
}

/* --- Строка показателей --------------------------------------------------

   Три числа одной строкой. До этого «Всего часов» занимала отдельную карточку
   размером с топ игроков — ради одного числа, а «Онлайн» стояла на такой же
   карточке рядом. */

.stat-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    width: 100%;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

/* Строчный бокс, а не флексбокс: число и «/100» делят одну базовую линию сами,
   а флексбокс с align-items: baseline поставил бы группу к верху блока. */
.stat-value {
    font-size: var(--fs-page);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


.online-pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #27ae60;
    box-shadow: 0 0 6px rgba(39, 174, 96, 0.9);
    animation: pulse-dot 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px rgba(39, 174, 96, 0.9); }
    50% { transform: scale(1.5); opacity: 0.65; box-shadow: 0 0 14px rgba(39, 174, 96, 0.45); }
}


/* Top Players Card */
.dash-card-top {
    min-height: 220px;
}

/* Список идёт одним блоком без зазоров и с чередованием строк — та же
   раскладка, что у таблицы лидеров в дуэлях: список читается как список. */
.top-players-list {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-control);
    overflow: hidden;
}

.top-player-entry {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    background: var(--panel-2);
    padding: 10px var(--sp-4);
}

.top-player-entry:nth-child(even) {
    background: rgba(36, 29, 39, 0.55);
}

.top-player-entry:hover {
    background: var(--panel-3);
}

.top-player-pos {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.top-player-pos.g1 { color: var(--gold); }
.top-player-pos.g2 { color: var(--silver); }
.top-player-pos.g3 { color: var(--bronze); }

.top-player-name {
    font-size: var(--fs-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.top-player-hours {
    color: var(--text-secondary);
    font-size: var(--fs-cell);
    font-variant-numeric: tabular-nums;
}

/* Все служебные сообщения списков — одним правилом: «загрузка», «пусто»,
   «ошибка». .empty-state и .loading-text стояли в разметке без единого
   правила в CSS и выглядели обычным абзацем. */
.top-player-empty,
.empty-state,
.loading-text,
.list-msg {
    color: var(--text-mute);
    text-align: center;
    padding: var(--sp-5) 0;
    font-size: var(--fs-cell);
}

.list-msg.is-error {
    color: var(--danger-color);
}

/* Правая часть строки: номер реплея, кнопка просмотра, результат. */
.row-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.replay-id {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: var(--fs-note);
    color: var(--text-mute);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: color 0.15s ease;
}

/* Когда рекорд поставлен. На узком экране уступает место времени и кнопкам. */
.record-date {
    font-size: var(--fs-note);
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .record-date {
        display: none;
    }
}

.replay-id:hover {
    color: var(--text-primary);
}

.top-player-hours.lead {
    color: var(--primary-color);
    font-weight: 600;
}

.rank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--fs-cell);
}

.rank-row strong {
    color: var(--text-primary);
}

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

.fb-only-verified {
    font-size: var(--fs-label);
    font-weight: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--success-color);
    border: 1px solid rgba(39, 174, 96, 0.4);
    background: rgba(39, 174, 96, 0.1);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    vertical-align: 0.15em;
    white-space: nowrap;
}

.fb-picker {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.fb-cats,
.fb-arenas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fb-arenas {
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fb-cat,
.fb-arena {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font: inherit;
    font-size: var(--fs-note);
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.fb-cat:hover,
.fb-arena:hover {
    color: var(--text-primary);
    border-color: var(--primary-color);
}

.fb-cat.on,
.fb-arena.on {
    color: var(--text-primary);
    border-color: var(--primary-color);
    background: rgba(255, 0, 60, 0.14);
}

.fb-arena {
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
}

/* дистанция и счётчик — второстепенные, но выравненные по колонкам */
.fb-arena .fb-dist,
.fb-cat .fb-n,
.fb-arena .fb-n {
    font-size: var(--fs-label);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.fb-arena.on .fb-dist,
.fb-arena.on .fb-n,
.fb-cat.on .fb-n {
    opacity: 1;
}

.fb-picker-msg {
    font-size: var(--fs-note);
    color: var(--text-secondary);
    font-style: italic;
}

/* Dashboard Responsive */
@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.extended-stats-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

/* Заголовок карточки, у которого справа стоит служебная приписка: счётчик до
   обновления, подсказка. Раньше раскладка задавалась инлайн-стилем в разметке. */
.card-head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.card-head-note {
    font-size: var(--fs-note);
    font-weight: 400;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Переход в раздел из шапки карточки. Подчёркивание только под курсором:
   в ряду с заголовком постоянная линия читается как ошибка вёрстки. */
.card-head-link {
    font-size: var(--fs-note);
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    white-space: nowrap;
}

.card-head-link:hover {
    text-decoration: underline;
}

.user-rank-display {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}

.updates-section {
    margin-top: var(--sp-6);
}

.updates-section h2 {
    font-size: var(--fs-section);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-4);
}

/* Одна колонка: записи — длинные списки изменений, в плитку они не ложатся. */
.updates-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

.update-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
    transition: background 0.2s ease;
    position: relative;
}

.update-card:hover {
    background: var(--panel-2);
}

.update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-4);
}

.update-date {
    color: var(--text-secondary);
    font-size: var(--fs-cell);
}

.update-tag {
    background: var(--primary-color);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: var(--fs-note);
}

.update-card h3 {
    margin-bottom: 0.8rem;
    color: var(--primary-color);
}

.update-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Шапка страницы --- */
/* Заголовок страницы один на весь сайт — .dashboard-title. Здесь только
   отбивка: правило .page-header h2 (0,1,1) перебивало .dashboard-title (0,1,0),
   и Правила, Персонал, Магазин и Аккаунт оставались с бегущим градиентом,
   капсом и свечением, пока Главная и Дуэли были уже плоскими. */
.page-header {
    margin-bottom: var(--sp-5);
}

.page-header p {
    color: var(--text-secondary);
    font-size: var(--fs-body);
    margin-top: var(--sp-1);
}

.rules-container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.rule-category {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
    transition: background 0.2s ease;
}

.rule-category h3 {
    color: var(--text-primary);
    font-size: var(--fs-card);
    font-weight: 600;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
}

/* Пояснение под полем формы. */
.field-hint {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-note);
    line-height: 1.45;
    color: var(--text-mute);
}

.rule-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rule-list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--sp-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-cell);
    line-height: 1.55;
}

.rule-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rule-num {
    font-size: var(--fs-note);
    font-weight: 600;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

/* Срок наказания за раздел: не пункт правил, номера у него нет — поэтому
   строка идёт во всю ширину, без колонки под номер. */
.rule-list li.rule-penalty {
    display: block;
    margin-top: var(--sp-2);
    border-bottom: none;
    color: var(--text-mute);
    font-size: var(--fs-note);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Staff Page */
.staff-container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* Название группы — разделитель, а не заголовок: под ним и так подписана
   роль каждого человека. Раньше это был текст в 1.8rem по центру. */
.staff-category h3 {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: var(--sp-3);
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-3);
}

/* Строка, а не плитка: голова слева, всё остальное справа. Прежняя раскладка
   (плитка от 250px, текст по центру, аватар кеглем 4rem) занимала весь экран
   под пятерых человек. */
.staff-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4);
    transition: background 0.2s ease;
}

.staff-card:hover {
    background: var(--panel-2);
}

/* Голова вырезается из самого скина игрока средствами CSS — картинка никуда
   не пересобирается. Лицо лежит квадратом 8×8 в точке (8,8), «шляпа» — в
   (40,8). Ширина фона привязана к 64px скина и умножена на 6 (48 / 8), высота
   auto: старые скины 64×32, новые 64×64, но лицо и шляпа в обоих на месте. */
.staff-head {
    display: block;
    width: 48px;
    height: 48px;
    background-image: var(--skin), var(--skin);
    background-repeat: no-repeat;
    background-size: 384px auto;
    background-position: -240px -48px, -48px -48px;
    background-color: var(--panel-3);
    border-radius: 6px;
    image-rendering: pixelated;
}

.staff-head.is-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    font-size: 24px;
    line-height: 1;
}

.staff-body {
    min-width: 0;
}

.staff-name-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    margin-bottom: var(--sp-1);
}

.staff-name {
    font-family: 'Minecraft', monospace;
    letter-spacing: 0.5px;
    font-size: var(--fs-body);
    font-weight: normal;
    line-height: 1.3;
    color: var(--text-primary);
}

.staff-role {
    font-size: var(--fs-note);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.staff-description {
    color: var(--text-secondary);
    font-size: var(--fs-cell);
    line-height: 1.5;
}

/* Admin Page */
.admin-container {
    padding: 0;
}

.admin-section {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.admin-section h3 {
    color: var(--text-primary);
    font-size: var(--fs-card);
    font-weight: 600;
    margin-bottom: var(--sp-4);
}

.admin-list {
    margin-top: var(--sp-4);
}

/* Строка показателей внутри блока админки: та же, что на главной, только
   колонок две и отбита снизу. Раньше «Общая выручка» была карточкой во всю
   ширину экрана, нарисованной инлайн-стилями прямо в разметке. */
.admin-stats {
    margin-bottom: var(--sp-4);
}

/* Длинная история прокручивается внутри блока, а не растягивает страницу. */
#admin-history-container {
    max-height: 420px;
    overflow-y: auto;
}

/* === Announcements / Tips management cards === */
.admin-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}
.admin-section__head h3 {
    margin: 0;
}
.btn-add {
    padding: 0.55rem 1.2rem;
    font-size: var(--fs-cell);
}

.announcement-card {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: var(--sp-4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.announcement-card:hover {
    border-color: var(--panel-3);
    background: var(--panel-3);
    transform: translateY(-1px);
}
.announcement-card.is-disabled {
    opacity: 0.6;
    border-left-color: #4a4a55;
}

.announcement-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.announcement-card__title {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--text-primary);
    min-width: 0;
}
.announcement-card__title .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.announcement-card__id {
    color: var(--text-secondary);
    font-size: var(--fs-note);
    font-weight: 500;
    font-family: 'Consolas', monospace;
    flex: 0 0 auto;
}

/* status pill */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 0 0 auto;
    white-space: nowrap;
}
.status-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.status-pill.on {
    background: rgba(39, 174, 96, 0.14);
    color: #4ade80;
    border: 1px solid rgba(39, 174, 96, 0.4);
}
.status-pill.off {
    background: rgba(255, 255, 255, 0.05);
    color: #9aa0ad;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* meta tags */
.announcement-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.55rem;
    border-radius: 6px;
    font-size: var(--fs-label);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    color: #cdd2dc;
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}
.tag--id {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: 'Consolas', monospace;
}
.tag--trigger {
    background: rgba(80, 140, 255, 0.16);
    color: #9db8ff;
    border-color: rgba(80, 140, 255, 0.3);
}
.tag--server {
    background: rgba(120, 200, 120, 0.14);
    color: #a8e0a8;
    border-color: rgba(120, 200, 120, 0.25);
}
.tag--interval {
    background: rgba(255, 170, 0, 0.13);
    color: #ffcf70;
    border-color: rgba(255, 170, 0, 0.25);
}
.tag--cooldown {
    background: rgba(120, 200, 255, 0.12);
    color: #9cd6ff;
    border-color: rgba(120, 200, 255, 0.22);
}
.tag--once {
    background: rgba(200, 130, 255, 0.13);
    color: #d3a6ff;
    border-color: rgba(200, 130, 255, 0.25);
}

/* text previews side by side */
.announcement-texts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.announcement-text {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 0.55rem 0.65rem;
    min-width: 0;
}
.announcement-text__label {
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
.announcement-text .mc-text-wrapper {
    font-size: var(--fs-body);
    line-height: 1.5;
    word-break: break-word;
}

/* action bar */
.announcement-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.85rem;
}
.announcement-card__actions .btn {
    width: auto;
    padding: 0.45rem 1rem;
    font-size: var(--fs-note);
    letter-spacing: 0.5px;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .announcement-texts {
        grid-template-columns: 1fr;
    }
    .announcement-card__actions {
        justify-content: stretch;
    }
    .announcement-card__actions .btn {
        flex: 1 1 auto;
    }
}

.admin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-4);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    margin-bottom: var(--sp-4);
    border: 1px solid var(--border-color);
}

.admin-item-content h4 {
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}

.admin-item-content p {
    color: var(--text-secondary);
    font-size: var(--fs-cell);
}

.admin-item-actions {
    display: flex;
    gap: var(--sp-2);
}

.btn-small {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-cell);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.btn-edit {
    background: var(--success-color);
    color: white;
}

.btn-edit:hover {
    background: var(--success-hover);
}

.btn-delete {
    background: var(--accent-color);
    color: white;
}

.btn-delete:hover {
    background: var(--primary-color);
}

.btn-danger {
    background: var(--accent-color);
    color: white;
    width: 100%;
}

.btn-danger:hover {
    background: var(--primary-color);
}

/* --- Таблица истории покупок --------------------------------------------

   Одна на аккаунт и на админку. До этого у .history-table не было ни одного
   правила: таблица рисовалась браузером по умолчанию, а классы статуса на
   ячейках не были описаны нигде. */

.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-control);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-cell);
    white-space: nowrap;
}

.history-table th {
    padding: 0 var(--sp-3) 10px;
    text-align: left;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.history-table td {
    padding: 10px var(--sp-3);
    color: var(--text-secondary);
    vertical-align: middle;
}

.history-table tbody tr {
    background: var(--panel-2);
}

.history-table tbody tr:nth-child(even) {
    background: rgba(36, 29, 39, 0.55);
}

.history-table tbody tr:hover {
    background: var(--panel-3);
}

/* Состояние платежа — плашкой: в таблице из пяти колонок цвет находится
   быстрее, чем читается слово. */
.st {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-note);
    font-weight: 600;
}

.st-success {
    color: var(--success-color);
    background: rgba(39, 174, 96, 0.14);
}

.st-pending {
    color: var(--warning-color);
    background: rgba(224, 164, 74, 0.14);
}

.st-error {
    color: var(--danger-color);
    background: rgba(255, 51, 85, 0.14);
}

/* Account Page */
.account-container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 820px;
}

/* Подзаголовок внутри карточки: раньше «Смена пароля» и кнопка выхода жили
   каждая в своей карточке, хотя в них по одному полю. */
.section-sub {
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-card);
    font-weight: 600;
    color: var(--text-primary);
}

.account-foot {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}

.account-section {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
}

.account-section h3 {
    color: var(--text-primary);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-card);
    font-weight: 600;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
}

/* Кнопка правки email должна оставаться справа, поэтому строка не переносится. */
.info-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
    width: 100%;
    overflow: hidden;
}

.info-item:last-child {
    border-bottom: none;
}

/* Ширина подписи фиксирована, чтобы значения выстроились в колонку. */
.info-item .info-label {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--fs-cell);
    width: 150px;
    flex-shrink: 0;
}

.info-item .info-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--fs-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: auto;
    /* Push any items after this to the right */
    padding-right: var(--sp-4);
    flex: 1 1 auto;
    /* Can shrink, can grow */
    min-width: 0;
    /* Critical for text-overflow to work in flexbox */
}

.btn-icon {
    background: var(--panel-2);
    border: 0;
    cursor: pointer;
    color: var(--text-mute);
    padding: 6px 10px;
    border-radius: var(--radius-control);
    transition: background 0.3s, color 0.3s;
    margin-left: 0;
    flex: 0 0 auto;
    /* Never shrink or grow, exact size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.btn-icon:hover {
    background: var(--panel-3);
    color: var(--text-primary);
}

/* Email editing form */
#email-edit-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-5) 0;
    margin-top: var(--sp-2);
    border-bottom: 1px solid rgba(255, 0, 60, 0.2);
}

.form-input-inline {
    flex: 1;
    min-width: 250px;
    padding: 10px 14px;
    border-radius: var(--radius-control);
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.form-input-inline:focus {
    border-color: var(--primary-color);
}

/* Small buttons */
.btn-sm {
    padding: 0.35rem 0.9rem;
    font-size: var(--fs-note);
    border-radius: 999px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    font-weight: 600;
}

.btn-sm.btn-primary {
    background: var(--primary-color);
    color: #fff;
    border: 0;
}

.btn-sm.btn-primary:hover {
    background: var(--hover-color);
}

.btn-sm.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-sm.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.btn-sm.btn-danger {
    background: rgba(255, 0, 60, 0.15);
    color: white;
    width: auto;
    border: 1px solid var(--accent-color);
    box-shadow: inset 0 0 10px rgba(255, 0, 60, 0.1);
}

.btn-sm.btn-danger:hover {
    background: var(--primary-color);
    box-shadow: 0 0 15px rgba(255, 0, 60, 0.4);
}

/* Purchase action buttons in table */
.purchase-pay-btn,
.purchase-cancel-btn {
    margin: 2px 4px;
}

/* Registration instruction steps */
.register-instructions {
    padding: var(--sp-4) 0;
}

.instruction-steps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.instruction-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--sp-3) var(--sp-4);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    font-weight: bold;
    font-size: var(--fs-cell);
    flex-shrink: 0;
}

.instruction-step span:last-child {
    color: #ddd;
    font-size: var(--fs-body);
}

.register-instructions code {
    background: rgba(124, 58, 237, 0.2);
    color: var(--primary-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: var(--fs-body);
}


/* Предпросмотр рассылки: ширина в 55ch повторяет ширину чата Minecraft 1.8,
   тень под буквами — его же способ рисовать текст. */
.mc-preview {
    background: rgba(0, 0, 0, 0.5);
    padding: var(--sp-2);
    border-radius: 4px;
    min-height: 24px;
    width: 55ch;
    max-width: 100%;
    font-size: var(--fs-cell);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Minecraft', 'Minecraftia', Arial, sans-serif;
    font-style: normal;
    line-height: 1.2;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
}

.preview-label {
    margin-top: var(--sp-2);
    font-size: var(--fs-cell);
    color: var(--text-secondary);
}

/* --- Редактор рассылок и формы в модальных окнах ------------------------ */

/* Панель кодов форматирования. Раньше каждая из сорока кнопок несла свой
   style, и всё это стояло в разметке дважды — для русского текста и для
   английского. */
.announcement-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}

.announcement-toolbar .btn {
    padding: 2px 6px;
    font-size: var(--fs-note);
    line-height: 1.5;
    min-width: 0;
}

.announcement-toolbar .fmt-l { font-weight: bold; }
.announcement-toolbar .fmt-o { font-style: italic; }
.announcement-toolbar .fmt-n { text-decoration: underline; }
.announcement-toolbar .fmt-m { text-decoration: line-through; }

/* Подпись поля с органами управления справа. */
.field-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.field-head label {
    margin: 0;
}

.field-head-tools {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.input-mini {
    padding: 2px 6px;
    font-size: var(--fs-note);
    height: 24px;
    width: 100px;
    min-height: unset;
}

.btn-mini {
    padding: 2px 6px;
    font-size: var(--fs-note);
    line-height: 1.5;
}

/* Текст рассылки правят с кодами форматирования — моноширинный шрифт и
   сохранение пробелов тут не украшение, а условие читаемости. */
.input-code {
    width: 100%;
    font-family: 'Consolas', ui-monospace, monospace;
    white-space: pre;
    overflow-x: auto;
    min-height: 150px;
    max-height: 500px;
    resize: both;
}

.form-grid {
    display: grid;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Поля внутри сетки отбивает сама сетка. */
.form-grid .form-group {
    margin: 0;
}

.row-gap {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}


/* Точнее .modal-content (объявлен ниже с теми же свойствами и тем же весом
   селектора) — без этого модификатор проигрывал ему по порядку в файле, и
   «широкие» модалки (обновление, рассылка) рендерились как обычные 600px:
   у рассылки трёхколоночные сетки переносили слова и обрезали текст. */
.modal-content.modal-wide {
    max-width: 800px;
    width: 95%;
}

@media (max-width: 640px) {
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    pointer-events: none;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: var(--sp-4) var(--sp-5);
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    animation: slideInRight 0.3s ease-out;
    pointer-events: auto;
    position: relative;
}

.toast.success {
    border-left: 4px solid var(--success-color);
}

.toast.error {
    border-left: 4px solid var(--accent-color);
}

.toast.info {
    border-left: 4px solid var(--primary-color);
}

.toast.warning {
    border-left: 4px solid #f39c12;
}

.toast-icon {
    font-size: var(--fs-section);
    flex-shrink: 0;
}

.toast-icon svg {
    display: block;
    width: 1.4em;
    height: 1.4em;
}

.toast.success .toast-icon {
    color: var(--success-color);
}

.toast.error .toast-icon {
    color: var(--accent-color);
}

.toast.info .toast-icon {
    color: var(--primary-color);
}

.toast.warning .toast-icon {
    color: #f39c12;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
    font-size: var(--fs-body);
}

.toast-message {
    color: var(--text-secondary);
    font-size: var(--fs-cell);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--fs-section);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOutRight 0.3s ease-out forwards;
}

/* Confirmation Modal */
.confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.confirm-modal.show {
    display: flex;
}

.confirm-modal-content {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: 1.8rem;
    max-width: 450px;
    width: 90%;
    animation: slideUp 0.3s ease-out;
    text-align: center;
}

.confirm-modal-icon {
    margin-bottom: var(--sp-4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirm-modal-icon svg {
    width: 3rem;
    height: 3rem;
    color: var(--accent-color);
}

#confirm-icon.confirm-icon-warning svg {
    color: #f39c12;
}

.confirm-modal-content h3 {
    color: var(--text-primary);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-section);
    font-weight: 600;
}

.confirm-modal-content p {
    color: var(--text-secondary);
    margin-bottom: var(--sp-6);
    font-size: var(--fs-body);
    line-height: 1.6;
}

.confirm-modal-buttons {
    display: flex;
    gap: var(--sp-4);
    justify-content: center;
}

.confirm-modal-buttons .btn {
    min-width: 120px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    margin: 5% auto;
    padding: 1.8rem;
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content h2 {
    color: var(--primary-color);
    margin-bottom: var(--sp-5);
}

.close {
    color: var(--text-secondary);
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    font-size: var(--fs-section);
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
}

.close:hover,
.close:focus {
    color: var(--text-primary);
}

/* Payment modal – more structured and less “flat” */
#payment-modal .modal-content {
    padding: 2.4rem 2.8rem 2.2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

#payment-modal h2 {
    margin: 0;
    font-size: var(--fs-section);
    letter-spacing: 0.04em;
}

#payment-modal p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

#payment-modal .payment-buttons {
    margin-top: 0.8rem;
    display: flex;
    justify-content: center;
    gap: var(--sp-4);
}

#payment-modal .payment-buttons .btn {
    min-width: 150px;
}

@media (max-width: 540px) {
    #payment-modal .modal-content {
        padding: 2rem 1.6rem 1.8rem;
        gap: var(--sp-4);
    }

    #payment-modal .payment-buttons {
        flex-direction: column;
    }

    #payment-modal .payment-buttons .btn {
        width: 100%;
    }
}

/* Поле формы — один набор стилей на input/select/textarea. До этого select
   и textarea красились в rgba(0,0,0,.5) с радиусом 8px, а input рядом в той
   же форме — в var(--panel-2) с var(--radius-control, 10px): в модалке
   персонала (имя → ранг → описание) три соседних поля выходили заметно
   разных оттенков. */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--panel-2);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Auth Pages */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--sp-6) 0;
}

.auth-box {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
}

.auth-box.hidden {
    display: none;
}

.auth-box h2 {
    text-align: center;
    margin-bottom: var(--sp-6);
    color: var(--primary-color);
    font-size: var(--fs-section);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.form-group label {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Fix browser autofill styling overriding dark mode */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--panel-2) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
    border: 1px solid var(--line) !important;
    outline: none !important;
}

.form-group-button {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
}

.form-group-button .btn {
    width: 100%;
}

/* Чекбокс с подписью — раньше это был только .gift-toggle в магазине, а
   рассылка в админке ставила тот же чекбокс инлайн-стилями и без
   accent-color: он выходил родным синим на красной палитре сайта. */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: var(--fs-body);
    color: var(--text-primary);
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* Чекбокс в сетке формы держим у нижнего края, вровень с соседними полями. */
.form-group-checkbox {
    justify-content: flex-end;
}

.btn {
    padding: 0.7rem 1.6rem;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

/* Основное действие — сплошная заливка акцентом. Прежний полупрозрачный
   вариант с внутренним свечением на новом фоне читался как неактивный. */
.btn-primary {
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--hover-color);
    color: #fff;
}

/* Одно правило на все варианты кнопки, а не только на .btn-buy: платёжная
   кнопка во время обработки платежа (id="pay-yookassa") оставалась под
   курсором-пальцем и выглядела как обычная активная. */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-switch {
    text-align: center;
    color: var(--text-secondary);
    margin-top: var(--sp-4);
}

.auth-switch a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* Footer */
.footer {
    background: var(--panel);
    padding: var(--sp-5) 0;
    margin-top: var(--sp-6);
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.footer-content p {
    color: var(--text-secondary);
    margin: var(--sp-2) 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-container {
        flex-wrap: wrap;
    }

    .nav-container>.nav-menu {
        order: 3;
        flex-basis: 100%;
    }

    .nav-menu {
        flex-direction: column;
        background: var(--panel);
        width: 100%;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        padding: 0;
        margin: 0;
        z-index: 999;
        border-top: 1px solid var(--line);
    }

    .nav-menu.active {
        /* Мобильное меню: занимаем всю высоту окна, свой скролл */
        max-height: 100vh;
        padding: var(--sp-6) 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .hamburger {
        display: flex;
    }

    .nav-container>.hamburger {
        right: 1rem;
    }

    /* Эти четыре правила долго стояли ниже без @media и действовали на любой
       ширине: на десктопе у страниц был телефонный отступ 16px, у формы входа
       и модалок — телефонные поля. */
    .nav-container,
    .main-content {
        padding: 0 var(--sp-4);
    }

    .auth-box {
        padding: var(--sp-5) var(--sp-4);
    }

    .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: var(--sp-4);
    }
}

/* Hamburger menu when nav doesn't fit */
.nav-menu.overflow-hidden {
    flex-direction: column;
    background: var(--panel);
    width: 100%;
    min-width: 0;
    text-align: center;
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, border-top-color 0.2s ease;
    padding: 0;
    margin: 0;
    z-index: 999;
    flex-basis: 0;
    flex-grow: 0;
    flex-shrink: 1;
    border: none;
    border-top: 1px solid transparent;
    border-radius: 0 0 2px 2px;
    box-sizing: border-box;
    will-change: max-height, padding;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.nav-menu.overflow-hidden.active {
    /* Меню раскрыто: ограничиваем высоту экрана и даём свой скролл,
       но сама высота списка остаётся по контенту */
    max-height: 100vh;
    padding: var(--sp-4) 0;
    /* поменьше вертикальные отступы внутри бургера */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* чтобы скролл не «пробивал» на страницу */
    border-top-color: rgba(255, 0, 60, 0.2);
    will-change: auto;
}

.nav-menu.overflow-hidden li {
    display: block;
    width: 100%;
    margin: 0.15rem 0;
    /* меньше вертикальный зазор между пунктами */
    padding: 0 0.7rem;
    /* меньше горизонтальные отступы */
}

.nav-menu.overflow-hidden .nav-link {
    width: 100%;
    padding: var(--sp-4);
    justify-content: center;
    text-align: center;
    display: inline-block;
    border-radius: var(--radius-control);
    margin: var(--sp-1) 0;
    transition: background 0.3s ease, color 0.3s ease;
    background: transparent;
    position: relative;
}

.nav-menu.overflow-hidden .nav-link:hover {
    background: var(--panel-2);
}

.nav-menu.overflow-hidden .nav-link.active {
    background: var(--panel-2);
    color: var(--text-primary);
}

.nav-menu.overflow-hidden .nav-link.login-btn {
    background: var(--primary-color);
    color: white !important;
    margin: var(--sp-2) var(--sp-5);
    padding: 1rem !important;
    border: 1px solid var(--hover-color);
    width: calc(100% - 3rem);
    text-align: center;
}

.nav-menu.overflow-hidden .nav-link.login-btn:hover {
    background: var(--hover-color);
}

.nav-menu.overflow-hidden .nav-link.login-btn::before {
    left: 1.5rem;
}

.nav-menu.overflow-hidden .language-selector {
    margin-left: 0;
    margin-top: var(--sp-2);
    margin-bottom: 0.3rem;
    /* В бургер-меню делаем селектор по размеру кнопки, а не на всю ширину */
    width: auto;
    display: flex;
    justify-content: center;
    padding: 0;
    position: relative;
    /* dropdown будет позиционироваться относительно этого контейнера */
}

.nav-menu.overflow-hidden .language-dropdown {
    /* Открываем список языков чуть выше и справа относительно language-selector */
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 0.4rem);
    transform: none;
}

.nav-menu.overflow-hidden .language-dropdown.show {
    transform: none;
}

/* Admin Panel Mobile Styles */
@media (max-width: 768px) {
    .dashboard-title {
        font-size: var(--fs-section);
    }

    .admin-container {
        padding: 0;
    }

    .admin-section {
        margin-bottom: var(--sp-4);
    }

    .admin-section h3 {
        font-size: var(--fs-card);
        margin-bottom: var(--sp-4);
    }

    .admin-section .btn {
        width: 100%;
        padding: 0.9rem 1.5rem;
        font-size: var(--fs-body);
        margin-bottom: var(--sp-4);
    }

    .admin-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-4);
        padding: var(--sp-4);
    }

    .admin-item-content {
        width: 100%;
    }

    .admin-item-content h4 {
        font-size: var(--fs-body);
        margin-bottom: var(--sp-2);
    }

    .admin-item-content p {
        font-size: var(--fs-cell);
    }

    .admin-item-actions {
        width: 100%;
        flex-direction: column;
        gap: var(--sp-2);
    }

    .admin-item-actions .btn,
    .admin-item-actions .btn-small {
        width: 100%;
        padding: 0.8rem 1rem;
        font-size: var(--fs-body);
    }

    .account-container {
        padding: 0;
    }

    /* Карточки на телефоне ужимаются все разом: до этого админка, аккаунт и
       форма входа делали это каждая по-своему. */
    .dash-card,
    .update-card,
    .rule-category,
    .staff-card,
    .admin-section,
    .account-section {
        padding: var(--sp-4);
    }

    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }


    .language-selector {
        margin-left: var(--sp-2);
    }

    .language-select {
        padding: 6px 8px;
    }

    .language-dropdown {
        min-width: 88px;
    }
}

/* End mobile overrides */

.mc-text-wrapper {
    word-spacing: 0.3em; /* Increase space width to match Minecraft */
}

/* Стили для span внутри текста.
   ВАЖНО: не делаем span'ы inline-block глобально — иначе span'ы,
   содержащие только пробел, схлопываются в нулевую ширину и текст
   слипается в одно слово. inline-block нужен только для анимации &k
   (magic-text), у которого свой display ниже. */
.mc-text-wrapper span {
    display: inline;
}

/* --- MINECRAFT TEXT RENDERING CORE --- */

/* Стилизаторы (генерирует parseMinecraftString из js/utils/mc-text.js). */
.mc-bold {
    font-weight: bold;
}

.mc-italic {
    font-style: italic;
}

.mc-underlined {
    text-decoration: underline;
}

.mc-strikethrough {
    text-decoration: line-through;
}

.mc-underlined.mc-strikethrough {
    text-decoration: underline line-through;
}

/* Магический текст (&k) */
.mc-obfuscated {
    display: inline-block;
    cursor: default;
}

/* ── Moderation Panel ──────────────────────────────────────────────── */
.mod-tabs {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
.mod-tab {
    padding: 0.45rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-cell);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mod-tab.active, .mod-tab:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.mod-tab-content { display: none; }
.mod-tab-content.active { display: block; }

.mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
}
.mod-info-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--sp-3) var(--sp-4);
}
.mod-info-label {
    font-size: var(--fs-label);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-1);
}
.mod-info-value {
    font-size: var(--fs-body);
    color: var(--text-primary);
    word-break: break-all;
}

.mod-alt-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: 0.6rem;
}
.mod-alt-name {
    font-weight: bold;
    color: var(--text-primary);
    cursor: pointer;
}
.mod-alt-name:hover { color: var(--primary-color); }
.mod-alt-meta { font-size: var(--fs-note); color: var(--text-secondary); margin-top: 0.2rem; }
.mod-alt-bans { font-size: var(--fs-note); margin-top: 0.4rem; }

.mod-note-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-2);
}
.mod-note-body { flex: 1; }
.mod-note-meta { font-size: var(--fs-note); color: var(--text-secondary); margin-top: 0.3rem; }
.mod-note-del { background: none; border: none; color: var(--danger-color); cursor: pointer; font-size: var(--fs-card); padding: 0; }

.mod-ban-active { color: var(--danger-color); font-weight: bold; }
.mod-ban-expired { color: var(--text-secondary); text-decoration: line-through; }
.mod-status-good { color: var(--success-color); }

/* Тип наказания красился через JS-карту из четырёх чужих цветов (bootstrap-red,
   flat-UI orange) — не связанных ни с одной переменной сайта, той же болезнью,
   что была у бейджа ранга в Магазине. Два уровня строгости, а не четыре разных
   оттенка: бан — danger, мут — warning, как везде на сайте. */
.mod-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #fff;
}
.mod-badge-ban { background: var(--danger-color); }
.mod-badge-mute { background: var(--warning-color); }
.mod-badge-neutral { background: var(--text-mute); }

.mod-ip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-cell);
}
.mod-ip-row .mod-ip-nick { color: var(--text-primary); cursor: pointer; }
.mod-ip-row .mod-ip-nick:hover { color: var(--primary-color); }
.mod-ip-row .mod-ip-meta { color: var(--text-secondary); font-size: var(--fs-note); }

/* ── Quill editor dark theme ──────────────────────────────────────────── */
.ql-toolbar.ql-snow {
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0;
    background: var(--panel-2) !important;
}
.ql-toolbar.ql-snow .ql-picker-label,
.ql-toolbar.ql-snow button { color: var(--text-secondary) !important; }
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button.ql-active { color: var(--primary-color) !important; }
.ql-toolbar.ql-snow .ql-stroke { stroke: var(--text-secondary) !important; }
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--primary-color) !important; }
.ql-toolbar.ql-snow .ql-fill { fill: var(--text-secondary) !important; }
.ql-toolbar.ql-snow .ql-picker-options {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

#quill-ru.ql-container.ql-snow,
#quill-en.ql-container.ql-snow {
    border: 1px solid var(--border-color) !important;
    border-radius: 0 0 6px 6px;
    font-size: var(--fs-body);
}
#quill-ru .ql-editor,
#quill-en .ql-editor {
    color: var(--text-primary) !important;
    min-height: 200px;
}
#quill-ru .ql-editor.ql-blank::before,
#quill-en .ql-editor.ql-blank::before { color: var(--text-secondary) !important; }

/* ── Update post content rendering ───────────────────────────────────── */
.update-content.ql-editor {
    padding: 0 !important;
    font-size: var(--fs-body);
    color: var(--text-primary);
    line-height: 1.7;
}
.update-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: var(--sp-2) 0;
}
.update-content h2, .update-content h3 {
    margin: 1rem 0 0.4rem;
    color: var(--text-primary);
}
.update-content blockquote {
    border-left: 3px solid var(--primary-color);
    margin: var(--sp-2) 0;
    padding: 0.3rem 0.8rem;
    color: var(--text-secondary);
}
.update-content pre.ql-syntax {
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    font-size: var(--fs-cell);
    overflow-x: auto;
}

/* Ссылки на соцсети в подвале: три одинаковые кнопки. */
.footer-socials {
    margin-bottom: var(--sp-5);
    display: flex;
    justify-content: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.btn-social {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    text-decoration: none;
}

/* Инструкция регистрации: серые литералы #ccc и #888 стояли мимо палитры. */
.reg-lead {
    margin-bottom: var(--sp-4);
    color: var(--text-secondary);
}

.reg-note {
    margin-top: var(--sp-4);
    font-size: var(--fs-note);
    color: var(--text-mute);
}

/* Тело редактора Quill. Раньше фон брался из var(--bg-input, #1a1a2e) —
   переменной, которой в проекте нет, так что работало синеватое запасное
   значение из чужой палитры. */
.quill-body {
    min-height: 200px;
    background: var(--panel-2);
    border-radius: 0 0 var(--radius-control) var(--radius-control);
}

/* Пояснение под содержимым карточки. */
.card-note {
    color: var(--text-secondary);
    font-size: var(--fs-cell);
    line-height: 1.6;
}

/* --- Палитра Minecraft: цвет кода ---------------------------------------

   Блок стоит последним намеренно. Эти классы висят и на .btn-secondary (свой
   цвет текста); специфичность одинаковая — 0,1,0, — поэтому решает порядок,
   и утилита цвета должна идти после. .format-code в shop.css цвет задаёт
   только кодам без класса .mc-*, так что с этим блоком он не спорит. */

/* Коды форматирования: класс вместо цвета в атрибуте style. */
.mc-0 { color: var(--mc-0); }
.mc-1 { color: var(--mc-1); }
.mc-2 { color: var(--mc-2); }
.mc-3 { color: var(--mc-3); }
.mc-4 { color: var(--mc-4); }
.mc-5 { color: var(--mc-5); }
.mc-6 { color: var(--mc-6); }
.mc-7 { color: var(--mc-7); }
.mc-8 { color: var(--mc-8); }
.mc-9 { color: var(--mc-9); }
.mc-a { color: var(--mc-a); }
.mc-b { color: var(--mc-b); }
.mc-c { color: var(--mc-c); }
.mc-d { color: var(--mc-d); }
.mc-e { color: var(--mc-e); }
.mc-f { color: var(--mc-f); }

/* Чёрный код на тёмном фоне не виден — ему светлая подложка. */
.mc-on-light {
    background: #aaaaaa;
}

/* ── Админка: раздел «Состояние» (js/admin/health.js) ─────────────────────── */
.health-range {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    overflow: hidden;
}
.health-range button {
    background: transparent;
    color: var(--text-secondary);
    border: 0;
    padding: 6px 12px;
    font: inherit;
    font-size: var(--fs-note);
    cursor: pointer;
}
.health-range button + button { border-left: 1px solid var(--line); }
.health-range button.active { background: var(--secondary-color); color: var(--text-primary); }
#health-section.health-loading .health-grid,
#health-section.health-loading .health-tiles { opacity: 0.6; transition: opacity .2s; }
.health-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-2);
    margin: var(--sp-3) 0 var(--sp-4);
}
.health-tile {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg-dark);
}
.health-tile--critical { border-color: #d03b3b; }
.health-tile--warning { border-color: #8a6a1e; }
.health-tile__icon {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #0f0c11;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    margin-top: 2px;
}
.health-tile__title { font-size: var(--fs-note); color: var(--text-secondary); }
.health-tile__value { font-size: var(--fs-cell); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.health-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}
@media (min-width: 700px) {
    .health-grid { grid-template-columns: 1fr 1fr; }
}
.health-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    min-width: 0;
}
.health-card h4 {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-cell);
    font-weight: 600;
    color: var(--text-primary);
}
.health-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--sp-3);
    font-size: var(--fs-note);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--sp-1);
}
.health-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.health-legend__item i,
.health-tip__row i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; flex: none; }
.health-plot { position: relative; }
.health-plot svg { display: block; touch-action: pan-y; }
.health-grid-line { stroke: var(--line); stroke-width: 1; }
.health-axis { fill: var(--text-mute); font-size: 10px; font-variant-numeric: tabular-nums; }
.health-cross { stroke: var(--text-mute); stroke-width: 1; }
.health-tip {
    position: absolute;
    top: 0;
    pointer-events: none;
    background: var(--bg-dark);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: var(--fs-note);
    white-space: nowrap;
    z-index: 2;
    box-shadow: var(--shadow-card);
}
.health-tip__time { color: var(--text-mute); margin-bottom: 2px; }
.health-tip__row { display: flex; align-items: center; gap: 6px; }
.health-tip__row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.health-tip__row span { color: var(--text-secondary); }

/* ── Админка: раздел «Сервера» (js/admin/servers.js) ──────────────────────── */
.servers-nodes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin: var(--sp-3) 0 var(--sp-4);
}
@media (min-width: 700px) {
    .servers-nodes { grid-template-columns: 1fr 1fr; }
}
.servers-node {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: var(--sp-3);
    min-width: 0;
}
.servers-node h4 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-cell);
    font-weight: 600;
    color: var(--text-primary);
}
.servers-node__err { color: #d03b3b; font-size: var(--fs-note); overflow-wrap: anywhere; }
.servers-svc {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 0;
    font-size: var(--fs-note);
    color: var(--text-secondary);
}
.servers-svc + .servers-svc { border-top: 1px solid var(--line); }
.servers-svc__name { color: var(--text-primary); min-width: 64px; }
.servers-svc__state { flex: 1; font-variant-numeric: tabular-nums; }
.servers-svc__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: #7f7686;
}
.servers-svc__dot--active { background: #0ca30c; }
.servers-svc__dot--failed { background: #d03b3b; }
.servers-svc__dot--activating,
.servers-svc__dot--deactivating { background: #fab219; }
.servers-svc .btn { flex: none; }
.servers-motd { margin-top: var(--sp-4); }
.servers-motd__node { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.servers-motd__title { margin: 0; }
.servers-motd textarea {
    width: 100%;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    resize: vertical;
}
/* Превью MOTD — строка списка серверов клиента 1.8 при масштабе GUI 2: шрифт Minecraft
   16px, иконка 64px, строки по 18px. */
@font-face { font-family: 'MinecraftUI'; src: url('/replay/fonts/minecraft.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'MinecraftUIBold'; src: url('/replay/fonts/minecraft-bold.woff') format('woff'); font-display: swap; }
.servers-motd__label { margin-top: var(--sp-2); font-size: var(--fs-note); color: var(--text-secondary); }
.servers-motd__preview {
    margin: var(--sp-1) 0 var(--sp-2);
    padding: 8px;
    background: #1e1a17;
    border-radius: var(--radius-control);
    overflow-x: auto;
    color: #aaa;
}
.mc-entry {
    display: flex;
    gap: 6px;
    width: 610px;
    font-family: 'MinecraftUI', monospace;
    font-size: 16px;
    line-height: 18px;
    white-space: pre;
}
.mc-entry__icon { width: 64px; height: 64px; image-rendering: pixelated; flex: none; }
.mc-entry__body { flex: 1; min-width: 0; overflow: hidden; padding-top: 2px; }
.mc-entry__head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.mc-entry__line { overflow: hidden; }
.mc-entry .mc-bold { font-family: 'MinecraftUIBold', 'MinecraftUI', monospace; }
.servers-logs__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}
.servers-logs__bar select {
    background: var(--bg-dark);
    color: var(--text-primary);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: 6px 8px;
    font: inherit;
    font-size: var(--fs-note);
}
.servers-logs__auto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-note);
    color: var(--text-secondary);
}
.servers-logs__out {
    margin: var(--sp-3) 0 0;
    max-height: 480px;
    overflow: auto;
    padding: var(--sp-3);
    background: var(--bg-dark);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
}