/* 1. НАСТРОЙКИ ЭКРАНА (Космос и постоянный курсор) */
html {
    cursor: url('https://zlo2k3.neocities.org/%D1%80%D0%B8%D1%81%D1%83%D0%BD%D0%BA%D0%B8/%D0%BA%D1%83%D1%80%D1%81%D0%BE%D1%80.png'), auto !important;
    background-image: url('https://zlo2k3.neocities.org/%D1%80%D0%B8%D1%81%D1%83%D0%BD%D0%BA%D0%B8/%D1%84%D0%BE%D0%BD.png'); 
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-color: #0f0a1c;
}

body {
    cursor: url('https://zlo2k3.neocities.org/%D1%80%D0%B8%D1%81%D1%83%D0%BD%D0%BA%D0%B8/%D0%BA%D1%83%D1%80%D1%81%D0%BE%D1%80%20%D1%81%20%D0%BF%D0%B0%D0%BB%D1%8C%D1%86%D0%B5%D0%BC.png'), auto !important;
    color: #e2daf0;
    font-family: 'Courier New', Courier, monospace;
    max-width: 1100px; /* Фиксированная общая ширина сайта */
    margin: 40px auto;
    padding: 0 20px;   
    background: transparent; 
    box-sizing: border-box;
}

/* Нарисованная шапка */
header {
    background: transparent !important; 
    border: none !important; 
    text-align: center;
    margin: 10px auto 30px auto;
}

.header-img {
    height: auto;
    width: 100%;
    max-width: 450px;
    display: block;
    margin: 0 auto;
}

/* 2. ДВУХКОЛОНОЧНЫЙ МАКЕТ (МЕНЮ СТРОГО СБОКУ) */
.webcore-grid {
    display: flex;
    flex-direction: row; /* Выстраиваем колонки строго бок о бок */
    gap: 40px;           /* Расстояние между меню и твоим контентом */
    align-items: start;
    width: 100%;
}

/* ЛЕВАЯ КОЛОНКА: Вертикальное меню кнопок */
.grid-column.sidebar-left {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 240px;       /* Стабильная ширина для левой колонки */
    flex-shrink: 0;     /* Запрещаем левой колонке сжиматься */
}

.image-nav {
    display: flex;
    flex-direction: column; /* Кнопки идут строго сверху вниз */
    gap: 20px;
    width: 100%;
}

.nav-btn {
    height: 60px;           /* Крупный сочный размер твоих новых кнопок */
    width: auto;             
    max-width: 220px;       
    object-fit: contain;    
    border: none !important;
    display: block;
    margin: 0 auto;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    filter: none !important; 
    transition: transform 0.2s; 
}

.nav-btn:hover {
    transform: scale(1.06);  
}

/* ПРАВАЯ КОЛОНКА: Зона для всей инфы и галереи */
.grid-column.main-content {
    flex-grow: 1; /* Контент забирает всё оставшееся место справа */
    min-width: 0;
}

/* 3. МРАЧНЫЕ ПОЛУПРОЗРАЧНЫЕ ПАНЕЛИ ДЛЯ ТЕКСТА И ГАЛЕРЕИ */
section {
    background-image: url('https://zlo2k3.neocities.org/%D1%80%D0%B8%D1%81%D1%83%D0%BD%D0%BA%D0%B8/%D1%84%D0%BE%D0%BD%20%D0%B4%D0%BB%D1%8F%20%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B5%D0%BA.png') !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-color: transparent !important; 
    border: 1px solid #9b5de5; 
    border-radius: 8px;
    padding: 30px; 
    margin-bottom: 30px;
    width: 100%;             
    box-sizing: border-box;   
}

h2 {
    color: #9b5de5;
    font-size: 1.3em;
    margin-top: 0;
    border-bottom: 1px dashed #3c166d;
    padding-bottom: 5px;
}

ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 15px 0 0 0;
}

li {
    margin-bottom: 10px;
}

/* 4. ЧИСТАЯ ПИНТЕРЕСТ-ГАЛЕРЕЯ (БЕЗ ОБРЕЗОК И ИСКАЖЕНИЙ) */
.pinterest-grid {
    display: flex;
    flex-wrap: wrap;     /* Позволяет карточкам красиво переноситься на новую строку */
    gap: 20px;           /* Расстояние между твоими артами */
    width: 100%;
}

.art-card {
    background-color: #0f0a1c;
    border: 1px solid #3c166d;
    border-radius: 6px;
    width: calc(50% - 100px); /* Строго по две карточки в ряд с учётом отступов */
    min-width: 240px;    /* Чтобы на маленьких экранах они не сжимались в узкие полоски */
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, border-color 0.2s;
}

.art-card:hover {
    transform: translateY(-5px);
    border-color: #f15bb5;
    box-shadow: 0 5px 15px rgba(241, 91, 181, 0.2);
}

/* МАГИЯ СОХРАНЕНИЯ ПРОПОРЦИЙ: */
.art-card img {
    width: 100%;
    height: auto !important;      /* НАМЕРТВО ЗАПРЕЩАЕМ обрезать высоту рисунка! */
    object-fit: contain !important; /* Рисунок подстраивается под свои оригинальные размеры */
    display: block;
    border-bottom: 1px solid #3c166d;
}

.art-info {
    padding: 12px;
    background: #0f0a1c;
}

.art-info h3 {
    margin: 0 0 5px 0;
    font-size: 1em;
    color: #e2daf0;
}

.art-info p {
    margin: 0;
    font-size: 0.8em;
    color: #6a5886;
}

/* ЗАГАДОЧНЫЕ ЧЕРНЫЕ ЗАГЛУШЕК ДЛЯ СЕКРЕТНОСТИ */
.placeholder-card {
    border: 1px dashed #5c038c;
    background: #090514;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 250px;
}

.placeholder-glitch {
    padding: 20px;
    color: #5c038c;
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 1px;
}

footer {
    text-align: center;
    margin-top: 40px;
    color: #6a5886;
}

/* ФИКС КУРСОРОВ */
a, button, .nav-btn, .art-card img {
    cursor: url('https://zlo2k3.neocities.org/%D1%80%D0%B8%D1%81%D1%83%D0%BD%D0%BA%D0%B8/%D0%BA%D1%83%D1%80%D1%81%D0%BE%D1%80.png'), pointer !important;
}
.secret-pixel {
    position: absolute; 
    bottom: 20px;   
    right: 20px;    
    z-index: 9999;  
    width: 32px;
    height: 32px;
    
    /* НАЧАЛЬНОЕ СОСТОЯНИЕ: Сделай её призраком (например, 3% видимости) */
    opacity: 0.8;  
    
    transition: opacity 0.3s ease; /* Плавность проявления */
}

/* СОСТОЯНИЕ ПРИ НАВЕДЕНИИ: Что происходит, когда юзер наступает на неё мышкой */
.secret-pixel:hover {
    /* Проявляем её, например, на 90% яркости, чтобы её стало чётко видно! */
    opacity: 2;  
}
/* Контейнер для всего списка музыки */
.audio-archive-list {
    display: flex;
    flex-direction: column; /* Выстраиваем треки строго друг под другом */
    gap: 15px;              /* Расстояние между плашками треков */
    margin-top: 20px;
}


./* Карточка отдельного трека (Делаем фон ТЕМНЕЕ, чтобы текст не сливался) */
.track-card {
    /* 1. Вместо чистого космоса накладываем плотный тёмно-фиолетовый цвет ПОВЕРХ космоса */
    background: linear-gradient(rgba(10, 5, 20, 0.92), rgba(10, 5, 20, 0.92)), 
                url('https://zlo2k3.neocities.org/%D1%80%D0%B8%D1%81%D1%83%D0%BD%D0%BA%D0%B8/%D1%84%D0%BE%D0%BD%20%D0%B4%D0%BB%D1%8F%20%D0%BF%D0%B0%D0%BD%D0%B5%D0%BB%D0%B5%D0%BA.png');
    background-size: cover;
    background-position: center;
    
    border: 1px dashed #3c166d;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    
    /* УБРАЛИ ОТСЮДА ТРАНСФОРМАЦИЮ, чтобы карточка больше не увеличивалась и не ломала плеер! */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Эффект при наведении на карточку трека */
.track-card:hover {
    border-color: #9b5de5; 
    box-shadow: 0 0 12px rgba(155, 93, 229, 0.3);
    /* Никаких scale! Картинка стоит смирно, просто загорается рамка */
}

/* МРАЧНЫЙ ЖЕЛЕЗНО-ТЕМНЫЙ ФИОЛЕТОВЫЙ ПЛЕЕР (ПОЛНАЯ ПОЧИНКА БЕЗ МОРГАНИЙ) */
.custom-audio {
    width: 100%;
    height: 32px;
    outline: none;
    display: block;
    
    /* 1. invert(1) — принудительно перекрашивает белый плеер в глубокий черный */
    /* 2. sepia(1) — красит кнопки в оранжевый, давая базу для цвета */
    /* 3. hue-rotate(250deg) — сдвигает оранжевый спектр строго в едкий фиолетовый неон */
    /* 4. saturate(3) — делает фиолетовые ползунки сочными */
    filter: invert(1) sepia(1) hue-rotate(225deg) saturate(3.5) brightness(0.95) !important;
    
    /* Запрещаем плееру менять размер при любых условиях */
    transform: none !important;
}

/* Эффект при наведении на трек */
.track-card:hover {
    border-color: #9b5de5; /* Рамка трека загорается ярче */
    box-shadow: 0 0 10px rgba(155, 93, 229, 0.2);

.track-card:hover {
    border-color: #9b5de5;
    box-shadow: 0 0 10px rgba(155, 93, 229, 0.2);
}

/* Информация о треке (номер и название) */
.track-meta {
    font-size: 0.9em;
    letter-spacing: 1px;
}

.track-number {
    color: #9b5de5;
     text-shadow: 0 0 8px #9b5de5, 0 0 15px rgba(155, 93, 229, 0.6);/* Розовый неоновый номер */
    font-weight: bold;
}

.track-name {
    color: #e2daf0; /* Светлый зашифрованный текст названия */
}

/* МРАЧНЫЙ СТИЛЬ ДЛЯ СТАНДАРТНОГО ПЛЕЕРА БРАУЗЕРА */
.custom-audio {
    width: 100%;
    height: 32px;
    outline: none;
    filter: invert(0.9) hue-rotate(180deg) brightness(0.8)!important; 
    /* ХАК С ФИЛЬТРАМИ: invert и hue-rotate инвертируют стандартный белый плеер браузера, 
       делая его темным и перекрашивая его элементы в мрачно-сиреневые оттенки! */
}


/* 📱 ПОЛНАЯ АДАПТИВНОСТЬ ДЛЯ СМАРТФОНОВ БЕЗ ОБРЕЗОК */
@media (max-width: 768px) {
    .webcore-grid {
        flex-direction: column; /* На телефонах меню прыгает наверх, контент вниз */
        gap: 20px;
    }
    .grid-column.sidebar-left {
        width: 100%;
    }
    .image-nav {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Кнопки встают плиткой 2х2 */
        gap: 12px;
    }
    .nav-btn {
        height: 45px;
    }
    .art-card {
        width: 100%; /* Картинки на телефонах идут по одной во всю ширину экрана */
    }
}