:root {
    --game-primary: #c125fa;
    --game-primary-dark: #9e18d1;
    --game-text: #382e3c;
    --game-muted: #a99dad;
    --game-surface: rgba(255, 255, 255, 0.98);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

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

    background: #292929;
}

.basketball-game {
    min-height: 100vh;

    padding:
        35px
        15px;
}

.quiz-area {
    width: min(
        850px,
        92vw
    );

    margin:
        0
        auto;
}


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

#question-container {
    position: relative;

    width: 100%;

    margin-top: 18px;

    padding:
        31px
        26px
        21px;

    background:
        var(--game-surface);

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

    border-radius: 15px;

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

.question-label {
    position: absolute;

    top: 0;
    left: 23px;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        7px
        15px;

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

    color: #ffffff;

    border-radius: 9px;

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

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

.question-label-icon {
    width: 21px;
    height: 21px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color:
        var(--game-primary);

    font-size: 13px;

    font-weight: 900;
}

.question-number {
    position: absolute;

    top: 9px;
    right: 14px;

    color:
        var(--game-muted);

    font-size: 10px;

    font-weight: 700;
}

.question-text {
    margin: 0;

    color:
        var(--game-text);

    font-size:
        clamp(
            16px,
            2vw,
            21px
        );

    line-height: 1.4;

    font-weight: 700;

    text-align: left;

    overflow-wrap: anywhere;
}


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

#answer-container {
    width: 100%;

    margin-top: 10px;

    display: grid;

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

    gap: 8px;
}

.answer-button {
    width: 100%;

    min-height: 52px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        7px
        13px
        7px
        7px;

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

    border-radius: 27px;

    background:
        var(--game-surface);

    text-align: left;

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

.answer-letter {
    width: 36px;
    height: 36px;

    min-width: 36px;

    display: flex;

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

    border-radius: 50%;

    background: #f3dcff;

    color: #a01ccd;

    font-size: 13px;

    font-weight: 900;
}

.answer-text {
    flex: 1;

    color: #782095;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.25;

    overflow-wrap: anywhere;
}


/* ========================================
   ÁREA TEMPORÁRIA DO JOGO
======================================== */

.game-area {
    width:
        min(
            1200px,
            96vw
        );

    margin:
        22px
        auto
        0;
}

.game-placeholder {
    min-height: 300px;

    display: flex;

    flex-direction: column;

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

    gap: 8px;

    padding: 30px;

    border:
        2px
        dashed
        rgba(255, 255, 255, 0.35);

    border-radius: 18px;

    color: #ffffff;

    text-align: center;
}

.game-placeholder strong {
    font-size: 22px;
}

.game-placeholder span {
    opacity: 0.75;

    font-size: 14px;
}


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

@media (max-width: 560px) {

    .basketball-game {
        padding:
            22px
            7px;
    }

    .quiz-area {
        width: 100%;
    }

    #question-container {
        margin-top: 10px;

        padding:
            23px
            12px
            10px;

        border-radius: 11px;

        border-width: 1.5px;
    }

    .question-label {
        left: 10px;

        padding:
            4px
            8px;

        gap: 4px;

        border-radius: 6px;

        font-size: 8px;

        letter-spacing: 0.5px;
    }

    .question-label-icon {
        width: 16px;
        height: 16px;

        font-size: 9px;
    }

    .question-number {
        top: 6px;
        right: 8px;

        font-size: 8px;
    }

    .question-text {
        font-size: 13px;

        line-height: 1.28;
    }

    #answer-container {
        gap: 5px;

        margin-top: 6px;
    }

    .answer-button {
        min-height: 38px;

        gap: 5px;

        padding:
            3px
            6px
            3px
            3px;

        border-width: 1.5px;

        border-radius: 19px;
    }

    .answer-letter {
        width: 27px;
        height: 27px;

        min-width: 27px;

        font-size: 9px;
    }

    .answer-text {
        font-size: 9.5px;

        line-height: 1.12;
    }

    .game-area {
        margin-top: 12px;
    }

    .game-placeholder {
        min-height: 220px;
    }
}


/* ========================================

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


.direction-button {
    width: 44px;
    height: 44px;

    border-radius: 50%;

    font-size: 19px;
}


.throw-button {
    min-height: 44px;

    padding:
        0
        18px;

    border-radius: 22px;

    font-size: 12px;
}


@media (max-width: 768px) {

    .basketball-stage {
        width: 100%;

        height:
            clamp(
                280px,
                46vh,
                440px
            );

        margin-top: 12px;

        border-radius: 12px;
    }


    .mobile-controls {
        display: flex;
    }

}


@media
(max-height: 600px)
and
(orientation: landscape) {

    .basketball-game {
        padding:
            14px
            7px;
    }


    .basketball-stage {
        height: 280px;

        margin-top: 8px;
    }

}
/* ========================================
   JOGO DE BASQUETE
======================================== */

.basketball-stage {
    position: relative;

    width: min(1200px, 96vw);

    height: clamp(
        320px,
        52vh,
        600px
    );

    margin:
        20px
        auto
        0;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #71359c 0%,
            #46205f 48%,
            #262626 48%,
            #222222 100%
        );

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

    box-shadow:
        0
        12px
        32px
        rgba(0, 0, 0, 0.22);
}


#gameCanvas {
    display: block;

    width: 100%;
    height: 100%;
}


/* ========================================
   FEEDBACK
======================================== */

.game-feedback {
    position: absolute;

    top: 14px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 20;

    min-width: 180px;

    padding:
        9px
        18px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    text-align: center;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.game-feedback.visible {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(2px);
}


.game-feedback.correct {
    background: #48ad61;
}


.game-feedback.incorrect {
    background: #df5757;
}


/* ========================================
   CONTROLES
======================================== */

.mobile-controls {
    display: none;

    position: absolute;

    left: 0;
    right: 0;
    bottom: 14px;

    z-index: 30;

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

    gap: 10px;
}


.control-button {
    border: 0;

    background: #c125fa;

    color: #ffffff;

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

    font-weight: 800;

    cursor: pointer;

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


.direction-button {
    width: 44px;
    height: 44px;

    border-radius: 50%;

    font-size: 19px;
}


.throw-button {
    min-height: 44px;

    padding:
        0
        18px;

    border-radius: 22px;

    font-size: 12px;
}


@media (max-width: 768px) {

    .basketball-stage {
        width: 100%;

        height:
            clamp(
                280px,
                46vh,
                440px
            );

        margin-top: 12px;

        border-radius: 12px;
    }


    .mobile-controls {
        display: flex;
    }

}


@media
(max-height: 600px)
and
(orientation: landscape) {

    .basketball-game {
        padding:
            14px
            7px;
    }


    .basketball-stage {
        height: 280px;

        margin-top: 8px;
    }

}

/* ========================================
   ALTERNATIVA SELECIONADA PELO BASQUETE
======================================== */

.answer-button.selected {
    background: #f5e4fc;

    border-color: #9e18d1;

    box-shadow:
        0
        0
        0
        3px
        rgba(193, 37, 250, 0.14);
}

.answer-button.selected
.answer-letter {
    background: #c125fa;

    color: #ffffff;
}


/* ========================================
   BASQUETE EM TELA CHEIA
   Pergunta permanece no topo
   Jogo ocupa todo o espaço restante
======================================== */

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


body {
    margin: 0;
}


.basketball-game {
    width: 100%;
    height: 100dvh;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    padding:
        24px
        0
        0;

    overflow: hidden;
}


/* ========================================
   PERGUNTA E ALTERNATIVAS
   Continuam centralizadas
======================================== */

.quiz-area {
    width: min(
        850px,
        calc(100% - 24px)
    );

    margin:
        0
        auto;

    flex:
        0
        0
        auto;

    position: relative;

    z-index: 10;
}


/* ========================================
   ÁREA DO JOGO
   Ocupa todo o restante da tela
======================================== */

.basketball-stage {
    position: relative;

    flex:
        1
        1
        auto;

    width: 100%;
    height: auto;
    min-height: 0;

    margin:
        14px
        0
        0;

    border-radius: 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #71359c 0%,
            #46205f 48%,
            #262626 48%,
            #222222 100%
        );

    border: 0;

    border-top:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    box-shadow: none;
}


#gameCanvas {
    display: block;

    width: 100%;
    height: 100%;
}


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

@media (max-width: 768px) {

    .basketball-game {
        padding:
            18px
            0
            0;
    }


    .quiz-area {
        width:
            calc(
                100% - 14px
            );
    }


    .basketball-stage {
        width: 100%;

        height: auto;

        margin-top: 10px;

        border-radius: 0;
    }

}


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

@media (max-width: 560px) {

    .basketball-game {
        padding:
            15px
            0
            0;
    }


    .quiz-area {
        width:
            calc(
                100% - 10px
            );
    }


    .basketball-stage {
        margin-top: 8px;
    }

}


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

@media
(max-height: 600px)
and
(orientation: landscape) {

    .basketball-game {
        height: 100dvh;

        padding:
            10px
            0
            0;
    }


    .quiz-area {
        width:
            min(
                820px,
                calc(
                    100% - 90px
                )
            );
    }


    .basketball-stage {
        flex: 1;

        height: auto;

        min-height: 0;

        margin-top: 6px;
    }

}

/* ========================================
   RESULTADO DAS RESPOSTAS
======================================== */

.answer-button.correct {
    background: #e7f8ec;
    border-color: #48ad61;

    box-shadow:
        0 3px 9px
        rgba(72, 173, 97, 0.20);
}

.answer-button.correct .answer-letter {
    background: #48ad61;
    color: #ffffff;
}

.answer-button.correct .answer-text {
    color: #26743c;
}


.answer-button.incorrect {
    background: #fdeaea;
    border-color: #df5757;

    box-shadow:
        0 3px 9px
        rgba(223, 87, 87, 0.18);
}

.answer-button.incorrect .answer-letter {
    background: #df5757;
    color: #ffffff;
}

.answer-button.incorrect .answer-text {
    color: #963434;
}


/* ========================================
   CONCLUSAO DO JOGO
======================================== */

.game-completion {
    position: absolute;
    inset: 0;

    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(20, 13, 24, 0.72);

    backdrop-filter:
        blur(5px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

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


.game-completion.visible {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


.game-completion-card {
    width:
        min(
            410px,
            calc(100% - 30px)
        );

    padding:
        34px
        28px;

    text-align: center;

    border:
        2px solid
        #c125fa;

    border-radius:
        22px;

    background:
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0
        22px
        70px
        rgba(0, 0, 0, 0.38);

    transform:
        translateY(18px)
        scale(0.96);

    transition:
        transform 0.28s ease;
}


.game-completion.visible
.game-completion-card {
    transform:
        translateY(0)
        scale(1);
}


.completion-icon {
    display: flex;

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

    width: 62px;
    height: 62px;

    margin:
        0
        auto
        14px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #c125fa,
            #8f16bd
        );

    color: #ffffff;

    font-size: 30px;
    font-weight: 900;

    box-shadow:
        0
        8px
        24px
        rgba(193, 37, 250, 0.30);
}


.completion-label {
    color: #c125fa;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.game-completion-card h2 {
    margin:
        7px
        0
        9px;

    color: #382e3c;

    font-size:
        clamp(
            25px,
            4vw,
            34px
        );
}


.game-completion-card p {
    margin: 0;

    color: #776b7c;

    font-size: 15px;

    line-height: 1.5;
}


@media (max-width: 560px) {

    .game-completion-card {
        padding:
            27px
            20px;
    }


    .completion-icon {
        width: 54px;
        height: 54px;

        font-size: 25px;
    }

}


/* ========================================
   AJUSTE VISUAL DO TOPO
   REMOVE A FAIXA PRETA
======================================== */

body {
    background:
        linear-gradient(
            180deg,
            #2a2130 0%,
            #2a2130 18%,
            #3d2553 45%,
            #4a2962 100%
        ) !important;
}


.game-page,
.game-layout,
.game-wrapper,
.main-game-layout {
    background: transparent !important;
}


.game-stage-section,
.stage-section,
.basketball-stage-section {
    margin-top: 10px !important;
}


#basketballStage,
.game-stage,
.basketball-stage {
    margin-top: 0 !important;

    border-top-left-radius: 24px;
    border-top-right-radius: 24px;

    overflow: hidden;
}


.question-card,
.question-panel,
.game-question-card {
    margin-bottom: 14px !important;
}


/* ========================================
   CENARIO EM TELA INTEIRA
======================================== */

html,
body {
    width: 100%;
    height: 100%;

    background-image:
        url('/jogos/assets/images/basquete/cenario-basquete.webp') !important;

    background-position:
        center center !important;

    background-size:
        cover !important;

    background-repeat:
        no-repeat !important;
}


body {
    margin: 0;

    background-color:
        transparent !important;
}


.basketball-game {
    background:
        transparent !important;
}


/*
 * O canvas fica transparente.
 * O cenário agora está atrás
 * de TODO o layout.
 */
.basketball-stage {
    background:
        transparent !important;

    border: 0 !important;

    box-shadow:
        none !important;
}

#gameCanvas {
    background:
        transparent !important;
}


/*
 * Pergunta continua legível
 * sobre o cenário.
 */
.quiz-area {
    position: relative;

    z-index: 10;
}


/* ========================================
   CONCLUSAO EM TELA INTEIRA
======================================== */

.game-completion {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    z-index: 99999 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    background:
        rgba(
            16,
            8,
            22,
            0.82
        ) !important;

    backdrop-filter:
        blur(7px);

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

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

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


.game-completion.visible {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* ========================================
   CARD MAIOR
======================================== */

.game-completion-card {
    width:
        min(
            590px,
            calc(100vw - 40px)
        ) !important;

    min-height: 330px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        48px
        50px !important;

    border:
        3px solid
        #c125fa !important;

    border-radius:
        28px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        ) !important;

    text-align: center;

    box-shadow:
        0
        30px
        90px
        rgba(
            0,
            0,
            0,
            0.48
        );

    transform:
        translateY(24px)
        scale(0.94);

    transition:
        transform 0.3s ease;
}


.game-completion.visible
.game-completion-card {
    transform:
        translateY(0)
        scale(1);
}


/* ========================================
   ICONE
======================================== */

.completion-icon {
    width: 82px !important;
    height: 82px !important;

    margin:
        0
        auto
        20px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 42px !important;
    font-weight: 900;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #c125fa,
            #9115c2
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            193,
            37,
            250,
            0.32
        );
}


/* ========================================
   TEXTOS
======================================== */

.completion-label {
    margin-bottom: 8px;

    color: #c125fa;

    font-size: 14px !important;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.game-completion-card h2 {
    margin:
        0
        0
        14px !important;

    color: #382e3c;

    font-size:
        clamp(
            32px,
            4vw,
            44px
        ) !important;

    line-height: 1.08;
}


.game-completion-card p {
    max-width: 440px;

    margin: 0 !important;

    color: #716675;

    font-size: 17px !important;

    line-height: 1.6;
}


/* ========================================
   ACERTO
======================================== */

.game-completion.success
.game-completion-card {
    border-color:
        #48ad61 !important;
}


.game-completion.success
.completion-icon {
    background:
        linear-gradient(
            135deg,
            #55c872,
            #31994c
        );
}


.game-completion.success
.completion-label {
    color: #31994c;
}


/* ========================================
   ERRO
   Mantemos incentivo sem vermelho forte
======================================== */

.game-completion.error
.game-completion-card {
    border-color:
        #c125fa !important;
}


.game-completion.error
.completion-icon {
    background:
        linear-gradient(
            135deg,
            #c125fa,
            #8111ad
        );
}


.game-completion.error
.completion-label {
    color: #a71fd8;
}


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

@media (max-width: 600px) {

    .game-completion {
        padding: 16px;
    }


    .game-completion-card {
        width:
            calc(
                100vw - 32px
            ) !important;

        min-height: 300px;

        padding:
            38px
            24px !important;

        border-radius:
            23px !important;
    }


    .completion-icon {
        width: 68px !important;
        height: 68px !important;

        font-size: 34px !important;
    }


    .game-completion-card h2 {
        font-size: 30px !important;
    }


    .game-completion-card p {
        font-size: 15px !important;
    }

}


/* ========================================
   RESULTADO FINAL MAIOR
======================================== */

.game-completion-card {
    width:
        min(
            680px,
            calc(100vw - 44px)
        ) !important;

    min-height:
        390px !important;

    padding:
        58px
        62px !important;
}


.completion-icon {
    width:
        92px !important;

    height:
        92px !important;

    font-size:
        46px !important;

    margin-bottom:
        23px !important;
}


.completion-label {
    font-size:
        15px !important;
}


.game-completion-card h2 {
    font-size:
        clamp(
            36px,
            4vw,
            48px
        ) !important;

    margin-bottom:
        16px !important;
}


.game-completion-card p {
    max-width:
        500px !important;

    font-size:
        18px !important;

    line-height:
        1.65 !important;
}


@media (max-width: 600px) {

    .game-completion-card {
        width:
            calc(
                100vw - 28px
            ) !important;

        min-height:
            340px !important;

        padding:
            42px
            26px !important;
    }


    .completion-icon {
        width:
            76px !important;

        height:
            76px !important;

        font-size:
            38px !important;
    }


    .game-completion-card h2 {
        font-size:
            32px !important;
    }


    .game-completion-card p {
        font-size:
            16px !important;
    }

}


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

.answer-button,
.answer-option,
.quiz-answer,
.quiz-option {
    border-radius: 14px !important;
}


/*
 * Mantém o círculo da letra
 * separado da caixa principal.
 */
.answer-button .answer-letter,
.answer-option .answer-letter,
.quiz-answer .answer-letter,
.quiz-option .answer-letter {
    border-radius: 999px !important;
}



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

.mobile-options-area {
    display: none;
}


.options-modal {
    display: none;
}


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

@media (max-width: 768px) {

    /*
     * No celular as alternativas normais
     * deixam de ocupar espaço no layout.
     */
    #answer-container {
        display: none !important;
    }


    .mobile-options-area {
        display: flex;

        width:
            calc(
                100% - 20px
            );

        margin:
            8px
            auto
            10px;

        justify-content: center;

        position: relative;

        z-index: 40;
    }


    .mobile-options-button {
        display: inline-flex;

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

        gap: 8px;

        min-height: 42px;

        padding:
            0
            20px;

        border:
            2px solid
            #c125fa;

        border-radius:
            10px;

        background:
            rgba(
                255,
                255,
                255,
                0.96
            );

        color:
            #9d1ecb;

        font-size: 13px;

        font-weight: 900;

        cursor: pointer;

        box-shadow:
            0
            5px
            16px
            rgba(
                0,
                0,
                0,
                0.18
            );
    }


    .mobile-options-icon {
        font-size: 15px;
    }


    /*
     * Janela flutuante.
     */
    .options-modal {
        position: fixed;

        inset: 0;

        z-index: 99990;

        display: flex;

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

        padding: 18px;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

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


    .options-modal.visible {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;
    }


    .options-modal-backdrop {
        position: absolute;

        inset: 0;

        background:
            rgba(
                16,
                8,
                22,
                0.74
            );

        backdrop-filter:
            blur(5px);

        -webkit-backdrop-filter:
            blur(5px);
    }


    .options-modal-card {
        position: relative;

        z-index: 2;

        width:
            min(
                460px,
                100%
            );

        max-height:
            calc(
                100dvh - 40px
            );

        overflow-y: auto;

        padding:
            22px;

        border:
            2px solid
            #c125fa;

        border-radius:
            20px;

        background:
            rgba(
                255,
                255,
                255,
                0.98
            );

        box-shadow:
            0
            25px
            70px
            rgba(
                0,
                0,
                0,
                0.42
            );

        transform:
            translateY(14px)
            scale(0.97);

        transition:
            transform 0.22s ease;
    }


    .options-modal.visible
    .options-modal-card {
        transform:
            translateY(0)
            scale(1);
    }


    .options-modal-header {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        gap: 14px;

        margin-bottom: 18px;
    }


    .options-modal-label {
        display: block;

        margin-bottom: 3px;

        color: #c125fa;

        font-size: 10px;
        font-weight: 900;

        letter-spacing: 0.8px;

        text-transform: uppercase;
    }


    .options-modal-header h2 {
        margin: 0;

        color: #382e3c;

        font-size: 22px;

        line-height: 1.15;
    }


    .options-modal-close {
        flex:
            0
            0
            auto;

        width: 38px;
        height: 38px;

        border: 0;

        border-radius: 50%;

        background: #f2e1f9;

        color: #9d1ecb;

        font-size: 26px;
        font-weight: 700;

        line-height: 1;

        cursor: pointer;
    }


    .options-modal-list {
        display: grid;

        grid-template-columns:
            1fr;

        gap: 9px;
    }


    .options-modal-option {
        display: flex;

        align-items: center;

        gap: 12px;

        min-height: 55px;

        padding:
            9px
            12px;

        border:
            1.5px solid
            #d98af5;

        border-radius:
            10px;

        background: #ffffff;
    }


    .options-modal-letter {
        flex:
            0
            0
            auto;

        display: flex;

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

        width: 36px;
        height: 36px;

        border-radius: 50%;

        background: #f1d8fb;

        color: #a51dd5;

        font-size: 15px;
        font-weight: 900;
    }


    .options-modal-text {
        color: #382e3c;

        font-size: 14px;
        font-weight: 700;

        line-height: 1.3;
    }


    .options-modal-help {
        margin:
            16px
            0
            0;

        padding-top: 13px;

        border-top:
            1px solid
            #eadff0;

        color: #817486;

        font-size: 12px;

        text-align: center;

        line-height: 1.4;
    }

}


/* ========================================
   CONTROLES MOBILE NO PADRAO DAS OPCOES
======================================== */

@media (max-width: 768px) {

    .control-button {
        background:
            rgba(
                255,
                255,
                255,
                0.97
            ) !important;

        color:
            #9e18d1 !important;

        border:
            2px solid
            #c125fa !important;

        box-shadow:
            0
            5px
            14px
            rgba(
                0,
                0,
                0,
                0.18
            ) !important;

        font-weight:
            900 !important;

        transition:
            transform 0.12s ease,
            background 0.12s ease;
    }


    .control-button:active {
        transform:
            scale(0.94);

        background:
            #f5e4fc !important;
    }


    /*
     * SETAS
     */
    .direction-button {
        width:
            48px !important;

        height:
            48px !important;

        border-radius:
            10px !important;

        font-family:
            "Arial Black",
            Arial,
            sans-serif;

        font-size:
            27px !important;

        font-weight:
            900 !important;

        line-height:
            1;
    }


    /*
     * ARREMESSAR
     */
    .throw-button {
        min-height:
            48px !important;

        padding:
            0
            23px !important;

        border-radius:
            10px !important;

        color:
            #9e18d1 !important;

        font-size:
            13px !important;

        font-weight:
            900 !important;

        text-transform:
            uppercase;

        letter-spacing:
            0.3px;
    }

}


/* ========================================
   TEXTOS MAIORES NAS ALTERNATIVAS
======================================== */

.answer-button .answer-text {
    font-size: 16px !important;
    font-weight: 700 !important;

    line-height: 1.25;
}


.answer-button .answer-letter {
    font-size: 15px !important;
    font-weight: 900 !important;
}


/* Um pouco menor em telas pequenas */
@media (max-width: 768px) {

    .answer-button .answer-text {
        font-size: 15px !important;
    }

    .answer-button .answer-letter {
        font-size: 14px !important;
    }

}


/* ========================================
   TEXTOS DAS ALTERNATIVAS AINDA MAIORES
======================================== */

.answer-button .answer-text {
    font-size: 19px !important;
    font-weight: 700 !important;
}

.answer-button .answer-letter {
    font-size: 17px !important;
    font-weight: 900 !important;
}


/* Mobile */
@media (max-width: 768px) {

    .answer-button .answer-text {
        font-size: 17px !important;
    }

    .answer-button .answer-letter {
        font-size: 16px !important;
    }

}

/* === 4EDUCATION FIX: BASQUETE COMPACTO V4 - INICIO === */
@media (min-width: 769px) {
    .basketball-game {
        padding-top: 16px !important;
    }

    .basketball-game .quiz-area {
        width: min(540px, 88vw) !important;
    }

    .basketball-game #question-container {
        margin-top: 9px !important;

        min-height: 0 !important;

        padding:
            21px
            15px
            11px !important;

        border-width: 1.5px !important;
        border-radius: 11px !important;
    }

    .basketball-game .question-label {
        left: 14px !important;

        gap: 5px !important;

        padding:
            5px
            9px !important;

        border-radius: 7px !important;

        font-size: 9px !important;
        letter-spacing: 0.55px !important;
    }

    .basketball-game .question-label-icon {
        width: 17px !important;
        height: 17px !important;

        font-size: 10px !important;
    }

    .basketball-game .question-number {
        top: 6px !important;
        right: 8px !important;

        font-size: 8px !important;
        font-weight: 400 !important;
    }

    .basketball-game .question-text {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.28 !important;
    }

    .basketball-game #answer-container {
        margin-top: 5px !important;
        gap: 5px !important;
    }

    .basketball-game .answer-button {
        min-height: 34px !important;

        gap: 5px !important;

        padding:
            3px
            7px
            3px
            3px !important;

        border-width: 1.5px !important;
        border-radius: 17px !important;
    }

    .basketball-game .answer-letter {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;

        font-size: 10px !important;
    }

    .basketball-game .answer-text {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.15 !important;
    }

    .basketball-game .basketball-read-more {
        margin-top: 7px !important;

        padding:
            6px
            10px !important;

        border-radius: 7px !important;

        font-size: 10px !important;
    }

    .basketball-game .basketball-stage {
        margin-top: 6px !important;
    }
}
/* === 4EDUCATION FIX: BASQUETE COMPACTO V4 - FIM === */

/* === 4EDUCATION LOUSA V10.1 - INICIO === */

#gameCanvas {
    touch-action:
        none;

    -ms-touch-action:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;

    cursor:
        pointer;
}

/* === 4EDUCATION LOUSA V10.1 - FIM === */