/*
 * A página da novidade das Previsões (/novidades/previsoes, 01/10/2026). A base é a das páginas de
 * novidade (novidade-central.css, classes .nvc-*); aqui só o celular da demonstração (os jogos com a
 * probabilidade de cada lado e o bilhete) e os temas. Classes .nvp-*. O primeiro lado em verde e o
 * segundo em azul, como na página das Previsões; o amarelo é o destaque.
 */
.nvp-tela { gap: 8px; padding: 14px 10px 14px; min-height: 470px; align-content: start; }
.nvp-titulo { display: flex; align-items: center; gap: 7px; padding: 0 2px 4px; color: var(--verde); }
.nvp-titulo b { font-size: 15px; font-weight: 800; color: #fff; }
.nvp-titulo span { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: #232930; color: var(--t2); font-size: 10.5px; font-weight: 800; }
.nvp-dia { padding: 2px 4px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffc266; }
.nvp-jogo { display: grid; gap: 5px; padding: 9px 9px; border-radius: 12px; background: #1b1f24; border: 1px solid #2a3037; transition: border-color .3s ease, background .3s ease; }
.nvp-jogo.tem { border-color: rgba(0, 255, 136, .5); background: linear-gradient(90deg, #15241d, #1b1f24 75%); }
.nvp-lado { display: grid; grid-template-columns: 20px minmax(0, 1fr) 64px; gap: 8px; align-items: center; }
.nvp-lado i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #475569; font-size: 9px; font-weight: 900; font-style: normal; }
.nvp-lado i.b { background: #1e3a8a; }
.nvp-lado b { font-size: 13px; font-weight: 700; }
.nvp-pc { display: flex; align-items: center; justify-content: center; white-space: nowrap; height: 26px; border-radius: 8px; font-size: 12.5px; font-weight: 900; font-variant-numeric: tabular-nums; transition: transform .25s ease, background .25s ease; }
.nvp-pc.a { background: rgba(0, 255, 136, .1); border: 1px solid rgba(0, 255, 136, .42); color: var(--verde); }
.nvp-pc.b { background: rgba(77, 171, 247, .1); border: 1px solid rgba(77, 171, 247, .42); color: #6bb8fb; }
.nvp-pc.toque { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255, 212, 59, .7); }
.nvp-pc.ligada { background: var(--verde); color: #06120d; }
.nvp-pc.sobe { animation: nvp-sobe .6s ease-out; }
.nvp-bilhete { display: grid; gap: 7px; margin-top: 4px; padding: 11px 12px; border-radius: 14px; background: #15241d; border: 1px solid rgba(0, 255, 136, .4); animation: nvc-entrar .4s ease-out; }
.nvp-bil-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nvp-bil-cab b { font-size: 13.5px; }
.nvp-bil-cab span { font-size: 11px; font-weight: 700; color: #8fb3a1; white-space: nowrap; }
.nvp-bil-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--t2); }
.nvp-bil-linha b { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.nvp-bil-linha b.verde { color: var(--verde); }
.nvp-bil-botao { display: grid; place-items: center; height: 34px; border-radius: 10px; background: var(--verde); color: #06120d; font-size: 12.5px; font-weight: 900; transition: box-shadow .3s ease, background .3s ease; }
.nvp-bil-botao.toque { box-shadow: 0 0 0 3px rgba(255, 212, 59, .7); }
.nvp-bil-botao.vender { background: #ffd43b; }
.nvp-bil-botao.feito { background: #1d2f27; color: var(--verde); border: 1px solid rgba(0, 255, 136, .45); }

/* ------------------------------------------------------------------ o que dá para prever */
.nvp-onde { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nvp-tema { color: #fff !important; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.nvp-tema:hover { border-color: rgba(0, 255, 136, .45); transform: translateY(-2px); }
.nvp-tema:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; }
.nvp-tema-icone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 212, 59, .12); color: var(--amarelo); }
.nvp-tema-ver { font-size: 13.5px; font-weight: 800; color: var(--verde); }
@keyframes nvp-sobe { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

@media (max-width: 820px) {
    .nvp-onde { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .nvp-bilhete, .nvp-pc.sobe { animation: none; }
}
@media (max-width: 520px) {
    /* No celular os botões ficam um embaixo do outro, inteiros (o texto não quebra). */
    .nv-previsoes-nova .nvc-acoes { flex-direction: column; align-items: stretch; }
    .nv-previsoes-nova .nvc-botao { flex: none; justify-content: center; white-space: nowrap; }
}