[html]

<div class="cinema-wrapper">

  <div class="cinema-card">

    <div class="cinema-screen">
      <div class="cinema-text">
        <div class="cinema-title">NOW SHOWING</div>

        <div class="cinema-content">
          <div class="cinema-log">
<br>

             <div class="log-entry">
    <span class="time-badge">16:21</span>
    Автомобиль Шона останавливается на парковке кинотеатра “Синема Холл”. Водитель и пассажир даже не замечают, что доехали до места, слишком уж увлечены своим излюбленным магическим экспериментом, а точнее – сотворением конфликта из нихуя.  <br>
– Хоо, а ты вспомни, как легко и задорно променял меня на сшивку, сучоныш)) Это еще кто от кого бежит)) – заявляет Клайд, сервируя свое утверждение на чистенькой фарфоровой улыбочке.<br>
   Шон невозмутимо пожимает плечами:<br>
– В тот раз я потерял из-за тебя руку. Может ты не знал, но даже одной отрубленной руки вполне достаточно, чтобы спровоцировать холодок в отношениях.

  </div>

  <div class="log-entry">
    <span class="time-badge">16:22</span>
   Двери авто открываются синхронно, как в дешевом боевике, выпуская наружу две высоченные проблемы. Проблема пошире продолжает:<br>
– При любых других обстоятельствах ты оставляешь меня первым. Вот даже сейчас, спорим, если тебе не понравится это свидание – ты даже досиживать не будешь?<br>
– Пфффф, если спорим на желание – го))) – Клайд небрежно хлопает дверью и с той же смелой небрежностью соглашается на пари. Спустя пару шагов он резко останавливается, с явным запозданием изгибая бровь:<br>
– Свидание?)))

  </div>

  <div class="log-entry">
    <span class="time-badge">16:27</span>
   Приобретя билеты на сеанс, они принимаются за выбор закусок для лучшего усвоения фильма. Шон ограничивается колой без сахара и пачкой начос. Клайд ограничивается едким комментарием в отношении его выбора. <br>
– Слушай, жрать попкорн я не хочу. У него запах, как у тигриной мочи, – ступая к кинозалу, хмуро поясняет Шон. Лицо Клайда невольно сознается, что его обладатель многого не знал о тиграх. Попкорн он покупает в ту же минуту  – исключительно из вредительских соображений.

  </div>

  <div class="log-entry">
    <span class="time-badge">16:40</span>
   В полупустом кинозале крутят трейлеры к будущим кинопремьерам. Увидев в одном из роликов морду Шерхана, Клайд открывает рот, готовый выдать свежеиспеченную колкость. Тут же получает горсть попкорна, субсидированную пятерней Шона. Закрывает рот.
  </div>

  <div class="log-entry">
    <span class="time-badge">16:55</span>
   Начинается фильм. С первых кадров становится понятно, что ничего не понятно. Актеры пытаются говорить, но вместо этого зачем-то поют. Декорации заранее сдались и ничего не пытаются. Под драматическое завывание главного героя Клайд медленно поворачивает голову в сторону Шона. Шон отчаянно мимикрирует под обивку кресла и предпочитает не отвечать ему взаимностью. И не дышать. Он с запозданием вспоминает, что Клайд физически не переносит живое пение, каждый раз предпочитая делать его мертвым.
  </div>

  <div class="log-entry">
    <span class="time-badge">16:58</span>
    Шон узнает о себе много нового. В том числе свою новообретенную видовую принадлежность, свой предполагаемый ареал обитания, в который ему настоятельно рекомендуют вернуться, а так же уровень своего интеллекта по шкале от “долбаеб” до “тупорылая паскуда”. Он тихо поражается тому, с какой безупречной улыбкой можно осведомлять его о столь антинаучных вещах.
  </div>

  <div class="log-entry">
    <span class="time-badge">17:27</span>
    Наблюдая за экранным пением, Клайд испытывает внутричерепные колики и сильные межполушарные спазмы, что приводит его улыбку в болезненный прайм. Пальцы стискивают подлокотники. Зубы давят зубы. Стоит уточнить – он не просто не любит мюзиклы и живое пение. Он реагирует на них так же, как дьявол на распятие или как вампир на связку чеснока.
  </div>

  <div class="log-entry">
    <span class="time-badge">17:29</span>
    Шон тем временем обнаруживает, что приобретенная им кола без сахара сильно разбавлена водой, из-за чего больше походит на мочу зубных фей. Про себя он отмечает, что слишком многое в кинотеатре напоминает ему чью-то мочу.
  </div>

  <div class="log-entry">
    <span class="time-badge">18:05</span>
    Вокальная экзекуция доводит Клайда до позыва срочно эвакуироваться из зоны поражения своих ушных раковин. Он ощущает крайне болезненные психомоторные переживания в ответ на затянутый музыкальный номер героини фильма, из-за чего выкрикивает, щерясь в экран, прямая цитата:<br>
– Да порви ты уже свой сучий хлебальник!!)))

  </div>

  <div class="log-entry">
    <span class="time-badge">18:06</span>
    В только-только завязавшийся разговор Клайда и экранной женщины вмешивается зритель, сидящий спереди. Пыша вахтерским недовольством, он с нежной вкрадчивостью свистка парохода шикает “ТИШШШШШШЕЕЕЕ”. Шон галантно извиняется. Клайд галантно посылает непрошеного собеседника на хуй.
  </div>

  <div class="log-entry">
    <span class="time-badge">18:38</span>
   Пение разбавляется длинными монологами, ведущими к жизнеутверждающему нихуя. Шон пытается отследить суть происходящего, вязнет в длинных планах, вычурных кадрах и загустевающем саспенсе. Вокруг героев все сгущаются и сгущаются тучи, появляются тревожные намеки, один кадр сменяется другим, и вот, сейчас!..<br>
Шон взволнованно выдыхает:<br>
–  Хрррр…
  </div>

  <div class="log-entry">
    <span class="time-badge">18:55</span>
   Люди на экране все так же бездарно поют, игнорируя эксклюзивную возможность заткнуться. Ни секунды для передышки, никаких эмоциональных качелей от дурного к хорошему – состояние фильма стабильно критическое. Если бы ни пари – Клайд давно бы уже катапультировался из зала вместе с креслом. Чтобы хоть как-то облегчить свою участь и отвлечься, он начинает пинать спинку кресла перед собой. Как ни странно, жертву этой сейсмической активности подобный расклад не устраивает:<br>
– Вы что себе позволяете?? Прекратите, дайте досмотреть! <br>
Клайд моментально входит в чужое положение и максимально участливо посылает его к ебене матери.

  </div>

  <div class="log-entry">
    <span class="time-badge">19:34</span>
    Клайд наклоняется к уху Шона и, понизив голос, уточняет: <br>
– Ты что, заснул, сучий ты потрох?)))<br>
Шон, не меняясь в лице, протестующе заверяет: <br>
– Хррррррппппфф...
  </div>

  <div class="log-entry">
    <span class="time-badge">20:03</span>
   Шон выныривает из забытья, ощутив, что в его ноздрях поселились два куска попкорна и стойкий аромат тигриной мочи, а в барабанные перепонки стучится мужчина с переднего ряда. На экране поют про вечную любовь, а этот тип орет про вечную ненависть к окружающим:<br>
– Вы в общественном месте! Как вам не стыдно! Чему вас ваша мать учила, а?! Вы нарушаете покой других людей!<br>
Попкорн валяется под ногами, начос рассыпан по креслам — весь ряд похож на поле боя, где закуски проиграли войну.
  </div>

  <div class="log-entry">
    <span class="time-badge">20:04</span>
   С виду Клайд ничего не делает, просто сидит в своем кресле, взирая на орущего зрителя. Однако в его безумном оскале различимы 32 уголовных дела, состав которых он готов реализовать прямо сейчас. Он изведен фильмом, бесконечным пением и скукой, что несовместимо с пульсом орущего на него мужика. Он наклоняет корпус вперед..
  </div>

  <div class="log-entry">
    <span class="time-badge">20:05</span>
   У Шона не более двух секунд, чтобы предотвратить убийство, и решение приходит вместе с тем, как он вплетает свои пальцы в волосы Клайда, поворачивает его к себе, и, не давая опомниться, целует. Сминает губы яростно и порывисто, заставляет забыть обо всем, даже себя, почти рычит, дыхание в дыхание, прямо перед шокированным зрителем. <br>
В конце-концов, это ведь свидание?
  </div>

  <div class="log-entry">
    <span class="time-badge">20:06</span>
   Расслабившись всем телом, Клайд смакует чужой язык, утрудив себя разве что демонстрацией среднего пальца заткнувшемуся зрителю. На экран с неохотой выползают титры. Клайд уже знает, какое желание потребует за чудом выигранное пари.

  </div>

  <div class="log-entry">
    <span class="time-badge">20:30</span>
   Зал пуст и темен
  </div>

  <div class="log-entry">
    <span class="time-badge">20:31</span>
   Прибыл Годжо Сатору
  </div>

          </div>
        </div>
      </div>
    </div>

    <img src="https://upforme.ru/uploads/001c/82/f2/62/569682.png" class="cinema-img">

  </div>

</div>

<style>

/* === ОБЁРТКА === */
.cinema-wrapper{
  display:flex;
  justify-content:center;
  margin:40px 0;
}

/* === КАРТОЧКА === */
.cinema-card{
  position:relative;
  display:inline-block;
  width:100%;
  max-width:700px;
}

/* картинка кинотеатра */
.cinema-img{
  width:100%;
  height:auto;
  display:block;
  position:relative;
  z-index:2;
  pointer-events:none;
}

/* === ЭКРАН === */
.cinema-screen{
  position:absolute;

  inset: 2% 8% 54% 8%;
  /* top right bottom left */

  padding:4%;

  z-index:1;
  overflow:visible;

  display:flex;
  flex-direction:column;

  background:
    linear-gradient(to right, rgba(160,160,160,.95), transparent 18%, transparent 82%, rgba(160,160,160,.95)),
    linear-gradient(to bottom, rgba(170,170,170,.25), transparent 25%),
    #fff;

  transition:.5s ease;
}

/* включение экрана */
.cinema-card:hover .cinema-screen {
  background:
    radial-gradient(
      ellipse at center,
      #151515 0%,
      #0f0f0f 55%,
      #0a0a0a 100%
    );
}

/* === ТЕКСТ === */
.cinema-text{

  display:flex;
  flex-direction:column;
  height:100%;
  opacity:0;
  color:#f2f2f2;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  transition:.5s;
}

.cinema-card:hover .cinema-text{
  opacity:1;
}

/* заголовок */
.cinema-title{
  font-size:20px;
  letter-spacing:3px;
  margin-bottom:20px;
  text-align:center;
}

/* СКРОЛЛ — самое важное */
.cinema-content{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  font-size:16px;
  line-height:1.6;
  padding-right:6px;
}

/* красивый скролл */
.cinema-content::-webkit-scrollbar{
  width:6px;
}
.cinema-content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.3);
  border-radius:4px;
}

/* записи */
.log-entry{
  margin-bottom:17px;
}

/* время */
.time-badge{
  display:inline-block;
  margin-right:8px;
  padding:2px 7px;
  font-size:15px;
  color:#ccc;
  background:#3a3a3a;
  border-radius:4px;
}

/* === МОБИЛКИ === */
/* на телефоне hover нет → экран всегда включён */
@media (max-width:768px){

  .cinema-screen{
    background:
      radial-gradient(
        ellipse at center,
        #151515 0%,
        #0f0f0f 55%,
        #0a0a0a 100%
      );

    overflow:hidden; /* экран фиксируем */
  }

  .cinema-text{
    opacity:1;
  }

  .cinema-title{
    font-size:16px;
  }

  .cinema-content{
    font-size:13px;

    height:100%;                /* вместо flex-растяжения */
    overflow-y:auto;
    -webkit-overflow-scrolling: touch; /* плавный iOS-скролл */
    overscroll-behavior: contain;      /* не дёргает страницу */
  }

}

</style>

[/html]

[html]<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>Дневник · Шон и Клайд</title>
    <!-- Подключаем шрифты -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700&family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            min-height: 100vh;
            background: #1c1410;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
            perspective: 2600px;
        }

        .book-wrapper {
            width: 100%;
            max-width: 800px;
            border-radius: 8px 24px 24px 8px;
            background: #2b1b12;
            padding: 14px 14px 14px 10px;
            background-image: linear-gradient(145deg, #3f2a1b 0%, #1f130b 80%);
        }

        .book-interior {
            background: #2b1d13;
            border-radius: 6px 20px 20px 6px;
            padding: 20px 20px 20px 14px;
            box-shadow: inset 0 0 15px #0a0603, inset 0 0 0 1px #63482e;
        }

        .flip-scene {
            position: relative;
            width: 100%;
            height: 650px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            transform-style: preserve-3d;
        }

        .page {
            position: absolute;
            width: 90%;
            max-width: 620px;
            height: 620px;
            border-radius: 0 8px 8px 0;
            box-shadow:
                0 10px 20px rgba(0,0,0,0.7),
                -10px 6px 18px rgba(0,0,0,0.8),
                inset 0 -3px 8px rgba(0,0,0,0.6);
            padding: 35px 30px 30px 40px;
            border-left: 4px solid #4f3824;
            border-right: 1px solid #4d3621;
            font-weight: 400;
            line-height: 1.7;
            word-break: break-word;
            backface-visibility: hidden;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.2, 0.95);
            cursor: default;
            transform-origin: left center;
            display: flex;
            flex-direction: column;
        }

        /* Тип первый (Шон — зелёный) — Literata + клетка */
        .page.character-one {
            background:
                radial-gradient(circle at 25% 25%, rgba(50, 80, 50, 0.4), transparent 60%),
                linear-gradient(160deg, #3b2f25, #1f3a2a);
            color: #e4dbc6;
            font-family: 'Literata', serif;
            border-left-color: #5b6e4b;
        }

        .page.character-one .page-lines {
            background-image:
                repeating-linear-gradient(transparent 0px, transparent 29px, #9b8a6b 29px, #9b8a6b 30px),
                repeating-linear-gradient(90deg, transparent 0px, transparent 29px, #9b8a6b 29px, #9b8a6b 30px);
            background-size: 30px 30px;
            opacity: 0.25;
        }

        /* Тип второй (Клайд — красный) — Cormorant */
        .page.character-two {
            background:
                radial-gradient(circle at 70% 30%, rgba(120, 0, 0, 0.25), transparent 60%),
                linear-gradient(#130c0c, #0b0505);
            color: #f1e7e7;
            font-family: 'Cormorant', serif;
            border-left-color: #7a3a3a;
        }

        .page.character-two .page-lines {
            background-image: repeating-linear-gradient(transparent 0px, transparent 30px, #a55a5a 30px, #a55a5a 31px);
            opacity: 0.2;
        }

        .page-content {
            position: relative;
            z-index: 5;
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            height: 100%;
        }

        /* Верхняя плашка с датой и именем */
        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            flex-shrink: 0;
        }

        /* Дата — с бабблом, как было */
        .date-plate {
            font-size: 25px;
            padding: 8px 24px;
            display: inline-block;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(2px);
            border: 1px solid currentColor;
            font-family: 'Caveat', cursive;
        }

        .character-one .date-plate {
            background: rgba(50,70,40,0.5);
            border-color: rgba(100,120,80,0.8);
            color: #f1f0e6;
            box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        }

        .character-two .date-plate {
            background: linear-gradient(90deg, #6e0f0f, #9b1c1c);
            border: none;
            color: #fff;
            box-shadow: 0 0 20px rgba(180,0,0,0.4), 0 10px 30px rgba(0,0,0,0.6);
        }

        /* Имена — без бабблов */
        .character-name {
            font-size: 30px;
            padding: 8px 24px;
            font-family: 'Caveat', cursive;
            text-transform: uppercase;
            letter-spacing: 3px;
            /* Убираем все стили баббла */
            background: none;
            backdrop-filter: none;
            border: none;
            box-shadow: none;
            border-radius: 0;
        }

        .character-one .character-name {
            color: #d4c5a6;
            text-shadow: 0 0 10px rgba(100, 150, 100, 0.5);
        }

        .character-two .character-name {
            color: #ffd7d7;
            text-shadow: 0 0 15px rgba(180, 0, 0, 0.5);
        }

        .entry-bubble {
            flex: 1 1 auto;
            min-height: 0;
            border-radius: 26px;
            padding: 25px 30px;
            overflow-y: auto;
            scrollbar-width: thin;
            box-sizing: border-box;
           
            &::-webkit-scrollbar {
                width: 8px;
            }
           
            &::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 10px;
            }
           
            &::-webkit-scrollbar-thumb {
                background: rgba(200, 180, 150, 0.3);
                border-radius: 10px;
                border: 2px solid rgba(0, 0, 0, 0.2);
            }
           
            &::-webkit-scrollbar-thumb:hover {
                background: rgba(200, 180, 150, 0.5);
            }
        }

        .character-one .entry-bubble {
            background: #3a4a36;
            box-shadow: 0 12px 28px rgba(0,0,0,0.2), inset 0 0 35px rgba(0,0,0,0.08);
            color: #e4dbc6;
            scrollbar-color: #9b8a6b #2a3a26;
        }

        .character-two .entry-bubble {
            background: rgba(15,0,0,0.6);
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 50px rgba(150,0,0,0.15);
            color: #f1e7e7;
            scrollbar-color: #a55a5a #2a0a0a;
        }

        .entry {
            font-size: 18px;
            line-height: 1.7;
            white-space: pre-wrap;
            user-select: text;
            padding-right: 5px;
        }

        .character-one .entry {
            font-weight: 400;
            font-size: 18px;
        }

        .character-two .entry {
            font-weight: 500;
            font-size: 22px;
            letter-spacing: 0.2px;
        }

        /* текстурный слой */
        .page::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="noise2"><feTurbulence baseFrequency="0.9 1.2" numOctaves="2" /><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0"/></filter><rect width="160" height="160" filter="url(%23noise2)" opacity="0.25"/></svg>');
            opacity: 0.2;
            pointer-events: none;
            border-radius: inherit;
            mix-blend-mode: multiply;
        }

        .page-lines {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        .page-num, .page::after {
            display: none;
        }

        .page.flipped-left {
            transform: rotateY(-170deg) translateZ(8px);
            box-shadow: -20px 8px 30px rgba(0,0,0,0.9);
            filter: brightness(0.75) sepia(0.3);
            z-index: 5;
        }

        .page.front-right {
            transform: rotateY(0deg) translateZ(30px);
            z-index: 30;
            box-shadow: 0 15px 35px rgba(0,0,0,0.9), -10px 10px 25px rgba(0,0,0,0.8);
        }

        .page.stack-left {
            transform: rotateY(0deg) translateX(-100%) translateZ(1px);
            opacity: 0;
            pointer-events: none;
            transition: none;
            box-shadow: none;
        }

        .gutter {
            position: absolute;
            width: 14px;
            height: 100%;
            left: 45%;
            top: 0;
            background: radial-gradient(ellipse at center, #3a281c 0%, #1b110a 100%);
            transform: translateX(-50%) rotateY(20deg);
            box-shadow: -3px 0 12px #0f0803, inset 0 0 6px #634b33;
            z-index: 50;
            pointer-events: none;
            border-radius: 20%;
        }

        .nav-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            margin-top: 30px;
            margin-bottom: 10px;
        }

        .nav-btn {
            background: #6b1e1e;
            border: 3px solid #2f140e;
            font-size: 2.1rem;
            font-weight: bold;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 8px 0 #2e110b, 0 0 15px #520000;
            transition: 0.08s linear;
            color: #f0cfb0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Caveat', monospace;
            text-shadow: 0 0 5px #ffb273;
        }

        .nav-btn:active {
            transform: translateY(6px);
            box-shadow: 0 2px 0 #2e110b, 0 0 20px #a13030;
        }

        .nav-btn.disabled {
            opacity: 0.3;
            pointer-events: none;
            box-shadow: 0 4px 0 #2e110b;
            transform: translateY(4px);
            filter: grayscale(0.7);
        }

        .page-indicator {
            background: #281e16;
            padding: 12px 32px;
            border-radius: 60px;
            font-size: 2rem;
            font-weight: bold;
            color: #dbbc96;
            box-shadow: inset 0 3px 10px #0e0804, 0 8px 0 #3e261b, 0 0 15px #4d1f1f;
            font-family: 'Caveat', cursive;
            border: 1px solid #7b4f31;
            min-width: 170px;
            text-align: center;
            text-shadow: 0 0 8px #ab5f2c;
        }

        .footer-note {
            text-align: center;
            color: #ac8a67;
            margin-top: 12px;
            font-family: 'Caveat';
            font-size: 1.4rem;
            letter-spacing: 2px;
            text-shadow: 0 0 8px #3b1c0c;
        }

        @media (max-width: 600px) {
            .book-wrapper {
                padding: 8px;
                border-radius: 4px 16px 16px 4px;
            }
           
            .flip-scene {
                height: 550px;
            }
           
            .page {
                height: 520px;
                padding: 20px 20px 20px 25px;
            }
           
            .page-header {
                flex-direction: column;
                gap: 10px;
                align-items: flex-start;
            }
           
            .entry-bubble {
                padding: 15px;
            }
           
            .nav-btn {
                width: 55px;
                height: 55px;
                font-size: 1.8rem;
            }
           
            .page-indicator {
                padding: 8px 16px;
                font-size: 1.5rem;
                min-width: 130px;
            }
           
            .date-plate {
                font-size: 20px;
                padding: 5px 18px;
            }
           
            .character-name {
                font-size: 24px;
                padding: 5px 18px;
            }
           
            .character-one .entry {
                font-size: 16px;
            }
           
            .character-two .entry {
                font-size: 18px;
            }
        }

        @media (max-width: 400px) {
            .flip-scene {
                height: 500px;
            }
           
            .page {
                height: 470px;
                padding: 15px;
            }
           
            .entry-bubble {
                padding: 12px;
            }
           
            .character-one .entry {
                font-size: 15px;
            }
           
            .character-two .entry {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="book-wrapper">
        <div class="book-interior">
            <div class="flip-scene" id="flipScene">
                <div class="gutter"></div>
            </div>
            <div class="nav-panel">
                <button class="nav-btn" id="prevPageBtn" aria-label="предыдущая страница">◀</button>
                <span class="page-indicator" id="indicator">стр. 1 / 10</span>
                <button class="nav-btn" id="nextPageBtn" aria-label="следующая страница">▶</button>
            </div>
            <div class="footer-note">✦  Steel Boner  ✦</div>
        </div>
    </div>

    <script>
        (function() {
            const pagesData = [
                               
                {
                    type: 'character-two',
                    name: 'КЛАЙД',
                    date: '13 октября',
                    text: `Сегодня ночью спал просто отвратительно. По ощущениям будто кто-то подкинул мне в голову взрывчатку - подкрался, пока я дремал, открыл черепную крышку, сбросил туда всякой дряни, закрыл и убежал со всех ног. Какой-то ментальный подкидыш. Взрывоопасная бредятина. <br>
Причем сон начинался просто чудесно - я, кажется, был на задании или просто развлекался славной "охотой", я отчетливо помню, как пролезал в чье-то тело, подслушивал чужой пульс, окунался в чужие крики, но потом.. потом я полностью потерял контроль над собой. Нет, я продолжил начатое, но будто бы уже не по своей воле, я наносил своей жертве увечья, но не там, где хотел их нанести, и пытал ее не теми способами, которыми предпочитал. Из дирижёра я превратился в обычного зрителя, пусть и посаженного в первых рядах. Очень гадкое ощущение, когда ты, вроде бы, делаешь все то, что хотел изначально, но по чьей-то указке, по чьему-то велению, в совершенно ином, не согласованном с тобой, виде. <br>
Я потратил три тысячелетия на то, чтобы двинуть хотя бы пальцем, чтобы сделать хоть что-то самостоятельно, а не лицезреть парализованным истуканом, как льются реки крови из вспоротых глоток. Творить нечто настолько живодерское и безжалостное, но не по доброй воле - самое мерзкое, самое унизительное и святотатственное, что можно придумать. Грешить нужно осознанно. По велению своего выбора, своего решения, своей тяги, иначе это просто кукольная постановка, где ты нелепо болтаешься на невидимых ниточках, где ты и не убийца даже, а лишь инструмент того, кто в действительности убийцей является. Заснуть снова я так и не смог, однако днем был весьма бодр. <br>
Подумаешь, скверный сон. И не такое случалось.`
                },
               
                {
                   type: 'character-one',
                   name: 'ШОН',
                   date: '16 октября',
                   text: `Дни сейчас – какая-то сплошная суета. Ни секунды присесть и ни единого  дельного воспоминания чтобы записать. Вроде работал, вроде был в зале, даже кого-то видел и с кем-то переговаривался. На обеде вчера снова общался с присланным из Инквизиции работником. <br>
После последнего нашего дела, вызывают на разговоры снова и снова, что-то уточняют, расспрашивают каждый раз как в первый. И я раз за разом им повторяю всю ту же череду событий, будто могу сказать что-то новое. Они, кажется, даже надеются, что скажу. У них, у всех этих вежливых клерков, записывающих в свои блокнотики все те же слова, взгляды хищные, скучно-дотошные до деталей, бесчувственные бусинки вместо зрачков. “Мистер Боунс, 12 числа вы сказали, что закрыли дверь и потом проверили оружие, а сейчас говорите, что проверили оружие, закрыли дверь… так что же правда? Хорошо… старайтесь больше не сбиваться в показаниях и очередности событий”. <br>
Господи, какой же бред. Клайда они опросили всего раз или два, меня донимают уже в четвертый. Что-то у них там не сходится, а я спокойно им отвечу, в отличии от соула, способного вывести своей улыбкой и наглостью даже самых непрошибаемых зануд. Вот и вызывают меня к ним опять и опять. Надеюсь, этот раз был последним.<br>
Впрочем, Клайд вчера тоже был куда менее самоуверенным, чем обычно. Даже усталым. На вопросы послал к черту, но выглядел так, что хоть тут ему чай с валерьяной выдавай под колыбельную. Сегодня ему, кажется, еще хуже, но в каждую попытку заговорить об этом я будто сталкиваюсь со стеной, за которую меня не пускают дальше. Видел, как он клюет носом, пока думает, что никто не смотрит. Он явно херово спит.` },
               
                {
                   type: 'character-two',
                   name: 'КЛАЙД',
                   date: '18 октября',
                   text: `Ебаные кошмары.<br>
Ебаные кошмары изводят и истачивают мой мозг уже третью ночь подряд. Затравливают меня, словно зверя, загоняют в угол, тычут копьями, заставляя злобно скалиться, тянуть улыбку наперекор неотступным нападкам. Каждая попытка уснуть - все равно что выход на поле боя, где у меня с порога отбирают все оружие, крепко связывают и бросают под ноги врага. Что-то не так. Что-то выходит из-под контроля, допиливает меня, досверливает, пытается продырявить мой череп, чтобы я вытек наружу. <br>
Вычитал в интернете про сонный паралич, и это правда нечто схожее - во сне я начисто теряю возможность двигаться самостоятельно, однако я шевелюсь, я делаю очень много вещей, но притом не имею к ним никакого отношения. Мои руки движутся сами собой, мои ноги делают шаг за шагом - сами собой, я дышу, слизываю кровь, вгрызаюсь в чье-то мясо, рву кого-то на части, но все удовольствие от процесса переводится на чей-то чужой счет, пополняет чью-то чужую казну. Совершать столько упоительных злодейств и притом не являться их автором - что за ебаное гадство? И голос.. Я слышу чей-то голос, отдаленный и размытый эхом, который наговаривает мне - учись, как надо.. учись у скверны как надо.. Неужели она снова пытается пробраться в мою башку? Устроиться в ней непрошенной квартиранткой? Хоо, какая же ты наглая сучка, приходишь во снах, чтобы учить меня, как следует обходиться с чужой уязвимой плотью? Тупая ты мразь, мне не нужны твои уроки, я не стремлюсь стать твоим преданным подданным, это тебя волнует насколько темен мрак и насколько низок грех, я же ношу жертвы к алтарю своего стояка, и в рот я ебал, чему ты хочешь меня научить. Появись передо мной в реальности, блядская ты подстилка, подступись ко мне вне снов, преподай мне урок с глазу на глаз.<br>
Раздражение копится вместе с продуктами распада моего терпения. То, что ранее меня ничуть не напрягало, теперь становится вполне объективной причиной для линчевания. Еще и Шон внезапно решил изобразить мистера заботу, уже который раз делает в мой адрес очаровательные комплименты, подмечая темные круги под моими глазами и помятый внешний вид. "Ты выглядишь просто кошмарно. Что с тобой? Дрочишь ночами напролет и потому не высыпаешься?". Я улыбаюсь ему, почти щерюсь, обороняюсь от его вопросов стиснутыми в оскале зубами, цедя сквозь них, что все в порядке. Настаивая: "Отъебись)))". Ох уж эти его ебаные игры в участие и сострадание. Ну разумеется все должно идти по твоему сценарию, тигренок, разумеется мы должны сесть за чашечкой кофе и обсудить, как хуево я сплю в последнее время. Чтобы ты посмотрел на меня своими щенячьими глазками, сказал что-то типа "очень плохо" или "жаль" или "тебе нужно обратиться ко врачу, сходить с тобой?", а я конечно же отвечу тебе "да, пупсик, своди меня к дяде доктору, пусть он пропишет мне таблеточки, а потом мы вернемся в спаленку и я отсосу у тебя за то, какой ты у меня заботливый", ну да, ага, все ведь так и должно быть, ебаная ты паскудина с ебаными твоими "с тобой что-то не так", пошел нахуй, Шон, пошли нахуй, кошмары, и скверна - тебе персональное ПОШЛА НАХУЙ.<br>
Я слышу как смеюсь. Но я уже не уверен, что делаю это сам.` },
               
                {
                   type: 'character-one',
                   name: 'ШОН',
                   date: '19 октября',
                   text: `Если бы я мог сдавать пространство, принадлежащее моему соулу, то в мешках под глазами Клайда поселил бы несколько квартирантов. Жить там можно на широкую ногу, большой семьей, помешает разве что не очень удачное соседство с его ртом, из которого круглосуточно извергаются всякие гадости.<br>
А кроме шуток, это начинает серьезно беспокоить. Рядом со мной не соул, а его тень, и надо сказать, что я уже просчитываю пути насильного причинения добра на пару с врачом. Я слежу за его мимикой, движениями, и они все более нервные, порой он медлителен как человек в полусне, порой – куда ярче реагирует, резко подкидывается. И неизменно посылает меня нахуй, стоит указать на проблему и ее симптомы. Складываю даты и когда примерно это все могло с ним начаться, и, кажется, начинаю догадываться о причинах происходящего.<br>
Какое удивительное чувство находить уязвимости психики в том, в ком, казалось бы, их и не могло быть ввиду изначально покореженной ментальности. Чем дольше об этом думаю, чем больше смотрю, тем больше понимаю, что Клайду нужна помощь и это почти физически больно – сталкиваться с тем, что я эту помощь оказать нормально не могу. Видно же, как ему хреново, и мне его все более и более жалко. Ловлю себя на том, что хочу его порой просто обнять, но отлично знаю как далеко и как весело пойду с такими желаниями.<br>
Вместо этого заживо варю себя в чувстве вины. Потому что, кажется, мог предотвратить все, что он сейчас испытывает, еще в зачатке, но просто и очень тупо не успел. А потом уже был зациклен на своих собственных страхах.<br>
Забил, забыл, не подумал. И хуя с два теперь проберусь через все эти защиты и его панцири, чтобы успокоить то, что мог бы просто не допустить.<br>
Клайд клюет носом даже на обходе. По сути провел его один, с плетущимся сзади ведьмаком. В полутьме ночных коридоров он просто порой свешивает подбородок к груди, позволяя длинным волосам закрыть лицо и я слышу, как меняется его дыхание, как оно замирает, пытается замедлится. Внутри что-то древнее говорит, что надо его окружить собой, согреть и защитить в уязвимой фазе сна. На деле только замедляюсь в такт его шагам, иногда чуть придерживаю, позволяю ему очнуться самому и так до следующего поворота, где все повторяется. Обычный обход занимает на час больше, а во мне сжимается сердце из-за волнения за него.` },
               
                {
                   type: 'character-two',
                   name: 'КЛАЙД',
                   date: '19 октября',
                   text: `Из-за недосыпа в моем теле становится все меньше места для меня. Нет, я пытаюсь с этим совладать, пытаюсь просто расслабиться, отпустить ситуацию, вроде как - подумаешь, я вижу сон, в котором кто-то управляет моим телом и делает всякие безбожные вещи. Почему мне так принципиально чинить вред самому? Ведь тело во сне двигается, боль причиняется, я вижу, как страдают люди, множество людей, но почему-то меня это совсем не радует, не возбуждает, не приводит в экстаз. Не я их мучитель. Не я их палач. Не я их возлюбленный. Это как наблюдать чужой пир со стороны, видеть, как кто-то лакомится вкуснейшей амброзией, сидя при этом так близко, что видишь текстуру еды, чуешь ее запах, но сам угоститься не можешь, как и пришить все увиденное к себе, сделать происходящее частью себя. Я не знаю, как долго это будет продолжаться. Нужно что-то делать. Нужно как-то это решать.<br>
Получил от врача таблетки. Они проходят мое тело транзитом, ничего не привнося, ничего не меняя и не вправляя на место. Мое внутричерепное страдание не поддается никаким химическим соединениям, никакому фармакологическому волшебству. Проверка на заражение скверной тоже ничего не дала - я не нуждаюсь ни в каком очистительном ритуале, я даже не проклят, черт возьми. Тогда что это? Я устал листать интернет. В нем сотни тысяч незнакомых мне людей в сотнях тысячах непонятных мне статей твердят в один голос, что мне пизда. Или, как вариант, острая непереносимость лактозы.<br>
Сегодня, обойдя периметр Академии, мы заскочили с Шоном в общий кабинет, чтобы заполнить отчеты и разойтись по делам. Если первые дни Шон меня раздражал, то сейчас у меня нет сил даже отталкивать его, когда он спешит меня поддержать и подставить свое стальное плечо. Касаюсь пальцами прохладного металла, мягко стучу по нему ногтями, медленно моргаю, чувствуя его дыхание на щеке. Глупый, безнадежный Шон, сладенький ты сучоныш, знал бы ты, как я хочу оторвать тебе и вторую руку, и ноги, и член, оставить от тебя только голову и туловище, превратить тебя в идеальный инструмент для восприятия той боли, которую я для тебя приготовил. Я бы сделал это с тобой, я бы услаждался этим, я бы смеялся, смотря на твое изумительное лицо, а ты, даже зная об этом, все равно обнимаешь меня, придерживаешь за талию, как только замечаешь шаткость в моей походке. Ты безумен, Шон.. Безумен... Шон...<br>
Сидя за письменным столом, я медленно закрываю глаза. Я знаю, что, стоит мне отключиться, как я снова глотну этой отравы, но выбора у меня нет, я слишком измотан. Придется снова испить этой пытки - так же, как умирающему от обезвоживания приходится пить свою мочу, чтобы не сойти с ума от жажды. Я просто хочу спать. Я снова смеюсь. Мне почему-то не жалко себя. Мне почему-то.. никогда по-настоящему.. не жалко себя..` },
               
                {
                   type: 'character-one',
                   name: 'ШОН',
                   date: '19 октября',
                   text: `Он засыпает прямо в кабинете, за столом, после очередной моей безуспешной попытки поговорить обо всем, что с ним происходит. И первые секунды я даже радуюсь, что он спит наконец-то, потому что могу ненадолго отпустить свое за него беспокойство, подумать, что, может, сейчас все наладится и ему станет лучше. Почти довольный заполняю отчет до конца, вытаскиваю из под его щеки лист, и поглядываю на чуть дрожащие черные ресницы, кажется, что его глазные яблоки мечутся из стороны в сторону под плотно сомкнутыми веками, но дыхание пока спокойно. <br>
В его бланке полная билиберда сонного мозга, путающего буквы и слова, поэтому беру новый лист и пишу все заново, имитирую его почерк и подпись, когда рядом что-то странно чавкает, а потом резко бьет в стену. Вскидываюсь разом, только чтобы увидеть, как мой ведьмак расползается на щупы и отростки, которые дергаются, пытаются сквозь сон, кажется, поразить невидимые цели. Его фигура чуть оплывает, а на лице удивительно непривычное мне выражение искреннего противления, муки и беспомощности. Я видел лишь ноты похожей гримасы, однажды, совсем недавно. Меня снова заполоняет чувство вины.<br>
Осторожно подхожу к нему, хотя уворачиваться от атак его щупов не сложно. То что во сне мощный удар, на деле всегда лишь легкое подергивание рукой. Так и тут способность бьет, но сражается с чем-то там, внутри своего сознания, и я вижу в движениях силы лишь слабое эхо той битвы, тревожной, неприятной и явно делающей моего ведьмака несчастным. Когда поднимаю его на руки, между бровей Клайда хмурая складка и я чую запах его злости и недовольства. Надо унести его в безопасность, подальше от случайных свидетелей.` },
               
                {
                   type: 'character-two',
                   name: 'КЛАЙД',
                   date: '19 октября',
                   text: `Из сна меня снова вытурили, как оборзевшего пьянчугу из бара. Вход в здоровый сон теперь платный, судя по всему, и меня в нем не ждут. Открыв глаза, я далеко не сразу вкурил, где нахожусь, но физиономия Шона, сидевшего на стуле перед кроватью, быстро подкинула пару идей - я, вероятно, в его комнате. Я, вероятно.. отключился где-то в кабинете и сам не заметил, как меня перетащили сюда. <i>Он</i> перетащил. "Ты отключился и начал.. превращаться" - заметив, что я прочухался, тут же известил меня Шон. "Ты даже способность свою теперь не контролируешь, не то, что разум". Ох Шон, ты всегда смотришь на меня именно так - упрямо и немного тоскливо одновременно. Не выпускаешь меня из вида. Так навязчиво. Так вызывающе. Сколько наглости и бесстрашия нужно иметь, чтобы смотреть на меня с таким отчаянным беспокойством? Чтобы так настойчиво превращать мою проблему в нашу общую? Ты даже сам не представляешь, как оскорбляешь меня своей абсурдной заботой. Как унижаешь меня своей потребностью ее мне всучить. Не потому, что я в своих глазах слишком сильный, чтобы нуждаться в поддержке, а потому что ты в самом деле хочешь ее оказать, а ведь ты - часть меня, МЕНЯ, откуда вообще это в тебе взялось? Это вариант твоей похоти? Ты ловишь с этого кайф, да? У тебя стояк на то, чтобы печься о тех, кто хочет тебя обглодать? <br>
"Я посплю у себя))" - пытаюсь подняться, но Шон тут же оказывается рядом, чтобы уложить меня обратно на простыни. "Ты не поспишь у себя. Ты нигде не поспишь, Клайд. Сколько ты уже толком не спал? Неделю?". Отвечаю, улыбаясь через силу: "Да, был слишком занят тем, что ебал твою мамашу))". Шутка тупая. Я знаю. Но оттого она и кажется мне максимально уместной и даже жизненно необходимой сейчас. Шону ожидаемо не смешно. "Мне кажется я знаю, почему ты не спишь". <br>
"Хоо, да ты ж мой Эркюль Пуаро. Распутал это дело наконец-то))Давай закажем шлюх и пиццы, и отметим это как следует)))".<br>
"После того задания, да? Когда оскверненный использовал против тебя магию контроля. А я не успел вовремя..".<br>
"Шон, тшшшш, если ты будешь много говорить, то пропустишь важный момент, когда тебе будет пора пойти нахуй))".<br>
"Клайд, хватит улыбаться, хватит шутить и посылать меня! Это не скверна, а психосоматика. Ты же сам понимаешь, что все это связано с тем заданием. Оскверненный мертв, мы убили его, но твоим телом управляли какое-то время, и теперь ты не можешь уснуть из-за того, что потерял над собой контроль. Все ведь так??".<br>
"Ну конечно же, я ведь такой впечатлительный))"<br>
"Дело не в этом. Ты легко переносишь боль и поражение, но.. даже у тебя есть то, что способно тебя задеть. Что тебе снится, Клайд?".<br>
Я ощущаю, как слипается каждая клетка моего тела. Как мембраны залипают, точно клавиши, и превращают сигналы моей нервной системы в полнейший хаос. Я сдаюсь.<br>
Я признаюсь: "Мне снится.. что я убиваю людей. Но не по своей воле".<br>
"Разве ты не хотел бы их убивать?"<br>
"Ахаха.. хотел бы, конечно, но не по чужой указке. Во снах.. я убиваю лучше и слаще, но при этом.. Это не я. Я там вообще не при чем".<br>
"Лучше и слаще?"<br>
"Именно))Ощущение такое, будто кто-то умудряется.. быть мной, но притом быть мной лучше, чем я сам могу собой быть.. Короче, полная параша".<br>
"Хм.. но ведь, если это снится тебе, точнее.. если ты сам это снишь, значит, это все тоже ты сам. Лучше и слаще - это ведь не кто-то другой, потому что внутри тебя не может быть кто-то, кроме тебя"<br>
"Ахахаххахаах!"<br>
"Клайд)"<br>
"Ну да, блядь, не может))Только если будет оооочень настойчив)))"` },
               
                {
                   type: 'character-one',
                   name: 'ШОН',
                   date: '19 февраля',
                   text: `Я впервые в ситуации, когда не знаю, что милосерднее – дать человеку поспать или разбудить от терзающих его кошмаров. Клайд беспокойно мечется на кровати, расплескивая по подушке черноту волос, его тело – изломанные углы, пока он не замирает и вмиг разрешает мою дилемму, проснувшись сам.
Настаиваю, чтобы он остался, пробиваюсь сквозь его попытки послать меня и отшутиться, и, наконец, действительно с ним говорю. Впрочем, озвучить причину, понять её и овеществлить – одно, но внятного решения проблемы так и нет, и я нажимаю на его плечо, гася новую попытку встать. <br>
“Все, попиздели и хватит, я к себе))” <br>
“Слушай, у себя ты спать уже пытался, не сработало. Ты там один на один” Смотрю на его лицо в полумраке и удивленно отмечаю, что он действительно позволяет мне удержать его на кровати, и снова ложится. Насколько же тебя покинули силы, если ты не противишься этому жесту, как минимум, из принципов? Не отпускаю ладонь, как-то интуитивно оставляя эффект своего присутствия с ним рядом, чутко вслушиваюсь в его дыхание и подмечаю темп выдохов, и глубину вдохов. И мне кажется, что он чуть успокаивается. Внутренности сжимаются неуместной здесь, да и вообще по отношению к Клайду, нежностью. Но я позволяю чувству быть и надеюсь создать из него что-то, что сможет ему помочь.<br>
“Оскверненный правда мертв, я его убил, помнишь? Перекусил ему нахер глотку, он сдох и все закончилось.”<br>
“Не поверишь, но помню)) Надо было отрезать сученышу его конечности, взбить их в блендере и влить это “смузи” ему в очко))) Ты как всегда милосерден))”<br>
“Прости, на скоростях не доработал. Надо как-то… как-то убедить твой разум, что все прошло, понимаешь? Твой мозг все еще там, воспроизводит это ощущение снова и снова, пытаясь придумать решение, сценарий, как справится с таким страхом. А в итоге только изматывает тебя раз за разом. Это жутко – терять контроль над своим “Я”” <br>
Устраиваюсь удобнее на краю кровати, не убирая ладони, и чувствую как в мою кожу толкается его беспокойный пульс. Сердце Клайда еще там, в ошметках беспокойного сна, но он сам, кажется, снова начинает проваливаться в новую бездну кошмара. Речь его становится медленнее.<br>
“Раз отдаешь свою кровать, пиздуй тогда))”<br>
Со стола на пол спрыгивает Коф, и я смотрю на белую шерстку во тьме. Думаю об успокаивающем кошачьем мурлыканье, но кот не переносит Клайда, кажется, чувствуя, что тот не прочь бы его прикончить. И едва ли согласился бы лечь с ним рядом, чтобы согреть и успокоить. Впрочем, в этой комнате есть и кот побольше.
“Давай вместе ляжем? Ты будешь там не один. Я прикончил его в жизни, прикончу и у тебя во сне. Все закончится”<br>
“Или я испотрошу тебя чернью, пока сплю)))”<br>
“Или так” легко соглашаюсь, но придвигаюсь ближе.<br>
“Даже не знаю, мы так редко с тобой спим)))”<br>
Улыбаюсь снова, подмечая очередную двусмысленность фразы. И действительно задумываюсь, почему мне так понравилась идея. Из-за уже потихоньку хронического беспокойства за него, или из-за редкой возможности побыть с ним так близко и до странности не опасно, мать его… доверительно? Думаю о том, что, может, это я эгоист, и хочу видеть способ помощи в том, что, скорее, просто приятно мне самому.<br>
“Во всех смыслах)))”<br>
Он медленно моргает, потом с явным усилием возвращает осмысленность взгляду, и я задумываюсь, обнимал ли кто-то его когда-то во сне вообще. Тепло и любяще. В детстве? После?<br>
“Слушай, в крайнем случае, ты просто поспишь в обнимку с теплой мохнатой грелкой”<br>
Легко залезаю в кровать, чувствуя боком его тепло и уже там оборачиваюсь зверем, приваливаясь ближе к нему. На кровати маловато места для взрослого мужика и тигра, и я надеюсь, что он сам догадается использовать меня как большую подушку. Улыбаюсь про себя и выдыхаю с клекотом невысказанного довольства в легких, когда он закидывает на меня руку и чуть сжимает в пальцах шерсть.` },
               
                {
                   type: 'character-two',
                   name: 'КЛАЙД',
                   date: '19 октября',
                   text: `Мы лежим на его кровати. Шон обратился тигром - видимо, чтобы, засыпая, я чувствовал под пальцами его плотную и утешающе теплую шкуру. Как же тяжело признать, что мой враг - не болезнь и не скверна, а я сам, мой долбанный разум, которому, оказывается, крепко досталось от магии контроля. Шон назвал это психосоматикой. Я бы назвал это "ебаной психосоматикой". Мне тяжело признать, что подсознание способно так сильно влиять на мое тело. Что мысли и чувства, которых я не вижу, которые я не могу осязать, все эти призрачные импульсы в моем сером веществе горазды поставить меня и мое здоровье на колени, заставить меня не спать и толком не есть целую неделю. <br>
Мой разум для меня - зашифрованный черный ящик, в который я сам предпочитаю не соваться, не распутывать кабели и провода, чтобы не ударило током, не заклинило еще сильнее, не погасло. Пусть работает, как работает, лучше не трогать и не вносить изменения. Почему Шон не боится совать туда руку? Почему так бесстрашно перебирает нейронные петли моего межполушарного хаоса, даже получая в ответ лучевые ожоги? "Я буду спать с тобой, а завтра отведу тебя к психологу, понял?". Я ничего не ответил, даже не улыбнулся. <br>
Какой психолог, Шон? Ты - единственный, перед кем я бы порезал свой мозг на тонкие ломтики и кому показал бы срез каждой извилины. Я не могу дать себе права довериться кому-либо добровольно, но к близости с тобой меня принудила сама природа, сделав тебя моим соулом, и спасибо ей, что принудила, слава ей, что заставила, что дала достойное оправдание тому доверию, что я испытываю к тебе, сучоныш.. О каком психологе ты говоришь.. <br>
Сжимаю полосатую шкуру, проваливаюсь в заросли черно-рыжей шерсти, впускаю в себя низкочастотный тигриный клекот, это мерное шершавое дыхание, эту сильную и неукротимую жизнь. В моей голове не может быть кого-то еще, кроме меня самого. Все, что я делаю во снах, я делаю сам и никто другой. Ты ведь напомнишь мне это там, во сне, Шон? <br>
Ты ведь не опоздаешь..?` }
            ];

            const totalPages = pagesData.length;
            let currentPageIndex = 0;

            const scene = document.getElementById('flipScene');
            const indicator = document.getElementById('indicator');
            const prevBtn = document.getElementById('prevPageBtn');
            const nextBtn = document.getElementById('nextPageBtn');

            function buildPages() {
                scene.innerHTML = '';
                const gutterDiv = document.createElement('div');
                gutterDiv.className = 'gutter';
                scene.appendChild(gutterDiv);

                pagesData.forEach((data, index) => {
                    const pageDiv = document.createElement('div');
                    pageDiv.className = `page ${data.type}`;
                    pageDiv.setAttribute('data-index', index);

                    const lines = document.createElement('div');
                    lines.className = 'page-lines';
                   
                    const contentDiv = document.createElement('div');
                    contentDiv.className = 'page-content';
                   
                    // Создаём верхнюю плашку с датой и именем
                    const headerDiv = document.createElement('div');
                    headerDiv.className = 'page-header';
                   
                    const datePlate = document.createElement('div');
                    datePlate.className = 'date-plate';
                    datePlate.innerText = data.date;
                   
                    const namePlate = document.createElement('div');
                    namePlate.className = 'character-name';
                    namePlate.innerText = data.name;
                   
                    headerDiv.appendChild(datePlate);
                    headerDiv.appendChild(namePlate);
                   
                    const bubbleDiv = document.createElement('div');
                    bubbleDiv.className = 'entry-bubble';
                   
                    const textDiv = document.createElement('div');
                    textDiv.className = 'entry';
                    textDiv.innerHTML = data.text;

                    bubbleDiv.appendChild(textDiv);
                    contentDiv.appendChild(headerDiv);
                    contentDiv.appendChild(bubbleDiv);

                    pageDiv.appendChild(lines);
                    pageDiv.appendChild(contentDiv);

                    scene.appendChild(pageDiv);
                });

                updatePagesState();
            }

            function updatePagesState() {
                const pages = document.querySelectorAll('.page');
                pages.forEach((page, idx) => {
                    page.classList.remove('front-right', 'flipped-left', 'stack-left');

                    if (idx === currentPageIndex) {
                        page.classList.add('front-right');
                    } else if (idx < currentPageIndex) {
                        page.classList.add('flipped-left');
                    } else {
                        page.classList.add('stack-left');
                    }
                });
                indicator.innerText = `стр. ${currentPageIndex + 1} / ${totalPages}`;
                prevBtn.classList.toggle('disabled', currentPageIndex === 0);
                nextBtn.classList.toggle('disabled', currentPageIndex === totalPages - 1);
            }

            function nextPage() {
                if (currentPageIndex >= totalPages - 1) return;

                const currentPage = document.querySelector(`.page[data-index="${currentPageIndex}"]`);
                const nextPageElem = document.querySelector(`.page[data-index="${currentPageIndex + 1}"]`);

                if (!currentPage || !nextPageElem) return;

                nextPageElem.classList.remove('stack-left');
                void currentPage.offsetWidth;

                currentPage.classList.remove('front-right');
                currentPage.classList.add('flipped-left');

                nextPageElem.classList.remove('stack-left');
                nextPageElem.classList.add('front-right');

                currentPageIndex++;

                const pages = document.querySelectorAll('.page');
                pages.forEach((page, idx) => {
                    if (idx < currentPageIndex) {
                        page.classList.remove('front-right', 'stack-left');
                        page.classList.add('flipped-left');
                    } else if (idx === currentPageIndex) {
                        // уже обработано
                    } else {
                        page.classList.remove('front-right', 'flipped-left');
                        page.classList.add('stack-left');
                    }
                });

                indicator.innerText = `стр. ${currentPageIndex + 1} / ${totalPages}`;
                prevBtn.classList.toggle('disabled', currentPageIndex === 0);
                nextBtn.classList.toggle('disabled', currentPageIndex === totalPages - 1);
            }

            function prevPage() {
                if (currentPageIndex <= 0) return;

                const currentPage = document.querySelector(`.page[data-index="${currentPageIndex}"]`);
                const prevPageElem = document.querySelector(`.page[data-index="${currentPageIndex - 1}"]`);

                if (!currentPage || !prevPageElem) return;

                prevPageElem.classList.remove('flipped-left', 'stack-left');
                void currentPage.offsetWidth;

                currentPage.classList.remove('front-right');
                currentPage.classList.add('flipped-left');

                prevPageElem.classList.remove('flipped-left', 'stack-left');
                prevPageElem.classList.add('front-right');

                currentPageIndex--;

                const pages = document.querySelectorAll('.page');
                pages.forEach((page, idx) => {
                    if (idx < currentPageIndex) {
                        page.classList.remove('front-right', 'stack-left');
                        page.classList.add('flipped-left');
                    } else if (idx === currentPageIndex) {
                        // front-right
                    } else if (idx > currentPageIndex) {
                        page.classList.remove('front-right', 'flipped-left');
                        page.classList.add('stack-left');
                    }
                });

                indicator.innerText = `стр. ${currentPageIndex + 1} / ${totalPages}`;
                prevBtn.classList.toggle('disabled', currentPageIndex === 0);
                nextBtn.classList.toggle('disabled', currentPageIndex === totalPages - 1);
            }

            buildPages();

            prevBtn.addEventListener('click', prevPage);
            nextBtn.addEventListener('click', nextPage);
        })();
    </script>
</body>
</html>[/html]

Иногда все складывается очень даже неплохо. Пусть и недолго

Отредактировано Clyde Steel (03-03-2026 16:41:05)

- Красивый..
- Пошел нахуй)))
- Когда молчишь.

- А инквизиторам хорошо платят?
- На пачку чипсов хватает)))

Продолжение стоматологической АУшки, по просьбам трудящихся))

Отредактировано Clyde Steel (12-06-2026 12:12:37)