/* ==========================================================================
   css/conclusao.css
   Tela de conclusão: resultado → missão → carta → selo
   ========================================================================== */

.tela-conclusao {
    width: 100%;
    min-height: 100dvh;

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

    padding: 20px 14px;

    background-image:
        linear-gradient(rgba(255, 246, 222, 0.18),
            rgba(245, 218, 166, 0.22)),
        url("../assets/fundos/fundo-inicio.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

.conclusao-card {
    width: 100%;
    max-width: 520px;

    padding: 28px 22px 24px;

    border-radius: 22px;
    background: #fff9ed;
    border: 2px solid #e8cc8a;

    box-shadow: 0 20px 40px rgba(35, 22, 8, 0.28);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    text-align: center;
}

/* ============================================================
   LABEL DE VIRTUDE / FASE
   ============================================================ */

.conclusao-virtude-label,
.conclusao-fase-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #b07d20;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ============================================================
   RESULTADO (score)
   ============================================================ */

.conclusao-score {
    font-size: 2.6rem;
    font-weight: 900;
    color: #3d2409;
    line-height: 1;
}

.conclusao-score-detalhe {
    font-size: 0.82rem;
    font-weight: 600;
    color: #9a7040;
}

.conclusao-mensagem {
    font-size: 0.96rem;
    font-weight: 600;
    color: #4d341c;
    line-height: 1.55;
}

/* ============================================================
   MISSÃO
   ============================================================ */

.conclusao-missao {
    font-size: 0.96rem;
    color: #4d341c;
    line-height: 1.6;
    background: rgba(180, 140, 80, 0.08);
    border-left: 3px solid #d4a017;
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
    text-align: left;
    width: 100%;
}

/* ============================================================
   CARTA
   ============================================================ */

.conclusao-carta-titulo {
    font-size: 1.05rem;
    font-weight: 800;
    color: #3d2409;
    line-height: 1.3;
}

.conclusao-carta-texto {
    font-size: 0.94rem;
    color: #4d341c;
    line-height: 1.65;
    font-style: italic;
}

/* ============================================================
   SELO
   ============================================================ */

.conclusao-selo-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: 16px;
    filter: drop-shadow(0 8px 18px rgba(35, 22, 8, 0.22));
    animation: conclusao-selo-entrada 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes conclusao-selo-entrada {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.conclusao-selo-nome {
    font-size: 1.1rem;
    font-weight: 900;
    color: #3d2409;
}

/* ============================================================
   BOTÃO DE AÇÃO
   ============================================================ */

.btn-conclusao {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    margin-top: 4px;

    border: none;
    border-top: 2px solid rgba(255, 248, 200, 0.6);
    border-radius: 999px;

    background: linear-gradient(180deg, #ffd46a 0%, #f0a01e 100%);
    color: #3d2409;

    font-size: 1rem;
    font-weight: 900;
    font-family: inherit;

    cursor: pointer;

    box-shadow:
        0 6px 0 #a8650e,
        0 10px 18px rgba(79, 48, 10, 0.22);

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        filter 0.12s ease;
}

.btn-conclusao:hover  { filter: brightness(1.05); }

.btn-conclusao:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #a8650e, 0 5px 8px rgba(79, 48, 10, 0.14);
}

.btn-conclusao:focus-visible {
    outline: 3px solid #6ab7ff;
    outline-offset: 4px;
}

/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 600px) {
    .conclusao-card {
        padding: 32px 30px 28px;
    }

    .conclusao-score {
        font-size: 3rem;
    }
}