:root {
    --blood-red: #8b0000;
    --dark-metal: #1a1a1a;
    --text-silver: #c0c0c0;
    --gold: #b58b34
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: 'Spectral', serif;
    background: radial-gradient(circle at top, #171010 0%, #050505 45%, #000 100%);
    color: var(--text-silver);
    overflow-x: hidden;
    animation: pageFade .8s ease
}
/* Ефект зернистості на весь сайт */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); /* Або будь-яка текстура шуму */
    opacity: 0.05;
    pointer-events: none;
    z-index: 9999;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(139, 0, 0, .14), transparent 25%), radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .05), transparent 20%);
    pointer-events: none;
    z-index: -1
}
body::before {
    content: "";
    position: fixed;
    inset: 0;

    background:
        radial-gradient(circle at 50% 20%,
        rgba(139,0,0,.22),
        transparent 40%);

    pointer-events: none;
    z-index: -1;
}

@keyframes pageFade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

nav {
    position: sticky;
    top: 0;
    background: rgba(10, 10, 10, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(139, 0, 0, .35);
    z-index: 1000;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 13px 10px
}

nav a {
    color: #fff;
    text-decoration: none;
    margin: 4px 13px;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 1.4px;
    transition: .3s;
    position: relative
}

nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: var(--blood-red);
    transition: .3s
}

nav a:hover,
nav a.active {
    color: var(--blood-red);
    text-shadow: 0 0 10px var(--blood-red)
}

nav a:hover::after,
nav a.active::after {
    width: 100%
}

.page-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(139,0,0,.25);
}


.page-header h1 {
    font-family: 'Cinzel', serif;
    color: #f1f1f1;
    font-size: clamp(3rem, 6vw, 5.2rem);
    letter-spacing: 7px;
    margin: 0;

    text-shadow:
        0 0 15px rgba(255,255,255,.12),
        0 0 35px rgba(139,0,0,.45);

    position: relative;
}

.page-header p {
    color: #999;
    font-size: 1.15rem;
    font-style: italic;
    margin: 12px 0 0
}

@keyframes titleDrop {
    from {
        opacity: 0;
        transform: translateY(-25px)
    }

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

.btn {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding: 14px 24px;
    background: #1a0000;
    border: 1px solid var(--blood-red);
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: all 0.1s ease;
    
    /* ОСЬ ЦЯ РЯДКА ВРЯТУЄ СИТУАЦІЮ */
    overflow: hidden; 
    
    /* Товщина та тіні */
    box-shadow: 0 6px 0 #4a0000, 0 15px 20px rgba(0,0,0,0.8);
    border-radius: 2px;
}

.btn:hover {
    background: var(--blood-red);
    box-shadow: 0 6px 0 #2a0000, 0 15px 25px rgba(139, 0, 0, 0.6);
}

/* Соковите, глибоке натискання */
.btn:active {
    transform: translateY(6px); /* Кнопка опускається на висоту своєї тіні */
    box-shadow: 0 0 0 #4a0000, 0 5px 10px rgba(0,0,0,0.8); /* Тінь зникає */
}

.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .25), transparent);
    transition: .5s
}

.btn:hover::after {
    left: 120%
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 7%
}

.card {
    background:
        linear-gradient(
            180deg,
            rgba(18,18,18,.98),
            rgba(6,6,6,.98)
        );

    border: 1px solid rgba(255,255,255,.05);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.02),
        0 15px 40px rgba(0,0,0,.75);

    transition: .35s;
}
.card-img {
    filter:
        brightness(.78)
        contrast(1.15)
        saturate(.85);
}

.card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: var(--blood-red);
    box-shadow: 0 16px 34px rgba(139, 0, 0, .35)
}

.card-img {
    height: 230px;
    background-size: cover;
    background-position: center;
    filter: grayscale(80%) contrast(120%);
    transition: .35s
}

.card:hover .card-img {
    filter: grayscale(10%) contrast(110%)
}

.card-body {
    padding: 22px
}

.card h2,
.card h3 {
    font-family: 'Cinzel', serif;
    color: #fff;
    margin: 0 0 10px
}

.tag {
    color: var(--blood-red);
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 12px
}

.card p {
    line-height: 1.65;
    color: #bbb
}

.footer {
    text-align: center;
    border-top: 1px solid #222;
    padding: 25px;
    color: #666
}

.reveal {
    opacity: 0;
    transform: translateY(45px);
    transition: .8s ease
}

.reveal.active {
    opacity: 1;
    transform: translateY(0)
}

#preloader {
    position: fixed;
    inset: 0;
    background: #050505;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: .5s
}

.loader-sword {
    width: 80px;
    height: 80px;
    border: 3px solid var(--blood-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 25px var(--blood-red)
}

#preloader p {
    margin-top: 20px;
    font-family: 'Cinzel', serif;
    color: #fff;
    letter-spacing: 3px
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.blood {
    position: fixed;
    width: 18px;
    height: 18px;
    background: #8b0000;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: bloodSplash .7s forwards;
    box-shadow: 0 0 12px red
}

@keyframes bloodSplash {
    from {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(5)
    }
}

.modal,
.place-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: 20px
}

.modal.active,
.place-modal.active {
    display: flex
}

.modal-content,
.place-box {
    background: #111;
    border: 1px solid var(--blood-red);
    max-width: 650px;
    width: 90%;
    padding: 28px;
    box-shadow: 0 0 30px rgba(139, 0, 0, .5);
    animation: pop .3s ease
}

.modal-content img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border: 1px solid #333;
    margin-bottom: 20px;
    filter: contrast(110%) brightness(0.9);
    box-shadow: inset 0 0 20px #000;
}

.close,
.place-box span {
    float: right;
    cursor: pointer;
    color: #fff;
    font-size: 24px
}

.modal-content h2,
.place-box h2 {
    font-family: 'Cinzel', serif;
    color: #fff;
    margin-top: 0
}

.modal-content h4 {
    color: var(--blood-red);
    font-family: 'Cinzel', serif
}

.modal-content p,
.place-box p {
    color: #bbb;
    line-height: 1.7
}

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(.86)
    }

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

@media(max-width:768px) {
    nav a {
        font-size: .88rem;
        margin: 4px 9px
    }

    .grid {
        padding: 35px 5%;
        gap: 20px
    }

    .card-img {
        height: 190px
    }

    .page-header h1 {
        letter-spacing: 2px
    }
}

/* ===== ЕФЕКТ РОЗРІЗУ МІЧОМ ===== */
.sword-slash {
    position: fixed;
    width: 220px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #fff, #8b0000, transparent);
    box-shadow: 0 0 20px #fff, 0 0 35px #8b0000;
    pointer-events: none;
    z-index: 9999;
    transform: rotate(-25deg);
    animation: slashAnim 0.45s ease-out forwards;
}

@keyframes slashAnim {
    0% {
        opacity: 0;
        transform: scaleX(0) rotate(-25deg);
    }

    40% {
        opacity: 1;
        transform: scaleX(1.2) rotate(-25deg);
    }

    100% {
        opacity: 0;
        transform: scaleX(1.8) rotate(-25deg);
    }
}
.portal-card div {
    position: absolute;
    bottom: 0;
    padding: 28px;
}
.portal-card {
    min-height: 340px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.portal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 50px 7%;
    max-width: 1200px;
    margin: auto;
}
/* 1. Ідеальна симетрія 3х2 */
.portal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Строго 3 колонки! */
    gap: 30px;
    padding: 50px 7%;
    max-width: 1200px; /* Повертаємо оптимальну ширину */
    margin: auto;
    position: relative;
}

/* 2. Ліва примара (Клеймо) */
.portal-grid::before {
    content: '';
    position: absolute;
    top: 10%; bottom: 10%;
    left: -200px;
    width: 300px;
    background: url('images/kle1.png') no-repeat center / contain;
    opacity: 0.08; /* Робимо трохи яскравіше */
    filter: invert(1);
    
    /* МАГІЯ: Приховуємо прямокутне тло картинки */
    mix-blend-mode: screen; 
    
    pointer-events: none;
    z-index: -1;
}

/* 3. Права примара (Бехеліт) */
.portal-grid::after {
    content: '';
    position: absolute;
    top: 10%; bottom: 10%;
    right: -200px;
    width: 300px;
    background: url('images/behelit11.png') no-repeat center / contain;
    opacity: 0.08;
    
    /* Якщо Бехеліт теж має чорне тло, це його сховає */
    mix-blend-mode: screen; 
    
    pointer-events: none;
    z-index: -1;
}
@media(max-width: 900px){
    .portal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 600px){
    .portal-grid {
        grid-template-columns: 1fr;
    }
}
.page-header h1:hover {
    animation: glitch 0.3s infinite;
    color: #fff;
    text-shadow: 2px 0 red, -2px 0 blue;
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

/* --- МІНІ-ГРА: ВАГА МЕЧА --- */
.mini-game-box {
    margin-top: 20px;
    padding: 15px;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid #333;
    border-left: 3px solid var(--blood-red);
    text-align: center;
}

#liftStatus {
    font-size: 0.9rem;
    color: #bbb;
    margin-bottom: 10px;
    font-family: 'Cinzel', serif;
    transition: color 0.3s;
}

.progress-bg {
    width: 100%;
    height: 15px;
    background: #111;
    border: 1px solid #444;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 2px;
}

.progress-fill {
    height: 100%;
    width: 0%; /* Стартуємо з нуля */
    background: linear-gradient(90deg, #5a0000, #ff0000);
    box-shadow: 0 0 15px #ff0000;
    transition: width 0.1s linear; /* Плавне падіння та зростання */
}

.lift-btn {
    width: 100%;
    font-size: 1.1rem;
    user-select: none; /* ВАЖЛИВО: щоб текст не виділявся при спам-кліці */
    -webkit-user-select: none;
    touch-action: manipulation; /* Забирає затримку кліка на телефонах */
}

.lift-btn:active {
    transform: scale(0.95); /* Ефект втискання кнопки */
    background: #ff0000;
}

.ash-particle {
    position: fixed;
    bottom: -10px;
    background: #ff3300;
    border-radius: 50%;
    filter: blur(1px) drop-shadow(0 0 5px #ff0000);
    pointer-events: none;
    z-index: 1;
    animation: floatUp linear forwards;
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-100vh) scale(0.2); opacity: 0; }
}

.section-title h2 {
    font-family: 'Cinzel', serif;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

/* Гостро, як кинджал, неонове підкреслення */
.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 130%; /* Виходить за краї тексту */
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blood-red), #fff, var(--blood-red), transparent);
    box-shadow: 0 0 15px var(--blood-red), 0 0 5px #fff;
    border-radius: 50%;
}
/* --- КРОВАВИЙ ПРОГРЕС-БАР --- */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%; /* Стартує з 0 */
    height: 3px;
    background: var(--blood-red);
    box-shadow: 0 0 10px var(--blood-red), 0 0 5px #ff0000;
    z-index: 99999; /* Понад усе, навіть навігації */
    pointer-events: none;
    transition: width 0.1s ease-out; /* Плавність руху */
}
/* --- АПГРЕЙД 1: ПУЛЬСУЮЧИЙ ЗАГОЛОВОК --- */
.hero h1 span {
    color: var(--blood-red);
    animation: pulseBrand 3s infinite alternate ease-in-out;
}

@keyframes pulseBrand {
    0% { text-shadow: 0 0 10px rgba(139, 0, 0, 0.5); }
    100% { text-shadow: 0 0 35px var(--blood-red), 0 0 15px #ff0000; }
}
/* --- АПГРЕЙД 2: ГОСТРІ ІНФО-БЛОКИ --- */
.about-box, .character-day {
    /* Зрізаємо кути по діагоналі */
    clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);
    border: none;
    border-left: 4px solid var(--blood-red);
    position: relative;
    background: linear-gradient(135deg, rgba(20,20,20,0.95), rgba(10,10,10,0.95));
}

/* Додаємо "металеві" куточки для деталізації */
.about-box::after, .character-day::after {
    content: '';
    position: absolute;
    top: 0; right: 0; 
    width: 40px; height: 40px;
    border-top: 2px solid var(--blood-red);
    border-right: 2px solid var(--blood-red);
    opacity: 0.4;
}
/* --- АПГРЕЙД 3: ПРЕМІАЛЬНІ ПОРТАЛИ (БЕЗ ЧЕРВОНОГО СВІТЛА) --- */
.portal-card {
    border: 1px solid #222;
    border-radius: 0;
    clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
}

.portal-card::before {
    /* Стандартна темна тінь знизу, щоб читати текст */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 5%, rgba(0,0,0,0.4) 50%, transparent 100%);
    transition: 0.5s ease;
}

.portal-card:hover::before {
    /* При наведенні тінь просто стає більш густою та чорною (без червоного) */
    background: linear-gradient(to top, rgba(0,0,0,1) 15%, rgba(0,0,0,0.8) 60%, transparent 100%);
}

.portal-card h3 {
    transition: 0.3s;
}

.portal-card:hover h3 {
    /* Текст залишається білим, але додається холодне свічення та інтервал */
    color: #ffffff;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.hero {
    /* ... твої старі стилі ... */
    justify-content: flex-start; /* Зсуваємо контент вліво */
    text-align: left;
    padding-left: 10%;
}

/* --- ПЕРСОНАЖІ У ШАПЦІ (БІЛЬШЕ І ПРИТИСНЕННЯ ДО ЛІНІЇ) --- */
        .hero-character-container {
            position: absolute;
            
            /* ФІКС: Притискаємо до лінії.
               Насильно тягнемо блок ВНИЗ, щоб приховати порожні місця в PNG */
            bottom: -2.5vh; 
            
            z-index: 3;
            
            /* ФІКС: Робимо більше.
               Збільшуємо висоту до 92% від екрану (було 85%) */
            height: 92vh; 
            max-height: 1100px; /* Збільшили максимальну висоту для великих моніторів */
            
            pointer-events: auto; 
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .hero-character-container.left { left: 2%; }
        .hero-character-container.right { 
            right: 1%; /* Трохи зрушив його правіше до краю екрана, щоб він не перекривав текст, оскільки стане ширшим */
            height: 100vh; /* Збільшили зростання спеціально для Гатса (у Гріффіта залишилося 92vh) */
            max-height: 1200px; /* Дозволяємо йому зростати більше на великих моніторах */
        }

        /* Загальні правила для обох картинок */
        .hero-character-container img {
            height: 100%;
            width: auto;
            object-fit: contain; 
            transition: opacity 0.5s ease, filter 0.5s ease;
            
            /* Додатковий захист: прибираємо можливі відступи біля самої картинки */
            display: block;
            margin: 0;
            padding: 0;
        }

        /* Перша картинка (Звичайна) */
        .hero-character-container .base-img {
            position: relative;
        }

        /* Друга картинка (Перетворення) */
        .hero-character-container .hover-img {
            position: absolute;
            bottom: 0;
            opacity: 0; 
        }

        /* --- ЕФЕКТ ПЕРЕТВОРЕННЯ --- */
        .hero-character-container:hover .base-img {
            opacity: 0; 
        }
        
        .hero-character-container:hover .hover-img {
            opacity: 1;
            filter: drop-shadow(0 0 25px rgba(139, 0, 0, 0.9)); 
        }

/* 1. Додаємо прив’язку до основного блоку */
.info-block {
    position: relative; /* Це важливо, щоб бічні картинки не відлетіли до космосу */
    /* твої інші властивості (max-width, display: grid і т.д.) залишаються тут */
}

/* Ліва примара (Черепний лицар) */
.info-block::before {
    content: '';
    position: absolute;
    /* Збільшуємо простір по вертикалі (було -50px) */
    top: -150px; bottom: -150px; 
    /* Відсуваємо далі вліво, тому що картинка стала ширшою */
    left: -420px; 
    /* Робимо саму картинку більше (було 350px) */
    width: 550px; 
    
    background: url('images/gar.png') no-repeat center / contain;
    opacity: 0.15; /* Можна зробити трохи яскравіше, якщо вони більше */
    mix-blend-mode: screen; 
    pointer-events: none;
    z-index: -1;
}

/* 3. Права примара (поряд з "Персонаж дня") */
.info-block::after {
    content: '';
    position: absolute;
    /* Збільшуємо простір по вертикалі */
    top: -200px; bottom: -150px;
    /* Відсуваємо далі праворуч */
    right: -390px; 
    /* Робимо саму картинку більше */
    width: 550px; 
    
    background: url('images/casca1.png') no-repeat center / contain;
    opacity: 0.15;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: -1;
}
/* 1. Даємо блоку вікторини відносне позиціонування */
.quiz {
    position: relative;
    /* Якщо додаєш до style.css, ці 3 рядки у тебе вже є в quiz.html, 
       вони просто щоб блок залишався по центру: */
    max-width: 850px;
    margin: 50px auto;
    padding: 0 20px;
}

/* 2. Лівий привид для вікторини */
.quiz::before {
    content: '';
    position: absolute;
    /* Розтягуємо по висоті всього блоку з питаннями */
    top: -100px; bottom: 0; 
    left: -450px; /* Висуваємо у ліву порожнечу */
    width: 400px;
    
    /* Сюди чудово впишеться Пак чи Каска */
    background: url('images/ee.png') no-repeat center 20% / contain;
    
    opacity: 0.1;
    mix-blend-mode: screen; 
    pointer-events: none;
    z-index: -1;
}

/* 3. Правий привид для вікторини */
.quiz::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: -450px; /* Висуваємо у праву порожнечу */
    width: 500px;
    
    /* А сюди можна поставити Червоний Бехеліт чи Гріффіта */
    background: url('images/fem.png') no-repeat center 20% / contain; 
    
    opacity: 0.1;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: -1;
}

/* =========================================
   ПЛАВНИЙ ПЕРЕХІД МІЖ СТОРІНКАМИ
========================================= */
.page-transition {
    position: fixed;
    inset: 0;
    background-color: #050505;
    z-index: 999999;
    pointer-events: none;
    opacity: 1; /* Під час завантаження екран чорний */
    transition: opacity 0.6s ease-in-out;
}

.page-transition.fade-out {
    opacity: 0; /* Екран стає прозорим, показуючи сайт */
}

/* =========================================
   ПАХАЛКА: РЕЖИМ ЗАТМІННЯ
========================================= */
body.eclipse-mode {
    /* Фонова картинка затемнення (заміни на свою пікчу з Долею Господа) */
    background: radial-gradient(circle, rgba(139,0,0,0.4) 0%, rgba(0,0,0,0.9) 80%), url('images/eclipse.jpg') center/cover fixed !important;
    background-color: #200000 !important;
    animation: shakeScreen 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Все стає криваво-червоним */
body.eclipse-mode * {
    border-color: #8b0000 !important;
}

body.eclipse-mode h1, body.eclipse-mode h2, body.eclipse-mode h3 {
    color: #ff0000 !important;
    text-shadow: 0 0 20px #ff0000 !important;
}

/* Спотворюємо картинки, роблячи їх моторошними */
body.eclipse-mode img {
    filter: sepia(1) hue-rotate(-50deg) saturate(4) brightness(0.6) contrast(1.5) !important;
}

@keyframes shakeScreen {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* =========================================
   РОЗДІЛ АНІМЕ (КОМПАКТНИЙ ВИГЛЯД)
========================================= */

.home-anime-section {
    max-width: 1000px; /* Зробили контейнер менше (був 1200, або взагалі без ліміту) */
    margin: 60px auto; /* Відступи зверху та знизу, авто-центрування */
    padding: 0 20px;
}

.anime-header {
    text-align: center;
    margin-bottom: 30px;
}

.anime-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 2rem; /* Трохи зменшили шрифт заголовка */
    color: #fff;
    text-shadow: 0 0 15px rgba(139, 0, 0, 0.8);
    margin: 0 0 10px;
}

.anime-header p {
    color: #bbb;
    font-style: italic;
    font-family: 'Spectral', serif;
}

/* Обгортка для плеєра та списку */
.anime-cinema-wrapper {
    display: grid;
    grid-template-columns: 65% 35%; /* Жорстка сітка: 65% ширини під відео, 35% під список */
    gap: 20px;
    background: #0a0a0a;
    border: 1px solid #333;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    border-radius: 8px; /* Трохи заокруглимо кути для естетики */
}

/* Сам плеєр */
.anime-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Ідеальні пропорції YouTube */
    background: #000;
    border: 1px solid #444;
}

.anime-video-container iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
}

/* Список серій праворуч */
.anime-episode-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 100%; 
    overflow-y: auto; /* Скролл, якщо серій буде багато */
    padding-right: 5px;
}

.anime-episode-list h3 {
    color: var(--blood-red, #8b0000);
    font-family: 'Cinzel', serif;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

/* Кнопки серій */
.anime-episode-list .ep-btn {
    background: transparent;
    color: #aaa;
    border: 1px solid #333;
    padding: 12px 15px;
    text-align: left;
    font-family: 'Spectral', serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.anime-episode-list .ep-num {
    color: var(--blood-red, #ff0000);
    font-family: 'Cinzel', serif;
    font-weight: bold;
}

.anime-episode-list .ep-btn:hover, 
.anime-episode-list .ep-btn.active {
    background: rgba(139, 0, 0, 0.15);
    border-color: var(--blood-red, #8b0000);
    color: #fff;
    transform: translateX(5px);
}

/* Кастомний червоний скроллбар для списку серій */
.anime-episode-list::-webkit-scrollbar { width: 5px; }
.anime-episode-list::-webkit-scrollbar-thumb { background: #8b0000; border-radius: 3px; }
.anime-episode-list::-webkit-scrollbar-track { background: #111; }

/* Для телефонів скидаємо все в одну колонку */
@media (max-width: 800px) {
    .anime-cinema-wrapper {
        grid-template-columns: 1fr; /* Відео зверху, кнопки знизу на мобілках */
    }
    .anime-episode-list {
        max-height: 250px;
    }
}
.video-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2;
    overflow: hidden;
}
.video-bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    
    /* Ось тут змінюємо цифри: 0.2 — це дуже темно (20% яскравості) */
    filter: brightness(1) contrast(1.1); 
}
/* Створюємо темну напівпрозору плівку поверх відео */
.video-bg::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* 0.75 - це 75% темряви. Можна зробити 0.85 для ще більшої похмурості */
    z-index: 1;
}

/* --- ЕФЕКТ ГРОЗИ (РІДКІСНА І НЕПЕРЕДКАЗАНА) --- */
        
        /* Базові стилі для спалаху неба */
        .lightning-flash {
            position: absolute;
            inset: 0;
            background: rgba(200, 220, 255, 0.35); 
            z-index: 1; 
            pointer-events: none;
            opacity: 0;
        }

        /* Базові стилі для картинки блискавки */
        .lightning-bolt {
            position: absolute;
            height: 100%;
            background: url('images/mol.png') no-repeat center top;
            background-size: contain;
            z-index: 2; 
            pointer-events: none;
            opacity: 0;
            filter: drop-shadow(0 0 15px rgba(150, 220, 255, 0.9));
        }

        /* --- НАЛАШТУВАННЯ ЧАСУ ДЛЯ КОЖНОЇ БЛИСКАВКИ --- */

        /* 1-я блискавка (Праворуч): Б’є приблизно раз на 14 секунд */
        .bolt-1, .flash-1 { 
            animation: stormAnim 14s infinite; 
        }
        .bolt-1 { right: 20%; top: -5%; width: 450px; }

        /* 2-я блискавка (Ліворуч): Б’є рідко, раз на 23 секунди */
        .bolt-2, .flash-2 { 
            animation: stormAnim 23s infinite; 
            animation-delay: 5s; /* Даємо затримку на старті */
        }
        .bolt-2 { left: 10%; top: -10%; width: 350px; transform: scaleX(-1); }

        /* 3-я блискавка (По центру): Б’є дуже рідко, раз на 31 секунду */
        .bolt-3, .flash-3 { 
            animation: stormAnim 31s infinite; 
            animation-delay: 12s;
        }
        .bolt-3 { 
            left: 42%; 
            top: -2%; 
            width: 500px; 
            /* Прибрали баговане opacity і зробили блискавку тьмяною через фільтр яскравості */
            filter: drop-shadow(0 0 10px rgba(150, 220, 255, 0.4)) brightness(0.6); 
        }


        /* --- ЄДИНА АНІМАЦІЯ (Швидка та різка) --- */
        /* Так як цикли довгі, спалах займає всього 3% від усього часу */
        @keyframes stormAnim {
            0%, 96%, 100% { opacity: 0; }
            97.5% { opacity: 1; }   /* Перший різкий удар */
            98.5% { opacity: 0; }   /* На секунду гасне */
            99.5% { opacity: 0.8; } /* Другий удар, що добиває (трохи слабше) */
        }
        .selected-card {
    border-color: var(--blood-red) !important;
    box-shadow: 0 0 30px rgba(139,0,0,.8) !important;
}
body {
    background:
        linear-gradient(rgba(0,0,0,0.78), rgba(0,0,0,0.9)),
        url("images/characters-bg.png") center/cover fixed no-repeat;
}
.character-preview {
    backdrop-filter: blur(10px);
    background: rgba(5, 5, 5, 0.82);
}

.card {
    backdrop-filter: blur(4px);
    background: rgba(10, 10, 10, 0.78);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at bottom, rgba(139,0,0,.25), transparent 45%);
    pointer-events: none;
    z-index: -1;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 12% 22%, rgba(255,255,255,.12), transparent 18%),
        radial-gradient(circle at 82% 72%, rgba(139,0,0,.18), transparent 26%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    opacity: 0.08;
    animation: fogMove 35s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes fogMove {
    0% { transform: translateX(0); }
    50% { transform: translateX(-40px); }
    100% { transform: translateX(0); }
}
.selected-card {
    border-color: #ff0000 !important;
    box-shadow:
        0 0 25px rgba(139,0,0,.8),
        0 0 60px rgba(139,0,0,.35) !important;
}
.particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

.particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #ff0000;
    border-radius: 50%;
    animation: floatParticle linear infinite;
}

@keyframes floatParticle {
    from {
        transform: translateY(100vh);
        opacity: 0;
    }

    to {
        transform: translateY(-10vh);
        opacity: 1;
    }
}
.character-preview {
    border-left: 2px solid rgba(139,0,0,.9);
}
#preloader {
    display: none !important;
}
body {
    background:
        linear-gradient(rgba(0,0,0,0.78), rgba(0,0,0,0.9)),
        url("images/gallery-bg.jpg") center/cover fixed no-repeat;
        
    background-color: #000;
}
.gallery-grid{
    width: 100%;
    max-width: 1500px;

    margin: 60px auto;
    padding: 0 70px 80px;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 28px;
}

.gallery-card{
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.08);

    background: #050505;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    cursor: pointer;
}

.gallery-card img{
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.72)
        contrast(1.08)
        saturate(.88);

    transition:
        transform .5s ease,
        filter .5s ease;
}

.gallery-card:hover{
    transform: translateY(-8px);

    border-color: rgba(139,0,0,.7);

    box-shadow:
        0 0 35px rgba(139,0,0,.28);
}

.gallery-card:hover img{
    transform: scale(1.06);

    filter:
        brightness(.95)
        contrast(1.1)
        saturate(1);
}
body::after{
    content:"";

    position: fixed;
    inset:0;

    background:
        radial-gradient(circle at top,
        rgba(139,0,0,.14),
        transparent 40%);

    pointer-events:none;
    z-index:-1;
}
/* --- КРОВАВИЙ ШЛЕЙФ --- */
.blood-trail {
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--blood-red, #8b0000);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    animation: trailFade 0.7s ease-out forwards;
    box-shadow: 0 0 10px #ff0000;
}

@keyframes trailFade {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 30px) scale(0); } /* Капає вниз і зникає */
}

/* --- ГЛОБАЛЬНИЙ ПОШУК І ОБРАНЕ --- */
.site-tools {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100200;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    pointer-events: auto;
}

.site-tool-btn,
.site-save-page {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(8,8,8,.9);
    color: #f4f4f4;
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,.55);
    transition: .25s ease;
}

.site-tool-btn:hover,
.site-save-page:hover {
    border-color: var(--blood-red);
    background: rgba(139,0,0,.9);
    color: #fff;
    box-shadow: 0 0 22px rgba(139,0,0,.45);
}

#siteFavoritesCount {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    margin-left: 6px;
    align-items: center;
    justify-content: center;
    /* !important потрібен для кнопок зі стилями прямо в окремих сторінках. */
    border-radius: 999px !important;
    background: rgba(139,0,0,.9);
    color: #fff;
    font-family: 'Spectral', serif;
    font-size: .85rem;
}

.site-modal {
    position: fixed;
    inset: 0;
    z-index: 100300;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.site-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.site-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(8px);
}

.site-panel {
    position: relative;
    z-index: 1;
    width: min(760px, 94vw);
    max-height: min(760px, 88vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(18,18,18,.98), rgba(5,5,5,.98));
    border: 1px solid rgba(139,0,0,.65);
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0,0,0,.85), 0 0 40px rgba(139,0,0,.22);
    padding: 28px;
}

.site-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid #333;
    border-radius: 50%;
    background: #090909;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: .25s ease;
}

.site-modal-close:hover {
    background: var(--blood-red);
    border-color: #ff1a1a;
    transform: rotate(90deg);
}

.site-panel-kicker,
.site-result-type {
    color: var(--blood-red);
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.site-panel-kicker {
    font-size: .78rem;
    margin-bottom: 8px;
}

.site-panel h2 {
    margin: 0 54px 18px 0;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: 2px;
}

.site-search-field {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.site-search-field span,
.site-search-meta {
    color: #888;
    font-size: .95rem;
}

.site-search-field input {
    width: 100%;
    border: 1px solid #333;
    border-radius: 6px;
    background: #050505;
    color: #fff;
    outline: none;
    padding: 14px 16px;
    font: 1.05rem 'Spectral', serif;
    transition: .25s ease;
}

.site-search-field input:focus {
    border-color: var(--blood-red);
    box-shadow: 0 0 18px rgba(139,0,0,.35);
}

.site-search-meta {
    margin-bottom: 14px;
}

.site-results {
    display: grid;
    gap: 12px;
    overflow-y: auto;
    padding-right: 6px;
}

.site-result-card {
    display: grid;
    grid-template-columns: 1fr 44px;
    align-items: stretch;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 7px;
    transition: .25s ease;
}

.site-result-card:hover {
    border-color: rgba(139,0,0,.75);
    background: rgba(139,0,0,.12);
}

.site-result-link {
    min-width: 0;
    padding: 14px 16px;
    text-decoration: none;
}

.site-result-type {
    display: block;
    margin-bottom: 5px;
    font-size: .72rem;
}

.site-result-link h3 {
    margin: 0 0 6px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.site-result-link p,
.site-empty {
    margin: 0;
    color: #aaa;
    line-height: 1.5;
}

.site-result-favorite,
.favorite-toggle {
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.65);
    color: #aaa;
    cursor: pointer;
    transition: .2s ease;
}

.site-result-favorite {
    border-radius: 6px;
    margin: 10px 10px 10px 0;
    font-size: 1.35rem;
}

.site-result-favorite:hover,
.site-result-favorite.active,
.favorite-toggle:hover,
.favorite-toggle.active {
    color: #fff;
    border-color: var(--blood-red);
    background: rgba(139,0,0,.78);
    box-shadow: 0 0 15px rgba(139,0,0,.38);
}

.favorite-host {
    position: relative;
}

.favorite-toggle {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 30;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-empty {
    border: 1px dashed rgba(255,255,255,.16);
    border-radius: 7px;
    padding: 22px;
    background: rgba(255,255,255,.025);
}

.site-empty p {
    margin: 0 0 14px;
}

body.site-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .site-tools {
        right: 12px;
        bottom: 12px;
    }

    .site-tool-btn {
        min-height: 38px;
        padding: 0 11px;
        font-size: .78rem;
    }

    .site-panel {
        padding: 22px 16px;
    }

    .site-result-card {
        grid-template-columns: 1fr 40px;
    }
}

/* ===== ЄДИНИЙ СТИЛЬ КНОПОК =====
   Капсульна форма та живий червоний відблиск для всіх розділів сайту. */
:is(button, .btn, .site-tool-btn, .site-save-page) {
    -webkit-tap-highlight-color: transparent;
    border-radius: 999px;
    border: 1px solid rgba(205, 28, 28, .82);
    background: linear-gradient(135deg, rgba(78, 0, 0, .96), rgba(20, 3, 3, .98));
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 7px 18px rgba(0, 0, 0, .45),
        0 0 0 0 rgba(210, 0, 0, .38);
    transition:
        transform .22s cubic-bezier(.2, .8, .2, 1),
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease,
        color .22s ease;
}

:is(button, .btn, .site-tool-btn, .site-save-page):hover:not(:disabled) {
    transform: translateY(-3px) scale(1.025);
    border-color: #ff6b6b;
    background: linear-gradient(135deg, #b10a0a, #430000);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 12px 26px rgba(0, 0, 0, .58),
        0 0 24px rgba(202, 0, 0, .52);
}

:is(button, .btn, .site-tool-btn, .site-save-page):active:not(:disabled) {
    transform: translateY(1px) scale(.98);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, .55),
        0 3px 9px rgba(0, 0, 0, .45),
        0 0 14px rgba(202, 0, 0, .35);
}

:is(button, .btn, .site-tool-btn, .site-save-page):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    box-shadow:
        0 0 0 5px rgba(139, 0, 0, .6),
        0 0 25px rgba(255, 30, 30, .65);
}

:is(button, .btn, .site-tool-btn, .site-save-page):disabled {
    cursor: not-allowed;
    filter: grayscale(.75);
    opacity: .55;
}

/* Круглі керуючі іконки зберігають правильні пропорції. */
:is(.site-modal-close, .favorite-toggle, .lb-btn, .preview-close, .close-panel) {
    aspect-ratio: 1;
    padding-inline: 0;
}

@media (prefers-reduced-motion: reduce) {
    :is(button, .btn, .site-tool-btn, .site-save-page) {
        transition-duration: .01ms;
    }
}

/* ===== AURORA UI: темний преміальний інтерфейс ===== */
:root {
    --neon-red: #d4143a;
    --surface: rgba(26, 26, 36, .74);
    --muted-text: #a1a1aa;
}

body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: #f8fafc;
    background-color: #0a0a0c;
    background-image:
        radial-gradient(circle at 85% -10%, rgba(212, 20, 58, .19), transparent 31%),
        radial-gradient(circle at 8% 60%, rgba(128, 7, 25, .12), transparent 28%),
        linear-gradient(180deg, #121214, #0a0a0c 56%);
}

nav {
    justify-content: center;
    gap: 4px;
    padding: 11px clamp(16px, 4vw, 58px);
    background: rgba(10, 10, 15, .72);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .25);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

nav a {
    color: #a1a1aa;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 2px 7px;
}

nav a::after { background: var(--neon-red); }
nav a:hover, nav a.active { color: #fff; text-shadow: 0 0 15px rgba(212, 20, 58, .75); }

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    font-size: .95rem !important;
    letter-spacing: .11em !important;
    margin-right: 14px !important;
}

.nav-brand span { color: var(--neon-red); font-size: 1.35rem; text-shadow: 0 0 14px var(--neon-red); }
.nav-brand::after { display: none; }

.nav-search {
    order: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(240px, 100%);
    margin-left: auto;
    padding: 9px 14px;
    color: #8c8c9b;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    transition: .2s ease;
}

.nav-search:focus-within { border-color: rgba(212,20,58,.85); box-shadow: 0 0 0 4px rgba(212,20,58,.15); }
.nav-search input { width: 168px; border: 0; outline: 0; color: #fff; background: transparent; font: .82rem Inter, sans-serif; }
.nav-search input::placeholder { color: #777784; }

.nav-premium {
    order: 3;
    padding: 9px 13px;
    border: 1px solid rgba(255, 104, 123, .42);
    border-radius: 999px;
    color: #fff !important;
    background: linear-gradient(135deg, #a40c2b, #4a0615);
    box-shadow: 0 6px 18px rgba(180, 8, 40, .32);
}
.nav-premium::after { display: none; }

.hero {
    background:
        linear-gradient(90deg, rgba(10,10,12,.98) 0%, rgba(10,10,12,.85) 34%, rgba(10,10,12,.3) 66%, rgba(10,10,12,.18) 100%),
        url('images/characters-bg.png') center/cover fixed !important;
}

.hero-content { text-align: left !important; margin-left: 4vw; }
.hero h1, .page-header h1, .section-title h2 { font-family: Inter, "Segoe UI", sans-serif !important; font-weight: 900; letter-spacing: -.055em; }
.hero h1 { max-width: 750px; line-height: .88; text-shadow: 0 12px 36px rgba(0,0,0,.65); }
.hero h1 span { color: #ff6379; text-shadow: 0 0 30px rgba(212,20,58,.68); }
.hero p { margin: 18px 0 0 !important; color: var(--muted-text); max-width: 600px; }

.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero-tags span {
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: #f1f1f4;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.hero-actions { justify-content: flex-start !important; }
.btn { font-family: Inter, "Segoe UI", sans-serif; font-weight: 800; letter-spacing: .03em; text-transform: none; }
.btn-primary { background: #c91035 !important; border-color: #ff6379 !important; box-shadow: 0 8px 24px rgba(212,20,58,.48) !important; }
.btn-primary:hover { background: #e51c49 !important; box-shadow: 0 12px 30px rgba(212,20,58,.65) !important; }
.btn-secondary { background: rgba(0,0,0,.42) !important; border-color: rgba(255,255,255,.16) !important; }

.card, .portal-card, .site-panel, .anime-cinema-wrapper {
    background: linear-gradient(145deg, rgba(30,30,43,.82), rgba(17,17,25,.82));
    border-color: rgba(255,255,255,.09);
    border-radius: 16px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.32);
    backdrop-filter: blur(10px);
}

.card:hover, .portal-card:hover { border-color: rgba(212,20,58,.75); box-shadow: 0 18px 40px rgba(160,10,38,.25); }
.tag, .site-panel-kicker, .site-result-type { color: #ff7184; }

@media (max-width: 1000px) {
    .nav-search { order: 4; margin-left: 0; }
}

@media (max-width: 1100px) {
    nav { justify-content: center; }
    .nav-search { margin-left: 0; }
}

@media (max-width: 700px) {
    .hero-content { margin-left: 0; text-align: center !important; }
    .hero p { margin-inline: auto !important; }
    .hero-actions, .hero-tags { justify-content: center !important; }
    .hero { background-position: 63% center !important; }
    .nav-brand { margin-right: auto !important; }
    .nav-search { width: 100%; }
    .nav-search input { width: 100%; }
}

/* Меню розділів завжди розташоване по центру шапки. */
@media (min-width: 1101px) {
    nav {
        position: sticky;
        justify-content: center;
        min-height: 72px;
    }

    nav > .nav-brand {
        position: absolute;
        left: clamp(16px, 4vw, 58px);
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
    }

    nav > .nav-search {
        position: absolute;
        right: 190px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }

    nav > .nav-premium {
        position: absolute;
        right: clamp(16px, 4vw, 58px);
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
}

/* ========================================================================== */
/* THE BLACK ARCHIVE — єдина дизайн-система проєкту                          */
/* ========================================================================== */

:root {
    --ink: #050505;
    --ink-soft: #0d0d0d;
    --paper: #e9e3d7;
    --paper-muted: #aaa296;
    --blood: #a20d18;
    --blood-bright: #e02a36;
    --ash: #6d6963;
    --line: rgba(233, 227, 215, .15);
    --line-strong: rgba(233, 227, 215, .28);
    --panel: rgba(8, 8, 8, .88);
    --serif-display: "Cinzel", Georgia, serif;
    --serif-text: "Spectral", Georgia, serif;
}

html { color-scheme: dark; }

body {
    color: var(--paper);
    font-family: var(--serif-text) !important;
    background-color: var(--ink) !important;
    background-image:
        linear-gradient(rgba(0, 0, 0, .76), rgba(0, 0, 0, .94)),
        url("images/characters-bg.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

body::before {
    opacity: .28 !important;
    background-image:
        repeating-linear-gradient(102deg, transparent 0 23px, rgba(255,255,255,.015) 24px 25px),
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.05) 0 1px, transparent 2px) !important;
    background-size: auto, 7px 7px !important;
    animation: none !important;
}

.berserk-side { display: none !important; }

.gallery-main-wrapper,
.reviews-main-wrapper,
.quotes-main-wrapper,
.quiz-main-wrapper,
.lore-main-wrapper,
.timeline-main-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
}

.floating-header {
    left: 0 !important;
    width: 100% !important;
}

.comparison-panel,
.character-links,
nav,
.page-header,
.controls-container,
.grid,
.footer {
    margin-left: auto !important;
    margin-right: auto !important;
}

.character-hero { margin-left: 5% !important; margin-right: 5% !important; }

h1, h2, h3, h4,
.hero h1,
.page-header h1,
.section-title h2,
.character-hero h1,
.comparison-panel h2,
.character-links h2 {
    font-family: var(--serif-display) !important;
    letter-spacing: .035em !important;
}

p { text-wrap: pretty; }

.card,
.portal-card,
.site-panel,
.anime-cinema-wrapper,
.comparison-panel,
.character-links,
.article-block,
.form-sidebar,
.review-card,
.quote-block,
.timeline-content {
    border-radius: 2px !important;
    background: linear-gradient(145deg, rgba(18,18,18,.96), rgba(5,5,5,.96)) !important;
    border-color: var(--line) !important;
    backdrop-filter: none !important;
}

.card:hover,
.portal-card:hover,
.article-block:hover,
.quote-block:hover {
    border-color: rgba(224, 42, 54, .72) !important;
    box-shadow: 12px 14px 0 rgba(0,0,0,.38), 0 0 28px rgba(162,13,24,.2) !important;
}

.btn,
button,
select,
input,
textarea { border-radius: 1px !important; }

.btn,
.archive-button {
    font-family: var(--serif-display) !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

/* Єдина навігація архіву */
.archive-nav {
    position: sticky !important;
    top: 0;
    z-index: 5000;
    width: 100%;
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px !important;
    padding: 10px clamp(16px, 4vw, 58px) !important;
    margin: 0 !important;
    background: rgba(3,3,3,.94) !important;
    border-bottom: 1px solid rgba(224,42,54,.42) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.52) !important;
    backdrop-filter: blur(12px) !important;
}

.archive-nav__brand {
    position: static !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    color: #fff !important;
    font: 700 .9rem var(--serif-display) !important;
    letter-spacing: .16em !important;
    white-space: nowrap;
}

.archive-nav__brand::before {
    content: "𒉭";
    color: var(--blood-bright);
    font-size: 1.45rem;
    filter: drop-shadow(0 0 10px rgba(224,42,54,.7));
}

.archive-nav__brand::after,
.archive-nav a::after { display: none !important; }

.archive-nav__links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.archive-nav__links > a,
.archive-nav summary {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    margin: 0;
    border: 1px solid transparent;
    color: #aaa39a;
    font: 700 .72rem var(--serif-display);
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.archive-nav summary::-webkit-details-marker { display: none; }
.archive-nav summary::after { content: " +"; color: var(--blood-bright); }
.archive-nav details[open] summary::after { content: " −"; }

.archive-nav__links > a:hover,
.archive-nav__links > a.active,
.archive-nav summary:hover,
.archive-nav details[open] summary,
.archive-nav details[data-current] summary {
    color: #fff;
    border-color: rgba(224,42,54,.38);
    background: rgba(162,13,24,.14);
}

.site-tools { display: none !important; }
.fog-layer {
    background: radial-gradient(ellipse at 30% 90%, rgba(220,220,220,.34), transparent 45%), radial-gradient(ellipse at 75% 95%, rgba(160,160,160,.26), transparent 42%) !important;
    filter: blur(22px);
}
.fog-layer.layer2 { background: radial-gradient(ellipse at 60% 100%, rgba(210,210,210,.28), transparent 48%) !important; }

.archive-nav__cluster { position: relative; }

.archive-nav__menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    width: 245px;
    padding: 8px;
    transform: translateX(-50%);
    background: rgba(4,4,4,.98);
    border: 1px solid var(--line-strong);
    border-top: 2px solid var(--blood);
    box-shadow: 0 22px 50px rgba(0,0,0,.7);
}

.archive-nav__menu a {
    display: flex;
    justify-content: space-between;
    padding: 11px 12px;
    margin: 0;
    color: #b6afa5;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font: 700 .73rem var(--serif-display);
    letter-spacing: .055em;
}

.archive-nav__menu a:hover,
.archive-nav__menu a.active { color: #fff; background: rgba(162,13,24,.18); }

.archive-nav__actions { display: flex; gap: 8px; }

.archive-nav__icon,
.archive-nav__toggle {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 12px;
    color: #eee7dc;
    background: #0a0a0a;
    border: 1px solid var(--line-strong);
    font: 700 .72rem var(--serif-display);
    cursor: pointer;
}

.archive-nav__toggle { display: none; }

/* Загальні редакційні модулі */
.archive-section {
    position: relative;
    width: min(1240px, calc(100% - 40px));
    margin: 72px auto;
}

.archive-section::before {
    content: attr(data-index);
    position: absolute;
    top: -28px;
    left: -8px;
    color: rgba(224,42,54,.35);
    font: 700 4.8rem/1 var(--serif-display);
    pointer-events: none;
}

.archive-kicker {
    color: var(--blood-bright);
    font: 700 .72rem var(--serif-display);
    letter-spacing: .19em;
    text-transform: uppercase;
}

.archive-heading {
    max-width: 850px;
    margin: 10px 0 18px;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 5.4rem);
    line-height: .98;
}

.archive-lead {
    max-width: 760px;
    color: #b7afa4;
    font-size: 1.08rem;
    line-height: 1.7;
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 32px;
    background: var(--line);
    border: 1px solid var(--line);
}

.archive-panel {
    position: relative;
    min-height: 220px;
    padding: 28px;
    overflow: hidden;
    background: rgba(5,5,5,.96);
}

.archive-panel::after {
    content: "";
    position: absolute;
    inset: auto -20% -70% 20%;
    height: 180px;
    background: radial-gradient(ellipse, rgba(162,13,24,.18), transparent 68%);
    pointer-events: none;
}

.archive-panel h3 { margin: 10px 0; color: #fff; font-size: 1.25rem; }
.archive-panel p { color: #a9a198; line-height: 1.6; }
.archive-panel a { color: #fff; text-decoration-color: var(--blood); text-underline-offset: 4px; }

.archive-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.archive-chip {
    padding: 7px 10px;
    border: 1px solid var(--line);
    color: #c8c0b5;
    background: rgba(255,255,255,.025);
    font: 700 .66rem var(--serif-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.journey-grid { grid-template-columns: repeat(3, 1fr); }
.journey-card {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    color: #fff;
    background-position: center top;
    background-size: cover;
    text-decoration: none;
    isolation: isolate;
}
.journey-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(transparent 22%, rgba(0,0,0,.94) 86%);
}
.journey-card:hover { filter: contrast(1.08); }
.journey-card h3 { font-size: 1.7rem; }

.archive-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block: 1px solid var(--line);
}
.archive-stat { padding: 25px; text-align: center; border-right: 1px solid var(--line); }
.archive-stat:last-child { border-right: 0; }
.archive-stat b { display: block; color: #fff; font: 700 2.2rem var(--serif-display); }
.archive-stat span { color: #8f8981; font-size: .83rem; }

.continue-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 25px 28px;
    margin-top: 28px;
    border: 1px solid rgba(224,42,54,.32);
    background: linear-gradient(90deg, rgba(162,13,24,.15), rgba(5,5,5,.9));
}

.cosmology-stack {
    display: grid;
    gap: 8px;
    margin-top: 30px;
}
.cosmology-layer {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: center;
    padding: 20px 24px;
    border-left: 3px solid var(--blood);
    background: linear-gradient(90deg, rgba(162,13,24,.14), rgba(255,255,255,.025));
}
.cosmology-layer:nth-child(2) { margin-inline: 5%; }
.cosmology-layer:nth-child(3) { margin-inline: 10%; }
.cosmology-layer:nth-child(4) { margin-inline: 15%; border-color: #f03a45; }
.cosmology-layer b { color: #fff; font: 700 .9rem var(--serif-display); }
.cosmology-layer span { color: #aaa39a; }

.atlas-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    background: rgba(0,0,0,.86);
    border-block: 1px solid var(--line);
}
.atlas-toolbar button.active { color: #fff; border-color: var(--blood-bright); background: rgba(162,13,24,.22); }

.artifact-spec {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 18px;
    background: var(--line);
}
.artifact-spec span { padding: 9px; color: #88827a; background: #070707; font-size: .7rem; text-align: center; }
.artifact-spec b { display: block; margin-bottom: 4px; color: #eee7dc; font-family: var(--serif-display); }

.archive-collapsed { display: none !important; }
.poster-btn { padding: 7px 12px; color: #d8d0c5; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.poster-btn:hover { color: #fff; border-color: var(--blood-bright); }

.quiz-modes {
    width: min(900px, calc(100% - 32px));
    margin: 0 auto 26px;
    padding: 18px;
    border: 1px solid var(--line);
    background: rgba(4,4,4,.9);
}
.quiz-modes > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quiz-modes > div + div { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.quiz-modes .archive-kicker { min-width: 100px; }
.quiz-modes button { padding: 8px 11px; color: #9e978e; background: transparent; border: 1px solid var(--line); cursor: pointer; }
.quiz-modes button.active { color: #fff; border-color: var(--blood-bright); background: rgba(162,13,24,.2); }
.quiz-explanation { min-height: 54px; margin-top: 18px; padding: 14px 16px; color: #aaa298; border-left: 3px solid var(--blood); background: rgba(162,13,24,.08); }
.quiz-explanation:empty { display: none; }

.map-atlas-toolbar {
    position: fixed;
    top: 82px;
    left: 50%;
    z-index: 90;
    width: min(840px, calc(100% - 28px));
    transform: translateX(-50%);
    box-shadow: 0 18px 36px rgba(0,0,0,.5);
}
.route-pin { box-shadow: 0 0 0 9px rgba(224,42,54,.16), 0 0 35px #e02a36 !important; }

.timeline-atlas-toolbar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 120;
    transform: translateX(-50%);
    box-shadow: 0 18px 40px rgba(0,0,0,.7);
}

.edits-archive-header {
    min-height: 100vh;
    display: grid;
    place-content: center;
    padding: 30px;
    scroll-snap-align: start;
    text-align: center;
    background: linear-gradient(rgba(0,0,0,.72),#050505), url("images/eclipse.jpg") center/cover;
}
.edits-archive-header h1 { margin: 8px 0; font-size: clamp(3rem, 10vw, 8rem); }
.edit-meta { position: absolute; left: 26px; bottom: 32px; z-index: 8; display: grid; gap: 4px; text-shadow: 0 2px 10px #000; }
.edit-meta strong { color: #fff; font: 700 1rem var(--serif-display); }
.edit-meta span:last-child { color: #a9a198; font-size: .75rem; }

.review-spoiler-toggle { display: flex; gap: 9px; align-items: center; margin: 12px 0; color: #bbb3a8; }
.local-archive-note { padding: 12px; border-left: 2px solid var(--blood); color: #8f8981; background: rgba(162,13,24,.08); font-size: .82rem; }
.review-spoiler { position: relative; min-height: 90px; color: transparent !important; cursor: pointer; filter: blur(7px); user-select: none; }
.review-spoiler::after { content: "СПОЙЛЕР · НАТИСНИ, ЩОБ ВІДКРИТИ"; position: absolute; inset: 0; display: grid; place-items: center; color: #eee7dc; font: 700 .72rem var(--serif-display); letter-spacing: .09em; filter: blur(0); }
.review-spoiler.revealed { min-height: 0; color: inherit !important; filter: none; user-select: auto; }
.review-spoiler.revealed::after { display: none; }
.hide-character-spoilers .status-badge::after { content: "Натисніть, щоб відкрити"; }

.spoiler-mask { position: relative; filter: blur(8px); user-select: none; cursor: pointer; }
.spoiler-mask.revealed { filter: none; user-select: auto; }

/* Нові енциклопедичні сторінки */
.archive-page { min-height: 100vh; }
.archive-page-hero {
    min-height: 62vh;
    display: grid;
    align-items: end;
    padding: 90px max(5vw, 24px) 65px;
    border-bottom: 1px solid rgba(224,42,54,.48);
    background-position: center;
    background-size: cover;
    position: relative;
    isolation: isolate;
}
.archive-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0,0,0,.98), rgba(0,0,0,.52) 62%, rgba(0,0,0,.85)), linear-gradient(transparent 45%, #050505);
}
.archive-page-hero__content { max-width: 820px; }
.archive-page-hero h1 { margin: 8px 0 18px; font-size: clamp(3rem, 8vw, 8rem); line-height: .86; }
.archive-page-hero p { max-width: 670px; color: #c0b8ad; font-size: 1.1rem; line-height: 1.7; }

.arc-list { display: grid; gap: 1px; margin-top: 32px; background: var(--line); border: 1px solid var(--line); }
.arc-row {
    display: grid;
    grid-template-columns: 92px 1fr 220px;
    gap: 26px;
    align-items: center;
    min-height: 150px;
    padding: 26px;
    background: #080808;
}
.arc-row__number { color: rgba(224,42,54,.52); font: 700 2.5rem var(--serif-display); }
.arc-row h3 { margin: 0 0 8px; color: #fff; font-size: 1.4rem; }
.arc-row p { margin: 0; color: #9f988f; }
.arc-row img { width: 100%; height: 110px; object-fit: cover; filter: grayscale(.65) contrast(1.15); }

.faction-grid { grid-template-columns: repeat(2, 1fr); }
.faction-card { min-height: 360px; background-size: cover; background-position: center; }
.faction-card::before { content:""; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,.96)); }
.faction-card > * { position: relative; z-index: 1; }

.ost-player {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: center;
    padding: 30px;
    border: 1px solid var(--line);
    background: #080808;
}
.ost-art { aspect-ratio: 1; background: url("images/behelit11.png") center/contain no-repeat, radial-gradient(circle, rgba(162,13,24,.35), transparent 65%); }
.waveform { display: flex; align-items: center; gap: 3px; height: 80px; }
.waveform i { flex: 1; height: var(--wave, 30%); background: linear-gradient(#e02a36,#52050b); animation: wavePulse 1.2s ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
.ost-player:not(.playing) .waveform i { animation-play-state: paused; }
@keyframes wavePulse { to { height: calc(var(--wave, 30%) * .35 + 12%); opacity: .45; } }

.struggler-stage { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 40px 20px; }
.struggler-card { width: min(880px, 100%); padding: clamp(28px, 6vw, 70px); border: 1px solid var(--line-strong); background: rgba(3,3,3,.94); box-shadow: 20px 24px 0 rgba(0,0,0,.42); }
.struggler-card h1 { font-size: clamp(2.4rem, 7vw, 5.5rem); }
.struggler-choices { display: grid; gap: 10px; margin-top: 28px; }
.struggler-choices button { padding: 17px 18px; text-align: left; color: #eee8dd; background: rgba(255,255,255,.025); border: 1px solid var(--line); font-family: var(--serif-text); font-size: 1rem; cursor: pointer; }
.struggler-choices button:hover { padding-left: 28px; border-color: var(--blood-bright); background: rgba(162,13,24,.15); }

.archive-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 34px max(5vw, 24px);
    border-top: 1px solid var(--line);
    color: #817b73;
    background: #030303;
}
.archive-footer a { color: #b7afa4; }

@media (max-width: 980px) {
    .archive-nav { grid-template-columns: 1fr auto; }
    .archive-nav__toggle { display: inline-grid; }
    .archive-nav__links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
        padding: 14px;
        align-items: stretch;
        flex-direction: column;
        background: rgba(3,3,3,.99);
        border-bottom: 1px solid var(--blood);
    }
    .archive-nav.menu-open .archive-nav__links { display: flex; }
    .archive-nav__links > a,
    .archive-nav summary { width: 100%; justify-content: space-between; }
    .archive-nav__cluster { width: 100%; }
    .archive-nav__menu { position: static; width: 100%; transform: none; box-shadow: none; border-top-width: 1px; }
    .archive-nav__actions { margin-left: auto; }
    .archive-grid, .journey-grid { grid-template-columns: 1fr 1fr; }
    .archive-stats { grid-template-columns: 1fr 1fr; }
    .archive-stat:nth-child(2) { border-right: 0; }
    .archive-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .arc-row { grid-template-columns: 70px 1fr; }
    .arc-row img { grid-column: 1 / -1; height: 190px; }
}

.archive-nav .archive-nav__links > .archive-nav__mobile-account { display: none; }
@media (max-width: 660px) {
    .archive-nav .archive-nav__links > .archive-nav__mobile-account { display: flex; }
    .archive-nav { padding-inline: 14px !important; }
    .archive-nav__brand { font-size: .75rem !important; }
    .archive-nav__actions .archive-nav__icon:first-child { display: none; }
    .archive-section { width: min(100% - 28px, 1240px); margin-block: 54px; }
    .archive-grid, .journey-grid, .faction-grid { grid-template-columns: 1fr; }
    .journey-card { min-height: 330px; }
    .archive-heading { font-size: clamp(2rem, 13vw, 3.8rem); }
    .continue-card, .cosmology-layer, .ost-player { grid-template-columns: 1fr; }
    .cosmology-layer:nth-child(n) { margin-inline: 0; }
    .archive-page-hero { min-height: 70vh; }
    .archive-page-hero h1 { font-size: clamp(3rem, 18vw, 5.6rem); }
    .arc-row { grid-template-columns: 1fr; }
    .arc-row__number { font-size: 1.6rem; }
    .archive-footer { grid-template-columns: 1fr; }
    .artifact-spec { grid-template-columns: 1fr; }
    .map-atlas-toolbar { top: 76px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
    .timeline-atlas-toolbar { width: calc(100% - 20px); overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .waveform i { animation: none !important; }
}

/* Головна: фінальні візуальні виправлення.
   Тримаємо ці правила наприкінці, щоб вони не конфліктували з ранніми варіантами дизайну. */
body:has(.hero) .hero {
    justify-content: center !important;
    padding: 96px clamp(24px, 6vw, 96px) 72px !important;
}

body:has(.hero) .hero-content {
    width: min(760px, 100%);
    margin: 0 auto !important;
    text-align: center !important;
}

body:has(.hero) .hero-content .hero-tags,
body:has(.hero) .hero-content .hero-actions {
    justify-content: center !important;
}

/* Не використовуємо shorthand background: він скидав inline background-image у карток. */
body:has(.portal-grid) .portal-card {
    background-color: #111 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    isolation: isolate;
}

body:has(.portal-grid) .portal-card::before {
    z-index: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .96) 4%, rgba(0, 0, 0, .54) 55%, rgba(0, 0, 0, .06) 100%) !important;
}

body:has(.portal-grid) .portal-card > div {
    z-index: 1;
}

body:has(.portal-grid) .portal-card:hover {
    background-position: center !important;
}

/* Інтерактивне перетворення персонажів у шапці. */
body:has(.hero) .hero-character-container {
    /* Контент повинен залишатися читаним навіть під час трансформації. */
    z-index: 2;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

body:has(.hero) .hero-character-container::before {
    content: "";
    position: absolute;
    inset: 14% 8% 3%;
    z-index: -1;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(ellipse, rgba(214, 18, 47, .48) 0%, rgba(126, 0, 21, .22) 36%, transparent 71%);
    filter: blur(18px);
    transform: scale(.72);
    transition: opacity .35s ease, transform .65s ease;
}

body:has(.hero) .hero-character-container:hover,
body:has(.hero) .hero-character-container:focus-within {
    transform: translateY(-10px) scale(1.025);
}

body:has(.hero) .hero-character-container:hover::before,
body:has(.hero) .hero-character-container:focus-within::before {
    opacity: 1;
    transform: scale(1.12);
}

body:has(.hero) .hero-character-container:hover .hover-img,
body:has(.hero) .hero-character-container:focus-within .hover-img {
    filter: drop-shadow(0 0 13px rgba(255, 86, 109, .9)) drop-shadow(0 0 36px rgba(138, 0, 22, .8));
}

@media (max-width: 700px) {
    body:has(.hero) .hero { min-height: 760px; padding-inline: 18px !important; }
    body:has(.hero) .hero-character-container { opacity: .46; height: 66vh; }
    body:has(.hero) .hero-character-container.right { height: 70vh; }
    body:has(.hero) .hero-character-container.left { left: -17%; }
    body:has(.hero) .hero-character-container.right { right: -22%; }
}

@media (prefers-reduced-motion: reduce) {
    body:has(.hero) .hero-character-container,
    body:has(.hero) .hero-character-container::before,
    body:has(.hero) .hero-character-container::after { transition: none !important; animation: none !important; }
}

/* Інструменти архіву: порівняння, карта та галерея. */
.artifact-comparison {
    width: min(1180px, calc(100% - 36px));
    margin: 18px auto 72px;
    padding: clamp(22px, 4vw, 40px);
    border: 1px solid var(--line, #302c2a);
    background: rgba(8, 8, 8, .94);
    box-shadow: 16px 18px 0 rgba(0, 0, 0, .35);
}
.artifact-comparison h2 { margin: 6px 0 10px; color: #f0e9df; }
.artifact-comparison-note { margin: 0; color: #aaa097; }
.artifact-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.artifact-compare-entry { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; padding: 12px; border: 1px solid #34302d; background: rgba(255,255,255,.025); }
.artifact-compare-entry img { width: 110px; height: 96px; object-fit: cover; filter: grayscale(.3) contrast(1.1); }
.artifact-compare-entry h3 { margin: 0 0 8px; color: #f4eee5; }
.artifact-compare-entry p { margin: 0; color: #ada49a; line-height: 1.55; }
.artifact-compare-toggle, .gallery-download, .map-quick-controls button {
    border: 1px solid rgba(235, 226, 215, .28);
    color: #f7f1e9;
    background: rgba(8, 8, 8, .78);
    font: 700 .74rem var(--serif-display, Georgia, serif);
    letter-spacing: .04em;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.artifact-compare-toggle { position: absolute; top: 14px; right: 14px; z-index: 4; padding: 8px 10px; }
.artifact-compare-toggle:hover, .gallery-download:hover, .map-quick-controls button:hover { border-color: #e02a36; background: rgba(143, 8, 25, .72); transform: translateY(-2px); }
.card.compare-selected { outline: 2px solid #e02a36; outline-offset: -2px; }

.map-quick-controls {
    position: fixed;
    z-index: 120;
    left: max(16px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 10px;
    color: #ddd5cc;
    border: 1px solid #423633;
    background: rgba(3, 3, 3, .88);
    backdrop-filter: blur(12px);
}
.map-quick-controls label { display: flex; gap: 8px; align-items: center; font-size: .82rem; }
.map-quick-controls select { max-width: 190px; padding: 7px; color: #eee7dc; border: 1px solid #48403c; background: #111; }
.map-quick-controls button { padding: 8px 10px; }
.map-legend { color: #aaa097; font-size: .78rem; }
.map-legend i, .map-legend b { display: inline-block; width: 9px; height: 9px; margin-right: 3px; background: #b81229; transform: rotate(45deg); }
.map-legend b { margin-left: 8px; border-radius: 50%; background: #59c7d8; transform: none; }

.shot-card { position: relative; }
.gallery-download { position: absolute; top: 12px; right: 12px; z-index: 6; padding: 8px 10px; opacity: 0; }
.shot-card:hover .gallery-download, .shot-card:focus-within .gallery-download { opacity: 1; }

@media (max-width: 660px) {
    .artifact-comparison-grid { grid-template-columns: 1fr; }
    .artifact-compare-entry { grid-template-columns: 82px 1fr; }
    .artifact-compare-entry img { width: 82px; height: 78px; }
    .map-quick-controls { right: 12px; bottom: 12px; }
    .map-legend { display: none; }
    .gallery-download { opacity: 1; }
}

/* Єдина візуальна система «Чорного архіву». */
:root { --archive-paper: #e9e0d4; --archive-muted: #aaa097; --archive-red: #d42134; }
body { font-family: 'Spectral', Georgia, serif; }
.hero h1, .page-header h1, .section-title h2, .archive-heading, .archive-page-hero h1, .struggler-card h1 {
    font-family: 'Cinzel', Georgia, serif !important;
    letter-spacing: .035em !important;
}
.btn, .archive-button, .archive-chip, .filter-btn, .sort-box select { font-family: 'Cinzel', Georgia, serif; }
:focus-visible { outline: 2px solid #ff6171; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.arc-progress-toggle, .quote-author-filter {
    border: 1px solid rgba(233,224,212,.28);
    padding: 7px 10px;
    color: var(--archive-paper);
    background: rgba(255,255,255,.04);
    font: 700 .72rem 'Cinzel', Georgia, serif;
    cursor: pointer;
}
.arc-progress-toggle:hover, .arc-complete .arc-progress-toggle { border-color: var(--archive-red); background: rgba(212,33,52,.18); }
.arc-complete { box-shadow: inset 4px 0 0 var(--archive-red); }
.reading-progress-note { margin: 12px 0 24px; color: var(--archive-muted); }
.relation-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 26px; color: var(--archive-muted); font-size: .9rem; }
.relation-key i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; }
.relation-alliance i, .relation-alliance::before { background: #9fbd78; }
.relation-conflict i, .relation-conflict::before { background: #d42134; }
.relation-unknown i, .relation-unknown::before { background: #d1a64d; }
.cosmology-layer.relation-alliance { border-left: 3px solid #9fbd78; }
.cosmology-layer.relation-conflict { border-left: 3px solid #d42134; }
.cosmology-layer.relation-unknown { border-left: 3px solid #d1a64d; }
.quote-author-filter { margin-left: 10px; min-height: 42px; }
.author-hidden { display: none !important; }
.status-dead { border-color: #62524c; color: #b6aaa2; }
.roster-card .card-img { filter: grayscale(.25) contrast(1.08); }

/* Інтерактивний шар: сучасний архів, меню контексту та м’які анімації. */
html { scroll-behavior: smooth; }
body { background-color: #070707; }
.archive-nav { box-shadow: 0 10px 32px rgba(0,0,0,.45) !important; }
.archive-nav__icon, .archive-button, .btn, .archive-chip, .filter-btn { transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.archive-nav__icon:hover, .archive-button:hover, .btn:hover, .archive-chip:hover, .filter-btn:hover { transform: translateY(-2px); }
.atlas-context-menu {
    width: min(1180px, calc(100% - 36px)); margin: 22px auto 0; position: relative; z-index: 2;
    border: 1px solid rgba(229,215,200,.15); background: rgba(11,11,12,.86); backdrop-filter: blur(14px);
}
.atlas-context-menu summary { padding: 14px 18px; color: #f2e8dd; cursor: pointer; font: 700 .78rem 'Cinzel', Georgia, serif; letter-spacing: .08em; }
.atlas-context-menu > div { display: grid; gap: 9px; padding: 0 18px 18px; color: #aaa097; }
.atlas-context-menu p { margin: 0; line-height: 1.55; }
.atlas-context-links { display: flex; flex-wrap: wrap; gap: 8px; }
.atlas-context-links a { padding: 6px 9px; border: 1px solid rgba(212,33,52,.35); color: #efe6dc; text-decoration: none; font-size: .82rem; }
.atlas-context-links a:hover { background: rgba(212,33,52,.16); }

.preview-related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.preview-related a { padding: 7px 9px; color: #eee4d9; border: 1px solid rgba(212,33,52,.4); background: rgba(212,33,52,.08); text-decoration: none; font-size: .82rem; }
.preview-related a:hover { border-color: #ff6576; background: rgba(212,33,52,.24); }

.lore-glossary { margin: 0 0 32px; padding: clamp(20px,4vw,34px); border: 1px solid var(--line, #2d2927); background: linear-gradient(135deg, rgba(30,12,15,.66), rgba(8,8,8,.94)); }
.lore-glossary h2 { margin: 8px 0 18px; color: #f1e8dc; }
.glossary-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.glossary-list button { padding: 13px; text-align: left; color: #eee4d9; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.03); font: 700 .9rem 'Cinzel', Georgia, serif; cursor: pointer; }
.glossary-list button:hover, .glossary-list button.active { border-color: #d42134; background: rgba(212,33,52,.13); }
.glossary-list p { grid-column: 1 / -1; margin: 4px 0 10px; padding: 12px 14px; color: #b8afa6; border-left: 3px solid #d42134; background: rgba(0,0,0,.28); line-height: 1.6; }

.timeline-arc-filter { position: sticky; top: 72px; z-index: 25; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px max(18px,5vw); background: rgba(4,4,4,.9); border-bottom: 1px solid rgba(212,33,52,.3); backdrop-filter: blur(12px); }
.timeline-arc-filter span { color: #b9afa6; font-size: .8rem; }
.timeline-arc-filter button { padding: 6px 9px; color: #e8ded3; border: 1px solid rgba(255,255,255,.15); background: transparent; cursor: pointer; font: 700 .7rem 'Cinzel', Georgia, serif; }
.timeline-arc-filter button.active, .timeline-arc-filter button:hover { border-color: #d42134; background: rgba(212,33,52,.16); }

.atlas-extra-pin { animation: atlasPinPulse 2.8s ease-in-out infinite; }
@keyframes atlasPinPulse { 50% { box-shadow: 0 0 0 8px rgba(212,33,52,.1), 0 0 24px rgba(212,33,52,.75); } }
.gallery-meta { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 5; display: grid; gap: 2px; padding: 10px; color: #f4ece2; background: rgba(4,4,4,.78); border-left: 2px solid #d42134; transform: translateY(125%); transition: transform .3s ease; pointer-events: none; }
.gallery-meta span, .gallery-meta small { color: #bfb4a9; font-size: .72rem; }
.shot-card:hover .gallery-meta, .shot-card:focus-within .gallery-meta { transform: translateY(0); }
.quiz-history { display: grid; gap: 7px; margin: 16px auto 0; color: #c7bdb3; }
.quiz-history button { width: fit-content; margin: auto; padding: 7px 10px; color: #f6ebe1; border: 1px solid rgba(212,33,52,.55); background: rgba(212,33,52,.14); cursor: pointer; }

@media (max-width: 700px) {
    .atlas-context-menu { width: calc(100% - 24px); }
    .glossary-list { grid-template-columns: 1fr; }
    .timeline-arc-filter { top: 60px; overflow-x: auto; flex-wrap: nowrap; }
    .timeline-arc-filter button { white-space: nowrap; }
    .gallery-meta { position: static; transform: none; margin: 0; }
}

/* RPG-досьє персонажа: оригінальний інтерфейс для архіву Berserk. */
#characterPreview.character-preview {
    position: fixed; inset: auto auto auto 50%; right: auto; top: 50%; z-index: 2000;
    width: min(1120px, calc(100vw - 36px)); height: min(760px, calc(100vh - 44px)); max-width: none;
    padding: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transform: translate(-50%, -46%) scale(.96); border: 1px solid #806f55;
    background:
        linear-gradient(135deg, rgba(84,55,29,.22), transparent 38%),
        radial-gradient(circle at 86% 10%, rgba(197,130,38,.16), transparent 28%), #16130f;
    box-shadow: 0 34px 90px rgba(0,0,0,.9), inset 0 0 0 3px rgba(210,174,106,.14), inset 0 0 42px rgba(0,0,0,.72);
    transition: opacity .32s ease, transform .38s cubic-bezier(.2,.85,.2,1);
}
#characterPreview.character-preview.active { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
#characterPreview .preview-close { z-index: 5; right: 18px; top: 14px; width: 38px; height: 38px; color: #ffe5a4; border: 1px solid #a87c35; border-radius: 6px; background: linear-gradient(#4e3a1f,#20170d); box-shadow: 0 3px 0 #080604; }
#characterPreview .preview-close:hover { background: #7c311f; border-color: #f7bf5d; transform: rotate(0) scale(1.06); }
.dossier-topline { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 70px 0 22px; color: #e7c986; border-bottom: 1px solid rgba(216,172,93,.34); background: rgba(9,7,4,.62); font: 700 .72rem 'Cinzel', Georgia, serif; letter-spacing: .13em; }
.dossier-topline span:last-child { color: #e9dfcb; letter-spacing: .06em; }
.dossier-layout { display: grid; grid-template-columns: minmax(290px,.78fr) minmax(0,1.35fr); height: calc(100% - 48px); }
.dossier-portrait { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; overflow: hidden; border-right: 1px solid rgba(216,172,93,.28); background: radial-gradient(circle at 50% 35%, rgba(192,131,42,.18), transparent 47%), linear-gradient(145deg,#21180f,#0b0907); }
.dossier-portrait::before, .dossier-portrait::after { content: ""; position: absolute; width: 340px; height: 340px; left: 50%; top: 37%; border: 1px solid rgba(224,179,93,.36); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.dossier-portrait::after { width: 300px; height: 300px; border-style: dashed; animation: dossierRuneSpin 34s linear infinite; }
@keyframes dossierRuneSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.dossier-portrait__runes { position: absolute; inset: 44px 25px 112px; border: 10px double rgba(191,143,65,.58); clip-path: polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%); pointer-events: none; }
.dossier-portrait__runes::after { content: '✦'; position: absolute; top: -22px; left: 50%; display: grid; place-items: center; width: 38px; height: 38px; transform: translateX(-50%); color: #ffe1a0; border: 1px solid rgba(224,170,71,.75); background: #171008; box-shadow: 0 0 18px rgba(208,138,38,.3); font-size: 1.05rem; }
#characterPreview.faction-demons .dossier-portrait__runes { border-color: rgba(177,33,46,.78); box-shadow: 0 0 30px rgba(172,12,28,.22); }
#characterPreview.faction-demons .dossier-portrait__runes::after { content: '☾'; color: #ff8a8a; border-color: #9e2633; }
#characterPreview.faction-hawk .dossier-portrait__runes { border-color: rgba(211,178,99,.78); }
#characterPreview.faction-hawk .dossier-portrait__runes::after { content: '◆'; }
#characterPreview.faction-new-party .dossier-portrait__runes { border-color: rgba(110,163,154,.78); }
#characterPreview.faction-new-party .dossier-portrait__runes::after { content: '✧'; color: #a9eee4; border-color: #578f89; }
#characterPreview .dossier-portrait img { position: relative; z-index: 1; width: 100%; height: min(480px,58vh); margin: 0; object-fit: cover; object-position: center top; border: 1px solid rgba(233,192,110,.66); filter: saturate(.82) contrast(1.12); box-shadow: 0 16px 28px rgba(0,0,0,.58); }
.dossier-nameplate { position: relative; z-index: 2; margin: -18px 12px 0; padding: 13px 16px; text-align: center; border: 1px solid #a77c39; background: linear-gradient(90deg,#20170e,#5a3f1f,#20170e); box-shadow: 0 4px 0 #080604; }
#characterPreview .dossier-nameplate h2 { margin: 0; color: #fae2ad; font: 700 clamp(1.25rem,2.2vw,2rem)/1 'Cinzel',Georgia,serif; letter-spacing: .08em; }
#characterPreview .dossier-nameplate p { margin: 7px 0 0; color: #cfad70; font: 700 .68rem 'Cinzel',Georgia,serif; letter-spacing: .12em; }
#characterPreview .preview-traits { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
#characterPreview .preview-traits span { padding: 6px 8px; color: #ddc497; border: 1px solid rgba(216,172,93,.3); background: rgba(0,0,0,.28); font-size: .72rem; }
.dossier-content { min-width: 0; display: flex; flex-direction: column; padding: 18px; overflow-y: auto; background: linear-gradient(135deg,rgba(228,209,170,.05),transparent 40%), #18140f; }
.dossier-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 16px; padding: 5px; border: 1px solid rgba(216,172,93,.42); background: rgba(0,0,0,.35); }
.dossier-tabs button { min-height: 42px; color: #cbb892; border: 1px solid transparent; background: transparent; cursor: pointer; font: 700 clamp(.62rem,1.3vw,.78rem) 'Cinzel',Georgia,serif; letter-spacing: .04em; }
.dossier-tabs button.active, .dossier-tabs button:hover { color: #ffdfa0; border-color: #ab7d3a; background: linear-gradient(#5c421f,#25180d); box-shadow: inset 0 0 18px rgba(234,177,71,.12); }
.dossier-panel { display: none; animation: dossierTabIn .24s ease both; }
.dossier-panel.active { display: block; }
@keyframes dossierTabIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.dossier-kicker { color: #b99356; font: 700 .7rem 'Cinzel',Georgia,serif; letter-spacing: .13em; }
#characterPreview .dossier-panel h3 { margin: 8px 0 12px; color: #f3dfba; font: 700 1.45rem 'Cinzel',Georgia,serif; }
#characterPreview .dossier-panel p#previewDesc { color: #c9bca8; text-align: left; line-height: 1.72; }
#characterPreview blockquote { margin: 18px 0 0; color: #dbc8a8; border: 1px solid rgba(216,172,93,.25); border-left: 3px solid #c48c3d; background: rgba(0,0,0,.24); }
#characterPreview .preview-info { display: grid; gap: 13px; margin: 0; padding: 18px; border: 1px solid rgba(216,172,93,.27); background: rgba(0,0,0,.18); }
#characterPreview .preview-info p { display: grid; grid-template-columns: 112px 1fr 42px; gap: 9px; align-items: center; margin: 0; color: #edd9b5; }
#characterPreview .preview-info b { color: #b99c6e; }
.dossier-note { margin-top: 12px; color: #92836e; font-size: .82rem; }
#characterPreview .preview-related { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#characterPreview .preview-related a { padding: 13px; color: #e9d8b7; border-color: rgba(216,172,93,.38); background: rgba(112,74,27,.17); }
.dossier-arsenal { display: grid; gap: 9px; }
.dossier-arsenal article { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(216,172,93,.23); background: rgba(0,0,0,.2); }
.dossier-arsenal span { display: grid; place-items: center; width: 30px; height: 30px; color: #f4d999; border: 1px solid #9c7235; border-radius: 50%; font: 700 .7rem 'Cinzel',Georgia,serif; }
.dossier-arsenal b { color: #dfceb1; font-family: 'Cinzel',Georgia,serif; }
.dossier-arsenal small { color: #8f826e; font-size: .68rem; }
@media (max-width: 760px) {
    #characterPreview.character-preview { width: calc(100vw - 18px); height: calc(100vh - 18px); }
    .dossier-layout { grid-template-columns: 1fr; overflow-y: auto; }
    .dossier-portrait { padding: 16px; border-right: 0; border-bottom: 1px solid rgba(216,172,93,.28); }
    #characterPreview .dossier-portrait img { height: 300px; }
    .dossier-content { overflow: visible; }
    .dossier-tabs { position: sticky; top: -18px; z-index: 3; }
    #characterPreview .preview-related { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .dossier-portrait::after { animation: none; } .dossier-panel { animation: none; } }

/* Точна сітка досьє: без наслідування від основного меню сайту. */
@media (min-width: 761px) {
    #characterPreview.character-preview { height: min(660px, calc(100vh - 38px)); }
    .dossier-layout { grid-template-columns: 386px minmax(0, 1fr); }
    #characterPreview .dossier-portrait img { height: min(402px, 48vh); }
}
#characterPreview .dossier-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%; min-height: 0; margin: 0 0 18px !important; padding: 5px;
    position: static !important; inset: auto !important; transform: none !important;
    border: 1px solid rgba(216,172,93,.42); background: rgba(0,0,0,.35); box-shadow: none !important;
}
#characterPreview .dossier-tabs::before, #characterPreview .dossier-tabs::after { display: none !important; }
.dossier-content { padding: 22px 20px 20px; }
.dossier-panel { min-height: 0; }
.dossier-arsenal { gap: 8px; }
.dossier-arsenal article { min-height: 58px; }
.dossier-archive-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.dossier-archive-summary span { display: grid; gap: 5px; padding: 10px 11px; color: #96866e; border: 1px solid rgba(216,172,93,.2); background: rgba(255,255,255,.025); font-size: .68rem; }
.dossier-archive-summary b { color: #d9c29a; font: 700 .7rem/1.35 'Cinzel', Georgia, serif; }
.dossier-portrait { padding: 22px 22px 18px; }
.dossier-nameplate { margin-inline: 10px; }
@media (max-width: 760px) { .dossier-archive-summary { grid-template-columns: 1fr; } }

/* Розширені ігрові деталі досьє. */
.dossier-topline__actions { display: flex; align-items: center; gap: 8px; }
.dossier-topline__actions button { min-height: 28px; padding: 4px 8px; color: #ddc590; border: 1px solid rgba(216,172,93,.35); background: rgba(0,0,0,.24); cursor: pointer; font: 700 .64rem 'Cinzel', Georgia, serif; letter-spacing: .03em; }
.dossier-topline__actions button:hover, .dossier-topline__actions button[aria-pressed="true"] { color: #ffe1a0; border-color: #e1a847; background: rgba(171,112,26,.22); }
.dossier-collect { position: relative; z-index: 2; width: 100%; margin-top: 14px; padding: 10px; color: #d7c097; border: 1px solid rgba(216,172,93,.42); background: rgba(0,0,0,.25); cursor: pointer; font: 700 .7rem 'Cinzel', Georgia, serif; letter-spacing: .04em; }
.dossier-collect:hover, .dossier-collect.saved { color: #ffdfa0; border-color: #e1a847; background: linear-gradient(90deg,rgba(119,73,18,.22),rgba(222,159,53,.15),rgba(119,73,18,.22)); }
.dossier-tabs button span { display: inline-block; margin-right: 5px; color: #d4a253; font-size: 1.05em; }
.dossier-timeline { display: grid; gap: 7px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(216,172,93,.2); }
.dossier-timeline span { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; color: #bfb09b; font-size: .82rem; }
.dossier-timeline i { display: grid; place-items: center; width: 25px; height: 25px; color: #e2c17e; border: 1px solid rgba(216,172,93,.5); border-radius: 50%; font: 700 .6rem 'Cinzel', Georgia, serif; font-style: normal; }
.preview-relationship-map { display: grid; gap: 9px; margin-bottom: 14px; }
.preview-relationship-map div { display: grid; grid-template-columns: minmax(74px,1fr) 1.4fr minmax(74px,1fr); align-items: center; gap: 7px; text-align: center; }
.preview-relationship-map b { padding: 9px 5px; color: #ead7b5; border: 1px solid rgba(216,172,93,.35); background: rgba(0,0,0,.2); font: 700 .7rem 'Cinzel', Georgia, serif; }
.preview-relationship-map i { position: relative; color: #a9926e; font-size: .68rem; font-style: normal; }
.preview-relationship-map i::before, .preview-relationship-map i::after { content:""; position: absolute; top: 50%; width: 14%; height: 1px; background: #9d7138; }
.preview-relationship-map i::before { left: 0; } .preview-relationship-map i::after { right: 0; }
.dossier-arsenal article { cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.dossier-arsenal article:hover, .dossier-arsenal article.active { border-color: rgba(234,180,87,.78); background: rgba(146,94,25,.18); transform: translateX(3px); }
.dossier-arsenal article p { display: none; grid-column: 2 / -1; margin: 0; color: #b7a68e; font-size: .8rem; line-height: 1.5; }
.dossier-arsenal article.active p { display: block; }
#characterPreview.spoiler-safe #previewStatus { color: transparent; user-select: none; }
#characterPreview.spoiler-safe #previewStatus::after { content: '◌ Приховано до вимкнення режиму'; color: #c4af8b; }
#characterPreview.spoiler-safe [data-dossier-panel="arsenal"] .dossier-arsenal { filter: blur(7px); user-select: none; pointer-events: none; }
#characterPreview.spoiler-safe [data-dossier-panel="bio"] #previewDesc { filter: blur(6px); user-select: none; }
#characterPreview.spoiler-safe [data-dossier-panel="bio"]::after { content: 'Опис прихований режимом без спойлерів.'; display: block; margin-top: -22px; color: #d9c195; font: 700 .78rem 'Cinzel', Georgia, serif; }
.dossier-portrait::after { will-change: transform; }
#characterPreview .dossier-portrait img { transition: transform .22s ease, filter .22s ease; transform: translate(var(--portrait-x, 0), var(--portrait-y, 0)) scale(var(--portrait-scale, 1)); }
#characterPreview.faction-demons .dossier-portrait::before { border-color: rgba(197,34,47,.75); box-shadow: 0 0 34px rgba(185,16,31,.28); }
#characterPreview.faction-hawk .dossier-portrait::before { border-color: rgba(231,222,201,.6); box-shadow: 0 0 30px rgba(216,211,192,.16); }
#characterPreview.faction-new-party .dossier-portrait::before { border-color: rgba(184,99,53,.68); box-shadow: 0 0 32px rgba(194,91,28,.18); }
@media (max-width: 760px) { .dossier-topline { padding-left: 14px; } .dossier-topline__actions { gap: 4px; } .dossier-topline__actions button:first-of-type { font-size: 0; } .dossier-topline__actions button:first-of-type::after { content:'◉'; font-size: .75rem; } .preview-relationship-map div { grid-template-columns: 1fr; } .preview-relationship-map i::before, .preview-relationship-map i::after { display:none; } }
.quiz-achievements { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.quiz-achievements span { padding: 7px 10px; color: #f7eee5; border: 1px solid rgba(212,33,52,.65); background: rgba(212,33,52,.12); font: 700 .75rem 'Cinzel', Georgia, serif; }
.mood-controls { margin: 14px 0; }
.mood-controls .archive-chip { cursor: pointer; }
.mood-controls .archive-chip.active { border-color: var(--archive-red); color: #fff; background: rgba(212,33,52,.2); }

@media (max-width: 660px) {
    .quote-author-filter { width: 100%; margin: 10px 0 0; }
    .relation-key { gap: 8px 14px; }
}

/* Єдина сітка: однакові краї, ритм та панелі у всьому архіві. */
:root {
    --archive-width: 1240px;
    --archive-gutter: clamp(16px, 4vw, 56px);
    --archive-space: clamp(32px, 5vw, 76px);
    --archive-panel: linear-gradient(145deg, rgba(21,18,15,.96), rgba(6,6,6,.97));
}

main,
.page-header,
.controls-container,
.main-content,
.quotes-container,
.reviews-feed,
.gallery-grid,
.anime-cinema-wrapper,
.comparison-panel,
.character-hero,
.lore-glossary,
.timeline-content {
    max-width: var(--archive-width);
}

.archive-page > main { width: 100%; max-width: none; }

.page-header,
.controls-container,
.main-content,
.quotes-container,
.reviews-feed,
.gallery-grid,
.anime-cinema-wrapper,
.comparison-panel,
.character-hero,
.lore-glossary,
.timeline-content {
    width: min(calc(100% - (var(--archive-gutter) * 2)), var(--archive-width));
    margin-inline: auto !important;
}

.page-header {
    padding-block: clamp(44px, 7vw, 88px);
    text-align: center;
}

.page-header p,
.archive-page-hero p,
.quotes-hero p,
.anime-header p {
    max-width: 680px;
    margin-inline: auto;
    line-height: 1.7;
}

.grid,
.archive-grid,
.journey-grid,
.faction-grid,
.gallery-grid {
    gap: clamp(16px, 2vw, 28px);
}

.card,
.portal-card,
.site-panel,
.article-block,
.review-card,
.quote-block,
.timeline-content,
.arc-row,
.ost-player,
.struggler-card {
    box-shadow: 0 16px 38px rgba(0,0,0,.42);
}

.card:focus-within,
.portal-card:focus-within,
.archive-card:focus-within,
.journey-card:focus-within,
.faction-card:focus-within {
    outline: 2px solid rgba(224,42,54,.78);
    outline-offset: 3px;
}

button,
.btn,
.archive-button,
.preview-related a,
.dossier-arsenal article {
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #e7b85c;
    outline-offset: 3px;
}

/* Заповнює нижню частину ігрового досьє та тримає обидві колонки на одній лінії. */
#characterPreview .dossier-portrait { min-height: 0; }
#characterPreview .dossier-collect { margin-top: auto; }
#characterPreview .dossier-content::after {
    content: 'АРХІВ МІДЛЕНДА · ЗАПИС ПЕРЕВІРЕНИЙ';
    display: block;
    margin-top: auto;
    padding-top: 16px;
    color: rgba(216,172,93,.52);
    border-top: 1px solid rgba(216,172,93,.18);
    font: 700 .62rem 'Cinzel', Georgia, serif;
    letter-spacing: .14em;
}

@media (max-width: 980px) {
    .page-header,
    .controls-container,
    .main-content,
    .quotes-container,
    .reviews-feed,
    .gallery-grid,
    .anime-cinema-wrapper,
    .comparison-panel,
    .character-hero,
    .lore-glossary,
    .timeline-content {
        width: min(calc(100% - 32px), var(--archive-width));
    }
}

@media (max-width: 660px) {
    .page-header { padding-block: 42px; }
    .grid { padding: 32px 16px; }
    .page-header h1 { letter-spacing: .035em; }
    .card:hover, .portal-card:hover { transform: translateY(-4px); }
    #characterPreview .dossier-content::after { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Особистий прогрес, міні-випробування та атмосферний режим. */
.progress-panel__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.progress-panel__head .archive-heading { margin-bottom: 8px; }
.progress-panel__number { color: #e8bd65; font: 700 clamp(2.5rem, 6vw, 5.6rem)/.8 var(--serif-display, 'Cinzel', serif); text-shadow: 0 0 24px rgba(212,33,52,.32); }
.archive-progress-bar { height: 10px; margin-top: 28px; overflow: hidden; border: 1px solid rgba(230,185,96,.35); background: rgba(0,0,0,.44); }
.archive-progress-bar i { display: block; height: 100%; background: linear-gradient(90deg, #77101b, #db3d3d 56%, #e7b85c); box-shadow: 0 0 18px rgba(220,50,52,.75); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.archive-progress-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 14px; background: var(--line, #312c28); border: 1px solid var(--line, #312c28); }
.archive-progress-stats span { padding: 14px; color: #aaa096; background: rgba(10,9,8,.94); font-size: .84rem; }
.archive-progress-stats b { color: #f0d59d; font: 700 1.1rem 'Cinzel', Georgia, serif; }
.mini-game-grid { align-items: stretch; }
.mini-game-card { display: flex; flex-direction: column; min-height: 280px; text-decoration: none; }
.mini-game-card > span { color: #d6a956; font: 700 .7rem 'Cinzel', Georgia, serif; letter-spacing: .12em; }
.mini-game-card h3 { margin: 16px 0 10px; color: #f3e6d0; font: 700 1.45rem 'Cinzel', Georgia, serif; }
.mini-game-card p { color: #b7aca0; line-height: 1.65; }
.mini-game-card--link b { margin-top: auto; color: #e6ba61; }
.mini-game-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: auto; }
.mini-game-options button { padding: 9px 6px; color: #d7ccbc; border: 1px solid rgba(216,172,93,.27); background: rgba(0,0,0,.26); cursor: pointer; font: 700 .7rem 'Cinzel', Georgia, serif; }
.mini-game-options button:hover { color: #fff1ca; border-color: #d9a84a; background: rgba(151,85,18,.25); }
.mini-game-options button.correct { border-color: #62a871; background: rgba(47,132,67,.22); }.mini-game-options button.wrong { border-color: #c3434e; background: rgba(177,25,37,.22); }
.mini-game-card small { min-height: 20px; margin-top: 12px; color: #d7be8e; }
.gallery-save { position: absolute; z-index: 8; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; color: #f3deb1; border: 1px solid rgba(226,180,88,.65); background: rgba(7,6,5,.72); cursor: pointer; font-size: 1.15rem; opacity: 0; transform: translateY(-6px); }
.shot-card:hover .gallery-save, .shot-card:focus-within .gallery-save, .gallery-save.saved { opacity: 1; transform: none; }.gallery-save.saved { color: #fff0b7; background: rgba(150,81,14,.78); }
.atmosphere-control { position: fixed; z-index: 5100; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); }
.atmosphere-trigger { display: grid; place-items: center; width: 46px; height: 46px; color: #f0d99e; border: 1px solid rgba(226,177,75,.76); border-radius: 50% !important; background: radial-gradient(circle at 35% 30%, #643b1c, #17100c 68%); box-shadow: 0 8px 28px rgba(0,0,0,.62), 0 0 20px rgba(191,58,39,.2); cursor: pointer; font-size: 1.1rem; }
.atmosphere-trigger:hover { transform: translateY(-3px) rotate(-6deg); box-shadow: 0 10px 30px rgba(0,0,0,.76), 0 0 24px rgba(224,74,50,.38); }
.atmosphere-panel { position: absolute; right: 0; bottom: 58px; width: 230px; padding: 15px; color: #e4d5c0; border: 1px solid rgba(226,177,75,.55); background: linear-gradient(145deg, rgba(28,20,14,.98), rgba(5,5,5,.99)); box-shadow: 0 18px 45px rgba(0,0,0,.68); }
.atmosphere-panel[hidden] { display: none; }.atmosphere-panel > b { display:block; color:#f4d993; font:700 .85rem 'Cinzel', Georgia, serif; letter-spacing:.1em; }.atmosphere-panel > span { display:block; margin:7px 0 13px; color:#9e9387; font-size:.72rem; line-height:1.45; }
.atmosphere-panel div { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.atmosphere-panel button { padding:8px 4px; color:#dccaa8; border:1px solid rgba(216,172,93,.25); background:rgba(255,255,255,.025); cursor:pointer; font:700 .63rem 'Cinzel', Georgia, serif; }.atmosphere-panel button:hover, .atmosphere-panel button.active { color:#fff0c4; border-color:#d9a84a; background:rgba(143,82,19,.28); }.atmosphere-panel > button:last-child { width:100%; margin-top:8px; }
@media (max-width: 660px) { .progress-panel__head { align-items: start; flex-direction: column; }.archive-progress-stats { grid-template-columns: 1fr; }.mini-game-options { grid-template-columns: 1fr; }.gallery-save { opacity: 1; transform: none; }.atmosphere-control { right: 12px; bottom: 12px; } }

/* Лор використовує власну двоколонну верстку: не обмежуємо її загальними контейнерами. */
.lore-main-wrapper > .archive-nav { width: 100%; max-width: none; }
.lore-main-wrapper .layout-container { width: min(calc(100% - 40px), 1320px); max-width: 1320px; margin: 50px auto 80px; gap: clamp(28px, 4vw, 60px); }
.lore-main-wrapper .main-content { width: auto; max-width: none; margin: 0 !important; flex: 1 1 0; }
.lore-main-wrapper .sidebar { flex: 0 0 280px; align-self: flex-start; }
.lore-main-wrapper .lore-glossary { width: 100%; max-width: none; margin: 0 0 32px !important; }
@media (max-width: 900px) { .lore-main-wrapper .layout-container { width: min(calc(100% - 28px), 760px); }.lore-main-wrapper .sidebar { flex-basis: auto; } }

/* Хронологія: великі картки замість дрібної горизонтальної стрічки з пустотами. */
body:has(.timeline-container) { overflow-y: auto !important; }
.timeline-main-wrapper { height: auto !important; min-height: 100vh; }
.timeline-main-wrapper .floating-header { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; padding: 52px 20px 28px !important; background: linear-gradient(to bottom, rgba(8,8,8,.94), transparent) !important; pointer-events: auto; }
.timeline-main-wrapper .floating-header h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
.timeline-main-wrapper .timeline-container { height: auto !important; min-height: 0; overflow: visible !important; }
.timeline-main-wrapper .timeline-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(calc(100% - 48px), 1220px); height: auto !important; margin: 0 auto; padding: 24px 0 116px !important; gap: 24px; }
.timeline-main-wrapper .timeline-track::before { display: none; }
.timeline-main-wrapper .timeline-item { min-width: 0 !important; max-width: none !important; display: flex; flex-direction: column; gap: 0; opacity: 1; transform: none; cursor: pointer; }
.timeline-main-wrapper .timeline-item:hover, .timeline-main-wrapper .timeline-item.visible { opacity: 1; transform: translateY(-5px); }
.timeline-main-wrapper .timeline-year,
.timeline-main-wrapper .timeline-item:nth-child(odd) .timeline-year,
.timeline-main-wrapper .timeline-item:nth-child(even) .timeline-year { display: flex; align-items: center; gap: 10px; order: 0; grid-row: auto; align-self: auto; margin: 0 0 8px; text-align: left; font-size: clamp(1.25rem, 2.3vw, 1.8rem); }
.timeline-main-wrapper .timeline-year::before { content: ''; display: inline-block; width: 10px; height: 10px; border: 2px solid #f2d09a; border-radius: 50%; background: #a90f1b; box-shadow: 0 0 14px #bb1422; }
.timeline-main-wrapper .timeline-dot { display: none; }
.timeline-main-wrapper .timeline-content,
.timeline-main-wrapper .timeline-item:nth-child(odd) .timeline-content,
.timeline-main-wrapper .timeline-item:nth-child(even) .timeline-content { order: 1; grid-row: auto; align-self: stretch; min-height: 390px; padding: 22px; border: 1px solid rgba(197,40,50,.44); border-top: 3px solid #a60e19; background: linear-gradient(145deg, rgba(24,17,18,.98), rgba(4,4,4,.98)); pointer-events: auto; }
.timeline-main-wrapper .timeline-content img { height: 210px; margin-bottom: 18px; filter: grayscale(.42) contrast(1.08); }
.timeline-main-wrapper .timeline-content h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.timeline-main-wrapper .timeline-content p { font-size: 1rem; line-height: 1.65; -webkit-line-clamp: 3; }
.timeline-main-wrapper .click-hint { margin-top: 15px; color: #e14248; }
@media (max-width: 760px) { .timeline-main-wrapper .timeline-track { grid-template-columns: 1fr; width: min(calc(100% - 28px), 620px); padding-bottom: 92px !important; }.timeline-main-wrapper .timeline-content, .timeline-main-wrapper .timeline-item:nth-child(odd) .timeline-content, .timeline-main-wrapper .timeline-item:nth-child(even) .timeline-content { min-height: 0; }.timeline-main-wrapper .timeline-content img { height: 190px; } }

/* Main page — cinematic archive journey */
body.home-page {
    --home-red: #d32339;
    --home-red-dark: #6f0914;
    --home-gold: #efc16f;
    --home-ink: #070708;
    --home-panel: rgba(12, 11, 12, .94);
    --home-line: rgba(255, 255, 255, .12);
}

.home-page .archive-section {
    position: relative;
    width: min(1280px, calc(100% - 48px));
    margin: clamp(82px, 9vw, 132px) auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.home-page .archive-section::before {
    top: -64px;
    left: -4px;
    z-index: -1;
    color: rgba(168, 17, 31, .26);
    font: 800 clamp(5rem, 10vw, 9rem)/1 Georgia, serif;
    letter-spacing: -.08em;
}

.home-page .home-section-head,
.home-page .progress-panel__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 32px;
}

.home-page .home-section-sigil {
    display: grid;
    width: 84px;
    height: 84px;
    place-items: center;
    border: 1px solid rgba(211, 35, 57, .55);
    border-radius: 50%;
    color: var(--home-red);
    background: radial-gradient(circle, rgba(211, 35, 57, .17), transparent 66%);
    box-shadow: 0 0 38px rgba(211, 35, 57, .12), inset 0 0 26px rgba(211, 35, 57, .08);
    font-size: 2rem;
}

.home-page .archive-kicker {
    color: var(--home-red);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.home-page .archive-heading {
    max-width: 860px;
    margin: 8px 0 16px;
    color: #f5f2ee;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: .9;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.home-page .archive-lead {
    max-width: 760px;
    margin: 0;
    color: #aaa5a2;
    font-size: clamp(.98rem, 1.35vw, 1.12rem);
    line-height: 1.75;
}

.home-page .journey-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 42px;
    border: 0;
    background: transparent;
}

.home-page .journey-card {
    position: relative;
    display: flex;
    min-height: 480px;
    padding: 30px;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background-color: #090909;
    background-position: center 18%;
    background-size: 112%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background-size .7s ease, box-shadow .45s ease;
}

.home-page .journey-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 18%, rgba(5,5,6,.25) 48%, rgba(5,5,6,.98) 100%), linear-gradient(90deg, rgba(105, 5, 17, .16), transparent 55%);
}

.home-page .journey-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.09) 48%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .8s ease;
}

.home-page .journey-card:hover {
    transform: translateY(-10px);
    border-color: rgba(211, 35, 57, .72);
    background-size: 120%;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .55), 0 0 35px rgba(174, 13, 32, .13);
}

.home-page .journey-card:hover::after { transform: translateX(120%); }

.home-page .journey-card__index {
    position: absolute;
    top: 24px;
    right: 26px;
    color: rgba(255,255,255,.56);
    font: 600 .76rem/1 Arial, sans-serif;
    letter-spacing: .16em;
}

.home-page .journey-card__content { position: relative; z-index: 1; }
.home-page .journey-card h3 { margin: 7px 0 10px; color: #fff; font-size: clamp(1.75rem, 2.5vw, 2.55rem); line-height: 1; }
.home-page .journey-card p { margin: 0 0 20px; color: #aaa6a3; font-size: .95rem; }
.home-page .journey-card b,
.home-page .mini-game-card b { color: #ef4a55; font: 700 .72rem/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.home-page .journey-card i,
.home-page .mini-game-card i,
.home-page .archive-chip i { display: inline-block; margin-left: 5px; font-style: normal; transition: transform .25s ease; }
.home-page .journey-card:hover i,
.home-page .mini-game-card:hover i,
.home-page .archive-chip:hover i { transform: translate(3px, -3px); }

.home-page .archive-stats {
    width: min(1280px, calc(100% - 48px));
    margin: -24px auto clamp(88px, 10vw, 140px);
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(19,17,18,.96), rgba(6,6,7,.96));
    box-shadow: 0 28px 80px rgba(0,0,0,.26);
}

.home-page .archive-stat { min-height: 118px; padding: 28px 30px; border-color: var(--home-line); }
.home-page .archive-stat b { color: #f3eee8; font-size: clamp(2rem, 3.3vw, 3.2rem); }
.home-page .archive-stat small { display: block; margin-bottom: 6px; color: #827b78; font: 700 .62rem/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.home-page .archive-stat span { color: #a9a3a0; }

.home-page .archive-progress-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 5vw, 64px);
    border: 1px solid rgba(211, 35, 57, .28);
    border-radius: 24px;
    background: radial-gradient(circle at 78% 20%, rgba(160,17,34,.22), transparent 31%), linear-gradient(125deg, rgba(20,17,18,.98), rgba(6,6,7,.98));
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
}

.home-page .archive-progress-panel::after {
    content: '𒉭';
    position: absolute;
    right: 19%;
    bottom: -88px;
    color: rgba(181, 21, 39, .06);
    font-size: 22rem;
    line-height: 1;
    transform: rotate(-12deg);
    pointer-events: none;
}

.home-page .progress-orbit {
    --archive-progress: 0deg;
    position: relative;
    z-index: 1;
    display: grid;
    width: 154px;
    height: 154px;
    flex: 0 0 auto;
    place-content: center;
    border-radius: 50%;
    background: conic-gradient(var(--home-gold) 0 var(--archive-progress), rgba(255,255,255,.09) var(--archive-progress) 360deg);
    box-shadow: 0 0 42px rgba(239,193,111,.12);
    text-align: center;
}

.home-page .progress-orbit::before { content:''; position:absolute; inset:8px; border-radius:50%; background:#0d0c0d; border:1px solid rgba(255,255,255,.08); }
.home-page .progress-orbit > * { position: relative; z-index: 1; }
.home-page .progress-orbit b { color: var(--home-gold); font-size: 2.15rem; line-height: 1; }
.home-page .progress-orbit small { margin-top: 6px; color: #817b77; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.home-page .archive-progress-bar { height: 8px; margin-top: 34px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); }
.home-page .archive-progress-bar i { display:block; height:100%; border-radius:inherit; background: linear-gradient(90deg, #8c0917, #e63243 65%, var(--home-gold)); box-shadow: 0 0 24px rgba(221,41,59,.38); }
.home-page .archive-progress-stats { margin-top: 14px; border-color: var(--home-line); background: var(--home-line); }

.home-page .continue-card {
    gap: 24px;
    margin-top: 18px;
    padding: 26px 30px;
    border: 1px solid rgba(211,35,57,.28);
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(104,8,20,.28), rgba(12,11,12,.92));
}
.home-page .continue-card .btn-primary { min-width: 178px; justify-content: center; }

.home-page .mini-game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
    border: 0;
    background: transparent;
}

.home-page .mini-game-card {
    position: relative;
    display: flex;
    min-height: 340px;
    padding: 32px;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background-position: center;
    background-size: cover;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    transition: transform .4s ease, border-color .3s ease, box-shadow .4s ease;
}
.home-page .mini-game-card::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(5,5,6,.1),rgba(5,5,6,.98) 84%); }
.home-page .mini-game-card--quote { background-image: url('images/black_swordsman.jpg'); }
.home-page .mini-game-card--quiz { background-image: url('images/quiz-card.png'); }
.home-page .mini-game-card--story { background-image: url('images/eclipse.jpg'); }
.home-page .mini-game-card:hover { transform: translateY(-8px); border-color: rgba(211,35,57,.65); box-shadow: 0 28px 75px rgba(0,0,0,.5); }
.home-page .mini-game-card > span { color: var(--home-gold); font: 700 .68rem/1 Arial,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.home-page .mini-game-card h3 { margin: 12px 0; color:#fff; font-size:clamp(1.55rem,2vw,2rem); line-height:1.08; }
.home-page .mini-game-card p { margin: 0 0 24px; color:#aaa5a2; line-height:1.6; }
.home-page .mini-game-options { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.home-page .mini-game-options button { flex:1 1 auto; min-width:75px; padding:10px 12px; border:1px solid rgba(239,193,111,.35); color:#ddd6cd; background:rgba(0,0,0,.55); transition:.25s ease; }
.home-page .mini-game-options button:hover { border-color:var(--home-gold); color:#fff; background:rgba(124,15,28,.65); }

.home-page .eclipse-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 470px;
    padding: clamp(38px, 6vw, 76px);
    overflow: hidden;
    border: 1px solid rgba(211,35,57,.34);
    border-radius: 24px;
    background: linear-gradient(90deg, rgba(6,6,7,.98) 3%, rgba(18,5,8,.84) 50%, rgba(8,6,7,.5)), url('images/eclipse.jpg') center/cover;
    box-shadow: 0 35px 100px rgba(0,0,0,.42), inset 0 0 90px rgba(0,0,0,.5);
}
.home-page .eclipse-feature::before { top: 24px; left: 30px; z-index:0; color:rgba(255,255,255,.08); }
.home-page .eclipse-feature__content { position:relative; z-index:1; max-width:760px; }
.home-page .eclipse-feature .archive-heading { text-shadow:0 8px 35px rgba(0,0,0,.8); }
.home-page .archive-chip-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.home-page .archive-chip { padding:11px 14px; border:1px solid rgba(255,255,255,.17); border-radius:999px; color:#d3cdca; background:rgba(0,0,0,.42); font:700 .65rem/1 Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; transition:.25s ease; }
.home-page .archive-chip:hover { border-color:var(--home-red); color:#fff; background:rgba(132,10,25,.58); }
.home-page .eclipse-feature__seal { position:relative; z-index:1; display:grid; width:180px; height:180px; margin-left:40px; place-content:center; border:1px solid rgba(239,193,111,.35); border-radius:50%; color:var(--home-red); background:radial-gradient(circle,rgba(117,8,21,.58),rgba(0,0,0,.7) 68%); box-shadow:0 0 70px rgba(193,16,37,.22),inset 0 0 35px rgba(239,193,111,.08); text-align:center; }
.home-page .eclipse-feature__seal span { font-size:4rem; line-height:1; }
.home-page .eclipse-feature__seal small { margin-top:10px; color:var(--home-gold); font:700 .58rem/1 Arial,sans-serif; letter-spacing:.2em; }

@keyframes homeArchiveRise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.home-page .journey-section,
.home-page .archive-progress-section,
.home-page .home-games-section,
.home-page .eclipse-feature { animation:homeArchiveRise .8s both; }

@media (max-width: 900px) {
    .home-page .journey-grid,
    .home-page .mini-game-grid { grid-template-columns:1fr 1fr; }
    .home-page .journey-card:last-child,
    .home-page .mini-game-card:last-child { grid-column:1 / -1; }
    .home-page .eclipse-feature { grid-template-columns:1fr; }
    .home-page .eclipse-feature__seal { width:130px; height:130px; margin:34px 0 0; }
}

@media (max-width: 660px) {
    .home-page .archive-section,
    .home-page .archive-stats { width:min(100% - 28px, 1280px); }
    .home-page .home-section-head,
    .home-page .progress-panel__head { grid-template-columns:1fr; align-items:start; }
    .home-page .home-section-sigil { display:none; }
    .home-page .journey-grid,
    .home-page .mini-game-grid { grid-template-columns:1fr; }
    .home-page .journey-card:last-child,
    .home-page .mini-game-card:last-child { grid-column:auto; }
    .home-page .journey-card { min-height:420px; padding:24px; background-size:cover; }
    .home-page .mini-game-card { min-height:310px; padding:24px; }
    .home-page .archive-progress-panel,
    .home-page .eclipse-feature { padding:28px 22px; border-radius:18px; }
    .home-page .progress-orbit { width:126px; height:126px; }
    .home-page .archive-progress-meta { grid-template-columns:1fr; }
    .home-page .continue-card { align-items:stretch; flex-direction:column; }
    .home-page .continue-card .btn-primary { width:100%; }
    .home-page .eclipse-feature { min-height:500px; background-position:62% center; }
    .home-page .archive-chip { padding:10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .journey-section,
    .home-page .archive-progress-section,
    .home-page .home-games-section,
    .home-page .eclipse-feature { animation:none; }
    .home-page .journey-card,
    .home-page .mini-game-card { transition:none; }
}

/* Навігація: темний метал, тепле золото та чіткі інтерактивні стани. */
body nav.archive-nav {
    box-sizing: border-box;
    grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
    gap: 20px !important;
    padding: 10px clamp(18px, 3vw, 52px) !important;
    min-height: 70px !important;
    overflow: visible;
    background: linear-gradient(100deg, #151013f5, #09090bf5 40%, #121014f5) !important;
    border-bottom: 1px solid #ac74543d !important;
    box-shadow: 0 7px 26px #0005, inset 0 1px #ffffff06 !important;
    backdrop-filter: blur(18px) !important;
}
body .archive-nav__brand { gap: 12px; text-decoration: none; text-shadow: none; }
body .archive-nav__brand::before {
    display: grid; place-items: center; width: 36px; height: 42px;
    color: #e04050; font-size: 28px; line-height: 1;
    border: 1px solid #a537424d; border-radius: 9px;
    background: radial-gradient(ellipse at center, #a3152b22, #130c0e);
    filter: none; text-shadow: 0 0 18px #ba23366b;
}
body .archive-nav__identity { display: flex; flex-direction: column; gap: 5px; }
body .archive-nav__identity b { color: #f2e7d8; font: 700 14px/1.2 Georgia, serif; letter-spacing: .15em; }
body .archive-nav__identity small { color: #a28c78; font: 500 10px/1.2 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
body .archive-nav__links {
    gap: 3px; padding: 4px; border: 1px solid #ffffff0c; border-radius: 12px;
    background: #ffffff03;
}
body .archive-nav__links > a,
body .archive-nav summary {
    box-sizing: border-box; min-height: 38px; padding: 9px 15px; gap: 9px;
    border-radius: 8px; font: 600 14px/1.4 'Spectral', Georgia, serif;
    letter-spacing: .015em; text-transform: none; text-shadow: none;
    color: #b9afa6; text-decoration: none;
    transition: color .2s, background .2s, border-color .2s;
}
body .archive-nav summary::after {
    content: ''; width: 5px; height: 5px; border-right: 1.5px solid #b89a75;
    border-bottom: 1.5px solid #b89a75; transform: translateY(-2px) rotate(45deg);
    transition: transform .2s;
}
body .archive-nav details[open] summary::after { content: ''; transform: translateY(1px) rotate(225deg); }
body .archive-nav__links > a.active,
body .archive-nav details[data-current] summary {
    color: #f5d7b5; background: linear-gradient(120deg, #651b2a85, #32151e85);
    border-color: #ad4e5759; box-shadow: inset 0 1px #f3977820;
}
body .archive-nav__links > a:hover,
body .archive-nav summary:hover,
body .archive-nav details[open] summary { color: #f5e6d4; background-color: #ffffff09; border-color: #c7976438; }
body .archive-nav__actions { justify-content: flex-end; align-items: center; gap: 7px; }
body .archive-nav__icon,
body .archive-nav__toggle {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    gap: 9px; min-width: 40px; min-height: 40px; padding: 9px;
    border-radius: 10px !important; border: 1px solid #b7a18729;
    background: linear-gradient(150deg, #28202370, #12101490); color: #c9baaa;
    box-shadow: inset 0 1px #ffffff06; font: 500 14px/1.3 'Spectral', Georgia, serif;
}
body .archive-nav__icon svg,
body .archive-nav__toggle svg { flex: 0 0 auto; width: 18px; height: 18px; pointer-events: none; }
body .archive-nav__icon[data-archive-search] { padding-inline: 13px; }
body .archive-nav__icon:hover,
body .archive-nav__toggle:hover { color: #f0c18a; border-color: #bd815780; background: #42232980; transform: none; box-shadow: 0 0 18px #b9213020; }
body .archive-nav__icon[aria-pressed="true"] { color: #ddbb8c; border-color: #b9905e4a; }
body .archive-nav__toggle { display: none; }
body .archive-nav__menu {
    box-sizing: border-box; width: 260px; max-width: calc(100vw - 32px);
    top: calc(100% + 14px); padding: 9px; border: 1px solid #805a484f;
    border-top: 2px solid #a14650; border-radius: 13px;
    background: linear-gradient(145deg, #20171cfc, #0c0b0dfc);
    box-shadow: 0 22px 50px #000a;
}
body .archive-nav__menu a {
    align-items: center; gap: 14px; padding: 11px 13px; min-height: 42px;
    box-sizing: border-box; border: 1px solid transparent; border-radius: 7px;
    font: 500 14px/1.4 'Spectral', Georgia, serif; letter-spacing: .015em;
    color: #bfb3a9; text-transform: none; text-decoration: none; text-shadow: none;
}
body .archive-nav__menu a + a { margin-top: 2px; }
body .archive-nav__menu a span { color: #9a7363; font-size: 14px; }
body .archive-nav__menu a:hover,
body .archive-nav__menu a.active { color: #f0d1aa; background: #92253621; border-color: #b2664940; }
body .archive-nav :is(a, button, summary):focus-visible { outline: 2px solid #d6af7a; outline-offset: 3px; }
@media (max-width: 1100px) {
    body nav.archive-nav { grid-template-columns: minmax(0, 1fr) auto; gap: 12px !important; padding: 9px 18px !important; }
    body .archive-nav__toggle { display: inline-flex; }
    body .archive-nav__links {
        display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
        max-height: calc(100svh - 100px); overflow-y: auto; flex-direction: column;
        align-items: stretch; gap: 6px; padding: 12px; border: 1px solid #95634b59;
        background: #100d11fa; border-radius: 13px; box-shadow: 0 20px 40px #0009;
    }
    body .archive-nav.menu-open .archive-nav__links { display: flex; }
    body .archive-nav__links > a,
    body .archive-nav summary { width: 100%; justify-content: space-between; min-height: 44px; }
    body .archive-nav__cluster { width: 100%; }
    body .archive-nav__menu { position: static; width: 100%; max-width: none; margin-top: 5px; transform: none; box-shadow: none; border: 0; border-left: 1px solid #a1465050; border-radius: 0; background: #ffffff02; }
    body .archive-nav__search-label { display: none; }
    body .archive-nav__actions .archive-nav__icon[data-archive-search] { display: inline-flex; padding: 9px; }
}
@media (max-width: 420px) {
    body nav.archive-nav { padding-inline: 12px !important; gap: 8px !important; }
    body .archive-nav__brand { gap: 7px; }
    body .archive-nav__brand::before { width: 28px; height: 36px; font-size: 25px; border: 0; background: none; }
    body .archive-nav__identity b { font-size: 12px; letter-spacing: .08em; }
    body .archive-nav__identity small { display: none; }
    body .archive-nav__actions { gap: 4px; }
    body .archive-nav__icon, body .archive-nav__toggle { min-width: 36px; width: 36px; min-height: 40px; padding: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    body .archive-nav *, body .archive-nav *::after { transition: none !important; }
}