/* =========================================
           ОСНОВНОЙ ФОН СТРАНИЦЫ
           ========================================= */
        body {
            /* Базовый цвет фона (если картинка не загрузится) */
            background-color: #030303; 
            
            /* --- ВСТАВЬТЕ ССЫЛКУ НА ВАШУ КАРТИНКУ НИЖЕ --- */
            /* Пример: background-image: url('images/my-dark-bg.jpg'); */
            background-image: url('backgriund.jfif'); 
            
            background-size: cover; /* Картинка растягивается на весь экран */
            background-position: center; 
            background-attachment: fixed; /* Картинка стоит на месте при прокрутке текста */
            background-repeat: no-repeat;
            
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        /* =========================================
           БЛОК С ТЕКСТОМ (ПОДЛОЖКА)
           ========================================= */
        .story-container {
            /* Максимальная ширина для ПК */
            max-width: 550px; 
            width: 100%;
            
            /* --- НАСТРОЙКА ФОНА ПОД ТЕКСТОМ --- */
            /* Сейчас это глубокий черный цвет с прозрачностью 80%. 
               Последняя цифра 0.8 - это прозрачность (от 0 до 1). */
            background-color: rgba(5, 5, 5, 0.8); 
            
            /* Размытие фона под блоком (эффект стекла). Если не нужно - удалите строчку */
            backdrop-filter: blur(4px); 
            -webkit-backdrop-filter: blur(4px);
            
            /* Отступы внутри рамки и тени */
            padding: 40px;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 0 30px rgba(100, 0, 0, 0.15); /* Еле заметное красное свечение вокруг рамки */
        }

        /* =========================================
           АНИМАЦИЯ ПЕРЕЛИВАЮЩЕГОСЯ КРОВАВОГО ТЕКСТА
           ========================================= */
        @keyframes blood-pulse {
            0% { 
                color: #8a0303; /* Темно-бордовый */
                text-shadow: 0 0 2px rgba(138, 3, 3, 0.2); 
            }
            50% { 
                color: #ff1a1a; /* Ярко-алый (пик переливания) */
                text-shadow: 0 0 8px rgba(255, 26, 26, 0.6); /* Свечение вокруг букв */
            }
            100% { 
                color: #8a0303; 
                text-shadow: 0 0 2px rgba(138, 3, 3, 0.2); 
            }
        }

        /* Применяем анимацию ко всему тексту */
        h1, p, .signature {
            /* 4s - это время одного полного цикла переливания. Можно сделать быстрее (2s) или медленнее (8s) */
            animation: blood-pulse 4s infinite ease-in-out; 
        }

        h1 {
            font-size: 1.2em;
            margin-bottom: 20px;
            margin-top: 0;
            text-align: center;
        }

        p {
            margin-top: 0;
            margin-bottom: 14px; 
            font-size: 15px;
            word-wrap: break-word;
        }

        /* =========================================
           СПОЙЛЕРЫ (Скрытый текст)
           ========================================= */
        .tg-spoiler {
            /* Цвет плашки спойлера (сейчас темно-красно-серый) */
            background-color: #2b0c0c; 
            color: transparent !important; 
            border-radius: 4px;
            padding: 2px 4px;
            cursor: pointer;
            user-select: none;
            transition: background-color 0.3s, color 0.3s;
            animation: none; /* Отключаем пульсацию, пока текст скрыт */
        }

        .tg-spoiler.revealed {
            background-color: transparent;
            /* Возвращаем пульсацию при открытии спойлера */
            animation: blood-pulse 4s infinite ease-in-out;
        }

        /* Зачеркнутый текст */
        del {
            text-decoration-color: #ff1a1a; /* Линия зачеркивания тоже красная */
        }
        
        .signature {
            margin-top: 30px;
            text-align: right;
        }

        /* =========================================
           АДАПТАЦИЯ ДЛЯ ТЕЛЕФОНОВ И ПЛАНШЕТОВ
           ========================================= */
        
        /* Планшеты (экраны меньше 768px) */
        @media (max-width: 768px) {
            .story-container {
                margin: 15px;
                padding: 30px;
            }
            p {
                font-size: 14px; /* Чуть уменьшаем шрифт для удобства */
            }
        }

        /* Смартфоны (экраны меньше 480px) */
        @media (max-width: 480px) {
            body {
                padding: 0; /* Убираем лишние отступы по краям экрана */
            }
            .story-container {
                margin: 0; /* Растягиваем от края до края на мобилках */
                border-radius: 0; /* Убираем скругления углов */
                padding: 20px 15px; /* Делаем внутренние отступы меньше */
                min-height: 100vh; /* Контейнер занимает минимум всю высоту экрана */
            }
            h1 {
                font-size: 1.1em;
            }
            p {
                font-size: 14px;
                margin-bottom: 12px;
            }
        }