[html]<div id="val-smooth-game" style="width: 100%; max-width: 800px; margin: 0 auto; aspect-ratio: 16 / 9; position: relative; background: #fff0f3; overflow: hidden; font-family: 'Segoe UI', Arial, sans-serif; border: 4px solid #ff4d6d; border-radius: 20px; transition: background 0.8s; touch-action: none;">
   
    <div id="v-ui" style="display: none; position: absolute; top: 10px; width: 100%; padding: 0 20px; z-index: 10; justify-content: space-between; align-items: center; font-weight: bold; color: #ff4d6d; pointer-events: none; text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">
        <div id="v-score">Счёт: 0</div>
        <div id="v-cheer" style="font-size: clamp(12px, 2.5vw, 16px); text-align: center; flex: 1; margin: 0 10px; opacity: 0; transition: opacity 0.8s; font-style: italic;"></div>
        <div id="v-timer">60s</div>
    </div>

    <div id="v-start" style="position: absolute; inset: 0; background: #fff0f3; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;">
        <h2 style="color: #ff4d6d;">Ловец Сердец ❤️</h2>
        <input type="text" id="v-name" placeholder="Имя героя" maxlength="12" style="padding: 10px; border: 2px solid #ff4d6d; border-radius: 8px; margin-bottom: 15px; outline: none; text-align: center;">
        <button id="v-btn" style="padding: 10px 25px; background: #ff4d6d; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">Начать!</button>
        <div id="v-board" style="margin-top: 15px; font-size: 13px; color: #888;"></div>
    </div>

    <div id="v-p" style="position: absolute; bottom: 15px; left: 50%; width: 70px; height: 50px; transform: translateX(-50%); display: none; z-index: 5; will-change: left;">
        <svg viewBox="0 0 100 60"><path d="M10 10H90L80 50H20L10 10Z" fill="#d97706" stroke="#92400e" stroke-width="4"/><path d="M5 10H95" stroke="#92400e" stroke-width="6" stroke-linecap="round"/></svg>
    </div>

    <script>
        (function() {
            const stage = document.getElementById('val-smooth-game'), start = document.getElementById('v-start'), ui = document.getElementById('v-ui');
            const player = document.getElementById('v-p'), scoreDisp = document.getElementById('v-score');
            const timeDisp = document.getElementById('v-timer'), cheerDisp = document.getElementById('v-cheer');
            let score = 0, time = 60, active = false, pName = "", phrases = [];

            const rawPhrases = [
                "Весь магический мир в шоке от тебя!", "Толпы поклонниц плачут в восторге!",
                "[NAME], это незаконно — быть таким ловким!", "Амур нервно курит в сторонке!",
                "Магнит для любви активирован!", "Даже котики завидуют твоей реакции!",
                "Ты разбиваешь статистику форума!", "Сердечный маг 80-го уровня!",
                "Где ты научился так красть сердца, [NAME]?", "Поклонницы уже строчат тебе письма!"
            ];

            const shufflePhrases = () => { phrases = [...rawPhrases].sort(() => Math.random() - 0.5); };

            function play() {
                pName = document.getElementById('v-name').value.trim() || "Герой";
                active = true; score = 0; time = 60; shufflePhrases();
                start.style.display = 'none'; player.style.display = 'block'; ui.style.display = 'flex';
                const t = setInterval(() => {
                    time--; timeDisp.innerText = time + 's';
                    if (time <= 0) { clearInterval(t); finish(); }
                }, 1000);
                spawn();
            }

            function finish() {
                active = false;
                const d = JSON.parse(localStorage.getItem('v_rank_final') || '[]');
                d.push({n: pName, s: score});
                d.sort((a,b) => b.s - a.s);
                localStorage.setItem('v_rank_final', JSON.stringify(d));
                alert(`ФИНАЛ! ${pName}, твой счёт: ${score}`);
                location.reload();
            }

            const move = (cx) => {
                if (!active) return;
                const r = stage.getBoundingClientRect();
                player.style.left = Math.max(35, Math.min(cx - r.left, r.width - 35)) + 'px';
            };
            stage.addEventListener('mousemove', (e) => move(e.clientX));
            stage.addEventListener('touchmove', (e) => { e.preventDefault(); move(e.touches[0].clientX); }, {passive: false});

            function spawn() {
                if (!active) return;
                const h = document.createElement('div');
                h.style.cssText = `position: absolute; top: -40px; width: 30px; height: 30px; transform: translateX(-50%); pointer-events: none; will-change: top;`;
                const heartColor = score >= 30 ? '#fff' : '#ff4d6d';
                h.innerHTML = `<svg viewBox="0 0 24 24" fill="${heartColor}"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>`;
                h.style.left = (20 + Math.random() * (stage.offsetWidth - 40)) + 'px';
                stage.appendChild(h);

                let y = -40, spd = 2.2 + (score * 0.04) + Math.random() * 1.8; // Чуть снизил базовую скорость
                function f() {
                    if (!active) { h.remove(); return; }
                    y += spd; h.style.top = y + 'px';
                    const pR = player.getBoundingClientRect(), hR = h.getBoundingClientRect();
                    if (hR.bottom >= pR.top && hR.right >= pR.left && hR.left <= pR.right && hR.top <= pR.bottom) {
                        score++; scoreDisp.innerText = `Счёт: ${score}`;
                       
                        if (score === 15) { stage.style.background = "#ffb3c1"; ui.style.color = "#8d001a"; }
                        if (score === 30) { stage.style.background = "#ff4d6d"; ui.style.color = "#ffffff"; }

                        // Фраза теперь появляется каждые 12 очков
                        if (score % 12 === 0) {
                            if (phrases.length === 0) shufflePhrases();
                            cheerDisp.innerText = phrases.pop().replace("[NAME]", pName);
                            cheerDisp.style.opacity = 1;
                            // Текст висит 4 секунды
                            setTimeout(() => { cheerDisp.style.opacity = 0; }, 4000);
                        }
                        h.remove(); return;
                    }
                    if (y > stage.offsetHeight) { h.remove(); return; }
                    requestAnimationFrame(f);
                }
                requestAnimationFrame(f);
                setTimeout(spawn, Math.max(350, 800 - score * 7));
            }
            document.getElementById('v-btn').onclick = play;
            const updateBoard = () => {
                const d = JSON.parse(localStorage.getItem('v_rank_final') || '[]');
                document.getElementById('v-board').innerHTML = d.length ? "<b>Рекорды:</b><br>" + d.slice(0,3).map(i => `${i.n}: ${i.s}`).join('<br>') : "";
            };
            updateBoard();
        })();
    </script>
</div>
[/html]

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ленни x Фарид </title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Crimson+Text:wght@400;600;700&display=swap');
       
        .fandom-page {
            font-family: 'Lora', serif;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-size: 14px;
        }
       
        .fandom-page * {
            box-sizing: border-box;
        }
       
        /* Header */
        .fp-header {
            background: white;
            border: 2px solid #333;
            padding: 15px;
            margin-bottom: 20px;
        }
       
        .header-layout {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 20px;
            align-items: start;
        }
       
        .fp-cover {
            width: 200px;
            height: auto;
            border: 3px solid #333;
            box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
            display: block;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
       
        .fp-cover.zoomed {
            transform: scale(1.3);
            box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.5);
            z-index: 100;
            position: relative;
        }
       
        .fp-info {
            display: flex;
            flex-direction: column;
        }
       
        .fp-title {
            font-family: 'Crimson Text', serif;
            font-size: 1.8em;
            font-weight: 700;
            color: #333;
            margin: 0 0 15px 0;
            line-height: 1.2;
            cursor: pointer;
            transition: color 0.2s ease, transform 0.2s ease;
        }
       
        .fp-title:hover {
            color: #666;
        }
       
        /* Roar animation */
        .roar-text {
            position: fixed;
            right: -200px;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'Crimson Text', serif;
            font-size: 4em;
            font-weight: 700;
            color: #333;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            pointer-events: none;
            animation: roarSlide 2s ease-out forwards;
        }
       
        @keyframes roarSlide {
            0% {
                right: -200px;
                opacity: 0;
            }
            20% {
                right: 20px;
                opacity: 1;
            }
            80% {
                right: 20px;
                opacity: 1;
            }
            100% {
                right: -200px;
                opacity: 0;
            }
        }
       
        @keyframes titleShake {
            0%, 100% { transform: translateX(0) rotate(0deg); }
            10% { transform: translateX(-3px) rotate(-1deg); }
            20% { transform: translateX(3px) rotate(1deg); }
            30% { transform: translateX(-3px) rotate(-1deg); }
            40% { transform: translateX(3px) rotate(1deg); }
            50% { transform: translateX(-3px) rotate(-1deg); }
            60% { transform: translateX(3px) rotate(1deg); }
            70% { transform: translateX(-2px) rotate(-0.5deg); }
            80% { transform: translateX(2px) rotate(0.5deg); }
            90% { transform: translateX(-1px) rotate(-0.2deg); }
        }
       
        .fp-title.shake {
            animation: titleShake 0.6s ease-in-out;
        }
       
        .fp-meta {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 0;
            text-align: left;
        }
       
        .fp-meta-item {
            padding: 8px;
            border-left: 3px solid #333;
            background: #f5f5f5;
        }
       
        .fp-meta-label {
            font-size: 0.75em;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
            margin-bottom: 3px;
        }
       
        .fp-meta-value {
            font-size: 0.95em;
            color: #333;
            font-weight: 500;
        }
       
        .fp-rating {
            color: #333;
            font-weight: 700;
        }
       
        /* Summary */
        .fp-summary {
            background: #f5f5f5;
            border: 2px solid #e0e0e0;
            padding: 15px;
            margin-bottom: 20px;
            line-height: 1.7;
            font-size: 1.05em;
        }
       
        .fp-summary p {
            margin: 0 0 10px 0;
        }
       
        .fp-summary p:last-child {
            margin-bottom: 0;
        }
       
        .fp-summary em {
            color: #333;
            font-style: italic;
        }
       
        /* Section */
        .fp-section {
            background: white;
            border: 2px solid #333;
            padding: 20px;
            margin-bottom: 20px;
        }
       
        .fp-section-title {
            font-family: 'Crimson Text', serif;
            font-size: 1.4em;
            color: #333;
            margin: 0 0 12px 0;
            font-weight: 700;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 6px;
        }
       
        /* Characters */
        .fp-characters {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 12px;
        }
       
        .fp-char {
            background: #f5f5f5;
            border: 2px solid #e0e0e0;
            border-left: 4px solid #333;
            padding: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
       
        .fp-char:hover {
            border-left-color: #000;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
       
        .fp-char-name {
            font-family: 'Crimson Text', serif;
            font-size: 1.3em;
            color: #333;
            margin: 0 0 5px 0;
            font-weight: 700;
        }
       
        .fp-char-role {
            color: #666;
            font-size: 0.8em;
            font-weight: 600;
            margin: 0 0 10px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
       
        .fp-char-desc {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.4s ease;
            font-size: 0.95em;
            line-height: 1.5;
            color: #555;
        }
       
        .fp-char.active .fp-char-desc {
            max-height: 250px;
            opacity: 1;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #e0e0e0;
        }
       
        /* Tags */
        .fp-tags {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
        }
       
        .fp-tag {
            background: #f5f5f5;
            border-left: 3px solid #333;
            padding: 8px 10px;
            font-size: 0.95em;
            transition: all 0.3s ease;
        }
       
        .fp-tag:hover {
            background: #e0e0e0;
            transform: translateX(3px);
        }
       
        .fp-tag-title {
            font-weight: 600;
            color: #333;
            display: block;
            margin-bottom: 3px;
            font-size: 0.85em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
       
        /* Hashtags */
        .fp-hashtags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
       
        .fp-hashtag {
            background: white;
            border: 1px solid #333;
            color: #333;
            padding: 5px 10px;
            font-size: 0.9em;
            font-weight: 600;
            border-radius: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
            display: inline-block;
        }
       
        .fp-hashtag:hover {
            background: #333;
            color: white;
        }
       
        /* Footer */
        .fp-footer {
            background: white;
            border: 2px solid #333;
            padding: 15px;
            text-align: center;
            color: #666;
            font-style: italic;
            font-size: 0.9em;
        }
       
        @media (max-width: 600px) {
            .header-layout {
                grid-template-columns: 1fr;
                gap: 15px;
            }
           
            .fp-cover {
                width: 100%;
                max-width: 200px;
                margin: 0 auto;
            }
           
            .fp-title {
                font-size: 1.5em;
            }
           
            .fp-meta {
                grid-template-columns: repeat(2, 1fr);
            }
           
            .fp-characters,
            .fp-tags {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="fandom-page">
        <!-- Header -->
        <div class="fp-header">
            <div class="header-layout">
                <img src="https://upforme.ru/uploads/001c/82/f2/10/107525.jpg" alt="Обложка" class="fp-cover">
               
                <div class="fp-info">
                    <h1 class="fp-title">The man I was promised</h1>
                   
                    <div class="fp-meta">
                        <div class="fp-meta-item">
                            <div class="fp-meta-label">Рейтинг</div>
                            <div class="fp-meta-value"><span class="fp-rating">Explicit</span></div>
                        </div>
                        <div class="fp-meta-item">
                            <div class="fp-meta-label">Статус</div>
                            <div class="fp-meta-value">Ongoing</div>
                        </div>
                        <div class="fp-meta-item">
                            <div class="fp-meta-label">Главы</div>
                            <div class="fp-meta-value">∞</div>
                        </div>
                        <div class="fp-meta-item">
                            <div class="fp-meta-label">Вселенная</div>
                            <div class="fp-meta-value">Kindred Spirits</div>
                        </div>
                        <div class="fp-meta-item">
                            <div class="fp-meta-label">Жанр</div>
                            <div class="fp-meta-value">Angst, Romance</div>
                        </div>
                        <div class="fp-meta-item">
                            <div class="fp-meta-label">Пейринг</div>
                            <div class="fp-meta-value">Rosenclaire</div>
                        </div>
                    </div>
                   
                    <div class="fp-tags" style="margin-top: 15px;">
                        <div class="fp-tag">
                            <span class="fp-tag-title">Отношения</span>
                            Toxic Love / Codependency
                        </div>
                        <div class="fp-tag">
                            <span class="fp-tag-title">Персонажи</span>
                            Фарид / Ленни
                        </div>
                        <div class="fp-tag">
                            <span class="fp-tag-title">Предупреждения</span>
                            Emotional Abuse, Violence
                        </div>
                        <div class="fp-tag">
                            <span class="fp-tag-title">Тема</span>
                            Пара / Слэш
                        </div>
                        <div class="fp-tag">
                            <span class="fp-tag-title">Сеттинг</span>
                            Magical Academy
                        </div>
                        <div class="fp-tag">
                            <span class="fp-tag-title">Динамика</span>
                            Power Play
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
        <!-- Summary -->
        <div class="fp-summary">
            <p>Иногда людей связывает не сходство, а совпадение трещин.</p>
            <p>Фарид и Ленни встречаются трижды — и каждая из этих встреч меняет их сильнее, чем должна была бы. Между ними возникает связь, в которой холод и уязвимость цепляются друг за друга, не оставляя пространства для безопасной близости.</p>
            <p>Один привык прятать боль глубоко внутри и не называть её вслух. Другой живёт так, будто всё должно быть видно сразу — каждое чувство, каждый надлом. Они причиняют друг другу боль, путая её с честностью, и снова и снова пытаются удержать то, что рассыпается у них в руках.</p>
            <p>Где-то между <em>«иди нахер»</em> и <em>«я всё для тебя сделаю»</em> живёт их любовь — тяжёлая, болезненная, почти невозможная к исправлению. Любовь, которая не спасает, но не отпускает.</p>
        </div>
       
        <!-- Hashtags -->
        <div class="fp-section">
            <div class="fp-hashtags">
                <span class="fp-hashtag">#мыопятьпоссорились</span>
                <span class="fp-hashtag">#спаситезаебал</span>
                <span class="fp-hashtag">#янедоговорил</span>
                <span class="fp-hashtag">#на_коЛенни</span>
                <span class="fp-hashtag">#тыобещал</span>
                <span class="fp-hashtag">#раздевайся</span>
                <span class="fp-hashtag">#ToxicLove</span>
                <span class="fp-hashtag">#FaridAndLenny</span>
            </div>
        </div>
       
        <!-- Footer -->
        <div class="fp-footer" style="text-align: center !important;">
            <p style="text-align: center !important; margin: 5px 0;">✦ Скоро во всех книжных страны | Сильнее любви, дороже дружбы ✦</p>
            <p style="text-align: center !important; margin: 5px 0;">The clock is set for nine but you know you're gonna make it eight</p>
            <p style="text-align: center !important; margin: 5px 0;">So that you two can take some time, teach each other to reciprocate</p>
        </div>
    </div>
   
    <script>
        // Character box toggle
        document.querySelectorAll('.fp-char').forEach(char => {
            char.addEventListener('click', function() {
                this.classList.toggle('active');
            });
        });
       
        // Image zoom on click
        const cover = document.querySelector('.fp-cover');
        if (cover) {
            cover.addEventListener('click', function() {
                this.classList.toggle('zoomed');
            });
        }
       
        // Lion roar VISUAL effect on title click
        const title = document.querySelector('.fp-title');
        if (title) {
            title.addEventListener('click', function() {
                // Создаем элемент с текстом "РЫЫЫЫ"
                const roarText = document.createElement('div');
                roarText.className = 'roar-text';
                roarText.textContent = 'РЫЫЫЫ!!!';
                document.body.appendChild(roarText);
               
                // Удаляем элемент после анимации
                setTimeout(() => {
                    roarText.remove();
                }, 2000);
               
                // Добавляем тряску заголовка
                this.classList.add('shake');
                setTimeout(() => {
                    this.classList.remove('shake');
                }, 600);
            });
        }
    </script>
</body>
</html>[/html]

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">
    <style>
        #game-wrapper {
            max-width: 800px; width: 95%; margin: 10px auto; border: 4px solid #ff85a2;
            background: #fff0f3; padding: 20px; font-family: 'Comfortaa', cursive;
            text-align: center; border-radius: 25px; box-sizing: border-box;
            box-shadow: 0 15px 35px rgba(255, 133, 162, 0.4);
            position: relative; min-height: 550px; overflow: hidden;
            display: flex; flex-direction: column; justify-content: center;
        }
        .main-title {
            font-size: 85px; margin: 0; color: #ff4d6d; font-weight: 900;
            text-transform: uppercase; text-shadow: 4px 4px 0px #fff;
            animation: titlePulse 3s infinite ease-in-out; line-height: 0.9;
        }
        .subtitle { color: #a4133c; font-size: 22px; margin: 20px 0 25px 0; font-weight: bold; }
        @keyframes titlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
       
        #menu-screen, #win-screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #fff0f3; z-index: 200; display: flex; flex-direction: column;
            justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;
        }
        #win-screen { display: none; z-index: 300; }
       
        .char-select-container { display: flex; gap: 40px; }
        .char-card {
            cursor: pointer; padding: 25px; background: white; border: 4px solid #ffe5ec;
            border-radius: 35px; transition: 0.3s;
        }
        .char-card:hover { border-color: #ff4d6d; transform: translateY(-10px); }
        .char-card img { width: 120px; }
        .char-card span { font-weight: bold; color: #590d22; font-size: 24px; }

        #score-board { font-size: 30px; color: #590d22; font-weight: 900; margin-bottom: 20px; display: none; }
        #arena {
            position: relative; width: 100%; aspect-ratio: 2 / 1;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            border: 4px solid #ffb3c1; border-radius: 20px; overflow: hidden; display: none;
        }
        .character { position: absolute; width: 12%; z-index: 2; }
        #heart { position: absolute; width: 6%; z-index: 3; filter: drop-shadow(0 0 5px white); }
       
        .falling-heart {
            position: absolute; color: #ff4d6d; font-size: 20px;
            user-select: none; pointer-events: none; z-index: 400;
            animation: fall linear forwards;
        }
        @keyframes fall {
            to { transform: translateY(600px) rotate(360deg); opacity: 0; }
        }

        .bubble {
            position: absolute; background: white; border: 2px solid #333;
            border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: bold;
            white-space: nowrap; z-index: 50; pointer-events: none;
        }
        .up-anim { animation: fadeUp 1.5s forwards; }
        .down-anim { animation: fadeDown 1.5s forwards; }
        @keyframes fadeUp { 0% { opacity: 0; } 15% { opacity: 1; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(-50px); } }
        @keyframes fadeDown { 0% { opacity: 0; } 15% { opacity: 1; transform: translateY(10px); } 100% { opacity: 0; transform: translateY(50px); } }
       
        .btn-restart { padding: 15px 40px; background: #ff4d6d; color: white; border: none; border-radius: 40px; font-weight: bold; cursor: pointer; font-size: 20px; box-shadow: 0 6px 0 #c9184a; }
    </style>
</head>
<body>

<div id="game-wrapper">
    <div id="menu-screen">
        <h1 class="main-title">Антивалентинка</h1>
        <p class="subtitle">Кто будет защищать границы?</p>
        <div class="char-select-container">
            <div class="char-card" onclick="startGame('lenny')">
                <img src="https://i.ibb.co/pjqQtqwC/SP-Studio-1.png"><br><span>Ленни</span>
            </div>
            <div class="char-card" onclick="startGame('farid')">
                <img src="https://i.ibb.co/RpjBQkJV/SP-Studio.png"><br><span>Фарид</span>
            </div>
        </div>
    </div>

    <div id="score-board">ЛЕННИ <span id="s_lenny">0</span> : <span id="s_farid">0</span> ФАРИД</div>
   
    <div id="arena">
        <img id="lenny" class="character" src="https://i.ibb.co/pjqQtqwC/SP-Studio-1.png" style="left:2%; top:40%;">
        <img id="farid" class="character" src="https://i.ibb.co/RpjBQkJV/SP-Studio.png" style="right:2%; top:40%;">
        <img id="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/64px-Heart_coraz%C3%B3n.svg.png" style="left:47%; top:45%;">
    </div>

    <div id="win-screen">
        <h2 id="final-score-text" style="font-size: 60px; color: #590d22; margin-bottom: 10px;">10 : 10</h2>
        <div class="char-select-container">
             <img src="https://i.ibb.co/pjqQtqwC/SP-Studio-1.png" style="width: 110px;">
             <img src="https://i.ibb.co/RpjBQkJV/SP-Studio.png" style="width: 110px;">
        </div>
        <p style="font-size: 28px; color: #ff4d6d; font-weight: bold; margin: 25px;">...а они всё равно вместе!</p>
        <button class="btn-restart" onclick="location.reload()">Играть снова</button>
    </div>
</div>

<script>
    var lennyY = 40, faridY = 40, heartX = 47, heartY = 45;
    var heartVX = 0, heartVY = 0;
    var scoreLenny = 0, scoreFarid = 0;
    var player = null, ai = null, aiTargetY = 40;
    var keys = {}, timerId = null;

    const phrasesLenny = ["сам себя люби", "надоел", "заебал", "пф-пф-пф", "не пялься", "отвали", "фу!", "не сегодня", "варю зелье", "личные границы!", "бесишь!", "ой, всё..."];
    const phrasesFarid = ["ты звездочка", "люблю тебя", "какой ты красивый", "вижу тебя во снах", "мур", "солнышко", "люблю до луны!", "свет моих глаз", "лети ко мне!", "ты — чудо"];

    window.addEventListener("keydown", e => { keys[e.key] = true; if(e.key.includes("Arrow")) e.preventDefault(); });
    window.addEventListener("keyup", e => { keys[e.key] = false; });

    function createBubble(id) {
        const arena = document.getElementById("arena"), char = document.getElementById(id), bubble = document.createElement("div");
        bubble.className = "bubble";
        bubble.innerText = (id === "lenny" ? phrasesLenny : phrasesFarid)[Math.floor(Math.random() * (id === "lenny" ? phrasesLenny : phrasesFarid).length)];
        let top = parseFloat(char.style.top);
        if (top < 15) { bubble.style.top = (top + 15) + "%"; bubble.classList.add("down-anim"); }
        else { bubble.style.top = (top - 8) + "%"; bubble.classList.add("up-anim"); }
        bubble.style.left = id === "lenny" ? "14%" : "65%";
        arena.appendChild(bubble);
        setTimeout(() => bubble.remove(), 1500);
    }

    function spawnFallingHearts() {
        const container = document.getElementById("game-wrapper");
        setInterval(() => {
            const h = document.createElement("div");
            h.className = "falling-heart";
            h.innerHTML = "❤"; //  классическое сердце
            h.style.left = Math.random() * 100 + "%";
            h.style.top = "-50px";
            h.style.fontSize = (Math.random() * 20 + 20) + "px";
            h.style.animationDuration = (Math.random() * 2 + 2) + "s";
            h.style.opacity = Math.random();
            container.appendChild(h);
            setTimeout(() => h.remove(), 4000);
        }, 150);
    }

    function resetHeart(side) {
        heartX = 47; heartY = 45;
        heartVX = (side === 'lenny' ? -0.85 : 0.85);
        heartVY = (Math.random() > 0.5 ? 0.5 : -0.5);
    }

    function startGame(sel) {
        document.getElementById("menu-screen").style.display = "none";
        document.getElementById("arena").style.display = "block";
        document.getElementById("score-board").style.display = "block";
        player = sel; ai = (sel === "lenny" ? "farid" : "lenny");
        resetHeart('farid');
        gameLoop();
    }

    function gameLoop() {
        if (scoreLenny >= 10 || scoreFarid >= 10) {
            document.getElementById("win-screen").style.display = "flex";
            document.getElementById("final-score-text").innerText = scoreLenny + " : " + scoreFarid;
            spawnFallingHearts();
            return;
        }

        if (player === "lenny") { if (keys["ArrowUp"]) lennyY -= 1.8; if (keys["ArrowDown"]) lennyY += 1.8; }
        else { if (keys["ArrowUp"]) faridY -= 1.8; if (keys["ArrowDown"]) faridY += 1.8; }

        if (Math.random() < 0.12) aiTargetY = heartY - 6;
        if (ai === "lenny") lennyY += (aiTargetY - lennyY) * 0.08;
        else faridY += (aiTargetY - faridY) * 0.08;

        lennyY = Math.max(0, Math.min(75, lennyY));
        faridY = Math.max(0, Math.min(75, faridY));
        heartX += heartVX; heartY += heartVY;

        if (heartY <= 0 || heartY >= 92) heartVY *= -1;

        if (heartX <= 14 && heartX >= 8 && heartY > lennyY - 5 && heartY < lennyY + 18 && heartVX < 0) {
            heartVX = Math.abs(heartVX) * 1.03; heartVY *= 1.03; createBubble("lenny");
            heartX = 14.1;
        }
        if (heartX >= 80 && heartX <= 86 && heartY > faridY - 5 && heartY < faridY + 18 && heartVX > 0) {
            heartVX = -Math.abs(heartVX) * 1.03; heartVY *= 1.03; createBubble("farid");
            heartX = 79.9;
        }

        if (heartX < -5) { scoreFarid++; updateScore(); resetHeart('farid'); }
        else if (heartX > 100) { scoreLenny++; updateScore(); resetHeart('lenny'); }

        document.getElementById("lenny").style.top = lennyY + "%";
        document.getElementById("farid").style.top = faridY + "%";
        document.getElementById("heart").style.left = heartX + "%";
        document.getElementById("heart").style.top = heartY + "%";
        timerId = requestAnimationFrame(gameLoop);
    }

    function updateScore() {
        document.getElementById("s_lenny").innerText = scoreLenny;
        document.getElementById("s_farid").innerText = scoreFarid;
    }
</script>
</body>
</html>[/html]

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=EB+Garamond:ital,wght@0,400;1,400&display=swap');

#lenni-wrap { font-family: 'EB Garamond', Georgia, serif; max-width: 640px; margin: 0 auto; }

/* ===== ОБЛОЖКА ===== */
#lenni-cover {
  position: relative;
  width: 100%;
  height: 480px;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f0e17 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.7s ease, height 0.7s ease;
}

#lenni-cover.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
}

#lenni-cover::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(10,8,20,0.95), transparent);
  z-index: 1;
  pointer-events: none;
}

/* ===== СЛЁЗЫ ===== */
.lenni-tears {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.lenni-tear {
  position: absolute;
  top: -40px;
  width: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(to bottom, transparent, rgba(190,210,255,0.35), transparent);
  animation: lenni-fall linear infinite;
}

.lenni-tear::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(200,220,255,0.25);
}

.lenni-tear:nth-child(1)  { left: 4%;  height: 28px; animation-duration: 3.1s; animation-delay: 0s; }
.lenni-tear:nth-child(2)  { left: 10%; height: 22px; animation-duration: 2.5s; animation-delay: 0.4s; opacity: 0.7; }
.lenni-tear:nth-child(3)  { left: 17%; height: 32px; animation-duration: 3.6s; animation-delay: 1.1s; }
.lenni-tear:nth-child(4)  { left: 24%; height: 20px; animation-duration: 2.8s; animation-delay: 0.7s; opacity: 0.5; }
.lenni-tear:nth-child(5)  { left: 31%; height: 26px; animation-duration: 3.3s; animation-delay: 1.8s; }
.lenni-tear:nth-child(6)  { left: 38%; height: 34px; animation-duration: 2.6s; animation-delay: 0.2s; opacity: 0.8; }
.lenni-tear:nth-child(7)  { left: 45%; height: 24px; animation-duration: 3.8s; animation-delay: 1.4s; }
.lenni-tear:nth-child(8)  { left: 52%; height: 30px; animation-duration: 2.9s; animation-delay: 0.9s; opacity: 0.6; }
.lenni-tear:nth-child(9)  { left: 59%; height: 22px; animation-duration: 3.4s; animation-delay: 2.1s; }
.lenni-tear:nth-child(10) { left: 66%; height: 28px; animation-duration: 2.7s; animation-delay: 0.5s; opacity: 0.75; }
.lenni-tear:nth-child(11) { left: 72%; height: 36px; animation-duration: 3.2s; animation-delay: 1.6s; }
.lenni-tear:nth-child(12) { left: 79%; height: 20px; animation-duration: 2.4s; animation-delay: 0.3s; opacity: 0.55; }
.lenni-tear:nth-child(13) { left: 85%; height: 26px; animation-duration: 3.7s; animation-delay: 1.0s; }
.lenni-tear:nth-child(14) { left: 91%; height: 30px; animation-duration: 3.0s; animation-delay: 2.3s; opacity: 0.7; }
.lenni-tear:nth-child(15) { left: 97%; height: 24px; animation-duration: 2.6s; animation-delay: 0.8s; }
.lenni-tear:nth-child(16) { left: 7%;  height: 18px; animation-duration: 3.5s; animation-delay: 1.9s; opacity: 0.45; }
.lenni-tear:nth-child(17) { left: 20%; height: 32px; animation-duration: 2.3s; animation-delay: 0.6s; }
.lenni-tear:nth-child(18) { left: 35%; height: 22px; animation-duration: 3.9s; animation-delay: 1.3s; opacity: 0.6; }
.lenni-tear:nth-child(19) { left: 55%; height: 28px; animation-duration: 2.8s; animation-delay: 2.5s; }
.lenni-tear:nth-child(20) { left: 75%; height: 20px; animation-duration: 3.1s; animation-delay: 0.1s; opacity: 0.5; }

@keyframes lenni-fall {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(520px); opacity: 0; }
}

/* ===== ТЕКСТ ОБЛОЖКИ ===== */
.lenni-cover-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 32px 48px;
}

.lenni-cover-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(200,190,220,0.45);
  margin-bottom: 10px;
}

.lenni-cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 42px;
  line-height: 1.05;
  margin-bottom: 28px;
  color: rgba(230,220,245,0.9);
}

.lenni-cover-title em {
  font-style: italic;
  color: rgba(180,160,210,0.7);
}

.lenni-hint {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(200,190,220,0.4);
  letter-spacing: 2px;
  animation: lenni-pulse 3s ease-in-out infinite;
}

@keyframes lenni-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}

/* ===== ТЕКСТ ===== */
#lenni-story {
  display: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}

#lenni-story.visible { opacity: 1; }

.lenni-inner { padding: 48px 16px 80px; }

.lenni-back {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8a7b6a;
  cursor: pointer;
  margin-bottom: 36px;
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
}

.lenni-back:hover { color: #5c3d2e; }

.lenni-img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.lenni-img.show { opacity: 1; transform: translateY(0); }

.lenni-day {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #8a7b6a;
  margin-bottom: 10px;
}

.lenni-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 40px;
  line-height: 1.1;
  color: #1a1510;
  margin-bottom: 20px;
}

.lenni-h1 em { font-style: italic; color: #5c3d2e; }

.lenni-divider {
  width: 40px;
  height: 1px;
  background: #8a7b6a;
  opacity: 0.4;
  margin-bottom: 36px;
}

.lenni-p {
  font-size: 17px;
  line-height: 1.9;
  color: #1a1510;
  margin-bottom: 1.5em;
  text-align: justify;
}

.lenni-p.drop::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2em;
  line-height: 0.8;
  float: left;
  margin-right: 0.08em;
  margin-top: 0.05em;
  color: #5c3d2e;
  font-weight: 300;
}

.lenni-footer {
  margin-top: 56px;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  letter-spacing: 4px;
  color: #8a7b6a;
}

.fi {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fi.show { opacity: 1; transform: translateY(0); }
</style>

<div id="lenni-wrap">

  <div id="lenni-cover" onclick="lenniOpen()">
    <div class="lenni-tears">
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
      <div class="lenni-tear"></div>
    </div>
    <div class="lenni-cover-text">
      <p class="lenni-cover-label">День второй</p>
      <h2 class="lenni-cover-title">Хрупкая<br><em>пустота</em></h2>
      <p class="lenni-hint">нажмите, чтобы читать</p>
    </div>
  </div>

  <div id="lenni-story">
    <div class="lenni-inner">

      <span class="lenni-back" onclick="lenniClose()">← Обложка</span>

      <img class="lenni-img" id="lenni-pic" src="https://upforme.ru/uploads/001c/82/f2/10/19375.jpg" alt="">

      <div class="fi" id="lfi0">
        <p class="lenni-day">День второй</p>
        <h1 class="lenni-h1">Хрупкая<br><em>пустота</em></h1>
        <div class="lenni-divider"></div>
      </div>

      <p class="lenni-p drop fi" id="lfi1">Всего второй день, а в голове хрупкая пустота. Ленни сидит над книгой, перечитывает раз за разом один и тот же абзац, затем прикрывает глаза и с омерзением разворачивает книгу другой стороной. Он разрешил Фариду заниматься своими танцульками, раз уж тому так хочется, но разве Фарид имел право улетать? Разве фамильяр не обязан быть рядом, прикрывая ведьмака от невзгод, буллинга, от взглядов и тревог, которые без него густым дёгтем варятся. Пальцы скользнули под оправу и сжали веки. Ленни смахнул очки с носа, отложил их в сторону и перевёл взгляд за окно.</p>

      <p class="lenni-p fi" id="lfi2">«Моё разрешение не твоя блажь.»</p>

      <p class="lenni-p fi" id="lfi3">Волны бьются о скалы и почти летний солёный воздух лезет в ноздри, пощипывая где-то в переносице. Ленни кажется, что во всём виноват океан, но по правде говоря, всё дело в слезах, которые незаметно сочатся по внутренней складке глаза и проникают в нос, сдавливая там тяжестью и болью. Сглотнув комок в горле, Ленни снова подтягивает карандаш и пишет на другом листке для записок: «Если ты не развернёшь самолёт, если не сядешь на обратный, я...» Он не дописывает. Комкает бумажку и бросает в небольшую коробку. Фарид хотел в неё собирать мысли Ленни, пока они будут в разлуке, но все мысли сводились к одной болезненной.</p>

      <p class="lenni-p fi" id="lfi4">«Если ты умрёшь, умру и я. Но я тебя уже хоронил и привычен. Что если я не доживу? Что если моё сердце остановится от тоски? Что если я...» Листочек небольшой, для всех мыслей места не хватает, и Ленни снова его комкает и кидает в коробку.</p>

      <p class="lenni-p fi" id="lfi5">«Самый большой страх для меня, что тебе не нужно будет возвращаться.»</p>

      <p class="lenni-p fi" id="lfi6">Ленни смотрит на экран телефона, видит набегающие цифры сообщений рядом с его именем и не хочет читать. Не хочет радовать своим согласием на эту ситуацию. Да, он сам сказал: катись, если это так важно. Но сам же думал, что нет ничего важнее их силы. Неужели Фариду это так трудно понять? Он пытается завоевать весь мир, львиной лапой отметить подмостки, а что остаётся Ленни? Учебники, лаборатория и ощущение песка на зубах. Ни капли ценности в глазах своего фамильяра. Удобная игрушка для постели и только.</p>

      <p class="lenni-p fi" id="lfi7">Ленни смахивает со стола карандаш и блок бумаги, дышит тяжело и прерывисто, а затем поднимает всё, что уронил, и кладёт на место. Поправляет, чтобы карандаш лежал строго параллельно полоске учебника, трогает бутылочки в подставке, выравнивает их по этикеткам, смахивает пылинку и косится на экран телефона. Не хочет читать, не хочет видеть и прощать тоже не хочет. Танцы — это здорово, это призвание Фарида, его мечта, то, что выдернуло его из дома и дало смысл жизни. Однако всё это относится и к Ленни — почему он не чувствует того же? Откуда такая жестокость.</p>

      <p class="lenni-p fi" id="lfi8">Очки отодвигаются к краю стола. Намеренным движением Ленни роняет их на пол и хочет растоптать, как уважение к себе. Никакой ценности, ничего не осталось — что было, всё растерял. Не удивительно, что столько фамильяров было, а истинный уехал работать: с ним же скучно, с ним трудно, он неудобный камень в мочеточнике. Только когда выдавишь струёй — наступит облегчение. Фарид там наверняка счастлив.</p>

      <p class="lenni-p fi" id="lfi9">— Козлина, — трёт Ленни нос и срывается дописать записку.</p>

      <p class="lenni-p fi" id="lfi10">«Я больше, чем просто человек. Я ведьмак и я приказываю. Вернись ко мне.»</p>

      <div class="lenni-footer fi" id="lfi11">✦ &nbsp; &nbsp; ✦ &nbsp; &nbsp; ✦</div>

    </div>
  </div>

</div>

<script>
function lenniOpen() {
  var cover = document.getElementById('lenni-cover');
  var story = document.getElementById('lenni-story');
  cover.classList.add('hidden');
  story.style.display = 'block';
  setTimeout(function() { story.classList.add('visible'); }, 50);
  setTimeout(function() { document.getElementById('lenni-pic').classList.add('show'); }, 200);
  var els = story.querySelectorAll('.fi');
  for (var i = 0; i < els.length; i++) {
    (function(el, idx) {
      setTimeout(function() { el.classList.add('show'); }, 350 + idx * 120);
    })(els[i], i);
  }
}

function lenniClose() {
  var cover = document.getElementById('lenni-cover');
  var story = document.getElementById('lenni-story');
  story.classList.remove('visible');
  cover.classList.remove('hidden');
  setTimeout(function() {
    story.style.display = 'none';
    document.getElementById('lenni-pic').classList.remove('show');
    var els = story.querySelectorAll('.fi');
    for (var i = 0; i < els.length; i++) els[i].classList.remove('show');
  }, 750);
}
</script>

[/html]