/* Подключаем современный шрифт в самом начале файла */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap');

body {
    /* Меняем старую Helvetica на Noto Sans */
    font-family: 'Noto Sans', sans-serif; 
}

/* 1. Главный контейнер главы (бывшая таблица) */
.mainchapter {
    width: 1280px;
    margin: 0 auto;
    color: white;
    display: flex; /* Магия Flexbox активирована */
    flex-direction: column; /* Элементы идут сверху вниз */
    gap: 20px; /* Отступ между репликами */
    padding: 20px 0;
    z-index: 1;
}

/* 2. Строка диалога (контейнер для портрета и текста) */
.dialogue-row {
    display: flex;
    align-items: center; /* Раньше здесь было flex-start. Center решает обе твои задачи разом! */
    width: 100%;
    gap: 25px;
}


/* Заклинание для правой стороны: разворачиваем порядок элементов */
.side-right {
    flex-direction: row-reverse; 
}




/* 3. Портрет */
.name-container {
    flex-shrink: 0; /* Запрещаем портрету сжиматься */
    width: 120px;
    /* Переносим переменные акцентных цветов сюда */
    --accent-color: #00ff15; 
}

.port-img {
    width: 116px;
    height: auto;
    display: block;
    border: 2px solid var(--accent-color);
    border-radius: 8px; /* Немного больше скругления для современности */
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Добавляем легкую тень */
}

/* 4. Текстовый пузырь (бывшая ячейка таблицы) */
.words.blob {
    position: relative;
    /* Делаем фон пузыря темным и полупрозрачным, как в визуальных новеллах */
    background: rgba(15, 20, 30, 0.85); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px; /* Закругляем пузырь */
    padding: 20px 25px;
    flex-grow: 1; /* Пузырь занимает всё оставшееся место */
    max-width: 900px; /* Но не растягивается слишком сильно */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Делаем "хвостики" пузырей, убирая скругление с нужной стороны */
.side-left .words.blob {
    border-top-left-radius: 0;
}
.side-right .words.blob {
    border-top-right-radius: 0;
}

/* 5. Имя говорящего */
.name-box {
    position: absolute;
    top: -16px; /* Выносим плашку с именем за верхнюю границу пузыря */
    background: #1a1a1a;
    padding: 4px 20px;
    border-radius: 4px;
    border: 1px solid var(--accent-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    font-weight: bold;
    font-size: 0.9em;
    color: var(--accent-color);
}

/* Позиционируем имя слева или справа в зависимости от стороны */
.side-left .name-box { left: 20px; }
.side-right .name-box { right: 20px; }

/* 6. Текст внутри пузыря */
.text-content p {
    margin: 0 0 10px 0;
    line-height: 1.6;
    font-size: 1.1em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Читаемость превыше всего */
}
.text-content p:last-child {
    margin-bottom: 0;
}

/* 7. Реплики без персонажа (рассказчик) */
.narrate-row {
    justify-content: center; /* Сам пузырь будет стоять по центру экрана */
}

.words.narrate {
    /* Копируем магию фона и рамок из обычного пузыря */
    background: rgba(15, 20, 30, 0.85); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    
    /* Текст выравниваем по левому краю, как ты и хотел */
    text-align: left; 
    color: #cccccc;
    font-style: italic;
    
    /* Ограничиваем ширину, чтобы читать было комфортно */
    width: 100%;
    max-width: 900px; 
}


/* =========================================
   ГЛОБАЛЬНЫЕ НАСТРОЙКИ И ФОН
   ========================================= */
body {
    margin: 0;
    padding: 0;
    /* Тёмный цвет по умолчанию на случай, если картинка не загрузится */
    background-color: #0b0f19; 
    color: #e0e0e0;
    /* Настройки для будущего динамического фона */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Плавный переход для смены фонов через скрипт */
    transition: background-image 0.8s ease-in-out; 
}

/* Полупрозрачная черная пелена поверх фона, чтобы текст всегда хорошо читался */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    z-index: -1;
}

main.main {
    width: 100%;
    position: relative;
    z-index: 1;
}

/* =========================================
   ШАПКА САЙТА (HEADER)
   ========================================= */
.head_ev {
    /* Вместо жесткого цвета используем градиент, растворяющийся в пустоте */
    background: linear-gradient(to bottom, rgba(10, 15, 30, 0.95) 0%, rgba(10, 15, 30, 0.6) 70%, transparent 100%);
    border-bottom: none; /* Убираем эту резкую синюю линию! */
    padding: 20px 0 20px 0; /* Чуть увеличим отступ снизу для плавности перехода */
    text-align: center;
    box-shadow: none; /* Тень здесь больше не нужна, она будет ломать градиент */
    
    /* Опционально: добавляем эффект матового стекла */
    backdrop-filter: blur(4px);
}

.head_ev_info {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    /* Убедимся, что контент внутри центрируется корректно */
    display: flex; 
    flex-direction: column;
    align-items: center;
}

h1.title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4em;
    font-weight: 500; 
    letter-spacing: 1.5px; 
    text-transform: uppercase; 
    color: #ffffff;
    
    /* Магия защитных барьеров */
    width: 100%;
    box-sizing: border-box;
    padding: 0 200px; /* Создаем слева и справа мертвую зону в 200px */
    line-height: 1.4; /* Если название уйдет на вторую строку, оно не слипнется */
    
    margin: 15px 0 25px 0;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 255, 255, 0.2);
}

.title-1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #ffffff;
    
    /* Магия формы: создаем стильную рамку-подложку */
    background: rgba(10, 15, 25, 0.85); /* Темный полупрозрачный фон */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Тонкая светлая окантовка */
    border-left: 2px solid #3a75c4; /* Синий акцент слева */
    border-right: 2px solid #3a75c4; /* Синий акцент справа */
    border-radius: 4px;
    
    /* Позиционирование строго по центру */
    width: fit-content; /* Блок сжимается ровно по ширине текста */
    margin: 0 auto 40px auto;
    padding: 12px 25px;
    
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px); /* Эффект матового стекла для фона под плашкой */
}

.title-1 {
    text-align: center;
}

/* Баннер ивента в шапке */
.head_ev_info > img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Кнопка "На главную" */
.buitton_back {
    position: absolute;
    left: 0; 
    top: 5px; 
    
    /* Обязательно поднимаем кнопку над всем остальным */
    z-index: 10; 
    
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.buitton_back:hover {
    background: rgba(58, 117, 196, 0.6); /* При наведении даем красивый синий оттенок */
    transform: translateX(-3px);
    border-color: rgba(58, 117, 196, 1);
}
/* Убираем старые костыли для картинок в кнопке */
.buitton_back img.on { display: none; }

.head_ev_info > img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6); /* Делаем тень баннера глубже */
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* =========================================
   НАВИГАЦИЯ (ВЫБОР ГЛАВ)
   ========================================= */
.nav {
    max-width: 1280px;
    margin: 40px auto;
    display: grid;
    /* Магия Grid: автоматически располагает колонки, минимум 200px шириной */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 0 20px;
}

.nav a {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}

.nav a:hover {
    transform: translateY(-5px);
    border-color: #3a75c4;
    box-shadow: 0 8px 20px rgba(58, 117, 196, 0.5);
}

.img-nav {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   ОБЩИЕ СТИЛИ ГЛАВ И ИЗОБРАЖЕНИЙ
   ========================================= */
.chapter {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 0 60px 0;
}

/* =========================================
   СЮЖЕТНЫЕ ИЛЛЮСТРАЦИИ (CG)
   ========================================= */
.pict1 {
    width: 100%;
    max-width: 1280px; /* Совпадает с шириной главы */
    height: auto;
    display: block;
    margin: 40px auto; /* Большие отступы, чтобы дать иллюстрации "дышать" */
    border-radius: 12px; /* Такое же скругление, как у пузырей диалогов */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); /* Глубокая тень для выделения на фоне */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Едва заметная рамка */
    position: relative;
    z-index: 2;
}

/* =========================================
   ПЛАВАЮЩАЯ КНОПКА "НАВЕРХ"
   ========================================= */
#floating-button {
    position: fixed;
    z-index: 100;
    bottom: 30px;
    right: 30px;
    background-color: rgba(58, 117, 196, 0.8);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 12px 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    border-radius: 30px; /* Круглая кнопка */
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

#floating-button:hover {
    background-color: rgba(58, 117, 196, 1);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* =========================================
   АКЦЕНТНЫЕ ЦВЕТА ПЕРСОНАЖЕЙ
   ========================================= */

/* Задаем зеленый цвет по умолчанию для всей строки диалога на случай, 
   если статус в yml-файле не указан */
.dialogue-row {
    --accent-color: #00ff15; 
}

/* Специфичные классы, которые переопределяют цвет.
   Как только Liquid подставит этот класс, рамка и имя изменят цвет! */
.is-red       { --accent-color: #fc0909; }
.is-yellow    { --accent-color: #ffdf00; }
.is-gray      { --accent-color: #666666; }
.is-lightgray { --accent-color: #cccccc; }
.is-meta      { --accent-color: #d1a44a; }
.is-white     { --accent-color: #ffffff; }
.is-purple    { --accent-color: #cc99ff; }
.is-blue      { --accent-color: #3125dd; }
.is-orange    { --accent-color: #ff8800; }
.is-sea       { --accent-color: #34ebf8; }

/* =========================================
   КНОПКИ НАВИГАЦИИ ПО ГЛАВАМ
   ========================================= */
.chapter-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.chapter-controls button {
    background: rgba(15, 20, 30, 0.8);
    color: #e0e0e0;
    border: 1px solid #3a75c4;
    padding: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.chapter-controls button:hover {
    background: #3a75c4;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(58, 117, 196, 0.4);
}

/* =========================================
   ЧЕРНЫЕ И БЕЛЫЕ ЭКРАНЫ (Эпиграфы и вступления)
   ========================================= */
.screen-block {
    width: 1280px;
    margin: 30px auto;
    padding: 60px 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    position: relative;
    z-index: 2; /* Чтобы блок был поверх фона страницы */
}

/* Стили для темного блока */
.screen-block.is-black {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Стили для светлого блока */
.screen-block.is-white {
    background-color: #ffffff;
    /* Используем темно-серый вместо чистого черного для приятного контраста */
    color: #333333; 
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Контейнер с текстом */
.screen-content {
    /* 120px (ширина портрета) + 25px (наш gap из диалогов) = 145px */
    /* Так текст эпиграфа будет выровнен ровно по левому краю текстовых пузырей! */
    padding-left: 145px; 
    padding-right: 40px;
    text-align: left;
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.8;
}

/* Убираем лишние отступы у параграфов внутри */
.screen-content p {
    margin: 0 0 15px 0;
}

.screen-content p:last-child {
    margin-bottom: 0;
}

/* =========================================
   БЛОК ТЕКУЩЕЙ ЛОКАЦИИ
   ========================================= */
.location-banner {
    max-width: 1280px; /* Выравниваем по ширине остальных элементов */
    margin: 25px auto;
    /* Глубокий темный фон, чуть прозрачный, чтобы фон страницы едва угадывался */
    background-color: rgba(10, 15, 25, 0.95); 
    color: #ffffff;
    text-align: center;
    padding: 12px 20px;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 1px; /* Слегка разрядим буквы для торжественности */
    
    /* Добавляем тонкие рамки сверху и снизу в стиле интерфейса */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    
    position: relative;
    z-index: 2;
}

/* =========================================
   СВЕТЯЩИЙСЯ РАЗДЕЛИТЕЛЬ СЦЕН
   ========================================= */
.scene-divider {
    display: flex;
    align-items: center;
    max-width: 1280px; /* Держимся в рамках общей ширины глав */
    margin: 40px auto; /* Просторные отступы, чтобы дать сценам дышать */
    width: 100%;
}

/* Общие свойства для обеих линий */
.scene-divider::before,
.scene-divider::after {
    content: '';
    flex-grow: 1; /* Заставляет линии занять всё доступное место */
    height: 1px;  /* Толщина линии */
    /* Добавляем то самое магическое свечение */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); 
}

/* Левая линия: плавно появляется из пустоты и становится яркой к центру */
.scene-divider::before {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
}

/* Правая линия: яркая в центре и плавно растворяется во тьме */
.scene-divider::after {
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.8));
}

/* Три точки по центру */
.scene-divider .dots {
    margin: 0 20px; /* Отступы от светящихся линий */
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
    font-size: 1.5em;
    letter-spacing: 8px; /* Немного раздвинем точки для элегантности */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Свечение самих точек */
    /* Убираем лишний отступ у последней точки, созданный letter-spacing */
    padding-left: 8px; 
}

/* =========================================
   БЛОК ВЫБОРА ВАРИАНТОВ (Заголовок)
   ========================================= */
.choice-container {
    display: flex;
    justify-content: center;
    margin: 40px 0 20px 0;
    position: relative;
    z-index: 2;
}

.choice-label {
    background: rgba(20, 25, 35, 0.9);
    color: #e0e0e0;
    padding: 10px 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px; /* Овальная форма выглядит элегантнее */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

/* =========================================
   ЦВЕТОВЫЕ ФИЛЬТРЫ ДЛЯ ВЕТОК ДИАЛОГОВ
   ========================================= */
/* Базовые стили для всех веток выбора */
[class*="-choise"] {
    position: relative;
    /* Увеличиваем внутренние отступы, чтобы рамка не прилипала к тексту */
    padding: 30px 40px; 
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-sizing: border-box; /* Чтобы padding не ломал общую ширину в 1280px */
    
    /* Легкое внутреннее затемнение, чтобы отделить ветку от остального фона */
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}

/* Добавляем цветную ауру и свечение левой границы для каждой ветки.
   Это визуально объединит реплики одной ветки в единый блок, в самом деле. */
.blue-choise   { background: rgba(0, 102, 255, 0.1); border-left: 4px solid rgba(0, 102, 255, 0.8); }
.red-choise    { background: rgba(255, 0, 68, 0.1);  border-left: 4px solid rgba(255, 0, 68, 0.8); }
.yellow-choise { background: rgba(255, 204, 0, 0.1); border-left: 4px solid rgba(255, 204, 0, 0.8); }
.sea-choise    { background: rgba(0, 229, 255, 0.1); border-left: 4px solid rgba(0, 229, 255, 0.8); }
.green-choise  { background: rgba(0, 255, 68, 0.1);  border-left: 4px solid rgba(0, 255, 68, 0.8); }
.purple-choise { background: rgba(179, 0, 255, 0.1); border-left: 4px solid rgba(179, 0, 255, 0.8); }

/* =========================================
   ОСЛЕПИТЕЛЬНЫЙ СВЕТ (Белый фон сцены)
   ========================================= */
.mainchapter.white-full {
    background-color: #ffffff !important;
    background-image: none !important;
    border-radius: 12px;
    padding: 40px; /* Отступы, чтобы белый свет обволакивал персонажей */
    margin-top: 30px;
    margin-bottom: 30px;
    /* Создаем ауру света вокруг блока */
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.9), inset 0 0 40px rgba(255, 255, 255, 1);
    position: relative;
    z-index: 2;
}

/* Светлые пузыри для рассказчика И обычных диалогов персонажей */
.mainchapter.white-full .words.narrate,
.mainchapter.white-full .words.blob {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Темно-серый текст для читаемости и уничтожение черной тени */
.mainchapter.white-full .words.narrate,
.mainchapter.white-full .words.blob .text-content p {
    color: #333333; 
    text-shadow: none; 
}

/* Осветляем плашку с именем, чтобы она не выглядела черной дырой */
.mainchapter.white-full .name-box {
    background: #ffffff;
    /* Рамка и текст сохранят акцентный цвет персонажа */
    border: 1px solid var(--accent-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* =========================================
   СЕГМЕНТЫ ВОСПОМИНАНИЙ (Сепия)
   ========================================= */
.mainchapter.memory-segment {
    /* Накладываем фильтр на весь блок: сепия, чуть больше света и мягкий контраст */
    filter: sepia(0.6) brightness(1.1) contrast(0.95);
    position: relative;
    z-index: 2;
}

/* Делаем фон текстовых пузырей внутри воспоминаний более теплым, 
   убирая холодный синий оттенок стандартных блоков */
.mainchapter.memory-segment .words.blob {
    background: rgba(40, 25, 15, 0.85); 
    border: 1px solid rgba(255, 200, 150, 0.2);
}

.mainchapter.memory-segment .name-box {
    background: #2a1a10; 
}

/* То же самое для текста рассказчика */
.mainchapter.memory-segment .words.narrate {
    background: rgba(40, 25, 15, 0.85);
    border: 1px solid rgba(255, 200, 150, 0.2);
}

/* =========================================
   ТУМАН: ДИАЛОГИ (Белый и Красный)
   ========================================= */
.mainchapter.mist,
.mainchapter.fog-effect,
.mainchapter.fog-effect-red {
    position: relative;
    padding: 30px;
}

/* Белая пелена позади диалогов */
.mainchapter.mist::after,
.mainchapter.fog-effect::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Делаем фон густым, но он будет лежать ПОД текстом */
    background: linear-gradient(to bottom, rgba(220, 230, 240, 0.7) 0%, rgba(200, 215, 230, 0.95) 100%);
    border-radius: 12px;
    z-index: 5;
    pointer-events: none;
}

/* Багровая пелена позади диалогов */
.mainchapter.fog-effect-red::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(30, 10, 10, 0.8) 0%, rgba(100, 0, 0, 0.95) 100%);
    border-radius: 12px;
    z-index: 5;
    pointer-events: none;
}

/* ВЫТАСКИВАЕМ ВСЮ СТРОКУ ДИАЛОГА (Портреты + Текст) НАВЕРХ */
.mainchapter.mist .dialogue-row,
.mainchapter.fog-effect .dialogue-row,
.mainchapter.fog-effect-red .dialogue-row {
    position: relative;
    z-index: 10; 
}

/* Легкая стилизация самих пузырей, чтобы они лучше смотрелись над туманом */
.mainchapter.mist .words.blob,
.mainchapter.fog-effect .words.blob,
.mainchapter.mist .words.narrate,
.mainchapter.fog-effect .words.narrate {
    background: rgba(245, 248, 250, 0.9);
    color: #1a1c20;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.mainchapter.fog-effect-red .words.blob,
.mainchapter.fog-effect-red .words.narrate {
    background: rgba(25, 5, 5, 0.95);
    color: #e0e0e0;
    border: 1px solid rgba(255, 50, 50, 0.4);
}

/* =========================================
   ТУМАН: СЮЖЕТНЫЕ ИЛЛЮСТРАЦИИ (Густая дымка)
   ========================================= */
/* Белый туман: сильное размытие, потеря контраста, выцветание */
img.fog-effect,
.pict1.fog-effect {
    filter: brightness(1.6) contrast(0.3) blur(5px) grayscale(0.5);
    opacity: 0.8;
    transition: filter 0.3s ease;
}

/* Кровавый туман: темнота, багровый оттенок, размытие */
img.fog-effect-red,
.pict1.fog-effect-red {
    filter: sepia(1) hue-rotate(-50deg) saturate(4) brightness(0.3) contrast(0.6) blur(5px);
    opacity: 0.9;
    transition: filter 0.3s ease;
}

/* =========================================
   НАЛОЖЕНИЕ ИЗОБРАЖЕНИЙ (Слоистые CG)
   ========================================= */
.image-overlay-container {
    position: relative;
    width: 100%;
    max-width: 1280px; /* Держим нашу стандартную ширину главы */
    margin: 40px auto; /* Просторные отступы, как у обычных CG */
    
    /* Применяем стили красивой рамки прямо к контейнеру */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Важнейшее заклинание: обрезаем всё, что вылезает за скругленные углы! */
    overflow: hidden; 
    line-height: 0; /* Убиваем фантомный отступ под картинками */
    z-index: 2;
}

/* Обезвреживаем старые классы pict1 внутри контейнера, 
   чтобы они не ломали верстку своими двойными отступами и рамками */
.image-overlay-container .base-image,
.image-overlay-container .overlay-layer {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Настраиваем полупрозрачный слой-наложение */
.image-overlay-container .overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Магия, позволяющая кликать сквозь слой, если нужно */
    object-fit: cover; /* Гарантирует идеальное совпадение границ */
}

/* =========================================
   СЦЕНЫ С ТЕКСТОМ НА ПОВЕРХНОСТИ (image_text.html)
   ========================================= */
.scene-container {
    position: relative;
    max-width: 1280px;
    margin: 40px auto;
    border-radius: 12px;
    overflow: hidden; /* Обрезает углы картинки строго по радиусу рамки */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    line-height: 0; /* Убирает технологические зазоры под изображением */
    z-index: 2;
}

.scene-container img {
    width: 100%;
    height: auto;
    display: block;
}

.scene-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;    /* Центрируем блок текста по вертикали */
    justify-content: center; /* Центрируем блок текста по горизонтали */
    background: rgba(0, 0, 0, 0.35); /* Мягкое затемнение фона под плашкой */
}

.scene-text {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-align: center;
    padding: 30px 45px;
    max-width: 75%;
    line-height: 1.6;
    font-size: 1.1em;
    
    /* Делаем стекло гораздо прозрачнее (0.44 вместо 0.88) */
    background: rgba(12, 17, 26, 0.44);
    
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
}

/* Настройка отступов для параграфов внутри плашки */
.scene-text p {
    margin: 0 0 12px 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.scene-text p:last-child {
    margin-bottom: 0;
}


/* =========================================
   ПЛАВАЮЩАЯ ПАНЕЛЬ НАВИГАЦИИ
   ========================================= */
.fixed-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Панель должна быть поверх абсолютно всего тумана и картинок */
    
    /* Эффект темного матового стекла, чтобы не перекрывать фон наглухо */
    background: rgba(10, 15, 25, 0.85);
    backdrop-filter: blur(10px);
    
    /* Тонкая граница сверху для эстетики */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.6);
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Расстояние между кнопками */
    padding: 6px 0;
}

/* Стили самих кнопок */
.fixed-bottom-nav .nav-btn {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    padding: 4px 13px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fixed-bottom-nav .nav-btn:hover {
    background: rgba(58, 117, 196, 0.6);
    border-color: rgba(58, 117, 196, 1);
    transform: translateY(-2px);
}

/* =========================================
   ЗАЩИТА КОНТЕНТА ОТ ПЕРЕКРЫТИЯ
   ========================================= */
/* Чтобы плавающая панель не закрыла собой последние строки текста в самом низу страницы, 
   добавляем отступ для всего тела документа */
body {
    padding-bottom: 70px !important; 
}

/* =========================================
   КИНЕМАТОГРАФИЧНЫЕ РАЗДЕЛИТЕЛИ СЦЕН
   ========================================= */
.scene-break {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Растягиваем на всю ширину текстового пузыря */
    max-width: 900px; 
    margin: 40px auto; 
    height: 24px;
    user-select: none;
    pointer-events: none;
    gap: 12px; 
}

.scene-break::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
}

/* Базовый стиль для кристаллов */
.scene-break span {
    position: relative;
    z-index: 2;
    display: block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg); 
    transition: all 0.3s ease;
}

/* Центральный кристалл крупнее */
.scene-break span:nth-child(2) {
    width: 14px;
    height: 14px;
}

/* --- ВАРИАНТ 1: ЗАТУХАНИЕ (Темная пауза) --- */
.scene-break.break-dark::before {
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(10, 15, 25, 0.9) 20%, rgba(0, 0, 0, 1) 50%, rgba(10, 15, 25, 0.9) 80%, transparent 100%);
    /* drop-shadow идеально облегает полупрозрачный градиент, убирая квадратные края */
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.15)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.9));
}

.scene-break.break-dark span {
    background: #0f141e;
    border: 2px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 0 12px rgba(0, 0, 0, 1);
}

/* --- ВАРИАНТ 2: ВСПЫШКА (Световой переход) --- */
.scene-break.break-light::before {
    height: 3px; 
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.7) 80%, transparent 100%);
    filter: drop-shadow(0 0 6px rgba(139, 170, 219, 0.8)) drop-shadow(0 0 12px rgba(255, 255, 255, 1));
}

.scene-break.break-light span {
    background: #ffffff;
    border: 1px solid #e0f0ff;
    box-shadow: 0 0 15px #ffffff, 0 0 25px rgba(139, 170, 219, 1);
}

/* --- ВАРИАНТ 3: ЗОЛОТО (Божественный / Королевский переход) --- */
.scene-break.break-gold::before {
    height: 3px; 
    background: linear-gradient(90deg, transparent 0%, rgba(255, 200, 0, 0.7) 20%, rgba(255, 230, 100, 1) 50%, rgba(255, 200, 0, 0.7) 80%, transparent 100%);
    filter: drop-shadow(0 0 6px rgba(255, 150, 0, 0.8)) drop-shadow(0 0 12px rgba(255, 220, 50, 1));
}

.scene-break.break-gold span {
    background: #fff5cc;
    border: 1px solid #ffcc00;
    box-shadow: 0 0 15px #ffdd44, 0 0 20px rgba(255, 150, 0, 0.8);
}

.scene-break.break-blue::before {
    height: 3px; 
    background: linear-gradient(90deg, transparent 0%, rgba(0, 150, 255, 0.7) 20%, rgba(100, 230, 255, 1) 50%, rgba(0, 150, 255, 0.7) 80%, transparent 100%);
    filter: drop-shadow(0 0 6px rgba(0, 100, 255, 0.8)) drop-shadow(0 0 12px rgba(50, 200, 255, 1));
}

.scene-break.break-blue span {
    background: #e6f7ff;
    border: 1px solid #00aaff;
    box-shadow: 0 0 15px #44bbff, 0 0 20px rgba(0, 100, 255, 0.8);
}

.scene-break.break-purple::before {
    height: 3px; 
    background: linear-gradient(90deg, transparent 0%, rgba(204, 0, 255, 0.7) 20%, rgba(235, 100, 255, 1) 50%, rgba(204, 0, 255, 0.7) 80%, transparent 100%);
    filter: drop-shadow(0 0 6px rgba(153, 0, 204, 0.8)) drop-shadow(0 0 12px rgba(204, 0, 255, 1));
}

.scene-break.break-purple span {
    background: #f7e6ff;
    border: 1px solid #cc00ff;
    box-shadow: 0 0 15px #d944ff, 0 0 20px rgba(153, 0, 204, 0.8);
}

/* =========================================
   ПЛАШКА ЛОКАЦИИ И ВРЕМЕНИ
   ========================================= */

.location-plate {
    background: rgba(12, 17, 26, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 2px solid #3a75c4; 
    border-radius: 4px 8px 8px 4px;
    padding: 15px 25px; 
    margin: 30px auto; 
    max-width: 650px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

/* Единый стиль для каждой строки массива */
.loc-line {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #ffffff;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin-bottom: 6px; /* Небольшой отступ между строками */
}

/* Убираем отступ у самой последней строки, чтобы плашка была аккуратной */
.location-plate .loc-line:last-child {
    margin-bottom: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--fx) center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
}

body.has-fx::after { opacity: 1; }

body.fx-noise { --fx: url("../../img/bg/bgshum.png"); }
body.fx-dark  { --fx: url("../../img/bg/bgd.png"); }

.chapter-card { position: relative; display: block; }
.chapter-card__bg { width: 100%; height: auto; display: block; }

.chapter-card__num {
  position: absolute;
  top: 0.5%;
  right: 2%;
  color: #fff;
  font-weight: 500;
}

.chapter-card__title {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 1%;
  text-align: center;
  color: #fff;
  font-weight: 500;
  line-height: 1.15;
}

/* =========================================
   ВСТРОЕННЫЕ ПРЕДМЕТЫ СЮЖЕТА (inline-img)
   ========================================= */
.inline-img {
    display: block;
    margin: 25px auto; /* Жестко центрируем и даем много воздуха сверху и снизу */
    
    /* Умное масштабирование */
    max-width: 100%; /* Картинка никогда не разорвет пузырь на телефонах */
    max-height: 280px; /* Ограничиваем высоту, чтобы камень не казался размером с линкор */
    width: auto;
    height: auto;
    object-fit: contain; /* Защита от искажения пропорций */
    
    /* Магия левитации */
    /* drop-shadow идеально облегает контур прозрачных PNG, в отличие от квадратного box-shadow */
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.6));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
}





/* =========================================
   АДАПТАЦИЯ ДЛЯ ТЕЛЕФОНОВ (Магия трансформации)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Спасаем заголовок ивента от сдавливания */
    h1.title {
        font-size: 1.5em; /* Уменьшаем размер шрифта */
        padding: 0 15px; /* Уничтожаем те самые 200px мертвой зоны! */
        margin-top: 60px; /* Опускаем заголовок, чтобы он не налез на кнопку */
        letter-spacing: 1px;
    }

    /* 2. Усмиряем кнопку "На главную" */
    .buitton_back {
        top: 15px;
        left: 50%; /* На телефоне ставим ее ровно по центру */
        transform: translateX(-50%); 
        font-size: 0.9em;
        padding: 8px 15px;
    }
    
    /* Отменяем сдвиг при нажатии на телефоне, чтобы кнопка не дергалась */
    .buitton_back:hover {
        transform: translateX(-50%); 
    }

    /* 3. Делаем заголовки глав компактнее */
    .title-1 {
        font-size: 1.2em;
        padding: 10px 20px;
        width: auto;
        margin: 0 15px 30px 15px;
        letter-spacing: 2px;
    }

    /* 4. Центрируем баннер ивента */
    .head_ev_info > img {
        margin: 0 15px;
        width: calc(100% - 30px);
    }

    /* 5. Убираем лишние поля у текстовой плашки (image_text) */
    .scene-text {
        max-width: 90%;
        padding: 20px;
        font-size: 0.95em;
    }
    
    /* 6. Адаптируем разделитель со звездочками */
    .scene-divider {
        margin: 20px auto;
    }
    
    /* 7. Подгоняем блок локации */
    .location-banner {
        margin: 15px;
        font-size: 0.9em;
    }


/* =========================================
       РАЗРУШЕНИЕ ФИКСИРОВАННЫХ ШИРИН (Глобально)
       ========================================= */
    /* Принудительно заставляем все основные блоки сжаться до ширины экрана */
    html, body, .mainchapter, .screen-block, .scene-container, .image-overlay-container, table, tbody, tr, td {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Прячем любые элементы, которые все равно пытаются вылезти за край */
    body {
        overflow-x: hidden; 
    }

    /* =========================================
       АДАПТАЦИЯ ДИАЛОГОВ И ЭПИГРАФОВ
       ========================================= */
    /* Отменяем гигантский отступ в 145px для черных/белых экранов, 
       который на телефоне съедает половину экрана */
    .screen-content {
        padding-left: 10px !important;
        padding-right: 100px !important;
    }

    /* Убеждаемся, что текстовые пузыри диалогов и системных сообщений не сопротивляются */
    .words.blob, .words.narrate, .text-content, .dialogue-row {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Если у портретов фиксированная ширина, они могут выдавливать текст. 
       Слегка уменьшаем их на телефонах */
    .port-img {
        min-width: 60px; 
        max-width: 60px;
    }
    
    .port-img {
        width: 60px;
        height: auto;
    }
.name-container {
  flex-shrink: 0;
  width: auto;
  --accent-color: #00ff15;
}

.dialogue-row {
  gap: 10px;
}

}


/* =========================================
   УЛЬТРА-КОМПАКТНЫЕ ЭКРАНЫ (Меньше 400px) - Исправлено
   ========================================= */
@media (max-width: 400px) {
    /* Полностью скрываем изображения портретов по их истинному имени */
    .port-img {
        display: none !important;
    }

    /* Растягиваем текстовый пузырь на всю ширину */
    .words.blob {
        width: 100% !important;
        border-radius: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Прижимаем плашку с именем к левому краю блока */
    .name-box {
        left: 10px !important;
    }
}

/* =========================================
   МЕНЮ ИВЕНТА: ПЛАШКА СЮЖЕТА + ГЛАВЫ
   Левая четверть — вступление, правые три — карточки глав.
   ========================================= */
.event-menu {
    max-width: 1280px;
    margin: 28px auto 48px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr);
    gap: 22px;
    align-items: start;
    box-sizing: border-box;
}

.event-menu > .nav {
    max-width: none;
    margin: 0;
    padding: 0;
}

.event-menu > .nav:only-child {
    grid-column: 1 / -1;
}

.story-brief {
    position: sticky;
    top: 16px;
    background: rgba(10, 15, 25, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 16px 16px 18px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}

.story-brief__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
    letter-spacing: 0.2px;
    text-align: center;
    color: #ffffff;
    margin: 2px 6px 12px;
}

.story-brief__frame {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
    background: #0c121c;
    line-height: 0;
}

.story-brief__frame img {
    width: 100%;
    height: auto;
    display: block;
}

.story-brief__desc {
    margin: 14px 2px 0;
    color: #ececec;
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: left;
    font-style: normal;
}

.story-brief__part {
    margin-top: 14px;
}

.story-brief__part-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8baadb;
    margin: 0 2px 2px;
}

.story-brief__part .story-brief__desc {
    margin-top: 4px;
}

.story-brief__factions {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.story-brief__factions-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    color: #ffffff;
    margin-bottom: 8px;
}

.story-brief__factions ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.story-brief__factions li {
    color: #dedede;
    font-size: 0.92rem;
    line-height: 1.45;
    padding: 3px 0 3px 16px;
    position: relative;
}

.story-brief__factions li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3a75c4;
}

@media (max-width: 900px) {
    .event-menu {
        grid-template-columns: 1fr;
        padding: 0 12px;
        margin: 16px auto 28px;
    }

    .story-brief {
        position: static;
    }
}