/*************************************
 * KVÍZ OLDAL – KÖZÉPRE IGAZÍTÁS
 *************************************/
body.quiz-page {
    display: flex;
    justify-content: center;   /* vízszintesen középre */
    align-items: center;       /* függőlegesen középre */
    min-height: 100vh;
}


/*************************************
 * NAGY KERET (ugyanolyan, mint a főoldalon)
 *************************************/
.quiz-frame {
    max-width: 1020px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 40px;
    border-radius: 28px;  
    position: relative;
    z-index: 1;
}


/*************************************
 * ÜDVÖZLŐ ELRENDEZÉS (BAL–JOBB)
 *************************************/
.welcome-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;

    width: 100%;
    min-height: 320px;
    box-sizing: border-box;
}

/* Bal oldal (szöveg + gomb) */
.left-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}
.left-side button.btn-primary {
    align-self: flex-start;
}


/* Jobb oldal (fa) */
.right-side {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* FA PNG */
.tree-image {
    width: 320px;
    height: auto;
    max-width: 100%;
}


/*************************************
 * SZÖVEGEK
 *************************************/
.left-title {
    text-align: left;
    margin: 0 0 12px;
    font-size: 32px;
}

.left-text {
    text-align: left;
    font-size: 18px;
    margin: 0 0 20px;
}

.welcome-text {
    color: rgba(225, 237, 255, 0.9);
}

/*************************************
 * KVÍZ BELSŐ BOX
 *************************************/
.quiz-box {
    width: 100%;
    padding: 16px 0;
    box-sizing: border-box;
}

.question-text {
    text-align: center;
    font-size: 20px;
    margin-bottom: 24px;
}

/*************************************
 * GOMBOK
 *************************************/
.answer-btn {
    width: 70%;
    max-width: 320px;
    margin: 10px auto;
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.answer-btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.20);
}

.answer-btn.correct {
    background: rgba(0,255,80,0.8) !important;
}

.answer-btn.wrong {
    background: rgba(255,50,50,0.8) !important;
}

/*************************************
 * VÉGEREDMÉNY
 *************************************/
.final {
    text-align: center;
}




/*************************************
 * MOBIL NÉZET
 *************************************/
@media (max-width: 768px) {

    .welcome-layout {
        flex-direction: column;
        text-align: center;
    }

    .left-side {
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .right-side {
        width: 100%;
        margin-top: 16px;
        justify-content: center;
    }

    .tree-image {
        width: 240px;
    }

    .left-title,
    .left-text {
        text-align: center;
    }
}

body.quiz-page .page-frame {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}