/* ==========================================================================
   STYLE.CSS (FULL REWRITE: SUNRISE EDITION)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;700;800&display=swap');

:root {
    --c-red: #FF2E63;
    --c-cyan: #00E5FF;
    --c-purple: #D500F9;
    --c-ice: #80DEEA;
    --c-modrinth: #00AF5C;
    --c-gold: #FFC107;
    --glass-bg: rgba(10, 10, 15, 0.65);

* { margin: 0; padding: 0; box-sizing: border-box; outline: none; user-select: none; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Montserrat', sans-serif;
    background: #200122;
    min-height: 100vh;
    color: #fff; 
    overflow-x: hidden; 
    overscroll-behavior: none; 
}

/* ========================================================
   PYRAMID TREE FINAL (Z-INDEX FIX + LOCAL GLOW)
   ======================================================== */

/* 1. НАСТРОЙКИ ОКНА */
#m-harbinger .modal-card {
    background: #050510 !important; /* Темный фон без лишнего */
    border: 1px solid rgba(41, 121, 255, 0.2);
    box-shadow: none !important; /* Убираем свечение окна */
    overflow: visible !important; /* Разрешаем карточкам торчать */
    position: relative;
    z-index: 1;
}

/* Убираем глобальные заливки */
#m-harbinger .modal-card::after { display: none !important; }
#m-harbinger .liquid-bg-animated { display: none !important; }

/* 2. ЗАГОЛОВОК (ШАПКА) */
#m-harbinger .tm-title {
    color: #2979FF !important;
    text-shadow: 0 0 30px rgba(41, 121, 255, 0.8) !important;
    position: relative;
    /* ОПУСКАЕМ ШАПКУ НИЖЕ ДЕРЕВА ПО СЛОЯМ */
    z-index: 5 !important; 
    pointer-events: none; /* Чтобы сквозь текст можно было кликнуть, если что */
    margin-bottom: 0 !important;
}

#m-harbinger.colored-mode .tm-title {
    color: var(--harb-active-color) !important;
    text-shadow: 0 0 50px var(--harb-active-color) !important;
}

/* 3. КОНТЕЙНЕР ДЕРЕВА */
#harbinger-tree-container {
    width: 100%;
    /* Отступ сверху чтобы карточка нулевого при масштабировании не упиралась в границу скролла */
    padding: 40px 0 60px 0 !important;
    margin-top: 0 !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible !important;
    position: relative;
    z-index: 50 !important; 
}

.pyramid-tree {
    display: flex; flex-direction: column; align-items: center;
    min-width: 1200px;
    position: relative;
}

/* 4. ЛИНИИ И СВЯЗИ */
.spine-connector {
    width: 4px; height: 60px;
    background: #2979FF;
    box-shadow: 0 0 10px #2979FF;
    z-index: 0;
    transition: 0.5s;
}

.tree-row {
    display: flex; justify-content: center; gap: 40px;
    position: relative; width: 100%;
}

.cross-bar {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    height: 4px; width: 60%; 
    background: #2979FF;
    box-shadow: 0 0 10px #2979FF;
    z-index: 0;
    transition: 0.5s;
}
.level-2 .cross-bar.wide { width: 85%; }

/* Ячейка */
.node-cell {
    display: flex; flex-direction: column; align-items: center;
    position: relative;
    width: 260px; 
}
.level-0 .node-cell { width: 280px !important; margin: 0 auto; }

.drop-line {
    height: 40px; width: 4px;
    background: #2979FF;
    box-shadow: 0 0 10px #2979FF;
    margin-bottom: -2px; 
    position: relative;
    transition: 0.5s;
}

.junction-dot {
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 14px;
    background: #000;
    border: 3px solid #2979FF;
    border-radius: 50%;
    box-shadow: 0 0 10px #2979FF;
    z-index: 2;
    transition: 0.5s;
}
.level-0 .drop-line { display: none; }

/* ЦВЕТА ЛИНИЙ ПРИ НАВЕДЕНИИ */
#m-harbinger.colored-mode .spine-connector,
#m-harbinger.colored-mode .cross-bar,
#m-harbinger.colored-mode .drop-line {
    background: var(--harb-active-color);
    box-shadow: 0 0 15px var(--harb-active-color);
}
#m-harbinger.colored-mode .junction-dot {
    border-color: var(--harb-active-color);
    box-shadow: 0 0 15px var(--harb-active-color);
}

/* 5. КАРТОЧКА */
.harb-card-node {
    width: 100%; aspect-ratio: 16/9;
    background: #000;
    border: 2px solid var(--h-glow);
    /* Тень только у самой карты */
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    border-radius: 16px;
    position: relative; overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Базовый слой */
    z-index: 10; 
}

.level-0 .harb-card-node { 
    border-color: #fff;
    box-shadow: 0 0 30px rgba(41, 121, 255, 0.3); 
}

/* ПРИ НАВЕДЕНИИ */
.harb-card-node:hover {
    transform: scale(1.1);
    /* СВЕЧЕНИЕ СТРОГО ВОКРУГ КАРТОЧКИ (не на весь экран) */
    box-shadow: 0 0 50px var(--h-glow), 0 0 10px #fff;
    border-color: #fff;
    /* СУПЕР ВАЖНО: ПОВЕРХ ВСЕГО */
    z-index: 9999 !important; 
}

.hc-img { 
    width: 100%; height: 100%; object-fit: cover; 
    opacity: 0.6; transition: 0.5s ease; filter: grayscale(100%);
}
.harb-card-node:hover .hc-img { opacity: 1; filter: grayscale(0%); }

.hc-num {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3.5rem; font-weight: 900; 
    z-index: 2; pointer-events: none; transition: 0.4s;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0 0 20px currentColor;
}
.harb-card-node:hover .hc-num { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }

/* АДАПТИВ */
@media (max-width: 1200px) {
    .pyramid-tree { transform: scale(0.85); transform-origin: top center; }
}
@media (max-width: 768px) {
    .harbinger-tree-container { 
        justify-content: flex-start; 
        padding-left: 20px !important; 
        overflow-x: auto !important; 
        margin-top: 40px !important;
        padding-top: 100px !important;
    }
    .pyramid-tree { min-width: auto; transform: scale(0.7); transform-origin: top left; }
    .cross-bar, .drop-line, .spine-connector { display: none; }
}

/* =========================================
   === HERO WIDGET V7 (YELLOW GLOW + RECTS) ===
   ========================================= */

.hero-stats-wrapper {
    margin-top: 40px;
    width: 100%;
    max-width: 100%; /* Разрешаем занимать место, но центрируем */
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 15px;
    position: relative;
    z-index: 10;
}

/* --- 1. ТАЙМЕР (ЖЕЛТЫЙ + СТЕКЛО) --- */
.timer-glass-box {
    width: fit-content; /* Ширина по содержимому (уменьшили) */
    min-width: 300px;
    background: rgba(20, 20, 30, 0.6); /* Темная подложка */
    backdrop-filter: blur(20px); /* Эффект стекла */
    
    /* ЖЕЛТАЯ ПОДСВЕТКА (ПОСТОЯННАЯ) */
    border: 1px solid rgba(255, 193, 7, 0.6); 
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.15);
    
    border-radius: 20px; /* Скругленные углы (не овал) */
    padding: 25px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Отключаем взаимодействие (наведение) */
    pointer-events: none; 
    user-select: none;
}

/* Красная точка */
.live-corner-dot {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 8px;
    height: 8px;
    background: #FF1744;
    border-radius: 50%;
    box-shadow: 0 0 10px #FF1744;
    animation: blinkRed 1.5s infinite;
}

@keyframes blinkRed { 
    0% { opacity: 1; transform: scale(1); } 
    50% { opacity: 0.5; transform: scale(0.8); } 
    100% { opacity: 1; transform: scale(1); } 
}

.widget-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem; /* УВЕЛИЧИЛ ШРИФТ */
    font-weight: 800;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 0 15px rgba(255,255,255,0.5);
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Сетка таймера */
.timer-squares-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

/* Квадратики цифр */
.t-square {
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    padding: 10px 5px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Убрал hover эффекты */
}

.ts-val {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1;
    color: #fff;
    /* Золотой градиент цифр */
    background: linear-gradient(180deg, #fff 20%, var(--c-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.3));
}

.ts-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    margin-top: 5px;
    letter-spacing: 1px;
}

.ts-sep {
    font-size: 2rem;
    color: rgba(255,255,255,0.2);
    margin-top: -20px;
    font-weight: 300;
}
/* ========================================================
   RESTORED ROWS LAYOUT (CENTERED & 16:9)
   ======================================================== */

/* 1. КОНТЕЙНЕР (ЦЕНТРИРОВАНИЕ) */
.harbinger-tree-container {
    width: 100%;
    padding: 30px 0;
    display: flex;
    justify-content: center; /* Центрируем всё содержимое */
    align-items: flex-start;
}

.org-tree-rows {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем ряды внутри дерева */
    gap: 50px; /* Отступ между рядами */
    position: relative;
    width: auto;
}

/* 2. ЛИНИИ (СВЯЗИ) */
.main-spine {
    position: absolute;
    top: 50px; bottom: 50px; left: 50%;
    width: 2px; background: #2979FF;
    box-shadow: 0 0 15px #2979FF;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}

.row-connector {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    height: 2px; width: 80%;
    background: #2979FF;
    box-shadow: 0 0 10px #2979FF;
    z-index: 0;
    pointer-events: none;
}
.level-2 .row-connector.wide { width: 90%; }

/* 3. РЯДЫ */
.row-level {
    display: flex;
    justify-content: center; /* Центрируем карточки в ряду */
    gap: 30px; /* Отступ между карточками */
    position: relative;
    width: 100%;
}

/* 4. КАРТОЧКИ (16:9) */
.harb-card-node {
    width: 220px; 
    aspect-ratio: 16/9; /* ШИРОКИЕ */
    background: #000;
    border: 2px solid var(--h-glow);
    box-shadow: 0 0 15px var(--h-glow), inset 0 0 30px rgba(0,0,0,0.8);
    border-radius: 12px;
    position: relative; overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 10;
}

/* Корень чуть больше */
.level-0 .harb-card-node { width: 260px; border-color: #fff; box-shadow: 0 0 40px rgba(41, 121, 255, 0.4); }

.harb-card-node:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 0 60px var(--h-glow);
    border-color: #fff;
    z-index: 20;
}

.hc-img { 
    width: 100%; height: 100%; object-fit: cover; 
    opacity: 0.6; transition: 0.4s ease; 
    filter: grayscale(100%);
}
.harb-card-node:hover .hc-img { opacity: 1; filter: grayscale(0%); }

.hc-num {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3rem; font-weight: 900; 
    z-index: 2; pointer-events: none; transition: 0.3s;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0 0 15px currentColor;
}
.harb-card-node:hover .hc-num { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }

/* Возвращаем видимость фона */
#m-harbinger .liquid-bg-animated { display: block !important; opacity: 0.3; }

/* АДАПТИВ */
@media (max-width: 1200px) {
    .org-tree-rows { transform: scale(0.85); transform-origin: top center; }
}
@media (max-width: 768px) {
    .harbinger-tree-container { justify-content: flex-start; overflow-x: auto; padding-left: 20px; }
    .org-tree-rows { transform: scale(0.7); transform-origin: top left; }
    .row-level { width: max-content; } /* Чтобы не сжималось */
}

/* ==========================================================
   ФИКС ЦЕНТРИРОВАНИЯ (ЧТОБЫ БЫЛО ПЕРЕД ЛИЦОМ)
   ========================================================== */

/* 1. Заставляем обертку быть на весь экран и поверх всего */
#m-agreement, #full-success {
    position: fixed !important;    /* Фиксируем относительно ЭКРАНА, а не страницы */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;       /* На всю ширину обзора */
    height: 100vh !important;      /* На всю высоту обзора */
    
    display: none;                 /* Скрыто по умолчанию */
    align-items: center !important;     /* Центр по вертикали */
    justify-content: center !important; /* Центр по горизонтали */
    
    overflow: hidden !important;   /* Запрещаем скролл внутри обертки */
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Когда класс active добавлен JS-ом -> показываем Flex */
#m-agreement.active, #full-success.active {
    display: flex !important; 
}

/* 3. Сбрасываем лишние отступы у самих карточек внутри */
#m-agreement .modal-card, 
#full-success .modal-card {
    margin: 0 !important;       /* Убираем старые отступы */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important; /* Убираем сдвиги, если были */
    
    /* Страховка, чтобы окно не было слишком гигантским */
    max-height: 90vh !important; 
    overflow-y: auto !important; /* Если экран очень маленький, внутри окна можно скроллить */
}

/* --- 2. ДАТЫ (ПРЯМОУГОЛЬНИК СО СКРУГЛЕНИЕМ) --- */
.date-rect-box {
    width: fit-content;
    background: rgba(255, 193, 7, 0.1); /* Желтоватый фон */
    border: 1px solid rgba(255, 193, 7, 0.4); /* Рамка */
    padding: 15px 30px;
    border-radius: 15px; /* Скругленные углы (не овал) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.1);
    backdrop-filter: blur(10px);
}

.date-label-small {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dyp-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--c-gold);
    text-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
    letter-spacing: 1px;
}

/* Адаптив */
@media (max-width: 768px) {
    .timer-glass-box { min-width: auto; width: 100%; padding: 20px; }
    .timer-squares-grid { gap: 8px; }
    .t-square { min-width: 60px; }
    .ts-val { font-size: 1.8rem; }
    .ts-sep { display: none; }
    .date-rect-box { width: 100%; }
}

/* --- MODAL TAGS --- */
.sm-tag {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
    backdrop-filter: blur(5px);
    border: 1px solid currentColor;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    display: inline-block;
}

/* LORE HIGHLIGHTS */
.h-org { color: var(--c-purple); font-weight: 900; text-transform: uppercase; text-shadow: 0 0 10px rgba(213, 0, 249, 0.4); padding: 0 2px; }
.h-item { color: var(--c-cyan); font-weight: 800; padding: 0 2px; }
.h-artifact { color: var(--c-gold); font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 10px rgba(255, 193, 7, 0.5); padding: 0 2px; }
.h-name { color: var(--c-red); font-weight: 900; padding: 0 2px; }
.h-place { color: #fff; font-weight: 800; border-bottom: 1px dashed rgba(255,255,255,0.3); padding: 0 2px; }
.h-glitch { font-family: 'VT323'; font-size: 1.4em; color: #ff003c; animation: textPulse 0.1s infinite; display: inline-block; background: #000; padding: 0 5px; text-shadow: 2px 0 #00ffff; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--c-purple), var(--c-gold)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-orange); }

#master-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: block; }

/* ANIMATIONS */
@keyframes pulseWarn { 0% { box-shadow: 0 0 0 0 rgba(255, 111, 0, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 111, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 111, 0, 0); } }
@keyframes pulseIce { 0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(0, 229, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); } }
@keyframes shineMove { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
@keyframes waveBounce { 0%, 100% { height: 3px; } 50% { height: 15px; } }
@keyframes textPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes modalZoomIn { 0% { opacity: 0; transform: scale(0.95) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

/* INTRO */
#new-intro-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; background: transparent; pointer-events: all; transition: opacity 1s ease-out; padding: 20px; }
.intro-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 2; width: 100%; }
.intro-presents { font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; letter-spacing: 15px; color: #fff; text-transform: uppercase; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.8); opacity: 0; transform: translateY(20px); transition: opacity 1.5s ease, transform 1.5s ease, letter-spacing 1.5s ease; margin-bottom: 5px; width: 100%; text-align: center; padding-left: 0; }
.intro-main-title { font-family: 'Montserrat', sans-serif; font-size: 8rem; font-weight: 900; font-style: normal; text-transform: uppercase; line-height: 1.1; margin: 10px 0; background: linear-gradient(180deg, #FFFFFF 25%, #FFD54F 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.9)) drop-shadow(0 0 60px rgba(255, 143, 0, 0.5)); opacity: 0; transform: scale(0.9); transition: all 2s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: 0.5s; padding: 0 10px; width: 100%; text-align: center; }
.intro-sub-wrapper { display: flex; align-items: center; justify-content: center; gap: 30px; opacity: 0; transform: translateY(-20px); transition: all 1.5s ease; transition-delay: 1.5s; width: 100%; }
.intro-line { width: 0px; height: 3px; background: var(--c-gold); box-shadow: 0 0 15px var(--c-gold); border-radius: 2px; transition: width 1.5s ease-out; transition-delay: 1.5s; }
.intro-sub { font-family: 'JetBrains Mono', monospace; font-size: 2.5rem; font-weight: 800; letter-spacing: 15px; color: #fff; text-shadow: 0 0 30px rgba(255, 193, 7, 0.9); white-space: nowrap; }
.enter-btn-wrap { margin-top: 70px; opacity: 0; transform: translateY(30px); transition: all 1s ease; transition-delay: 2.5s; display: flex; justify-content: center; width: 100%; }
.enter-btn { padding: 22px 70px; border: 2px solid var(--c-gold); background: rgba(255, 193, 7, 0.1); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.6rem; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; border-radius: 100px; backdrop-filter: blur(20px); box-shadow: 0 0 50px rgba(255, 193, 7, 0.2); transition: 0.3s; position: relative; overflow: hidden; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.enter-btn:hover { background: var(--c-gold); color: #000; box-shadow: 0 0 80px rgba(255, 193, 7, 0.8); transform: scale(1.05); text-shadow: none; letter-spacing: 6px; }
.intro-active .intro-presents { opacity: 1; transform: translateY(0); letter-spacing: 12px; }
.intro-active .intro-main-title { opacity: 1; transform: scale(1); }
.intro-active .intro-sub-wrapper { opacity: 1; transform: translateY(0); }
.intro-active .intro-line { width: 120px; }
.intro-active .enter-btn-wrap { opacity: 1; transform: translateY(0); }

/* LAYOUT */
#site-wrapper { position: relative; z-index: 100; display: none; height: 100vh; overflow-y: scroll; scroll-behavior: smooth; padding: 60px 20px 40px 20px; perspective: 1000px; background: transparent; }
.content-container { max-width: 1600px; margin: 0 auto; padding: 0 20px; opacity: 0; transition: opacity 1s ease-out, transform 1s ease-out; transform: translateY(50px); display: flex; flex-direction: column; gap: 30px; }
.content-container.revealed { opacity: 1; transform: translateY(0); }

/* GLASS & UI */
.glass-panel { background: var(--glass-bg); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.2); border-radius: 35px; box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 20px 60px rgba(0,0,0,0.6); transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; }
.glass-inner { overflow: hidden; border-radius: 35px; position: relative; height: 100%; width: 100%; z-index: 2; }
.glass-panel:hover { border-color: var(--c-gold) !important; box-shadow: 0 0 40px rgba(255, 193, 7, 0.2), inset 0 0 20px rgba(255, 193, 7, 0.1) !important; z-index: 10; transform: translateY(-5px); }

.top-alert-widget { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 15px; background: rgba(15, 10, 25, 0.6); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.3); padding: 12px 30px; border-radius: 50px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transition: 0.3s; max-width: 90%; white-space: nowrap; }
.ta-icon { color: var(--c-gold); font-size: 1.2rem; animation: pulseWarn 2s infinite; border-radius: 50%; }
.ta-text { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 700; color: #eee; letter-spacing: 1px; }
.ta-tag { background: var(--c-red); color: #fff; font-size: 0.7rem; padding: 4px 8px; border-radius: 5px; font-weight: 900; }

.nav-bar { width: 100%; display: flex; }
.nav-inner { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px; gap: 10px; }
.nav-btn { flex: 1; justify-content: center; padding: 18px; border-radius: 20px; background: rgba(255,255,255,0.03); border: 1px solid transparent; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; }
.nav-btn:hover { background: rgba(255,255,255,0.08); color: var(--c-orange); border-color: var(--c-purple); box-shadow: 0 0 20px rgba(213, 0, 249, 0.4); transform: translateY(-2px); }
.nav-btn.active { background: linear-gradient(90deg, rgba(213, 0, 249, 0.15), transparent); border-bottom: 2px solid var(--c-purple); color: var(--c-purple); border-radius: 15px; }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-right: 20px; }
.brand-wrapper { display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 20px; text-transform: uppercase; cursor: pointer; }
.brand-icon-sun { font-size: 3rem; background: -webkit-linear-gradient(135deg, #FFC107, #FF6F00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 15px rgba(255, 193, 7, 0.6)); display: flex; align-items: center; justify-content: center; transition: 0.3s; }
header.glass-panel:hover .brand-icon-sun { transform: rotate(15deg) scale(1.1); filter: drop-shadow(0 0 25px rgba(255, 193, 7, 1)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.bt-main { font-size: 2rem; font-weight: 900; letter-spacing: 1px; }
.bt-sub { font-size: 0.85rem; font-weight: 700; letter-spacing: 4px; background: -webkit-linear-gradient(135deg, #FFC107, #FF6F00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 5px; opacity: 1; text-shadow: 0 0 10px rgba(255, 193, 7, 0.3); }
.header-socials { display: flex; gap: 15px; margin-left: auto; margin-right: 30px; align-items: center; }
.h-soc-btn { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 1.4rem; transition: 0.3s; text-decoration: none; backdrop-filter: blur(5px); }
.h-soc-btn:hover { transform: translateY(-3px); }
.h-soc-btn.discord { background: rgba(88, 101, 242, 0.2); border-color: #5865F2; color: #5865F2; }
.h-soc-btn.tg { background: rgba(42, 171, 238, 0.2); border-color: #2AABEE; color: #2AABEE; }
.h-soc-btn.yt { background: rgba(255, 0, 0, 0.2); border-color: #FF0000; color: #FF0000; }
.h-soc-btn:hover { filter: brightness(1.3); box-shadow: 0 0 25px currentColor; transform: translateY(-5px); }
.status-pill { background: rgba(0,0,0,0.6); padding: 15px 35px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; gap: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.led { width: 14px; height: 14px; background: #00E676; border-radius: 50%; box-shadow: 0 0 15px #00E676; animation: blink 1s infinite; }
.online-count { font-family: 'JetBrains Mono'; font-weight: 800; font-size: 1.2rem; color: #fff; }
.auth-buttons { display: flex; gap: 15px; margin-left: 20px; }
.auth-btn { padding: 12px 25px; border-radius: 12px; font-weight: 900; font-size: 0.9rem; text-transform: uppercase; cursor: pointer; transition: 0.3s; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: #fff; }
.auth-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }
.auth-btn.login { border-color: var(--c-modrinth); color: var(--c-modrinth); }
.auth-btn.login:hover { background: rgba(0, 175, 92, 0.2); box-shadow: 0 0 20px rgba(0, 175, 92, 0.3); }

/*ебанаые заявки */
/* ========================================================
   НАСТРОЙКИ КОНКРЕТНО ДЛЯ ОКНА ЗАЯВКИ (#m-apply)
   ======================================================== */

#m-apply .modal-card {
    /* РАЗМЕРЫ ОКНА */
    width: 1500px !important;       /* Ширина (шире обычного) */
    max-width: 95vw !important;    /* Ограничитель для мелких экранов */
    
    min-height: 750px !important;  /* Минимальная высота (делает квадратным) */
    height: auto !important;
    
    /* ОТСТУПЫ И ВЫРАВНИВАНИЕ */
    padding: 50px !important;
    margin: auto !important;
    
    display: flex !important;
    flex-direction: column !important;
}

/* РАСПРЕДЕЛЕНИЕ КАТЕГОРИЙ (СЕТКА) */
#m-apply .tech-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Две равные колонки */
    gap: 30px !important;          /* Расстояние между полями */
    width: 100% !important;
    flex-grow: 1 !important;       /* Растягиваем форму, чтобы заполнить окно */
}

/* КНОПКА ОТПРАВИТЬ (НА ВСЮ ШИРИНУ СНИЗУ) */
#m-apply .tech-submit-btn {
    grid-column: 1 / -1 !important; /* Растянуть на обе колонки */
    margin-top: auto !important;    /* Прижать к самому низу */
    width: 100% !important;
}

/* ЗАЩИТА ДЛЯ ТЕЛЕФОНОВ (ЧТОБЫ НЕ СЛОМАЛОСЬ) */
@media screen and (max-width: 768px) {
    #m-apply .modal-card {
        width: 95% !important;
        min-height: auto !important;
        padding: 20px !important;
    }
    #m-apply .tech-form {
        grid-template-columns: 1fr !important; /* На телефоне в одну колонку */
    }
}

/* HERO */
.hero-split-container { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; width: 100%; min-height: 500px; margin-bottom: 40px; }
.h-card { border-radius: 40px; position: relative; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; width: 100%; }
.h-card-visual { background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px rgba(0,0,0,0.6); display: flex; flex-direction: column; padding: 40px; position: relative; }
.centered-hero-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; height: 100%; width: 100%; z-index: 2; padding-bottom: 20px; }
.sub-brand { font-family: 'JetBrains Mono'; font-size: 1.5rem; font-weight: 700; opacity: 0.9; letter-spacing: 6px; color: #fff; text-transform: uppercase; }
.hero-title { font-size: 6rem; font-weight: 900; font-style: italic; line-height: 1; text-transform: uppercase; color: #FFC107; text-shadow: 0 0 30px rgba(255, 193, 7, 0.6); margin-bottom: 30px; }
.cs-badge-mini { position: absolute; top: 20px; right: 20px; background: var(--c-red); color: #fff; padding: 8px 15px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; z-index: 10; box-shadow: 0 5px 15px rgba(255, 46, 99, 0.4); }
.s-tag-clean { color: #fff !important; border-color: #fff !important; background: rgba(255,255,255,0.1); box-shadow: 0 0 15px rgba(255,255,255,0.2); border: 1px solid #fff; padding: 5px 20px; border-radius: 50px; font-size: 0.4em; vertical-align: middle; margin-left: 10px; position: relative; top: -15px; }
.s-tag-yellow { color: #FFC107 !important; border-color: #FFC107 !important; background: rgba(255, 193, 7, 0.2) !important; box-shadow: 0 0 20px rgba(255, 193, 7, 0.4) !important; }

/* RIGHT CARD */
.h-card-premium { background: rgba(15, 15, 25, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; padding: 0; box-shadow: 0 20px 50px rgba(0,0,0,0.4); position: relative; overflow: hidden; border-radius: 40px; transition: transform 0.4s ease; }
.grid-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; z-index: 0; }
.p-body { padding: 40px 30px; flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.centered-bait { align-items: center; text-align: center; justify-content: center; gap: 20px; padding: 30px !important; }
.bait-title { font-size: 2.5rem; font-weight: 900; color: #fff; text-transform: uppercase; text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); letter-spacing: 2px; line-height: 1; }
.urgent-box { background: rgba(255, 111, 0, 0.1); border: 1px solid rgba(255, 111, 0, 0.3); padding: 15px 25px; border-radius: 15px; color: var(--c-orange); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; animation: textPulse 2s infinite; display: flex; align-items: center; gap: 10px; justify-content: center; width: 100%; }
.bait-hint { font-size: 0.7rem; font-weight: 700; color: #aaa; margin-bottom: 8px; letter-spacing: 1px; }

.btn-liquid-glass { position: relative; width: 100%; padding: 20px; border: none; background: rgba(255, 255, 255, 0.1); border-radius: 15px; cursor: pointer; overflow: hidden; transition: 0.3s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.2); }
.btn-gold-fix { border-color: var(--c-gold) !important; color: var(--c-gold) !important; background: rgba(255, 193, 7, 0.1) !important; }
.btn-liquid-glass span { position: relative; z-index: 2; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.liquid-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-20deg); animation: shineMove 3s infinite; z-index: 1; }
.btn-liquid-glass:hover { transform: translateY(-2px); background: var(--c-gold) !important; border-color: var(--c-gold) !important; box-shadow: 0 0 40px rgba(255, 193, 7, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.3); }
.btn-liquid-glass:hover span { color: #000 !important; }

.social-row-hero { display: flex; gap: 15px; width: 100%; }
.soc-hero { flex: 1; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; text-decoration: none; transition: 0.3s; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); }
.wide-icons .soc-hero { width: 80px; height: 55px; font-size: 1.5rem; flex: none; }
.soc-hero:hover { transform: translateY(-3px); }
.soc-hero.colored.discord { background: rgba(88, 101, 242, 0.2); border-color: #5865F2; color: #5865F2; }
.soc-hero.colored.tg { background: rgba(42, 171, 238, 0.2); border-color: #2AABEE; color: #2AABEE; }
.soc-hero.colored.yt { background: rgba(255, 0, 0, 0.2); border-color: #FF0000; color: #FF0000; }
.soc-hero.colored:hover { filter: brightness(1.3); box-shadow: 0 0 25px currentColor; transform: translateY(-5px); }
.soc-hero i { transition: transform 0.4s ease; }
.soc-hero:hover i { transform: scale(1.2) rotate(10deg); }

/* LIQUID LOCKED */
.liquid-locked-card { width: 100%; padding: 60px; border-radius: 35px; background: rgba(10, 10, 15, 0.6); border: 2px solid rgba(255,255,255,0.1); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; transition: 0.3s; cursor: not-allowed; }
.liquid-lock-content { position: relative; z-index: 5; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.lock-circle-wrap { width: 100px; height: 100px; border-radius: 50%; background: rgba(0,0,0,0.4); border: 2px solid rgba(255, 193, 7, 0.3); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(255, 193, 7, 0.1); animation: pulseWarn 3s infinite; aspect-ratio: 1/1; }
.main-lock-icon { font-size: 3rem; color: var(--c-gold); filter: drop-shadow(0 0 15px rgba(255, 193, 7, 0.8)); }
.ll-title { font-size: 2.2rem; font-weight: 900; color: #fff; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.ll-sub { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: 1px; }
.liquid-bg-anim { position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.08), transparent); animation: shineMove 5s infinite; z-index: 1; }
.liquid-locked-card:hover { border-color: var(--c-red); box-shadow: 0 0 30px rgba(255, 46, 99, 0.2); }
.liquid-locked-card:hover .lock-circle-wrap { border-color: var(--c-red); box-shadow: 0 0 40px rgba(255, 46, 99, 0.4); animation: pulseWarn 0.5s infinite; }
.liquid-locked-card:hover .main-lock-icon { color: var(--c-red); }

/* --- AUDIO WIDGET (MOVED RIGHT) --- */
.audio-corner-wrapper { position: fixed; top: 30px; right: 30px; z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; }
.audio-btn-circle { width: 55px; height: 55px; border-radius: 50%; background: rgba(10, 10, 20, 0.6); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; position: relative; z-index: 10002; }
.audio-btn-circle:hover { border-color: var(--c-gold); box-shadow: 0 0 25px rgba(255, 193, 7, 0.4); transform: scale(1.1); }
.audio-btn-circle i { font-size: 1.2rem; color: #fff; transition: 0.3s; }
.audio-waves-mini { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 2px; align-items: flex-end; height: 10px; }
.audio-waves-mini span { width: 2px; background: var(--c-gold); height: 3px; border-radius: 2px; transition: 0.2s; }
.playing-state .audio-waves-mini span { animation: waveBounce 1s infinite ease-in-out; }

.glass-player {
    background: rgba(12, 12, 18, 0.95);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 20px;
    padding: 20px;
    width: 280px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    display: flex; flex-direction: column; gap: 15px;
    position: absolute;
    top: 70px; right: 0; /* Выпадаем вниз от иконки */
    transform: translateY(20px); opacity: 0; visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glass-player.active { transform: translateY(0); opacity: 1; visibility: visible; }
.ap-header { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.ap-title { font-size: 0.8rem; color: var(--c-gold); letter-spacing: 2px; font-weight: 800; }
.ap-close { cursor: pointer; color: #fff; } .ap-close:hover { color: var(--c-red); }
.ap-track-name { font-size: 0.85rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-controls-row { display: flex; justify-content: space-between; align-items: center; }
.ap-ctrl-btn { color: #888; font-size: 1.2rem; cursor: pointer; transition: 0.2s; } .ap-ctrl-btn:hover { color: #fff; transform: scale(1.1); }
.play-btn-glass { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--c-gold), var(--c-orange)); display: flex; align-items: center; justify-content: center; color: #000; font-size: 1.2rem; box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3); cursor: pointer; transition: 0.3s; }
.play-btn-glass:hover { background: #e6e6e6 !important; transform: scale(1.1); box-shadow: 0 0 25px var(--c-gold); }
.styled-slider { -webkit-appearance: none; width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; }
.styled-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: var(--c-gold); border-radius: 50%; cursor: pointer; }

}

/* ==========================================================================
   NEXEN TERMINAL: FULLSCREEN IMAGE VIEWER & SCROLL LAYOUT
   ========================================================================== */

.nt-img-view {
    cursor: zoom-in;
    transition: 0.2s;
}
.nt-img-view:hover {
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.4);
    transform: scale(1.02);
}

.nt-incubator-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    align-items: flex-start;
}
.nt-incubator-row .nt-img-view {
    width: 30%; 
    min-width: 200px;
    max-height: 350px;
    object-fit: contain;
}

#nt-zoom-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999999; 
    display: flex;
    flex-direction: column;
    padding: 40px;
    backdrop-filter: blur(15px); 
    animation: nt-fade-in 0.3s ease-out;
}

.nt-zoom-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    cursor: zoom-out;
    background: radial-gradient(circle, rgba(0,230,118,0.05) 0%, rgba(0,5,0,0.95) 100%);
}

.nt-zoom-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.nt-zoom-header {
    display: flex;
    justify-content: space-between;
    color: #00E676;
    font-weight: 900;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 230, 118, 0.5);
    margin-bottom: 30px;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
    flex-shrink: 0;
}

.nt-zoom-close {
    color: #FF1744;
    cursor: pointer;
    transition: 0.2s;
}
.nt-zoom-close:hover {
    color: #fff;
    text-shadow: 0 0 15px #FF1744;
    transform: scale(1.1);
}

/* КОНТЕЙНЕР ДЛЯ СКРОЛЛА */
.nt-zoom-body {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Картинка прилипает к верху */
    overflow-y: auto;        /* ВКЛЮЧЕН СКРОЛЛ */
    overflow-x: hidden;
    padding: 10px;
    z-index: 5;
}

/* ХАКЕРСКИЙ ПОЛЗУНОК СКРОЛЛА */
.nt-zoom-body::-webkit-scrollbar { width: 6px; }
.nt-zoom-body::-webkit-scrollbar-track { background: transparent; }
.nt-zoom-body::-webkit-scrollbar-thumb { background: #00E676; border-radius: 10px; }

/* САМА УВЕЛИЧЕННАЯ КАРТИНКА */
.nt-zoomed-img {
    width: 100%; 
    max-width: 900px; 
    height: auto !important;       /* РАЗРЕШАЕМ ВЫСОТЕ БЫТЬ ЛЮБОЙ */
    max-height: none !important;   /* УБИРАЕМ ЛИМИТЫ ВЫСОТЫ ЭКРАНА */
    object-fit: contain;
    border: 2px solid #00E676;
    box-shadow: 0 0 50px rgba(0, 230, 118, 0.2);
    animation: nt-glitch-img 0.2s ease-out;
    margin: 0 auto; 
}

/* ФИКСИРОВАННЫЕ СТРЕЛКИ НАВИГАЦИИ */
.nt-zoom-prev, .nt-zoom-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: rgba(0, 230, 118, 0.5);
    cursor: pointer;
    transition: 0.3s;
    padding: 20px;
    z-index: 100; /* Поверх всего */
}
.nt-zoom-prev { left: -60px; }
.nt-zoom-next { right: -60px; }

.nt-zoom-prev:hover, .nt-zoom-next:hover {
    color: #00E676;
    text-shadow: 0 0 20px #00E676;
    transform: translateY(-50%) scale(1.2);
}

@keyframes nt-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes nt-glitch-img {
    0% { filter: contrast(2) brightness(2) hue-rotate(90deg); opacity: 0; }
    100% { filter: none; opacity: 1; }
}

@media screen and (max-width: 768px) {
    .nt-incubator-row .nt-img-view { width: 100%; }
    #nt-zoom-modal { padding: 15px; }
    .nt-zoom-prev { left: -20px; font-size: 2rem; }
    .nt-zoom-next { right: -20px; font-size: 2rem; }
}

/* ==========================================================================
   NEXEN SECRET TERMINAL (UI & CRT EFFECTS) v3.0
   ========================================================================== */

/* 1. КНОПКА ЗАПУСКА ТЕРМИНАЛА (СКРЫТА ДО ЗАГРУЗКИ САЙТА) */
#nexen-terminal-trigger {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: rgba(10, 5, 20, 0.9);
    border: 2px solid #00E676;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #00E676;
    cursor: pointer;
    z-index: 99999;
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.3);
    /* Начальное скрытое состояние */
    opacity: 0;
    transform: scale(0.5) translateY(50px);
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Класс, который добавляется из app.js после прогрузки сайта */
#nexen-terminal-trigger.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    animation: nt-pulse 2s infinite 1s; /* Пульсация начнется через секунду после появления */
}

#nexen-terminal-trigger:hover {
    background: #00E676;
    color: #000;
    box-shadow: 0 0 30px rgba(0, 230, 118, 0.6);
    transform: scale(1.1) !important;
    animation: none;
}

@keyframes nt-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 230, 118, 0.2); }
    50% { box-shadow: 0 0 30px rgba(0, 230, 118, 0.6); }
}

/* 2. ОБЕРТКА ТЕРМИНАЛА (НА ВЕСЬ ЭКРАН) */
#nexen-terminal-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000000;
    display: none; 
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    font-family: 'JetBrains Mono', monospace; 
}

/* 3. САМ МОНИТОР (ОКНО ТЕРМИНАЛА) */
.nt-monitor {
    width: 900px;
    max-width: 95vw;
    height: 650px;
    max-height: 90vh;
    background: #050505;
    border: 2px solid #00E676;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 230, 118, 0.1), inset 0 0 20px rgba(0, 230, 118, 0.1);
    display: flex;
    flex-direction: column;
}

/* Эффект старого телевизора (сканлайны) */
.nt-monitor::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 100;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* 4. ШАПКА ТЕРМИНАЛА (С КРЕСТИКОМ) */
.nt-topbar {
    background: #00E676;
    color: #000;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 900;
    letter-spacing: 2px;
}
.nt-close-btn {
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.2s;
}
.nt-close-btn:hover { transform: scale(1.2); color: #fff; }

/* 5. ЭКРАН С КОНТЕНТОМ */
#nexen-screen {
    padding: 30px;
    flex: 1;
    overflow-y: auto;
    color: #00E676;
    display: flex;
    flex-direction: column;
}
#nexen-screen::-webkit-scrollbar { width: 8px; }
#nexen-screen::-webkit-scrollbar-thumb { background: #00E676; }

/* 6. ПАПКИ И ФАЙЛЫ */
.nt-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(0, 230, 118, 0.3);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
}
.nt-back, .nt-back-center { cursor: pointer; color: #FFC107; transition: 0.2s; }
.nt-back:hover, .nt-back-center:hover { color: #fff; text-shadow: 0 0 10px #FFC107; }
.nt-back-center { display: inline-block; margin-top: 20px; font-size: 1.2rem; text-decoration: underline; }

.nt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.nt-folder, .nt-file {
    padding: 15px;
    border: 1px solid #00E676;
    background: rgba(0, 230, 118, 0.05);
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
    font-weight: 700;
}
.nt-folder:hover, .nt-file:hover {
    background: #00E676; color: #000; box-shadow: 0 0 15px rgba(0, 230, 118, 0.4);
}
.nt-folder i, .nt-file i { font-size: 1.5rem; }

/* Закрытые папки */
.nt-folder.secure { border-color: rgba(255, 255, 255, 0.2); color: #888; background: transparent; }
.nt-folder.secure:hover { border-color: #FF1744; color: #FF1744; background: rgba(255, 23, 68, 0.1); box-shadow: 0 0 15px rgba(255, 23, 68, 0.4); }

/* Инкубатор */
.nt-folder.locked { border-color: #FF1744; color: #FF1744; background: rgba(255, 23, 68, 0.05); }
.nt-folder.locked:hover { background: #FF1744; color: #000; box-shadow: 0 0 20px rgba(255, 23, 68, 0.5); }

/* 7. КОНСОЛЬ (ВВОД КОДА) */
.nt-console { margin-top: auto; padding-top: 20px; border-top: 1px dashed rgba(0, 230, 118, 0.3); display: flex; align-items: center; gap: 10px; }
.nt-console::before { content: ">_"; font-weight: 900; animation: blink-cursor 1s infinite; }
#nt-cmd, #nt-hack-cmd {
    background: transparent; border: none; color: #00E676; font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; width: 100%; text-transform: uppercase; outline: none; text-shadow: 0 0 5px rgba(0, 230, 118, 0.5);
}
#nt-hack-cmd::placeholder { color: rgba(255, 193, 7, 0.5); }
@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.auth-text { color: #00E676; font-weight: 900; }
.exiled-text { color: #FF1744; font-weight: 900; text-shadow: 0 0 10px #FF1744; }

/* 8. ОШИБКИ И ВЗЛОМ */
.nt-error-screen { text-align: center; margin: auto; }
.nt-error-text { color: #FF1744; font-size: 1.5rem; font-weight: 900; line-height: 1.6; text-shadow: 0 0 15px rgba(255, 23, 68, 0.6); margin-bottom: 30px; }

/* Эффект красного глитча (когда банят Бельфегора) */
.nt-glitch-red .nt-monitor {
    border-color: #FF1744;
    box-shadow: 0 0 50px rgba(255, 23, 68, 0.4), inset 0 0 50px rgba(255, 23, 68, 0.2);
    animation: shake 0.4s ease-in-out;
}
.nt-glitch-red .nt-topbar { background: #FF1744; }
.nt-glitch-red #nexen-screen { color: #FF1744; }

@keyframes shake {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Процесс взлома */
.nt-hack-prompt { text-align: center; margin: auto; }
.nt-hack-alert { font-size: 1.2rem; margin-bottom: 30px; font-weight: 800; }
.nt-hack-btn {
    background: transparent; border: 2px solid #FFC107; color: #FFC107; padding: 15px 30px; font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; font-weight: 900; cursor: pointer; transition: 0.3s; text-transform: uppercase;
}
.nt-hack-btn:hover { background: #FFC107; color: #000; box-shadow: 0 0 20px rgba(255, 193, 7, 0.5); }

.nt-hack-console { margin: auto; width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 20px; }
#nt-hack-logs { font-size: 0.9rem; color: #888; display: flex; flex-direction: column; gap: 8px; text-align: left; min-height: 120px; }
.nt-progress-bar { width: 100%; height: 20px; border: 1px solid #FFC107; padding: 2px; }
#nt-progress-fill { height: 100%; width: 0%; background: #FFC107; transition: width 0.1s linear; }
#nt-progress-text { text-align: right; color: #FFC107; font-weight: 900; font-size: 1.5rem; }

/* 9. ПРОСМОТР ФАЙЛОВ */
.nt-file-content { display: flex; align-items: center; justify-content: center; flex: 1; }
.nt-text-view { background: rgba(0, 230, 118, 0.05); padding: 20px; border: 1px solid rgba(0, 230, 118, 0.2); width: 100%; font-size: 1rem; line-height: 1.8; }
.nt-img-view { max-width: 100%; max-height: 500px; object-fit: contain; border: 1px solid rgba(0, 230, 118, 0.4); box-shadow: 0 0 20px rgba(0, 230, 118, 0.1); }

/* Адаптив для мобилок */
@media screen and (max-width: 768px) {
    .nt-monitor { border-radius: 0; border: none; height: 100vh; max-height: 100vh; }
    .nt-grid { grid-template-columns: 1fr; }
    .nt-error-text { font-size: 1.2rem; }
    #nexen-terminal-trigger { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 1.4rem; }
}

/* ========================================================
   FINAL HARBINGER STYLES (NO GLITCH, PERMANENT COLORS)
   ======================================================== */

/* 1. Настройка модального окна (Смена фона) */
#m-harbinger {
    --harb-def-color: #2979FF;       /* Дефолтный синий */
    --harb-active-color: #2979FF;    /* Активный цвет (JS меняет его) */
    transition: background 0.5s ease;
}

/* Фон карточки по умолчанию */
#m-harbinger .modal-card {
    background: radial-gradient(circle at center, rgba(10, 20, 40, 0.95) 0%, #050505 100%) !important;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* --- РЕЖИМ "COLORED MODE" (ПРИ НАВЕДЕНИИ) --- */
/* Меняем тень и рамку самого большого окна */
#m-harbinger.colored-mode .modal-card {
    border-color: var(--harb-active-color) !important;
    box-shadow: 0 0 80px var(--harb-active-color), inset 0 0 100px rgba(0,0,0,0.9) !important;
}

/* Меняем "жидкий" фон на цвет предвестника */
#m-harbinger.colored-mode .liquid-bg-animated {
    background: radial-gradient(circle, var(--harb-active-color) 0%, transparent 60%) !important;
    opacity: 0.25; /* Чуть ярче */
}

/* Меняем заголовок */
#m-harbinger.colored-mode .tm-title {
    color: var(--harb-active-color) !important;
    text-shadow: 0 0 30px var(--harb-active-color) !important;
}

/* Красим все линии в цвет активного предвестника */
#m-harbinger.colored-mode .ht-root::after,
#m-harbinger.colored-mode .ht-branches::before,
#m-harbinger.colored-mode .node-line {
    background: var(--harb-active-color) !important;
    box-shadow: 0 0 15px var(--harb-active-color);
}


/* 2. ДРЕВО (СТРУКТУРА) */
.harb-tree-container {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ht-root {
    position: relative;
    z-index: 5;
    margin-bottom: 20px;
}
/* Линия от 0 вниз */
.ht-root::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    width: 3px; height: 30px;
    background: var(--harb-def-color);
    box-shadow: 0 0 10px var(--harb-def-color);
    transition: 0.3s;
}

/* Контейнер веток */
.ht-branches {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Расстояние между карточками */
    position: relative;
    padding-top: 3px;
}

/* Общая горизонтальная линия */
.ht-branches::before {
    content: ''; position: absolute; top: 0; left: 70px; right: 70px;
    height: 3px;
    background: var(--harb-def-color);
    box-shadow: 0 0 10px var(--harb-def-color);
    transition: 0.3s;
    border-radius: 10px;
}

/* Узел (Линия + Карточка) */
.ht-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: var(--node-h); /* Тот самый изгиб */
}

/* Вертикальная линия к карточке */
.node-line {
    position: absolute;
    bottom: 100%; left: 50%;
    width: 2px;
    height: var(--node-h);
    background: linear-gradient(to top, var(--harb-def-color), rgba(255,255,255,0.1));
    transform: translateX(-50%);
    transition: 0.3s;
}


/* 3. КАРТОЧКИ ПРЕДВЕСТНИКОВ */
.harb-card-mini {
    width: 140px; 
    aspect-ratio: 9/16; 
    background: #050505;
    border: 2px solid rgba(255,255,255,0.1); /* Базовая рамка, перезаписывается inline-стилем */
    border-radius: 12px;
    position: relative; overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.harb-root-card {
    width: 200px; aspect-ratio: 16/9; /* Корень широкий */
    border-color: #2979FF;
    box-shadow: 0 0 30px rgba(41, 121, 255, 0.2);
}

/* Эффект наведения на карточку */
.harb-card-mini:hover {
    transform: translateY(-10px) scale(1.05);
    z-index: 10;
    /* Цвет тени берется из переменной --h-glow, заданной в HTML */
    box-shadow: 0 0 40px var(--h-glow) !important; 
}

.hc-img { 
    width: 100%; height: 100%; object-fit: cover; 
    opacity: 0.5; transition: 0.5s; 
    filter: grayscale(100%); /* ЧБ по умолчанию */
}
.harb-card-mini:hover .hc-img { 
    opacity: 1; 
    filter: grayscale(0%); /* Цветное при наведении */
}

.hc-num {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3.5rem; font-weight: 900; 
    z-index: 2; pointer-events: none; transition: 0.3s;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0 0 10px currentColor; /* Свечение цифры её цветом */
}
.harb-card-mini:hover .hc-num {
    opacity: 0; /* Скрываем цифру при наведении, чтобы видеть фото */
    transform: translate(-50%, -50%) scale(1.5);
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .ht-branches {
        flex-wrap: wrap; justify-content: center;
        gap: 10px;
    }
    .ht-branches::before { display: none; } /* Убираем линии на телефоне */
    .node-line { display: none; }
    .ht-node { margin-top: 0 !important; } /* Убираем изгиб */
    .harb-card-mini { width: 100px; aspect-ratio: 1/1; } /* Квадратные */
}

/* =========================================================
   FIXED v3.0: BLUE HARBINGERS (WIDE) + PLAYERS + QA BUTTON
   ========================================================= */

/* --- 1. ЭКРАН ЗАГРУЗКИ (НЕОН) --- */
#neon-overlay {
    position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 2147483647 !important; display: none;
    align-items: center; justify-content: center; flex-direction: column;
    background: #000; transition: opacity 0.5s ease;
}
.neon-title {
    font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 4rem;
    text-transform: uppercase; letter-spacing: 10px; opacity: 0;
    transform: scale(0.9); animation: neonPulse 1.5s infinite alternate;
}
@keyframes neonPulse { 0% { opacity:0.5; transform:scale(0.95); } 100% { opacity:1; transform:scale(1.05); } }

/* Цвета текста при загрузке */
.overlay-green .neon-title { color: #00E676; text-shadow: 0 0 40px rgba(0,230,118,0.8); }
.overlay-blue .neon-title { color: #2979FF; text-shadow: 0 0 40px rgba(41, 121, 255, 0.8); }


/* --- 2. КНОПКА ВОПРОС-ОТВЕТ (ВАЖНО: Z-INDEX) --- */
.qa-wrapper {
    position: relative;
    z-index: 20; /* Чтобы кнопка нажималась поверх фона */
    margin-bottom: 30px;
    padding: 0 !important;
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(10, 10, 15, 0.6));
    border: 1px solid rgba(255, 0, 0, 0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    cursor: default;
}
.qa-content {
    display: flex; align-items: center; justify-content: space-between;
    padding: 25px 40px; gap: 20px;
}
.qa-icon-box {
    font-size: 3rem; color: #FF0000;
    filter: drop-shadow(0 0 15px rgba(255,0,0,0.6));
    animation: pulseWarn 2s infinite;
}
.qa-text { display: flex; flex-direction: column; flex: 1; }
.qa-title { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: 1px; text-transform: uppercase; }
.qa-sub { font-size: 0.85rem; color: #aaa; font-weight: 600; margin-top: 5px; }
.qa-btn {
    padding: 15px 30px; background: #FF0000; color: #fff; border: none;
    border-radius: 12px; font-weight: 900; letter-spacing: 1px; cursor: pointer;
    box-shadow: 0 5px 20px rgba(255,0,0,0.3); transition: 0.3s;
    display: flex; align-items: center; gap: 10px;
}
.qa-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255,0,0,0.5); background: #ff3333; }


/* --- 3. НАСТРОЙКА ОКОН (ФОНЫ) --- */
/* Убираем старую фиолетовую анимацию */
#m-players .liquid-bg-animated,
#m-harbinger .liquid-bg-animated { display: none !important; }

#m-players .modal-card,
#m-harbinger .modal-card {
    width: 100vw !important; height: 100vh !important;
    max-width: 100% !important; max-height: 100% !important;
    border-radius: 0 !important; margin: 0 !important; border: none !important;
    display: flex !important; flex-direction: column !important;
    left: 0 !important; top: 0 !important; transform: none !important;
    padding: 40px !important;
}

/* ИГРОКИ - ЗЕЛЕНЫЙ ФОН */
#m-players .modal-card {
    background: radial-gradient(circle at center, rgba(0, 230, 118, 0.15) 0%, #050505 90%) !important;
    box-shadow: inset 0 0 100px rgba(0, 230, 118, 0.05) !important;
}

/* ПРЕДВЕСТНИКИ - СИНИЙ ФОН (ДЕФОЛТ) */
#m-harbinger .modal-card {
    background: radial-gradient(circle at center, rgba(41, 121, 255, 0.15) 0%, #050505 90%) !important;
    transition: background 0.5s ease-in-out;
}


/* --- 4. ДРЕВО ПРЕДВЕСТНИКОВ (СИНИЕ ЛИНИИ) --- */
.harb-tree-container {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; position: relative; padding: 20px 0 60px 0;
}

/* Линия от 0 вниз (СИНЯЯ) */
.ht-root::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    width: 4px; height: 60px; 
    background: #2979FF; 
    box-shadow: 0 0 15px #2979FF; 
    transform: translateX(-50%); z-index: 0;
}

/* Горизонтальная линия (СИНЯЯ) */
.ht-branches::before {
    content: ''; position: absolute; top: -30px; left: 10%; right: 10%;
    height: 4px; 
    background: #2979FF;
    border-radius: 4px; box-shadow: 0 0 15px #2979FF;
}

/* Вертикальная палочка (СИНЯЯ) */
.ht-branches::after {
    content: ''; position: absolute; top: -60px; left: 50%; width: 4px; height: 30px;
    background: #2979FF;
    transform: translateX(-50%); box-shadow: 0 0 15px #2979FF;
}

/* Линии вверх от карточек (СИНИЕ) */
.ht-node::before {
    content: ''; position: absolute; bottom: 100%; left: 50%;
    width: 2px; height: 50px; 
    background: linear-gradient(to top, #2979FF, transparent);
    transform: translateX(-50%); opacity: 0.5;
}

/* Блоки */
.ht-node {
    position: relative; display: flex; flex-direction: column; align-items: center;
    margin-top: 20px;
}
.ht-root {
    position: relative; z-index: 5; margin-bottom: 60px;
    display: flex; flex-direction: column; align-items: center;
}
.ht-branches {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;
    position: relative; width: 100%;
}


/* --- 5. КАРТОЧКИ ПРЕДВЕСТНИКОВ (ШИРОКИЕ 16:9) --- */
.harb-card-mini {
    width: 300px; /* Ширина */
    aspect-ratio: 16/9 !important; /* Горизонтальные */
    background: #000; 
    border: 1px solid rgba(41, 121, 255, 0.3);
    border-radius: 12px; overflow: hidden; position: relative;
    transition: 0.3s; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.harb-card-mini:hover {
    transform: scale(1.05) translateY(-5px);
    border-color: #fff; z-index: 10;
    box-shadow: 0 0 30px rgba(41, 121, 255, 0.5);
}

/* Нулевой (Исток) - тоже широкий */
.harb-root-card {
    width: 400px; aspect-ratio: 16/9;
    border: 2px solid #2979FF;
    box-shadow: 0 0 50px rgba(41, 121, 255, 0.3);
}

.hc-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: 0.5s; }
.harb-card-mini:hover .hc-img { opacity: 1; }

.hc-num {
    font-size: 3rem; font-weight: 900; color: rgba(255,255,255,0.1);
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    pointer-events: none; z-index: 2; transition: 0.3s;
}
.harb-card-mini:hover .hc-num { color: rgba(255,255,255,0.9); text-shadow: 0 0 20px currentColor; }

/* Уникальные цвета при наведении */
.hc-lilac { border-color: #E040FB !important; box-shadow: 0 0 20px rgba(224,64,251,0.4); }
.hc-lilac:hover { box-shadow: 0 0 40px rgba(224,64,251,0.8); }

.hc-red { border-color: #D50000 !important; box-shadow: 0 0 20px rgba(213,0,0,0.4); }
.hc-red:hover { box-shadow: 0 0 40px rgba(213,0,0,0.8); }

.hc-teal { border-color: #1DE9B6 !important; box-shadow: 0 0 20px rgba(29,233,182,0.4); }
.hc-teal:hover { box-shadow: 0 0 40px rgba(29,233,182,0.8); }


/* --- 6. ИГРОКИ (ВЕРТИКАЛЬНЫЕ) --- */
.players-grid-wrapper {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 20px !important; padding: 20px; width: 100%; max-width: 1800px; margin: 0 auto;
}
.player-card {
    aspect-ratio: 9/16 !important; background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px;
    overflow: hidden; position: relative; transition: 0.3s;
}
.player-card:hover { border-color: var(--p-color, #00E676); transform: translateY(-5px); box-shadow: 0 0 25px var(--p-color, rgba(0, 230, 118, 0.3)); }
.pc-img-bg { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; transition: 0.4s; }
.player-card:hover .pc-img-bg { transform: scale(1.05); }
.pc-gradient { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); z-index: 2; }
.pc-info { position: absolute; bottom: 15px; left: 15px; right: 15px; z-index: 3; }
.pc-name { font-size: 1.1rem; font-weight: 800; color: #fff; text-transform: uppercase; margin-bottom: 5px; transition: 0.3s; }
.pc-meta { font-size: 0.7rem; color: #00E676; font-weight: 700; letter-spacing: 1px; transition: 0.3s; }
.pc-number-top { 
    position: absolute; top: 10px; left: 10px; z-index: 5; 
    background: rgba(0,0,0,0.7); padding: 4px 8px; border-radius: 6px; 
    font-size: 0.8rem; font-weight: 800; color: #fff; border: 1px solid rgba(255,255,255,0.1);
}
.pc-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #111; color: #333; font-size: 3rem; position: absolute; top: 0; left: 0; z-index: 0; }


/* --- 7. АДАПТИВ (ТЕЛЕФОНЫ) --- */
@media screen and (max-width: 768px) {
    .players-grid-wrapper { padding: 10px; grid-template-columns: repeat(2, 1fr) !important; }
    
    .ht-branches::before { display: none; }
    .ht-branches::after { display: none; }
    .ht-root::after { height: 30px; }
    .ht-branches { gap: 15px; }
    .harb-card-mini { width: 90vw; }
    .harb-root-card { width: 90vw; }
    
    .qa-content { flex-direction: column; text-align: center; padding: 20px; }
    .qa-btn { width: 100%; justify-content: center; }
}

/* PLAYLIST STYLES */
.playlist-hidden { height: 0; overflow: hidden; transition: height 0.3s ease; background: rgba(0,0,0,0.2); margin-top: 10px; border-radius: 8px; }
.playlist-visible { height: 200px; border: 1px solid rgba(255,255,255,0.1); }
.playlist-inner { height: 100%; overflow-y: auto; padding: 5px; }
.playlist-inner::-webkit-scrollbar { width: 4px; }
.playlist-inner::-webkit-scrollbar-thumb { background: var(--c-gold); border-radius: 2px; }
.pl-item { padding: 8px 10px; font-size: 0.75rem; font-weight: 700; color: #aaa; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); transition: 0.2s; font-family: 'JetBrains Mono', monospace; }
.pl-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.pl-item.active-track { color: var(--c-gold); background: rgba(255, 193, 7, 0.1); }
.ap-ctrl-btn.active-btn { color: var(--c-gold) !important; text-shadow: 0 0 10px var(--c-gold); }
/* === MODALS (FIXED SCROLL BUG) === */
.modal-wrap { 
    position: fixed !important; 
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); 
    z-index: 100000; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    opacity: 0; transition: opacity 0.5s; 
    padding: 20px;
}
.modal-wrap.active { opacity: 1; display: flex !important; }

.modal-tech-grid, .modal-card, .sec-card-sunrise { 
    background: rgba(10, 8, 16, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 193, 7, 0.1);
    border-radius: 24px; 
    padding: 40px; 
    color: #fff; 
    max-height: 85vh; 
    position: relative;
    overflow: hidden; 
    animation: modalZoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    backdrop-filter: blur(20px);
    display: flex; flex-direction: column; 
}

.season-modal-bg { width: 1500px !important; }

.liquid-bg-animated {
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.15) 0%, rgba(213, 0, 249, 0.1) 40%, rgba(10, 8, 16, 0.95) 70%);
    z-index: 0;
    animation: liquidMove 10s infinite linear;
    pointer-events: none;
}
@keyframes liquidMove {
    0% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(180deg) translate(20px, 20px); }
    100% { transform: rotate(360deg) translate(0, 0); }
}

.modal-tech-grid::after, .modal-card::after, .sec-card-sunrise::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1; pointer-events: none; opacity: 0.4;
}

.tech-modal-header, .close-m, .locked-feature, .season-modal-content, #login-nick, #login-pass {
    position: relative; z-index: 5;
}

.tech-modal-header {
    text-align: center; margin-bottom: 20px; padding-bottom: 20px; 
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex-shrink: 0; 
}
.tm-title { font-size: 2.2rem; font-weight: 900; color: #fff; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.tm-sub { font-size: 0.8rem; font-weight: 700; color: var(--c-gold); letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; }

.modal-scrollable-content {
    overflow-y: auto;
    padding-right: 10px;
    flex: 1;
    margin-top: 10px;
    position: relative;
    z-index: 5;
}
.modal-scrollable-content::-webkit-scrollbar { width: 5px; }
.modal-scrollable-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.modal-scrollable-content::-webkit-scrollbar-thumb { background: var(--c-gold); border-radius: 4px; }

.tech-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 10px; }
.tech-label { display: block; font-size: 0.65rem; font-weight: 800; color: rgba(255,255,255,0.5); margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; margin-left: 2px; }
.form-hint { font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 5px; margin-left: 2px; font-weight: 500; font-family: 'Montserrat', sans-serif; }

.tech-input { 
    width: 100%; padding: 18px; 
    background: rgba(0, 0, 0, 0.4); 
    border: 1px solid rgba(255,255,255,0.08); 
    border-radius: 12px; color: #fff; 
    font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}
.tech-input:focus { border-color: var(--c-gold); background: rgba(0, 0, 0, 0.8); box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.1), inset 0 2px 5px rgba(0,0,0,0.5); transform: translateY(-2px); }
.tech-input:hover { border-color: rgba(255,255,255,0.3); background: rgba(0,0,0,0.5); }

.tech-submit-btn { 
    grid-column: 1 / -1; padding: 22px; background: var(--c-gold); color: #000; 
    font-weight: 900; font-size: 1rem; letter-spacing: 2px;
    border: none; border-radius: 12px; cursor: pointer; transition: 0.3s; margin-top: 5px;
    text-transform: uppercase; box-shadow: 0 10px 30px rgba(255, 193, 7, 0.15);
    position: relative; overflow: hidden; z-index: 5;
}
.tech-submit-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); animation: shineMove 4s infinite; }
.tech-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(255, 193, 7, 0.3); background: #FFD54F; }

/* GALLERY GRID */
.gallery-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.gallery-item-small { aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: 0.3s; background: rgba(0,0,0,0.3); pointer-events: all; }
.gallery-item-small:hover { transform: scale(1.05); z-index: 10; border-color: var(--c-gold) !important; box-shadow: 0 0 15px var(--c-gold); }
.sm-img { width: 100%; height: 100%; object-fit: cover; }
.sm-title { text-shadow: none; background: linear-gradient(180deg, #fff, #888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* LOCKED MAP/RULES */
.locked-feature { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 30px; position: relative; z-index: 5; }
.huge-cross { font-size: 5rem; color: var(--c-red); opacity: 0.8; animation: pulseWarn 2s infinite; filter: drop-shadow(0 0 20px rgba(255, 46, 99, 0.3)); }
.lf-title { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: 2px; text-transform: uppercase; max-width: 80%; line-height: 1.4; }
.lf-timer { font-family: 'JetBrains Mono', monospace; font-size: 1.8rem; color: var(--c-gold); font-weight: 800; border: 1px solid rgba(255, 193, 7, 0.3); padding: 10px 30px; border-radius: 12px; background: rgba(255, 193, 7, 0.05); text-shadow: 0 0 20px rgba(255, 193, 7, 0.3); }

/* === ОФОРМЛЕНИЕ КВАДРАТОВ ЗАЯВКИ === */
.form-quadrant {
    background: rgba(255, 255, 255, 0.03); /* Легкий фон */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px; /* БОЛЬШЕ ОТСТУПЫ ВНУТРИ */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Расстояние между вопросами */
    transition: 0.3s;
}

.form-quadrant:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 193, 7, 0.3); /* Золотая рамка при наведении */
}

/* === ЗАГОЛОВКИ С ЛИНИЯМИ (—— TITLE ——) === */
.form-quadrant .form-section-title {
    font-size: 1rem;
    color: var(--c-gold);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 3px;
    
    /* Центрирование и линии */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
}

/* Рисуем линии слева и справа */
.form-quadrant .form-section-title::before,
.form-quadrant .form-section-title::after {
    content: '';
    flex: 1; /* Линия занимает все свободное место */
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-gold), transparent); /* Золотой градиент */
    margin: 0 15px; /* Отступ от текста */
    opacity: 0.6;
}

/* LAUNCHERS */
.launchers { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 20px; }
.l-card { position: relative; padding: 30px; height: 220px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); background: rgba(10, 10, 15, 0.6) !important; box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 10px 40px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.05); }
.lc-modrinth { border-color: rgba(0, 230, 118, 0.3) !important; }
.lc-modrinth:hover { transform: translateY(-5px) scale(1.02); border-color: #00E676 !important; box-shadow: 0 0 40px rgba(0, 230, 118, 0.5), inset 0 0 30px rgba(0, 230, 118, 0.2) !important; }
.lc-modrinth:hover .l-dl-btn { background: var(--c-modrinth); border-color: var(--c-modrinth); color: #000; box-shadow: 0 0 30px rgba(0, 230, 118, 0.6); }
.lc-astral { border-color: rgba(213, 0, 249, 0.3) !important; }
.lc-astral:hover { transform: translateY(-5px) scale(1.02); border-color: #D500F9 !important; box-shadow: 0 0 40px rgba(213, 0, 249, 0.5), inset 0 0 30px rgba(213, 0, 249, 0.2) !important; }
.lc-astral:hover .l-dl-btn { background: #D500F9; border-color: #D500F9; color: #fff; box-shadow: 0 0 30px rgba(213, 0, 249, 0.6); }
.huge-bg-text { position: absolute; top: -15px; left: -5px; font-size: 5.5rem; font-weight: 900; font-family: 'Montserrat', sans-serif; line-height: 0.9; letter-spacing: -2px; text-transform: uppercase; white-space: nowrap; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: 0.4s; }
.lc-modrinth .huge-bg-text { background: linear-gradient(180deg, rgba(0, 230, 118, 0.15) 0%, rgba(0, 230, 118, 0) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lc-astral .huge-bg-text { background: linear-gradient(180deg, rgba(213, 0, 249, 0.15) 0%, rgba(213, 0, 249, 0) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.l-card:hover .huge-bg-text { transform: translateX(10px); opacity: 0.8; }
.l-content { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.l-header-row { display: flex; align-items: center; gap: 20px; }
.l-icon-box { width: 60px; height: 60px; background: rgba(255,255,255,0.05); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.3); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.1); }
.l-info { display: flex; flex-direction: column; }
.l-title { font-size: 1.6rem; font-weight: 900; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.l-sub { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 1px; }
.l-dl-btn { width: 100%; padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.4); color: #fff; font-weight: 800; cursor: pointer; text-transform: uppercase; transition: 0.3s; backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; gap: 10px; }
.mega-dl { width: 100%; padding: 40px; border-radius: 35px; background: rgba(10, 10, 15, 0.6); border: 2px solid #FFC107; box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 10px 40px rgba(255, 193, 7, 0.15); backdrop-filter: blur(20px); cursor: pointer; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 25px; transition: 0.4s; animation: pulseGold 3s infinite ease-in-out; }
.mega-dl:hover { transform: translateY(-5px); box-shadow: 0 0 50px rgba(255, 193, 7, 0.6); border-color: #fff; }
.mega-dl .huge-bg-text { font-size: 8rem; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.1; letter-spacing: 10px; z-index: 0; background: linear-gradient(180deg, #FFC107 0%, transparent 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.mega-text { font-size: 2rem; font-weight: 900; color: #FFC107; text-shadow: 0 0 20px rgba(255, 193, 7, 0.5); letter-spacing: 1px; position: relative; z-index: 2; }
@keyframes pulseGold { 0%, 100% { border-color: #FFC107; } 50% { border-color: #ffca28; box-shadow: 0 0 30px rgba(255, 193, 7, 0.3); } }

/* TIMELINE */
.timeline-container { margin-top: 60px; padding: 50px 20px; position: relative; overflow: visible; z-index: 10; border: 2px solid var(--c-gold); border-radius: 40px; box-shadow: 0 0 30px rgba(255, 193, 7, 0.2); }
.timeline-decor-left, .timeline-decor-right { position: absolute; top: 10%; bottom: 10%; width: 2px; background: linear-gradient(to bottom, transparent, var(--c-purple), transparent); box-shadow: 0 0 15px var(--c-purple); opacity: 0.5; }
.timeline-decor-left { left: 30px; }
.timeline-decor-right { right: 30px; }
.timeline-header { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; color: #fff; margin-bottom: 60px; text-align: center; letter-spacing: 3px; background: linear-gradient(90deg, #fff, #888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.timeline-vertical { display: flex; flex-direction: column; position: relative; max-width: 1000px; margin: 0 auto; }
.timeline-track { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, transparent, #444, #fff, #444, transparent); transform: translateX(-50%); z-index: 0; opacity: 0.4; }
.t-row { display: flex; width: 100%; margin-bottom: 40px; position: relative; z-index: 2; }
.t-row.left { justify-content: flex-end; padding-right: 50px; text-align: right; }
.t-row.right { justify-content: flex-start; padding-left: 50px; text-align: left; }
.t-row.left > .t-card, .t-row.right > .t-card { width: 45%; max-width: 450px; }
.t-dot { position: absolute; left: 50%; top: 30px; width: 20px; height: 20px; background: #000; border: 4px solid var(--tc); border-radius: 50%; transform: translateX(-50%); z-index: 5; box-shadow: 0 0 15px var(--tc); transition: 0.3s; }
.t-card {
    background: rgba(10, 15, 20, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 4px solid var(--tc);
    border-radius: 20px;
    padding: 25px; 
    transition: 0.4s;
    position: relative;
    overflow: visible !important; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 2;
}
.t-card.ranked-card { padding-top: 45px !important; }

.t-card:hover { transform: translateY(-5px); border-color: var(--tc); box-shadow: 0 0 20px var(--tc); background: rgba(15, 20, 30, 0.95); }
.t-read-btn { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); padding: 8px 20px; background: var(--tc); color: #000; font-weight: 800; font-size: 0.8rem; border-radius: 20px; opacity: 0; transition: 0.4s; cursor: pointer; text-transform: uppercase; box-shadow: 0 0 20px var(--tc); }
.t-card:hover .t-read-btn { bottom: -20px; opacity: 1; }
.t-row.left .t-read-btn { left: auto; right: 20px; transform: none; }
.t-row.right .t-read-btn { left: 20px; right: auto; transform: none; }
.phantom-bg-text { position: absolute; top: 50%; transform: translateY(-50%); font-size: 5rem; font-weight: 900; line-height: 0.8; text-transform: uppercase; pointer-events: none; z-index: 0; opacity: 0.05; color: var(--tc); white-space: pre-line; transition: 0.4s ease-out; font-family: 'Montserrat', sans-serif; }
.t-row:hover .phantom-bg-text { opacity: 0.2; text-shadow: 0 0 30px var(--tc); }
.long-text { font-size: 4rem !important; }
.t-row.left .phantom-bg-text { left: -30px; text-align: left; }
.t-row.right .phantom-bg-text { right: -30px; text-align: right; }
.season-tag { padding: 5px 12px; border-radius: 10px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; margin-left: auto; white-space: nowrap; }
.tag-active { background: rgba(0, 229, 255, 0.2); color: #00E5FF; border: 1px solid #00E5FF; box-shadow: 0 0 15px rgba(0, 229, 255, 0.3); animation: pulseIce 2s infinite; }
.tag-future { background: rgba(255, 193, 7, 0.1); color: #FFC107; border: 1px solid rgba(255, 193, 7, 0.3); }
.tag-ended-prematurely {
    color: #FF2E63;
    font-weight: 900;
    font-size: 0.65rem; 
    text-transform: uppercase;
    border: 1px solid #FF2E63;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 46, 99, 0.1);
    display: inline-block;
    vertical-align: middle; 
    margin-left: 15px;      
    position: relative;
    top: -1px;              
}
.tc-meta-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; position: relative; z-index: 2; width: 100%; gap: 15px; flex-wrap: wrap; }
.t-row.left .t-card { align-items: flex-end; } .t-row.right .t-card { align-items: flex-start; }
.tc-date { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.5); padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.1); display: inline-block; width: 100%; }
.tc-header-group { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; position: relative; z-index: 2; }
.t-row.left .tc-header-group { flex-direction: row-reverse; }
.tc-icon { font-size: 1.8rem; color: var(--tc); transition: 0.3s; background: rgba(255,255,255,0.05); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.tc-title { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color: #fff; letter-spacing: 1px; }
.tc-desc { font-size: 0.9rem; line-height: 1.6; color: #ccc; max-width: 100%; position: relative; z-index: 2; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 10px; font-family: 'Montserrat', sans-serif;}
.t-card:hover .tc-icon { background: var(--tc); color: #000 !important; box-shadow: 0 0 20px var(--tc); }
.sunrise-card-content { display: flex; flex-direction: column; width: 100%; align-items: flex-start; }
.t-row.left .sunrise-card-content { align-items: flex-end; }
.t-card[style*="--c-gold"] { border-color: #FFC107 !important; box-shadow: 0 0 20px rgba(255, 193, 7, 0.4) !important; }

/* MODAL CLOSE & LIGHTBOX NAV */
.close-m { position: absolute; top: 30px; right: 30px; font-size: 2rem; color: rgba(255,255,255,0.3); cursor: pointer; transition: 0.3s; z-index: 100; }
.close-m:hover { transform: rotate(90deg) scale(1.1); color: var(--c-red); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; color: rgba(255,255,255,0.3); cursor: pointer; padding: 20px; transition: 0.3s; z-index: 20010; }
.lb-nav:hover { color: var(--c-gold); transform: translateY(-50%) scale(1.2); }
.lb-nav.prev { left: 20px; }
.lb-nav.next { right: 20px; }
.lightbox-close { position: absolute; top: 30px; right: 30px; font-size: 3rem; color: rgba(255,255,255,0.5); cursor: pointer; transition: 0.3s; z-index: 20020; }
.lightbox-close:hover { color: var(--c-red); transform: rotate(90deg); }

/* FIX Z-INDEX LIGHTBOX */
#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 20000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(5px); overflow: hidden; }
#lightbox.active { display: flex; opacity: 1; pointer-events: all; }
.lb-container { position: relative; max-width: 90vw; max-height: 90vh; display: flex; justify-content: center; align-items: center; z-index: 5; }
#lightbox-img { max-width: 90vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 0 50px var(--lb-glow-color, rgba(255, 193, 7, 0.2)); object-fit: contain; }

/* --- RANK BADGES --- */
.rank-badge {
    position: absolute;
    top: -1px; right: -1px;
    padding: 8px 20px;
    border-radius: 0 20px 0 15px; 
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.3); 
    border: 1px solid rgba(255,255,255,0.15); 
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    white-space: nowrap; 
}
.rank-gold { background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%); color: #000; border-color: #FFD700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
.rank-silver { background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%); color: #000; border-color: #fff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); }
.rank-bronze { background: linear-gradient(135deg, #FFAB91 0%, #D84315 100%); color: #fff; border-color: #FFAB91; box-shadow: 0 0 20px rgba(255, 87, 34, 0.3); }

/* --- RATINGS ROW --- */
.card-stats-row {
    display: flex;
    gap: 15px;
    margin-top: 15px; 
    margin-bottom: 15px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 800;
    flex-wrap: wrap;
}
.stat-pill {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF; 
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}
.stat-pill i { color: #FFFFFF; opacity: 0.8; }
.stat-pill:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
/* === HERO WIDGET V4 (STRICT NEON) === */

.neon-grid-wrapper {
    background: transparent !important; /* Убираем фон обертки */
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    position: relative;
}

/* Общий стиль прямоугольников */
.neon-rect-box {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 193, 7, 0.3);
    backdrop-filter: blur(20px);
    padding: 20px;
    position: relative;
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 15px), 
        calc(100% - 15px) 100%, 
        0 100%
    ); /* Срезанный угол */
    transition: 0.3s;
}

.neon-rect-box:hover {
    border-color: var(--c-gold);
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.15);
}

.box-label {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 193, 7, 0.1);
    color: var(--c-gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    padding: 4px 10px;
    font-weight: 700;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 193, 7, 0.3);
    border-right: 1px solid rgba(255, 193, 7, 0.3);
}

/* ТАЙМЕР */
.countdown-grid-huge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.time-huge {
    font-family: 'JetBrains Mono', monospace; /* Строгий моноширинный шрифт */
    font-weight: 800;
    font-size: 3.5rem; /* ОЧЕНЬ БОЛЬШИЕ ЦИФРЫ */
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
}

.time-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 2px;
    margin-top: 5px;
}

.time-sep {
    font-size: 3rem;
    color: rgba(255,255,255,0.1);
    font-family: 'JetBrains Mono', monospace;
    margin-top: -15px;
}

.sec-anim {
    animation: textPulse 1s infinite; /* Секунды пульсируют */
}

/* ДАТЫ */
.date-section {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.1);
}

.date-huge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-gold);
    text-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
    margin-top: 10px; /* Отступ от лейбла */
}

/* ИНДИКАТОР */
.live-indicator-strict {
    position: absolute;
    top: -25px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--c-red);
    font-weight: 700;
    letter-spacing: 1px;
    background: rgba(0,0,0,0.6);
    padding: 2px 8px;
    border: 1px solid var(--c-red);
}

.rect-dot {
    width: 6px;
    height: 6px;
    background: var(--c-red);
    box-shadow: 0 0 10px var(--c-red);
    animation: blink 1s infinite;
}

@keyframes blink { 50% { opacity: 0; } }
/* ==========================================================================
   AGREEMENT & SUCCESS FIX (ALWAYS CENTERED & LOCKED)
   Вставь это в самый конец файла, чтобы перекрыть всё остальное
   ========================================================================== */

/* 1. Обертка на весь экран (Фон) */
#m-agreement, 
#full-success {
    position: fixed !important;      /* Фиксируем относительно ГЛАЗ (окна браузера) */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;         /* На всю ширину */
    height: 100vh !important;        /* На всю высоту */
    background: rgba(0, 0, 0, 0.95) !important; /* Темный фон, чтобы не видеть сайт */
    z-index: 999999 !important;      /* Поверх ВСЕГО (даже поверх других модалок) */
    
    display: none;                   /* Скрыто по умолчанию */
    align-items: center !important;  /* Центровка по вертикали */
    justify-content: center !important; /* Центровка по горизонтали */
    
    overflow: hidden !important;     /* Запрещаем скролл самой обертки */
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Когда JS добавляет класс .active — показываем Flex */
#m-agreement.active, 
#full-success.active {
    display: flex !important;
}

/* 3. Карточка внутри (Само окно с текстом) */
#m-agreement .modal-card, 
#full-success .modal-card {
    position: relative !important;
    margin: 0 !important;            /* Убираем любые отступы, которые сдвигали окно */
    top: auto !important;
    left: auto !important;
    transform: none !important;      /* Убираем смещения */
    
    width: auto !important;
    max-width: 600px !important;     /* Оптимальная ширина для текста */
    max-height: 90vh !important;     /* Чтобы не вылезало за экран */
    
    overflow-y: auto !important;     /* Если текст длинный — скролл внутри карточки */
    display: flex !important;
    flex-direction: column !important;
    
    /* Красота (тень и рамка) */
    box-shadow: 0 0 100px rgba(0,0,0,1) !important;
    border: 1px solid var(--c-gold) !important; 
    background: #101015 !important;
}

/* 4. Блокировка скролла сайта (визуально) */
/* Этот класс обычно добавляется JS-ом на body, но на всякий случай подстрахуем, 
   чтобы фон за окном не "дергался" */
body.modal-open {
    overflow: hidden !important;
}

/* === UPDATE: WIDER SEASON MODAL === */
/* Перезаписываем ширину окна сезонов */
.season-modal-bg {
    width: 55vw !important; /* Почти на всю ширину экрана */
    max-width: 12000px !important; /* Но не бесконечно */
}

/* Увеличиваем шрифт заголовка внутри окна, раз места стало больше */
.sm-title {
    font-size: 5rem !important; 
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .time-huge { font-size: 2rem; }
    .time-sep { font-size: 1.5rem; margin-top: -10px; }
    .date-huge { font-size: 1rem; }
    .neon-rect-box { padding: 15px 10px; }
    .season-modal-bg { width: 95vw !important; height: 80vh !important; }
    .sm-title { font-size: 3rem !important; }
}
/* === TEXT HIGHLIGHTS & SPACING UPDATES === */

/* Уменьшаем отступы между абзацами в описании */
#sm-desc p {
    margin-bottom: 10px !important; /* Было больше, делаем компактнее */
    line-height: 1.5 !important;
}

/* Специфичные цвета для Лора */

/* BleedC0d3: Серый с белым свечением */
.h-bleed { 
    color: #B0BEC5; 
    font-weight: 900; 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); 
}

/* SaAera: Темно-синий с синим свечением */
.h-saaera { 
    color: #0D47A1; 
    font-weight: 900; 
    text-shadow: 0 0 15px rgba(41, 121, 255, 0.8); 
}

/* Popochka The Rift / Яйца: Фиолетовый */
.h-rift, .h-egg { 
    color: #D500F9; 
    font-weight: 900; 
    text-shadow: 0 0 10px rgba(213, 0, 249, 0.4); 
}

/* NEXEN / Офис: Синий */
.h-blue { 
    color: #2979FF; 
    font-weight: 900; 
    text-shadow: 0 0 10px rgba(41, 121, 255, 0.4); 
}

/* Украина: Желтый */
.h-ua { 
    color: #FFD600; 
    font-weight: 900; 
    text-shadow: 0 0 10px rgba(255, 214, 0, 0.4); 
}

/* Харьков: Темно-зеленый */
.h-kh { 
    color: #2E7D32; 
    font-weight: 900; 
    text-shadow: 0 0 10px rgba(46, 125, 50, 0.4); 
}

/* Пекельна: Ярко-зеленый */
.h-green { 
    color: #00E676; 
    font-weight: 900; 
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.4); 
}

/* Огненная сфера: Оранжевый */
.h-orange { 
    color: #FF6D00; 
    font-weight: 900; 
    text-shadow: 0 0 10px rgba(255, 109, 0, 0.4); 
}
/* === FIX: LIGHTBOX LAYER & OPTIMIZATION === */

/* Поднимаем просмотрщик фото НАД всем остальным */
#lightbox {
    z-index: 2000000 !important; /* Больше, чем у модальных окон */
}

/* Кнопки навигации в лайтбоксе тоже поднимаем */
.lb-nav, .lightbox-close {
    z-index: 2000010 !important;
}

/* Оптимизация модальных окон (чтобы меньше лагало при анимации) */
.modal-wrap {
    will-change: opacity; /* Подсказка браузеру готовиться к анимации */
}

.modal-card {
    will-change: transform, opacity;
    /* Если лаги сильные, можно временно отключить блюр на слабых ПК, 
       но пока оставим как есть */
}
/* =========================================
   === ФИКС ЛАГОВ ДЛЯ EDGE (GPU FIX) ===
   ========================================= */

/* 1. Убираем размытие с заднего фона (это главная причина лагов) */
.modal-wrap {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.9) !important; /* Делаем фон просто темным */
    will-change: opacity; /* Готовим браузер к анимации */
    

/* 3. Оптимизация контейнера сайта */
#site-wrapper {
    transform: translateZ(0);
    contain: paint;
}
/* === SCROLL OPTIMIZATION === */
.sm-gallery-col, .sm-text-col {
    will-change: scroll-position; /* Говорим браузеру, что это будет скроллиться */
    transform: translateZ(0);     /* Включаем GPU */
}

/* Когда мы скроллим, отключаем все эффекты наведения (супер ускорение) */
.disable-hover {
    pointer-events: none !important;
}
/* === FIX: LIGHTBOX CONTROLS === */

/* Сам контейнер лайтбокса */
#lightbox {
    z-index: 2000000 !important; /* Самый верхний слой */
    background: rgba(0, 0, 0, 0.95); /* Почти черный фон */
    user-select: none; /* Чтобы текст не выделялся при кликах */
}

/* Кнопки ВЛЕВО / ВПРАВО */
.lb-nav {
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 100px; /* Широкая зона клика */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem; /* Большие стрелки */
    color: rgba(255, 255, 255, 0.4);
    transition: 0.2s;
    cursor: pointer;
    z-index: 2000010 !important; /* Поверх картинки */
}

.lb-nav:hover {
    color: #FFC107;
    background: rgba(255,255,255,0.02); /* Легкая подсветка зоны */
}

.lb-nav.prev { left: 0; justify-content: flex-start; padding-left: 20px; }
.lb-nav.next { right: 0; justify-content: flex-end; padding-right: 20px; }

/* Картинка внутри */
#lightbox-img {
    max-width: 80vw; /* Чуть меньше, чтобы не лезть под кнопки */
    max-height: 85vh;
    border-radius: 4px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    z-index: 2000005; /* Ниже кнопок */
}

/* Крестик закрытия */
.lightbox-close {
    z-index: 2000020 !important;
    top: 20px; 
    right: 20px;
    background: rgba(0,0,0,0.5);
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
/* =========================================
   === FIX: LIGHTBOX ARROWS & BUGS ===
   ========================================= */

#lightbox {
    z-index: 2000000 !important;
    background: rgba(0, 0, 0, 0.96); /* Плотный черный фон */
    display: none; 
    justify-content: center; 
    align-items: center;
    user-select: none;
}

/* Фон, который ловит клик для закрытия */
.lb-backdrop {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; /* Самый нижний слой в лайтбоксе */
}

/* Сама картинка */
.lb-container {
    position: relative; 
    z-index: 5; /* Выше фона */
    pointer-events: none; /* Чтобы клик сквозь картинку не закрывал (опционально) */
}

#lightbox-img {
    max-width: 85vw; 
    max-height: 85vh; 
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    pointer-events: auto; /* Возвращаем клики картинке */
}

/* СТРЕЛКИ (Вертикально по центру) */
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px; height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10; /* Поверх всего */
    color: #fff;
    font-size: 1.5rem;
    transition: 0.3s;
    backdrop-filter: blur(5px);
}

.lb-nav:hover {
    background: var(--c-gold);
    color: #000;
    box-shadow: 0 0 20px var(--c-gold);
    transform: translateY(-50%) scale(1.1);
}

.lb-nav.prev { left: 30px; }
.lb-nav.next { right: 30px; }

/* КРЕСТИК */
.lightbox-close {
    position: absolute;
    top: 30px; right: 30px;
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    z-index: 20;
    transition: 0.3s;
}
.lightbox-close:hover { color: var(--c-red); transform: rotate(90deg); }


/* --- NEW PLAYER DESIGN (GLASS V7) --- */

/* Скрываем старый стиль, если он мешает */
.audio-dropdown { background: transparent !important; border: none !important; box-shadow: none !important; }

/* Новый стиль карточки */
.glass-player {
    background: rgba(12, 12, 18, 0.95) !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    width: 260px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
    display: flex; flex-direction: column; gap: 15px;
    /* Анимация появления */
    transform: translateY(20px); opacity: 0; visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-player.active {
    transform: translateY(0); opacity: 1; visibility: visible;
}

.ap-header { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; margin-bottom: 5px; }
.ap-title { font-size: 0.7rem; color: var(--c-gold); letter-spacing: 2px; font-weight: 800; }

.ap-track-name { font-size: 0.9rem; color: #fff; margin-bottom: 2px; }

.ap-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
}

.ap-ctrl-btn { color: #888; font-size: 1.2rem; cursor: pointer; transition: 0.3s; }
.ap-ctrl-btn:hover { color: #fff; transform: scale(1.1); }

/* Кнопка Play в плеере */
.play-btn-glass {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-gold), var(--c-orange));
    display: flex; align-items: center; justify-content: center;
    color: #000; font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
    cursor: pointer;
    transition: 0.3s;
}
.play-btn-glass:hover { transform: scale(1.1); box-shadow: 0 0 25px var(--c-gold); }

/* Ползунок громкости */
.styled-slider {
    -webkit-appearance: none; width: 100%; height: 4px;
    background: rgba(255,255,255,0.1); border-radius: 2px;
}
.styled-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 10px; height: 10px;
    background: var(--c-gold); border-radius: 50%;
    cursor: pointer; box-shadow: 0 0 10px var(--c-gold);
}
/* === ANTI-LAG FIX === */
.disable-hover {
    pointer-events: none !important;
}

.sm-gallery-col {
    will-change: scroll-position; /* Подсказка браузеру */
}
/* Ускорение отрисовки картинки в лайтбоксе */
#lightbox-img {
    will-change: opacity, transform; /* GPU Подсказка */
    transition: opacity 0.15s ease-out; /* Очень быстрая анимация */
    backface-visibility: hidden;
}
/* ==========================================================================
   MOBILE FIX v4.0 (FINAL: CLICKS FIXED + TEXT RESIZE)
   Вставлять в самый низ style.css
   ========================================================================== */

@media screen and (max-width: 1024px) {
    
.modal-card, 
    .season-modal-bg, 
    .wide-form-modal,
    #m-login .modal-card, 
    #m-map .modal-card, 
    #m-rules .modal-card, 
    #m-apply .modal-card {
        width: 50% !important;          /* Оставляем 5% места по бокам */
        min-height: 50vh !important;    /* Убираем растягивание на весь экран */
        height: 50vh !important;        /* Высота по контенту */
        max-height: 85vh !important;    /* Не выше 85% экрана */
        margin: 50vh !important;        /* Центрируем */
        border-radius: 2px !important; /* Возвращаем красивые углы */
        max-width: 100px !important;   /* Ограничиваем ширину */
    }
/* --- НОВЫЙ ПЛЕЕР (TRACKLIST + REPEAT) --- */
.playlist-container {
    max-height: 150px;
    overflow-y: auto;
    margin: 10px 0;
    background: rgba(0,0,0,
    0.3);
    border-radius: 8px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,0.1);
}

.playlist-item {
    padding: 8px 10px;
    font-size: 0.85rem;
    color: #aaa;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: 0.2s;
    display: flex;
    justify-content: space-between;
}

.playlist-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.playlist-item.active-track { color: var(--c-gold); font-weight: 700; background: rgba(255, 193, 7, 0.1); }
.playlist-item i { opacity: 0; }
.playlist-item.active-track i { opacity: 1; }

.repeat-btn {
    font-size: 1rem;
    color: #666;
    cursor: pointer;
    transition: 0.3s;
    margin-right: 15px;
}
.repeat-btn.active-repeat {
    color: var(--c-gold);
    text-shadow: 0 0 10px var(--c-gold);
}

/* Расширенная анкета */
.wide-form-modal {
    width: 200px !important; /* Широкое окно */
    max-width: 55vw;
}

.form-explanation {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 4px;
    font-weight: 400;
    line-height: 1.4;
}

    /* --- 1. ЛЕЧИМ КЛИКИ И СКРОЛЛ --- */
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh;
        position: relative;
        touch-action: manipulation; /* Улучшает реакцию на тапы */
    }

    /* Фон - назад */
    #master-canvas {
        position: fixed !important;
        top: 0; left: 0;
        z-index: -999 !important; /* Убираем максимально глубоко */
        pointer-events: none !important; /* Чтобы сквозь него точно проходили клики */
    }

    /* Контент - вперед и разблокируем клики */
.player-silhouette {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    object-fit: contain !important;
}
.lb-container:has(.player-silhouette) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
#lightbox-img.player-silhouette {
    box-shadow: none !important;
}
    #site-wrapper {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        pointer-events: auto !important; /* РАЗРЕШАЕМ КЛИКИ */
    }

    /* Принудительно включаем клики на всех активных элементах */
    button, a, .nav-btn, .auth-btn, .t-card, .season-card-glass, .close-m, .lb-nav {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative; 
        z-index: 100; /* Поднимаем кнопки над всем остальным */
    }

    /* --- 2. ИСПРАВЛЯЕМ ОГРОМНЫЙ ТЕКСТ (SUNRISE) --- */
    
    /* Заголовок на главном экране */
    .hero-title {
        font-size: 12vw !important; /* Размер зависит от ширины экрана (12%) */
        line-height: 1.1 !important;
        word-wrap: break-word !important;
        text-align: center !important;
    }
    
    /* Текст "SUNRISE S7" внутри заголовка */
    .hero-title .s-tag-clean {
        font-size: 0.5em !important; /* Уменьшаем тег S7 */
        vertical-align: middle;
    }

    /* Заголовок в интро (заставка) */
    .intro-main-title {
        font-size: 15vw !important; /* Адаптивный размер */
    }

    /* Заголовки в модальных окнах */
    .sm-title, .tm-title {
        font-size: 8vw !important; /* Чтобы влазило длинное название */
        white-space: normal !important; /* Разрешаем перенос строк */
        text-align: center;
    }

    /* --- 3. ВЕРСТКА В СТОЛБИК --- */
    .content-container {
        padding: 10px !important;
        display: flex;
        flex-direction: column;
        gap: 30px; /* Отступы между блоками */
    }

    .glass-inner, .nav-inner, .hero-split-container, .launchers, .mega-dl {
        flex-direction: column !important;
        height: auto !important;
    }

    /* Шапка */
    .glass-inner { gap: 15px !important; padding: 20px 10px !important; }
    .brand-wrapper, .header-socials, .status-pill, .auth-buttons { 
        width: 100% !important; justify-content: center !important; 
    }

    /* Навигация */
    .nav-btn { width: 100% !important; justify-content: center !important; }

    /* Карточки главного экрана */
    .h-card {
        width: 100% !important;
        height: auto !important;
        padding: 30px 15px !important;
        aspect-ratio: auto !important;
    }

    /* Таймер и даты */
    .hero-stats-wrapper, .timer-squares-grid {
        flex-direction: column !important; 
        width: 100% !important;
    }
    .timer-squares-grid {
        flex-direction: row !important; /* Сами цифры таймера в ряд */
        justify-content: center;
        gap: 5px !important;
    }
    .timer-glass-box, .date-rect-box { width: 100% !important; }

    /* --- 4. ИСТОРИЯ СЕЗОНОВ --- */
    .timeline-container { height: auto !important; padding: 20px 10px !important; }
    .timeline-track, .t-dot, .phantom-bg-text { display: none !important; }
    
    .t-row {
        width: 100% !important;
        margin: 0 0 30px 0 !important;
        padding: 0 !important;
        left: auto !important; right: auto !important;
        display: block !important;
    }
    
    .t-card {
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }

/* --- 5. МОДАЛЬНЫЕ ОКНА (ФИКС: ТЕПЕРЬ ПРЯМОУГОЛЬНИКИ) --- */
    .modal-wrap {
        padding: 20px !important; /* Отступ от краев экрана */
        overflow-y: auto !important;
        background: rgba(10, 5, 20, 0.95) !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important; /* Центрируем по вертикали */
        justify-content: center !important; /* Центрируем по горизонтали */
    }

    .modal-card, .season-modal-bg {
        width: 95% !important;           /* Ширина 95% экрана */
        max-width: 1100px !important;    /* Но не шире 1100px */
        min-height: auto !important;     /* УБИРАЕМ растягивание на весь экран */
        height: auto !important;         /* Высота по содержимому */
        max-height: 90vh !important;     /* Не выше 90% экрана */
        margin: auto !important;         /* Центрирование */
        border-radius: 25px !important;  /* Скругленные углы */
    }
    
    /* Доп. фикс для сезона, чтобы был большим */
    .season-modal-bg {
        height: 85vh !important; 
    }

    .sm-text-col {
        width: 100% !important;
        border: none !important;
        padding: 0 0 20px 0 !important;
        overflow: visible !important;
    }

    .sm-gallery-col {
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .gallery-grid-container {
        grid-template-columns: repeat(1, 1fr) !important; /* Одна картинка в ряд */
        gap: 20px !important;
    }

    /* Кнопка закрытия всегда сверху справа */
    .close-m {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        background: rgba(0,0,0,0.6);
        border-radius: 50%;
        width: 45px; height: 45px;
        display: flex; align-items: center; justify-content: center;
        z-index: 10000 !important;
        border: 1px solid rgba(255,255,255,0.2);
    }
    /* === ОБНОВЛЕНИЯ ДЛЯ ФОРМЫ И ПЛЕЕРА === */

/* =========================================================
   FIX: АККУРАТНЫЕ ОКНА (НЕ НА ВЕСЬ ЭКРАН)
   ========================================================= */

/* 1. Общий сброс для всех модалок */
.modal-wrap {
    padding: 20px !important; /* Отступы от краев экрана */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Базовый стиль карточки (прямоугольник) */
.modal-card, 
.season-modal-bg, 
.modal-tech-grid {
    width: auto !important; /* Ширина зависит от контента или класса */
    min-height: auto !important; /* Убираем растягивание по высоте */
    height: auto !important;
    max-height: 90vh !important; /* Не больше 90% высоты экрана */
    margin: auto !important; /* Центрирование */
    border-radius: 25px !important; /* Скругленные углы */
    transform: none !important; /* Убираем лишние трансформации */
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Окно СЕЗОНА (Большой прямоугольник) */
.season-modal-bg {
    width: 95vw !important; /* 95% ширины экрана */
    max-width: 1200px !important; /* Но не шире 1200px */
    height: 85vh !important; /* Фиксированная высота прямоугольника */
}
.season-modal-content {
    height: 100% !important; /* Контент на всю высоту карточки */
}

/* 5. Маленькие окна (Вход, Карта, Правила) */
#m-login .modal-card,
#m-map .modal-card,
#m-rules .modal-card {
    width: 90vw !important;
    max-width: 450px !important; /* Компактный размер */
}

/* =========================================================
   FIX ДЛЯ МОБИЛЬНЫХ (ПЕРЕЗАПИСЬ СТАРОГО КОДА)
   ========================================================= */
@media screen and (max-width: 1024px) {
    /* Отменяем фулл-скрин на телефонах/планшетах */
    .modal-card, 
    .season-modal-bg, 
    .wide-form-modal,
    #m-login .modal-card, 
    #m-apply .modal-card {
        width: 50% !important; /* Оставляем отступы по бокам */
        min-height: 50vh !important; /* НЕ НА ВЕСЬ ЭКРАН */
        max-height: 50vh !important; /* Чтобы влезало в экран */
        border-radius: 2px !important; /* Возвращаем скругление */
        margin: 50vh !important;
    }
    /* =======================================================
   ФИНАЛЬНЫЙ ФИКС ОКОН (ПРЯМОУГОЛЬНИКИ ПО ЦЕНТРУ) v5.0
   ======================================================= */

@media screen and (max-width: 1024px) {
    
    /* 1. Настраиваем обертку (фон) */
    .modal-wrap {
        padding: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-y: auto !important;
    }

    /* 2. Делаем ВСЕ окна прямоугольниками */
    .modal-card, 
    .season-modal-bg,
    .wide-form-modal,
    #m-apply .modal-card {
        width: 95% !important;           /* Отступы по бокам */
        max-width: 600px !important;     /* Не слишком широко */
        min-height: auto !important;     /* Убираем растягивание */
        height: auto !important;         /* Высота по контенту */
        max-height: 85vh !important;     /* Чтобы влезало в экран */
        margin: auto !important;         /* Центрирование */
        border-radius: 20px !important;  /* Красивые углы */
        transform: none !important;
    }

    /* 3. Особый размер для СЕЗОНА (побольше) */
    .season-modal-bg {
        height: 80vh !important; 
        max-width: 1000px !important; /* На планшетах пошире */
    }
    

    /* 5. Контент внутри сезона */
    .season-modal-content {
        flex-direction: column !important;
        padding: 20px !important;
        height: auto !important;
    }
    

    .sm-gallery-col, .sm-text-col {
        width: 100% !important;
        overflow: visible !important;
    }
    /* ==========================================================================
   !!! EMERGENCY PC FIX (ВСТАВИТЬ В САМЫЙ КОНЕЦ ФАЙЛА) !!!
   Восстанавливает дизайн и скролл на ПК, если мобильные стили "протекли"
   ========================================================================== */

@media screen and (min-width: 1025px) {

    /* 1. ЧИНИМ СЕТКУ ФОТО (Возвращаем много колонок) */
    .gallery-grid-container {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 15px !important;
    }

    /* 2. ЧИНИМ СКРОЛЛ И РАСПОЛОЖЕНИЕ В СЕЗОНАХ */
    /* Само окно фиксируем, чтобы не убегало */
    .season-modal-bg, .modal-card {
        overflow: hidden !important; 
        max-height: 85vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Контент выстраиваем в ряд (Текст слева | Фото справа) */
    .season-modal-content {
        display: flex !important;
        flex-direction: row !important;
        height: 100% !important;
        overflow: hidden !important;
        gap: 30px !important;
        padding: 0 !important;
    }

    /* Включаем скролл ВНУТРИ колонок текста и фото */
    .sm-text-col, .sm-gallery-col, .modal-scrollable-content {
        overflow-y: auto !important;
        height: 100% !important;
        width: 50% !important; /* Делим экран пополам */
        padding-right: 10px !important;
        display: block !important;
        pointer-events: auto !important; /* Разрешаем клики и скролл */
    }
    
    /* Галерея на всю ширину своей колонки */
    .sm-gallery-col {
        width: 50% !important;
        padding-left: 10px !important;
    }

    /* Убираем глюк, если текст перекрывает фото */
    .sm-text-col {
        border-right: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* 3. ВОЗВРАЩАЕМ ГОРИЗОНТАЛЬНЫЕ БЛОКИ (ГЛАВНАЯ) */
    .hero-split-container, .launchers, .mega-dl {
        flex-direction: row !important;
    }

    /* 4. РАЗБЛОКИРОВКА СКРОЛЛА (НА ВСЯКИЙ СЛУЧАЙ) */
    * {
        pointer-events: auto;
    }
    .disable-hover {
        pointer-events: none !important; /* Оставляем только для оптимизации */
    }
/* =======================================================
   РАСШИРЕНИЕ ОКНА ЗАЯВКИ (APPLY) + СЕТКА
   ======================================================= */

/* 1. Делаем само окно шире и выше (пропорциональный квадрат) */
#m-apply .modal-card {
    width: 850px !important;      /* Фиксированная ширина (шире обычного) */
    max-width: 95vw !important;   /* Чтобы не вылезало на мобилках */
    
    min-height: 600px !important; /* Минимальная высота для "квадратности" */
    height: auto !important;
    
    padding: 40px !important;     /* Больше отступы внутри */
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Распределяем категории в 2 колонки (сетка) */
#m-apply .tech-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Две равные колонки */
    gap: 25px !important;         /* Расстояние между полями */
}

/* 3. Кнопку "Отправить" растягиваем на всю ширину внизу */
#m-apply .tech-submit-btn {
    grid-column: 1 / -1 !important; /* Растянуть на обе колонки */
    margin-top: 20px !important;
}

/* 4. Поля ввода делаем чуть крупнее */
#m-apply .tech-input {
    width: 100% !important;
}

/* --- АДАПТИВ ДЛЯ ТЕЛЕФОНА (Возвращаем в 1 колонку) --- */
@media (max-width: 768px) {
    #m-apply .modal-card {
        width: 90% !important;
        min-height: auto !important;
    }
    #m-apply .tech-form {
        grid-template-columns: 1fr !important; /* Одна колонка на телефоне */
    }
}
/* Оформление квадратов внутри заявки */
.form-quadrant {
    background: rgba(255, 255, 255, 0.03); /* Еле заметный фон */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Заголовок внутри квадрата */
.form-quadrant .form-section-title {
    font-size: 0.9rem;
    color: var(--c-gold);
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
}
/* === ОФОРМЛЕНИЕ КВАДРАТОВ ЗАЯВКИ === */
.form-quadrant {
    background: rgba(255, 255, 255, 0.03); /* Легкий фон */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px; /* БОЛЬШЕ ОТСТУПЫ ВНУТРИ */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Расстояние между вопросами */
    transition: 0.3s;
}

.form-quadrant:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 193, 7, 0.3); /* Золотая рамка при наведении */
}
/* ==========================================================================
   AGREEMENT FIX (ABSOLUTE TOP LOCK)
   ========================================================================== */

/* Обертка соглашения */
#m-agreement, 
#full-success {
    /* Используем absolute, так как скрипт все равно кинет нас вверх */
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    
    width: 100% !important;
    height: 100vh !important; /* На высоту экрана */
    
    background: rgba(0, 0, 0, 0.98) !important; /* Почти черный фон */
    z-index: 9999999 !important; /* Выше всего на свете */
    
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Когда JS добавляет active — показываем */
#m-agreement.active, 
#full-success.active {
    display: flex !important;
}

/* Сама карточка с текстом */
#m-agreement .modal-card,
#full-success .modal-card {
    position: relative !important;
    margin: 0 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    
    width: 90% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    
    background: #101015 !important;
    border: 2px solid var(--c-gold) !important;
    box-shadow: 0 0 50px rgba(0,0,0,1) !important;
}
/* ==========================================================================
   FIX: AUDIO PLAYER & HINT (ВСТАВИТЬ В КОНЕЦ STYLE.CSS)
   ========================================================================== */

/* 1. ФИКС ДИЗАЙНА ПЛЕЕРА */

/* Кнопка PLAY: Делаем иконку белой и добавляем свечение */
.play-btn-glass {
    color: #fff !important; /* Белая иконка вместо черной */
    background: linear-gradient(135deg, #FFC107 0%, #FF6F00 100%) !important; /* Более насыщенный градиент */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4) !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.play-btn-glass:hover {
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.8) !important;
    transform: scale(1.1);
}

/* Шкала громкости: Делаем ярче саму полоску */
.styled-slider {
    background: rgba(255, 255, 255, 0.3) !important; /* Было 0.1 (еле видно), стало ярче */
    height: 6px !important; /* Чуть толще, чтобы легче попасть */
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Бегунок громкости: Добавляем обводку */
.styled-slider::-webkit-slider-thumb {
    background: #fff !important; /* Белый бегунок */
    border: 2px solid var(--c-gold) !important; /* Золотая обводка */
    width: 14px !important;
    height: 14px !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

/* 2. СТИЛЬ ПОДСКАЗКИ (ВСПЛЫВАШКА) */
.audio-hint {
    position: absolute;
    top: 15px; /* На уровне кнопки */
    right: 70px; /* Слева от кнопки */
    background: rgba(10, 5, 20, 0.9);
    border: 1px solid var(--c-gold);
    color: var(--c-gold);
    padding: 10px 15px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    z-index: 10001;
    pointer-events: none; /* Чтобы не мешала кликать */
    opacity: 1;
    transition: opacity 1s ease-out; /* Плавное исчезновение */
    
    /* Анимация скакания */
    animation: hintBounce 1s infinite;
}

/* Стрелочка у подсказки */
.audio-hint::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent var(--c-gold);
}

@keyframes hintBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-10px); } /* Скачет влево-вправо */
}

/* На мобилках подсказку лучше скрыть, чтобы не мешала */
@media screen and (max-width: 768px) {
    .audio-hint { display: none !important; }
}
/* ==========================================================================
   FIX: AUDIO HINT & PLAYER DESIGN (ВСТАВИТЬ В КОНЕЦ STYLE.CSS)
   ========================================================================== */

/* 1. ДИЗАЙН ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ */
.audio-hint {
    position: absolute;
    top: 13px; /* Центрируем относительно кнопки */
    right: 75px; /* Сдвигаем влево от кнопки (55px кнопка + 20px отступ) */
    
    background: rgba(15, 10, 25, 0.95); /* Темный фон */
    border: 1px solid var(--c-gold);    /* Золотая рамка */
    color: var(--c-gold);               /* Золотой текст */
    
    padding: 8px 12px;
    border-radius: 8px;
    
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 10005; /* Поверх всего */
    pointer-events: none; /* Чтобы сквозь неё можно было кликать */
    
    opacity: 1;
    transition: opacity 1s ease-out; /* Плавное исчезновение */
    
    /* Анимация прыжков */
    animation: hintBounce 1s infinite ease-in-out;
}

/* Стрелочка справа от подсказки (указывает на кнопку) */
.audio-hint::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px; /* Выдвигаем за пределы блока */
    transform: translateY(-50%);
    width: 0; 
    height: 0; 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid var(--c-gold); /* Цвет стрелки */
}

/* Анимация движения "туда-сюда" */
@keyframes hintBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-10px); } /* Отскакивает влево */
}

/* Скрываем подсказку на мобильных, чтобы не перекрывала контент */
@media screen and (max-width: 768px) {
    .audio-hint { display: none !important; }
}


/* 2. ФИКС ДИЗАЙНА САМОГО ПЛЕЕРА */

/* Кнопка Play: Белая иконка, золотой фон */
.play-btn-glass {
    background: linear-gradient(135deg, #FFC107 0%, #FF8F00 100%) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3) !important;
    color: #fff !important; /* Иконка белая */
}
.play-btn-glass:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.6) !important;
}

/* Шкала громкости: Делаем заметнее */
.styled-slider {
    background: rgba(255, 255, 255, 0.3) !important; /* Светлее фон полоски */
    height: 6px !important;
    border-radius: 3px;
}

/* Ползунок громкости (кругляшок) */
.styled-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px !important;
    height: 14px !important;
    background: #fff !important; /* Белый кружок */
    border: 2px solid var(--c-gold) !important; /* Золотая обводка */
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
    border-radius: 50%;
    margin-top: -4px; /* Центрирование */
}
/* ==========================================================================
   БЕЛАЯ КНОПКА PLAY (ВСТАВИТЬ В КОНЕЦ STYLE.CSS)
   ========================================================================== */

.play-btn-glass {
    background: #ffffff !important;       /* Чисто белый фон */
    color: #000000 !important;            /* Черная иконка (контраст) */
    border: 2px solid #ffffff !important; /* Белая обводка */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important; /* Белое свечение */
}

.play-btn-glass:hover {
    background: #e6e6e6 !important;       /* Чуть серее при наведении */
    transform: scale(1.1);                /* Увеличение */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.7) !important; /* Яркое свечение */
    color: var(--c-gold) !important;      /* (Опционально) Иконка становится золотой при наведении */
}
/* ==========================================================================
   🔥 БЫСТРАЯ МОБИЛЬНАЯ АДАПТАЦИЯ (ULTRA MOBILE FIX)
   Вставлять в самый низ style.css
   ========================================================================== */

@media screen and (max-width: 1024px) {

    /* 1. ГЛАВНЫЙ КОНТЕЙНЕР */
    html, body {
        overflow-x: hidden !important; /* Убираем горизонтальный скролл */
        width: 100% !important;
    }
    
    #site-wrapper {
        padding: 10px !important;
        height: auto !important; /* Разрешаем листу быть длинным */
        overflow-y: auto !important; /* Включаем скролл */
        -webkit-overflow-scrolling: touch; /* Плавность на iPhone */
    }
    
    .content-container {
        padding: 0 !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* 2. ШАПКА И НАВИГАЦИЯ (В столбик) */
    .glass-inner, .nav-inner {
        flex-direction: column !important;
        gap: 15px !important;
        height: auto !important;
        padding: 20px 10px !important;
    }
    
    .brand-wrapper, .header-socials, .status-pill, .auth-buttons, .nav-btn {
        width: 100% !important;
        justify-content: center !important;
        margin: 0 !important;
    }
    
    /* 3. ГЛАВНЫЙ ЭКРАН (HERO) */
    .hero-split-container {
        display: flex !important;
        flex-direction: column !important; /* Карточки друг под друга */
        height: auto !important;
    }
    
    .h-card {
        width: 100% !important;
        min-height: 400px !important;
        padding: 20px !important;
    }

    /* Уменьшаем гигантские шрифты */
    .hero-title {
        font-size: 12vw !important; /* Размер зависит от ширины экрана */
        text-align: center !important;
        line-height: 1.1 !important;
    }
    
    .sub-brand { font-size: 1rem !important; letter-spacing: 3px !important; }

    /* Таймер и даты в столбик */
    .hero-stats-wrapper {
        flex-direction: column !important;
        width: 100% !important;
    }
    .timer-glass-box, .date-rect-box { width: 100% !important; margin-bottom: 10px !important; }

    /* 4. ЗАГРУЗЧИКИ (LAUNCHERS) */
    .launchers {
        grid-template-columns: 1fr !important; /* Одна колонка */
        gap: 15px !important;
    }
    
    .mega-dl {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }

    /* 5. ИСТОРИЯ СЕЗОНОВ (TIMELINE) */
    /* Превращаем сложную сетку в простой список */
    .timeline-container {
        padding: 20px 10px !important;
    }
    
    .timeline-track, .t-dot, .phantom-bg-text, .timeline-decor-left, .timeline-decor-right {
        display: none !important; /* Убираем лишний декор */
    }
    
    .t-row {
        display: block !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        padding: 0 !important;
    }
    
    .t-card {
        width: 100% !important;
        transform: none !important;
        margin: 0 !important;
    }
    
    /* Выравниваем контент внутри карточек */
    .t-row.left, .t-row.right { text-align: left !important; }
    .t-row.left .t-card, .t-row.right .t-card { align-items: flex-start !important; }
    .t-row.left .tc-header-group { flex-direction: row !important; }

    /* 6. ИНТРО (ЗАСТАВКА) */
    .intro-main-title { font-size: 15vw !important; }
    .intro-sub { font-size: 1.5rem !important; letter-spacing: 5px !important; }
    .intro-line { display: none !important; }

    /* 7. ФИКС МОДАЛЬНЫХ ОКОН */
    .modal-wrap {
        align-items: center !important;
        padding: 10px !important;
    }
    
    .modal-card, .season-modal-bg, #m-apply .modal-card {
        width: 95% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 85vh !important;
        margin: 0 !important;
        padding: 20px !important;
    }
    
    /* Внутри окна сезона */
    .season-modal-content {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .sm-text-col, .sm-gallery-col { width: 100% !important; border: none !important; }
    .sm-title { font-size: 2.5rem !important; }
    
    /* Сетка заявки в 1 колонку */
    #m-apply .tech-form { grid-template-columns: 1fr !important; }
    
    /* Скрываем подсказку аудио, чтоб не мешала */
    .audio-hint { display: none !important; }
}

/* =====================================================
   TARGETED FIXES — FINAL PATCH
   ===================================================== */

/* 1. История миров: принудительные размеры как у предвестников */
#m-timeline .modal-card {
    width: 90vw !important;
    max-width: 1100px !important;
    height: 85vh !important;
    max-height: 85vh !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
}
#m-timeline .tech-modal-header {
    flex-shrink: 0;
    padding: 30px 40px 20px 40px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
#m-timeline .timeline-modal-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 30px 40px !important;
}

/* 2. Предвестники: шапка всегда поверх карточек дерева */
#m-harbinger .tech-modal-header {
    position: relative;
    z-index: 200 !important;
    background: rgba(10, 8, 16, 0.98) !important;
    backdrop-filter: blur(20px) !important;
}
#m-harbinger .modal-scrollable-content {
    overflow: visible !important;
}
.harbinger-tree-wrapper {
    padding: 200px 0 80px 0 !important;
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
    position: relative !important;
}

/* 3. Лайтбокс: убрать рамку вокруг скина игрока */
#lightbox-img.player-silhouette {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.lb-container:has(#lightbox-img.player-silhouette) {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* 4. SPOOKY сезон: описание по центру, когда нет галереи */
.season-modal-content.no-gallery {
    align-items: center !important;
    justify-content: center !important;
}
.season-modal-content.no-gallery .sm-text-col {
    width: 100% !important;
    max-width: 800px !important;
    border-right: none !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* === TIMELINE v2: SEASON GRID + DETAIL === */
.tl-modal-card {
    position: relative !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
    padding: 0 !important; background: rgba(5,5,15,0.97) !important;
    width: 95vw !important; max-width: 1600px !important; height: 85vh !important;
}
#tl-map-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 0.7s ease;
    filter: brightness(0.18) saturate(1.4);
    z-index: 0; pointer-events: none;
}
.tl-seasons-grid {
    flex: 1; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px; padding: 20px 40px 40px;
    overflow-y: auto; align-content: start;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.tl-season-card {
    background: rgba(0,0,0,0.58); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; padding: 22px; cursor: pointer;
    transition: transform 0.25s, border-color 0.3s, box-shadow 0.3s;
    backdrop-filter: blur(20px);
}
.tl-season-card:hover {
    transform: translateY(-6px);
    border-color: var(--sc, #fff);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 25px rgba(255,255,255,0.07);
}
.tl-season-card.tl-upcoming { opacity: 0.45; cursor: default; }
.tl-season-card.tl-upcoming:hover { transform: none; box-shadow: none; }
.tlc-num { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:rgba(255,255,255,0.3); letter-spacing:3px; margin-bottom:8px; }
.tlc-title { font-family:'Montserrat',sans-serif; font-size:1.2rem; font-weight:900; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.tlc-date { font-size:0.7rem; color:rgba(255,255,255,0.32); font-family:'JetBrains Mono',monospace; margin-bottom:14px; }
.tlc-stats { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.tlc-stat { font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:700; background:rgba(255,255,255,0.05); padding:4px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.6); }
.tlc-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
.tlc-tag { font-size:0.58rem; font-weight:700; padding:2px 8px; border-radius:4px; border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:0.5px; }
.tlc-desc { font-size:0.8rem; color:rgba(255,255,255,0.42); line-height:1.55; }
.tlc-rank-badge { font-family:'JetBrains Mono',monospace; font-size:0.58rem; font-weight:800; padding:3px 10px; border-radius:5px; margin-bottom:12px; display:inline-block; letter-spacing:1px; }
.tl-detail-header {
    display:flex; align-items:center; gap:20px;
    padding:25px 40px 20px; border-bottom:1px solid rgba(255,255,255,0.07);
    flex-shrink:0; position:relative; z-index:10; background:rgba(0,0,0,0.25);
}
.tl-header-titles { flex:1; min-width:0; }
.tl-back-btn, .tl-gallery-btn {
    display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.8); font-family:'JetBrains Mono',monospace;
    font-size:0.7rem; font-weight:700; letter-spacing:1px;
    cursor:pointer; transition:0.25s; white-space:nowrap; flex-shrink:0; user-select:none;
}
.tl-back-btn:hover { background:rgba(255,255,255,0.12); transform:translateX(-3px); }
.tl-gallery-btn:hover { background:rgba(255,255,255,0.12); transform:translateY(-2px); }
.tl-nav-btn {
    position:absolute; top:50%; transform:translateY(-50%);
    width:48px; height:48px; border-radius:50%;
    background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color:rgba(255,255,255,0.5);
    cursor:pointer; transition:0.25s; z-index:20; backdrop-filter:blur(10px);
}
.tl-nav-btn:hover { background:rgba(255,255,255,0.15); color:#fff; transform:translateY(-50%) scale(1.1); }
.tl-nav-prev { left:12px; }
.tl-nav-next { right:12px; }
#tl-detail-desc { line-height:1.75; font-size:0.95rem; color:#ccc; }
#tl-detail-desc p { margin-bottom:14px; }
#tl-detail-desc ul { padding-left:20px; margin-bottom:14px; }
#tl-detail-desc li { margin-bottom:8px; }
#m-timeline .close-m { position:absolute; top:18px; right:20px; z-index:200; }
@media (max-width:768px) {
    .tl-seasons-grid { grid-template-columns:1fr; padding:15px 20px; }
    .tl-detail-header { padding:20px; gap:10px; flex-wrap:wrap; }
    #tl-detail-scroll { padding:0 20px 40px !important; }
    .tl-nav-prev { left:5px; } .tl-nav-next { right:5px; }
}

/* ═══════════════════════════════════════════════════════
   TOP + NEWS — LAUNCHER STYLE (same classes as launcher)
   ═══════════════════════════════════════════════════════ */

/* containers */
#site-top-body, #site-news-body { padding: 6px 10px 16px; }

/* loading / empty */
.lb-loading, .lb-empty {
    text-align: center;
    padding: 40px 16px;
    color: rgba(255,255,255,0.3);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 1px;
    line-height: 1.9;
}

/* online dot */
.lb-online-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}
.lb-online-dot.online {
    background: #00E676;
    box-shadow: 0 0 7px rgba(0,230,118,0.8);
    animation: onlinePulseSite 2s ease-in-out infinite;
}
@keyframes onlinePulseSite {
    0%,100% { box-shadow: 0 0 5px rgba(0,230,118,0.7); }
    50%      { box-shadow: 0 0 12px rgba(0,230,118,1); }
}

/* rank badges */
.lb-rank-badge {
    width: 28px !important; height: 28px !important;
    border-radius: 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 800 !important; font-size: 0.82rem !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.lb-rank-badge.rank-gold {
    background: linear-gradient(135deg,#FFD700,#FF8C00) !important;
    color: #1a0a00 !important;
    box-shadow: 0 0 14px rgba(255,200,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
    animation: rankGoldPulseSite 2.5s ease-in-out infinite;
    font-size: 1.05rem !important;
    width: 38px !important; height: 38px !important;
    min-width: 38px !important; min-height: 38px !important;
    border-radius: 10px !important; align-self: center !important;
}
.lb-rank-badge.rank-silver {
    background: linear-gradient(135deg,#D0D0DC,#9090A0) !important;
    color: #111 !important;
    box-shadow: 0 0 10px rgba(200,200,220,0.35), 0 2px 4px rgba(0,0,0,0.4);
    animation: rankSilverPulseSite 2.8s ease-in-out infinite;
}
.lb-rank-badge.rank-bronze {
    background: linear-gradient(135deg,#CD7F32,#8B5020) !important;
    color: #fff8f0 !important;
    box-shadow: 0 0 10px rgba(180,100,30,0.35), 0 2px 4px rgba(0,0,0,0.4);
    animation: rankBronzePulseSite 3s ease-in-out infinite;
}
@keyframes rankGoldPulseSite {
    0%,100% { box-shadow: 0 0 10px rgba(255,200,0,0.45), 0 2px 4px rgba(0,0,0,0.4); }
    50%      { box-shadow: 0 0 22px rgba(255,200,0,0.85), 0 2px 8px rgba(0,0,0,0.4); }
}
@keyframes rankSilverPulseSite {
    0%,100% { box-shadow: 0 0 6px rgba(200,200,220,0.25); }
    50%      { box-shadow: 0 0 14px rgba(200,200,220,0.6); }
}
@keyframes rankBronzePulseSite {
    0%,100% { box-shadow: 0 0 6px rgba(180,100,30,0.25); }
    50%      { box-shadow: 0 0 14px rgba(180,100,30,0.55); }
}

.lb-rank-num {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem; font-weight: 700;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
}

/* hero row (rank 1) */
@keyframes lbRowEnterSite {
    from { opacity:0; transform: translateY(10px); }
    to   { opacity:1; transform: translateY(0); }
}
@keyframes heroShimmerSite { 0%{left:-100%} 100%{left:200%} }

.lb-row-hero {
    margin: 8px 0 6px !important;
    border-radius: 14px !important;
    padding: 16px 14px 14px !important;
    background: linear-gradient(135deg,rgba(255,215,0,0.11) 0%,rgba(200,120,0,0.06) 100%) !important;
    border: 1px solid rgba(255,215,0,0.3) !important;
    box-shadow: 0 0 24px rgba(255,215,0,0.08), inset 0 1px 0 rgba(255,215,0,0.12) !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important;
    cursor: default;
    animation: lbRowEnterSite 0.5s cubic-bezier(0.22,1,0.36,1) both;
    position: relative !important; overflow: hidden !important;
}
.lb-row-hero::before {
    content: '';
    position: absolute; top:0; left:-100%; width:60%; height:100%;
    background: linear-gradient(90deg,transparent,rgba(255,215,0,0.06),transparent);
    animation: heroShimmerSite 3s linear infinite;
}
.lb-hero-rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem; font-weight: 800; letter-spacing: 4px;
    color: rgba(255,215,0,0.55); text-transform: uppercase;
    display: flex; align-items: center; gap: 5px;
}
.lb-hero-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem; font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 18px rgba(255,215,0,0.5);
    text-align: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: 0.5px;
}
.lb-hero-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem; font-weight: 700;
    color: rgba(255,200,60,0.85); letter-spacing: 1px;
}
.lb-hero-lic {
    font-size: 0.55rem; color: rgba(0,164,239,0.7); letter-spacing: 1px; margin-top: -4px;
}

/* divider */
.lb-divider {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 4px;
    animation: lbRowEnterSite 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
.lb-divider::before, .lb-divider::after {
    content: ''; flex: 1; height: 1px; background: rgba(255,107,53,0.2);
}
.lb-divider-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem; letter-spacing: 3px; color: rgba(255,107,53,0.4);
}

/* regular rows */
.lb-row {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 9px 4px !important;
    border-bottom: 1px solid rgba(255,107,53,0.08) !important;
    animation: lbRowEnterSite 0.4s cubic-bezier(0.22,1,0.36,1) both;
    transition: background 0.18s;
}
.lb-row:hover { background: rgba(255,107,53,0.04); border-radius: 8px; }

.lb-player { flex: 1; min-width: 0; }
.lb-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.86rem; font-weight: 700;
    color: rgba(255,243,224,0.9);
    display: flex; align-items: center; gap: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem; color: rgba(255,243,224,0.4); margin-top: 2px; letter-spacing: 0.5px;
}

/* news cards */
.news-card {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: rgba(255,107,53,0.06) !important;
    border: 1px solid rgba(255,107,53,0.14) !important;
    animation: lbRowEnterSite 0.4s cubic-bezier(0.22,1,0.36,1) both;
    cursor: default;
    transition: border-color 0.2s;
}
.news-card:hover { border-color: rgba(255,107,53,0.28); }
.news-card.pinned {
    background: rgba(255,180,53,0.09);
    border-color: rgba(255,180,53,0.28);
}
.news-pin {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem; letter-spacing: 2px;
    color: rgba(255,180,53,0.65); margin-bottom: 6px;
}
.news-card-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.88rem !important; font-weight: 800 !important;
    color: #FF9F1C !important; letter-spacing: 0.5px !important; margin-bottom: 6px !important;
}
.news-card-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.78rem !important; color: rgba(255,243,224,0.55) !important;
    line-height: 1.65 !important; margin-bottom: 10px !important;
}
.news-card-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; color: rgba(255,107,53,0.45); letter-spacing: 1px;
}
.news-card-img {
    margin: 0 0 10px; border-radius: 8px; overflow: hidden;
}
/* ─── NEWS CARD TEXT COLORS (high specificity override) ─── */
#site-news-body .news-pin,
#site-news-body [class*="news-pin"] {
    color: #FFB830 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.5rem !important; letter-spacing: 3px !important;
    font-weight: 700 !important; text-transform: uppercase !important;
    display: block !important; margin-bottom: 10px !important;
}
#site-news-body .news-card-title {
    color: #FF9F1C !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.92rem !important; font-weight: 900 !important;
    display: block !important; margin-bottom: 8px !important;
    text-shadow: 0 0 10px rgba(255,107,53,0.3) !important;
}
#site-news-body .news-card-text {
    color: rgba(255,235,210,0.85) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important; line-height: 1.7 !important;
    display: block !important; margin-bottom: 10px !important;
}
#site-news-body .news-card-date {
    color: rgba(255,107,53,0.65) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.62rem !important; letter-spacing: 1.5px !important;
    display: block !important;
}

.news-card-img img {
    width: 100%; max-height: 180px;
    object-fit: cover; display: block; border-radius: 8px;
}