* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: Georgia, "Times New Roman", serif;
    color: #f4ecd5;
    background:
        linear-gradient(90deg, rgba(6, 23, 21, .90), rgba(10, 31, 27, .64) 44%, rgba(4, 15, 14, .28)),
        var(--page-background) center / cover fixed no-repeat;
}

.pagina-alteracao {
    min-height: 100vh;
    padding: 56px 6vw;
    display: flex;
    align-items: flex-start;
}

.painel {
    width: min(780px, 100%);
    padding: 34px;
    border: 1px solid rgba(199, 169, 99, .52);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(18, 54, 47, .91), rgba(8, 29, 27, .86));
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
    backdrop-filter: blur(8px);
}

.rotulo {
    margin: 0 0 8px;
    color: #cdb579;
    letter-spacing: .18em;
    font-size: .78rem;
}

h1, h2, h3 { margin-top: 0; }

h1 { margin-bottom: 10px; font-size: clamp(2rem, 4vw, 3rem); }

.descricao { margin: 0; color: #d8d0ba; line-height: 1.65; }

.form-identificacao {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

label { display: grid; gap: 7px; }
label span { color: #d8c99d; font-size: .92rem; }

input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(209, 183, 119, .44);
    border-radius: 10px;
    background: rgba(7, 24, 22, .72);
    color: #fff8e8;
    outline: none;
}

input:focus { border-color: #d8bc75; box-shadow: 0 0 0 3px rgba(216, 188, 117, .12); }

button, .botao-secundario {
    border: 1px solid rgba(218, 187, 111, .72);
    border-radius: 10px;
    background: linear-gradient(180deg, #315f50, #21453c);
    color: #fff2c7;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    cursor: pointer;
}

.botao-principal { min-height: 46px; padding: 0 20px; }

.mensagem { margin-top: 22px; padding: 12px 14px; border-radius: 10px; }
.mensagem-erro { background: rgba(110, 34, 30, .55); border: 1px solid rgba(222, 133, 121, .55); }

.resultado-titulo { margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(209, 183, 119, .25); }
.resultado-titulo h2 { margin-bottom: 6px; }
.resultado-titulo p { margin: 0; color: #cfc6af; }

.lista-personagens { margin-top: 18px; display: grid; gap: 14px; }

.cartao-personagem {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(207, 181, 115, .28);
    border-radius: 14px;
    background: rgba(5, 24, 22, .52);
}

.imagem-personagem {
    width: 84px;
    height: 104px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(209, 183, 119, .45);
    background: rgba(0, 0, 0, .25);
}

.imagem-personagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sem-imagem { height: 100%; display: grid; place-items: center; text-align: center; padding: 8px; font-size: .7rem; color: #9e9682; }

.dados-personagem h3 { margin-bottom: 8px; font-size: 1.25rem; }
.dados-personagem p { margin: 4px 0; color: #ddd3ba; }
.contador { color: #d8bc75 !important; }

.botao-secundario { padding: 11px 16px; white-space: nowrap; }
.voltar { display: inline-block; margin-top: 28px; color: #dbc685; text-decoration: none; }

@media (max-width: 760px) {
    .pagina-alteracao { padding: 22px 14px; }
    .painel { padding: 22px 18px; }
    .form-identificacao { grid-template-columns: 1fr; }
    .botao-principal { width: 100%; }
    .cartao-personagem { grid-template-columns: 72px 1fr; }
    .imagem-personagem { width: 72px; height: 92px; }
    .botao-secundario { grid-column: 1 / -1; text-align: center; }
}