Флуд во имя Флуда

[html]
<div class="story-container">
<h2>✧ РАЗГОВОР В ТЕМНОТЕ ✧</h2>
<div class="constellation-sign">⋆･ﾟ:⋆･ﾟ наведи, чтобы подслушать ⋆･ﾟ:⋆･ﾟ</div>

<div class="star-rules">
<div class="rule-item">
<span class="rule-star">✧</span>
<span class="rule-text">Все реплики (прямая речь) персонажей — ложь. Нельзя произносить фразы, которые соответствуют реальным чувствам или намерениям.</span>
</div>
<div class="rule-item">
<span class="rule-star">✧</span>
<span class="rule-text">В тексте нельзя называть чувства напрямую — то есть, использовать такие слова как «люблю», «страшно», «счастлив» и подобные даже в словах автора.</span>
</div>
<div class="rule-item">
<span class="rule-star">✧</span>
<span class="rule-text">Темнота. Сцена происходит без света — ориентироваться можно не на зрение, а другие чувства. Например, на голос, дыхание, звук, тепло.</span>
</div>
</div>

<div class="bubbles-container">
<div class="paragraph-list">
<div class="p-item">
<div class="p-text">
Темнота не оставляет ничего за собой, очертания предметов прячутся в ней, смазываются, теряются, рассыпаются, как труха. Остается только теплая кожа под пальцами и звук дыхания – своего и чужого.<br>
– Я пойду к себе. – Голос Клайда звучит над самым ухом, и Шон улыбается, роняя на его живот руку – живую, но будто столь же тяжелую, как и стальная.<br>
– Ну так уходи.
</div>
</div>
<div class="p-item">
<div class="p-text">
Слышен шорох одеяла, скрип кровати, но ведьмак так и не скидывает с себя объятия, не уходит прочь, заново учиться спать в одиночестве без кошмаров, а опаляет своим дыханием – слишком близким, прямо у скулы, вжатой в подушку. Остается лишь замереть и притаиться, постараться не спугнуть и в полной мере осознать, что вот он тут, на расстоянии нескольких миллиметров. Повернулся и делит с ним одну подушку, и тело его, замершее под рукой, абсолютно расслабленное – самое ему там и место. Думать, как ненароком прижаться еще теснее и кто первый это сделает, кто решится прильнуть всем собой. Если решится.
</div>
</div>
<div class="p-item">
<div class="p-text">
Что открытые глаза, что закрытые – ночь крадет образы, прячет за собой Клайда, выражение его лица и мысли. Улыбку или сведенные брови, каждый жест и намек. По телу поднимается жар, и то ли это так ускорилось сердце, то ли нужно отбросить одеяло прочь.<br>
– Убери руку, мешает. – Ворчание Клайда тихое, слишком тихое, но в густой тишине отчетливое, а каждое слово касается щеки на излете.
</div>
</div>
<div class="p-item">
<div class="p-text">
Когда он рядом, все внутри тянет и надрывается, пытается поймать его и удержать в руках, защитить и забрать себе. Вопреки всякому здравому смыслу.<br>
– Ладно, уберу. – Шон пропускает удар сердца, когда тянет его к себе ближе и находит поцелуем его подбородок, а после сухие губы, жесткие и властные, пытающиеся получить преимущество, с первой секунды завладеть, отвоевать и выиграть. Хотя по итогу выигрывают оба – до сбитого дыхания и нехватки воздуха. Будто борются за то, кто дольше продержится или кто первый задохнется.
</div>
</div>
<div class="p-item">
<div class="p-text">
– Лучше бы ты меня не целовал, сучоныш))) <br>
Клайд быстро оказывается сверху, выпутывается в одно неуловимое движение и седлает, прижимая собой. Он почти шипит и, скорее всего, скалится своей вечной улыбкой за пологом черноты.
</div>
</div>
<div class="p-item">
<div class="p-text">
Сейчас в тишине есть только собственное сердце, забывшее выверенный ритм, бьющееся о ребра, пока пальцы не путаются в волосах ведьмака, а стальная ладонь плотно усаживается на бедре, как влитая, недвижимая. Шон чувствует, как чужие длинные пальцы ощупывают его кожу, касаются и гладят, вызывая острые иголочки мурашек вверх по телу, он чувствует, как они угрожающе медленно давят на уязвимые места, проверяют – не дернется ли тот зверем прочь. Примеряются, как бы удобнее выпотрошить его тушку.
</div>
</div>
<div class="p-item">
<div class="p-text">
Шон тянет своего соула ближе и вновь впивается в его губы, рискует и получает новый поцелуй-катарсис, неизбежный в том, как заставляет продлевать себя снова и снова, пока не оттолкнут и не протянут с деланной ленцой у самого уха:<br>
– Я бы уже с десяток снов у себя пересмотрел, пока здесь с тобой вожусь, тупое ты зверье)))
</div>
</div>
<div class="p-item">
<div class="p-text">
– Прости, мне не стоило этого всего делать.<br>
В кровати снова революция, и Шон стягивает Клайда вниз, к себе, ближе, всего его пытается объять, трогает и оглаживает. Прикосновения жадные, голодные, без зрения запечатлеваются в разуме яркими тактильными фейверками.
</div>
</div>
<div class="p-item">
<div class="p-text">
Им, на деле, совсем не нужны слова, чтобы прижимать, кусать, касаться и гладить. Не нужны слова, чтобы тянуть ближе, отталкивать в самый последний момент, но не отпускать, и во всем этом, в бездне черноты вокруг, разделять одну жизнь на две примагниченные половины.
</div>
</div>
</div>
</div>
</div>

body {
min-height: 100%;
background: radial-gradient(ellipse at top, #0b0f2a, #020617);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Georgia', 'Times New Roman', serif;
padding: 1.5rem;
margin: 0;
}

.story-container {
position: relative;
max-width: 760px;
width: 100%;
background: radial-gradient(circle at 30% 40%, #1a1f3a, #030514 90%);
box-shadow: inset 0 0 60px rgba(255, 215, 150, 0.15);
border: 1px solid rgba(255, 240, 200, 0.1);
border-radius: 3rem 1.5rem 3rem 1.5rem;
padding: 3rem 2.5rem;
backdrop-filter: blur(1px);
background-image:
radial-gradient(white 0.8px, transparent 0.8px),
radial-gradient(rgba(255, 255, 255, 0.4) 0.5px, transparent 0.5px),
radial-gradient(circle at 30% 40%, #1a1f3a, #030514 90%);
background-size: 40px 40px, 80px 80px, 100% 100%;
background-position: 0 0, 20px 30px, 0 0;
background-blend-mode: overlay, screen, normal;
z-index: 10;
}

.story-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
background: radial-gradient(circle at 15% 70%, rgba(255, 240, 180, 0.1) 0%, transparent 25%),
radial-gradient(circle at 80% 20%, rgba(200, 220, 255, 0.1) 0%, transparent 30%),
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.01) 0px, rgba(255, 255, 255, 0.01) 2px, transparent 2px, transparent 6px);
pointer-events: none;
z-index: 1;
}

.story-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="12" cy="25" r="0.7" fill="white" opacity="0.6"/><circle cx="88" cy="41" r="1" fill="white" opacity="0.8"/><circle cx="44" cy="82" r="0.8" fill="white" opacity="0.5"/><circle cx="71" cy="8" r="0.6" fill="white" opacity="0.9"/><circle cx="29" cy="68" r="0.9" fill="white" opacity="0.4"/><circle cx="5" cy="92" r="0.5" fill="white" opacity="0.7"/><circle cx="60" cy="55" r="1.1" fill="white" opacity="0.5"/><circle cx="92" cy="78" r="0.8" fill="white" opacity="0.7"/></svg>');
background-size: 200px 200px;
background-repeat: repeat;
mix-blend-mode: screen;
opacity: 0.2;
border-radius: inherit;
z-index: 2;
}

/* Звездные правила */
.star-rules {
position: relative;
z-index: 30;
margin-bottom: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.2rem;
}

.rule-item {
display: flex;
align-items: flex-start;
gap: 1rem;
color: rgba(255, 240, 190, 0.85);
font-size: 1.3rem;
line-height: 1.6;
text-shadow: 0 0 12px rgba(255, 215, 150, 0.3);
letter-spacing: 0.4px;
border-left: 2px solid rgba(255, 215, 150, 0.25);
padding-left: 1.2rem;
}

.rule-star {
color: rgba(255, 215, 150, 0.8);
font-size: 1.3rem;
line-height: 1.6;
text-shadow: 0 0 15px #ffb86b;
flex-shrink: 0;
}

.rule-text {
font-style: italic;
font-weight: 300;
}

/* Контейнер с красивым скроллом */
.bubbles-container {
position: relative;
z-index: 5;
max-height: 500px;
overflow-y: auto;
padding: 10px 25px 10px 10px;
margin: -10px -25px -10px -10px;
scroll-behavior: smooth;
}

/* Стилизация скроллбара */
.bubbles-container::-webkit-scrollbar {
width: 8px;
}

.bubbles-container::-webkit-scrollbar-track {
background: rgba(10, 15, 30, 0.5);
border-radius: 10px;
border: 1px solid rgba(255, 215, 150, 0.1);
margin: 10px 0;
}

.bubbles-container::-webkit-scrollbar-thumb {
background: linear-gradient(145deg, rgba(255, 215, 150, 0.3), rgba(200, 160, 100, 0.2));
border-radius: 10px;
border: 1px solid rgba(255, 240, 200, 0.2);
box-shadow: inset 0 0 6px rgba(255, 230, 170, 0.3);
}

.bubbles-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(145deg, rgba(255, 225, 170, 0.5), rgba(220, 180, 120, 0.3));
}

.bubbles-container {
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 150, 0.3) rgba(10, 15, 30, 0.5);
}

.paragraph-list {
display: flex;
flex-direction: column;
gap: 2rem;
}

.p-item {
margin: 0;
padding: 1rem 1.5rem;
color: rgba(255, 255, 240, 0.9);
background: transparent;
border-radius: 2rem 0.8rem 2rem 0.8rem;
line-height: 1.8;
font-size: 1.3rem;
text-shadow: 0 2px 5px rgba(0,0,0,0.7);
border: 1px solid rgba(255, 220, 150, 0.03);
box-shadow: 0 4px 12px rgba(0,0,0,0.6);
letter-spacing: 0.3px;
backdrop-filter: blur(1px);
word-break: break-word;

transition: opacity 0.2s cubic-bezier(0.1, 0.8, 0.2, 1),
filter 0.2s cubic-bezier(0.1, 0.8, 0.2, 1),
transform 0.15s ease,
box-shadow 0.2s ease,
text-shadow 0.2s ease,
background 0.2s ease;

opacity: 0.2;
filter: brightness(0.2) blur(0.6px);
transform: scale(0.98);
will-change: opacity, filter, transform;
}

.p-text {
font-weight: 300;
}

.p-text br {
content: '';
display: block;
margin-bottom: 0.4rem;
}

.paragraph-list:hover .p-item {
opacity: 0.1;
filter: brightness(0.1) blur(1px);
transform: scale(0.97);
transition: opacity 0.15s ease,
filter 0.15s ease,
transform 0.15s ease;
}

.p-item:hover {
opacity: 1 !important;
filter: brightness(1.12) drop-shadow(0 0 3px rgba(255, 235, 150, 0.25)) !important;
transform: scale(1.02) translateY(-2px);

/* Фон стал глубже и темнее */
background: radial-gradient(circle at 30% 40%, rgba(255, 245, 210, 0.12) 0%, rgba(18, 16, 32, 0.96) 75%),
radial-gradient(circle at 70% 60%, rgba(240, 210, 150, 0.08), transparent 65%);
background-blend-mode: overlay, normal;

box-shadow:
0 0 12px rgba(255, 230, 170, 0.18),
0 0 25px rgba(250, 210, 120, 0.12),
inset 0 0 40px rgba(0, 0, 0, 0.55),
0 12px 28px rgba(0, 0, 0, 0.75);

border-color: rgba(255, 215, 140, 0.35);

/* Более аккуратная читаемость */
color: #fdfbf4;
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.85),
0 0 12px rgba(255, 210, 150, 0.25);

transition: opacity 0.1s ease,
filter 0.1s ease,
transform 0.1s ease,
box-shadow 0.15s ease,
text-shadow 0.15s ease,
background 0.15s ease;

cursor: pointer;
}

h2 {
text-align: center;
margin-bottom: 1.25rem;
font-weight: 300;
color: #fff8e7;
letter-spacing: 5px;
font-size: 20px;
text-transform: uppercase;
text-shadow:
0 0 20px #ffeedd,
0 0 40px #ffb86b,
2px 2px 4px rgba(0,0,0,0.5);
position: relative;
z-index: 30;
}

.constellation-sign {
text-align: center;
margin-bottom: 2.5rem;
color: rgba(255, 240, 190, 0.75);
font-size: 1.2rem;
letter-spacing: 3px;
position: relative;
z-index: 30;
text-shadow: 0 0 15px #ffb86b;
font-weight: 300;
}

@media (max-width: 550px) {
.story-container {
padding: 2rem 1.2rem;
}
h2 {
font-size: 1.6rem;
letter-spacing: 5px;
margin-bottom: 1rem;
}
.constellation-sign {
font-size: 1rem;
letter-spacing: 2px;
margin-bottom: 2rem;
}
.bubbles-container {
max-height: 400px;
padding: 8px 20px 8px 8px;
margin: -8px -20px -8px -8px;
}
.p-item {
font-size: 1rem;
padding: 0.8rem 1.2rem;
}
.rule-item {
font-size: 1rem;
gap: 0.8rem;
}
.rule-star {
font-size: 1.1rem;
}
}
</style>