body {
    margin: 0;
    background: black;
    color: white;
    font-family: "Times New Roman", Times, serif;
    line-height: 1.5;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: vignette-pulse 4s infinite ease-in-out;
    pointer-events: none;
    z-index: 9999;
}

@keyframes vignette-pulse {
    0%, 100% {
        box-shadow: 
            inset 0 0 50px rgba(138, 43, 226, 0.3), 
            inset 0 0 300px rgba(0, 0, 0, 1),
            inset 0 0 500px rgba(0, 0, 0, 0.9);
    }
    50% {
        box-shadow: 
            inset 0 0 60px rgba(138, 43, 226, 0.5), 
            inset 0 0 250px rgba(0, 0, 0, 1),
            inset 0 0 450px rgba(0, 0, 0, 0.8);
    }
}

.container {
    max-width: 800px; /* Общая ширина контейнера */
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.main-title {
    font-family: "Times New Roman", Times, serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 48px;
    color: white;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.description {
    margin-top: 65px;
    margin-bottom: 65px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.description p {
    font-family: "Times New Roman", Times, serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: #dfdfdf;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 20px;
    text-align: center;
}

.top-symbol {
    width: 100px;
    margin-bottom: 20px;
    transition: transform 0.2s, opacity 0.3s;
}

.top-symbol:hover {
    transform: scale(1.1);
}

.top-symbol:active {
    transform: scale(0.9);
}

/* Кнопки */
.menu a {
    display: block;
    margin: 10px auto;
    padding: 12px;
    width: 350px;
    background: white;
    color: black;
    text-decoration: none;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    font-size: 24px;
    border-radius: 8px;
    transition: 0.3s;
    transform: perspective(600px) rotateX(45deg);
}

.menu a:hover {
    transform: perspective(500px) rotateX(0deg) scale(1.05);
}

.button-wrapper {
    position: relative;
    display: inline-block;
}

.hover-image {
    position: absolute;
    left: -120px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    opacity: 0;
    transition: opacity 4s ease;
    pointer-events: none;
    image-rendering: pixelated;
}

.button-wrapper:hover .hover-image {
    opacity: 1;
}

.bottom-monster {
    display: block;
    margin: 1000px auto 0;
    width: 100%;
    max-width: 5000px;
    height: auto;
    position: relative;
    opacity: 0.8;
    transition: transform 0.1s, filter 0.1s;
}

.clicker-container {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    width: 100%;
}

#counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Times New Roman", serif;
    font-size: 120px;
    font-weight: bold;
    color: red;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease;
    text-shadow: 0 0 20px black, 0 0 40px rgba(255, 0, 0, 0.5);
    z-index: 10;
}

#counter.show {
    opacity: 0.4;
}

.clicker-container:active .bottom-monster {
    transform: scale(0.97) rotate(1deg);
    filter: brightness(1.5) saturate(2);
}

.stop-glitch {
    position: fixed;
    color: #ff0000;
    font-family: "Times New Roman", serif;
    font-size: 60px;
    font-weight: bold;
    z-index: 10005;
    pointer-events: none;
    text-shadow: 0 0 15px black, 2px 2px 0px darkred;
    animation: stop-shake 0.1s infinite, stop-fade 2s forwards;
}

@keyframes stop-shake {
    0% { transform: translate(2px, 2px); }
    25% { transform: translate(-2px, -2px); }
    50% { transform: translate(-3px, 2px); }
    75% { transform: translate(3px, -2px); }
    100% { transform: translate(2px, 2px); }
}

@keyframes stop-fade {
    0% { opacity: 1; scale: 1; }
    70% { opacity: 1; scale: 1.2; }
    100% { opacity: 0; scale: 0.8; }
}

#eyes-screamer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    z-index: 10006;
    pointer-events: none;
}

#eyes-screamer img {
    position: absolute;
    width: 350px;
    image-rendering: pixelated;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    filter: brightness(1.5) drop-shadow(0 0 20px red);
    animation: eye-blink 0.2s infinite alternate;
}

@keyframes eye-blink {
    0% { opacity: 1; }
    100% { opacity: 0.4; }
}

.char-row img {
    display: inline-block;
    margin: 10px;
    width: 120px;
    image-rendering: pixelated;
    animation: head-move 3s infinite alternate ease-in-out;
}

@keyframes head-move {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

.secret-link {
    position: absolute;
    top: 250px;
    left: 10%;
    color: #ffffff;
    font-family: serif;
    font-size: 24px;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10001;
}

.secret-link:hover {
    opacity: 0.2;
    transition: opacity 10s ease;
}

.goku-secret-container {
    position: absolute; 
    
    top: 50px; 
    right: 50px;
    
    z-index: 10007;
    width: 250px;
    height: 250px;
    cursor: default;
}

.goku-img {
    width: 200px;
    opacity: 0;
    transition: transform 0.5s ease-in, opacity 0.3s ease;
}

.run-away {
    transform: translateX(150vw) !important;
    opacity: 1 !important;
}

.exe-header-container {
    position: relative;
    width: 100%;
    height: 150px; /* Можешь изменить высоту шапки */
    background: black;
    overflow: hidden;
    border-bottom: 2px solid #600; /* Мрачная красная полоса снизу */
}

/* Общие стили для всех слоев облаков */
.cloud1, .cloud2, .cloud3, .cloud4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; /* Ширина в 2 раза больше для бесконечного цикла */
    height: 100%;
    background-repeat: repeat-x;
    background-size: contain;
}

/* Настройка каждого слоя по отдельности */

.cloud1 {
    background-image: url('images/cloud1.png');
    opacity: 0.4;
    animation: move-left 50s linear infinite;
    z-index: 1;
}

.cloud2 {
    background-image: url('images/cloud2.png');
    opacity: 0.6;
    animation: move-right 45s linear infinite;
    z-index: 2;
}

.cloud3 {
    background-image: url('images/cloud3.png');
    opacity: 0.8;
    animation: move-left 30s linear infinite, blood-flicker 4s infinite;
    z-index: 3;
}

.cloud4 {
    background-image: url('images/cloud4.png');
    opacity: 1;
    animation: move-right 22s linear infinite;
    z-index: 4;
}

/* И не забудь про логотип X, если он тоже в папке images */
.logo-x {
    height: 70px;
    filter: drop-shadow(0 0 15px red);
    animation: x-float 13s ease-in-out infinite alternate;
}

/* 1. Убираем красную полоску снизу шапки */
.exe-header-container {
    border-bottom: none !important;
}

/* 2. Добавляем логику движения для облаков */

/* Движение влево */
@keyframes move-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Движение вправо */
@keyframes move-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* Эффект мерцания для cloud3 */
@keyframes blood-flicker {
    0%, 100% { opacity: 0.5; filter: brightness(1); }
    50% { opacity: 0.9; filter: brightness(1.3); }
}

/* Плавное парение логотипа X */
@keyframes x-float {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}