/*
|--------------------------------------------------------------------------
| QUIZ NORMAL - ESTRUTURA DA PAGINA
|--------------------------------------------------------------------------
|
| Pergunta e alternativas ficam em game-question-standard.css.
|
*/

:root {
    --quiz-normal-primary: #c125fa;
    --quiz-normal-primary-dark: #9e18d1;
    --platform-primary-dark: #a115d1;

    --quiz-normal-page-bg: #f7f8fc;
    --quiz-normal-text: #2d3748;

    --quiz-normal-success: #48ad61;
    --quiz-normal-success-soft: #e7f8ec;

    --quiz-normal-danger: #df5757;
    --quiz-normal-danger-soft: #fdeaea;
}


*,
*::before,
*::after {
    box-sizing:
        border-box;
}


html,
body {
    margin:
        0;

    width:
        100%;

    min-height:
        100%;

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


body {
    min-height:
        100vh;

    min-height:
        100dvh;

    background:
        var(--quiz-normal-page-bg);

    color:
        var(--quiz-normal-text);
}


button {
    font:
        inherit;
}


/* =========================================================
   LAYOUT
========================================================= */

.quiz-normal-layout {
    width:
        100%;

    min-height:
        100vh;

    min-height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;
}


/* =========================================================
   CABECALHO
   Mesmo tamanho estrutural do header da plataforma,
   mas sem botao de menu.
========================================================= */

.quiz-brand-header {
    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    width:
        100%;

    min-height:
        74px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        14px
        18px;

    background:
        var(--quiz-normal-primary);

    box-shadow:
        0
        4px
        6px
        -1px
        rgba(
            0,
            0,
            0,
            0.10
        ),
        0
        2px
        4px
        -1px
        rgba(
            0,
            0,
            0,
            0.06
        );
}


.quiz-brand-logo {
    display:
        block;

    width:
        auto;

    max-width:
        190px;

    height:
        44px;

    object-fit:
        contain;
}


/* =========================================================
   CONTEUDO
========================================================= */

.quiz-normal-page {
    flex:
        1
        1
        auto;

    min-height:
        0;

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        28px
        14px;
}


.quiz-normal-shell {
    width:
        100%;

    min-width:
        0;
}


/* =========================================================
   RESULTADO INLINE
========================================================= */

.inline-result {
    width:
        min(
            520px,
            100%
        );

    max-height:
        0;

    margin:
        0
        auto;

    overflow:
        hidden;

    opacity:
        0;

    transform:
        translateY(4px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        max-height 0.18s ease,
        margin-top 0.18s ease;
}


.inline-result.visible {
    max-height:
        130px;

    margin-top:
        10px;

    opacity:
        1;

    transform:
        translateY(0);
}


.inline-result-card {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    width:
        100%;

    min-height:
        58px;

    padding:
        10px
        13px;

    border:
        1px
        solid
        #e3dbe6;

    border-radius:
        12px;

    background:
        #ffffff;

    box-shadow:
        0
        4px
        12px
        rgba(
            0,
            0,
            0,
            0.08
        );
}


.inline-result.correct
.inline-result-card {
    border-color:
        rgba(
            72,
            173,
            97,
            0.38
        );

    background:
        var(--quiz-normal-success-soft);
}


.inline-result.incorrect
.inline-result-card {
    border-color:
        rgba(
            223,
            87,
            87,
            0.38
        );

    background:
        var(--quiz-normal-danger-soft);
}


.inline-result-icon {
    width:
        34px;

    height:
        34px;

    min-width:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #ffffff;

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

    font-size:
        17px;

    font-weight:
        700;

    line-height:
        1;
}


.inline-result.correct
.inline-result-icon {
    background:
        var(--quiz-normal-success);
}


.inline-result.incorrect
.inline-result-icon {
    background:
        var(--quiz-normal-danger);
}


.inline-result-content {
    flex:
        1;

    min-width:
        0;
}


.inline-result-label {
    margin-bottom:
        2px;

    color:
        #706574;

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.15;

    text-transform:
        uppercase;

    letter-spacing:
        0.5px;
}


.inline-result-title {
    margin:
        0;

    color:
        #342c37;

    font-size:
        15px !important;

    font-weight:
        700;

    line-height:
        1.2;
}


.inline-result-message {
    margin-top:
        2px;

    color:
        #655a68;

    font-size:
        11px !important;

    font-weight:
        400;

    line-height:
        1.25;
}


/* =========================================================
   MODAL DO TEXTO COMPLETO
========================================================= */

.question-text-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        20000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(
            10,
            6,
            14,
            0.72
        );

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}


.question-text-modal.visible {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


.question-text-modal-card {
    width:
        min(
            720px,
            calc(
                100vw
                -
                28px
            )
        );

    max-height:
        78vh;

    overflow-y:
        auto;

    padding:
        24px;

    border:
        2px
        solid
        var(--quiz-normal-primary);

    border-radius:
        16px;

    background:
        #ffffff;

    color:
        #342c37;

    box-shadow:
        0
        24px
        70px
        rgba(
            0,
            0,
            0,
            0.32
        );
}


.question-text-modal-kicker {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        26px;

    padding:
        0
        10px;

    margin-bottom:
        10px;

    border-radius:
        999px;

    background:
        var(--quiz-normal-primary);

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.6px;
}


.question-text-modal-card h2 {
    margin:
        0
        0
        12px;

    font-size:
        19px;

    line-height:
        1.25;
}


.question-text-modal-content {
    margin:
        0;

    color:
        #433a46;

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.55;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


.question-text-modal-close {
    min-height:
        36px;

    margin-top:
        16px;

    padding:
        0
        16px;

    border:
        0;

    border-radius:
        9px;

    background:
        var(--quiz-normal-primary);

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;
}


/* =========================================================
   RODAPE
   Mesmo rodape usado por layouts.platform / dashboard.
========================================================= */

.platform-footer {
    background:
        var(--platform-primary-dark);

    color:
        #ffffff;

    text-align:
        center;

    padding:
        20px;
}


.platform-footer p {
    margin:
        0;

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

    font-size:
        0.82rem;
}


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

@media (max-width: 560px) {

    .quiz-brand-header {
        min-height:
            62px;

        padding:
            9px
            12px;
    }


    .quiz-brand-logo {
        max-width:
            165px;

        height:
            38px;
    }


    .quiz-normal-page {
        align-items:
            flex-start;

        padding:
            18px
            7px;
    }
.inline-result-card {
        min-height:
            54px;

        padding:
            9px
            10px;
    }


    .inline-result-title {
        font-size:
            14px !important;
    }


    .inline-result-message {
        font-size:
            10px !important;
    }


    .question-text-modal {
        padding:
            10px;
    }


    .question-text-modal-card {
        width:
            100%;

        max-height:
            86vh;

        padding:
            19px
            15px;
    }


    .question-text-modal-content {
        font-size:
            13px;
    }
}