/* cache-bust: 20260727-0645 */
/* Elyon Aion — World of Aion clone theme */



        /* Reset */

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body { height: 100%; overflow-x: hidden; }

        body { 

            font-family: 'Roboto', sans-serif; 

            background: transparent; 

            color: #e8e8e8; 

            display: flex; flex-direction: column; 

            min-height: 100vh; 

        }



        /* Видео фон */

        html { background: #0a0f19; }
        .site-video-background {
            position: fixed; top:0; left:0; width:100vw; height:100vh;
            z-index: -1; overflow:hidden; pointer-events:none;
        }
        .site-video-background video {
            width: 100vw; height: 100vh; object-fit: cover;
        }
        .site-video-overlay {
            position:absolute; top:0; left:0; width:100%; height:100%;
            background: linear-gradient(rgba(10,10,18,0.45), rgba(5,8,14,0.65));
        }



        /* Верхнее меню */

        .navbar-fixed-top {

            position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;

            background: rgba(10,15,25,0.4); backdrop-filter: blur(20px);

            border: 1px solid rgba(52,152,219,0.4); border-radius: 0 0 15px 15px;

            padding: 8px 20px; transition: all 0.3s;

            display: flex; align-items: center; justify-content: space-between;

            box-shadow: 0 2px 15px rgba(0,0,0,0.3);

        }

        .navbar-brand {

            display: flex; align-items: center;

            margin-right: 30px;

        }

        .navbar-brand img { height: 35px; }



        .mobile-brand-title {

            display: none;

            flex: 1; text-align: center; margin: 0 10px;

        }

        .server-title-mobile {

            font-family: 'Marcellus', serif; 

            font-size: 1.4rem;

            font-weight: 700;

            color: transparent;

            background: linear-gradient(135deg, #ffffff 0%, #3498db 100%); 

            -webkit-background-clip: text;

            mix-blend-mode: screen; 

            opacity: 0.95;

            margin: 0; 

        }



        .nav-main {

            flex: 1; display: flex; justify-content: center; align-items: center;

        }

        .nav-main ul {

            display: flex; list-style: none; gap: 25px; margin: 0;

        }

        .nav-main li {

            position: relative;

        }

        .nav-main li a { 

            color: #e8e8e8 !important; font-size: 13px; font-weight: 600; 

            padding: 8px 15px; text-transform: uppercase; text-decoration: none;

            border-radius: 8px; transition: all 0.3s; display: flex; align-items: center;

        }

        .nav-main li a:hover { 

            color: #3498db !important; background: rgba(52,152,219,0.2); 

            transform: translateY(-2px);

        }



        /* Выпадающие меню: стиль взят с языкового переключателя */

        .dropdown { position: relative; }

        .dropdown > a::after {

            content: '▼';

            margin-left: 5px; 

            font-size: 9px;

            transition: transform 0.3s;

        }

        .dropdown:hover > a::after {

            transform: rotate(180deg);

        }



        /* Единый стиль dropdown (как у языка) */

        .dropdown-menu { 

            display: none;

            position: absolute; 

            top: 100%; 

            right: 0;        /* align like language menu */

            left: auto;

            margin-top: 8px;

            background: rgba(10,15,25,0.98); 

            backdrop-filter: blur(25px);

            border: 1px solid rgba(52,152,219,0.4); 

            border-radius: 10px; 

            padding: 8px 0;

            min-width: 160px;

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

            z-index: 1001; 

            animation: dropdownAppear 0.22s ease;

            opacity: 0;

            transform-origin: top right;

        }

        @keyframes dropdownAppear {

            from { opacity: 0; transform: translateY(-6px) scale(0.98); }

            to   { opacity: 1; transform: translateY(0) scale(1); }

        }

        .dropdown:hover .dropdown-menu { display: block; opacity: 1; }



        .dropdown-menu::before {

            content: '';

            position: absolute;

            top: -8px;

            right: 20px;

            width: 0;

            height: 0;

            border-left: 8px solid transparent;

            border-right: 8px solid transparent;

            border-bottom: 8px solid rgba(52,152,219,0.4);

        }



        .dropdown-menu li { margin: 0; }

        .dropdown-menu li a {

            color: #e8e8e8; 

            padding: 10px 20px; 

            transition: all 0.3s;

            border-radius: 0; 

            margin: 0; 

            display: block;

            font-size: 12px; 

            text-transform: uppercase;

            text-decoration: none;

        }

        .dropdown-menu li a:hover {

            background: rgba(52,152,219,0.3); 

            color: white;

        }

        .divider { 

            height: 1px; 

            background: rgba(52,152,219,0.3); 

            margin: 6px 0; 

        }



        .nav-account {

            display: flex; align-items: center; gap: 8px;

        }

        .nav-account a { 

            color: #e8e8e8 !important; font-size: 13px; font-weight: 600; 

            padding: 8px 15px; text-transform: uppercase; border-radius: 8px; 

            transition: all 0.3s; text-decoration: none;

        }

        .nav-account a:hover { 

            color: #3498db !important; background: rgba(52,152,219,0.2); 

        }



        /* Переключатель языков - выпадающее меню */

        .language-dropdown { position: relative; margin-right: 20px; margin-left: 20px; }

        .lang-trigger {

            display: flex; align-items: center; padding: 8px 15px; color: #ffffff !important;

            font-size: 13px; font-weight: 600; text-transform: uppercase; text-decoration: none;

            border-radius: 8px; transition: all 0.3s ease; cursor: pointer; white-space: nowrap;

        }

        .lang-trigger::after {

            content: '▼'; margin-left: 8px; font-size: 10px; transition: transform 0.3s ease;

        }

        .language-dropdown:hover .lang-trigger::after { transform: rotate(180deg); }

        .language-dropdown:hover .lang-trigger { color: #3498db !important; background: rgba(52,152,219,0.2); }



        .lang-dropdown-menu {

            display: none; position: absolute; top: 100%; right: 0; margin-top: 8px;

            background: rgba(10,15,25,0.98); backdrop-filter: blur(25px);

            border: 1px solid rgba(52,152,219,0.4); border-radius: 10px; padding: 8px 0;

            min-width: 120px; box-shadow: 0 8px 25px rgba(0,0,0,0.4); z-index: 1002; animation: langDropdownAppear 0.22s ease;

        }

        @keyframes langDropdownAppear { from {opacity:0; transform:translateY(-6px);} to {opacity:1; transform:translateY(0);} }

        .language-dropdown:hover .lang-dropdown-menu { display: block; }

        .lang-dropdown-menu::before { content:''; position:absolute; top:-8px; right:20px; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid rgba(52,152,219,0.4); }



        .lang-option { display:block; padding:10px 20px; color:#fff; font-size:13px; font-weight:600; text-transform:uppercase; text-decoration:none; }

        .lang-option:hover { background: rgba(52,152,219,0.3); color: #fff; }

        .lang-option.active { background: rgba(52,152,219,0.2); color: #3498db; }



        /* Кнопка гамбургера */

        .navbar-toggle {

            display: none;

            background: none;

            border: none;

            color: #e8e8e8;

            cursor: pointer;

            padding: 5px 10px;

            width: 40px;

            height: 40px;

            position: relative;

            align-items: center;

            justify-content: center;

        }

        

        .hamburger {

            display: block;

            width: 24px;

            height: 2px;

            background: #e8e8e8;

            position: relative;

            transition: all 0.3s;

        }

        

        .hamburger::before,

        .hamburger::after {

            content: '';

            position: absolute;

            width: 24px;

            height: 2px;

            background: #e8e8e8;

            left: 0;

            transition: all 0.3s;

        }

        

        .hamburger::before {

            top: -8px;

        }

        

        .hamburger::after {

            top: 8px;

        }

        

        .navbar-toggle.active .hamburger {

            background: transparent;

        }

        

        .navbar-toggle.active .hamburger::before {

            transform: rotate(45deg);

            top: 0;

        }

        

        .navbar-toggle.active .hamburger::after {

            transform: rotate(-45deg);

            top: 0;

        }



        /* ПЕРЕРАБОТАННОЕ МОБИЛЬНОЕ МЕНЮ - ПРОСТОЙ ПОДХОД */

        .mobile-menu {

            position: fixed;

            top: 0;

            left: -100%;

            width: 85%;

            max-width: 320px;

            height: 100vh;

            background: rgba(10,15,25,0.98);

            backdrop-filter: blur(25px);

            border-right: 1px solid rgba(52,152,219,0.5);

            z-index: 1001;

            overflow-y: auto;

            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            padding: 0;

        }

        

        .mobile-menu.active {

            left: 0;

        }

        

        .mobile-menu-header {

            padding: 20px 15px;

            border-bottom: 1px solid rgba(52,152,219,0.3);

            display: flex;

            align-items: center;

            justify-content: space-between;

            background: rgba(15,20,30,0.8);

        }

        

        .mobile-menu-title {

            font-family: 'Marcellus', serif;

            font-size: 1.2rem;

            color: #3498db;

            font-weight: 700;

        }

        

        .mobile-close-btn {

            background: none;

            border: none;

            color: #ffffff;

            font-size: 24px;

            cursor: pointer;

            padding: 5px;

            width: 30px;

            height: 30px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 4px;

            transition: background 0.3s;

        }

        

        .mobile-close-btn:hover {

            background: rgba(255,255,255,0.1);

        }

        

        .mobile-nav {

            padding: 0;

        }

        

        .mobile-nav ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        

        .mobile-nav li {

            border-bottom: 1px solid rgba(52,152,219,0.2);

        }

        

        .mobile-nav li:last-child {

            border-bottom: none;

        }

        

        .mobile-nav > ul > li > a {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 16px 20px;

            color: #ffffff;

            text-decoration: none;

            text-transform: uppercase;

            font-weight: 600;

            font-size: 15px;

            transition: all 0.3s;

        }

        

        .mobile-nav > ul > li > a:hover {

            background: rgba(52,152,219,0.25);

            color: #3498db;

        }

        

        /* Стрелки для пунктов с подменю */

        .mobile-nav .mobile-dropdown > a::after {

            content: '›';

            font-size: 18px;

            transition: transform 0.3s;

            margin-left: 10px;

        }

        

        .mobile-nav .mobile-dropdown.open > a::after {

            transform: rotate(90deg);

        }

        

        /* Подменю для мобильных - ПРОСТАЯ РЕАЛИЗАЦИЯ */

        .mobile-submenu {

            display: none;

            background: rgba(15,20,30,0.9);

        }

        

        .mobile-submenu.open {

            display: block;

            animation: slideDown 0.3s ease;

        }



        /* Защитное правило: показываем подменю также если родитель <li> имеет класс open */

        .mobile-dropdown.open .mobile-submenu {

            display: block;

            animation: slideDown 0.3s ease;

        }

        

        @keyframes slideDown {

            from { 

                opacity: 0; 

                max-height: 0;

            }

            to { 

                opacity: 1; 

                max-height: 500px;

            }

        }

        

        .mobile-submenu li {

            border-bottom: 1px solid rgba(52,152,219,0.1);

        }

        

        .mobile-submenu li:last-child {

            border-bottom: none;

        }

        

        .mobile-submenu a {

            display: block;

            padding: 14px 20px 14px 35px;

            color: #e8e8e8;

            text-decoration: none;

            font-size: 14px;

            font-weight: 500;

            text-transform: uppercase;

            border-left: 3px solid rgba(52,152,219,0.3);

            transition: all 0.3s;

        }

        

        .mobile-submenu a:hover {

            background: rgba(52,152,219,0.2);

            border-left-color: #3498db;

            padding-left: 40px;

        }

        

        /* Мобильный переключатель языков */

        .mobile-language-switcher {

            padding: 20px 15px;

            border-top: 1px solid rgba(52,152,219,0.3);

            background: rgba(15,20,30,0.8);

            margin-top: auto;

        }

        

        .mobile-lang-title {

            color: #ffffff;

            font-size: 14px;

            font-weight: 600;

            text-transform: uppercase;

            margin-bottom: 12px;

            text-align: center;

            letter-spacing: 1px;

        }

        

        .mobile-lang-options {

            display: flex;

            gap: 10px;

            justify-content: center;

        }

        

        .mobile-lang-btn {

            flex: 1;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 10px 15px;

            color: #ffffff;

            font-size: 13px;

            font-weight: 600;

            text-transform: uppercase;

            text-decoration: none;

            border: 1px solid rgba(255,255,255,0.3);

            border-radius: 6px;

            transition: all 0.3s ease;

            max-width: 100px;

        }

        

        .mobile-lang-btn:hover, .mobile-lang-btn.active {

            background: rgba(52,152,219,0.3);

            border-color: rgba(52,152,219,0.8);

            color: #ffffff;

        }

        

        /* Оверлей для мобильного меню */

        .mobile-menu-overlay {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0,0,0,0.7);

            z-index: 1000;

            opacity: 0;

            transition: opacity 0.3s;

        }

        

        .mobile-menu-overlay.active {

            display: block;

            opacity: 1;

        }



        /* Основной контейнер */

        .main-wrapper { flex: 1; padding-top: 60px; position: relative; z-index: 10; }



        /* Футер */

        .footer {

            background: rgba(10,15,25,0.5); backdrop-filter: blur(20px); border: 1px solid rgba(52,152,219,0.4); border-radius: 15px 15px 0 0;

            padding: 30px 0 20px; margin-top: auto; text-align: left;

        }

        .footer p { margin-bottom: 15px; font-size: 13px; }

        .footer a { color: #3498db; text-decoration: none; }

        .footer a:hover { text-decoration: underline; }

        .footer .row { margin-top: 15px; }

        .footer img { height: 35px; margin: 8px; }

        .time-section { text-align: center; margin-top: 15px; }

        .time-title { font-size: 11px; color: #888; text-transform: uppercase; }

        .time-value { font-size: 16px; color: #3498db; font-weight: 700; }



        /* Адаптивность */

        @media (max-width: 992px) { 

            .navbar-toggle { display: flex; }

            .nav-main { display: none; }

            .nav-account { display: none; }

            .mobile-brand-title { display: block; }

            .language-dropdown-wrapper { display: none; }

        }



        @media (max-width: 768px) {

            .server-title-mobile { font-size: 1.2rem; }

            .footer { text-align: center; border-radius: 15px; margin: 0 10px; padding: 25px 0 15px; }

            .footer img { height: 30px; margin: 5px auto; display: block; }

            .navbar-fixed-top { padding: 8px 10px; }

            .time-section { margin: 8px 0; }

            .mobile-nav > ul > li > a { font-size: 14px; padding: 14px 15px; }

            .mobile-submenu a { font-size: 13px; padding: 12px 15px 12px 30px; }

            .mobile-language-switcher { padding: 15px; }

        }



        @media (max-width: 480px) {

            .mobile-menu {

                width: 100%;

                max-width: none;

            }

        }

    

/* ===== HOME ===== */


/* smoke animation removed */
body {
    background: radial-gradient(circle at 20% 30%, rgba(74,144,226,0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255,107,107,0.12) 0%, transparent 50%),
                linear-gradient(135deg, rgba(10,15,25,0.55) 0%, rgba(26,31,43,0.65) 100%);
    position: relative;
    overflow-x: hidden;
}




/* preloader removed */



/* ОСНОВНОЙ КОНТЕЙНЕР */

.home-mmorpg-final {

    max-width: 1400px;

    margin: 0 auto;

    padding: 60px 20px 20px;

    min-height: 100vh;

    position: relative;

}



/* ВЕРСИЯ - УЛУЧШЕННЫЙ ДИЗАЙН */

.version-badge {

    text-align: center;

    margin-bottom: 20px;

}



.version-glass {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(25px);

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 30px;

    padding: 14px 35px;

    color: #ffffff;

    font-size: 1.3rem;

    font-weight: 700;

    font-family: 'Marcellus', serif;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow: 0 12px 35px rgba(0,0,0,0.3);

    position: relative;

    overflow: hidden;

    transition: all 0.4s ease;

}



.version-glass::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);

    transition: left 0.6s ease;

}



.version-glass:hover::before {

    left: 100%;

}



.version-glass:hover {

    transform: translateY(-3px);

    box-shadow: 0 16px 45px rgba(0,0,0,0.4);

    border-color: rgba(78, 205, 196, 0.6);

    background: rgba(255,255,255,0.12);

}



.version-icon {

    font-size: 1.4rem;

    color: #4ecdc4;

    filter: drop-shadow(0 0 8px rgba(78, 205, 196, 0.6));

}



/* КНОПКА ПОДДЕРЖКИ ПРОЕКТА - ПРАВЫЙ БАННЕР */

.support-banner-right {

    position: fixed;

    top: 120px;

    right: 0;

    z-index: 1000;

    background: linear-gradient(135deg, rgba(231, 76, 60, 0.9), rgba(192, 57, 43, 0.8));

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,0.4);

    border-radius: 15px 0 0 15px;

    padding: 16px 25px;

    text-decoration: none;

    color: white;

    font-weight: 800;

    font-size: 1rem;

    transition: all 0.4s ease;

    box-shadow: -5px 5px 25px rgba(231, 76, 60, 0.4);

    display: flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;

    transform: translateX(0);

}



.support-banner-right:hover {

    transform: translateX(-5px);

    background: linear-gradient(135deg, rgba(231, 76, 60, 0.95), rgba(192, 57, 43, 0.85));

    box-shadow: -8px 8px 35px rgba(231, 76, 60, 0.6);

    color: white;

    text-decoration: none;

    padding-right: 30px;

}



.support-banner-right::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 8px;

    transform: translateY(-50%);

    width: 6px;

    height: 60%;

    background: rgba(255,255,255,0.8);

    border-radius: 3px;

    animation: pulseGlow 2s ease-in-out infinite;

}



@keyframes pulseGlow {

    0%, 100% { opacity: 0.6; }

    50% { opacity: 1; }

}



/* ГЛАВНАЯ СЕТКА */

.home-grid-final {

    display: grid;

    grid-template-columns: 320px 1fr 320px;

    gap: 25px;

    align-items: start;

    margin-bottom: 40px;

    margin-top: 10px;

}



/* ЦЕНТРАЛЬНЫЙ ГЕРОЙ - УЛУЧШЕННЫЙ */

.home-hero-final {

    text-align: center;

    position: relative;

    padding: 0 20px;

}



.hero-logo-final {

    margin-bottom: 25px;

    position: relative;

}



.hero-logo-final img {

    max-width: 280px;

    height: auto;

    filter: drop-shadow(0 20px 40px rgba(52,152,219,0.8));

    transition: all 0.4s ease;

}



.hero-logo-final:hover img {

    transform: scale(1.03);

    filter: drop-shadow(0 25px 50px rgba(52,152,219,0.9));

}



.hero-title-final {

    font-family: 'Marcellus', serif;

    font-size: 4.2rem;

    font-weight: 900;

    color: transparent;

    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #ffeaa7 100%);

    -webkit-background-clip: text;

    background-clip: text;

    margin-bottom: 12px;

    line-height: 1.1;

    text-shadow: 0 0 40px rgba(255,107,107,0.4);

    letter-spacing: 1px;

    animation: titleGlow 3s ease-in-out infinite;

}



@keyframes titleGlow {

    0%, 100% { text-shadow: 0 0 40px rgba(255,107,107,0.4); }

    50% { text-shadow: 0 0 60px rgba(255,107,107,0.6); }

}



.hero-subtitle-final {

    font-size: 1.5rem;

    color: #e8e8e8;

    margin-bottom: 40px;

    font-weight: 400;

    line-height: 1.4;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

    text-shadow: 0 2px 4px rgba(0,0,0,0.5);

    font-family: 'Marcellus', serif;

    letter-spacing: 0.5px;

}



/* БЛОК НОВОСТЕЙ - УЛУЧШЕННЫЙ */

.news-block-final {

    background: rgba(255,255,255,0.07);

    backdrop-filter: blur(35px);

    border: 1px solid rgba(74, 144, 226, 0.5);

    border-radius: 20px;

    padding: 25px;

    box-shadow: 0 12px 35px rgba(0,0,0,0.3);

    height: fit-content;

    margin-top: 20px;

    transition: all 0.3s ease;

}



.news-block-final:hover {

    transform: translateY(-5px);

    box-shadow: 0 18px 45px rgba(0,0,0,0.4);

    border-color: rgba(74, 144, 226, 0.7);

}



.block-header-final {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;

    padding-bottom: 16px;

    border-bottom: 2px solid rgba(74, 144, 226, 0.4);

}



.block-title-final {

    color: #4ecdc4;

    font-size: 1.6rem;

    font-weight: 700;

    font-family: 'Marcellus', serif;

    margin: 0;

    text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



.block-more-final {

    color: #4ecdc4;

    text-decoration: none;

    font-weight: 700;

    font-size: 0.9rem;

    transition: all 0.3s ease;

    padding: 6px 12px;

    border-radius: 8px;

    background: rgba(78, 205, 196, 0.1);

}



.block-more-final:hover {

    color: #45b7d1;

    text-decoration: none;

    background: rgba(78, 205, 196, 0.2);

    transform: translateX(3px);

}



.news-list-final {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.news-item-final {

    display: flex;

    align-items: center;

    padding: 16px;

    background: rgba(255,255,255,0.06);

    border-radius: 14px;

    transition: all 0.3s ease;

    text-decoration: none;

    border-left: 4px solid #4ecdc4;

    position: relative;

    overflow: hidden;

}



.news-item-final::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.1), transparent);

    transition: left 0.5s ease;

}



.news-item-final:hover::before {

    left: 100%;

}



.news-item-final:hover {

    background: rgba(78, 205, 196, 0.15);

    transform: translateX(5px);

    text-decoration: none;

    border-left-color: #45b7d1;

}



.news-date-final {

    color: #ffeaa7;

    font-weight: 700;

    font-size: 0.9rem;

    min-width: 60px;

    text-align: center;

    background: rgba(255, 234, 167, 0.2);

    padding: 7px 8px;

    border-radius: 8px;

    margin-right: 15px;

    border: 1px solid rgba(255, 234, 167, 0.3);

    text-shadow: 0 1px 2px rgba(0,0,0,0.3);

}



.news-text-final {

    color: #e8e8e8;

    font-weight: 500;

    flex: 1;

    font-size: 1rem;

    line-height: 1.4;

    text-shadow: 0 1px 2px rgba(0,0,0,0.3);

}



/* БЛОК РЕЙТИНГОВ - УЛУЧШЕННЫЙ */

.rankings-block-final {

    background: rgba(255,255,255,0.07);

    backdrop-filter: blur(35px);

    border: 1px solid rgba(255, 107, 107, 0.5);

    border-radius: 20px;

    padding: 25px;

    box-shadow: 0 12px 35px rgba(0,0,0,0.3);

    height: fit-content;

    margin-top: 20px;

    transition: all 0.3s ease;

}



.rankings-block-final:hover {

    transform: translateY(-5px);

    box-shadow: 0 18px 45px rgba(0,0,0,0.4);

    border-color: rgba(255, 107, 107, 0.7);

}



.rankings-header-final {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;

    padding-bottom: 16px;

    border-bottom: 2px solid rgba(255, 107, 107, 0.4);

}



.rankings-title-final {

    color: #ff6b6b;

    font-size: 1.6rem;

    font-weight: 700;

    font-family: 'Marcellus', serif;

    margin: 0;

    text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



.rankings-more-final {

    color: #ff6b6b;

    text-decoration: none;

    font-weight: 700;

    font-size: 0.9rem;

    transition: all 0.3s ease;

    padding: 6px 12px;

    border-radius: 8px;

    background: rgba(255, 107, 107, 0.1);

}



.rankings-more-final:hover {

    color: #e74c3c;

    text-decoration: none;

    background: rgba(255, 107, 107, 0.2);

    transform: translateX(3px);

}



.rankings-tabs-final {

    display: flex;

    gap: 8px;

    margin-bottom: 22px;

    flex-wrap: wrap;

}



.rankings-tab-final {

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,107,107,0.4);

    border-radius: 18px;

    padding: 10px 16px;

    color: #bdc3c7;

    text-decoration: none;

    font-weight: 700;

    font-size: 0.9rem;

    transition: all 0.3s ease;

    flex: 1;

    text-align: center;

    min-width: 85px;

}



.rankings-tab-final:hover,

.rankings-tab-final.active {

    background: rgba(255,107,107,0.3);

    color: #ffffff;

    border-color: #ff6b6b;

    transform: translateY(-2px);

}



.ranking-list-final {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.ranking-item-final {

    display: flex;

    align-items: center;

    padding: 14px 16px;

    background: rgba(255,255,255,0.06);

    border-radius: 12px;

    transition: all 0.3s ease;

    border-right: 4px solid #ff6b6b;

    position: relative;

    overflow: hidden;

}



.ranking-item-final::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.1), transparent);

    transition: left 0.5s ease;

}



.ranking-item-final:hover::before {

    left: 100%;

}



.ranking-item-final:hover {

    background: rgba(255,107,107,0.15);

    transform: translateX(-3px);

    border-right-color: #e74c3c;

}



.ranking-pos-final {

    color: #ffeaa7;

    font-weight: 800;

    font-size: 1.1rem;

    min-width: 32px;

    text-align: center;

    margin-right: 12px;

    text-shadow: 0 1px 2px rgba(0,0,0,0.3);

}



.ranking-name-final {

    color: #e8e8e8;

    font-weight: 600;

    flex: 1;

    font-size: 0.95rem;

    text-shadow: 0 1px 2px rgba(0,0,0,0.3);

}



.ranking-value-final {

    color: #4ecdc4;

    font-weight: 800;

    font-size: 0.9rem;

    background: rgba(78, 205, 196, 0.2);

    padding: 6px 12px;

    border-radius: 10px;

    border: 1px solid rgba(78, 205, 196, 0.3);

    text-shadow: 0 1px 2px rgba(0,0,0,0.3);

}



/* КНОПКИ ДЕЙСТВИЙ - УЛУЧШЕННЫЕ */

.actions-under-logo {

    display: flex;

    gap: 20px;

    margin: 35px auto;

    max-width: 800px;

    justify-content: center;

    flex-wrap: wrap;

}



.action-btn-elongated {

    flex: 1;

    background: rgba(255,255,255,0.09);

    backdrop-filter: blur(25px);

    border: 1px solid;

    border-radius: 28px;

    padding: 22px 25px;

    text-decoration: none;

    transition: all 0.4s ease;

    text-align: center;

    position: relative;

    overflow: hidden;

    min-width: 200px;

    max-width: 240px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);

}



.action-btn-elongated::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

    transition: left 0.6s ease;

}



.action-btn-elongated:hover::before {

    left: 100%;

}



.action-btn-elongated:hover {

    transform: translateY(-5px) scale(1.03);

    box-shadow: 0 15px 40px rgba(0,0,0,0.4);

}



.btn-register {

    border-color: rgba(52, 152, 219, 0.8);

    background: linear-gradient(135deg, rgba(52, 152, 219, 0.18), rgba(41, 128, 185, 0.12));

}



.btn-register:hover {

    border-color: #3498db;

    background: linear-gradient(135deg, rgba(52, 152, 219, 0.25), rgba(41, 128, 185, 0.2));

}



.btn-download {

    border-color: rgba(52, 152, 219, 0.8);

    background: linear-gradient(135deg, rgba(52, 152, 219, 0.18), rgba(41, 128, 185, 0.12));

}



.btn-download:hover {

    border-color: #3498db;

    background: linear-gradient(135deg, rgba(52, 152, 219, 0.25), rgba(41, 128, 185, 0.2));

}



.btn-support {

    border-color: rgba(155, 89, 182, 0.8);

    background: linear-gradient(135deg, rgba(155, 89, 182, 0.18), rgba(142, 68, 173, 0.12));

}



.btn-support:hover {

    border-color: #9b59b6;

    background: linear-gradient(135deg, rgba(155, 89, 182, 0.25), rgba(142, 68, 173, 0.2));

}



.action-content {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}



.action-icon-final {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    color: white;

    flex-shrink: 0;

    box-shadow: 0 4px 12px rgba(0,0,0,0.3);

    transition: all 0.3s ease;

}



.action-btn-elongated:hover .action-icon-final {

    transform: scale(1.1);

    box-shadow: 0 6px 18px rgba(0,0,0,0.4);

}



.btn-register .action-icon-final { 

    background: linear-gradient(135deg, #3498db, #2980b9); 

}

.btn-download .action-icon-final { 

    background: linear-gradient(135deg, #3498db, #2980b9); 

}

.btn-support .action-icon-final { 

    background: linear-gradient(135deg, #9b59b6, #8e44ad); 

}



.action-text {

    text-align: left;

    flex: 1;

}



.action-title-final {

    color: #ffffff;

    font-size: 1.2rem;

    font-weight: 800;

    margin-bottom: 4px;

    font-family: 'Marcellus', serif;

    text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



.action-desc-final {

    color: #bdc3c7;

    font-size: 0.85rem;

    line-height: 1.3;

    margin: 0;

    text-shadow: 0 1px 2px rgba(0,0,0,0.3);

}



/* СОЦСЕТИ - ПЕРЕМЕЩЕНЫ НА ЛЕВО */

.social-circles-final {

    position: fixed;

    top: 120px;

    left: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

    z-index: 20;

}



.social-circle-final {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 1.4rem;

    transition: all 0.4s ease;

    background: rgba(255,255,255,0.1);

    backdrop-filter: blur(25px);

    border: 1px solid rgba(255,255,255,0.3);

    box-shadow: 0 6px 20px rgba(0,0,0,0.25);

    position: relative;

    color: rgba(255,255,255,0.9);

    transform: translateX(0);

}



.social-circle-final:hover {

    transform: translateX(8px) scale(1.15);

    background: rgba(255,255,255,0.2);

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

    color: white;

}



.social-circle-final::after {

    content: attr(data-tooltip);

    position: absolute;

    left: 65px;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(0,0,0,0.85);

    color: white;

    padding: 8px 14px;

    border-radius: 8px;

    font-size: 0.85rem;

    white-space: nowrap;

    opacity: 0;

    transition: opacity 0.3s ease;

    pointer-events: none;

    z-index: 100;

}



.social-circle-final:hover::after {

    opacity: 1;

}



/* МОБИЛЬНАЯ ВЕРСИЯ - НОВЫЙ ПОРЯДОК */

.mobile-content-order {

    display: none;

}



/* АДАПТИВНОСТЬ */

@media (max-width: 1200px) {

    .home-grid-final {

        grid-template-columns: 300px 1fr 300px;

        gap: 20px;

    }

    

    .hero-title-final {

        font-size: 3.5rem;

    }

    

    .actions-under-logo {

        max-width: 700px;

    }

}



@media (max-width: 992px) {

    .home-grid-final {

        display: none;

    }

    

    .mobile-content-order {

        display: block;

    }

    

    .mobile-hero-section {

        text-align: center;

        margin-bottom: 30px;

    }

    

    .mobile-logo-final img {

        max-width: 220px;

        height: auto;

        filter: drop-shadow(0 15px 30px rgba(52,152,219,0.7));

        margin-bottom: 20px;

    }

    

    .mobile-title-final {

        font-family: 'Marcellus', serif;

        font-size: 2.8rem;

        font-weight: 900;

        color: transparent;

        background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #ffeaa7 100%);

        -webkit-background-clip: text;

        background-clip: text;

        margin-bottom: 10px;

        line-height: 1.1;

        text-shadow: 0 0 30px rgba(255,107,107,0.3);

    }

    

    .mobile-subtitle-final {

        font-size: 1.3rem;

        color: #e8e8e8;

        margin-bottom: 25px;

        font-weight: 400;

        line-height: 1.4;

        font-family: 'Marcellus', serif;

    }

    

    .mobile-support-banner {

        display: block;

        background: linear-gradient(135deg, rgba(231, 76, 60, 0.9), rgba(192, 57, 43, 0.8));

        backdrop-filter: blur(20px);

        border: 1px solid rgba(255,255,255,0.4);

        border-radius: 20px;

        padding: 16px 25px;

        text-decoration: none;

        color: white;

        font-weight: 800;

        font-size: 1.1rem;

        transition: all 0.3s ease;

        box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 12px;

        margin: 20px auto;

        max-width: 280px;

    }

    

    .mobile-support-banner:hover {

        transform: translateY(-3px);

        box-shadow: 0 12px 30px rgba(231, 76, 60, 0.6);

        color: white;

        text-decoration: none;

    }

    

    .mobile-actions {

        display: flex;

        flex-direction: column;

        gap: 15px;

        margin: 25px auto;

        max-width: 320px;

    }

    

    .mobile-action-btn {

        background: rgba(255,255,255,0.09);

        backdrop-filter: blur(25px);

        border: 1px solid;

        border-radius: 25px;

        padding: 18px 20px;

        text-decoration: none;

        transition: all 0.3s ease;

        display: flex;

        align-items: center;

        gap: 15px;

    }

    

    .mobile-action-btn:hover {

        transform: translateY(-3px);

        text-decoration: none;

    }

    

    .mobile-action-icon {

        width: 40px;

        height: 40px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 1.1rem;

        color: white;

        flex-shrink: 0;

    }

    

    .mobile-action-text {

        text-align: left;

        flex: 1;

    }

    

    .mobile-action-title {

        color: #ffffff;

        font-size: 1.1rem;

        font-weight: 700;

        margin-bottom: 2px;

        font-family: 'Marcellus', serif;

    }

    

    .mobile-action-desc {

        color: #bdc3c7;

        font-size: 0.8rem;

        line-height: 1.2;

        margin: 0;

    }

    

    .mobile-content-blocks {

        margin-top: 30px;

    }

    

    .social-circles-final,

    .support-banner-right {

        position: static;

        flex-direction: row;

        justify-content: center;

        margin-bottom: 20px;

        transform: none !important;

        border-radius: 15px !important;

    }

    

    .social-circles-final {

        gap: 15px;

        margin-top: 20px;

    }

    

    .support-banner-right {

        display: none;

    }

}



@media (max-width: 768px) {

    .home-mmorpg-final {

        padding: 70px 15px 20px;

    }

    

    .mobile-title-final {

        font-size: 2.3rem;

    }

    

    .mobile-subtitle-final {

        font-size: 1.2rem;

    }

    

    .version-glass {

        font-size: 1.1rem;

        padding: 12px 25px;

    }

    

    .mobile-support-banner {

        font-size: 1rem;

        padding: 14px 22px;

    }

}



@media (max-width: 480px) {

    .mobile-title-final {

        font-size: 2rem;

    }

    

    .mobile-logo-final img {

        max-width: 180px;

    }

    

    .mobile-action-btn {

        padding: 16px 18px;

    }

    

    .version-glass {

        font-size: 1rem;

        padding: 10px 20px;

        flex-direction: column;

        gap: 8px;

    }

    

    .mobile-support-banner {

        font-size: 0.95rem;

        padding: 12px 20px;

    }

    

    .social-circles-final {

        gap: 10px;

    }

    

    .social-circle-final {

        width: 45px;

        height: 45px;

        font-size: 1.2rem;

    }

}



/* ===== ELYON UTILITIES / INNER PAGES ===== */
body { display: flex; flex-direction: column; min-height: 100vh; color: #e8e8e8; }
.main-wrapper { flex: 1; padding-top: 90px; min-height: 60vh; position: relative; z-index: 10; }
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
.page-hero { text-align: center; margin-bottom: 24px; }
.page-hero h1 {
  font-family: 'Marcellus', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 40%, #45b7d1 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 8px;
}
.page-hero p { color: #bdc3c7; }
.fade-divider {
  width: min(220px, 50%); height: 1px; margin: .9rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(78,205,196,.55), transparent);
}
.panel, .panel-final {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(52,152,219,0.35);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.3);
  margin-bottom: 16px;
}
.panel-body { padding: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px; border: 1px solid rgba(52,152,219,0.4);
  color: #fff !important; text-decoration: none; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, rgba(52,152,219,0.35), rgba(41,128,185,0.25));
}
.btn:hover { filter: brightness(1.1); color: #fff !important; text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, #3498db, #2980b9); border-color: rgba(52,152,219,0.5); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-ghost { background: rgba(255,255,255,0.06); }
.auth-card { max-width: 440px; margin: 30px auto; }
.auth-card h1 { text-align: center; font-family: Marcellus, serif; margin-bottom: 8px; }
.auth-card .subtitle { text-align: center; color: #bdc3c7; margin-bottom: 18px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 6px; color: #bdc3c7; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(52,152,219,0.35); background: rgba(0,0,0,0.35); color: #e8e8e8; font: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52,152,219,0.2);
}
.form-hint { color: #7f8c8d; font-size: 0.8rem; margin-top: 4px; }
.flash-wrap { max-width: 720px; margin: 16px auto; padding: 0 16px; }
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 8px; }
.flash-success { background: rgba(46,204,113,0.18); border: 1px solid rgba(46,204,113,0.4); color: #b8ffd1; }
.flash-error { background: rgba(231,76,60,0.16); border: 1px solid rgba(231,76,60,0.4); color: #ffc2c2; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: left; }
th { color: #7f8c8d; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { text-align: center; }
.stat-card .value { font-family: Marcellus, serif; font-size: 1.6rem; color: #4ecdc4; }
.stat-card .label { color: #bdc3c7; font-size: 0.8rem; text-transform: uppercase; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.content-prose h2 { margin: 1rem 0 .4rem; }
.content-prose p, .content-prose li { color: #bdc3c7; }
.footer-final {
  margin-top: auto; padding: 28px 16px 36px; text-align: center;
  background: rgba(10,15,25,0.85); border-top: 1px solid rgba(52,152,219,0.25);
  position: relative; z-index: 10;
}
.footer-final a { color: #e74c3c; text-decoration: none; }
.footer-final a:hover { text-decoration: underline; }
.footer-links { color: #aaa; margin-bottom: 12px; }
.footer-legal { max-width: 920px; margin: 0 auto; color: #777; font-size: 12px; line-height: 1.55; }
.empty { color: #7f8c8d; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mb-2 { margin-bottom: 1rem; }
.text-center { text-align: center; }
.nav-main li a.active { color: #3498db !important; background: rgba(52,152,219,0.2); }
@media (max-width: 900px) {
  .stats-grid, .grid-2 { grid-template-columns: 1fr; }
}

/* ELYON FORCE VISIBLE */
.home-mmorpg-final, .home-grid-final, .news-block-final, .rankings-block-final, .home-hero-final { visibility: visible !important; opacity: 1 !important; }
.navbar-fixed-top { background: rgba(10,15,25,0.82) !important; }