/*
 * Notas de atualização com a cara do jogo: lista de cartões num pergaminho (jogo-janela) e a nota inteira
 * com o texto no mesmo estilo da política de privacidade. Cores por tipo de item.
 */

.na-pagina { --na-novidade: #2f8f1e; --na-correcao: #c0392b; --na-balanceamento: #1f78b4; --na-evento: #8a4f00; }
.na-tipo--novidade { --na-cor: var(--na-novidade); }
.na-tipo--correcao { --na-cor: var(--na-correcao); }
.na-tipo--balanceamento { --na-cor: var(--na-balanceamento); }
.na-tipo--evento { --na-cor: var(--na-evento); }

.na-secao { padding-top: 100px; }

.na-pagina .na-janela {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 34px 22px;
}

.na-pagina .jogo-abertura h1 { overflow-wrap: anywhere; }
.na-meta { margin: 4px 0 0; text-transform: none; letter-spacing: .02em; }

/* faixa da prévia do admin */
.na-previa {
    position: sticky;
    top: var(--jogo-topo-altura);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    padding: 10px 16px;
    background: #d8381c;
    border-bottom: 4px solid #7a1606;
    color: #fff;
    font: 800 15px/1.3 var(--jogo-fonte);
    text-align: center;
}
.na-previa strong { font-weight: 900; }
.na-previa a { color: #fff3b8; font-weight: 900; text-decoration: underline; }

/* ---------------------------------------------------------------- lista */
.na-pagina a.na-cartao {
    display: block;
    margin: 0 0 18px;
    color: var(--jogo-texto);
    text-decoration: none;
    transition: transform .15s, filter .15s;
}
.na-pagina a.na-cartao:hover,
.na-pagina a.na-cartao:focus-visible { transform: translateY(-2px); filter: brightness(1.04); }
.na-cartao--destaque { filter: drop-shadow(0 0 8px rgba(255, 200, 60, .7)); }

.na-cartao__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.na-cartao__data { margin-left: auto; font: 800 14px/1 var(--jogo-fonte); color: var(--jogo-texto-suave); }
.na-cartao__titulo { margin: 0 0 6px; font: 400 clamp(20px, 2.6vw, 26px)/1.2 var(--jogo-fonte-titulo); color: #8f3205; overflow-wrap: anywhere; }
.na-cartao__resumo { margin: 0 0 10px; font: 700 16px/1.55 var(--jogo-fonte); overflow-wrap: anywhere; }

.na-selo {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--jogo-madeira);
    color: var(--jogo-ouro-claro);
    font: 400 14px/1 var(--jogo-fonte-titulo);
    letter-spacing: .03em;
}
.na-selo--recente { background: linear-gradient(#ffd84d, #e08a12); color: #4a2509; }

.na-contadores { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.na-contador {
    padding: 3px 10px;
    border-radius: 999px;
    border: 2px solid var(--na-cor);
    color: var(--na-cor);
    background: rgba(255, 255, 255, .45);
    font: 900 13px/1.2 var(--jogo-fonte);
}

.na-cartao__ler { display: inline-flex; align-items: center; gap: 6px; font: 900 15px/1 var(--jogo-fonte); color: #b03a06; }
.na-cartao__ler img { height: 16px; width: auto; }

.na-vazio { text-align: center; padding: 20px 0; font: 700 17px/1.6 var(--jogo-fonte); color: var(--jogo-texto); }
.na-vazio img { height: 56px; width: auto; }

.na-paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.na-paginacao__info { font: 900 15px/1 var(--jogo-fonte); color: var(--jogo-texto); }

/* ---------------------------------------------------------------- nota */
.na-resumo {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255, 244, 214, .55);
    border: 1px solid rgba(138, 79, 28, .3);
    font: 800 17px/1.6 var(--jogo-fonte);
    color: var(--jogo-texto);
    overflow-wrap: anywhere;
}

.na-texto { overflow-wrap: anywhere; }

.na-texto h2,
.na-bloco__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px dashed rgba(138, 79, 28, .4);
    font: 400 clamp(20px, 2.4vw, 24px)/1.2 var(--jogo-fonte-titulo);
    color: #8f3205;
}

.na-texto h2::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border: 2px solid var(--jogo-madeira);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe680, #e08a12 60%, #a2520a);
}

.na-texto h3 { margin: 22px 0 8px; font: 400 clamp(17px, 2vw, 20px)/1.25 var(--jogo-fonte-titulo); color: #7a2c03; }

.na-nota p:not(.jogo-janela__titulo):not(.na-resumo):not(.na-voltar),
.na-nota ul {
    margin: 0 0 14px;
    font: 700 16px/1.65 var(--jogo-fonte);
    color: var(--jogo-texto);
    overflow-wrap: anywhere;
}

.na-nota ul { display: grid; gap: 6px; padding: 0; list-style: none; }
.na-nota li { position: relative; padding-left: 30px; }
.na-nota li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 22px;
    height: 22px;
    background: url("../images/ddt/ui/marcado.png") center / contain no-repeat;
}
.na-nota strong { color: #7a2c03; font-weight: 900; }

/* blocos de itens por tipo */
.na-bloco { margin-top: 8px; }
.na-bloco__titulo { border-bottom-color: var(--na-cor); color: var(--na-cor); }
.na-bloco__titulo img { height: 30px; width: auto; flex-shrink: 0; }
.na-nota .na-itens { margin-bottom: 8px; }

.na-voltar { margin: 26px 0 8px; text-align: center; }

@media (max-width: 760px) {
    .na-secao { padding-top: 80px; }
    .na-pagina .na-janela { padding: 22px 12px 12px; }
    .na-nota p:not(.jogo-janela__titulo):not(.na-resumo):not(.na-voltar),
    .na-nota ul { font-size: 15px; }
    .na-resumo { font-size: 16px; }
    .na-meta { font-size: 12px; }
    .na-cartao__data { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .na-pagina a.na-cartao { transition: none; }
    .na-pagina a.na-cartao:hover,
    .na-pagina a.na-cartao:focus-visible { transform: none; }
}