/* ==========================================================================
   quiz-recompensas-popup.css
   Pop-ups de conclusão: Parabéns → Carta → Missão
   O Caminho das Virtudes
   ========================================================================== */

/* ==========================================================================
   OVERLAY
   ========================================================================== */

.rp-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    padding: 16px;

    background: rgba(35, 22, 8, 0.62);
    backdrop-filter: blur(4px);

    overflow-x: hidden;
    overflow-y: auto;
}

.rp-overlay[hidden] {
    display: none !important;
}

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

.rp-card {
    position: relative;

    width: min(92vw, 360px);
    max-height: 92dvh;

    padding: 18px 16px 20px;

    border-radius: 24px;
    border: 2px solid #e8cc8a;
    border-top: 5px solid #f5a623;

    background-color: #f9f0d8;
    background-image: url('../assets/fundos/fundo-popup.png');
    background-size: cover;
    background-position: center top;

    box-shadow:
        0 22px 46px rgba(35, 22, 8, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.45);

    text-align: center;

    overflow-x: hidden;
    overflow-y: auto;
}

.rp-card--parabens {
    width: min(92vw, 350px);
}

.rp-card--carta {
    width: min(94vw, 370px);
    max-height: 92dvh;
    padding: 14px 14px 16px;
    overflow-y: auto;
}

.rp-card--missao {
    width: min(92vw, 360px);
}

/* ==========================================================================
   BOTÃO FECHAR
   ========================================================================== */

.rp-fechar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;

    width: 40px;
    height: 40px;

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

    padding: 0;

    border: 1px solid rgba(180, 140, 80, 0.28);
    border-radius: 999px;

    background: rgba(255, 249, 237, 0.96);
    color: #7a6040;

    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;

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

.rp-fechar:hover {
    background: #fff3d8;
    color: #3d2409;
}

.rp-fechar:active {
    transform: translateY(1px);
}

/* ==========================================================================
   BANNERS
   ========================================================================== */

.rp-banner {
    display: block;

    width: auto;
    height: auto;

    object-fit: contain;

    margin-left: auto;
    margin-right: auto;

    filter: drop-shadow(0 5px 10px rgba(60, 40, 15, 0.18));
}

.rp-banner--parabens {
    width: min(78%, 250px);
    margin-top: 0;
    margin-bottom: 8px;
}

.rp-banner--carta {
    width: min(72%, 220px);
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px;
}

.rp-banner--missao {
    width: min(76%, 230px);
    margin-top: 0;
    margin-bottom: 10px;
}

/* ==========================================================================
   CORPO
   ========================================================================== */

.rp-corpo {
    width: 100%;

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

    gap: 9px;
}

.rp-titulo {
    margin: 0;

    color: #3d2409;

    font-size: 1.12rem;
    font-weight: 900;
    line-height: 1.25;
}

.rp-virtude-nome {
    margin: 0;

    color: #7d3bb4;

    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.rp-placar {
    margin: 2px 0 0;

    color: #4d341c;

    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.35;
}

.rp-mensagem {
    margin: 0;

    color: #4d341c;

    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.48;

    white-space: pre-line;
}

.rp-mensagem--carta {
    font-style: italic;
}

/* Imagem da carta dentro do popup */
.rp-carta-img {
    width: min(86%, 260px);
    max-height: 48dvh;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
    filter: drop-shadow(0 8px 16px rgba(35, 22, 8, 0.25));
}

.rp-carta-texto-area {
    width: 100%;
    margin: 4px 0 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 238, 190, 0.42);
    text-align: center;
}

.rp-carta-texto-area[hidden] {
    display: none !important;
}

.rp-carta-titulo {
    margin: 0 0 5px;
    color: #3d2409;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.25;
}

.rp-carta-texto {
    margin: 0;
    color: #4d341c;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.42;
    font-style: italic;
}

.rp-card--carta .rp-btn-audio {
    min-width: 150px;
    min-height: 38px;
}

.rp-card--carta .rp-btn-principal {
    margin-top: 4px;
}

/* ==========================================================================
   BOTÃO DE ÁUDIO
   ========================================================================== */

.rp-btn-audio {
    min-height: 38px;

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

    padding: 7px 16px;

    border: 1.5px solid #f0c979;
    border-radius: 999px;

    background: rgba(255, 249, 237, 0.96);
    color: #8a5b17;

    font-size: 0.82rem;
    font-weight: 800;
    font-family: inherit;

    cursor: pointer;

    box-shadow: 0 3px 8px rgba(60, 40, 15, 0.08);

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease;
}

.rp-btn-audio:hover {
    background: #fff8ec;
    border-color: #f5a623;
    color: #d97c14;
}

.rp-btn-audio:active {
    transform: translateY(1px);
}

/* ==========================================================================
   RECOMPENSAS — POP-UP PARABÉNS
   ========================================================================== */

.rp-recompensas {
    width: 100%;

    padding: 4px 0 2px;

    background: transparent;
    border: none;
    border-radius: 0;
}

.rp-recompensas-titulo {
    margin: 0 0 5px;

    color: #b85f00;

    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rp-carta-selo-img {
    display: block;

    width: min(92%, 230px);
    height: auto;

    margin: 0 auto;

    border-radius: 14px;

    filter: drop-shadow(0 6px 12px rgba(60, 40, 15, 0.18));
}

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

.rp-missao-bloco {
    width: 100%;

    margin: 2px 0;
    padding: 13px 14px;

    border-radius: 16px;
    border-left: 4px solid #f0a01e;

    background: rgba(255, 238, 190, 0.5);

    text-align: left;
}

.rp-missao-bloco .rp-mensagem {
    margin: 0;
}

/* ==========================================================================
   BOTÕES FINAIS
   ========================================================================== */

.rp-botoes-finais {
    width: 100%;

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

/* Contenção: nenhum botão-imagem pode ultrapassar a largura interna do card */
.rp-card .btn-ui {
    max-width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   BOTÃO PRINCIPAL
   ========================================================================== */

.rp-btn-principal {
    width: 100%;
    min-height: 48px;

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

    padding: 11px 18px;

    border: none;
    border-radius: 999px;

    background: linear-gradient(180deg, #ffbd3d 0%, #f29518 100%);
    color: #ffffff;

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

    cursor: pointer;

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

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

.rp-btn-principal:hover {
    opacity: 0.95;
}

.rp-btn-principal:active {
    transform: translateY(3px);
    box-shadow:
        0 2px 0 #b8660c,
        0 6px 10px rgba(79, 48, 10, 0.16);
}

/* ==========================================================================
   BOTÃO SECUNDÁRIO
   ========================================================================== */

.rp-btn-secundario {
    width: 100%;
    min-height: 44px;

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

    padding: 10px 18px;

    border: 2px solid #f5a623;
    border-radius: 999px;

    background: rgba(255, 249, 237, 0.96);
    color: #b8660c;

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

    cursor: pointer;

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

.rp-btn-secundario:hover {
    background: #fff3d8;
}

.rp-btn-secundario:active {
    transform: translateY(1px);
}

/* ==========================================================================
   COMPATIBILIDADE COM CLASSES ANTIGAS
   ========================================================================== */

.rp-sofia-area,
.rp-sofia,
.rp-recompensas-itens,
.rp-recompensa-item,
.rp-thumb,
.rp-mais,
.rp-imagem-popup {
    max-width: 100%;
}

/* ==========================================================================
   TABLET / DESKTOP — mantém card compacto
   ========================================================================== */

@media (min-width: 768px) {
    .rp-card {
        width: 360px;
        max-width: 360px;
    }

    .rp-card--parabens {
        width: 350px;
        max-width: 350px;
    }

    .rp-carta-img {
        width: 260px;
    }
}

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

@media (max-width: 420px) {
    .rp-card {
        width: calc(100vw - 24px);
        max-width: 360px;
    }
}

@media (max-width: 380px) {
    .rp-overlay {
        padding: 10px;
    }

    .rp-card {
        width: min(94vw, 340px);
        padding: 14px 14px 16px;
        border-radius: 22px;
    }

    .rp-fechar {
        top: 8px;
        right: 8px;

        width: 38px;
        height: 38px;

        font-size: 1.25rem;
    }

    .rp-banner--parabens {
        width: min(74%, 220px);
    }

    .rp-banner--carta,
    .rp-banner--missao {
        width: min(72%, 210px);
    }

    .rp-corpo {
        gap: 8px;
    }

    .rp-titulo {
        font-size: 1.02rem;
    }

    .rp-virtude-nome {
        font-size: 0.94rem;
    }

    .rp-placar {
        font-size: 0.84rem;
    }

    .rp-mensagem {
        font-size: 0.82rem;
        line-height: 1.42;
    }

    .rp-carta-selo-img {
        width: min(88%, 210px);
    }

    .rp-btn-principal {
        min-height: 46px;
        font-size: 0.88rem;
    }

    .rp-btn-secundario {
        min-height: 42px;
        font-size: 0.86rem;
    }
}

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

@media (orientation: landscape) and (max-height: 560px) {
    .rp-overlay {
        align-items: flex-start;
        padding: 10px;
    }

    .rp-card {
        width: min(88vw, 360px);
        max-width: 360px;
        max-height: calc(100dvh - 20px);

        padding: 12px 16px 16px;

        overflow-y: auto;
    }

    .rp-banner--parabens {
        width: min(58%, 210px);
        margin-bottom: 4px;
    }

    .rp-banner--carta {
        width: min(50%, 180px);
        margin-bottom: 4px;
    }

    .rp-banner--missao {
        width: min(56%, 200px);
        margin-bottom: 5px;
    }

    .rp-card--carta {
        width: min(88vw, 440px);
        max-height: calc(100dvh - 20px);
        padding: 10px 14px 14px;
    }

    .rp-card--carta .rp-carta-img {
        width: min(52%, 190px);
        max-height: 46dvh;
        margin-bottom: 6px;
    }

    .rp-carta-texto-area {
        padding: 8px 10px;
        margin-bottom: 6px;
    }

    .rp-carta-titulo {
        font-size: 0.86rem;
    }

    .rp-carta-texto {
        font-size: 0.76rem;
        line-height: 1.34;
    }

    .rp-card--carta .rp-btn-audio {
        min-height: 34px;
        font-size: 0.78rem;
    }

    .rp-card--carta .rp-btn-principal {
        min-height: 40px;
        font-size: 0.82rem;
    }

    .rp-corpo {
        gap: 7px;
    }

    .rp-titulo {
        font-size: 1rem;
    }

    .rp-virtude-nome {
        font-size: 0.9rem;
    }

    .rp-placar {
        font-size: 0.82rem;
    }

    .rp-mensagem {
        font-size: 0.8rem;
        line-height: 1.36;
    }

    .rp-carta-selo-img {
        width: min(72%, 190px);
    }

    .rp-missao-bloco {
        padding: 10px 12px;
    }

    .rp-btn-audio {
        min-height: 34px;
        padding: 5px 14px;
        font-size: 0.78rem;
    }

    .rp-btn-principal,
    .rp-btn-secundario {
        min-height: 40px;
        font-size: 0.82rem;
    }
}