/*
|--------------------------------------------------------------------------
| QUIZ FIGHT
|--------------------------------------------------------------------------
*/

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

    --correct: #48ad61;
    --correct-soft: #e7f8ec;

    --wrong: #df5757;
    --wrong-soft: #fdeaea;

    --question-text: #382e3c;
    --answer-text: #782095;
}


/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/

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

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

    margin: 0;
}

body {
    overflow: hidden;

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

    background: #202020;
}

button,
input {
    font: inherit;
}


/*
|--------------------------------------------------------------------------
| Cenário
|--------------------------------------------------------------------------
*/

#game-container {
    position: relative;

    width: 100%;
    height: 100dvh;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.08),
            rgba(0, 0, 0, 0.08)
        ),
        url("/jogos/assets/images/quiz-fight/cenario.webp")
        center / cover
        no-repeat;
}

#game-content {
    position: relative;

    width: 100%;
    height: 100%;

    padding-top: 34px;
}


/*
|--------------------------------------------------------------------------
| Quiz
|--------------------------------------------------------------------------
*/

.quiz-area {
    position: relative;
    z-index: 30;

    width: min(
        850px,
        92vw
    );

    margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Pergunta
|--------------------------------------------------------------------------
*/

#question-container {
    position: relative;

    width: 100%;

    margin-top: 18px;

    padding:
        31px
        26px
        21px;

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

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

    border-radius: 15px;

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


/*
|--------------------------------------------------------------------------
| Etiqueta
|--------------------------------------------------------------------------
*/

.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,
            #c125fa,
            #9e18d1
        );

    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(--primary);

    font-size: 13px;

    font-weight: 900;
}


/*
|--------------------------------------------------------------------------
| Contador
|--------------------------------------------------------------------------
*/

.question-number {
    position: absolute;

    top: 9px;
    right: 14px;

    color: #a99dad;

    font-size: 10px;

    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Texto pergunta
|--------------------------------------------------------------------------
*/

.question-text {
    margin: 0;

    color:
        var(--question-text);

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

    line-height: 1.4;

    font-weight: 700;

    text-align: left;

    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| Texto longo da questão
|--------------------------------------------------------------------------
*/

.question-read-more-button {
    width: fit-content;
    min-height: 34px;

    display: block;

    margin:
        11px
        0
        0
        auto;

    padding:
        7px
        13px;

    border:
        1.5px solid
        var(--primary);

    border-radius: 9px;

    background:
        rgba(
            193,
            37,
            250,
            0.07
        );

    color:
        var(--primary-dark);

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

    cursor: pointer;

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

.question-read-more-button[hidden] {
    display: none !important;
}

@media (hover: hover) {
    .question-read-more-button:hover {
        background: var(--primary);
        color: #ffffff;

        transform:
            translateY(-1px);

        box-shadow:
            0 5px 12px
            rgba(
                193,
                37,
                250,
                0.20
            );
    }
}

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

.question-text-modal {
    position: fixed;
    inset: 0;
    z-index: 7500;

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

    padding: 22px;

    background:
        rgba(
            17,
            10,
            20,
            0.72
        );

    backdrop-filter:
        blur(6px);

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.20s ease;
}

.question-text-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.question-text-modal-card {
    width:
        min(
            760px,
            94vw
        );

    max-height:
        min(
            78vh,
            680px
        );

    display: flex;
    flex-direction: column;

    padding:
        27px
        30px
        24px;

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

    border-radius: 18px;
    background: #ffffff;

    box-shadow:
        0 24px 80px
        rgba(
            0,
            0,
            0,
            0.38
        );

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

    transition:
        transform 0.20s ease;
}

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

.question-text-modal-kicker {
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

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

    color: #352839;

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

    line-height: 1.15;
    text-align: center;
}

.question-text-modal-content {
    width: 100%;
    max-height: 52vh;

    margin: 0;

    padding:
        18px
        19px;

    overflow-y: auto;

    border:
        1px solid
        rgba(
            193,
            37,
            250,
            0.20
        );

    border-radius: 12px;
    background: #fbf7fd;

    color: var(--question-text);

    font-size:
        clamp(
            15px,
            2vw,
            18px
        );

    font-weight: 700;
    line-height: 1.55;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

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

    align-self: flex-end;

    margin-top: 17px;

    padding:
        0
        24px;

    border: 0;
    border-radius: 10px;

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

    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;

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


/*
|--------------------------------------------------------------------------
| 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(--primary);

    border-radius: 27px;

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

    cursor: pointer;

    text-align: left;

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

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


/*
|--------------------------------------------------------------------------
| Letra
|--------------------------------------------------------------------------
*/

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

    min-width: 36px;

    display: flex;

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

    border-radius: 50%;

    background:
        var(--primary-soft);

    color: #a01ccd;

    font-size: 13px;

    font-weight: 900;

    transition:
        all 0.18s ease;
}


/*
|--------------------------------------------------------------------------
| Texto resposta
|--------------------------------------------------------------------------
*/

.answer-text {
    flex: 1;

    color:
        var(--answer-text);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.25;

    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/

@media (hover: hover) {

    .answer-button:hover:not(:disabled) {
        background:
            var(--primary);

        transform:
            translateY(-2px);

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

    .answer-button:hover:not(:disabled)
    .answer-letter {
        background:
            #ffffff;

        color:
            var(--primary);

        transform:
            scale(1.05);
    }

    .answer-button:hover:not(:disabled)
    .answer-text {
        color:
            #ffffff;
    }
}


/*
|--------------------------------------------------------------------------
| Correta
|--------------------------------------------------------------------------
*/

.answer-button.correct {
    background:
        var(--correct-soft);

    border-color:
        var(--correct);

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

    animation:
        correctAnswer
        0.35s ease;
}

.answer-button.correct
.answer-letter {
    background:
        var(--correct);

    color:
        #ffffff;
}

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


/*
|--------------------------------------------------------------------------
| Incorreta
|--------------------------------------------------------------------------
*/

.answer-button.incorrect {
    background:
        var(--wrong-soft);

    border-color:
        var(--wrong);

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

    animation:
        wrongAnswer
        0.32s ease;
}

.answer-button.incorrect
.answer-letter {
    background:
        var(--wrong);

    color:
        #ffffff;
}

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

.answer-button:disabled {
    cursor: default;
}


/*
|--------------------------------------------------------------------------
| Vidas
|--------------------------------------------------------------------------
*/

.health-bar {
    position: absolute;

    top: 18px;

    z-index: 45;

    width:
        clamp(
            95px,
            13vw,
            170px
        );

    height: 14px;

    overflow: hidden;

    border:
        2px solid
        rgba(
            0,
            0,
            0,
            0.72
        );

    border-radius: 999px;

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

    box-shadow:
        0 2px 7px
        rgba(
            0,
            0,
            0,
            0.22
        );
}

.health-bar-player {
    left: 18px;
}

.health-bar-enemy {
    right: 78px;
}

.health-bar-fill {
    width: 100%;
    height: 100%;

    transition:
        width 0.45s ease;
}

#player-health-fill {
    background:
        linear-gradient(
            90deg,
            #a81ed9,
            #d34cff
        );
}

#enemy-health-fill {
    background:
        linear-gradient(
            90deg,
            #e03636,
            #ff6363
        );
}


/*
|--------------------------------------------------------------------------
| Lutadores
|--------------------------------------------------------------------------
*/

.fighter {
    position: absolute;

    bottom: 5vh;

    width:
        clamp(
            155px,
            23vw,
            300px
        );

    height:
        clamp(
            155px,
            23vw,
            300px
        );

    background-repeat:
        no-repeat;

    background-position:
        center bottom;

    background-size:
        contain;

    transform:
        translateX(-50%)
        scaleX(
            var(--fighter-direction, 1)
        );

    transform-origin:
        center bottom;

    transition:
        left 0.30s ease,
        bottom 0.30s ease;

    will-change:
        left,
        transform;
}

/*
|--------------------------------------------------------------------------
| Sombra dos personagens
|--------------------------------------------------------------------------
*/

.fighter::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -2px;

    width: 60%;
    height: 10%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(20, 10, 25, 0.30) 0%,
            rgba(20, 10, 25, 0.16) 45%,
            rgba(20, 10, 25, 0) 75%
        );

    filter:
        blur(3px);

    pointer-events: none;
}

.fighter-player {
    left: 30%;

    z-index: 20;

    background-image:
        url(
            "../images/quiz-fight/player-idle.webp"
        );

    --fighter-direction: 1;
}

.fighter-enemy {
    left: 66%;

    z-index: 15;

    background-image:
        url(
            "../images/quiz-fight/enemy-idle.webp"
        );

    --fighter-direction: 1;
}

.fighter:not(.is-attacking) {
    animation:
        fighterIdle
        1.8s
        ease-in-out
        infinite
        alternate;
}

.fighter.is-attacking {
    z-index: 50;

    animation: none;

    transform:
        translateX(-50%)
        scaleX(
            var(--fighter-direction, 1)
        );
}


/*
|--------------------------------------------------------------------------
| Impacto do soco
|--------------------------------------------------------------------------
|
| Reproduz o comportamento do arquivo PHP antigo: pulso radial, tremor da
| tela, recuo do atacante e impacto forte no personagem atingido. O pulso
| fica atrás dos dois lutadores para não cobrir os sprites.
|
*/

.screen-flash-overlay {
    position: fixed;

    inset: 0;

    z-index: 14;

    background:
        radial-gradient(
            circle,
            rgba(224, 154, 255, 0.80) 0%,
            rgba(193, 37, 250, 0.40) 40%,
            transparent 70%
        );

    opacity: 0;

    pointer-events: none;

    transform:
        scale(0);

    will-change:
        transform,
        opacity;
}

.screen-flash-overlay.active {
    animation:
        fullscreenPulseEffect
        0.5s
        ease-out
        both;
}

.fighter.is-hit {
    transition:
        left 0.1s ease-out;

    animation:
        impactShake
        0.5s
        ease-out
        both;
}

.fighter.is-recoiling {
    animation:
        recoilShake
        0.2s
        ease-in-out
        both;
}

#game-container.shake-active {
    animation:
        screenShake
        0.4s
        ease-in-out
        both;
}


/*
|--------------------------------------------------------------------------
| Abertura
|--------------------------------------------------------------------------
*/

.dialog-overlay {
    position: fixed;

    inset: 0;

    z-index: 6000;

    display: flex;

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

    padding: 20px;

    background:
        rgba(
            0,
            0,
            0,
            0.68
        );

    backdrop-filter:
        blur(5px);

    pointer-events: auto;

    transition:
        opacity 0.30s ease;
}

.dialog-overlay.hidden {
    opacity: 0;

    pointer-events: none;
}

.dialog-box {
    position: relative;

    z-index: 2;

    width:
        min(
            500px,
            92vw
        );

    padding:
        31px;

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

    border-radius: 18px;

    background: #ffffff;

    text-align: center;

    pointer-events: auto;

    box-shadow:
        0 20px 65px
        rgba(
            0,
            0,
            0,
            0.32
        );
}

.dialog-kicker {
    color:
        var(--primary);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.dialog-box h1 {
    margin:
        8px
        0
        9px;

    color: #352839;

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

.dialog-box p {
    margin:
        0
        0
        23px;

    color: #6f6273;

    font-size: 15px;
}

.dialog-box button {
    position: relative;

    z-index: 5;

    min-height: 44px;

    padding:
        0
        24px;

    border: 0;

    border-radius: 12px;

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

    color: #ffffff;

    font-weight: 800;

    cursor: pointer;

    pointer-events: auto;
}


/*
|--------------------------------------------------------------------------
| Resultado do round
|--------------------------------------------------------------------------
*/

.game-overlay {
    position: absolute;

    inset: 0;

    z-index: 300;

    display: none;

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

    background:
        rgba(
            0,
            0,
            0,
            0.62
        );

    backdrop-filter:
        blur(4px);
}

.game-overlay.visible {
    display: flex;
}

.game-overlay-card {
    min-width:
        min(
            340px,
            88vw
        );

    padding:
        24px
        30px;

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

    border-radius: 17px;

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

    text-align: center;

    box-shadow:
        0 15px 50px
        rgba(
            0,
            0,
            0,
            0.28
        );
}

.game-overlay-kicker {
    display: block;

    margin-bottom: 7px;

    color:
        var(--primary);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

#gameOverlayMessage {
    color: #3b303f;

    font-size:
        clamp(
            21px,
            4vw,
            31px
        );
}


/*
|--------------------------------------------------------------------------
| Aviso orientação
|--------------------------------------------------------------------------
*/

.orientation-warning {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: none;

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

    padding: 30px;

    background: #ffffff;

    text-align: center;
}

.orientation-warning-content {
    max-width: 360px;

    color: #493c4d;
}

.orientation-icon {
    color:
        var(--primary);

    font-size: 62px;

    font-weight: 900;

    animation:
        orientationSpin
        2s linear infinite;
}


/*
|--------------------------------------------------------------------------
| Animações
|--------------------------------------------------------------------------
*/

@keyframes correctAnswer {

    0% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.02);
    }

    100% {
        transform:
            scale(1);
    }
}

@keyframes wrongAnswer {

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

    25% {
        transform:
            translateX(-4px);
    }

    50% {
        transform:
            translateX(4px);
    }

    75% {
        transform:
            translateX(-2px);
    }
}

@keyframes fighterIdle {

    from {
        transform:
            translateX(-50%)
            scaleX(
                var(--fighter-direction)
            )
            translateY(0);
    }

    to {
        transform:
            translateX(-50%)
            scaleX(
                var(--fighter-direction)
            )
            translateY(-7px);
    }
}

@keyframes impactShake {

    0% {
        transform:
            translateX(-50%)
            translate3d(0, 0, 0)
            scaleX(
                var(--fighter-direction, 1)
            );
    }

    15% {
        transform:
            translateX(-50%)
            translate3d(-15px, 0, 0)
            scaleX(
                var(--fighter-direction, 1)
            )
            rotate(-4deg);
    }

    30% {
        transform:
            translateX(-50%)
            translate3d(12px, 0, 0)
            scaleX(
                var(--fighter-direction, 1)
            );
    }

    45% {
        transform:
            translateX(-50%)
            translate3d(-10px, 0, 0)
            scaleX(
                var(--fighter-direction, 1)
            )
            rotate(4deg);
    }

    60% {
        transform:
            translateX(-50%)
            translate3d(8px, 0, 0)
            scaleX(
                var(--fighter-direction, 1)
            );
    }

    75% {
        transform:
            translateX(-50%)
            translate3d(-6px, 0, 0)
            scaleX(
                var(--fighter-direction, 1)
            )
            rotate(-2deg);
    }

    100% {
        transform:
            translateX(-50%)
            translate3d(0, 0, 0)
            scaleX(
                var(--fighter-direction, 1)
            );
    }
}

@keyframes recoilShake {

    0%,
    100% {
        transform:
            translateX(-50%)
            scaleX(
                var(--fighter-direction, 1)
            );
    }

    50% {
        transform:
            translateX(
                calc(
                    -50%
                    +
                    (
                        var(--fighter-direction, 1)
                        *
                        -8px
                    )
                )
            )
            scaleX(
                var(--fighter-direction, 1)
            );
    }
}

@keyframes fullscreenPulseEffect {

    0% {
        opacity: 1;

        transform:
            scale(0);
    }

    100% {
        opacity: 0;

        transform:
            scale(2.5);
    }
}

@keyframes screenShake {

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

    10%,
    30%,
    50%,
    70%,
    90% {
        transform:
            translate(-5px, 5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform:
            translate(5px, -5px);
    }
}

@keyframes orientationSpin {

    from {
        transform:
            rotate(0);
    }

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


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    #game-content {
        padding-top: 26px;
    }

    .quiz-area {
        width: 96vw;
    }

    #question-container {
        padding:
            28px
            18px
            16px;
    }

    .question-text {
        font-size: 16px;
    }

    .answer-button {
        min-height: 47px;
    }

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

        min-width: 32px;
    }

    .answer-text {
        font-size: 12px;
    }

    .fighter {
        width: 150px;
        height: 150px;

        bottom: 7vh;
    }

    .fighter-player {
        left: 30%;
    }

    .fighter-enemy {
        left: 66%;
    }
}


/*
|--------------------------------------------------------------------------
| Celular
|--------------------------------------------------------------------------
*/

@media (max-width: 560px) {

    #game-content {
        padding:
            17px
            7px
            0;
    }

    .quiz-area {
        width: 100%;
    }

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

        padding:
            23px
            12px
            10px;

        border-width: 1.5px;

        border-radius: 11px;
    }

    .question-read-more-button {
        min-height: 29px;
        margin-top: 7px;
        padding: 5px 9px;
        border-radius: 7px;
        font-size: 8px;
    }

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

    .question-text-modal-card {
        width: 96vw;
        max-height: 86vh;
        padding: 19px 15px 15px;
        border-radius: 13px;
    }

    .question-text-modal-card h2 {
        margin-bottom: 11px;
        font-size: 19px;
    }

    .question-text-modal-content {
        max-height: 58vh;
        padding: 13px 12px;
        font-size: 13px;
        line-height: 1.42;
    }

    .question-text-modal-close {
        min-height: 36px;
        margin-top: 11px;
        padding: 0 17px;
        font-size: 11px;
    }

    .question-label {
        left: 10px;

        gap: 4px;

        padding:
            4px
            8px;

        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 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        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;
    }
}


/*
|--------------------------------------------------------------------------
| Mobile horizontal
|--------------------------------------------------------------------------
*/

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

    #game-content {
        padding-top: 13px;
    }

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

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

        padding:
            20px
            15px
            9px;

        border-radius: 10px;
    }

    .question-label {
        left: 12px;

        padding:
            4px
            8px;

        font-size: 8px;
    }

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

    .question-number {
        top: 5px;

        font-size: 8px;
    }

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

        line-height: 1.2;
    }

    #answer-container {
        margin-top: 5px;

        gap: 5px;
    }

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

        padding:
            3px
            6px
            3px
            3px;

        border-radius: 18px;
    }

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

        min-width: 25px;

        font-size: 8px;
    }

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

        line-height: 1.08;
    }

    .fighter {
        width:
            min(
                32vh,
                190px
            );

        height:
            min(
                32vh,
                190px
            );

        bottom: 3vh;
    }

    .health-bar {
        top: 8px;
    }
}


/*
|--------------------------------------------------------------------------
| Portrait
|--------------------------------------------------------------------------
*/

@media
(max-width: 1024px)
and
(orientation: portrait) {

    .orientation-warning {
        display: flex;
    }

    #game-container,
    #introOverlay,
    #gameSettingsModal {
        display: none !important;
    }
}