/* =====================================================================
   Server cards (главная) — единый стиль подложек + плашек
   3 карточки: Nostalgia x10 (фиолетовый), RETRO x15 (янтарный), ETERNAL x100 (багровый)
   Отличаются только акцентным цветом, структура и геометрия — идентичны.
   ===================================================================== */

/* ====================================================================
   1) ЕДИНАЯ ПОДЛОЖКА для всех 3 карточек
   ==================================================================== */

.server_nostalgia,
.server_eternal_x15,
.server_eternal_x100 {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1),
                box-shadow 0.3s ease;
}

/* Подавляем legacy .server_accent:after (жёлтый дефолтный градиент) для всех 3 карточек */
.server_nostalgia::after,
.server_eternal_x15::after,
.server_eternal_x100::after {
    display: none !important;
    content: none !important;
}

/* Цветной fill + рамка + угловой radial-glow на каждый вариант */

/* --- NOSTALGIA — фиолетовый --- */
.server_nostalgia {
    background: linear-gradient(135deg,
        rgba(48, 24, 76, 0.92) 0%,
        rgba(34, 24, 50, 0.85) 55%,
        rgba(22, 18, 28, 0.82) 100%);
    border: 1px solid rgba(192, 132, 252, 0.28);
}

/* --- RETRO x15 — янтарно-золотой --- */
.server_eternal_x15 {
    background: linear-gradient(135deg,
        rgba(72, 48, 14, 0.92) 0%,
        rgba(34, 28, 22, 0.85) 55%,
        rgba(22, 20, 18, 0.82) 100%);
    border: 1px solid rgba(255, 173, 51, 0.28);
}

/* --- ETERNAL x100 — кроваво-багровый --- */
.server_eternal_x100 {
    background: linear-gradient(135deg,
        rgba(64, 14, 18, 0.92) 0%,
        rgba(38, 20, 25, 0.85) 55%,
        rgba(22, 18, 22, 0.82) 100%);
    border: 1px solid rgba(255, 61, 61, 0.28);
}

/* --- LOE Essence partners — изумрудно-зелёный (партнёрский) ---
   Перебивает x100 (карточка имеет оба класса для layout-inheritance) */
.server_partner_loe.server_eternal_x100 {
    background: linear-gradient(135deg,
        rgba(14, 64, 38, 0.92) 0%,
        rgba(20, 38, 28, 0.85) 55%,
        rgba(18, 22, 20, 0.82) 100%) !important;
    border: 1px solid rgba(61, 255, 137, 0.28) !important;
    /* Отступ сверху идентичный tagline (margin-top: 22px), чтобы зазоры
       выше и ниже плашки были симметричные */
    margin-top: 22px;
}
.server_partner_loe.server_eternal_x100::before {
    background: radial-gradient(circle at top right,
        rgba(61, 255, 137, 0.35) 0%,
        rgba(61, 255, 137, 0) 65%) !important;
}

/* Угловой radial-glow акцент в верхнем правом углу — идентичная геометрия, разный цвет */
.server_nostalgia::before,
.server_eternal_x15::before,
.server_eternal_x100::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 80%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.server_nostalgia::before {
    background: radial-gradient(ellipse at top right, rgba(192, 132, 252, 0.32) 0%, transparent 65%);
}
.server_eternal_x15::before {
    background: radial-gradient(ellipse at top right, rgba(255, 173, 51, 0.28) 0%, transparent 65%);
}
.server_eternal_x100::before {
    background: radial-gradient(ellipse at top right, rgba(255, 61, 61, 0.28) 0%, transparent 65%);
}

/* Контент карточки поверх подложки */
.server_nostalgia > *,
.server_eternal_x15 > *,
.server_eternal_x100 > * {
    position: relative;
    z-index: 1;
}

/* Hover lift — единый для всех 3 */
.server_nostalgia:hover,
.server_eternal_x15:hover,
.server_eternal_x100:hover {
    transform: translateY(-3px);
}
.server_nostalgia:hover::before,
.server_eternal_x15:hover::before,
.server_eternal_x100:hover::before {
    opacity: 1;
}

/* Пульсирующая обводка ТОЛЬКО для Nostalgia (выделить как NEW) — поверх базовой тени */
.server_nostalgia {
    animation: nostalgia-pulse 2.4s ease-in-out infinite;
}
@keyframes nostalgia-pulse {
    0%, 100% {
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 0 0 0 rgba(192, 132, 252, 0.5);
    }
    50% {
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 0 32px 6px rgba(192, 132, 252, 0.28);
    }
}
.server_eternal_x15,
.server_eternal_x100 {
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.server_eternal_x15:hover,
.server_eternal_x100:hover {
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .server_nostalgia,
    .server_eternal_x15,
    .server_eternal_x100 {
        animation: none;
        transition: none;
    }
    .server_nostalgia:hover,
    .server_eternal_x15:hover,
    .server_eternal_x100:hover {
        transform: none;
    }
}

/* Прогресс-полоска Nostalgia — фиолетовая (raw, как и было) */
.server_nostalgia .server__progress .progress__load,
.server_accent_purple .server__progress .progress__load {
    background: linear-gradient(90deg, #c084fc 0%, #8b5cf6 60%, #ff3d3d 100%);
}

/* Отступ между x15 и x100 */
.server_eternal_x15 {
    margin-bottom: 36px;
}

/* === Tagline-блок под правым блоком — оформлен как декоративная плашка === */
.eternal-tagline {
    position: relative;
    margin-top: 22px;
    padding: 16px 28px;
    text-align: center;
    font-size: max(0.95rem, 15px);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 220, 180, 0.95);
    text-shadow: 0 0 14px rgba(255, 173, 51, 0.5);

    background: linear-gradient(135deg,
        rgba(72, 48, 14, 0.55) 0%,
        rgba(40, 32, 26, 0.75) 50%,
        rgba(72, 48, 14, 0.55) 100%);
    border: 1px solid rgba(255, 173, 51, 0.32);
    border-radius: 12px;
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 24px rgba(255, 173, 51, 0.08);
    overflow: hidden;
}
/* Декоративные звёздочки/искры по бокам текста */
.eternal-tagline::before,
.eternal-tagline::after {
    content: "✦";
    color: rgba(255, 173, 51, 0.85);
    font-size: 0.85em;
    margin: 0 12px;
    vertical-align: middle;
    text-shadow: 0 0 8px rgba(255, 173, 51, 0.7);
}

/* ====================================================================
   2) ЕДИНАЯ ПЛАШКА СТАТУСА — одинаковый размер/позиция для всех 3
   ==================================================================== */

/* Прижимаем плашки к верху ряда с заголовком */
.server__box_head {
    align-items: flex-start;
}

/* Размер и позиция — идентичны для всех 3 */
.server_nostalgia .nost-status-badge,
.server_eternal_x15 .server__online,
.server_eternal_x100 .server__online {
    align-self: flex-start;
    margin-top: 2px;
    margin-right: 18px;
    margin-left: auto;
    padding: 5px 12px;
    font-size: 11px;
    gap: 6px;
}
.server_nostalgia .nost-status-badge .nost-status-text {
    letter-spacing: 0.08em;
    font-weight: 600;
    white-space: nowrap;
}

/* ====================================================================
   3) Состояния плашки Nostalgia (state-pre / state-obt / state-live)
   ==================================================================== */

/* state-pre (до ОБТ): фиолетовый фон + молочно-белая точка */
.server_nostalgia .nost-status-badge.state-pre::after {
    background: linear-gradient(90deg, #8b5cf6 30%, rgba(139, 92, 246, 0) 200%) !important;
}
.server_nostalgia .nost-status-badge.state-pre .server__status {
    background: #fef3c7 !important;
    box-shadow: 0 0 7px rgba(254, 243, 199, 0.85);
}

/* state-obt (ОБТ идёт): янтарный фон + ярко-белая пульсирующая точка */
.server_nostalgia .nost-status-badge.state-obt::after {
    background: linear-gradient(90deg, #f59e0b 30%, rgba(245, 158, 11, 0) 200%) !important;
}
.server_nostalgia .nost-status-badge.state-obt .server__status {
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    animation: nost-status-pulse 1.6s ease-in-out infinite;
}

/* state-live (сервер запущен): зелёный фон + ярко-зелёная точка */
.server_nostalgia .nost-status-badge.state-live::after {
    background: linear-gradient(90deg, #16a34a 30%, rgba(22, 163, 74, 0) 200%) !important;
}
.server_nostalgia .nost-status-badge.state-live .server__status {
    background: #4ade80 !important;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}

@keyframes nost-status-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .server_nostalgia .nost-status-badge.state-obt .server__status {
        animation: none;
    }
}

/* ====================================================================
   4) Заголовки карточек
   ==================================================================== */

/* Заголовок NOSTALGIA x10: "NOSTALGIA" белый (наследует от .server_titile_custom),
   "x10" фиолетовый (через .server__title внутри .server_nostalgia).
   Структура идентична x15/x100 — никаких лишних спанов с разным line-height. */
.server_nostalgia .server_titile_custom {
    color: #ffffff;
}
.server_nostalgia .server__title {
    color: #c084fc;
    text-shadow: 0 0 12px rgba(192, 132, 252, 0.55);
}

/* Nostalgia: offline-сервер визуально НЕ затемняется */
.server_nostalgia[data-server-status=off],
[data-server-status=off].server_nostalgia {
    opacity: 1;
}
.server_nostalgia[data-server-status=off] .server__pic {
    filter: none;
    opacity: 1;
}
.server_nostalgia[data-server-status=off] .server__count {
    background-color: transparent;
}

/* ====================================================================
   5) Кликабельный заголовок (общий)
   ==================================================================== */

a.server_titile_custom,
a.server__title_link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
a.server_titile_custom:hover,
a.server__title_link:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* ====================================================================
   6) Mini countdown timer (под карточкой Nostalgia)
   ==================================================================== */

.nost-mini-timer {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(192, 132, 252, 0.05));
    border: 1px solid rgba(192, 132, 252, 0.35);
    text-align: center;
    box-shadow: inset 0 0 18px rgba(192, 132, 252, 0.12);
}
.nost-mini-timer__label {
    font-size: 0.78em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c084fc;
    margin-bottom: 8px;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.6);
    transition: opacity 0.4s ease;
}
.nost-mini-timer__label.fading {
    opacity: 0;
}
.nost-mini-timer__digits {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}
.nost-mini-timer__unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
}
.nost-mini-timer__unit b {
    font-size: 1.6em;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.nost-mini-timer__unit i {
    font-style: normal;
    font-size: 0.65em;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.05em;
    margin-top: 3px;
    text-transform: uppercase;
}
.nost-mini-timer__sep {
    color: #c084fc;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1;
    align-self: flex-start;
    padding-top: 2px;
    opacity: 0.7;
}
.nost-mini-timer.finished .nost-mini-timer__label {
    color: #34d399;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.7);
}
.nost-mini-timer.finished .nost-mini-timer__sep,
.nost-mini-timer.finished .nost-mini-timer__unit b {
    color: #34d399;
}

/* ====================================================================
   7) Кастомные кнопки блока Nostalgia (фиолет + оранж под палитру сайта)
   ==================================================================== */

.btn_fill_nostalgia,
.btn_custom_orange {
    color: #fff !important;
    white-space: nowrap;
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1),
                filter 0.25s ease,
                box-shadow 0.25s ease;
    will-change: transform;
}
.btn_fill_nostalgia::before,
.btn_custom_orange::before {
    transition: background-position 0.5s ease, filter 0.25s ease;
}

.btn_custom_orange::before {
    background: linear-gradient(100deg, #c97a1a 0%, #ffad33 55%, #d68616 100%) !important;
    background-size: 200% 100%;
    background-position: 0% 50%;
}
.btn_custom_orange:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 10px 22px -8px rgba(255, 173, 51, 0.45);
}
.btn_custom_orange:hover::before {
    background-position: 100% 50%;
}
.btn_custom_orange:active {
    transform: translateY(1px);
    filter: brightness(0.95);
    box-shadow: 0 2px 6px rgba(255, 173, 51, 0.25);
    transition-duration: 0.08s;
}

.btn_fill_nostalgia::before {
    background: linear-gradient(100deg, #6d28d9 0%, #8b5cf6 55%, #7c3aed 100%) !important;
    background-size: 200% 100%;
    background-position: 0% 50%;
}
.btn_fill_nostalgia:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 10px 22px -8px rgba(139, 92, 246, 0.5);
}
.btn_fill_nostalgia:hover::before {
    background-position: 100% 50%;
}
.btn_fill_nostalgia:active {
    transform: translateY(1px);
    filter: brightness(0.95);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
    transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    .btn_fill_nostalgia,
    .btn_custom_orange {
        transition: none;
    }
    .btn_fill_nostalgia:hover,
    .btn_custom_orange:hover,
    .btn_fill_nostalgia:active,
    .btn_custom_orange:active {
        transform: none;
    }
}