Код:
[html]
<div class="tarot-wrapper">
<div class="tarot-card">
<div class="tarot-inner">
<!-- FRONT -->
<div class="tarot-front">
<div class="card-surface">
<img src="https://upforme.ru/uploads/001c/82/f2/62/581258.png" alt="spell art">
<div class="tarot-title">EXODUS TO HELL</div>
</div>
</div>
<!-- BACK -->
<div class="tarot-back">
<div class="card-surface back-content">
<div class="spell-name">Exodus to Hell</div>
<div class="spell-sub">Заклинание • 9-й уровень • Воплощение</div>
<div class="spell-stats">
<div><strong>Время:</strong> 1 минута концентрации</div>
<div><strong>Дистанция:</strong> 1 километр</div>
<div><strong>Компоненты:</strong> В, С, М</div>
<div><strong>Длительность:</strong> Мгновенная</div>
</div>
<div class="spell-bubble">
<p>— Представь, что мы обречены. Что смерть неизбежна. Что в таком случае предпочтешь - смиренно ждать своей участи? Или отправиться следом за мной в преисподнюю? <br>
— Отправлюсь следом. </p>
</div>
<div class="spell-text">
<p>
Личная фатальная договоренность Клайда и Шона, их нерушимая клятва, в основе которой - решение уйти из жизни совместно, в один миг и на своих условиях. Будет использовано лишь в том случае, если смерть в битве с противником окажется неизбежной. Когда терять уже будет нечего.
</p>
<p>
<strong>Условие активации:</strong> Когда смерть в битве становится неизбежной, оба участника концентрируют магическую энергию и произносят слово «Exodus». После чего Клайд не просто целует Шона, а, обратившись чернотой, начинает проникать в его тело через рот, полностью заполняя собой его внутренности.
</p>
<p>
<strong>Эффект:</strong> Став физически единым целым, ведьмак и его фамильяр провоцируют мощный взрыв магической энергии, ставящий точку на жизни как их двоих, так и всех существ, оказавшихся в радиусе 1 км.
</p>
<p>
<strong>Воздействие и последствия:</strong> Во время взрыва из эпицентра высвобождается плотная масса "черни", выстреливая во все стороны плотными щупами. Каждый щуп движется с огромной скоростью и способен пробить собой как деревянные, так и кирпичные стены, и уж тем более органику. Помимо разрушительного кинетического воздействия, в первые секунды "чернь" крайне ядовита, что в конечном счете приводит к непоправимым разрушениям и массовой гибели всего живого в радиусе действия заклинания. После гибели Шона и Клайда на их месте остается кратер, заполненный ядовитой черной субстанцией.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Центрирование */
.tarot-wrapper {
display: flex;
justify-content: center;
margin: 40px 0;
}
/* Фиксированный размер */
.tarot-card {
width: 500px;
height: 700px;
perspective: 1600px;
}
/* Вращающийся слой */
.tarot-inner {
width: 100%;
height: 100%;
position: relative;
transition: transform 0.9s ease;
transform-style: preserve-3d;
}
/* Переворот */
.tarot-card:hover .tarot-inner {
transform: rotateY(180deg);
}
/* Общие стороны */
.tarot-front,
.tarot-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: translateZ(0);
}
/* Поверхность карты (тут скругление!) */
.card-surface {
width: 100%;
height: 100%;
border-radius: 24px;
border: 5px solid #c7a84f;
box-sizing: border-box;
overflow: hidden;
background: #111;
position: relative;
}
/* FRONT */
.tarot-front img {
display: block; /* убирает inline-отступ */
width: 100%;
height: 100%;
object-fit: cover;
}
.tarot-title {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 18px 0;
text-align: center;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
color: #e8d8a8;
font-family: serif;
font-size: 20px;
letter-spacing: 2px;
}
/* BACK */
.tarot-back {
transform: rotateY(180deg);
}
.back-content {
padding: 30px;
display: flex;
flex-direction: column;
background: #1a1a1d;
color: #f2f2f2;
font-family: Georgia, serif;
}
.spell-name {
text-align: center;
font-size: 22px;
color: #e6c76a;
margin-bottom: 4px;
}
.spell-sub {
text-align: center;
font-size: 14px;
color: #aaa;
margin-bottom: 18px;
}
.spell-stats {
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
padding: 10px 0;
}
.spell-text {
font-size: 15px;
line-height: 1.7;
overflow-y: auto;
flex-grow: 1;
}
/* Скролл */
.spell-text::-webkit-scrollbar {
width: 6px;
}
.spell-text::-webkit-scrollbar-thumb {
background: rgba(199,168,79,0.5);
border-radius: 4px;
}
.spell-bubble {
margin: 8px 0 20px 0;
padding-top: 18px; /* верхний отступ внутри блока */
padding-right: 20px; /* правый отступ внутри блока */
padding-bottom: 5px; /* нижний отступ внутри блока */
padding-left: 20px; /* левый отступ внутри блока */
background: rgba(20, 16, 8, 0.85);
border: 1px solid rgba(212, 175, 55, 0.6);
border-radius: 14px;
box-shadow:
0 0 12px rgba(212, 175, 55, 0.25),
inset 0 0 8px rgba(212, 175, 55, 0.15);
color: #f0e6c8;
font-style: italic;
font-size: 13px;
position: relative;
}
/* тонкая декоративная линия сверху и снизу */
.spell-bubble::before,
.spell-bubble::after {
content: "";
position: absolute;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(
to right,
transparent,
rgba(212, 175, 55, 0.8),
transparent
);
}
.spell-bubble::before {
top: -6px;
}
.spell-bubble::after {
bottom: -6px;
}
</style>
[/html]