/* =====================================
    CSS: СТИЛИ И АНИМАЦИИ (Расширенная версия)
    ===================================== */
        
/* Цветовая палитра */
:root {
    --color-red: #E74C3C; /* Алый, для акцентов и энергии */
    --color-yellow: #F39C12; /* Яркий желтый, для выделения */
    --color-dark: #0A0A0A; /* Почти черный, основной фон */
    --color-light: #f4f4f4; /* Светлый текст */
    --color-bg-section: #141414; /* Темный фон секций */
    --color-bg-darker: #0D0D0D; /* Еще темнее */
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Arial', sans-serif;
    background-color: var(--color-dark);
    color: var(--color-light);
    overflow-x: hidden;
    scroll-behavior: smooth;
    overflow-y: auto; 
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* --- Динамический Хедер --- */
#dynamic-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 3px 40px; 
    background: rgba(10, 10, 10, 0.98); 
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}
#dynamic-header.visible {
    opacity: 1;
    transform: translateY(0);
}
.game-title {
    width: 120px; 
    filter: drop-shadow(0 0 5px var(--color-red));
}
.cta-button {
    text-decoration: none;
    background-color: var(--color-red);
    color: white;
    padding: 8px 3px;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--color-red);
    margin-left: 10px; /* Отступ между кнопками */
}
.cta-button:hover {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--color-yellow);
}

/* ===================================== */
/* --- Секция Героя (Hero Section) - ЭПИЧЕСКОЕ ПОЯВЛЕНИЕ --- */
/* ===================================== */
#hero-section {
    position: relative;
    height: 100vh;
    background-image: url('images/backthunder.jpg'); 
    background-size: cover;
    background-position: center bottom;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    border-bottom: 3px solid var(--color-red); 
    
    /* ИЗМЕНЕНО: Скрываем все элементы по умолчанию для плавного старта */
    opacity: 0;
    visibility: hidden; 
    transition: opacity 0.5s ease-in, visibility 0s 0.5s;
}

/*
 * ИЗМЕНЕННЫЕ СТИЛИ ДЛЯ БОЛЕЕ ЛЕГКИХ И ОПТИМИЗИРОВАННЫХ АНИМАЦИЙ
 */

/* ================================================= */
/* HERO SECTION ANIMATIONS - ОПТИМИЗИРОВАННЫЕ ВЕРСИИ */
/* ================================================= */

#preview-page.loaded #hero-section {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-out; /* Уменьшаем время перехода */
}

/* 1. hero-title-img (The Spike Cross) */
.hero-title-img {
    width: 400px;
    max-width: 90%;
    filter: drop-shadow(0 0 15px var(--color-red)); /* Уменьшаем тень для меньшей нагрузки */
    opacity: 0; 
    /* НОВОЕ: Более легкая анимация - просто мягкое появление и небольшой подъем */
    animation: simple-fade-in-up 1s ease-out both; 
    /* УДАЛЕНО: Сложный epic-scale-in */
}
/* В этой более простой анимации не нужно переключать opacity во время play-state */
.hero-title-img[style*="animation-play-state: running"] {
    opacity: 1; 
}


/* 2. hero-subtitle (Волейбол - не просто Игра.) */
.hero-subtitle {
    font-size: 1.5em;
    margin-top: 20px;
    color: var(--color-light);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    opacity: 0; 
    /* НОВОЕ: Более легкая анимация с задержкой */
    animation: simple-fade-in-up 0.8s ease-out 0.6s both; 
    /* УДАЛЕНО: dramatic-fade-up */

    /* ДОБАВЛЕНО: Для лучшей работы на мобильных, используем max-width и центрирование текста, если необходимо */
    max-width: 90%; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 3. cta-button (Установить Сейчас!) */
.hero-content .cta-button {
    margin-top: 30px !important;
    opacity: 0; 
    /* НОВОЕ: Более легкая анимация с большей задержкой */
    animation: simple-fade-in 0.6s ease-out 1.2s both; 
    /* УДАЛЕНО: cta-rotate-in (включает transform-origin: bottom, который может быть тяжелым) */
    transform-origin: center; /* Сброс на более безопасный origin */
    padding: 12px 24px; /* Увеличиваем размер */
    font-size: 1.2em;
}

/* 4. scroll-indicator */
.scroll-indicator {
    /* ... (оставляем существующие стили для glow и bounce) */
    position: relative;
    margin-top: 40px;
    left: 0;
    transform: none;
    text-align: center;
    color: var(--color-yellow);
    font-size: 0.9em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.9);
    z-index: 3;
    opacity: 0;

    /* Изменяем задержки для соответствия новому потоку */
    animation: fade-in-glow 1s ease-out 1.8s both, /* Снижена задержка */
               scroll-bounce 1.5s infinite 2.3s; /* Снижена задержка */
}


/* ================================================= */
/* ОПТИМИЗИРОВАННЫЕ @KEYFRAMES */
/* ================================================= */

/* Новая, легкая анимация - плавное появление и небольшой подъем */
@keyframes simple-fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px); /* Небольшой сдвиг, использует 3D-трансформации для оптимизации */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Новая, легкая анимация - просто плавное появление */
@keyframes simple-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Оставляем fade-in-glow и scroll-bounce без изменений, так как они уже оптимизированы */
@keyframes fade-in-glow {
    0% {
        opacity: 0;
        text-shadow: 0 0 0 rgba(243, 156, 18, 0);
    }
    50% {
        opacity: 0.5;
        text-shadow: 0 0 5px rgba(243, 156, 18, 0.5);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(243, 156, 18, 0.9);
    }
}

@keyframes scroll-bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-5px);}
    60% {transform: translateY(-2px);}
}

/* --- Общие стили для секций контента --- */
.content-section {
    padding: 50px 0;
    background-color: var(--color-bg-section);
    border-bottom: 1px solid #222;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    position: relative; 
}
.content-section.in-view {
    opacity: 1;
    transform: translateY(0);
}
.content-section h2 {
    text-align: center;
    font-size: 3em;
    color: var(--color-red);
    margin-bottom: 60px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.6);
}
.content-section h3 {
    color: var(--color-yellow);
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.8em;
}

/* --- Секция "Сюжет" --- */
.story-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: center;
}
.story-text p {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 25px;
    border-left: 3px solid var(--color-yellow);
    padding-left: 15px;
}
.story-images {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.story-images img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}
.story-images img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9);
}

/* --- Секция "Персонажи" --- */
#characters-section {
    background-color: var(--color-bg-darker);
    border-bottom: 3px solid var(--color-yellow);
}
.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 50px;
}
.character-card {
    background: #1c1c1c;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out, background 0.4s;
    border: 1px solid #333;
}
.character-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 40px rgba(243, 156, 18, 0.4);
    background: #2a2a2a;
}
.character-card img {
    width: 100%;
    height: 350px; 
    object-fit: cover; 
    display: block;
    border-bottom: 3px solid var(--color-red);
}
.character-card h3 {
    margin: 20px 0 5px;
    color: var(--color-yellow);
    font-size: 1.8em;
    text-shadow: 0 0 5px rgba(243, 156, 18, 0.4);
}
.character-card p {
    font-size: 0.95em;
    color: #ccc;
    padding: 0 20px 20px;
    line-height: 1.6;
}
.char-role {
    font-size: 0.9em;
    color: var(--color-red);
    font-style: italic;
    margin-bottom: 10px;
}
/* --- Стили для кнопки "Персонажи" в секции героев --- */
.cta-char-button {
    display: inline-block;
    text-decoration: none;
    background-color: transparent;
    color: var(--color-yellow);
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.2em;
    border: 2px solid var(--color-yellow);
    transition: all 0.4s ease-out;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.4);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cta-char-button i {
    margin: 0 5px;
    transition: transform 0.4s;
}
.cta-char-button:hover {
    color: var(--color-dark); 
    border-color: var(--color-red); 
    box-shadow: 0 0 20px var(--color-red); 
    transform: translateY(-3px);
}
.cta-char-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-yellow);
    transform: translateX(-100%); 
    transition: transform 0.4s ease-out;
    z-index: -1;
}
.cta-char-button:hover::before {
    transform: translateX(0); 
}
.cta-char-button:hover .fa-arrow-right {
    transform: translateX(5px); 
}


/* --- Секция "Погружение" --- */
#immersion-section {
    background-image: url('images/finalstagebackground.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 150px 0;
    text-align: center;
    position: relative;
    border-bottom: 1px solid #222;
}
#immersion-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1;
}
#immersion-section .container {
    position: relative;
    z-index: 2;
}
.immersion-text {
    font-size: 2em;
    font-style: italic;
    color: white;
    text-shadow: 0 0 10px var(--color-red);
    margin-bottom: 20px;
}
.immersion-player {
    width: 450px; 
    max-width: 90%;
    margin: 40px auto 0;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(243, 156, 18, 0.8); 
    border: 3px solid var(--color-yellow);
    animation: glow 2s infinite alternate; 
}

/* --- Секция "Геймплей и Режимы" --- */
#gameplay-section {
    background-color: var(--color-dark);
    border-bottom: 3px solid var(--color-red);
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.feature-item {
    background-color: #1c1c1c;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    border-top: 5px solid var(--color-red);
    transition: all 0.5s ease-out;
    position: relative;
    overflow: hidden; 
}
.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: all 0.7s;
}
.feature-item:hover::before {
    left: 100%;
}
.feature-item i {
    font-size: 3em;
    color: var(--color-red);
    margin-bottom: 20px;
    display: block;
    transition: transform 0.3s;
}
.feature-item:hover i {
    transform: scale(1.1) rotate(5deg);
}
.feature-item:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.5);
}
.feature-item ul {
    text-align: left;
    padding-left: 20px;
    margin-top: 15px;
    list-style: none; /* Удаляем стандартные маркеры */
}
.feature-item ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    color: #ddd;
}
.feature-item ul li::before {
    content: '»'; /* Заменяем маркер на стрелку */
    color: var(--color-yellow);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- Секция "Разработка" --- */
#development-section {
    background-color: var(--color-bg-section);
    border-bottom: 3px solid var(--color-yellow);
}
#development-section .container {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}
.dev-text {
    flex: 2;
    min-width: 300px;
}
.dev-image {
    flex: 1;
    min-width: 250px;
    text-align: center;
    margin-top: 20px;
}
.dev-image img {
    width: 100%;
    max-width: 350px; 
    height: auto; 
    object-fit: cover; 
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    border: 1px solid #333; 
    transition: transform 0.5s ease-out;
}
.dev-image img:hover {
    transform: scale(1.03);
}
#development-section h2 {
    color: var(--color-yellow);
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.6);
}
.vision-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 8px;
    margin-top: 30px;
    border-left: 4px solid var(--color-red);
    transition: background 0.3s;
}
/* --- Стили для галереи детства в секции "Разработка" --- */
.dev-childhood-gallery {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
    margin: 30px 0;
    justify-content: center; 
}
.dev-childhood-gallery img {
    max-width: 100%;
    width: 180px; 
    height: 120px; 
    object-fit: cover; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-yellow); 
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.dev-childhood-gallery img:hover {
    transform: scale(1.1) rotate(2deg); 
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.6); 
}
@media (max-width: 600px) {
    .dev-childhood-gallery img {
        width: 100%; 
        height: 180px; 
    }
}
/* --- Секция "Магазин и Косметика" --- */
#shop-section {
    background-color: var(--color-bg-darker);
    text-align: center;
    border-bottom: 3px solid var(--color-red);
}
/* ... (Оставьте старый shop-image-container и его стили без изменений) ... */

/* НОВАЯ СЕТКА КАТЕГОРИЙ */
.shop-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.shop-category-card {
    position: relative;
    padding: 40px 20px;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--color-yellow);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    transition: transform 0.4s, box-shadow 0.4s;
    min-height: 350px; /* Для визуального баланса */
}
.shop-category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(243, 156, 18, 0.5);
}
.shop-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Уменьшаем прозрачность фонового изображения */
    background: rgba(10, 10, 10, 0.85); 
    z-index: 1;
}

/* Фоны для категорий (используйте загруженные вами изображения, если хотите, или просто цвет) */
.equip-bg {
    background-image: url('images/backnewmain.jpg'); /* Фон для Экипировки */
}
.skin-bg {
    background-image: url('images/vs_siwoo.jpg'); /* Фон для Скинов */
}
.ball-bg {
    background-image: url('images/cs_mountain.jpg'); /* Фон для Мячей */
}

.shop-category-card * {
    position: relative;
    z-index: 2;
}

.shop-category-card i {
    font-size: 3em;
    color: var(--color-red);
    margin-bottom: 15px;
    transition: color 0.3s;
}
.shop-category-card:hover i {
    color: var(--color-yellow);
}
.shop-category-card h3 {
    color: var(--color-light);
    font-size: 2em;
    margin-bottom: 15px;
    text-shadow: 0 0 5px #000;
}
.shop-category-card p {
    color: #ccc;
    font-size: 1em;
    margin-bottom: 25px;
}

/* Бэджики Редкости */
.rarity-badges {
    margin-bottom: 20px;
    height: 30px; /* Занимает место, даже если пусто */
}
.badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    margin: 0 5px;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.badge.common { background-color: #6c757d; }
.badge.rare { background-color: #17a2b8; }
.badge.epic { background-color: #9c27b0; } /* Пурпурный */
.badge.legendary { background-color: #ffc107; color: #333; } /* Золотой */
.badge.mythic { background-color: #e74c3c; box-shadow: 0 0 10px var(--color-red); } /* Алый с свечением */

/* Кнопка действия в магазине */
.shop-cta-btn {
    display: inline-block;
    text-decoration: none;
    background-color: var(--color-red);
    color: white;
    padding: 10px 25px;
    border-radius: 50px; /* Круглая кнопка */
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--color-red);
}
.shop-cta-btn:hover {
    background-color: var(--color-yellow);
    color: var(--color-dark);
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--color-yellow);
}

/* --- Секция "Призыв к действию / Обратная связь" --- */
#call-to-action-section {
    background-color: var(--color-red);
    padding: 80px 0;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}
#call-to-action-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: rotate-bg 20s linear infinite;
    z-index: 1;
}
#call-to-action-section .container {
    position: relative;
    z-index: 2;
}
#call-to-action-section h2 {
    color: white;
    font-size: 3.5em;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    margin-bottom: 30px;
}
.social-links a {
    color: white;
    font-size: 2em;
    margin: 0 15px;
    transition: transform 0.3s, color 0.3s;
    display: inline-block;
}
.social-links a:hover {
    transform: translateY(-5px) scale(1.1);
    color: var(--color-yellow);
}

/* --- Футер --- */
footer {
    text-align: center;
    padding: 30px;
    background-color: var(--color-dark);
    color: #666;
    font-size: 0.9em;
    border-top: 1px solid #1c1c1c;
}

/* ===================================== */
/* --- Keyframe Анимации (НОВЫЕ И СТАРЫЕ) --- */
/* ===================================== */
/* Эпичное появление логотипа */
@keyframes epic-scale-in {
    0% { 
        opacity: 0; 
        transform: scale(0.5) translateY(50px); 
        filter: drop-shadow(0 0 5px var(--color-red)) blur(10px); 
    }
    60% { 
        opacity: 1; 
        transform: scale(1.05) translateY(-5px); 
        filter: drop-shadow(0 0 30px var(--color-red)) blur(0); 
    }
    80% { 
        transform: scale(0.98) translateY(0); 
    }
    100% { 
        transform: scale(1); 
        filter: drop-shadow(0 0 20px var(--color-red)); 
        opacity: 1;
    }
}

/* Более драматичное появление подзаголовка */
@keyframes dramatic-fade-up {
    0% { 
        opacity: 0; 
        transform: translateY(40px);
        letter-spacing: 0.5em; 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
        letter-spacing: normal;
    }
}

/* Вращение и пульсация для кнопки */
@keyframes cta-rotate-in {
    0% { opacity: 0; transform: rotateX(90deg) scale(0.8); }
    100% { opacity: 1; transform: rotateX(0deg) scale(1); }
}

/* Старые анимации */
@keyframes bounce-in {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
@keyframes slide-in {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}
@keyframes glow {
    0% { box-shadow: 0 0 20px rgba(243, 156, 18, 0.6), 0 0 30px rgba(243, 156, 18, 0.4); }
    100% { box-shadow: 0 0 30px rgba(243, 156, 18, 0.9), 0 0 45px rgba(243, 156, 18, 0.6); }
}
@keyframes rotate-bg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Адаптивность --- */
@media (max-width: 900px) {
    .story-grid {
        grid-template-columns: 1fr;
    }
    .character-card img {
        height: 250px; 
    }
    #dynamic-header {
        padding: 3px 20px;
    }
    .game-title {
        width: 100px;
    }
    .dev-image {
        order: -1; 
    }
}
@media (max-width: 768px) {
    /* АДАПТИВНОСТЬ: ИСПРАВЛЕНИЕ ХЕДЕРА */
    #dynamic-header {
        flex-direction: column;
        padding: 10px 20px;
        align-items: center;
    }
    .header-nav { 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center;
        gap: 10px; 
        margin-top: 10px; 
    }
    .header-nav a {
        padding: 5px 10px;
        font-size: 0.9em;
    }
}
@media (max-width: 600px) {
    .container {
        padding: 20px 15px;
    }
    .content-section h2 {
        font-size: 2.2em;
        margin-bottom: 40px;
    }
    .story-grid, .feature-grid, .characters-grid, .shop-grid {
        gap: 20px;
    }
    .immersion-text {
        font-size: 1.5em;
    }
    .dev-childhood-gallery img {
        width: 100%; 
        height: 180px; 
    }
}
/* --- Стили для имени разработчика с эффектом свечения --- */
.dev-name-glow {
    color: #87CEEB; /* Небесно-голубой цвет */
    font-weight: bold;
    text-shadow: 0 0 8px rgba(135, 206, 235, 0.9), /* Светящийся эффект */
                 0 0 15px rgba(135, 206, 235, 0.4);
    transition: text-shadow 0.3s ease-in-out;
}

.dev-name-glow:hover {
    text-shadow: 0 0 15px #87CEEB,
                 0 0 25px rgba(135, 206, 235, 0.8);
}
.modal-overlay {
    /* ... (ваш код без изменений) ... */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none; /* Скрыто по умолчанию */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.character-modal-content {
    /* *** ИСПРАВЛЕНИЕ: Добавляем ограничение по высоте для прокрутки *** */
    max-height: 95vh; /* Модальное окно не превысит 95% высоты экрана */
    /* *************************************************************** */
    
    background: #111;
    border-radius: 15px;
    box-shadow: 0 0 40px rgba(243, 156, 18, 0.5);
    max-width: 700px;
    width: 90%;
    padding: 25px;
    color: #eee;
    position: relative;
    /* Это свойство уже было, оно включает прокрутку, когда контент превышает max-height */
    overflow-y: scroll; 
    
    transform: translateY(-50px);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    border: 3px solid var(--color-red, #ff5733); /* Добавляем рамку в цвет акцента */
}
        
        .modal-overlay.active .character-modal-content {
            transform: translateY(0);
            opacity: 1;
        }

        .modal-close-button {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            color: var(--color-red, #ff5733);
            font-size: 2em;
            cursor: pointer;
            transition: color 0.3s;
        }
        .modal-close-button:hover {
            color: var(--color-yellow, #f39c12);
        }
        
        .modal-details-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 20px;
        }

        .modal-details-grid img {
            width: 100%;
            max-height: 400px;
            object-fit: cover;
            border-radius: 10px;
            border: 2px solid #555;
        }

        .modal-char-role {
            font-size: 1.1em;
            color: var(--color-yellow, #f39c12);
            font-weight: bold;
            margin: 10px 0;
            padding: 5px 0;
            border-bottom: 1px dashed #333;
        }
        
        .modal-details-grid h3 {
            color: var(--color-red, #ff5733);
            font-size: 2.2em;
            margin-bottom: 10px;
        }
        
        .modal-details-grid p {
            font-size: 1em;
            line-height: 1.7;
        }

        @media (min-width: 768px) {
            .modal-details-grid {
                grid-template-columns: 2fr 3fr; /* Изображение слева, текст справа */
                text-align: left;
            }
            .modal-details-grid img {
                height: 100%;
            }
        }
        
        /* Стили для новых карточек, чтобы они не были сразу анимированы как 'in-view' */
        .character-card.newly-added {
            opacity: 0;
            transform: translateY(20px);
            animation: card-slide-in 0.5s ease-out forwards;
        }
        @keyframes card-slide-in {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .character-modal-content::-webkit-scrollbar {
    width: 7px; /* Ширина полосы */
}

/* 2. Фон (трек) полосы прокрутки */
.character-modal-content::-webkit-scrollbar-track {
    background: #1e1e1e; /* Темный фон, чуть светлее фона модального окна (#111) */
    border-radius: 10px;
    border: 1px solid #282828; /* Тонкая рамка для гармонии */
}

/* 3. Ползунок (thumb) полосы прокрутки */
.character-modal-content::-webkit-scrollbar-thumb {
    /* Основной цвет - красный акцент (как рамка) */
    background-color: var(--color-red, #ff5733); 
    border-radius: 14px; /* Скругление, как у модального окна */
    /* Тень, чтобы имитировать свечение карточки */
    box-shadow: 0 0 5px rgba(255, 87, 51, 0.5);
}

/* 4. Ползунок при наведении (состояние hover) */
.character-modal-content::-webkit-scrollbar-thumb:hover {
    /* Цвет при наведении - желтый акцент (как hover-эффект кнопки) */
    background-color: var(--color-yellow, #f39c12); 
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.8);
}
/* ========================================================= */
/* НОВЫЕ СТИЛИ ДЛЯ ДЕТАЛЕЙ В МОДАЛЬНОМ ОКНЕ */
/* ========================================================= */

.modal-section-box {
    margin-top: 15px;
    padding: 10px 0;
    border-top: 1px dashed #333;
}

.modal-section-box h4 {
    color: var(--color-yellow, #f39c12);
    font-size: 1.2em;
    margin-bottom: 5px;
}

.modal-quote {
    font-style: italic;
    color: #ccc;
    border-left: 3px solid var(--color-red, #ff5733);
    padding-left: 10px;
    margin-left: 5px;
}

.modal-motto {
    font-style: italic;
    color: var(--color-red, #ff5733);
    font-size: 0.9em;
    text-align: center;
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px dashed #333;
}

.modal-additional-info p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 5px 0;
}

.modal-additional-info strong {
    color: #fff;
    font-weight: bold;
}
/* Пример CSS для вики-таблиц и аккордеонов. Добавьте в styletsc.css */

.wiki-accordion-section {
    margin-top: 20px;
    border: 1px solid #333; /* Darker border */
    border-radius: 8px;
    overflow: hidden; /* For smooth folding */
}

.wiki-accordion-title {
    background-color: #1a1a1a; /* Dark background */
    color: #f88c00; /* Orange text */
    padding: 15px;
    cursor: pointer;
    font-size: 1.2em;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.wiki-accordion-content {
    padding: 15px;
    background-color: #222; /* Slightly lighter background for content */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

/* Стили для таблиц */
.wiki-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.9em;
}

.wiki-table th, .wiki-table td {
    border: 1px solid #444;
    padding: 10px;
    text-align: left;
}

.wiki-table th {
    background-color: #333;
    color: #fff;
    font-weight: bold;
}

.wiki-table tr:nth-child(even) {
    background-color: #282828; /* Zebra striping */
}
/* Стили для таблицы Wiki-Инфо */
.wiki-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.9em;
}

.wiki-info-table th, .wiki-info-table td {
    padding: 10px;
    border: 1px solid #333;
    text-align: left;
}

.wiki-info-table th {
    background-color: #2a2a2a;
    color: #f88c00; /* Цвет заголовков таблицы */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.95em;
}

.wiki-info-table td:first-child {
    /* Стиль для левой колонки (Раздел) */
    font-weight: bold;
    color: #ccc;
    width: 30%; /* Делаем колонку "Раздел" узкой */
}

.wiki-info-table td p {
    margin: 0; /* Убираем лишние отступы внутри ячеек */
}
/* Стили для контейнера содержимого Wiki в левом блоке */
.wiki-content-list {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #444; /* Граница для выделения блока */
    border-radius: 5px;
    background-color: #1f1f1f;
}

.wiki-content-list h6 {
    font-size: 1.0em;
    color: #fff;
    margin-bottom: 5px;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}

.wiki-content-list ul {
    list-style: none; /* Убираем стандартные маркеры */
    padding: 0;
    margin: 10px 0;
    font-size: 0.9em;
}

.wiki-content-list li {
    padding: 3px 0;
}

.wiki-content-list li a {
    color: #007bff; /* Синий цвет для ссылки */
    text-decoration: none;
}

.wiki-content-list li a:hover {
    text-decoration: underline;
    color: #4da6ff;
}

/* Кнопка "Открыть полную Wiki" */
.wiki-button-main {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px;
    margin-top: 10px;
    background-color: #f88c00; /* Оранжевый акцент */
    color: #1a1a1a;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.wiki-button-main:hover {
    background-color: #ffaa33;
}
/* Кнопка "Открыть полную Wiki" */
.wiki-button-main {
    display: block;
    /* Установим ширину чуть меньше 100% для небольших отступов */
    width: 90%; 
    
    /* ГЛАВНОЕ ИЗМЕНЕНИЕ: Центрирует блочный элемент по горизонтали */
    margin: 10px auto 0 auto; 
    
    text-align: center;
    padding: 8px;
    background-color: #f88c00; /* Оранжевый акцент */
    color: #1a1a1a;
    font-weight: bold;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.wiki-button-main:hover {
    background-color: #ffaa33;
}

/* Дополнительно, чтобы Содержание не выглядело "прилипшим" */
.wiki-content-list {
    padding: 10px; /* Добавим небольшой внутренний отступ для эстетики */
    border: 1px solid #444; 
    border-radius: 5px;
    background-color: #1f1f1f;
}
/* =================================================================
   СТИЛИ ДЛЯ НОВОЙ СЕКЦИИ "О ПРОЕКТЕ / WIKI"
   ================================================================= */

/* Основной контейнер раздела */
#about-wiki {
    padding: 40px 0;
    background-color: #1a1a1a; /* Тот же темный фон */
}

/* Заголовок подраздела */
.subsection-title {
    color: #f8f8f8;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 1.8em;
}

/* Общий стиль для описания секции */
.section-description {
    max-width: 800px;
    margin: 0 auto 30px auto;
    font-size: 1.1em;
    line-height: 1.6;
    text-align: center;
    color: #cccccc;
}

/* Таблица с обзором разделов */
.wiki-content-overview {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden; /* Для красивых углов */
}

/* Адаптация существующего .wiki-table для этой секции */
.wiki-table.full-width {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.wiki-table.full-width th,
.wiki-table.full-width td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #333333;
}

.wiki-table.full-width thead th {
    background-color: #2a2a2a; /* Чуть темнее фон для заголовка */
    color: #f88c00; /* Оранжевый акцент */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Стиль для статусов (Завершено, В разработке и т.д.) */
.wiki-table.full-width td {
    background-color: #1f1f1f;
    color: #f8f8f8;
}

.wiki-table.full-width tr:hover td {
    background-color: #242424; /* Легкий эффект при наведении */
}

/* Цветовая индикация статуса */
.status-complete {
    color: #33cc33; /* Зеленый */
    font-weight: bold;
}

.status-wip {
    color: #ffcc00; /* Желтый/Оранжевый */
    font-style: italic;
}

.status-planned {
    color: #6699ff; /* Синий */
    opacity: 0.8;
}
/* =================================================================
   МЕДИА-ЗАПРОСЫ ДЛЯ АДАПТАЦИИ (МОБИЛЬНЫЕ УСТРОЙСТВА)
   ================================================================= */
@media (max-width: 600px) {
    
    /* Сокращаем паддинги для экономии места в таблице */
    .wiki-table.full-width th,
    .wiki-table.full-width td {
        padding: 8px 10px;
        font-size: 0.9em; /* Чуть уменьшаем шрифт */
    }
    
    /* Сокращаем ширину колонки статуса для небольших экранов */
    .wiki-table.full-width td:nth-child(3) { 
        width: 60px; /* Фиксируем небольшую ширину для колонки статуса */
        text-align: center; /* Центрируем текст "Готово", "В Раб." */
    }

    /* Скрываем полный текст (если вы его оставили в HTML) */

}
/* =================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ СКАЧИВАНИЯ (/download)
   ================================================================= */
.download-page {
    /* Чтобы не было конфликта с body на главной странице */
    overflow-x: hidden; 
}

#download-section {
    min-height: 100vh;
    padding-top: 100px; /* Отступ от хедера */
    padding-bottom: 50px;
    background-color: #121212; /* Более темный фон для контраста */
}

.download-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.download-banner {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.download-banner img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.download-content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    text-align: left;
    margin-top: 40px;
    justify-content: center;
}

.download-text {
    flex: 1 1 500px; 
    padding-top: 20px;
}

.download-text h1 {
    color: #f88c00;
    font-size: 2.5em;
    margin-bottom: 15px;
}

.download-text p {
    color: #cccccc;
    line-height: 1.8;
    margin-bottom: 20px;
}

.store-links {
    flex: 1 1 300px; 
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    padding: 20px;
    background-color: #1f1f1f;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.store-links h3 {
    color: #f8f8f8;
    margin-bottom: 15px;
}

.store-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    color: white; /* Цвет текста по умолчанию */
}

.store-button i {
    font-size: 1.5em;
    margin-right: 15px;
}

.store-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(248, 140, 0, 0.4); /* Оранжевый акцент при наведении */
}

/* Цвета кнопок */
.steam-button {
    background-color: #1b2838;
    border: 2px solid #66c0f4;
    color: #66c0f4;
}

.appstore-button {
    background-color: #007aff;
    color: white;
}

.googleplay-button {
    background-color: #3ddc84;
    color: #1a1a1a;
}

/* Эффекты наведения */
.appstore-button:hover {
     background-color: #3e9bff;
     box-shadow: 0 5px 15px rgba(0, 122, 255, 0.4);
}

.googleplay-button:hover {
     background-color: #6edda4;
     box-shadow: 0 5px 15px rgba(61, 220, 132, 0.4);
}

.steam-button:hover {
     background-color: #2b3a4a;
     box-shadow: 0 5px 15px rgba(102, 192, 244, 0.4);
}

/* Медиа-запросы для мобильных */
@media (max-width: 800px) {
    .download-content-grid {
        flex-direction: column;
    }
    .download-text, .store-links {
        flex: 1 1 100%;
        text-align: center;
    }
    .download-text h1 {
        font-size: 2em;
    }
    .store-links {
        padding: 15px;
    }
}