/*
 * Os maiores prêmios em aberto e o quadro "Acompanhando" (public/js/novo/premios.js), só para admin. A borda e o
 * selo âmbar dizem que a peça não aparece para o apostador. Classes .np-*.
 */

.np-premios, .np-quadro { --np-cartao: #1b1f24; --np-fundo: #15181c; --np-linha: #2a3037; --np-texto-2: #b9bec5; --np-texto-3: #737a83; --np-admin: #f5b942; --np-bom: #00d97a; --np-ruim: #ff5a5a; }
.np-premios[hidden], .np-quadro[hidden] { display: none; }
.np-premios, .np-quadro { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--np-admin) 45%, transparent); border-radius: 12px; background: var(--np-cartao); font-size: 13px; }
.np-premios a, .np-quadro a { color: inherit; text-decoration: none; }
.np-premios button, .np-quadro button { font: inherit; color: inherit; cursor: pointer; }
.np-premios :is(a, button):focus-visible, .np-quadro :is(a, button):focus-visible { outline: 2px solid #00ff88; outline-offset: 2px; border-radius: 6px; }

.np-selo { flex: none; padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb, var(--np-admin) 16%, transparent); color: var(--np-admin); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }

/* ------------------------------------------------------------------ cabeçalho da lista */
.np-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.np-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.np-titulo h2 { margin: 0; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.np-resumo { color: var(--np-texto-3); font-weight: 700; }
.np-filtros { display: flex; gap: 6px; margin-left: auto; }
.np-filtros button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 1px solid var(--np-linha); border-radius: 999px; background: var(--np-fundo); font-size: 12px; font-weight: 700; color: var(--np-texto-2); }
.np-filtros button[aria-pressed="true"] { border-color: rgba(0, 255, 136, .5); background: rgba(0, 255, 136, .11); color: #fff; }
.np-recolher { height: 30px; padding: 0 10px; border: 0; background: none; color: var(--np-texto-3); font-size: 12px; font-weight: 700; }
.np-filtros + .np-recolher { margin-left: 0; }
.np-cabeca > .np-recolher:only-of-type { margin-left: auto; }
.np-recolher:hover { color: #fff; }

/* ------------------------------------------------------------------ as apostas */
.np-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.np-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; border: 1px solid var(--np-linha); border-radius: 10px; background: var(--np-fundo); }
.np-item.seguida { border-color: color-mix(in srgb, var(--np-admin) 55%, transparent); }
.np-linha { display: grid; grid-template-columns: 26px minmax(150px, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr) 16px; align-items: center; gap: 12px; min-width: 0; padding: 10px 0 10px 12px; border: 0; background: none; text-align: left; }
.np-pos { font-size: 12px; font-weight: 800; color: var(--np-texto-3); font-variant-numeric: tabular-nums; }
.np-premio { display: grid; gap: 2px; min-width: 0; }
.np-premio b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; }
.np-premio small { color: var(--np-texto-3); font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-jogos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.np-jogo-simples { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.np-quem { display: grid; gap: 2px; color: var(--np-texto-2); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-quem em { font-style: normal; color: var(--np-admin); font-size: 11px; font-weight: 800; }
.np-seta { color: var(--np-texto-3); transition: transform .15s; }
.np-item.aberta .np-seta { transform: rotate(180deg); }
.np-acompanhar { margin-right: 12px; padding: 7px 14px; border-radius: 8px; background: #00ff88; color: #0b0d10 !important; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.np-acompanhar:hover { filter: brightness(1.08); }
.np-detalhe { grid-column: 1 / -1; display: grid; gap: 4px; padding: 4px 12px 12px; border-top: 1px solid var(--np-linha); }
.np-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-top: 8px; color: var(--np-texto-3); font-size: 12px; font-weight: 600; }
.np-links a, .np-q-links a { color: #00ff88; font-weight: 700; }
.np-links a:hover, .np-q-links a:hover { text-decoration: underline; }
.np-mais { justify-self: start; height: 30px; padding: 0 12px; border: 1px solid var(--np-linha); border-radius: 8px; background: var(--np-fundo); font-size: 12px; font-weight: 700; }
.np-vazio { margin: 0; color: var(--np-texto-3); }

/* ------------------------------------------------------------------ marcas de estado */
.np-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px; background: #23282e; color: var(--np-texto-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.np-tag .ne-ponto { width: 6px; height: 6px; box-shadow: none; }
.np-vivo-tag { color: #fff; }
.np-fora { color: var(--np-texto-3); }
.np-bom { color: var(--np-bom); background: color-mix(in srgb, var(--np-bom) 15%, transparent); }
.np-ruim { color: var(--np-ruim); background: color-mix(in srgb, var(--np-ruim) 14%, transparent); }
.np-neutro { color: var(--np-texto-2); }
.np-filtros .ne-ponto, .np-tag .ne-ponto { display: inline-block; border-radius: 50%; background: #ff4d5e; }
.np-filtros .ne-ponto { width: 6px; height: 6px; }
.np-vivo { display: inline-flex; align-items: center; gap: 8px; }
.np-placar { padding: 1px 6px; border-radius: 4px; background: #0f1215; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ uma seleção */
.np-perna { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(180px, auto) 92px; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid #20252b; }
.np-perna:last-child { border-bottom: 0; }
.np-perna-txt { display: grid; gap: 2px; min-width: 0; }
.np-perna-txt b { font-weight: 800; overflow-wrap: anywhere; }
.np-perna-txt small { color: var(--np-texto-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-perna-odd { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.np-perna-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.np-perna-ir { color: #00ff88 !important; font-size: 12px; font-weight: 700; text-align: right; white-space: nowrap; }
.np-perna-vivo .np-perna-txt b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%; background: #ff4d5e; }

/* ------------------------------------------------------------------ o quadro na página do jogo */
.np-quadro { margin-bottom: 14px; }
.np-q-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.np-q-codigo { font-size: 14px; font-weight: 900; letter-spacing: .02em; }
.np-q-premio { font-weight: 700; color: var(--np-texto-2); }
.np-q-premio b { font-size: 17px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.np-q-detalhe { color: var(--np-texto-3); font-weight: 600; }
.np-q-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-left: auto; font-size: 12px; }
.np-q-links button { height: 28px; padding: 0 10px; border: 1px solid var(--np-linha); border-radius: 7px; background: var(--np-fundo); font-size: 12px; font-weight: 700; }
.np-q-fim { padding: 9px 12px; border-radius: 8px; font-weight: 800; }
.np-q-grupo { display: grid; gap: 0; padding: 4px 12px 6px; border: 1px solid var(--np-linha); border-radius: 10px; background: var(--np-fundo); }
.np-q-grupo h3 { margin: 6px 0 2px; font-size: 11.5px; font-weight: 800; color: var(--np-texto-3); text-transform: uppercase; letter-spacing: .04em; }
.np-q-grupo .np-perna { grid-template-columns: minmax(0, 1fr) 52px minmax(180px, auto) 92px; }
.np-q-grupo .np-mais { margin: 6px 0 4px; }

/* ------------------------------------------------------------------ celular */
@media (max-width: 760px) {
    .np-premios, .np-quadro { padding: 12px; }
    .np-filtros { margin-left: 0; order: 3; width: 100%; }
    .np-cabeca > .np-recolher { margin-left: auto; }
    .np-item { grid-template-columns: minmax(0, 1fr); }
    .np-linha { grid-template-columns: 22px minmax(0, 1fr) 16px; grid-template-areas: "pos premio seta" ". jogos jogos" ". quem quem"; gap: 6px 10px; padding: 10px 12px; }
    .np-pos { grid-area: pos; }
    .np-premio { grid-area: premio; }
    .np-jogos { grid-area: jogos; }
    .np-quem { grid-area: quem; }
    .np-seta { grid-area: seta; }
    .np-acompanhar { justify-self: stretch; margin: 0 12px 12px; text-align: center; }
    .np-perna, .np-q-grupo .np-perna { grid-template-columns: minmax(0, 1fr) auto; }
    .np-perna-estado { grid-column: 1 / -1; }
    .np-perna-ir { grid-column: 1 / -1; text-align: left; }
    .np-q-links { margin-left: 0; width: 100%; }
}