body { 
    color: #e2e8f0; 
    background-color: #020617; 
}

/* СТИЛИ НАВБАРА */
.nav-hidden {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
.nav-visible {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.fade-enter { opacity: 0; transform: translateY(10px); }
.fade-enter-active { opacity: 1; transform: translateY(0); transition: all 0.4s ease-out; }
/* Применяем display: none для скрытых страниц и Hero-секции на других страницах */
.hidden-page { display: none !important; }

/* --- АНИМАЦИИ ПЛАВАЮЩИХ ИКОНОК --- */
@keyframes float-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.9); } 
    50% { transform: translate(10vw, 20vh) rotate(10deg) scale(1.1); } 
}
@keyframes float-2 {
    0%, 100% { transform: translate(0, 0) rotate(-5deg) scale(1.1); } 
    50% { transform: translate(5vw, -10vh) rotate(5deg) scale(0.9); } 
}
@keyframes float-3 {
    0%, 100% { transform: translate(0, 0) rotate(15deg) scale(1.0); } 
    50% { transform: translate(-10vw, 15vh) rotate(-10deg) scale(1.2); } 
}
@keyframes float-4 {
    0%, 100% { transform: translate(0, 0) rotate(-10deg) scale(1.05); } 
    50% { transform: translate(-15vw, -25vh) rotate(5deg) scale(0.9); } 
}
@keyframes float-5 {
    0%, 100% { transform: translate(0, 0) rotate(5deg) scale(0.8); } 
    50% { transform: translate(20vw, -5vh) rotate(-15deg) scale(1.1); } 
}
@keyframes float-6 {
    0%, 100% { transform: translate(0, 0) rotate(10deg) scale(1.1); } 
    50% { transform: translate(-5vw, 25vh) rotate(-5deg) scale(0.95); } 
}

/* ЕДИНЫЕ СТИЛИ ДЛЯ ВСЕХ 6 ИКОНОК */
.floating-icons-bg::before,
.floating-icons-bg::after,
.floating-icons-bg > div:nth-child(1)::before,
.floating-icons-bg > div:nth-child(1)::after,
.floating-icons-bg > div:nth-child(2)::before,
.floating-icons-bg > div:nth-child(2)::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    color: #2faaff; 
    font-size: 180px; 
    opacity: 0.05; 
    filter: blur(2px);
    text-shadow: 0 0 10px rgba(47, 170, 255, 0.3);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* 1. Геймпад (\f11b) - Топ-Лево - BrandViolet */
.floating-icons-bg::before {
    content: "\f11b"; 
    top: 10%; left: 5%;
    animation-name: float-1; animation-duration: 30s; animation-delay: 0s;
    color: #8639ff; 
}
/* 2. Трофей (\f54f) - Ботом-Право - Accent */
.floating-icons-bg::after {
    content: "\f54f"; 
    bottom: 20%; right: 15%;
    animation-name: float-2; animation-duration: 35s; animation-delay: -5s;
}

/* 3. Кубик (\f522) - Топ-Центр - Accent */
.floating-icons-bg > div:nth-child(1)::before {
    content: "\f522"; 
    top: 5%; left: 40%;
    animation-name: float-3; animation-duration: 25s; animation-delay: -10s;
}
/* 4. Сердце (\f004) - Ботом-Центр - BrandViolet */
.floating-icons-bg > div:nth-child(1)::after {
    content: "\f004"; 
    bottom: 10%; right: 40%;
    animation-name: float-4; animation-duration: 40s; animation-delay: -20s;
    color: #8639ff; 
}
/* 5. Клавиатура (\f11c) - Топ-Право - BrandViolet */
.floating-icons-bg > div:nth-child(2)::before {
    content: "\f11c"; 
    top: 30%; right: 5%;
    animation-name: float-5; animation-duration: 32s; animation-delay: -15s;
    color: #8639ff; 
}
/* 6. Прицел (\f0d0) - Центр-Лево - Accent */
.floating-icons-bg > div:nth-child(2)::after {
    content: "\f0d0"; 
    top: 50%; left: 10%;
    animation-name: float-6; animation-duration: 45s; animation-delay: -25s;
}

/* --- НОВАЯ АНИМАЦИЯ ДЛЯ СТРЕЛКИ СКРОЛЛА --- */
@keyframes bounce-scroll {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.floating-icons-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -1; 
}

/* --- СТИЛИ ВИКИ И ТУЛБАРА --- */
/* Стили для блоков алертов (GitHub style) */
.wiki-alert { padding: 1rem; border: 1px solid rgba(255,255,255,0.1); border-left-width: 5px; border-radius: 0.25rem; margin: 1rem 0; background-color: rgba(30, 41, 59, 0.5); }

.block-danger { border-color: #7f1d1d; background-color: #450a0a; color: #fecaca; } 
.block-danger.wiki-alert { border-left-color: #ef4444; }

.block-warning { border-color: #78350f; background-color: #4a2d0c; color: #fcd34d; } 
.block-warning.wiki-alert { border-left-color: #f59e0b; }

.block-success { border-color: #166534; background-color: #0c4d29; color: #bbf7d0; } 
.block-success.wiki-alert { border-left-color: #22c55e; }

.block-info { border-color: #1e40af; background-color: #102e7b; color: #bfdbfe; }
.block-info.wiki-alert { border-left-color: #3b82f6; }
.alert-content > *:last-child { margin-bottom: 0; }

/* Стили для секций (визуальное разделение) */
.wiki-section {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

/* --- MODAL & TOAST STYLES --- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center; z-index: 100;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-backdrop.active { opacity: 1; pointer-events: auto; }

.modal-content {
    background: #1e293b; border: 1px solid #334155; border-radius: 1rem;
    padding: 2rem; max-width: 500px; width: 90%; transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.modal-backdrop.active .modal-content { transform: scale(1); }

.toast-container {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 110;
    display: flex; flex-direction: column; gap: 1rem;
}
.toast {
    background: #1e293b; border-left: 4px solid; padding: 1rem 1.5rem;
    border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    display: flex; align-items: center; gap: 1rem; min-width: 300px;
    transform: translateX(100%); transition: transform 0.3s ease-out;
    color: white;
}
.toast.show { transform: translateX(0); }
.toast-success { border-color: #22c55e; }
.toast-error { border-color: #ef4444; }
.toast-info { border-color: #3b82f6; }

/* Login Page Styles */
.login-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

/* Drag & Drop Styles */
.wiki-section.dragging { opacity: 0.5; border-color: #2faaff; }
.wiki-section.drag-over { border-color: #2faaff; border-style: dashed; }
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
/* Отключаем взаимодействие с содержимым секций во время перетаскивания, чтобы события падали на саму секцию */
body.is-dragging .wiki-section * { pointer-events: none; }

/* Специфичные стили для главной страницы */
#home-wiki-container {
    background-color: #18212f50;
    padding: 2.5rem;
    border-radius: 1.5rem;
}
#home-wiki-container .wiki-section {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 3rem;
}
#home-wiki-container .wiki-section:last-child { margin-bottom: 0; }
#home-wiki-container .markdown-body {
    font-size: 1.125rem; /* Немного уменьшенный шрифт (text-lg) */
    line-height: 1.8;
}
#home-wiki-container .markdown-body h1 { font-size: 2.5em; margin-top: 0.5em; }
#home-wiki-container .markdown-body h2 { font-size: 2em; margin-top: 0.5em; }
#home-wiki-container .markdown-body h3 { font-size: 1.5em; margin-top: 0.5em; }
#home-wiki-container .markdown-body p { margin-bottom: 1.5rem; color: #e2e8f0; }

/* Markdown Styles */
.markdown-body { line-height: 1.6; }
.markdown-body h1 { font-size: 2em; font-weight: bold; margin-top: 0.2em; margin-bottom: 0.1em; color: white; }
.markdown-body h2 { font-size: 1.5em; font-weight: bold; margin-top: 0.15em; margin-bottom: 0.1em; color: white; }
.markdown-body h3 { font-size: 1.25em; font-weight: bold; margin-top: 0.1em; margin-bottom: 0.1em; color: white; }
.markdown-body ul { list-style-type: disc; padding-left: 1.5rem; margin: 1rem 0; }
.markdown-body ol { list-style-type: decimal; padding-left: 1.5rem; margin: 1rem 0; }
.markdown-body p { margin-bottom: 1rem; line-height: 1.6; }
.markdown-body a { color: #2faaff; text-decoration: underline; }
.markdown-body strong { font-weight: bold; color: #fff; }
.markdown-body em { font-style: italic; }
.markdown-body blockquote { border-left: 4px solid #475569; padding-left: 1rem; color: #94a3b8; margin: 1rem 0; }
.markdown-body code { background: #334155; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: monospace; font-size: 0.9em; }
.markdown-body pre { background: #1e293b; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; border: 1px solid #334155; }
.markdown-body pre code { background: transparent; padding: 0; border-radius: 0; color: #e2e8f0; }
.markdown-body img { max-width: 100%; border-radius: 0.5rem; margin: 1rem 0; }
.markdown-body hr { border-color: #334155; margin: 2rem 0; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.markdown-body th, .markdown-body td { border: 1px solid #334155; padding: 0.5rem; text-align: left; }
.markdown-body th { background-color: #1e293b; font-weight: bold; }

/* Toolbar Style */
#wiki-toolbar {
    position: absolute; 
    transition: all 0.1s ease-out; 
    border: 1px solid rgba(71, 85, 105, 0.5); 
    min-width: 300px; 
}
.toolbar-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    padding: 0; border-radius: 4px; background-color: #334155; color: #e2e8f0;
    font-size: 1rem; transition: background-color 0.2s, color 0.2s, transform 0.1s;
}
.toolbar-btn:hover {
    background-color: #475569; 
    color: #2faaff; 
    transform: scale(1.05);
}

/* Стили для иконок соцсетей */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #1e293b;
    color: #94a3b8;
    transition: all 0.3s;
}
.social-icon:hover {
    transform: scale(1.1);
}
.social-icon.discord:hover { background-color: #5865F2; color: white; }
.social-icon.vk:hover { background-color: #0077FF; color: white; }
.social-icon.telegram:hover { background-color: #26A5E4; color: white; }

/* НОВЫЙ СТИЛЬ для увеличенных иконок соцсетей */
.social-icon-lg {
    width: 44px; 
    height: 44px;
}
.social-icon-lg i {
    font-size: 1.5rem; /* 24px */
}

/* Стили для кастомных иконок (если используются PNG) */
.social-icon img {
    width: 20px;
    height: 20px;
    filter: grayscale(100%);
    transition: filter 0.3s;
}
.social-icon:hover img {
    filter: grayscale(0%);
}