/* =========================================================
   CERTIFICADO DE CONCLUSÃO
   Modelo atual:
   - 20 fundos prontos
   - HTML exibe apenas o nome
   - Data fica em branco na arte-base
   ========================================================= */

/* ------------------------------
   Tela do certificado
------------------------------ */

#tela-certificado.hidden {
    display: none !important;
}

#tela-certificado:not(.hidden) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 90px);
    padding: 18px 12px 28px;
    box-sizing: border-box;
}

.certificado-area {
    width: 100%;
    max-width: 1180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.certificado-folha {
    position: relative;
    width: min(96vw, 1123px);
    aspect-ratio: 1123 / 794;
    background-image: url("../assets/fundos/certificados/numeros_personagem_1.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    box-shadow: 0 18px 34px rgba(25, 45, 70, 0.22);
    overflow: hidden;
    box-sizing: border-box;
}

/* ------------------------------
   Ocultação dos elementos antigos
   A data também fica oculta para deixar
   a linha da arte-base em branco.
------------------------------ */

.certificado-titulo-acessivel,
.certificado-topo,
.certificado-banner,
.certificado-label,
.certificado-modulo,
.certificado-meta,
.certificado-resumo,
.certificado-personagem,
.certificado-selo,
.certificado-rodape,
.certificado-lista-ilhas,
#certificado-faixa,
#certificado-tripulante,
#certificado-ilhas,
#certificado-desafios,
#certificado-resumo-selos,
#certificado-excelencia,
#certificado-data {
    display: none !important;
}

/* Mantém o bloco central sem interferir no posicionamento */
.certificado-conteudo {
    position: static;
}

/* ------------------------------
   Nome dinâmico
------------------------------ */

.certificado-nome {
    position: absolute !important;
    top: 32.3% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 58% !important;
    margin: 0 !important;

    text-align: center !important;
    font-size: clamp(1.45rem, 3.6vw, 3.2rem) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: #0f4a8a !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    z-index: 20 !important;
}

/* ------------------------------
   Botões
------------------------------ */

.certificado-acoes {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-certificado {
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(31, 53, 82, 0.14);
}

.btn-certificado.imprimir {
    background: #1f6f8b;
    color: #fff;
}

.btn-certificado.voltar {
    background: #f0e2c2;
    color: #1f3552;
}

/* =========================================================
   Responsivo
   ========================================================= */

@media (max-width: 700px) {
    #tela-certificado:not(.hidden) {
        padding: 12px 8px 22px;
    }

    .certificado-folha {
        width: min(96vw, 430px);
        aspect-ratio: 1123 / 794;
        border-radius: 18px;
    }

    .certificado-nome {
        top: 32.1% !important;
        width: 58% !important;
        font-size: clamp(0.9rem, 4.6vw, 1.45rem) !important;
    }

    .certificado-acoes {
        width: 100%;
    }
}

/* =========================================================
   Impressão A4 horizontal
   O fundo vem do JS conforme módulo + personagem.
   Não fixar background-image aqui.
   ========================================================= */

@page {
    size: A4 landscape;
    margin: 0;
}

@media print {

    html,
    body {
        width: 297mm !important;
        height: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body * {
        visibility: hidden !important;
    }

    #tela-certificado,
    #tela-certificado * {
        visibility: visible !important;
    }

    #tela-certificado {
        position: fixed !important;
        inset: 0 !important;
        width: 297mm !important;
        height: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    .certificado-area {
        position: relative !important;
        width: 297mm !important;
        height: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
    }

    .certificado-folha {
        position: relative !important;
        width: 297mm !important;
        height: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        aspect-ratio: auto !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        display: block !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .certificado-titulo-acessivel,
    .certificado-topo,
    .certificado-banner,
    .certificado-label,
    .certificado-modulo,
    .certificado-meta,
    .certificado-resumo,
    .certificado-personagem,
    .certificado-selo,
    .certificado-rodape,
    .certificado-lista-ilhas,
    #certificado-faixa,
    #certificado-tripulante,
    #certificado-ilhas,
    #certificado-desafios,
    #certificado-resumo-selos,
    #certificado-excelencia,
    #certificado-data {
        display: none !important;
    }

    .certificado-nome {
        position: absolute !important;
        top: 72mm !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: 120mm !important;
        margin: 0 !important;

        text-align: center !important;
        font-size: 33pt !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        color: #0f4a8a !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        z-index: 20 !important;
    }

    .certificado-acoes,
    #game-header,
    #game-footer {
        display: none !important;
    }
}