/* --- 1. ШРИФТЫ И ОСНОВА --- */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Kelly+Slab&family=Monsieur+La+Doulaise&display=swap');

html, body {
    background-color: #050505;
    background-image: radial-gradient(circle, #121212 0%, #000000 100%);
    color: #b0b0b0;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Kelly Slab', serif;
}

/* --- 2. ГЛАВНЫЕ ЗАГОЛОВКИ (ЭФФЕКТ ТУМАНА) --- */
h1, .gothic-title {
    font-family: 'Monsieur La Doulaise', cursive !important;
    font-size: clamp(3.5rem, 12vw, 5.5rem) !important;
    color: #e0e0e0 !important;
    text-align: center;
    margin-bottom: 40px;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

@keyframes fog-drift {
    from {
        opacity: 0.8;
        filter: blur(1px);
    }

    to {
        opacity: 1;
        filter: blur(0px);
    }
}

/* --- 3. ТЕМНЫЕ КНОПКИ (ЭФФЕКТ ТУМАННОЙ СТАЛИ) --- */
.gothic-btn,
button.btn-info,
button.btn-primary,
.btn-give-gold,
.buy-btn,
.btn-warning { /* Заменяем желтые кнопки на темные */
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
    color: #d1d1d1 !important;
    border: 1px solid #333 !important;
    font-family: 'Great Vibes', cursive !important;
    font-size: 1.5rem !important;
    padding: 10px 35px !important;
    border-radius: 4px !important;
    transition: all 0.5s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    text-decoration: none;
    display: inline-block;
}

    .gothic-btn:hover,
    .btn-info:hover,
    .btn-give-gold:hover,
    .btn-warning:hover {
        background: #252525 !important;
        color: #ffffff !important;
        border-color: #666 !important;
        /* Туманный шлейф при наведении */
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-2px);
    }

/* --- 4. КОНТЕЙНЕРЫ И КАРТОЧКИ (ЛАВКА) --- */
.gothic-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 15px;
}

.card, .shop-item, .alert-dark {
    background: rgba(15, 15, 15, 0.9) !important;
    border: 1px solid #222 !important;
    border-radius: 0 !important; /* Квадратные формы выглядят строже */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    transition: border 0.3s ease;
}

    .card:hover {
        border-color: #444 !important;
    }

/* --- 5. ТАБЛИЦА РЕЙТИНГА --- */
.table {
    background-color: transparent !important;
    color: #999 !important;
}

    .table thead th {
        border-bottom: 1px solid #333 !important;
        font-family: 'Kelly Slab', serif;
        text-transform: uppercase;
        font-size: 0.9rem;
        color: #666;
    }

    .table td {
        border-bottom: 1px solid #111 !important;
        vertical-align: middle;
    }

/* Убираем яркое выделение первого места, заменяем на призрачно-серый */
.table-warning, .table-light, .table-danger {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #eee !important;
}

/* --- 6. АДМИН-ПАНЕЛЬ (ИНПУТЫ) --- */
.admin-actions-wrap {
    display: flex;
    gap: 8px;
    justify-content: center;
}

input.admin-input {
    background: #000 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    height: 48px !important;
    width: 80px !important;
    text-align: center;
    font-family: 'Kelly Slab', serif;
}

    input.admin-input:focus {
        border-color: #555 !important;
        outline: none;
    }

.btn-danger-gothic {
    background: #301010 !important; /* Тускло-красный */
    border: 1px solid #451a1a !important;
    color: #888 !important;
    width: 48px;
    height: 48px;
    transition: all 0.3s;
}

    .btn-danger-gothic:hover {
        background: #601010 !important;
        color: #fff !important;
    }

/* --- 7. СКРОЛЛБАР (ТУМАННЫЙ) --- */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #222;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #333;
    }

/* --- 8. ТЕКСТЫ И ПУТЬ --- */
.text-warning {
    color: #d1d1d1 !important; /* Убираем желтый из баланса */
    text-shadow: 0 0 5px rgba(255,255,255,0.1);
}

.text-info {
    color: #888 !important; /* Делаем роль менее кричащей */
}

.nav-link {
    font-family: 'Kelly Slab', serif;
    letter-spacing: 1px;
    color: #888 !important;
}

    .nav-link:hover {
        color: #fff !important;
    }
.fa-skull {
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* Эффект для выигрышного состояния, который мы задаем через JS */
[style*="color: rgb(255, 0, 0)"] {
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
    animation: pulse-red 1s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}