:root {
    --war-bg: #0d0b11;
    --war-surface: rgba(26, 20, 17, .88);
    --war-surface-2: rgba(37, 27, 18, .9);
    --war-border: rgba(201, 153, 57, .28);
    --war-gold: #d7a546;
    --war-text: #f2e5c4;
}

body {
    min-height: 100vh;
    color: var(--war-text);
    background:
        radial-gradient(circle at top, rgba(76, 45, 10, .35), transparent 32%),
        linear-gradient(180deg, rgba(8, 8, 10, .96), rgba(12, 11, 17, .98)),
        url('https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=1600&auto=format&fit=crop') center/cover fixed;
}

.page-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 4, 8, .68);
    pointer-events: none;
    z-index: -1;
}

.war-nav {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(20, 16, 12, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: none;
    border-bottom: 1px solid rgba(215, 165, 70, 0.25);

    box-shadow:
        0 0 0 rgba(0,0,0,0),
        0 8px 25px rgba(0,0,0,0.25);

    transition: all 0.25s ease;
}

.war-nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(215,165,70,0.9),
        rgba(255,215,120,1),
        rgba(215,165,70,0.9),
        transparent
    );

    opacity: 0.6;
}

.war-nav.scrolled {
    background: rgba(15, 12, 10, 0.85);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.45),
        0 0 25px rgba(215,165,70,0.15);
}

.war-nav .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #f2e5c4;
}

.war-nav .nav-link {
    color: #cbbfa3;
    transition: all 0.2s ease;
}

.war-nav .nav-link:hover {
    color: #ffd37a;
    text-shadow: 0 0 6px rgba(255, 211, 122, 0.6);
}

.war-nav .btn-warning {
    background: linear-gradient(180deg, #ffcc66, #d7a546);
    border: none;
    color: #1a1208;
    font-weight: 600;

    box-shadow: 0 0 12px rgba(255, 204, 102, 0.35);
}

.war-nav .btn-warning:hover {
    box-shadow: 0 0 18px rgba(255, 204, 102, 0.6);
}

.panel-card,
.hero-panel {
    background: var(--war-surface);
    border: 1px solid var(--war-border);
    backdrop-filter: blur(8px);
}

.hero-panel {
    background: linear-gradient(135deg, rgba(39, 27, 16, .92), rgba(16, 18, 30, .92));
}

.panel-card,
.auth-box,
.server-preview,
.news-card,
.character-faction-preview,
.equation-box {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .28);
}

.auth-box { max-width: 560px; }
.form-control,
.form-select {
    background: rgba(0, 0, 0, .26);
    border-color: rgba(215, 165, 70, .24);
    color: var(--war-text);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--war-gold);
    box-shadow: 0 0 0 .25rem rgba(215, 165, 70, .15);
    background: rgba(0, 0, 0, .3);
    color: var(--war-text);
}
.form-control::placeholder { color: #b8a98a; }
.server-image { height: 180px; object-fit: cover; display: block; }
.server-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.85) 25%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.25) 60%,
        rgba(0, 0, 0, 0.08) 75%,
        rgba(0, 0, 0, 0.0) 100%
    );
}
.captcha-img {
    width: 170px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid var(--war-border);
}
.equation-box {
    font-size: 1.2rem;
    font-weight: 700;
    padding: .75rem 1rem;
    border-radius: 1rem;
    background: var(--war-surface-2);
    border: 1px solid var(--war-border);
}
.toast-box {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    padding: .85rem 1rem;
    border-radius: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: .25s ease;
    max-width: 320px;
}
.toast-box.visible { opacity: 1; transform: translateY(0); }
.toast-success { background: rgba(35, 82, 44, .95); }
.toast-error { background: rgba(133, 35, 35, .95); }
.character-faction-preview { border: 1px solid var(--war-border); }
.faction-alliance { background: rgba(47, 107, 255, .12); border-color: rgba(47, 107, 255, .5); }
.faction-horde { background: rgba(214, 53, 53, .12); border-color: rgba(214, 53, 53, .5); }
.text-light-emphasis { color: #d8ccb1 !important; }

@media (max-width: 768px) {
    .server-image { height: 150px; }
    .display-5 { font-size: 2.25rem; }
}

/* ===== FIX: читаемость текста на серверах ===== */

/* если карточка обёрнута */
.server-preview {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
}

/* усиливаем градиент */
.server-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.45) 40%,
        rgba(0,0,0,0.85) 100%
    );
}

/* текст всегда поверх */
.server-preview .position-absolute,
.server-preview .p-3,
.server-preview .server-info {
    position: absolute;
    z-index: 2;
}

/* основной текст */
.server-preview h5,
.server-preview .server-title {
    color: #fff !important;
    font-weight: 700;
    text-shadow:
        0 2px 10px rgba(0,0,0,0.95),
        0 0 2px rgba(0,0,0,1);
}

/* вторичный текст */
.server-preview small,
.server-preview .text-light-emphasis {
    color: #e6d9b8 !important;
    text-shadow:
        0 1px 6px rgba(0,0,0,0.95);
}

/* онлайн справа */
.server-preview .server-online {
    color: #f2e5c4;
    text-shadow:
        0 1px 6px rgba(0,0,0,0.95);
}

.server-preview:hover .server-overlay {
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0.6) 45%,
        rgba(0,0,0,0.92) 100%
    );
}

/* === PATCH: server cards readability (append to end of app.css) === */
.server-preview {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
}

.server-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.server-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.45) 40%,
        rgba(0,0,0,0.85) 100%
    );
}

.server-info {
    z-index: 2;
}

.server-preview h5,
.server-preview .server-title {
    color: #fff !important;
}

.server-preview small,
.server-preview .text-light-emphasis,
.server-preview .server-online {
    color: #eee !important;
}

.server-preview .server-online {
    color: #f2e5c4;
    text-shadow: 0 1px 6px rgba(0,0,0,0.95);
}