* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: #000;
    color: #fff;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Космический фон в стиле Звёздных войн */
.space-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

/* Туманность */
.nebula {
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 102, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 0, 0, 0.1) 0%, transparent 50%);
    animation: nebulaFloat 20s ease-in-out infinite;
}

@keyframes nebulaFloat {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(5deg);
        opacity: 0.5;
    }
}

/* Звёздное небо */
.stars, .stars2, .stars3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.stars {
    background: transparent;
    box-shadow:
        0 0 2px #fff,
        100px 200px 1px #fff,
        200px 400px 1px #fff,
        300px 100px 1px #fff,
        400px 300px 1px #fff,
        500px 500px 1px #fff,
        600px 200px 1px #fff,
        700px 400px 1px #fff,
        800px 100px 1px #fff,
        900px 300px 1px #fff,
        1000px 500px 1px #fff,
        1100px 200px 1px #fff,
        1200px 400px 1px #fff,
        1300px 100px 1px #fff,
        1400px 300px 1px #fff,
        1500px 500px 1px #fff,
        1600px 200px 1px #fff,
        1700px 400px 1px #fff,
        1800px 100px 1px #fff,
        1900px 300px 1px #fff;
    width: 1px;
    height: 1px;
    animation: animateStars 100s linear infinite;
}

.stars2 {
    background: transparent;
    box-shadow:
        150px 250px 2px rgba(255, 255, 255, 0.8),
        250px 450px 2px rgba(255, 255, 255, 0.8),
        350px 150px 2px rgba(255, 255, 255, 0.8),
        450px 350px 2px rgba(255, 255, 255, 0.8),
        550px 550px 2px rgba(255, 255, 255, 0.8),
        650px 250px 2px rgba(255, 255, 255, 0.8),
        750px 450px 2px rgba(255, 255, 255, 0.8),
        850px 150px 2px rgba(255, 255, 255, 0.8),
        950px 350px 2px rgba(255, 255, 255, 0.8),
        1050px 550px 2px rgba(255, 255, 255, 0.8),
        1150px 250px 2px rgba(255, 255, 255, 0.8),
        1250px 450px 2px rgba(255, 255, 255, 0.8),
        1350px 150px 2px rgba(255, 255, 255, 0.8),
        1450px 350px 2px rgba(255, 255, 255, 0.8),
        1550px 550px 2px rgba(255, 255, 255, 0.8);
    width: 2px;
    height: 2px;
    animation: animateStars 150s linear infinite;
}

.stars3 {
    background: transparent;
    box-shadow:
        75px 175px 1px rgba(255, 255, 255, 0.5),
        175px 375px 1px rgba(255, 255, 255, 0.5),
        275px 75px 1px rgba(255, 255, 255, 0.5),
        375px 275px 1px rgba(255, 255, 255, 0.5),
        475px 475px 1px rgba(255, 255, 255, 0.5),
        575px 175px 1px rgba(255, 255, 255, 0.5),
        675px 375px 1px rgba(255, 255, 255, 0.5),
        775px 75px 1px rgba(255, 255, 255, 0.5),
        875px 275px 1px rgba(255, 255, 255, 0.5),
        975px 475px 1px rgba(255, 255, 255, 0.5),
        1075px 175px 1px rgba(255, 255, 255, 0.5),
        1175px 375px 1px rgba(255, 255, 255, 0.5),
        1275px 75px 1px rgba(255, 255, 255, 0.5),
        1375px 275px 1px rgba(255, 255, 255, 0.5),
        1475px 475px 1px rgba(255, 255, 255, 0.5),
        1575px 175px 1px rgba(255, 255, 255, 0.5),
        1675px 375px 1px rgba(255, 255, 255, 0.5);
    width: 1px;
    height: 1px;
    animation: animateStars 200s linear infinite;
}

@keyframes animateStars {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}

/* Контейнер */
.container {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Контент */
.content {
    width: 100%;
    max-width: 800px;
    padding: 40px 20px;
}

.test-intro {
    text-align: center;
    animation: fadeInScale 1s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Заголовок */
.main-title {
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 12px;
    text-transform: uppercase;
    margin-bottom: 80px;
    background: linear-gradient(
        to bottom,
        #fff 0%,
        #ccc 50%,
        #888 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    animation: titleGlow 3s ease-in-out infinite;
    line-height: 1.3;
}

@keyframes titleGlow {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.6));
    }
}

/* Кнопка */
.start-button {
    position: relative;
    padding: 25px 70px;
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 4px;
    background: linear-gradient(135deg, #0066ff 0%, #00ccff 100%);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 60px;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow:
        0 0 40px rgba(0, 102, 255, 0.6),
        0 0 80px rgba(0, 102, 255, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.start-button:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 60px rgba(0, 102, 255, 0.9),
        0 0 100px rgba(0, 102, 255, 0.6),
        inset 0 0 30px rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
}

.start-button:active {
    transform: scale(1.05);
}

.button-text {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.button-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 70%
    );
    animation: buttonShine 4s linear infinite;
}

@keyframes buttonShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Форма теста */
.test-form {
    animation: fadeIn 0.5s ease;
    text-align: center;
}

.form-title {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .main-title {
        font-size: 2.5rem;
        letter-spacing: 6px;
        margin-bottom: 60px;
    }

    .start-button {
        padding: 20px 50px;
        font-size: 1.4rem;
        letter-spacing: 3px;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.8rem;
        letter-spacing: 4px;
        margin-bottom: 50px;
    }

    .start-button {
        padding: 18px 40px;
        font-size: 1.2rem;
        letter-spacing: 2px;
    }

    .content {
        padding: 20px 15px;
    }
}

/* Стили для вопросов */
.question-block {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    text-align: left;
}

.question-block:hover {
    border-color: rgba(0, 102, 255, 0.5);
    box-shadow: 0 0 30px rgba(0, 102, 255, 0.3);
}

.question-title {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #ffd700;
    line-height: 1.5;
}

.answers {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.answer-option {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.answer-option:hover {
    background: rgba(0, 102, 255, 0.1);
    border-color: rgba(0, 102, 255, 0.5);
    transform: translateX(10px);
}

.answer-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    cursor: pointer;
    accent-color: #0066ff;
}

.answer-option span {
    flex: 1;
    line-height: 1.4;
}

/* Кнопка отправки */
.submit-button {
    position: relative;
    padding: 20px 60px;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #000;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
    margin-top: 40px;
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.4);
}

.submit-button:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 50px rgba(255, 215, 0, 0.9),
        0 0 80px rgba(255, 215, 0, 0.6);
}

.submit-button:active {
    transform: scale(1.05);
}

/* Результаты */
.test-result {
    animation: fadeInScale 0.6s ease;
}

.result-title {
    font-size: 3rem;
    margin-bottom: 40px;
    color: #ffd700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

.result-box {
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid;
    border-radius: 30px;
    padding: 50px;
    margin-bottom: 40px;
    backdrop-filter: blur(15px);
    box-shadow: 0 0 50px;
}

.result-side {
    font-size: 2.5rem;
    margin-bottom: 25px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.result-description {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 25px;
    opacity: 0.9;
}

.result-score {
    font-size: 1.5rem;
    font-weight: bold;
    opacity: 0.8;
}

/* Цветовые схемы результатов */
.dark-side {
    border-color: rgba(255, 0, 0, 0.6);
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.4);
}

.dark-side .result-side {
    color: #ff0000;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
}

.gray-zone {
    border-color: rgba(150, 150, 150, 0.6);
    box-shadow: 0 0 50px rgba(150, 150, 150, 0.4);
}

.gray-zone .result-side {
    color: #aaaaaa;
    text-shadow: 0 0 20px rgba(150, 150, 150, 0.8);
}

.light-side-2 {
    border-color: rgba(0, 200, 255, 0.6);
    box-shadow: 0 0 50px rgba(0, 200, 255, 0.4);
}

.light-side-2 .result-side {
    color: #00c8ff;
    text-shadow: 0 0 20px rgba(0, 200, 255, 0.8);
}

.light-side {
    border-color: rgba(0, 255, 100, 0.6);
    box-shadow: 0 0 50px rgba(0, 255, 100, 0.4);
}

.light-side .result-side {
    color: #00ff64;
    text-shadow: 0 0 20px rgba(0, 255, 100, 0.8);
}

/* Кнопка перезапуска */
.restart-button {
    position: relative;
    padding: 20px 60px;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #0066ff 0%, #00ccff 100%);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow:
        0 0 30px rgba(0, 102, 255, 0.6),
        0 0 60px rgba(0, 102, 255, 0.4);
}

.restart-button:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 50px rgba(0, 102, 255, 0.9),
        0 0 80px rgba(0, 102, 255, 0.6);
}

.restart-button:active {
    transform: scale(1.05);
}

/* Ссылка просмотра ответов */
.view-answers-link {
    color: #00CED1;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    position: relative;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(0, 206, 209, 0.5);
    cursor: pointer;
}

.view-answers-link:hover {
    color: #4169E1;
    text-shadow: 0 0 20px rgba(65, 105, 225, 0.8);
}

.view-answers-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00CED1, #4169E1);
    transition: width 0.3s ease;
}

.view-answers-link:hover::after {
    width: 100%;
}

/* Адаптивность для вопросов */
@media (max-width: 768px) {
    .question-block {
        padding: 20px;
    }

    .question-title {
        font-size: 1.2rem;
    }

    .answer-option {
        padding: 12px 15px;
        font-size: 1rem;
    }

    .submit-button,
    .restart-button {
        padding: 18px 50px;
        font-size: 1.3rem;
    }

    .view-answers-link {
        font-size: 1rem;
    }

    .result-title {
        font-size: 2.2rem;
    }

    .result-box {
        padding: 30px;
    }

    .result-side {
        font-size: 2rem;
    }

    .result-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .question-block {
        padding: 15px;
    }

    .question-title {
        font-size: 1.1rem;
    }

    .answer-option {
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    .answer-option:hover {
        transform: translateX(5px);
    }

    .submit-button,
    .restart-button {
        padding: 15px 40px;
        font-size: 1.1rem;
        letter-spacing: 2px;
    }

    .view-answers-link {
        font-size: 0.95rem;
    }

    .result-title {
        font-size: 1.8rem;
    }

    .result-box {
        padding: 20px;
    }

    .result-side {
        font-size: 1.6rem;
    }

    .result-description {
        font-size: 1rem;
    }

    .result-score {
        font-size: 1.2rem;
    }
}