/* =====================================================================
   NOSTALGIA x10 — main page TOP server card (NEW server, purple/violet)
   Plus x15 ETERNAL variant (cyan) so x15 and x100 look distinct.
   ===================================================================== */

/* === Nostalgia (purple accent + glow animation) === */
.server_accent_purple {
    position: relative;
}
.server_accent_purple:after {
    background: linear-gradient(90deg, #8b5cf6 5%, rgba(139, 92, 246, 0) 90%);
}
.server_accent_purple .server__progress .progress__load {
    background: linear-gradient(90deg, #c084fc 0%, #8b5cf6 60%, #ff3d3d 100%);
}
.server_nostalgia .color-purple {
    color: #c084fc;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 0 12px rgba(192, 132, 252, 0.55);
}

/* Заголовок Nostalgia x10 — "NOSTALGIA" белый, "x10" фиолетовый (Nostalgia accent) */
.server_nostalgia .nost-title-name {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.server_nostalgia .nost-title-rate {
    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;
}

/* === Кастомная компактная плашка статуса для Nostalgia === */
/* Меньше padding/font → не вылазит за правый край карточки */
.server_nostalgia .nost-status-badge {
    padding: max(0.3rem, 5px) max(0.7rem, 11px);
    font-size: max(0.7rem, 11px);
    margin-right: 6px;
    margin-left: auto;
    gap: 6px;
}
.server_nostalgia .nost-status-badge .nost-status-text {
    letter-spacing: 0.08em;
    font-weight: 600;
    white-space: nowrap;
}

/* Состояния плашки — каждое state имеет свой фон + контрастная точка */

/* state-pre (до ОБТ): фиолетовый фон под Nostalgia + молочно-белая точка */
.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;
    }
}

/* Pulse glow around the Nostalgia card so it stands out as NEW */
.server_nostalgia {
    box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.55);
    animation: nostalgia-pulse 2.2s ease-in-out infinite;
}
@keyframes nostalgia-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.45); }
    50%      { box-shadow: 0 0 28px 6px rgba(192, 132, 252, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
    .server_nostalgia { animation: none; }
}

/* === x15 RETRO — теперь визуально как x100 ETERNAL (белый заголовок, красный градиент полосы) === */
/* Цветовая дифференциация остаётся через иконку (ico-1 vs ico-2) и сам заголовок RETRO vs ETERNAL */

/* === Clickable title link in server cards === */
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;
}

/* === Align online badge with title row === */
.server__box_head {
    align-items: center;
}

/* === 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;
}

/* === Кастомные кнопки для блока 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;
}

/* Stage Description button — приглушённый оранж (палитра сайта #ffad33), не яркий */
.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;
}

/* Nostalgia button — фиолетовый под цвет карточки */
.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;
}

/* Reduced motion: убираем transform-движения */
@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;
    }
}