/*
|--------------------------------------------------------------------------
| 4EDUCATION - PADRAO UNICO DE PERGUNTAS E ALTERNATIVAS
|--------------------------------------------------------------------------
|
| Este arquivo e a fonte de verdade visual para jogos que usam:
|
|   .quiz-area
|   #question-container
|   .question-label
|   .question-label-icon
|   .question-number
|   .question-text
|   #answer-container
|   .answer-button
|   .answer-letter
|   .answer-text
|
| Carregue este CSS DEPOIS do CSS especifico do jogo.
|
*/

:root {
    --game-question-primary: #c125fa;
    --game-question-primary-dark: #9e18d1;
    --game-question-primary-soft: #f3dcff;

    --game-question-text: #382e3c;
    --game-question-answer-text: #5b4c60;
    --game-question-muted: #8e8292;

    --game-question-surface: rgba(255, 255, 255, 0.98);

    --game-question-success: #48ad61;
    --game-question-success-soft: #e7f8ec;

    --game-question-danger: #df5757;
    --game-question-danger-soft: #fdeaea;
}


/* =========================================================
   AREA PADRAO
========================================================= */

.quiz-area.game-question-standard,
.game-question-standard.quiz-area,
.quiz-area {
    width:
        min(
            820px,
            92vw
        );

    max-width:
        820px;

    margin-left:
        auto;

    margin-right:
        auto;

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


/* =========================================================
   PERGUNTA
========================================================= */

.game-question-standard #question-container,
.quiz-area #question-container {
    position:
        relative;

    width:
        100%;

    min-height:
        0 !important;

    margin:
        12px
        0
        0;

    padding:
        29px
        22px
        17px;

    border:
        2px
        solid
        var(--game-question-primary);

    border-radius:
        15px;

    background:
        var(--game-question-surface);

    box-shadow:
        0
        5px
        15px
        rgba(
            0,
            0,
            0,
            0.12
        );

    text-align:
        left !important;

    overflow:
        visible;
}


.game-question-standard .question-label,
.quiz-area .question-label {
    position:
        absolute;

    top:
        0;

    left:
        20px;

    transform:
        translateY(-50%);

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        6px
        11px;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            var(--game-question-primary),
            var(--game-question-primary-dark)
        );

    color:
        #ffffff;

    box-shadow:
        0
        4px
        10px
        rgba(
            193,
            37,
            250,
            0.28
        );

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

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.65px;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


.game-question-standard .question-label-icon,
.quiz-area .question-label-icon {
    width:
        20px;

    height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0
        0
        20px;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        var(--game-question-primary);

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

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1;
}


.game-question-standard .question-number,
.quiz-area .question-number {
    position:
        absolute;

    top:
        9px;

    right:
        13px;

    color:
        var(--game-question-muted);

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

    font-size:
        10px;

    font-weight:
        400;

    line-height:
        1;
}


.game-question-standard .question-text,
.quiz-area .question-text {
    width:
        100%;

    margin:
        0;

    padding:
        0;

    color:
        var(--game-question-text);

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

    font-size:
        16px !important;

    font-weight:
        400 !important;

    line-height:
        1.42 !important;

    text-align:
        left !important;

    text-shadow:
        none !important;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   BOTAO PADRAO DE TEXTO COMPLETO
========================================================= */

.game-question-read-more,
.basketball-read-more,
.question-read-more-button,
#questionReadMoreButton {
    display:
        block !important;

    width:
        fit-content !important;

    min-width:
        0 !important;

    min-height:
        32px !important;

    height:
        auto !important;

    margin:
        10px
        0
        0
        auto !important;

    padding:
        7px
        12px !important;

    border:
        1.5px
        solid
        var(--game-question-primary) !important;

    border-radius:
        8px !important;

    background:
        #ffffff !important;

    color:
        var(--game-question-primary-dark) !important;

    box-shadow:
        none !important;

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

    font-size:
        11px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    text-align:
        center !important;

    text-transform:
        none !important;

    letter-spacing:
        0 !important;

    cursor:
        pointer;

    transform:
        none !important;
}


.game-question-read-more:hover,
.basketball-read-more:hover,
.question-read-more-button:hover,
#questionReadMoreButton:hover {
    background:
        #f8edfc !important;

    color:
        #8610b3 !important;

    transform:
        none !important;
}


/* =========================================================
   ALTERNATIVAS
========================================================= */

.game-question-standard #answer-container,
.quiz-area #answer-container {
    width:
        100%;

    margin-top:
        9px;

    display:
        grid;

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

    gap:
        8px;
}


.game-question-standard .answer-button,
.quiz-area .answer-button {
    appearance:
        none;

    width:
        100%;

    min-width:
        0;

    min-height:
        46px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        8px !important;

    margin:
        0 !important;

    padding:
        6px
        11px
        6px
        6px !important;

    border:
        2px
        solid
        var(--game-question-primary) !important;

    border-radius:
        10px !important;

    background:
        var(--game-question-surface) !important;

    color:
        var(--game-question-answer-text);

    box-shadow:
        0
        2px
        5px
        rgba(
            0,
            0,
            0,
            0.09
        );

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

    text-align:
        left !important;

    cursor:
        pointer;

    user-select:
        none;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


.game-question-standard .answer-letter,
.quiz-area .answer-letter {
    width:
        32px !important;

    height:
        32px !important;

    min-width:
        32px !important;

    min-height:
        32px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0
        0
        32px;

    border-radius:
        50% !important;

    background:
        var(--game-question-primary-soft) !important;

    color:
        var(--game-question-primary-dark) !important;

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

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;
}


.game-question-standard .answer-text,
.quiz-area .answer-text {
    flex:
        1;

    min-width:
        0;

    color:
        var(--game-question-answer-text);

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

    font-size:
        14px !important;

    font-weight:
        400 !important;

    line-height:
        1.30 !important;

    text-align:
        left !important;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   ESTADOS
========================================================= */

.game-question-standard .answer-button.selected,
.quiz-area .answer-button.selected {
    background:
        #f7ebfc !important;

    border-color:
        var(--game-question-primary-dark) !important;
}


.game-question-standard .answer-button.correct,
.quiz-area .answer-button.correct {
    background:
        var(--game-question-success-soft) !important;

    border-color:
        var(--game-question-success) !important;
}


.game-question-standard .answer-button.correct .answer-letter,
.quiz-area .answer-button.correct .answer-letter {
    background:
        var(--game-question-success) !important;

    color:
        #ffffff !important;
}


.game-question-standard .answer-button.correct .answer-text,
.quiz-area .answer-button.correct .answer-text {
    color:
        #26743c !important;
}


.game-question-standard .answer-button.incorrect,
.quiz-area .answer-button.incorrect {
    background:
        var(--game-question-danger-soft) !important;

    border-color:
        var(--game-question-danger) !important;
}


.game-question-standard .answer-button.incorrect .answer-letter,
.quiz-area .answer-button.incorrect .answer-letter {
    background:
        var(--game-question-danger) !important;

    color:
        #ffffff !important;
}


.game-question-standard .answer-button.incorrect .answer-text,
.quiz-area .answer-button.incorrect .answer-text {
    color:
        #963434 !important;
}


.game-question-standard .answer-button:disabled,
.quiz-area .answer-button:disabled {
    cursor:
        default;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

    .game-question-standard .answer-button:hover:not(:disabled):not(.correct):not(.incorrect),
    .quiz-area .answer-button:hover:not(:disabled):not(.correct):not(.incorrect) {
        background:
            var(--game-question-primary) !important;

        border-color:
            var(--game-question-primary) !important;

        color:
            #ffffff !important;

        transform:
            translateY(-1px);

        box-shadow:
            0
            6px
            14px
            rgba(
                193,
                37,
                250,
                0.24
            );
    }


    .game-question-standard .answer-button:hover:not(:disabled):not(.correct):not(.incorrect)
    .answer-text,
    .quiz-area .answer-button:hover:not(:disabled):not(.correct):not(.incorrect)
    .answer-text {
        color:
            #ffffff !important;
    }


    .game-question-standard .answer-button:hover:not(:disabled):not(.correct):not(.incorrect)
    .answer-letter,
    .quiz-area .answer-button:hover:not(:disabled):not(.correct):not(.incorrect)
    .answer-letter {
        background:
            #ffffff !important;

        color:
            var(--game-question-primary-dark) !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .quiz-area.game-question-standard,
    .game-question-standard.quiz-area,
    .quiz-area {
        width:
            96vw;
    }


    .game-question-standard #question-container,
    .quiz-area #question-container {
        padding:
            26px
            16px
            14px;

        border-radius:
            12px;
    }


    .game-question-standard .question-text,
    .quiz-area .question-text {
        font-size:
            15px !important;
    }


    .game-question-standard .answer-button,
    .quiz-area .answer-button {
        min-height:
            44px !important;
    }


    .game-question-standard .answer-text,
    .quiz-area .answer-text {
        font-size:
            13px !important;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 560px) {

    .quiz-area.game-question-standard,
    .game-question-standard.quiz-area,
    .quiz-area {
        width:
            100%;
    }


    .game-question-standard #question-container,
    .quiz-area #question-container {
        margin-top:
            10px;

        padding:
            24px
            12px
            12px;

        border-width:
            1.5px;

        border-radius:
            11px;
    }


    .game-question-standard .question-label,
    .quiz-area .question-label {
        left:
            10px;

        gap:
            4px;

        padding:
            4px
            8px;

        border-radius:
            6px;

        font-size:
            8px;
    }


    .game-question-standard .question-label-icon,
    .quiz-area .question-label-icon {
        width:
            16px;

        height:
            16px;

        flex-basis:
            16px;

        font-size:
            9px;
    }


    .game-question-standard .question-number,
    .quiz-area .question-number {
        top:
            6px;

        right:
            8px;

        font-size:
            8px;
    }


    .game-question-standard .question-text,
    .quiz-area .question-text {
        font-size:
            14px !important;

        line-height:
            1.35 !important;
    }


    .game-question-read-more,
    .basketball-read-more,
    .question-read-more-button,
    #questionReadMoreButton {
        min-height:
            29px !important;

        margin-top:
            7px !important;

        padding:
            6px
            9px !important;

        border-radius:
            7px !important;

        font-size:
            9px !important;
    }


    .game-question-standard #answer-container,
    .quiz-area #answer-container {
        grid-template-columns:
            1fr;

        gap:
            6px;

        margin-top:
            7px;
    }


    .game-question-standard .answer-button,
    .quiz-area .answer-button {
        min-height:
            42px !important;

        gap:
            6px !important;

        padding:
            5px
            8px
            5px
            5px !important;

        border-radius:
            9px !important;
    }


    .game-question-standard .answer-letter,
    .quiz-area .answer-letter {
        width:
            29px !important;

        height:
            29px !important;

        min-width:
            29px !important;

        min-height:
            29px !important;

        flex-basis:
            29px;

        font-size:
            10px !important;
    }


    .game-question-standard .answer-text,
    .quiz-area .answer-text {
        font-size:
            12px !important;
    }
}
/* =========================================================
   JANELA FLUTUANTE PADRAO - TEXTO COMPLETO
   Quiz Normal, Quiz Fight e demais jogos.
========================================================= */

.question-text-modal[hidden] {
    display:
        none !important;
}


.question-text-modal {
    position:
        fixed !important;

    inset:
        0 !important;

    z-index:
        20000 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        20px !important;

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

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

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


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

    visibility:
        visible !important;

    pointer-events:
        auto !important;
}


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

    max-height:
        78vh !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    overflow-y:
        auto !important;

    padding:
        24px !important;

    border:
        2px
        solid
        var(--game-question-primary) !important;

    border-radius:
        16px !important;

    background:
        #ffffff !important;

    color:
        var(--game-question-text) !important;

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

    transform:
        translateY(6px)
        scale(0.985) !important;

    transition:
        transform 0.18s ease !important;
}


.question-text-modal.visible
.question-text-modal-card {
    transform:
        translateY(0)
        scale(1) !important;
}


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

    align-items:
        center !important;

    align-self:
        flex-start !important;

    min-height:
        26px !important;

    padding:
        0
        10px !important;

    margin:
        0
        0
        10px !important;

    border-radius:
        999px !important;

    background:
        var(--game-question-primary) !important;

    color:
        #ffffff !important;

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

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.6px !important;

    text-transform:
        uppercase !important;

    text-align:
        left !important;
}


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

    color:
        var(--game-question-text) !important;

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

    font-size:
        19px !important;

    font-weight:
        700 !important;

    line-height:
        1.25 !important;

    text-align:
        left !important;
}


.question-text-modal-content {
    width:
        100% !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        #433a46 !important;

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

    font-size:
        15px !important;

    font-weight:
        400 !important;

    line-height:
        1.55 !important;

    text-align:
        left !important;

    white-space:
        pre-wrap !important;

    overflow-wrap:
        anywhere !important;
}


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

    align-self:
        flex-end !important;

    margin:
        16px
        0
        0 !important;

    padding:
        0
        16px !important;

    border:
        0 !important;

    border-radius:
        9px !important;

    background:
        var(--game-question-primary) !important;

    color:
        #ffffff !important;

    box-shadow:
        none !important;

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

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    cursor:
        pointer;
}


.question-text-modal-close:hover {
    background:
        var(--game-question-primary-dark) !important;

    transform:
        none !important;
}


@media (max-width: 560px) {

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


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

        max-height:
            86vh !important;

        padding:
            19px
            15px !important;

        border-radius:
            13px !important;
    }


    .question-text-modal-card h2 {
        margin-bottom:
            10px !important;

        font-size:
            17px !important;
    }


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

        line-height:
            1.45 !important;
    }


    .question-text-modal-close {
        min-height:
            34px !important;

        margin-top:
            13px !important;

        padding:
            0
            14px !important;

        font-size:
            11px !important;
    }
}

/* =========================================================
   FEEDBACK PADRAO - MESMO COMPONENTE DO QUIZ NORMAL
========================================================= */

.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(--game-question-success-soft);
}

.inline-result.incorrect .inline-result-card {
    border-color: rgba(223, 87, 87, 0.38);
    background: var(--game-question-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(--game-question-success);
}

.inline-result.incorrect .inline-result-icon {
    background: var(--game-question-danger);
}

.inline-result-content {
    flex: 1;
    min-width: 0;
}

.inline-result-label {
    margin-bottom: 2px;
    color: #706574;
    font-family: Arial, Helvetica, sans-serif;
    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-family: Arial, Helvetica, sans-serif;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1.2;
}

.inline-result-message {
    margin-top: 2px;
    color: #655a68;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px !important;
    font-weight: 400;
    line-height: 1.25;
}

@media (max-width: 560px) {
    .inline-result-card {
        min-height: 54px;
        padding: 9px 10px;
    }

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

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