/* =========================================================
   JOGO-RESULTADO.CSS — TELA FINAL DA MISSÃO
========================================================= */

#tela-resultado-missao {
    width: 100%;
    max-width: 406px;

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

    text-align: center;
}

.resultado-missao-box {
    position: relative;

    width: min(390px, 96vw);
    min-height: 560px;

    padding: 22px 18px 24px;

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

    border-radius: 34px;

    background-color: #fff8ea;
    background-image: url("../assets/fundos/fundo_popup.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 5px solid #e4a12d;

    box-shadow:
        0 10px 0 rgba(184, 107, 47, 0.24),
        0 22px 38px rgba(92, 61, 26, 0.22),
        inset 0 0 0 4px rgba(255, 255, 255, 0.58);

    overflow: hidden;
}

.resultado-missao-box::before {
    content: "";
    position: absolute;
    inset: 12px;

    border-radius: 26px;
    border: 2px solid rgba(231, 195, 123, 0.48);

    pointer-events: none;
}

#resultado-final-banner,
.resultado-personagem-area,
#resultado-final-titulo,
#resultado-final-texto,
.resultado-divisor,
#resultado-final-subtexto,
#resultado-final-resumo,
.resultado-final-acoes {
    position: relative;
    z-index: 1;
}

.resultado-final-banner {
    display: block;

    width: min(270px, 78vw);
    height: auto;

    object-fit: contain;

    margin: -4px auto 0;
}

.resultado-personagem-area {
    width: 100%;

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

    margin: -4px auto 0;
}

.resultado-final-personagem {
    display: block;

    width: min(230px, 70vw);
    max-height: 210px;

    object-fit: contain;

    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16));
}

#resultado-final-titulo {
    margin: 0;

    font-size: 1.75rem;
    line-height: 1.08;
    font-weight: 900;

    color: #0d4e99;
    text-shadow:
        2px 2px 0 #ffffff,
        0 4px 8px rgba(0, 0, 0, 0.12);
}

#resultado-final-texto {
    max-width: 320px;
    margin: 0;

    font-size: 0.95rem;
    line-height: 1.32;
    font-weight: 900;

    color: #3f2412;
}

.resultado-divisor {
    width: min(270px, 82%);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin: 0 auto;
}

.resultado-divisor span {
    height: 3px;
    flex: 1;

    border-radius: 999px;
    background: rgba(228, 161, 45, 0.58);
}

.resultado-divisor strong {
    color: #f1aa23;
    font-size: 1.15rem;
}

#resultado-final-subtexto {
    max-width: 315px;
    margin: 0;

    font-size: 0.90rem;
    line-height: 1.3;
    font-weight: 800;

    color: #6d4217;
}

#resultado-final-resumo {
    margin: 0;

    font-size: 0.80rem;
    line-height: 1.25;
    font-weight: 800;

    color: #37527a;
}

#resultado-final-resumo strong {
    font-weight: 900;
    color: #0d4e99;
}

.resultado-final-acoes {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    margin-top: 8px;
}

#btn-resultado-final,
#btn-resultado-secundario {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 16px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 0.88rem;
    font-weight: 900;

    cursor: pointer;
}

#btn-resultado-final {
    min-width: 150px;

    border: 4px solid #0e66c4;
    background: linear-gradient(180deg, #2da2ff, #0f6ad4);

    box-shadow:
        0 7px 0 #0d4e99,
        0 10px 18px rgba(0, 0, 0, 0.16);
}

#btn-resultado-secundario {
    min-width: 130px;

    border: 4px solid #c47a16;
    background: linear-gradient(180deg, #ffbd4a, #e18313);

    box-shadow:
        0 7px 0 #a85d0f,
        0 10px 18px rgba(0, 0, 0, 0.16);
}

.icone-btn-resultado-final {
    width: 24px;
    height: 24px;

    object-fit: contain;
}

#btn-resultado-final:active,
#btn-resultado-secundario:active {
    transform: translateY(3px);
    box-shadow:
        0 4px 0 rgba(13, 78, 153, 0.7),
        0 7px 12px rgba(0, 0, 0, 0.14);
}

/* Estado sem selo */

.resultado-missao-box.resultado-sem-selo #btn-resultado-final {
    min-width: 190px;
}

.resultado-missao-box.resultado-sem-selo #btn-resultado-secundario {
    display: none;
}

/* Ajuste para telas muito estreitas */

@media (max-width: 380px) {
    .resultado-missao-box {
        min-height: 540px;
        padding: 20px 14px 22px;
    }

    .resultado-final-banner {
        width: min(240px, 76vw);
    }

    .resultado-final-personagem {
        width: min(210px, 68vw);
        max-height: 190px;
    }

    #resultado-final-titulo {
        font-size: 1.48rem;
    }

    #resultado-final-texto {
        font-size: 0.88rem;
    }

    #resultado-final-subtexto {
        font-size: 0.84rem;
    }

    .resultado-final-acoes {
        gap: 8px;
    }

    #btn-resultado-final,
    #btn-resultado-secundario {
        min-height: 50px;
        padding: 10px 12px;
        font-size: 0.78rem;
    }
}