* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #010106;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

.blackholes-quiz-page {
    position: relative;
    min-height: 100vh;
    padding: 65px 20px 100px;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 20%, rgba(100,60,180,.14), transparent 38%),
        radial-gradient(circle at 15% 70%, rgba(40,60,160,.08), transparent 35%),
        radial-gradient(circle at 85% 75%, rgba(180,70,90,.06), transparent 35%),
        #010106;
}


/* =========================================
   STARS
========================================= */

.stars,
.stars-small {
    position: fixed;
    inset: -25%;
    pointer-events: none;
    z-index: 0;
}

.stars {
    opacity: .4;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.9) 1px,
            transparent 1px
        );

    background-size: 75px 75px;
    transition: transform 1.5s ease;
}

.stars-small {
    opacity: .17;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.8) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
    transition: transform 2s ease;
}


/* =========================================
   HEADER
========================================= */

.header {
    position: relative;
    z-index: 5;
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.return {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 20px;
    margin-bottom: 40px;

    color: rgba(255,255,255,.7);

    border: 1px solid rgba(255,255,255,.22);

    text-decoration: none;

    font-size: 9px;
    letter-spacing: 3px;

    transition: .35s ease;
}

.return:hover {
    color: #010106;
    background: white;
    border-color: white;
    transform: translateY(-4px);
}

.label {
    margin-bottom: 18px;

    color: rgba(180,160,255,.55);

    font-size: 10px;
    letter-spacing: 5px;
}

h1 {
    margin: 0;

    font-size: clamp(40px,8vw,85px);

    line-height: .9;
    letter-spacing: 6px;
}

.subtitle {
    max-width: 720px;

    margin: 28px auto 0;

    color: rgba(255,255,255,.52);

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   QUIZ CONTAINER
========================================= */

.quiz-container {
    position: relative;
    z-index: 5;

    width: min(850px,100%);

    margin: 70px auto 0;

    padding: 35px;

    border: 1px solid rgba(255,255,255,.1);

    background: rgba(255,255,255,.025);

    transition: .8s ease;
}


/* =========================================
   QUIZ TOP
========================================= */

.quiz-top {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 15px;
}

.question-number {
    color: rgba(255,255,255,.45);

    font-size: 9px;
    letter-spacing: 3px;
}

.difficulty {
    padding: 7px 12px;

    border: 1px solid rgba(255,255,255,.15);

    color: rgba(255,255,255,.5);

    font-size: 8px;
    letter-spacing: 2px;
}


/* =========================================
   PROGRESS
========================================= */

.progress {
    width: 100%;
    height: 2px;

    margin-bottom: 45px;

    background: rgba(255,255,255,.08);

    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;

    background: white;

    transition: width .5s ease;
}


/* =========================================
   QUESTION
========================================= */

.question {
    margin-bottom: 35px;

    font-size: clamp(20px,3vw,30px);

    line-height: 1.4;
    letter-spacing: .4px;
}


/* =========================================
   ANSWERS
========================================= */

.answers {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 12px;
}

.answer {
    min-height: 70px;

    padding: 18px 20px;

    text-align: left;

    color: rgba(255,255,255,.7);

    border: 1px solid rgba(255,255,255,.12);

    background: rgba(255,255,255,.02);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    cursor: pointer;

    transition: .3s ease;
}

.answer:hover {
    color: white;

    border-color: rgba(150,110,255,.5);

    background: rgba(100,70,200,.08);

    transform: translateY(-3px);
}

.answer.correct {
    color: white;

    border-color: rgba(100,220,150,.7);

    background: rgba(60,180,110,.12);
}

.answer.wrong {
    color: white;

    border-color: rgba(255,90,90,.7);

    background: rgba(220,50,50,.12);
}

.answer.disabled {
    pointer-events: none;
}


/* =========================================
   NEXT
========================================= */

.next-area {
    display: flex;
    justify-content: flex-end;

    margin-top: 25px;
}

.next-button {
    display: none;

    padding: 13px 25px;

    color: rgba(255,255,255,.8);

    border: 1px solid rgba(255,255,255,.2);

    background: transparent;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 9px;
    letter-spacing: 3px;

    cursor: pointer;

    transition: .3s ease;
}

.next-button:hover {
    color: #010106;

    background: white;

    border-color: white;

    transform: translateY(-3px);
}


/* =========================================
   RESULT
========================================= */

.result {
    display: none;

    position: relative;

    text-align: center;

    min-height: 500px;

    padding: 25px 10px 15px;

    overflow: hidden;
}

.result::before {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    left: 50%;
    top: 43%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,1) 0%,
            rgba(5,5,15,1) 25%,
            rgba(90,50,170,.2) 45%,
            rgba(50,30,130,.08) 60%,
            transparent 72%
        );

    box-shadow:
        0 0 80px rgba(90,50,200,.18);

    animation:
        blackHoleGlow 4s ease-in-out infinite;

    pointer-events: none;
}

@keyframes blackHoleGlow {

    0%,100% {
        transform:
            translate(-50%,-50%)
            scale(.88);

        opacity: .65;
    }

    50% {
        transform:
            translate(-50%,-50%)
            scale(1.12);

        opacity: 1;
    }
}


/* =========================================
   BLACK HOLE ICON
========================================= */

.completion-icon {
    position: relative;

    width: 105px;
    height: 105px;

    margin: 5px auto 32px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #000000 0%,
            #000000 35%,
            #171022 52%,
            rgba(130,70,210,.7) 68%,
            transparent 75%
        );

    box-shadow:
        0 0 18px rgba(170,100,255,.65),
        0 0 45px rgba(100,60,210,.45),
        0 0 100px rgba(80,40,180,.2);

    animation:
        blackHoleAppear 1s ease forwards,
        blackHoleFloat 5s ease-in-out 1s infinite;

    z-index: 2;
}

.completion-icon::before {
    content: "";

    position: absolute;

    inset: -14px;

    border-radius: 50%;

    border: 5px solid rgba(170,100,255,.15);

    border-top-color: rgba(230,190,255,.85);
    border-right-color: rgba(120,70,255,.65);

    transform: rotate(-25deg);

    box-shadow:
        0 0 20px rgba(170,100,255,.55);

    animation:
        accretionSpin 3s linear infinite;
}

.completion-icon::after {
    content: "";

    position: absolute;

    inset: -28px;

    border-radius: 50%;

    border: 1px dashed rgba(200,170,255,.18);

    animation:
        outerSpin 12s linear infinite;
}

@keyframes blackHoleAppear {

    from {
        opacity: 0;
        transform: scale(.15);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes blackHoleFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes accretionSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes outerSpin {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/* =========================================
   RESULT TEXT
========================================= */

.result-label {
    position: relative;
    z-index: 2;

    margin-bottom: 18px;

    color: rgba(190,165,255,.65);

    font-size: 10px;
    letter-spacing: 6px;

    animation:
        fadeUp .8s ease .2s both;
}

.result-title {
    position: relative;
    z-index: 2;

    margin-bottom: 12px;

    font-size: clamp(32px,7vw,65px);

    letter-spacing: 5px;

    animation:
        titleAppear 1s ease .35s both;
}

@keyframes titleAppear {

    from {
        opacity: 0;

        transform: translateY(20px);

        letter-spacing: 15px;
    }

    to {
        opacity: 1;

        transform: translateY(0);

        letter-spacing: 5px;
    }
}

.score {
    position: relative;
    z-index: 2;

    margin-bottom: 22px;

    font-size: 25px;
    font-weight: bold;

    letter-spacing: 3px;

    animation:
        fadeUp .8s ease .55s both;
}

.result-text {
    position: relative;
    z-index: 2;

    max-width: 650px;

    margin: 0 auto 30px;

    color: rgba(255,255,255,.5);

    font-size: 13px;

    line-height: 1.8;

    animation:
        fadeUp .8s ease .7s both;
}

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   SCORE BAR
========================================= */

.final-score-bar {
    position: relative;
    z-index: 2;

    width: min(500px,90%);

    height: 3px;

    margin: 0 auto 35px;

    background: rgba(255,255,255,.08);

    overflow: hidden;

    animation:
        fadeUp .8s ease .85s both;
}

.final-score-fill {
    width: 0%;
    height: 100%;

    background: white;

    box-shadow:
        0 0 12px rgba(190,160,255,.9);

    transition:
        width 1.8s cubic-bezier(.2,.8,.2,1);
}


/* =========================================
   BUTTONS
========================================= */

.result-buttons {
    position: relative;
    z-index: 2;

    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    animation:
        fadeUp .8s ease 1s both;
}

.result-button {
    padding: 13px 23px;

    color: rgba(255,255,255,.75);

    border: 1px solid rgba(255,255,255,.2);

    background: transparent;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 9px;

    letter-spacing: 2px;

    cursor: pointer;

    transition: .3s ease;
}

.result-button:hover {
    color: #010106;

    background: white;

    border-color: white;

    transform: translateY(-3px);
}


/* =========================================
   PARTICLES
========================================= */

.final-particle {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: white;

    pointer-events: none;

    opacity: 0;

    animation:
        particleFly 2.5s ease-out forwards;
}

@keyframes particleFly {

    0% {
        opacity: 0;

        transform:
            translate(0,0)
            scale(.2);
    }

    15% {
        opacity: 1;

        transform:
            translate(0,0)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(.2);
    }
}


/* =========================================
   FOOTER
========================================= */

.footer {
    position: relative;
    z-index: 5;

    margin-top: 35px;

    text-align: center;

    color: rgba(255,255,255,.25);

    font-size: 9px;

    letter-spacing: 4px;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:600px) {

    .blackholes-quiz-page {
        padding: 50px 15px 80px;
    }

    .quiz-container {
        padding: 25px;
    }

    .answers {
        grid-template-columns: 1fr;
    }

    .question {
        font-size: 20px;
    }

    .completion-icon {
        width: 85px;
        height: 85px;
    }

    .result {
        min-height: 550px;
    }
}