/*
 * Previsões (pedido do dono em 28/09/2026), Fase 0. Segue a prancha aprovada em 29/09 (quadro,
 * página "Previsões: proposta nova"): vitrine com destaque e seções, cartão com meio círculo e
 * mini-gráfico, acontecimento com vários resultados e a previsão Sim ou Não.
 * Usa as cores da moldura nova (estrutura.css).
 */
.np-pagina {
    --np-fundo: var(--nv-fundo, #0e1013); --np-cartao: var(--nv-cartao, #1b1f24); --np-fundo-2: var(--nv-fundo-2, #15181c);
    --np-linha: var(--nv-linha, #2a3037); --np-linha-2: var(--nv-linha-2, #3a424b);
    --np-texto-1: #d5d9de; --np-texto-2: var(--nv-texto-2, #b9bec5); --np-texto-3: #8b929b; --np-texto-4: var(--nv-texto-3, #737a83);
    --np-verde: var(--nv-verde, #00ff88); --np-nao: #ff8a6a; --np-ambar: #ffc266; --np-azul: #4dabf7; --np-roxo: #c084fc;
    --np-amarelo: #ffd43b; --np-vermelho-lusa: #ff5a5a; --np-cat: #8b929b;
    --np-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    display: flex; flex-direction: column; gap: 18px; min-width: 0; color: #fff; padding-bottom: 28px;
}
.np-pagina a { color: inherit; text-decoration: none; }
.np-pagina button { font-family: inherit; }
.np-pagina :focus-visible { outline: 2px solid var(--np-verde); outline-offset: 2px; }
.np-pagina [hidden] { display: none !important; }
.np-el { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O texto que não pode ser cortado (a queixa do dono em 30/09): quebra em quantas linhas precisar, sem reticências. */
.np-quebra { display: block; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.np-mu { color: var(--np-texto-4); }
.np-so-celular { display: none !important; }

/* ------------------------------------------------------------------ identidade "Azulejo Lusa" (a mesma do destaque do futebol, .sp-alta) */
.np-com-azulejo { position: relative; isolation: isolate; }
.np-azulejo { position: absolute; inset: 0; z-index: -1; opacity: .1; background-size: 64px 64px; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2300ff88' stroke-width='1.6'%3E%3Cpath d='M0 26A26 26 0 0 0 26 0M74 0A26 26 0 0 0 100 26M100 74A26 26 0 0 0 74 100M26 100A26 26 0 0 0 0 74'/%3E%3Cpath d='M0 14A14 14 0 0 0 14 0M86 0A14 14 0 0 0 100 14M100 86A14 14 0 0 0 86 100M14 100A14 14 0 0 0 0 86'/%3E%3Crect x='31' y='31' width='38' height='38'/%3E%3Crect x='31' y='31' width='38' height='38' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9'/%3E%3Cpath d='M50 0Q58 12 50 23Q42 12 50 0M100 50Q88 58 77 50Q88 42 100 50M50 100Q42 88 50 77Q58 88 50 100M0 50Q12 42 23 50Q12 58 0 50'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 70%); mask-image: linear-gradient(90deg, #000 25%, transparent 70%); }
.np-brilho { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 212, 59, .10) 50%, transparent 60%);
    background-size: 250% 100%; animation: np-varrer 6s ease-in-out infinite; }
@keyframes np-varrer { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.np-friso { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--np-vermelho-lusa) 0 50%, var(--np-amarelo) 50% 100%); }
.np-display { font-family: var(--np-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }

/* ------------------------------------------------------------------ topo da vitrine */
.np-topo { display: flex; align-items: center; gap: 14px; min-height: 64px; min-width: 0; }
.np-topo-icone { width: 48px; height: 48px; flex: none; border-radius: 14px; background: rgba(0, 255, 136, .12); color: var(--np-verde); display: flex; align-items: center; justify-content: center; }
.np-topo-texto { display: grid; gap: 3px; min-width: 0; }
.np-topo-texto h1 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.np-topo-texto span { font-size: 13.5px; color: var(--np-texto-2); }
.np-topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.np-busca { display: flex; align-items: center; gap: 9px; width: 330px; max-width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--np-fundo-2); border: 1px solid var(--np-linha); color: var(--np-texto-3); }
.np-busca:focus-within { border-color: rgba(0, 255, 136, .5); }
.np-busca input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; font-size: 13.5px; }
.np-busca input::-webkit-search-cancel-button { filter: invert(.7); }
/* No computador largo o campo cresce para caber "Procurar em Desporto: equipa, jogador, torneio…" inteiro (prancha NV2). */
@media (min-width: 1440px) { .np-busca { width: 400px; } }
/* O foco do campo já aparece na borda da caixa (:focus-within): sem o segundo contorno por dentro. */
.np-pagina .np-busca input:focus-visible { outline: none; }
.np-botao-sec { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--np-linha-2);
    background: var(--np-fundo-2); color: #fff; font-size: 13.5px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.np-botao-sec:hover { border-color: var(--np-verde); }
.np-botao-sec.on { border-color: rgba(0, 255, 136, .5); color: var(--np-verde); background: rgba(0, 255, 136, .08); }
.np-icone-botao { width: 40px; height: 40px; flex: none; border-radius: 11px; border: 1px solid var(--np-linha); background: var(--np-fundo-2); color: var(--np-texto-2);
    display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.np-icone-botao:hover { color: #fff; border-color: var(--np-linha-2); }

.np-sinais { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 0; margin: -10px 0 -8px; }
.np-sinais:empty { display: none; }
.np-sombra, .np-ligacao { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.np-sombra { color: var(--np-ambar); background: rgba(255, 181, 71, .12); border: 1px solid rgba(255, 181, 71, .35); }
.np-ligacao { color: var(--np-texto-2); background: var(--np-cartao); border: 1px solid var(--np-linha); }
.np-ligacao.vivo { color: var(--np-verde); border-color: rgba(0, 255, 136, .35); }
.np-ligacao.fora { color: var(--np-ambar); }
.np-ponto { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; animation: np-pulso 1.8s ease-out infinite; }
@keyframes np-pulso { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, .55); } 100% { box-shadow: 0 0 0 7px rgba(0, 255, 136, 0); } }

/* ------------------------------------------------------------------ filtros: as categorias em azulejos e a ordem num botão
   (navegação aprovada pelo dono em 30/09/2026, pranchas NV1, NV4 e NV7) */
.np-filtros { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* As abas nunca cortam nem rolam de lado: azulejos de largura igual, em filas iguais. A página diz
   quantas colunas (--colunas, pelo maior nome); antes disso, as que couberem. */
.np-abas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; min-width: 0; }
.np-abas[style*="--colunas"] { grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); }
.np-aba { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px; border-radius: 14px; background: var(--np-fundo-2); border: 1px solid var(--np-linha); min-width: 0;
    transition: border-color .15s, background .15s; }
.np-aba:hover { border-color: var(--np-linha-2); }
.np-capa.todas { --t: 34px; --r: 10px; background: rgba(0, 255, 136, .14); color: var(--np-verde); box-shadow: none; }
.np-capa.todas svg { width: 56%; height: 56%; }
.np-aba-tx { display: grid; gap: 2px; min-width: 0; }
.np-aba-tx b { font-size: 13.5px; font-weight: 800; color: #e6e9ec; white-space: nowrap; line-height: 1.1; }
.np-aba-tx small { font-size: 11.5px; font-weight: 700; color: var(--np-texto-4); white-space: nowrap; line-height: 1.1; }
.np-aba-tx em { font-style: normal; }
.np-aba.on { background: rgba(0, 255, 136, .09); border-color: rgba(0, 255, 136, .55); }
.np-aba.on b { color: #fff; }
.np-aba.on small { color: var(--np-verde); }
/* A linha em que a grade recolhe no celular, dentro de uma categoria: voltar, o seletor que abre a folha e a busca. */
.np-trilha { display: none; align-items: center; gap: 8px; min-width: 0; }
.np-trilha > .np-ic { width: 42px; height: 46px; border-radius: 12px; }
.np-trilha > .np-ic svg { width: 18px; height: 18px; }
.np-trilha-onde { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 8px; border-radius: 12px; background: var(--np-fundo-2);
    border: 1px solid var(--np-linha-2); color: #fff; text-align: left; cursor: pointer; }
.np-trilha-tx { flex: 1; display: grid; gap: 2px; min-width: 0; }
.np-trilha-tx small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--np-texto-4); }
.np-trilha-tx b { font-size: 15px; line-height: 1.1; }
.np-trilha-onde i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--np-texto-4); flex: none; }
.np-trilha-onde > svg { width: 17px; height: 17px; flex: none; color: var(--np-texto-2); }
/* O título do que está na tela e, ao lado, a ordem. */
.np-linha-ordem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.np-linha-ordem h2 { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; }
.np-linha-ordem h2 small { font-size: 12.5px; font-weight: 700; color: var(--np-texto-4); letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.np-ordem-tit.curto { display: none; }
.np-ordenar { position: relative; flex: none; }
.np-ordenar-botao { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--np-linha); background: var(--np-fundo-2);
    color: var(--np-texto-2); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.np-ordenar-botao b { font-weight: 700; }
.np-ordenar-botao svg { width: 15px; height: 15px; flex: none; color: var(--np-texto-3); transition: transform .15s; }
.np-ordenar-botao:hover, .np-ordenar-botao[aria-expanded="true"] { border-color: var(--np-linha-2); color: #fff; }
.np-ordenar-botao[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.np-ordenar-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 224px; padding: 6px; border-radius: 14px; background: var(--np-cartao);
    border: 1px solid var(--np-linha-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); display: grid; gap: 2px; }
.np-ordenar-menu button { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: var(--np-texto-2);
    font-size: 13.5px; font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer; }
.np-ordenar-menu button span { flex: 1; }
.np-ordenar-menu button svg { width: 15px; height: 15px; flex: none; color: var(--np-texto-3); }
.np-ordenar-menu button:hover { background: var(--np-fundo-2); color: #fff; }
.np-ordenar-menu button.on { color: #fff; }
.np-ordenar-menu button.on svg { color: var(--np-verde); }
/* A folha "Onde quer ir?" (celular): fica fora da página, no corpo do site, por cima de tudo. */
body.np-com-folha { overflow: hidden; }
.np-folha-raiz { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; color: #fff;
    --np-verde: var(--nv-verde, #00ff88); --np-fundo-2: var(--nv-fundo-2, #15181c); --np-cartao: var(--nv-cartao, #1b1f24); --np-linha: var(--nv-linha, #2a3037);
    --np-linha-2: var(--nv-linha-2, #3a424b); --np-texto-2: var(--nv-texto-2, #b9bec5); --np-texto-4: var(--nv-texto-3, #737a83); }
.np-folha-raiz[hidden] { display: none; }
.np-folha-raiz a { color: inherit; text-decoration: none; }
.np-folha-raiz :focus-visible { outline: 2px solid var(--np-verde); outline-offset: 2px; }
.np-folha-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.np-folha { position: relative; width: min(520px, 100%); max-height: calc(100vh - 54px); overflow: auto; display: grid; gap: 12px; padding: 10px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--np-cartao); border: 1px solid var(--np-linha-2); border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .6); }
.np-folha-pega { justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--np-linha-2); }
.np-folha-cab { display: flex; align-items: center; }
.np-folha-cab b { flex: 1; font-size: 17px; font-weight: 900; }
.np-rotulo-fila { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--np-texto-4); white-space: nowrap; }
/* O azulejo em pé (celular e folha): quatro por fila, todos inteiros; o nome pode ir a duas linhas. */
.np-abas.np-abas-folha { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.np-abas-folha .np-aba { flex-direction: column; justify-content: center; gap: 4px; height: 70px; padding: 0 2px; border-radius: 12px; text-align: center; }
.np-abas-folha .np-capa { --t: 26px !important; --r: 7px !important; }
.np-abas-folha .np-aba-tx { justify-items: center; max-width: 100%; }
.np-abas-folha .np-aba-tx b { font-size: 11px; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.np-abas-folha .np-aba-tx small { font-size: 10px; font-weight: 800; line-height: 1; }
.np-abas-folha .np-aba-tx em { display: none; }
.np-seg { margin-left: auto; flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--np-fundo-2); border: 1px solid var(--np-linha); }
.np-seg button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--np-texto-2);
    font-size: 12.5px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.np-seg button:hover { color: #fff; }
.np-seg button.on { background: var(--np-linha-2); color: #fff; }
.np-seg button.on svg { color: var(--np-verde); }

/* ------------------------------------------------------------------ corpo: principal + coluna da direita */
.np-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; min-width: 0; }
.np-evento .np-corpo, .np-mercado .np-corpo { grid-template-columns: minmax(0, 1fr) 360px; }
.np-principal { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.np-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.np-lado-vivo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.np-lado-vivo:empty { display: none; }
.np-caixa { background: var(--np-cartao); border: 1px solid var(--np-linha); border-radius: 16px; min-width: 0; overflow: hidden; }
.np-caixa-cab { display: flex; align-items: center; gap: 9px; min-height: 30px; }
.np-caixa-cab b { font-size: 15px; font-weight: 800; }
/* O título pode ocupar duas linhas; o que vem ao lado dele ("24 h", "nas últimas 24 h") não quebra. */
.np-caixa-cab .np-mu { font-size: 11.5px; font-weight: 700; white-space: nowrap; flex: none; }
.np-ver { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: var(--np-verde) !important; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.np-ver:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ peças */
.np-capa { width: var(--t, 44px); height: var(--t, 44px); flex: none; border-radius: var(--r, 11px); display: flex; align-items: center; justify-content: center; color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); overflow: hidden; }
.np-capa svg { width: 50%; height: 50%; }
.np-capa img { width: 100%; height: 100%; object-fit: cover; }
.np-capa.politica { background: linear-gradient(145deg, #2f5bd8, #1e40af); }
.np-capa.economia { background: linear-gradient(145deg, #12935f, #0d6b47); }
.np-capa.cripto { background: linear-gradient(145deg, #b8650d, #8a4b08); }
.np-capa.mundo { background: linear-gradient(145deg, #138199, #0e5f72); }
.np-capa.futebol_fora_de_campo { background: linear-gradient(145deg, #7c3aed, #5b21b6); }
.np-capa.entretenimento { background: linear-gradient(145deg, #c21d63, #9d174d); }
.np-capa.esportes { background: linear-gradient(145deg, #e8572f, #b83a18); }
.np-capa.tecnologia { background: linear-gradient(145deg, #65a30d, #3f6212); }
.np-capa.outra { background: linear-gradient(145deg, #475569, #334155); }
.np-avatar { width: var(--t, 26px); height: var(--t, 26px); flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--t, 26px) * .36); font-weight: 900; letter-spacing: -.02em; overflow: hidden; white-space: nowrap; }
.np-avatar img { width: 100%; height: 100%; object-fit: cover; }
.np-cat { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--np-texto-3); text-transform: uppercase; white-space: nowrap; min-width: 0; overflow: hidden; }
.np-selo { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 5px; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; flex: none; }
.np-selo.breve { background: rgba(255, 181, 71, .16); color: var(--np-ambar); }
.np-selo.dest { background: rgba(255, 212, 59, .15); color: var(--np-amarelo); }
.np-selo.nova { background: #7c3aed; color: #fff; }
.np-selo.mexe { background: rgba(255, 138, 106, .16); color: #ff9f85; }
.np-selo.resolvida { background: rgba(0, 255, 136, .14); color: var(--np-verde); }
.np-prazo { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.np-prazo svg { width: 14px; height: 14px; flex: none; }
.np-prazo.breve { color: var(--np-ambar); }
.np-seta { width: 22px; height: 22px; flex: none; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.np-seta svg { width: 13px; height: 13px; }
.np-seta.sobe { background: rgba(0, 255, 136, .12); color: var(--np-verde); }
.np-seta.desce { background: rgba(255, 138, 106, .12); color: var(--np-nao); }
.np-sobe { color: var(--np-verde); }
.np-desce { color: var(--np-nao); }

/* o meio círculo: a % dentro da curva e a palavra embaixo, fora do arco */
.np-medidor { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.np-medidor svg { display: block; width: 100%; height: auto; }
.np-medidor text { font-family: inherit; font-weight: 900; fill: #fff; }
.np-medidor .np-arco-fundo { stroke: var(--np-linha); }
.np-medidor .np-arco { stroke: var(--np-cat); transition: stroke-dasharray .5s ease; }
.np-medidor.deu-sim .np-arco { stroke: var(--np-verde); }
.np-medidor.deu-nao .np-arco { stroke: var(--np-nao); }
.np-medidor span { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; color: var(--np-texto-3); text-transform: uppercase; line-height: 1; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.np-medidor.grande span { font-size: 12px; }
.np-medidor.parado .np-arco { stroke: #5d646d; }
.np-medidor.parado text { fill: var(--np-texto-2); }

/* o mini-gráfico do cartão */
.np-mini { position: relative; flex: 1; min-width: 0; height: 48px; }
.np-mini svg { display: block; width: 100%; height: 100%; overflow: visible; }
.np-mini path { vector-effect: non-scaling-stroke; }
.np-mini i { position: absolute; right: -3.5px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--np-cartao); }
.np-mini.parado { opacity: .4; }

/* Sim e Não com a % (na Fase 0 levam à página da previsão) */
.np-sn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.np-sim, .np-nao { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 10px; font-size: 13.5px; font-weight: 800; padding: 0 8px;
    white-space: nowrap; min-width: 0; cursor: pointer; background: transparent; transition: background .15s, border-color .15s; }
.np-sim { border: 1px solid rgba(0, 255, 136, .35); color: var(--np-verde) !important; }
.np-nao { border: 1px solid rgba(255, 138, 106, .35); color: var(--np-nao) !important; }
.np-sim:hover { background: rgba(0, 255, 136, .1); border-color: rgba(0, 255, 136, .6); }
.np-nao:hover { background: rgba(255, 138, 106, .1); border-color: rgba(255, 138, 106, .6); }
.np-sn.parado { opacity: .45; pointer-events: none; }
.np-espera { height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--np-fundo-2); border: 1px dashed var(--np-linha-2);
    font-size: 13px; font-weight: 700; color: var(--np-texto-2); }
.np-resolvida { height: 40px; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; background: rgba(0, 255, 136, .1);
    border: 1px solid rgba(0, 255, 136, .42); font-size: 13.5px; font-weight: 800; color: var(--np-verde); }
.np-resolvida.nao { background: rgba(255, 138, 106, .1); border-color: rgba(255, 138, 106, .42); color: var(--np-nao); }

.np-pe { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--np-texto-3); margin-top: auto; min-width: 0; }
.np-pe .np-nota { font-size: 11.5px; color: var(--np-texto-4); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-pe .np-vao { flex: 1; }
.np-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; border: 1px solid var(--np-linha); background: var(--np-fundo-2); color: var(--np-texto-2);
    display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.np-ic svg { width: 15px; height: 15px; }
.np-ic:hover { color: #fff; border-color: var(--np-linha-2); }
.np-ic.on, .np-botao-sec.on { color: var(--np-ambar); border-color: rgba(255, 181, 71, .5); }
.np-ic.on svg, .np-botao-sec.on svg { fill: currentColor; }

/* ------------------------------------------------------------------ cartões */
.np-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.np-cartao { background: linear-gradient(180deg, color-mix(in srgb, var(--np-cat) 13%, transparent), transparent 96px), var(--np-cartao); border: 1px solid var(--np-linha);
    border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 268px; overflow: hidden; transition: border-color .15s; }
.np-cartao:hover { border-color: var(--np-linha-2); }
.np-cartao-topo { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.np-cartao-evento .np-cartao-topo { align-items: flex-start; }
.np-cartao-nome { flex: 1; min-width: 0; display: grid; gap: 5px; }
/* O título do cartão não tem teto de linhas (a queixa do dono é texto cortado): o cartão cresce e a fila da grade acompanha. */
.np-tit { display: block; font-size: 15px; font-weight: 800; line-height: 1.32; color: #fff; overflow-wrap: anywhere; }
.np-tit:hover { color: var(--np-amarelo); }
.np-cartao-meio { display: flex; gap: 12px; align-items: flex-end; flex: none; }
.np-cartao-meio .np-medidor { width: 90px; }
.np-resultados { display: grid; gap: 2px; }
.np-res { display: grid; grid-template-columns: 26px minmax(0, 1fr) 56px; gap: 10px; align-items: center; min-height: 40px; padding: 2px 0; border-radius: 8px; }
.np-res:hover .np-res-nome b { color: var(--np-amarelo); }
.np-res-nome { display: grid; gap: 5px; min-width: 0; }
/* O nome da linha não é cortado: o comprido ("Philadelphia Phillies (-1,5)") vai a duas linhas. */
.np-res-nome b { font-size: 13.5px; font-weight: 700; line-height: 1.2; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-res > .np-pc { font-size: 16px; font-weight: 900; text-align: right; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.np-grade > .np-largo { grid-column: span 2; }
.np-largo .np-tit { font-size: 18px; line-height: 1.25; }
.np-largo .np-capa { --t: 52px !important; --r: 14px !important; }
.np-largo .np-cartao-meio { gap: 18px; }
.np-largo .np-cartao-meio .np-medidor { width: 112px; }
.np-largo .np-cartao-meio .np-mini { height: 76px; }
.np-largo .np-sn { max-width: 380px; }
.np-largo .np-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.np-barra { display: block; height: 4px; border-radius: 3px; background: var(--np-linha); overflow: hidden; }
.np-barra i { display: block; height: 100%; border-radius: 3px; transition: width .5s ease; }

/* ------------------------------------------------------------------ destaque do topo (Azulejo Lusa) */
.np-hero { position: relative; isolation: isolate; overflow: hidden; }
.np-hero-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: center; padding: 22px 24px 20px 30px; min-height: 300px; }
.np-hero.com-posicoes .np-hero-grade { padding-bottom: 12px; }
.np-hero-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.np-hero-selos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-hero-selos .np-cat { color: #9fb3a8; }
.np-hero-tit { font-size: 38px; line-height: .98; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.np-hero-tit:hover { color: var(--np-amarelo); }
/* A pergunta é o produto: título comprido ganha letra menor e uma linha a mais, em vez de reticências. */
.np-hero-tit.longo { font-size: 30px; -webkit-line-clamp: 4; }
.np-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 800; }
.np-hero-meta .np-mu { font-size: 12px; font-weight: 600; }
.np-hero-bin { display: flex; align-items: flex-end; gap: 16px; }
.np-hero-bin .np-medidor { width: 128px; }
.np-hero-bin .np-sn { width: 230px; }
.np-hero-legenda { display: grid; gap: 8px; width: 100%; max-width: 420px; }
.np-hero-legenda a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; }
.np-hero-legenda .np-el { font-size: 14px; font-weight: 700; color: var(--np-texto-1); }
.np-hero-legenda b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.np-hero-legenda .np-barra { grid-column: 2 / -1; height: 4px; }
.np-hero-legenda a:hover .np-el { color: var(--np-amarelo); }
.np-hero-mexeu { font-size: 12px; font-weight: 700; color: #ff9f85; display: flex; align-items: center; gap: 5px; }
.np-hero-mexeu svg { width: 13px; height: 13px; flex: none; }
.np-hero-grafico { min-width: 0; }
.np-hero-posicoes { position: relative; display: flex; gap: 10px; padding: 4px 24px 16px 30px; }
/* O texto de cada posição quebra em linhas (não é cortado); a barra fica embaixo, alinhada pela base nas quatro. */
.np-hero-posicoes button { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 7px; row-gap: 6px; align-items: start; padding: 0; border: 0;
    background: none; cursor: pointer; text-align: left; color: var(--np-texto-3); font-size: 12px; font-weight: 700; }
.np-hero-posicoes button b { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; padding-top: 2px; }
.np-hero-posicoes button span { font-family: var(--np-display); font-style: italic; font-weight: 800; font-size: 17px; line-height: 1; color: var(--np-amarelo); }
.np-hero-posicoes button i { grid-column: 1 / -1; align-self: end; display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.np-hero-posicoes button[aria-current="true"] { color: #fff; }
.np-hero-posicoes button[aria-current="true"] i::after { content: ""; display: block; height: 100%; background: var(--np-amarelo); transform-origin: left; animation: np-encher 8s linear forwards; }
.np-hero:hover .np-hero-posicoes button[aria-current="true"] i::after, .np-hero:focus-within .np-hero-posicoes button[aria-current="true"] i::after { animation-play-state: paused; }
@keyframes np-encher { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ gráficos */
.np-grafico { position: relative; min-width: 0; touch-action: pan-y; }
.np-grafico svg { display: block; overflow: visible; font-family: inherit; }
.np-grafico .np-guia { stroke: var(--np-linha); stroke-dasharray: 3 4; }
.np-grafico .np-eixo { fill: var(--np-texto-4); font-size: 11px; font-weight: 700; }
.np-grafico .np-fim-pc { font-size: 16px; font-weight: 900; }
.np-grafico .np-fim-nome { fill: var(--np-texto-2); font-size: 11px; font-weight: 700; }
.np-grafico .np-linha { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.np-grafico .np-dica-linha { stroke: #5d646d; }
.np-dica { position: absolute; top: 8px; z-index: 2; min-width: 150px; padding: 10px 14px; border-radius: 10px; background: var(--np-fundo); border: 1px solid var(--np-linha-2);
    display: grid; gap: 4px; pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.np-dica small { font-size: 11px; font-weight: 800; color: var(--np-texto-3); letter-spacing: .04em; text-transform: uppercase; }
.np-dica span { font-size: 12.5px; font-weight: 600; color: var(--np-texto-1); white-space: nowrap; }
.np-dica span b { font-weight: 800; margin-right: 6px; }
.np-grafico-vazio { display: flex; align-items: center; justify-content: center; min-height: 150px; font-size: 13px; color: var(--np-texto-3); text-align: center; padding: 0 12px; }

/* ------------------------------------------------------------------ faixa "Terminam em breve" */
.np-breves { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.np-breves .np-caixa-cab b { font-size: 16px; }
.np-breves .np-caixa-cab svg { color: var(--np-ambar); width: 17px; height: 17px; }
.np-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.np-tile { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 13px; border-radius: 12px; background: var(--np-fundo-2); border: 1px solid var(--np-linha); }
.np-tile.breve { border-color: rgba(255, 181, 71, .35); }
.np-tile:hover { border-color: var(--np-linha-2); }
.np-tile-topo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--np-texto-2); min-width: 0; }
.np-tile.breve .np-tile-topo .np-prazo { color: var(--np-ambar); }
.np-tile > b { font-size: 13px; line-height: 1.3; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-tile-valor { display: flex; align-items: center; gap: 8px; min-width: 0; }
.np-tile-valor .np-grande { font-size: 22px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.np-tile-valor .np-avatar { --t: 22px; }
/* O nome do resultado pode quebrar em 2 linhas: "Desce até 82.500 dólares" não pode perder o número. */
.np-tile-valor .np-el { font-size: 13px; font-weight: 800; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-tile-valor .np-pc-lider { font-size: 17px; font-weight: 900; color: #fff; flex: none; }

/* ------------------------------------------------------------------ seções por categoria */
.np-secao { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.np-secao-cab { display: flex; align-items: center; gap: 10px; min-height: 36px; min-width: 0; }
/* O título da seção e as contas dela: quando não cabem na mesma linha, as contas descem; nada é cortado. */
.np-secao-cab h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.01em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 9px; min-width: 0; white-space: nowrap; }
.np-secao-cab h2 small { font-size: 12.5px; color: var(--np-texto-4); font-weight: 700; letter-spacing: 0; }
.np-resultado-busca { font-size: 13.5px; color: var(--np-texto-2); }
.np-resultado-busca b { color: #fff; }

/* ------------------------------------------------------------------ coluna da direita */
.np-lado-caixa { padding: 14px 16px 4px; display: grid; }
.np-lado-caixa .np-caixa-cab svg { width: 17px; height: 17px; flex: none; }
.np-linha-lado { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 50px; border-top: 1px solid var(--np-linha); min-width: 0; }
.np-linha-lado.sem-marca { grid-template-columns: minmax(0, 1fr) auto; }
.np-linha-lado > span { display: grid; gap: 2px; min-width: 0; }
.np-linha-lado > span b { font-size: 13px; }
.np-linha-lado > span small { font-size: 11.5px; font-weight: 700; color: var(--np-texto-4); }
.np-linha-lado > b { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.np-linha-lado:hover > span b { color: var(--np-verde); }
.np-lado-vazio { display: grid; justify-items: center; gap: 8px; margin: 4px 0 12px; padding: 14px 8px; border-radius: 12px; border: 1px dashed var(--np-linha-2); text-align: center; }
.np-lado-vazio > span:first-child { width: 44px; height: 44px; border-radius: 50%; background: var(--np-fundo-2); display: flex; align-items: center; justify-content: center; color: var(--np-texto-3); }
.np-lado-vazio b { font-size: 13.5px; }
.np-lado-vazio small { font-size: 12px; line-height: 1.45; color: var(--np-texto-2); }
.np-lado-vazio .np-botao-sec { height: 36px; font-size: 13px; }

/* ------------------------------------------------------------------ como funciona (desenho da Designer de Produção, 29/09) */
.np-como { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 90px; }
.np-como .np-azulejo { opacity: .08; }
.np-como-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.np-como-cab > span:first-child { display: grid; gap: 4px; }
.np-como-cab small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9fb3a8; }
.np-como-cab b { font-size: 30px; line-height: .95; color: #fff; }
.np-como-cab .np-botao-sec { height: 36px; font-size: 13px; }
.np-como-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.np-como-passo { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 14px; border: 1px solid var(--np-linha); background: rgba(21, 24, 28, .88); }
.np-como-passo + .np-como-passo::before { content: ''; position: absolute; left: -17px; top: 62px; width: 18px; height: 2px; border-radius: 1px; background: var(--np-linha-2); }
.np-como-desenho { height: 124px; display: flex; align-items: center; justify-content: center; border-radius: 13px 13px 0 0; border-bottom: 1px solid var(--np-linha); overflow: hidden;
    background: radial-gradient(120% 95% at 50% 0%, color-mix(in srgb, var(--np-cat) 16%, transparent), transparent 64%); }
.np-como-texto { flex: 1; padding: 14px 16px 16px; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; row-gap: 5px; align-content: start; }
.np-como-texto i { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; background: var(--np-amarelo); color: #1a1405; font-size: 19px; line-height: 1;
    display: flex; align-items: center; justify-content: center; }
.np-como-texto b { font-size: 22px; line-height: 1; color: #fff; }
.np-como-texto span { font-size: 13px; line-height: 1.45; color: var(--np-texto-2); }
.np-como-pergunta { display: grid; gap: 9px; width: 78%; padding: 11px 12px; border-radius: 12px; background: var(--np-cartao); border: 1px solid var(--np-linha-2); box-shadow: 0 12px 26px rgba(0, 0, 0, .4); }
.np-como-pergunta b { font-size: 12.5px; line-height: 1.3; }
.np-como-pergunta .np-sim, .np-como-pergunta .np-nao { height: 28px; font-size: 12px; border-radius: 8px; }
.np-como-chance { display: flex; align-items: flex-end; gap: 12px; }
.np-como-chance .np-medidor { width: 92px; }
.np-como-arco { stroke: var(--np-cat); stroke-dasharray: var(--ate) var(--total); }
.np-como.anima .np-como-arco { stroke-dasharray: var(--de) var(--total); }
/* A linha do desenho tem ~116 de comprimento: o traço de 120 cobre tudo (pathLength não vale no CSS). */
.np-como-linha { flex: none; overflow: visible; }
.np-como-linha path { fill: none; stroke: var(--np-cat); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 0; }
.np-como.anima .np-como-linha path { stroke-dashoffset: 120; }
.np-como-sino { position: relative; width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--np-amarelo);
    background: var(--np-cartao); border: 1px solid var(--np-linha-2); box-shadow: 0 12px 26px rgba(0, 0, 0, .4); }
.np-como-sino em { position: absolute; top: -8px; left: 48px; padding: 4px 9px; border-radius: 999px 999px 999px 4px; background: var(--np-amarelo); color: #1a1405;
    font-style: normal; font-size: 12px; font-weight: 900; white-space: nowrap; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.np-como-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.np-selo-breve { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 181, 71, .1);
    border: 1px solid rgba(255, 181, 71, .35); color: var(--np-ambar); font-size: 12px; font-weight: 800; white-space: nowrap; }
.np-selo-breve svg { width: 13px; height: 13px; }
/* Aberto a todos: o selo deixa de ser âmbar ("em breve") e vira um aviso neutro com o certo. */
.np-selo-aberto { background: rgba(255, 255, 255, .05); border-color: var(--np-linha-2); color: var(--np-texto-1); }

/* ------------------------------------------------------------------ página do acontecimento e da previsão */
/* O caminho de cima da página: com a modalidade e a competição no meio ele cresce; quebra em linhas, nada é cortado. */
.np-migalha { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; font-size: 12.5px; font-weight: 700; color: var(--np-texto-3); min-width: 0; }
.np-migalha a { flex: none; }
.np-migalha a:hover { color: #fff; }
.np-migalha svg { width: 13px; height: 13px; flex: none; color: #5d646d; }
.np-migalha b { color: #fff; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.np-voltar { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--np-texto-2); }
.np-voltar svg { width: 16px; height: 16px; }
.np-cabeca { padding: 20px 22px; display: flex; align-items: center; gap: 18px; min-width: 0; }
.np-cabeca-texto { flex: 1; min-width: 0; display: grid; gap: 9px; }
.np-cabeca-texto h1 { margin: 0; font-size: 27px; font-weight: 900; letter-spacing: -.02em; line-height: 1.12; overflow-wrap: anywhere; }
.np-meta { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--np-texto-2); }
.np-meta > * + *::before { content: '·'; margin-right: 12px; color: var(--np-linha-2); font-weight: 700; }
.np-meta .np-ao-vivo { display: inline-flex; align-items: center; gap: 6px; color: var(--np-verde); }
.np-meta .np-ao-vivo.parado { color: var(--np-ambar); }
.np-lider { display: grid; justify-items: end; gap: 4px; padding: 0 6px; flex: none; }
.np-lider small { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--np-texto-4); text-transform: uppercase; }
.np-lider span { display: flex; align-items: center; gap: 8px; }
.np-lider .np-avatar { --t: 30px; }
.np-lider b { font-size: 26px; font-weight: 900; color: var(--np-amarelo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.np-cabeca > .np-medidor { width: 132px; padding: 0 8px; }
.np-cabeca-acoes { display: flex; gap: 8px; align-self: flex-start; flex: none; }
.np-cabeca-acoes .np-botao-sec { height: 40px; }
.np-cabeca-acoes .np-ic { width: 40px; height: 40px; }
.np-cabeca-acoes .np-ic svg { width: 17px; height: 17px; }

.np-caixa-grafico { padding: 16px 18px 10px; display: flex; flex-direction: column; gap: 12px; }
.np-caixa-grafico-cab { display: flex; align-items: center; gap: 10px; min-height: 34px; flex-wrap: wrap; }
.np-caixa-grafico-cab > b { font-size: 16px; }
.np-legenda { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.np-legenda > span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--np-fundo-2); border: 1px solid var(--np-linha);
    font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.np-legenda i { width: 10px; height: 10px; border-radius: 50%; }
.np-janelas { margin-left: auto; }

.np-tabela-cab, .np-lin { display: grid; grid-template-columns: 34px minmax(0, 1fr) 110px 86px 200px; gap: 14px; align-items: center; padding: 0 18px; }
.np-tabela-cab { height: 40px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--np-texto-4); text-transform: uppercase; }
.np-tabela-cab span:nth-child(3), .np-tabela-cab span:nth-child(4) { text-align: right; }
.np-tabela-cab span:nth-child(5) { text-align: center; }
.np-lin { min-height: 72px; border-top: 1px solid var(--np-linha); cursor: pointer; }
.np-lin:hover { background: rgba(255, 255, 255, .02); }
.np-lin.on { background: rgba(0, 255, 136, .05); box-shadow: inset 3px 0 0 var(--np-verde); }
.np-lin .np-avatar { --t: 34px; }
.np-lin-nome { display: grid; gap: 7px; min-width: 0; }
/* O nome leva à previsão; o resto da linha escolhe o resultado (por isso o link só tem a largura do texto). */
.np-lin-nome a { justify-self: start; max-width: 100%; font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-lin-nome a:hover { color: var(--np-verde); }
.np-lin-nome .np-barra { height: 6px; }
.np-lin > .np-pc { font-size: 24px; font-weight: 900; text-align: right; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.np-lin > .np-mov { font-size: 13px; font-weight: 800; text-align: right; color: var(--np-texto-4); white-space: nowrap; }
.np-lin > .np-mov.np-sobe { color: var(--np-verde); }
.np-lin > .np-mov.np-desce { color: var(--np-nao); }
.np-lin .np-sim, .np-lin .np-nao { height: 42px; }

.np-lados { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.np-lado-sn { display: grid; gap: 10px; padding: 16px; border-radius: 14px; min-width: 0; }
.np-lado-sn.sim { background: rgba(0, 255, 136, .06); border: 1px solid rgba(0, 255, 136, .3); }
.np-lado-sn.nao { background: rgba(255, 138, 106, .06); border: 1px solid rgba(255, 138, 106, .3); }
.np-lado-sn.ganhou { box-shadow: inset 0 0 0 2px var(--np-verde); }
.np-lado-sn > span:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
.np-lado-sn > span:first-child b { font-size: 20px; font-weight: 900; }
.np-lado-sn.sim > span:first-child b { color: var(--np-verde); }
.np-lado-sn.nao > span:first-child b { color: var(--np-nao); }
.np-lado-sn > span:first-child small { font-size: 13px; font-weight: 600; color: var(--np-texto-2); min-width: 0; }
.np-lado-sn > span:last-child { display: flex; align-items: baseline; gap: 8px; }
.np-lado-sn .np-pc { font-size: 34px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.np-lado-sn .np-mu { font-size: 12.5px; font-weight: 700; }

.np-regras { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.np-regras-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-regras-cab b { font-size: 16px; }
.np-regras-cab .np-mu { font-size: 12px; font-weight: 700; }
.np-fatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.np-fatos.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.np-fatos.um { grid-template-columns: minmax(0, 340px); }
.np-fato { display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 12px; border-radius: 12px; background: var(--np-fundo-2); border: 1px solid var(--np-linha); }
.np-fato > svg { width: 18px; height: 18px; flex: none; color: var(--np-texto-3); }
.np-fato span { display: grid; gap: 2px; min-width: 0; }
.np-fato small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--np-texto-4); text-transform: uppercase; }
.np-fato b { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.np-regras-texto p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--np-texto-2); white-space: pre-line; overflow-wrap: anywhere; }
/* Recolhidas por padrão (pedido do dono em 29/09): três linhas e um esmaecido; "Ler tudo" abre. */
.np-regras.recolhida .np-regras-texto { max-height: calc(14px * 1.6 * 3); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.np-regras-botao { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--np-linha-2);
    background: transparent; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
.np-regras-botao:hover { border-color: var(--np-verde); color: var(--np-verde); }
.np-regras-botao svg { width: 15px; height: 15px; transition: transform .2s; }
.np-regras-botao[aria-expanded="true"] svg { transform: rotate(180deg); }

.np-painel { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.np-painel > b { font-size: 16px; }
.np-escolhido { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--np-fundo-2); border: 1px solid var(--np-linha); min-width: 0; }
.np-escolhido .np-avatar { --t: 30px; }
.np-escolhido b { flex: 1; font-size: 14px; }
.np-painel .np-sim, .np-painel .np-nao { height: 48px; font-size: 15px; }
.np-em-breve { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(255, 181, 71, .08); border: 1px solid rgba(255, 181, 71, .3); }
.np-em-breve b { font-size: 13.5px; color: var(--np-ambar); }
.np-em-breve span { font-size: 12.5px; line-height: 1.45; color: var(--np-texto-1); }
/* Sem login, com as apostas abertas: o convite é neutro; o verde fica só no botão de criar conta. */
.np-convite { background: var(--np-fundo-2); border-color: var(--np-linha); }
.np-convite b { color: #fff; }
.np-convite-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* O número do boletim (PV…) e o "Preciso de ajuda" em cada previsão da caixa (01/10/2026). */
.np-minha-boletim { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.np-minha-boletim .bol-selo { min-height: 30px; font-size: 12px; }
.np-minha-boletim .bol-ajuda { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.np-convite-botoes .np-botao, .np-painel .np-convite-botoes .np-botao-sec { height: 46px; width: 100%; }
.np-painel .np-botao-sec { height: 46px; width: 100%; }

.np-vazio { display: grid; justify-items: center; gap: 10px; padding: 46px 16px; border-radius: 14px; border: 1px dashed var(--np-linha-2); color: var(--np-texto-2); text-align: center; font-size: 14px; }
.np-vazio b { font-size: 17px; color: #fff; }
.np-vazio svg { color: var(--np-texto-3); }
.np-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--np-verde); color: #04140c !important;
    font-size: 14px; font-weight: 800; cursor: pointer; }
.np-rodando { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--np-linha-2); border-top-color: var(--np-verde); animation: np-gira .8s linear infinite; }
@keyframes np-gira { to { transform: rotate(360deg); } }
.np-aviso-copiado { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 60; padding: 10px 16px; border-radius: 10px; background: #fff; color: #0e1013;
    font-size: 13.5px; font-weight: 800; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }

/* ------------------------------------------------------------------ telas médias */
@media (max-width: 1279px) {
    .np-corpo, .np-evento .np-corpo, .np-mercado .np-corpo { grid-template-columns: minmax(0, 1fr); }
    .np-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
    .np-lado-vivo { display: contents; }
    .np-grade { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
    .np-grade > .np-largo { grid-column: auto; }
    .np-largo .np-resultados { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
    .np-hero-grade { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .np-como-passos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .np-como-passo { flex-direction: row; }
    .np-como-passo + .np-como-passo::before { display: none; }
    .np-como-desenho { width: 150px; height: auto; min-height: 104px; flex: none; border-bottom: 0; border-right: 1px solid var(--np-linha); border-radius: 13px 0 0 13px; }
    .np-como-texto { align-content: center; }
    .np-tabela-cab, .np-lin { grid-template-columns: 34px minmax(0, 1fr) 90px 76px 170px; gap: 10px; padding: 0 14px; }
}
@media (max-width: 900px) {
    .np-seg { margin-left: 0; overflow-x: auto; scrollbar-width: none; }
    .np-tiles { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
    .np-tiles::-webkit-scrollbar, .np-seg::-webkit-scrollbar { display: none; }
    .np-tile { flex: none; width: 190px; }
    .np-cabeca { flex-wrap: wrap; }
    .np-lados { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ celular (prancha PV4 e PV5) */
@media (max-width: 700px) {
    .np-pagina { gap: 14px; padding-bottom: 96px; }
    .np-so-celular { display: inline-flex !important; }
    .np-topo { min-height: 46px; gap: 10px; flex-wrap: wrap; }
    .np-topo-icone { width: 38px; height: 38px; border-radius: 11px; }
    .np-topo-icone svg { width: 22px; height: 22px; }
    .np-topo-texto h1 { font-size: 22px; }
    .np-topo-texto span { display: none; }
    .np-topo-acoes { gap: 8px; }
    .np-topo-acoes .np-botao-sec { width: 40px; height: 40px; padding: 0; border-radius: 11px; }
    .np-topo-acoes .np-botao-sec span { display: none; }
    .np-busca { display: none; order: 9; width: 100%; }
    .np-topo.buscando .np-busca { display: flex; }
    .np-topo.buscando .np-topo-acoes { flex-wrap: wrap; width: 100%; }
    .np-sinais { margin: -6px 0 -6px; }
    .np-seg { margin-right: -12px; padding-right: 12px; }
    .np-seg { background: transparent; border: 0; padding: 0; gap: 6px; }
    /* Navegação (pranchas NV4 e NV5): quatro azulejos por fila; dentro de uma categoria a grade recolhe para uma linha. */
    .np-filtros { gap: 12px; }
    .np-abas, .np-abas[style*="--colunas"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .np-abas .np-aba { flex-direction: column; justify-content: center; gap: 4px; height: 70px; padding: 0 2px; border-radius: 12px; text-align: center; }
    .np-abas .np-capa { --t: 26px !important; --r: 7px !important; }
    .np-abas .np-aba-tx { justify-items: center; max-width: 100%; }
    .np-abas .np-aba-tx b { font-size: 11px; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
    .np-abas .np-aba-tx small { font-size: 10px; font-weight: 800; line-height: 1; }
    .np-abas .np-aba-tx em { display: none; }
    .np-categoria .np-filtros > .np-abas { display: none; }
    .np-categoria .np-trilha { display: flex; }
    /* Na categoria o topo some (a linha recolhida já diz onde a pessoa está); a lupa da linha abre só o campo de busca. */
    .np-categoria .np-topo { display: none; }
    .np-categoria .np-topo.buscando { display: flex; min-height: 0; }
    .np-categoria .np-topo.buscando > :not(.np-topo-acoes), .np-categoria .np-topo.buscando .np-topo-acoes > :not(.np-busca) { display: none !important; }
    .np-linha-ordem h2 { font-size: 16px; gap: 8px; }
    .np-linha-ordem h2 small { font-size: 12px; }
    .np-linha-ordem h2 small span, .np-ordem-tit { display: none; }
    .np-ordem-tit.curto { display: inline; }
    .np-categoria .np-linha-ordem h2 > .np-capa { display: none; }
    .np-categoria .np-linha-ordem h2 small span { display: inline; }
    .np-ordenar-botao { height: 36px; padding: 0 11px; gap: 6px; font-size: 12.5px; }
    .np-ordenar-botao .np-mu { display: none; }
    .np-ordenar-botao svg { width: 14px; height: 14px; }
    .np-seg button { height: 32px; font-size: 12.5px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--np-linha); background: var(--np-cartao); }
    .np-seg button.on { border-color: rgba(0, 255, 136, .5); background: rgba(0, 255, 136, .1); }
    .np-grade { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .np-cartao { min-height: 250px; }
    .np-secao-cab h2 { font-size: 17px; }
    .np-hero-grade { padding: 16px 14px 10px 18px; gap: 12px; }
    .np-hero-tit { font-size: 28px; }
    .np-hero-tit.longo { font-size: 23px; }
    .np-hero-bin { flex-wrap: wrap; gap: 12px; width: 100%; }
    .np-hero-bin .np-medidor { width: 104px; }
    .np-hero-bin .np-sn { width: 100%; }
    .np-hero-posicoes { padding: 2px 14px 14px 18px; gap: 6px; }
    .np-hero-posicoes button b { display: none; }
    .np-como { padding: 16px 14px 14px; gap: 12px; }
    .np-como-cab b { font-size: 24px; }
    .np-como-desenho { width: 112px; }
    .np-como-pergunta { width: 88%; padding: 8px; gap: 6px; }
    .np-como-pergunta b { font-size: 11px; }
    .np-como-chance .np-medidor { width: 80px; }
    .np-como-sino { width: 52px; height: 52px; }
    .np-como-sino svg { width: 24px; height: 24px; }
    .np-como-sino em { left: 26px; top: -12px; padding: 3px 7px; font-size: 11px; }
    .np-como-linha { display: none; }
    .np-como-texto { padding: 12px; column-gap: 8px; }
    .np-como-texto b { font-size: 19px; }
    .np-breves { padding: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
    .np-breves .np-caixa-cab .np-mu { display: none; }
    .np-tile { width: 170px; padding: 12px; }
    .np-tile > b { font-size: 12.5px; min-height: 48px; -webkit-line-clamp: 3; }
    .np-lado { grid-template-columns: minmax(0, 1fr); }

    .np-migalha { display: none; }
    .np-voltar { display: inline-flex; }
    .np-cabeca { padding: 14px; gap: 12px; align-items: flex-start; }
    .np-cabeca > .np-capa { --t: 52px !important; --r: 14px !important; }
    .np-cabeca-texto { gap: 8px; }
    .np-cabeca-texto h1 { font-size: 19px; line-height: 1.2; }
    .np-cabeca-texto .np-cat { display: none; }
    .np-meta { font-size: 12.5px; gap: 8px 10px; }
    .np-lider { display: none; }
    .np-cabeca > .np-medidor { width: 110px; order: 3; margin: 0 auto; }
    .np-cabeca-acoes { width: 100%; order: 4; }
    .np-cabeca-acoes .np-botao-sec, .np-cabeca-acoes .np-ic { flex: 1; height: 38px; }
    .np-cabeca-acoes .np-ic { width: auto; border-color: var(--np-linha-2); }
    .np-caixa-grafico { padding: 14px 12px 8px; }
    .np-caixa-grafico-cab .np-legenda { display: none; }
    .np-janelas button { height: 26px; padding: 0 8px; font-size: 11.5px; }
    .np-tabela-cab { display: flex; height: 44px; padding: 0 14px; font-size: 15px; letter-spacing: 0; text-transform: none; color: #fff; gap: 8px; }
    .np-tabela-cab span:not(:first-child) { display: none; }
    .np-lin { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 14px; row-gap: 10px; }
    .np-lin .np-avatar { --t: 32px; }
    .np-lin-nome a { font-size: 15px; }
    .np-lin > .np-pc { font-size: 22px; }
    .np-lin > .np-mov { display: none; }
    .np-lin > .np-sn { grid-column: 1 / -1; }
    .np-regras { padding: 14px; }
    .np-fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .np-fato { padding: 10px; }
    .np-fato b { font-size: 12.5px; }
    .np-regras-texto p { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .np-ponto, .np-rodando { animation: none; }
    .np-barra i, .np-regras-botao svg, .np-medidor .np-arco { transition: none; }
    .np-brilho, .np-hero-posicoes button[aria-current="true"] i::after { animation: none; }
}

/* ------------------------------------------------------------------ prever com dinheiro (Fase 1, prancha aprovada) */
.np-sn-escolha button { font-family: inherit; cursor: pointer; }
.np-sn-escolha .np-sim.on { background: var(--np-verde, #00ff88); color: #0e1013 !important; border-color: var(--np-verde, #00ff88); }
.np-sn-escolha .np-sim.on b { color: #0e1013; }
/* O .np-sim e o .np-nao pintam o texto com !important: marcado, o nome do lado sumia no fundo da mesma cor. */
.np-sn-escolha .np-nao.on { background: #ff8a6a; color: #0e1013 !important; border-color: #ff8a6a; }
.np-sn-escolha .np-nao.on b { color: #0e1013; }
/* O lado que não aceita previsão nova agora (catálogo do operador) e o mercado parado: apagado, sem esconder a chance. */
.np-sn-escolha button.fechado { opacity: .42; }
.np-sn-escolha button.fechado.on { background: transparent; color: inherit; }
.np-sn-escolha .np-sim.fechado.on { color: var(--np-verde) !important; }
.np-sn-escolha .np-nao.fechado.on { color: var(--np-nao) !important; }
.np-sn-escolha button.fechado.on b { color: inherit; }
.np-sn-escolha button[disabled] { cursor: default; }
.np-sn-escolha button svg { vertical-align: -2px; margin-right: 5px; }
.np-bilhete-valor { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: #8b929b; }
.np-bilhete-campo { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px; border-radius: 12px; background: #14171b; border: 1px solid #3a424b; }
.np-bilhete-campo:focus-within { border-color: #4dabf7; }
.np-bilhete-campo em { font-style: normal; font-size: 13px; color: #8cc8ff; }
.np-bilhete-campo input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 900 18px Inter, system-ui, sans-serif; }
.np-atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.np-atalhos .np-ic { width: auto; height: 36px; font-size: 13px; font-weight: 800; }
.np-atalhos .np-ic.on { border-color: var(--np-verde, #00ff88); color: var(--np-verde, #00ff88); }
.np-bilhete-resumo { display: grid; gap: 7px; padding: 12px; border-radius: 12px; background: #15181c; }
.np-bilhete-resumo span { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: #b9bec5; }
.np-bilhete-resumo .np-amarelo { color: #ffd43b; }
.np-bilhete-resumo .np-verde { color: var(--np-verde, #00ff88); font-size: 17px; }
.np-bilhete-botao { height: 50px; font-size: 15px; border-radius: 12px; width: 100%; }
.np-bilhete-botao[disabled] { opacity: .55; cursor: default; }
.np-bilhete-botao.fechado, .np-bilhete-botao.fechado[disabled] { opacity: 1; background: #20252b; border-color: #2a3037; color: #b9bec5 !important; box-shadow: none; }
.np-bilhete-nota { font-size: 11.5px; line-height: 1.45; text-align: center; color: #8b929b; }
.np-bilhete-nota a { color: var(--np-verde, #00ff88); font-weight: 800; }
.np-bilhete-msg { padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; background: #15181c; border: 1px solid #2a3037; color: #d5d9de; }
.np-bilhete-msg.certo { background: rgba(0, 255, 136, .08); border-color: rgba(0, 255, 136, .35); color: #c9f7e0; }
.np-bilhete-msg.erro { background: rgba(255, 90, 90, .08); border-color: rgba(255, 90, 90, .35); color: #ffc9c9; }
.np-bilhete-msg.aviso { background: rgba(255, 214, 10, .07); border-color: rgba(255, 214, 10, .3); color: #f3e6b0; }
.np-minhas .np-minha { display: grid; gap: 6px; padding: 11px 0; border-top: 1px solid #2a3037; }
.np-minhas .np-minha:first-of-type { border-top: 0; }
.np-minha-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.np-minha-cab b { font-size: 13px; }
.np-minha-lado { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.np-minha-lado.sim { background: rgba(0, 255, 136, .14); color: var(--np-verde, #00ff88); }
.np-minha-lado.nao { background: rgba(255, 138, 106, .16); color: #ff8a6a; }
.np-minha-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #b9bec5; }
.np-minha-estado { font-weight: 800; white-space: nowrap; }
.np-minha-estado.vivo { color: #8cc8ff; }
.np-minha-estado.breve { color: #ffc266; }
.np-minha-estado.ganhou { color: var(--np-verde, #00ff88); }
.np-minha-estado.fim { color: #8b929b; }
.np-minha-detalhe { font-size: 11.5px; color: #8b929b; }
.np-minha-vender { height: 34px; justify-self: start; padding: 0 14px; }
.np-minha-confirma { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #d5d9de; }
.np-minha-confirma .np-botao, .np-minha-confirma .np-botao-sec { height: 32px; padding: 0 12px; font-size: 12.5px; }
.np-bilhete .np-bilhete-campo input, .np-bilhete .np-bilhete-campo input:focus, .np-bilhete .np-bilhete-campo input:focus-visible { outline: none; box-shadow: none; border: 0; padding: 0; background: transparent; }

/* "As minhas previsões" na caixa ao lado (MP6): o valor agora das abertas e a porta para a página. */
.np-minhas-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 2px 0 8px; }
.np-minhas-total > span:first-child { display: grid; gap: 2px; }
.np-minhas-total small { font-size: 11.5px; font-weight: 600; color: #8b929b; }
.np-minhas-total b { font-size: 26px; font-weight: 900; color: #8cc8ff; letter-spacing: -.02em; }
.np-minhas-var { font-size: 13px; font-weight: 900; padding-bottom: 4px; }
.np-minhas-var.ganho { color: #4ade80; }
.np-minhas-var.perda { color: #ff9a9a; }
.np-minhas-var.zero { color: #b9bec5; }
.np-minhas-todas { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-top: 10px; font-size: 12.5px; font-weight: 800; color: #b9bec5 !important; }
.np-minhas-todas:hover { color: #fff !important; }

/* MP8: mercado de resultados nomeados. O segundo lado não é um "não": azul em vez do rosado. */
.np-nao.nomeado { border-color: rgba(77, 171, 247, .42); background: rgba(77, 171, 247, .1); color: #cfe6ff !important; }
.np-nao.nomeado b { color: #8cc8ff; }
.np-nao.nomeado:hover { background: rgba(77, 171, 247, .16); border-color: rgba(77, 171, 247, .6); }
.np-sn-escolha .np-nao.nomeado.on { background: #4dabf7; border-color: #4dabf7; color: #0e1013 !important; }
.np-sn-escolha .np-nao.nomeado.on b { color: #0e1013; }
.np-sn-escolha .np-nao.nomeado.fechado.on { background: transparent; color: #cfe6ff !important; }
/* MP8: "Se vender logo depois", discreto, abaixo de "Se acertar, recebe". */
#npVendaLogo b { color: #d5d9de; }
#npVendaLogo b i { font-style: normal; font-weight: 700; color: #8b929b; }
#npAvisoVenda:empty { display: none; }
#npVendaLogo[hidden] { display: none; }
.np-lado-sn.nao.nomeado { background: rgba(77, 171, 247, .07); border-color: rgba(77, 171, 247, .32); }
.np-lado-sn.nao.nomeado > span:first-child b { color: #8cc8ff; }
/* Os nomes dos lados são mais compridos que "Sim" e "Não": letra menor e até duas linhas, sem sair do botão. */
.np-sn-nomes > .np-sim, .np-sn-nomes > .np-nao { font-size: 12.5px; white-space: normal; line-height: 1.15; text-align: center; overflow: hidden; padding: 0 6px; }
.np-minha-lado.nomeado { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }
.np-minha-lado.nao.nomeado { background: rgba(77, 171, 247, .14); color: #8cc8ff; }

/* ------------------------------------------------------------------ navegação aprovada em 30/09 (prancha NV7): dentro do jogo e o que fecha por mais tempo */
/* O meio círculo grande diz de quem é a chance ("Steelers"): o nome pode ir a duas linhas, sem cortar. */
.np-medidor.grande span { white-space: normal; text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* A palavra do que fechou: "Em andamento" e "Atualizando o preço" em âmbar; "Fechada" e "Em pausa", cinza. */
.np-fechado { font-size: 11px; font-weight: 800; color: var(--np-texto-2); white-space: nowrap; }
.np-fechado.andamento, .np-fechado.breve { color: var(--np-ambar); }
/* No cartão a palavra vai no selo, ao lado da categoria, onde nunca é cortada; se não couber na linha, desce. */
.np-selo.fechado { background: rgba(255, 255, 255, .08); color: var(--np-texto-2); }
.np-selo.fechado.andamento { background: rgba(255, 181, 71, .16); color: var(--np-ambar); }
.np-cartao-nome .np-cat { flex-wrap: wrap; row-gap: 4px; overflow: visible; }
.np-pe .np-nota { flex: none; }
.np-meta .np-ao-vivo.cinza { color: var(--np-texto-2); }
/* A linha de lados com nome: o nome da linha, a barra dos dois lados e cada lado com a sua chance, que é o botão de prever. */
.np-tabela-cab.np-tabela-lados, .np-lin.np-lin-lados { grid-template-columns: 150px minmax(0, 1fr) 230px 230px; gap: 12px; padding: 0 16px; }
.np-tabela-cab.np-tabela-lados span:nth-child(3) { grid-column: 3 / 5; text-align: center; }
.np-lin.np-lin-lados { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.np-lin-lados .np-lin-nome { gap: 3px; }
.np-lin-lados .np-lin-nome a { font-size: 14px; white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-barra-dupla { height: 6px; background: var(--np-azul); }
.np-barra-dupla i { background: var(--np-verde); border-radius: 3px 0 0 3px; }
.np-lin-lados.parado .np-barra-dupla { background: var(--np-linha-2); }
.np-lin-lados.parado .np-barra-dupla i { background: #5d646d; }
.np-lado-pc { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 12px; border-radius: 9px; font-family: inherit; font-size: 13px;
    min-width: 0; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.np-lado-pc span { font-weight: 700; min-width: 0; line-height: 1.15; overflow-wrap: anywhere; }
.np-lado-pc b { flex: none; font-size: 13.5px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.np-lado-pc.a { background: rgba(0, 255, 136, .1); border: 1px solid rgba(0, 255, 136, .42); color: var(--np-verde); }
.np-lado-pc.a span { color: #a6ffd4; }
.np-lado-pc.b { background: rgba(77, 171, 247, .1); border: 1px solid rgba(77, 171, 247, .42); color: #6bb8fb; }
.np-lado-pc.b span { color: #cfe6ff; }
.np-lado-pc.a:hover { background: rgba(0, 255, 136, .16); border-color: rgba(0, 255, 136, .65); }
.np-lado-pc.b:hover { background: rgba(77, 171, 247, .16); border-color: rgba(77, 171, 247, .65); }
.np-lado-pc.a.on { background: var(--np-verde); border-color: var(--np-verde); color: #0e1013; }
.np-lado-pc.b.on { background: var(--np-azul); border-color: var(--np-azul); color: #0e1013; }
.np-lado-pc.on span { color: #0e1013; }
.np-lado-pc[disabled], .np-lado-pc[disabled]:hover { cursor: default; background: var(--np-fundo-2); border-color: var(--np-linha-2); color: var(--np-texto-2); opacity: .6; }
.np-lado-pc[disabled] span { color: var(--np-texto-2); }
/* O bilhete de lados com nome ("Commanders (+1,5)"): o nome em cima e a chance embaixo, para nenhum dos dois ser cortado. */
.np-sn-escolha.np-sn-nomes button { flex-direction: column; gap: 2px; height: auto; min-height: 48px; padding: 6px 8px; font-size: 13px; white-space: normal; line-height: 1.15; text-align: center; overflow: visible; }
.np-sn-escolha.np-sn-nomes button b { font-size: 14px; }
.np-sn-escolha.np-sn-nomes button svg { margin: 0; }
/* Quem está na frente, nas caixas do lado: a chance e, embaixo, de quem ela é. */
.np-frente { display: grid; justify-items: end; gap: 1px; min-width: 0; }
.np-frente b { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.np-frente small { max-width: 112px; font-size: 10.5px; font-weight: 700; color: var(--np-texto-4); text-align: right; line-height: 1.15; }
/* Nas caixas do lado o título quebra (não corta): a linha cresce com ele. */
.np-linha-lado { padding: 7px 0; }
@media (max-width: 1100px) {
    .np-tabela-cab.np-tabela-lados, .np-lin.np-lin-lados { grid-template-columns: 130px minmax(0, 1fr) 190px 190px; gap: 10px; padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 700px) {
    .np-lin.np-lin-lados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 14px; }
    .np-lin-lados .np-lin-nome, .np-lin-lados .np-barra-dupla { grid-column: 1 / -1; }
    .np-lin-lados .np-lin-nome a { font-size: 15px; }
    .np-lado-pc { min-height: 42px; padding: 6px 10px; }
    .np-caixa-grafico-cab .np-legenda.uma { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .np-aba, .np-lado-pc, .np-ordenar-botao svg { transition: none; }
}