:root { --casa: #ef4444; /* Banker */ --visitante: #3b82f6; /* Player */ --empate: #f5a623; --ok: #34d399; /* Vermelho SEMÂNTICO de erro (LOSS/alerta). NÃO é a cor de um lado do jogo — por isso não é sobrescrito quando um jogo troca --casa (ex.: Futebol Brasil = verde). */ --loss: #ef4444; --ouro: #d4af37; /* cor do botão de menu */ --bg: #05080f; --painel: #0d1522; --linha: #1b2740; --txt: #eef3fc; --sub: #7a89a6; --cor: var(--linha); /* cor da sequência atual (o body troca) */ /* Fundo "synthwave" trazido do cyber: brilhos rosa/roxo/azul sobre roxo escuro, + grade de 42px. Aplicado no , então vale pra TODAS as páginas. */ --bg-synthwave: radial-gradient(72% 60% at 6% 84%, rgba(236,72,153,0.30), transparent 55%), radial-gradient(72% 66% at 97% 14%, rgba(139,92,246,0.32), transparent 55%), radial-gradient(48% 50% at 94% 84%, rgba(59,130,246,0.22), transparent 55%), radial-gradient(65% 60% at 50% 44%, rgba(8,6,18,0.72), transparent 72%), linear-gradient(160deg,#0a0818,#07060f 55%,#0b0820); --bg-grid-line: rgba(255,255,255,0.05); } /* Fundo global (todas as páginas). O gradiente vai no e fica fixo; a grade entra num pseudo-elemento fixo por cima. O .glow (que muda de cor por jogo) continua funcionando em cima disso. */ html { background: var(--bg-synthwave); background-attachment: fixed; background-color: #07060f; min-height: 100%; } /* A GRADE DE FUNDO SAIU (a pedido do dono). Era um body::before fixo desenhando linhas de 42px em toda página. O .glow, que é o brilho colorido por jogo, continua — ele é outra camada (z-index -1) e não tem relação com a grade. */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Banner de instalação do app: desce do topo e empurra o conteúdo (insiste em toda página) */ #pwa-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; transform: translateY(-100%); transition: transform .45s cubic-bezier(.2, .85, .25, 1); background: linear-gradient(180deg, #0f1b2e, #0b1424); border-bottom: 1px solid color-mix(in srgb, var(--ok) 42%, var(--linha)); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .85); } #pwa-banner.show { transform: translateY(0); } .pwab-in { display: flex; align-items: center; gap: 12px; max-width: 660px; margin: 0 auto; padding: 10px 14px; } .pwab-logo { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; flex: none; background: #0a1120; border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--linha)); } .pwab-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .pwab-txt { flex: 1; min-width: 0; } .pwab-t1 { font-size: 14px; font-weight: 800; color: var(--txt); line-height: 1.15; } .pwab-t2 { font-size: 11.5px; color: var(--sub); margin-top: 2px; } .pwab-btn { flex: none; background: var(--ok); color: #05221a; font-weight: 800; font-size: 13px; border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ok) 80%, transparent); } .pwab-btn:active { transform: scale(.96); } .pwab-x { flex: none; background: transparent; border: 0; color: var(--sub); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; } body.pwa-push { padding-top: 74px; } /* ---------- Tendência (gráfico estilo forex) ---------- */ .tend-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .tend-badge { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, #0a1120); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--linha)); } .tend-svg { display: block; width: 100%; height: 108px; overflow: visible; } .tend-zero { stroke: var(--linha); stroke-width: 1; stroke-dasharray: 3 3; } .tend-area { stroke: none; } .tend-area.acima { fill: color-mix(in srgb, var(--casa) 26%, transparent); } .tend-area.abaixo { fill: color-mix(in srgb, var(--visitante) 26%, transparent); } .tend-linha { fill: none; stroke: var(--txt); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .tend-mm { fill: none; stroke-linejoin: round; stroke-linecap: round; } .tend-mm.rapida { stroke: var(--ok); stroke-width: 1.6; } .tend-mm.lenta { stroke: var(--sub); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .85; } .tend-legenda { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--sub); } .tend-legenda i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .tend-legenda .lg-mmr { background: var(--ok); } .tend-legenda .lg-mml { background: var(--sub); } .tend-saldo { margin-left: auto; font-size: 13px; font-weight: 900; color: var(--txt); font-variant-numeric: tabular-nums; } /* Bloqueio VIP do gráfico (sem acesso): desenho falso ofuscado + cadeado por cima */ .tend.locked { position: relative; overflow: hidden; } .tend-blur { filter: blur(4px); opacity: .5; pointer-events: none; } .tend-lock { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(7, 13, 24, .55); } /* Zoom do gráfico: − (mais rodadas) / + (menos rodadas) */ .tend-zoomer { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; } .tend-zoomer button { width: 22px; height: 22px; border-radius: 7px; cursor: pointer; line-height: 1; font-size: 14px; font-weight: 900; color: var(--sub); background: #0a1120; border: 1px solid var(--linha); } .tend-zoomer button:hover { color: var(--txt); border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); } .tend-zoomer b { font-size: 11px; font-weight: 800; color: var(--txt); min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; } /* Botão de ampliar + modo tela cheia do gráfico */ .tend-zoom { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; color: var(--sub); background: #0a1120; border: 1px solid var(--linha); } .tend-zoom:hover { color: var(--txt); border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); } .tend-zoom svg { width: 15px; height: 15px; } .tend.expandido { position: fixed; inset: 10px; z-index: 9998; margin: 0; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); } .tend.expandido .tend-svg { height: auto; flex: 1; min-height: 200px; max-height: 72vh; } .tend.expandido .tend-legenda { font-size: 13px; } body.tend-aberto { overflow: hidden; } /* ---------- Loader de navegação ("Acessando…" ao trocar de página) ---------- */ #nav-loader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 15, .72); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s ease; } #nav-loader.show { opacity: 1; pointer-events: all; } .nl-box { display: flex; flex-direction: column; align-items: center; gap: 14px; } .nl-spin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--ok); animation: nl-spin .8s linear infinite; box-shadow: 0 0 18px -4px var(--ok); } .nl-txt { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: var(--txt); text-transform: uppercase; } @keyframes nl-spin { to { transform: rotate(360deg); } } /* ---------- Splash de abertura (logo animada 5s, depois revela a página) ---------- */ #splash { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(80% 60% at 50% 38%, #0b1a2a, #05080f 70%); opacity: 1; transition: opacity .55s ease, transform .55s ease; } #splash.hide { opacity: 0; transform: scale(1.06); pointer-events: none; } html.no-splash #splash { display: none; } .sp-core { position: relative; width: 150px; height: 150px; display: grid; place-items: center; } .sp-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 58%, var(--ok) 90%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); animation: sp-spin 1.1s linear infinite; filter: drop-shadow(0 0 8px var(--ok)); } .sp-logo { width: 96px; height: 96px; border-radius: 24px; overflow: hidden; box-shadow: 0 0 44px -6px color-mix(in srgb, var(--ok) 75%, transparent); animation: sp-pop .7s cubic-bezier(.2, 1.3, .35, 1) both; /* sem "respiração" em loop: o pop de entrada basta */ } .sp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-nome { font-size: 20px; font-weight: 900; letter-spacing: 3px; color: var(--txt); opacity: 0; animation: sp-fade .8s ease .4s forwards; } .sp-frase { font-size: 12.5px; font-weight: 600; color: var(--sub); text-align: center; max-width: 280px; min-height: 17px; line-height: 1.35; padding: 0 16px; opacity: 1; transition: opacity .28s ease; margin-top: -8px; } .sp-bar { width: 170px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .sp-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: sp-load 5s linear forwards; } @keyframes sp-spin { to { transform: rotate(360deg); } } @keyframes sp-pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes sp-fade { to { opacity: 1; } } @keyframes sp-load { to { width: 100%; } } body { background: transparent; /* deixa o fundo synthwave do aparecer */ color: var(--txt); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; min-height: 100vh; padding: 20px clamp(14px, 2.4vw, 48px); margin: 0; position: relative; overflow-x: hidden; } /* Cada bloco carrega sua cor em --c; no body, --cor (que o glow/hero herdam). */ .cor-V { --c: var(--casa); --cor: var(--casa); } .cor-A { --c: var(--visitante); --cor: var(--visitante); } .cor-E { --c: var(--empate); --cor: var(--empate); } /* Fantan — leitura de 4 cores por número (1=Preto, 2=Branco, 3=Azul[=A], 4=Vermelho[=V]) */ /* Marble Race — uma cor por bolinha (1..6). Mesmo mecanismo do Fantan (cor4), só que com 6. */ /* Marble Race: as cores são as MESMAS da mesa (conferidas na faixa de aposta do jogo). */ .cor-M1 { --c: #2b2b2f; --cor: #2b2b2f; } /* 1 preto */ .cor-M2 { --c: #1e4fa8; --cor: #1e4fa8; } /* 2 azul */ .cor-M3 { --c: #1b7a4a; --cor: #1b7a4a; } /* 3 verde */ .cor-M4 { --c: #d32f2f; --cor: #d32f2f; } /* 4 vermelho */ .cor-M5 { --c: #eef2f7; --cor: #eef2f7; } /* 5 branco */ .cor-M6 { --c: #f28c00; --cor: #f28c00; } /* 6 laranja */ /* A bolinha preta é #2b2b2f: dentro da bolinha funciona, mas como COR DE TEXTO ou como tinta da página ela some no fundo escuro. Nesses dois usos ela vira um cinza legível — a bolinha em si continua preta. */ body.cor-M1 { --c: #6b7280; --cor: #6b7280; } .hero-label.cor-M1, .an-brow.cor-M1 .an-lab, .tend-badge.cor-M1 { color: #94a3b8; } /* O preto some no fundo escuro; o branco e o laranja engolem o texto branco. */ .b.cor-M1, .trio-b.cor-M1 { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); } .b.cor-M5, .trio-b.cor-M5 { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.35); } .b.cor-M5, .b.cor-M6, .trio-b.cor-M5, .trio-b.cor-M6 { color: #0a1120; text-shadow: none; } /* Sinal do Marble Race: as 3 bolinhas do trio dentro do card, cada uma na sua cor. */ .sinal-lado.trio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sinal-lado.trio .trio-b { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c); color: #fff; font-weight: 900; font-size: 20px; line-height: 1; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); } .sinal-lado.trio .trio-b.cor-M5, .sinal-lado.trio .trio-b.cor-M6 { color: #0a1120; } .hero-label.cor-M1, .hero-label.cor-M2, .hero-label.cor-M3, .hero-label.cor-M4, .hero-label.cor-M5, .hero-label.cor-M6 { color: var(--c); } .cor-P { --c: #1f2937; --cor: #1f2937; } .cor-G { --c: #16a34a; --cor: #16a34a; } /* verde da roleta (o zero) */ /* Painel de mercados da roleta (cor, coluna, dúzia, par/ímpar, alto/baixo) */ .roleta-panel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 2px; padding: 12px 16px; background: var(--painel); border: 1px solid var(--linha); border-radius: 16px; } .roleta-panel .rp-tit { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); white-space: nowrap; } .roleta-det { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; } .roleta-det .rd-item { font-size: 12.5px; font-weight: 800; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--linha); color: #eaf6ff; letter-spacing: .01em; } .roleta-det .rd-cor-V { background: rgba(239,68,68,.20); border-color: rgba(239,68,68,.55); color: #ffd7dd; } .roleta-det .rd-cor-P { background: rgba(31,41,55,.75); border-color: rgba(148,163,184,.45); color: #e2e8f0; } .roleta-det .rd-cor-G { background: rgba(22,163,74,.20); border-color: rgba(22,163,74,.55); color: #b7f5c9; } .cor-B { --c: #eef2f7; --cor: #eef2f7; } .b.cor-B { color: #0a1120; text-shadow: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); } .cor-x { --c: var(--linha); --cor: var(--linha); } /* Tempo certo no CRASH (Spaceman): entrada fixa "2x" — sem cor de lado (V/A/E), usa o roxo do crash. */ .cor-2x { --c: #7c3aed; --cor: #7c3aed; } /* Glow ambiente: assume a cor de quem está na sequência (vale pra TODOS os jogos) */ .glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(100% 62% at 50% -8%, color-mix(in srgb, var(--cor) 42%, transparent), transparent 72%), radial-gradient(60% 45% at 100% 0%, color-mix(in srgb, var(--cor) 26%, transparent), transparent 70%); transition: background .8s ease; } /* ---------- Topo ---------- */ .topo { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 20px; } .marca { display: flex; align-items: center; gap: 12px; } /* Botão ← Voltar (topo do Ao Vivo): volta pra lista de jogos sem abrir o Menu. */ .voltar-jogos { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--linha); background: var(--painel); color: var(--sub); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: border-color .15s, color .15s, background .15s, transform .08s; } .voltar-jogos:hover { border-color: var(--cor); color: var(--txt, #fff); background: rgba(255,255,255,.04); } .voltar-jogos:active { transform: scale(.92); } .live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ok); } .live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 1.5s infinite; } .live.off { color: var(--sub); } .live.off i { background: var(--sub); box-shadow: none; animation: none; } .nome { font-size: 15px; font-weight: 700; color: var(--sub); letter-spacing: .3px; } @keyframes pulse { 50% { opacity: .3; } } .relogio { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; } .hora { font-size: 26px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; } .tz { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--sub); margin-top: 3px; } /* Conteúdo centralizado: sem o teto de largura, em monitor grande tudo esticava de ponta a ponta e os selos dos cards iam parar no canto direito, longe do nome. */ .wrap { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1100px; margin: 0 auto; } /* ---------- Painel SINAL AO VIVO ---------- */ .sinal { --sc: var(--linha); position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 18px; background: linear-gradient(120deg, #0b1424, #0d1522); border: 1px solid color-mix(in srgb, var(--sc) 45%, var(--linha)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 14%, transparent), 0 16px 42px -20px color-mix(in srgb, var(--sc) 65%, transparent); transition: border-color .5s, box-shadow .5s; } .sinal.lado-V { --sc: var(--casa); } .sinal.lado-A { --sc: var(--visitante); } .sinal.lado-2x { --sc: #7c3aed; } /* Tempo certo no CRASH (Spaceman): entrada "2x" */ .sinal.estado-analisando, .sinal.estado-espera { --sc: var(--empate); } /* varredura radar (só quando está analisando/aguardando) */ .sinal-sweep { position: absolute; top: 0; left: 0; height: 100%; width: 38%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sc) 22%, transparent), transparent); transform: translateX(-120%); opacity: 0; pointer-events: none; } .sinal.estado-analisando .sinal-sweep, .sinal.estado-espera .sinal-sweep { opacity: 1; animation: sinal-sweep 2.2s linear infinite; } @keyframes sinal-sweep { to { transform: translateX(330%); } } /* anel que pulsa no núcleo quando entra sinal */ .sinal-ring { position: absolute; left: 40px; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px solid var(--sc); opacity: 0; pointer-events: none; } .sinal.estado-entrada .sinal-ring { animation: sinal-ring 1.6s ease-out infinite; } @keyframes sinal-ring { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(2.7); opacity: 0; } } /* núcleo / orbe */ .sinal-core { position: relative; z-index: 1; flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sc) 40%, #0a1120), #0a1120); border: 1px solid color-mix(in srgb, var(--sc) 60%, var(--linha)); } .sinal-orbe { width: 20px; height: 20px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 16px var(--sc); animation: sinal-pulse 1.6s ease-in-out infinite; } @keyframes sinal-pulse { 50% { transform: scale(1.35); opacity: .75; } } .sinal-seta { display: none; position: absolute; font-size: 24px; color: var(--sc); font-weight: 900; text-shadow: 0 0 12px var(--sc); } .sinal.estado-entrada .sinal-orbe { display: none; } /* A seta aparece com UM empurrãozinho e para. Antes balançava pra sempre: o anel + o pulso já dizem "entra agora", e movimento eterno vira ruído justamente na hora de decidir. */ .sinal.estado-entrada .sinal-seta { display: block; animation: sinal-nudge .9s ease-in-out 2; } @keyframes sinal-nudge { 50% { transform: translateX(4px); } } /* info central */ .sinal-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; z-index: 1; } .sinal-tag { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--sub); text-transform: uppercase; } .sinal-lado { font-size: clamp(20px, 3.4vw, 28px); font-weight: 900; letter-spacing: .5px; color: var(--txt); line-height: 1.05; } /* Máquina de escrever (mesmo modelo da Análise Pro) — cursor piscando */ .tw-cur { display: inline-block; width: 7px; height: .92em; vertical-align: -1px; background: currentColor; margin-left: 2px; opacity: .75; animation: twblink 1s steps(1) infinite; } @keyframes twblink { 50% { opacity: 0; } } .sinal.estado-entrada .sinal-lado { color: var(--sc); } .sinal-status { font-size: 12px; color: var(--sub); } .sinal-occ { font-size: 11px; font-weight: 800; letter-spacing: .3px; color: var(--ok); } /* trilha do histórico do padrão: bolinhas das últimas ocorrências (mais recente à esquerda). verde = win · amarelo = win no empate · vermelho = loss. Simples e legível no mobile. */ .sinal-hist { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .sinal-hist .sh-cap { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--sub); margin-right: 2px; } .sinal-hist .shb { width: 9px; height: 9px; border-radius: 50%; flex: none; } .sinal-hist .shb.w { background: var(--ok); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 65%, transparent); } .sinal-hist .shb.e { background: var(--empate); box-shadow: 0 0 6px color-mix(in srgb, var(--empate) 65%, transparent); } .sinal-hist .shb.l { background: var(--loss); box-shadow: 0 0 6px color-mix(in srgb, var(--loss) 65%, transparent); } /* badges à direita */ .sinal-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 1; flex: none; } .sinal-badge { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--sc) 16%, #0a1120); border: 1px solid color-mix(in srgb, var(--sc) 40%, var(--linha)); color: var(--txt); } .sinal-badge.alt { background: #0a1120; color: var(--sub); border-color: var(--linha); font-weight: 700; } .sinal-hora { font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; } /* Gale do sinal: fica mais "quente" conforme sobe (SG → G1 → G2) */ .sinal-badge.gale { min-width: 40px; text-align: center; } .sinal-badge.gale-SG { background: color-mix(in srgb, var(--ok) 16%, #0a1120); border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); color: var(--ok); } .sinal-badge.gale-G1 { background: color-mix(in srgb, var(--empate) 18%, #0a1120); border-color: color-mix(in srgb, var(--empate) 50%, var(--linha)); color: var(--empate); } .sinal-badge.gale-G2 { background: color-mix(in srgb, var(--loss) 20%, #0a1120); border-color: color-mix(in srgb, var(--loss) 55%, var(--linha)); color: #ff8a8a; animation: sinal-pulse 1s ease-in-out infinite; } .sinal-badge.prot { background: color-mix(in srgb, var(--empate) 14%, #0a1120); border-color: color-mix(in srgb, var(--empate) 40%, var(--linha)); color: var(--empate); font-weight: 700; } /* Tempo certo: card #tc-sinal reaproveita o .sinal; estado extra p/ mostrar o resultado (~4s) */ #tc-sinal.estado-resolvido { --sc: var(--ok); } #tc-sinal.estado-resolvido.resultado-empate { --sc: var(--empate); } #tc-sinal.estado-resolvido.resultado-loss { --sc: var(--loss); } #tc-sinal.estado-resolvido .sinal-status { color: var(--sc); font-weight: 800; } /* Bloqueio VIP do painel de sinal (sem acesso) */ .sinal.locked { --sc: var(--empate); } .sinal.locked .sinal-info, .sinal.locked .sinal-meta, .sinal.locked .sinal-core { filter: blur(4px); opacity: .5; pointer-events: none; } .sinal-lock { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: 18px; background: rgba(7, 13, 24, .55); } .lock-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--empate); background: color-mix(in srgb, var(--empate) 16%, #0a1120); border: 1px solid color-mix(in srgb, var(--empate) 45%, var(--linha)); } .lock-ic svg { width: 22px; height: 22px; } .lock-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .lock-txt b { font-size: 16px; font-weight: 900; color: var(--txt); } .lock-txt span { font-size: 12.5px; color: var(--sub); } .lock-btn { flex: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800; padding: 9px 20px; border-radius: 999px; color: #04120c; background: var(--ok); border: none; box-shadow: 0 0 18px color-mix(in srgb, var(--ok) 45%, transparent); transition: transform .15s; } .lock-btn:hover { transform: translateY(-1px); } @media (max-width: 560px) { .sinal-lock { flex-wrap: wrap; gap: 10px; padding: 14px; } .lock-txt { flex-basis: 55%; } } @media (max-width: 560px) { .sinal { gap: 12px; padding: 14px; } .sinal-core { width: 52px; height: 52px; } .sinal-ring { left: 33px; } .sinal-badge { font-size: 11px; padding: 3px 9px; } } /* ---------- SINAL AO VIVO — modelo HUD SCANNER (disco girando + scanline + % de acerto) ---------- */ .hud { --sc: var(--empate); position: relative; overflow: hidden; border-radius: 18px; padding: 16px 20px; background: linear-gradient(160deg, #0a1220, #0b1526); border: 1px solid color-mix(in srgb, var(--sc) 34%, var(--linha)); box-shadow: 0 20px 50px -26px color-mix(in srgb, var(--sc) 80%, transparent); transition: border-color .5s, box-shadow .5s; } .hud.lado-V { --sc: var(--casa); } .hud.lado-A { --sc: var(--visitante); } .hud.lado-2x { --sc: #7c3aed; } .hud.estado-analisando, .hud.estado-espera { --sc: var(--empate); } .hud.estado-entrada { animation: hud-glow 2s ease-in-out infinite; } /* DESFECHO segurado por 1 rodada: WIN (verde) / EMPATE (amarelo) / LOSS (vermelho) */ .hud.estado-resultado.res-win { --sc: var(--ok); } .hud.estado-resultado.res-empate{ --sc: var(--empate); } .hud.estado-resultado.res-loss { --sc: var(--loss); } .hud.estado-resultado .sinal-lado { color: var(--sc); } .hud.estado-resultado .sinal-status { color: var(--sc); font-weight: 800; } @keyframes hud-glow { 50% { box-shadow: 0 22px 56px -20px color-mix(in srgb, var(--sc) 92%, transparent); } } /* A GRADE E A VARREDURA DO HUD SAIRAM (a pedido do dono, junto com a grade de fundo das paginas). Eram o .hud::before de 26px e o .hud-scan deslizando de cima a baixo — apareciam no card de sinal, entao voltavam a aparecer no modo Lista mesmo depois de a grade do body ter sido removida. O continua no sinal.ejs, so que sem desenho nenhum; os cantos .hud-cn e o disco girando (que indicam que o robo esta analisando) continuam de pe — aquilo e informacao, nao enfeite. */ .hud-scan { display: none; } /* cantos HUD */ .hud-cn { position: absolute; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--sc) 70%, transparent); z-index: 2; } .hud-cn.tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; } .hud-cn.br { bottom: 9px; right: 9px; border-left: 0; border-top: 0; } .hud-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; } /* disco: anel conic girando + núcleo */ .hud-disc { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; } .hud-disc::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--sc), transparent 55%); animation: hud-spin 3s linear infinite; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); } @keyframes hud-spin { to { transform: rotate(360deg); } } .hud-core { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sc) 34%, #0a1120), #0a1120); border: 1px solid color-mix(in srgb, var(--sc) 45%, var(--linha)); } .hud-core .sinal-orbe { width: 15px; height: 15px; } .hud-val { display: none; font-size: 18px; font-weight: 900; color: var(--sc); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px color-mix(in srgb, var(--sc) 70%, transparent); } .hud.estado-entrada .sinal-orbe { display: none; } .hud.estado-entrada .hud-val { display: block; } .hud-info { flex: 1; min-width: 0; z-index: 1; } .hud-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 900; letter-spacing: 2px; color: var(--sc); text-transform: uppercase; } .hud-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 8px var(--sc); animation: sinal-pulse 1.4s ease-in-out infinite; } .hud .sinal-lado { font-size: clamp(21px, 3.6vw, 30px); margin: 3px 0 2px; color: var(--txt); } .hud.estado-entrada .sinal-lado { color: var(--sc); } .hud-bar { height: 6px; border-radius: 6px; margin-top: 9px; background: #0a1424; overflow: hidden; border: 1px solid var(--linha); max-width: 340px; } .hud-bar i { display: block; height: 100%; border-radius: 6px; transition: width .5s ease; background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 55%, #0a1120), var(--sc)); box-shadow: 0 0 12px var(--sc); } .hud-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .hud-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; z-index: 1; padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--sc) 20%, var(--linha)); align-self: stretch; justify-content: center; } .hud-streak { font-size: 11px; font-weight: 700; color: var(--sub); } .hud-clk { font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; } /* VIP lock no HUD */ .hud.locked .hud-row { filter: blur(4px); opacity: .5; pointer-events: none; } @media (max-width: 560px) { .hud { padding: 14px 15px; } .hud-row { gap: 13px; } .hud-disc { width: 66px; height: 66px; } .hud-core { width: 48px; height: 48px; } .hud-val { font-size: 15px; } .hud-meta { padding-left: 11px; } } /* ---------- Barra de entradas (base de padrões) ---------- */ .entradas-wrap { background: var(--painel); border: 1px solid var(--linha); border-radius: 18px; padding: 16px 18px; } .entradas-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .streak { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ok); padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--linha)); } .streak b { font-size: 14px; font-weight: 900; } .entradas { display: flex; gap: 11px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; } .entradas::-webkit-scrollbar { height: 6px; } .entradas::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 999px; } .ent { --c: var(--ok); flex: none; width: 138px; padding: 12px 13px; border-radius: 15px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, #0a1120), #0a1120); border: 1px solid color-mix(in srgb, var(--c) 24%, var(--linha)); display: flex; flex-direction: column; gap: 9px; position: relative; overflow: hidden; } .ent.loss { --c: var(--loss); } .ent.via-empate { --c: var(--empate); } .ent::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 75%, transparent); } .ent-top { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: #eef3fc; } .ent-bola { width: 12px; height: 12px; border-radius: 50%; flex: none; } .ent.lado-A .ent-bola { background: var(--visitante); } .ent.lado-V .ent-bola { background: var(--casa); } .ent.via-empate .ent-bola { background: var(--empate); box-shadow: 0 0 9px color-mix(in srgb, var(--empate) 75%, transparent); } .ent-mid { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ent-gale { font-size: 11px; font-weight: 800; color: var(--sub); letter-spacing: .5px; } .ent-badges { display: inline-flex; align-items: center; gap: 5px; } .ent-res { font-size: 11.5px; font-weight: 900; letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 17%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); } .ent-mult { font-size: 10.5px; font-weight: 900; color: #3a2a05; background: var(--empate); padding: 2px 7px; border-radius: 999px; } .ent-bot { display: flex; align-items: center; font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; letter-spacing: .2px; } /* Botão "Ver todas as entradas" (abre o painel sob demanda) */ .ent-vertodas { display: block; width: 100%; margin-top: 12px; padding: 9px; border-radius: 12px; cursor: pointer; background: color-mix(in srgb, var(--ouro) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ouro) 30%, var(--linha)); color: var(--ouro); font-weight: 800; font-size: 13px; letter-spacing: .3px; transition: background .15s, border-color .15s; } .ent-vertodas:hover { background: color-mix(in srgb, var(--ouro) 15%, transparent); } /* Painel "Ver todas" (bottom-sheet) */ .ent-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; } .ent-modal[hidden] { display: none; } .ent-modal .modal-bg { position: absolute; inset: 0; background: rgba(5, 8, 15, .62); backdrop-filter: blur(3px); } .ent-modal-box { position: relative; width: 100%; max-width: 640px; max-height: 84vh; background: var(--painel); border: 1px solid var(--linha); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; box-shadow: 0 -20px 50px -10px rgba(0, 0, 0, .6); animation: entUp .28s cubic-bezier(.2, .8, .2, 1); } @keyframes entUp { from { transform: translateY(34px); opacity: .3; } to { transform: none; opacity: 1; } } .ent-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .ent-modal-head b { font-size: 16px; font-weight: 800; } .ent-sub { font-size: 12px; color: var(--sub); font-weight: 600; margin-left: 4px; } .ent-modal-x { background: none; border: 0; color: var(--sub); font-size: 17px; cursor: pointer; padding: 4px 9px; border-radius: 9px; line-height: 1; } .ent-modal-x:hover { color: var(--txt); background: var(--linha); } /* 1 COLUNA: linhas largas, legíveis, ocupam a largura toda (não espreme/corta). */ .ent-modal-grid { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 2px 4px; -webkit-overflow-scrolling: touch; } .ent-vazio { text-align: center; color: var(--sub); font-size: 13px; padding: 34px 0; } /* Linha do painel "Ver todas" (lado · WIN/LOSS · gale · hora · confiança) */ .emc { --c: var(--ok); flex: none; /* NÃO deixar o flex-column do painel ESPREMER a linha (senão corta o texto) */ position: relative; border-radius: 12px; padding: 10px 15px 10px 16px; overflow: hidden; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, #0b1322), #0a1018 62%); border: 1px solid color-mix(in srgb, var(--c) 26%, var(--linha)); display: flex; flex-direction: column; gap: 6px; } .emc.loss { --c: var(--loss); } .emc.emp { --c: var(--empate); } .emc::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 80%, transparent); } .emc-r1 { display: flex; align-items: center; gap: 9px; } .emc-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; } .emc.lado-V .emc-dot { background: var(--casa); } .emc.lado-A .emc-dot { background: var(--visitante); } .emc.emp .emc-dot { background: var(--empate); box-shadow: 0 0 9px color-mix(in srgb, var(--empate) 75%, transparent); } .emc-label { font-weight: 800; font-size: 15px; color: #eef3fc; flex: 1; } .emc-badge { font-size: 11px; font-weight: 900; letter-spacing: .4px; padding: 3px 11px; border-radius: 999px; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 42%, transparent); } .emc-mult { font-size: 10.5px; font-weight: 900; color: #3a2a05; background: var(--empate); padding: 2px 7px; border-radius: 999px; margin-left: 6px; flex: none; } .emc-r2 { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; } .emc-gale { font-weight: 800; letter-spacing: .5px; color: #aab7cc; background: #141d30; padding: 2px 8px; border-radius: 6px; } .emc-conf { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--ouro); } .emc-conf::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 6px var(--ouro); } .ent-modal-foot { display: flex; justify-content: center; padding-top: 12px; } .ent-mais { padding: 9px 22px; border-radius: 999px; cursor: pointer; color: var(--ouro); font-weight: 800; font-size: 13px; background: color-mix(in srgb, var(--ouro) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ouro) 35%, var(--linha)); } body.ent-open { overflow: hidden; } /* ---------- Pós Loss (snapshot 1h) ---------- */ .pos-los { background: var(--painel); border: 1px solid var(--linha); border-radius: 18px; padding: 16px 18px; } .pos-los-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pos-los-hora { font-size: 11px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; } .pos-los-corpo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .pos-los-num { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pos-los-num b { font-size: 30px; font-weight: 900; color: var(--txt); line-height: 1; } .pos-los-num span { font-size: 12px; color: var(--sub); font-weight: 700; } .pos-los-num small { flex-basis: 100%; font-size: 11px; color: var(--sub); } .pos-los-num small b { font-size: 11px; font-weight: 800; color: var(--sub); } .pos-los-faixa { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 6px 13px; border-radius: 999px; background: color-mix(in srgb, var(--sub) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sub) 40%, var(--linha)); color: var(--sub); } .pos-los-faixa.nivel-bom { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, var(--linha)); } .pos-los-faixa.nivel-atencao { color: var(--empate); background: color-mix(in srgb, var(--empate) 16%, transparent); border-color: color-mix(in srgb, var(--empate) 45%, var(--linha)); } .pos-los-faixa.nivel-ruim { color: var(--loss); background: color-mix(in srgb, var(--loss) 16%, transparent); border-color: color-mix(in srgb, var(--loss) 45%, var(--linha)); } /* Aviso de 3 loss seguidos: verde = nenhum (bom), vermelho = teve (alerta) */ .pos-los-tres { font-size: 12.5px; font-weight: 700; padding: 9px 12px; border-radius: 11px; margin-bottom: 12px; border: 1px solid var(--linha); background: color-mix(in srgb, var(--sub) 10%, transparent); color: var(--sub); } .pos-los-tres.tres-nao { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, var(--linha)); } .pos-los-tres.tres-sim { color: #ff8a8a; background: color-mix(in srgb, var(--loss) 15%, transparent); border-color: color-mix(in srgb, var(--loss) 45%, var(--linha)); } .pos-los-tres b { font-weight: 900; } .pos-los-casos { display: flex; flex-direction: column; gap: 6px; } .plc { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: #0a1120; border: 1px solid var(--linha); border-radius: 10px; font-size: 12px; color: var(--sub); } .plc-bola { width: 9px; height: 9px; border-radius: 50%; flex: none; } .plc-bola.lado-V { background: var(--casa); } .plc-bola.lado-A { background: var(--visitante); } .plc-gale { font-weight: 800; color: var(--txt); letter-spacing: .5px; } .plc-label { flex: 1; font-weight: 700; color: var(--txt); } .plc-hora { font-variant-numeric: tabular-nums; } .pos-los-vazio { font-size: 12px; color: var(--sub); padding: 10px 0; text-align: center; } /* Bloqueio VIP do card Pós Loss (sem acesso): conteúdo ofuscado + cadeado por cima */ .pos-los.locked { position: relative; overflow: hidden; } .pos-los-blur { filter: blur(4px); opacity: .5; pointer-events: none; } .pos-los-lock { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(7, 13, 24, .55); } /* ---------- Números que puxam cores (tempo real) ---------- */ .puxa-cores { background: var(--painel); border: 1px solid var(--linha); border-radius: 18px; padding: 16px 18px; } .puxa-cores-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } /* 2 cards por linha (maiores) com ALTURA FIXA + scroll interno (não estica a tela toda) */ /* Faixa horizontal (igual ao histórico de entradas): quadrados lado a lado, arrasta pro lado. */ .puxa-cores-grid { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .puxa-cores-grid::-webkit-scrollbar { height: 6px; } .puxa-cores-grid::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 999px; } .puxa-cores-grid::-webkit-scrollbar-track { background: transparent; } .pc-card { flex: none; width: 160px; background: #0a1120; border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .pc-num { font-size: 13px; color: var(--sub); font-weight: 700; } .pc-num b { font-size: 18px; color: var(--txt); font-weight: 900; } .pc-bolas { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pc-bola { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; opacity: .55; } .pc-bola.puxa { opacity: 1; } .pc-dot { width: 12px; height: 12px; border-radius: 50%; } .pc-bola.cor-b .pc-dot { background: var(--casa); } .pc-bola.cor-p .pc-dot { background: var(--visitante); } .pc-bola.cor-t .pc-dot { background: var(--empate); } .pc-lbl { font-size: 11px; font-weight: 800; color: var(--sub); letter-spacing: .5px; } .pc-qtd { font-size: 16px; font-weight: 800; color: var(--txt); } .pc-bola.puxa .pc-qtd { color: var(--ok); font-weight: 900; } .pc-rodape { font-size: 12px; color: var(--sub); text-align: center; border-top: 1px solid var(--linha); padding-top: 9px; } .pc-rodape b { color: var(--txt); font-weight: 800; } .puxa-cores-vazio { grid-column: 1 / -1; font-size: 12px; color: var(--sub); padding: 10px 0; text-align: center; } /* Bloqueio VIP do card Números que puxam cores (sem acesso): conteúdo ofuscado + cadeado por cima */ .puxa-cores.locked { position: relative; overflow: hidden; } .puxa-blur { filter: blur(4px); opacity: .5; pointer-events: none; } .puxa-lock { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(7, 13, 24, .55); } /* ---------- Hero ---------- */ /* PC: a sequência estica e o "último" fica à direita (preenche a linha). No mobile vira faixa deslizante (ver @media 560). */ /* Faixa Hero + Pós Loss: lado a lado no desktop, desliza no celular (snap). */ .hrow { display: flex; gap: 12px; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain; padding-bottom: 2px; max-width: 100%; } .hrow::-webkit-scrollbar { height: 6px; } .hrow::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 999px; } .hrow > .hero, .hrow > .pos-los { flex: 1 1 340px; min-width: min(92%, 340px); scroll-snap-align: start; margin: 0; } .hero { display: flex; gap: 14px; align-items: stretch; overflow: hidden; } .hero-seq { flex: 1; min-width: 0; display: flex; align-items: center; gap: 20px; padding: 26px 28px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--cor) 24%, transparent), transparent 65%), var(--painel); border: 1px solid color-mix(in srgb, var(--cor) 50%, var(--linha)); box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--cor) 35%, transparent); } .hero-num { flex: none; font-size: clamp(52px, 12vw, 104px); font-weight: 900; line-height: .82; color: var(--cor); letter-spacing: -3px; text-shadow: 0 0 34px color-mix(in srgb, var(--cor) 60%, transparent); } .hero-num em { font-size: .5em; font-style: normal; opacity: .7; } /* min-width:0 deixa a coluna encolher; sem isso a label ("Empate"/"Visitante") empurrava e estourava o card no celular. A label pode quebrar em vez de vazar. */ .hero-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .hero-label { font-size: clamp(22px, 5.4vw, 34px); font-weight: 800; letter-spacing: -.5px; line-height: 1.05; overflow-wrap: anywhere; word-break: break-word; } .hero-sub { font-size: 13px; color: var(--sub); } .ult { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 200px; padding: 18px 20px; border-radius: 22px; background: var(--painel); border: 1px solid var(--linha); border-top: 3px solid var(--c); } .ult-tit { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sub); } .ult-placar { display: flex; align-items: baseline; gap: 10px; } .ult-placar b { font-size: 42px; font-weight: 900; letter-spacing: -1px; } .ult-placar .vis { color: var(--visitante); } .ult-placar .casa { color: var(--casa); } .ult-placar i { color: var(--sub); font-style: normal; font-size: 18px; } .ult-venceu { font-size: 13px; font-weight: 700; color: var(--c); } /* Jogos com só o lado vencedor (Baccarat): esconde o "× perdedor" */ .ult-placar.so-vencedor i, .ult-placar.so-vencedor .casa { display: none; } /* ---------- Painéis ---------- */ .linha { display: grid; grid-template-columns: 1fr; gap: 14px; } .painel { background: var(--painel); border: 1px solid var(--linha); border-radius: 20px; padding: 18px; } .painel-tit { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sub); margin-bottom: 16px; } .painel-tit small { font-weight: 600; letter-spacing: .5px; opacity: .7; margin-left: 4px; } /* Distribuição — medidor share tri-cor */ .share { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: #0a1120; margin-bottom: 18px; } .seg { height: 100%; min-width: 0; transition: width .6s ease; display: flex; align-items: center; justify-content: center; overflow: hidden; } .seg b { font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; } .seg.casa { background: var(--casa); } .seg.visitante { background: var(--visitante); } .seg.empate { background: var(--empate); } .legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; } .lg { display: inline-flex; align-items: center; gap: 6px; color: var(--sub); } .lg i { width: 9px; height: 9px; border-radius: 3px; } .lg b { color: var(--txt); font-weight: 800; } .lg small { color: var(--sub); font-size: 11px; } .lg.casa i { background: var(--casa); } .lg.casa b { color: var(--casa); } .lg.visitante i { background: var(--visitante); } .lg.visitante b { color: var(--visitante); } .lg.empate i { background: var(--empate); } .lg.empate b { color: var(--empate); } /* Médias (card Força) */ .medias { display: flex; flex-direction: column; } .med { display: flex; flex: 1; align-items: stretch; min-height: 90px; } .med-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .med-item + .med-item { border-left: 1px solid var(--linha); } .med-item b { font-size: 38px; font-weight: 900; letter-spacing: -1px; } .med-item span { font-size: 11px; color: var(--sub); text-transform: uppercase; letter-spacing: .8px; } .med-item.ganha b { color: var(--ok); } .med-item.perde b { color: var(--sub); } /* ---------- Bead road (grade estilo cassino) ---------- */ .bead { display: grid; grid-template-rows: repeat(6, 1fr); grid-auto-flow: column; grid-auto-columns: 34px; gap: 7px; justify-content: center; align-items: center; } .b { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); line-height: 1; } .b.atual { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c), 0 0 12px var(--c); animation: pulse 1.4s infinite; } /* Toque alterna letra (B/P/T) ↔ número (placar). Número em fonte menor pra caber 2 dígitos. */ .bead { cursor: pointer; } .b .b-n { display: none; font-size: 11.5px; } .bead.mostra-num .b .b-l { display: none; } .bead.mostra-num .b .b-n { display: inline; } /* ---------- Bead + Empates lado a lado ---------- */ .road-empates { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: stretch; } .road-empates.road-solo { grid-template-columns: 1fr; } /* leitura única de 4 cores (Fantan) ocupa a linha toda */ .road-empates .road { min-width: 0; } /* Barra de proporção de 4 fatias (Fantan): cada segmento pega a cor do número */ .share4 .seg { background: var(--c); } .share4 .seg.cor-B b { color: #0a1120; text-shadow: none; } .chip.cor-B .chip-bola { box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); } /* bolinha branca ganha contorno */ .road-empates .bead { justify-content: safe center; overflow-x: auto; padding-bottom: 4px; } .empates { display: flex; flex-direction: column; min-width: 0; } .emp-lista { display: flex; flex-direction: column; overflow-y: auto; max-height: 250px; padding-right: 4px; scrollbar-width: thin; } .emp-lista::-webkit-scrollbar { width: 5px; } .emp-lista::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 999px; } .emp-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--linha); } .emp-row:last-child { border-bottom: none; } .emp-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #04120c; background: var(--empate); box-shadow: 0 0 10px color-mix(in srgb, var(--empate) 45%, transparent); } .emp-hora { flex: 1; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; } .emp-mult { font-size: 14px; font-weight: 900; color: var(--empate); } .emp-vazio { color: var(--sub); font-size: 13px; padding: 10px 2px; } @media (max-width: 720px) { /* celular: bead + empates viram faixa deslizante (arrasta pro lado), 1 scroll só */ .road-empates { display: flex; gap: 12px; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain; max-width: 100%; padding-bottom: 2px; } .road-empates::-webkit-scrollbar { height: 6px; } .road-empates::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 999px; } .road-empates > .road, .road-empates > .empates { flex: 0 0 92%; min-width: 92%; scroll-snap-align: start; } .road-empates .bead { justify-content: center; overflow-x: visible; } /* Fantan (leitura única) ocupa a linha toda, sem faixa */ .road-empates.road-solo { display: block; } .road-empates.road-solo > .road { min-width: 0; } .emp-lista { max-height: 220px; } } /* Painel bloqueado (empates e afins): conteúdo borrado + cadeado VIP */ .painel.locked { position: relative; overflow: hidden; } .emp-blur { filter: blur(4px); opacity: .5; pointer-events: none; } .painel-lock { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 12px; background: rgba(7, 13, 24, .55); } .painel-lock .lock-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--empate); background: color-mix(in srgb, var(--empate) 16%, #0a1120); border: 1px solid color-mix(in srgb, var(--empate) 45%, var(--linha)); } .painel-lock .lock-ic svg { width: 22px; height: 22px; } .painel-lock b { font-size: 15px; font-weight: 900; color: var(--txt); letter-spacing: .3px; } .painel-lock small { font-size: 12px; color: var(--sub); font-weight: 600; } /* ---------- Histórico ao vivo (bolinhas coloridas: número dentro + hora embaixo) ---------- */ /* Card "Último": destaca o resultado mais recente no topo */ .ultimo-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; margin-bottom: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, #0a1120), #0a1120); border: 1px solid color-mix(in srgb, var(--c) 34%, var(--linha)); } .ultimo-card[hidden] { display: none; } .ultimo-lbl { font-size: 12.5px; font-weight: 700; color: var(--sub); } .ultimo-bola { width: 54px; height: 54px; border-radius: 50%; background: var(--c); flex: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); } .ultimo-card.cor-E .ultimo-bola { box-shadow: 0 0 0 3px color-mix(in srgb, var(--empate) 60%, transparent), 0 2px 8px rgba(0, 0, 0, .4); } .ultimo-card.cor-B .ultimo-bola .chip-placar { color: #0a1120; } .ultimo-card.cor-M5 .ultimo-bola .chip-placar { color: #0a1120; } /* Marble branco: número escuro */ .ultimo-bola .chip-placar { font-size: 20px; } .ultimo-bola .chip-placar:has(i) { font-size: 15px; } .ultimo-mult { font-size: 11px; font-weight: 800; color: #3a2a05; line-height: 1.35; padding: 1px 8px; border-radius: 999px; background: var(--empate); } .ultimo-hora { margin-left: auto; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; } /* Grade de bolinhas */ .feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 16px 8px; justify-items: center; } .chip { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; } .chip-bola { position: relative; width: 50px; height: 50px; border-radius: 50%; background: var(--c); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: box-shadow .15s, transform .15s; } .chip-placar { color: #fff; font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: .2px; } .chip-placar:has(i) { font-size: 13.5px; letter-spacing: 0; } .chip-placar i { font-style: normal; font-weight: 600; font-size: 10px; opacity: .75; margin: 0 1px; } .chip.cor-B .chip-placar { color: #0a1120; } /* Branco (Fantan): número escuro */ .chip.cor-M5 .chip-placar { color: #0a1120; } /* Marble branco (5): número escuro */ .chip.cor-M5 .chip-bola { box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35); } /* contorno na bolinha branca */ .chip.cor-E .chip-bola { box-shadow: 0 0 0 3px color-mix(in srgb, var(--empate) 60%, transparent), 0 2px 6px rgba(0, 0, 0, .35); } .chip-mult { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: #3a2a05; line-height: 1.3; white-space: nowrap; padding: 0 6px; border-radius: 999px; background: var(--empate); border: 2px solid #0a1120; } .chip-hora { font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; letter-spacing: .2px; } /* Botão "Limpar filtro" (aparece só quando há um resultado selecionado) */ .limpar-filtro { display: block; margin: 0 auto 14px; padding: 7px 16px; border-radius: 999px; cursor: pointer; background: color-mix(in srgb, #38bdf8 12%, transparent); border: 1px solid color-mix(in srgb, #38bdf8 45%, var(--linha)); color: #7dd3fc; font-weight: 700; font-size: 13px; letter-spacing: .2px; transition: background .15s, border-color .15s; } .limpar-filtro:hover { background: color-mix(in srgb, #38bdf8 20%, transparent); } .limpar-filtro[hidden] { display: none; } /* Filtro ligado: escurece os não-selecionados, deixa só os iguais acesos */ .feed-grid.filtrando .chip:not(.marcado) { opacity: .2; } .feed-grid.filtrando .chip:not(.marcado) .chip-bola { box-shadow: none; } /* Resultado selecionado (todos os iguais ao que foi tocado) — anel ciano em destaque */ .chip.marcado .chip-bola { box-shadow: 0 0 0 3px #38bdf8, 0 0 16px color-mix(in srgb, #38bdf8 55%, transparent); transform: translateY(-2px); } .chip.cor-E.marcado .chip-bola { box-shadow: 0 0 0 3px #38bdf8, 0 0 16px color-mix(in srgb, #38bdf8 55%, transparent); } .chip.marcado .chip-hora { color: #7dd3fc; font-weight: 700; } /* Cabeçalho do bloco de resultados: título + paginação lado a lado */ .lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } /* Extensor "ver mais / recolher" */ .extensor { display: flex; justify-content: center; margin-top: 14px; } .extensor:empty { margin-top: 0; } .ext-btn { padding: 9px 22px; border-radius: 999px; cursor: pointer; background: #0a1120; border: 1px solid var(--linha); color: var(--sub); font-weight: 700; font-size: 13px; letter-spacing: .3px; transition: border-color .15s, color .15s; } .ext-btn:hover { border-color: var(--cor); color: var(--txt); } /* ---------- Menu lateral (sidebar desktop + drawer mobile), estilo cyber ---------- */ .side { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 1000; display: flex; flex-direction: column; padding: 22px 14px; /* Vidro (glass): translúcido + blur, deixa o fundo synthwave brilhar por trás. */ background: radial-gradient(85% 220px at 50% 0%, color-mix(in srgb, var(--ok) 14%, transparent), transparent 72%), linear-gradient(180deg, rgba(15, 23, 46, .72), rgba(8, 10, 24, .88)); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-right: 1px solid color-mix(in srgb, var(--ok) 22%, rgba(255, 255, 255, .06)); overflow-y: auto; overflow-x: hidden; box-shadow: 10px 0 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05); } .side::-webkit-scrollbar { width: 4px; } .side::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ok) 25%, transparent); border-radius: 2px; } .side-logo { display: flex; align-items: center; gap: 11px; margin: 4px 6px 26px; } .side-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; } .side-brand:hover { opacity: .85; } .side-mark { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 18%, #0a1120); border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--linha)); color: var(--ok); } .side-mark svg { width: 19px; height: 19px; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ok) 70%, transparent)); } .side-mark-img { padding: 0; overflow: hidden; background: #0a1120; } .side-mark-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .side-nome { font-size: 18px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; line-height: 1.05; background: linear-gradient(90deg, #fff, var(--ok)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .side-nome small { display: block; font-size: 8.5px; letter-spacing: 2px; font-weight: 800; color: var(--sub); -webkit-text-fill-color: var(--sub); margin-top: 2px; } .side-x { display: none; margin-left: auto; background: none; border: none; color: var(--sub); cursor: pointer; padding: 4px; } .side-x svg { width: 22px; height: 22px; } .side-sec { margin: 18px 0 8px; padding: 0 10px; display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--sub); } .side-sec::before { content: ""; width: 15px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ok), transparent); flex: none; } .nav { position: relative; display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 8px 11px; margin: 3px 0; border-radius: 12px; color: color-mix(in srgb, var(--txt) 72%, transparent); text-decoration: none; font-size: 13.5px; font-weight: 600; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .18s ease; } .nav:hover { transform: translateX(3px); } .nav .nav-ic { transition: all .18s ease; } .nav:hover .nav-ic { transform: scale(1.06); } .nav-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); transition: all .2s; } .nav-ic svg { width: 17px; height: 17px; } .nav:hover { background: color-mix(in srgb, var(--ok) 7%, transparent); color: var(--txt); border-color: color-mix(in srgb, var(--ok) 16%, var(--linha)); } .nav:hover .nav-ic { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 32%, var(--linha)); } .nav:hover .nav-ic svg { color: var(--ok); } .nav.active { background: linear-gradient(100deg, color-mix(in srgb, var(--ok) 18%, transparent), transparent); color: var(--txt); border-color: color-mix(in srgb, var(--ok) 30%, var(--linha)); font-weight: 800; } .nav.active { box-shadow: inset 0 0 20px color-mix(in srgb, var(--ok) 12%, transparent); } .nav.active::before { content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 4px; height: 26px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 50%, #fff)); box-shadow: 0 0 16px var(--ok); } .nav.active .nav-ic { background: color-mix(in srgb, var(--ok) 20%, transparent); border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); } .nav.active .nav-ic svg { color: var(--ok); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ok) 60%, transparent)); } /* Destaque (caixa + varredura neon) SÓ quando o Ao Vivo é a página ativa. Fora dele, o item fica normal — só mantém a tag LIVE + bolinha pulsando. */ /* A varredura neon que corria em loop aqui foi removida: o item ativo já se identifica pela caixa, pela cor e pela tag LIVE — o brilho passando era ruído (e animava 'left', que força recálculo de layout, o pior tipo de animação). */ .nav.featured { overflow: hidden; } .nav-tag { margin-left: auto; font-size: 8.5px; font-weight: 800; letter-spacing: 1px; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 22%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 50%, var(--linha)); color: var(--ok); } /* ANÁLISE PRO (admin): nome BRILHANDO em dourado (glow pulsante) + badge PRO. */ .nav-pro .nav-ic { background: color-mix(in srgb, var(--ouro) 16%, transparent); border-color: color-mix(in srgb, var(--ouro) 40%, var(--linha)); } .nav-pro .nav-ic svg { color: var(--ouro); } .nav-pro:hover { background: color-mix(in srgb, var(--ouro) 8%, transparent); border-color: color-mix(in srgb, var(--ouro) 38%, var(--linha)); } /* Brilho VARRENDO o texto — escolha do dono, o item PRO tem que chamar atenção. Antes eram DUAS animações empilhadas: proShine (varredura) + proGlow (pulso do brilho). Ficou só a varredura, que anima 'background-position' — não mexe em layout nem repinta a página. O glow virou 'filter' FIXO: era ele o caro (drop-shadow animado a cada quadro). */ .nav-pro .nav-pro-txt { font-weight: 900; letter-spacing: .5px; background: linear-gradient(90deg, #f7e39b, var(--ouro) 30%, #fff6cf 50%, var(--ouro) 70%, #f7e39b); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ouro) 50%, transparent)); animation: proShine 3.2s linear infinite; } @keyframes proShine { to { background-position: 200% center; } } .nav-tag.pro { background: color-mix(in srgb, var(--ouro) 22%, transparent); border-color: color-mix(in srgb, var(--ouro) 55%, var(--linha)); color: var(--ouro); text-shadow: 0 0 8px color-mix(in srgb, var(--ouro) 60%, transparent); } /* Bolinha "LIVE" pulsando, colada na tag do item Ao Vivo. */ .nav-live { margin-left: auto; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.3s infinite; } .nav-live + .nav-tag { margin-left: 8px; } .side-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 15px 10px 2px; border-top: 1px solid var(--linha); font-size: 12px; color: var(--sub); } .side-status { display: inline-flex; align-items: center; gap: 8px; } .side-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 16%, transparent), 0 0 8px var(--ok); animation: pulse 1.6s infinite; } /* Perfil no menu (Conta) */ .side-perfil { display: flex; align-items: center; gap: 11px; padding: 10px 11px; margin: 3px 0; border-radius: 12px; background: color-mix(in srgb, var(--ok) 6%, transparent); border: 1px solid var(--linha); } .sp-ava { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 16%, #0a1120); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--linha)); color: var(--ok); } .sp-ava svg { width: 18px; height: 18px; } .sp-info { display: flex; flex-direction: column; min-width: 0; } .sp-info b { font-size: 14px; font-weight: 800; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-info small { font-size: 11px; font-weight: 700; } .sp-info small.adm { color: var(--empate); } .sp-info small.ok { color: var(--ok); } .sp-info small.exp { color: #ff8a8a; } .sp-info small.sessao { color: var(--sub); margin-top: 2px; font-variant-numeric: tabular-nums; } .sp-info small.sessao b { color: var(--txt); font-weight: 800; } .sp-info small.sessao.acabando { color: #ff8a8a; animation: pulse 1.2s infinite; } .sp-info small.sessao.acabando b { color: #ff8a8a; } .nav-sair { color: #ff8a8a; } .nav-sair:hover { background: color-mix(in srgb, var(--loss) 8%, transparent); border-color: color-mix(in srgb, var(--loss) 30%, var(--linha)); } .nav-sair .nav-ic svg { color: #ff8a8a; } /* Botão flutuante + overlay + barra inferior: só no mobile (escondidos por padrão) */ .menu-btn, .menu-overlay, .botnav, .bn-fab { display: none; } /* Menu de rodapé (botnav) em TODAS as larguras — inclusive PC. A barra lateral vira drawer escondido (não usamos mais no desktop; navegação é toda pela barra inferior). */ @media all { .side { width: 280px; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); } body.menu-open .side { transform: translateX(0); } .side-x { display: flex; } .menu-btn { display: inline-flex; align-items: center; justify-content: center; position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: calc(50% - 29px); width: 58px; height: 58px; border-radius: 50%; z-index: 1001; cursor: pointer; color: #3a2905; background: radial-gradient(130% 105% at 32% 24%, rgba(255,255,255,.78), rgba(255,255,255,0) 44%), linear-gradient(150deg, #f8d67c 0%, #e2ad42 50%, #b17d22 100%); border: 1px solid rgba(255, 240, 200, .55); box-shadow: 0 12px 26px -6px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.4), inset 0 1.5px 1px rgba(255,255,255,.75), inset 0 -4px 9px rgba(120,78,12,.55); transition: transform .15s, box-shadow .2s, opacity .2s; } /* glow dourado suave atrás do botão — FIXO (o pulso infinito virava respiração eterna num botão que está sempre na tela). O keyframes fica: o pontinho de aviso ainda usa. */ .menu-btn::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--ouro) 55%, transparent), transparent 70%); filter: blur(7px); opacity: .6; } @keyframes fabPulse { 0%,100% { opacity: .4; transform: scale(.94); } 50% { opacity: .85; transform: scale(1.1); } } .menu-btn svg { width: 25px; height: 25px; } .menu-btn:active { transform: scale(.93); } body.menu-open .menu-btn { opacity: 0; pointer-events: none; transform: scale(.9); } .menu-overlay { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(5, 8, 15, .55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s; } body.menu-open .menu-overlay { opacity: 1; pointer-events: auto; } /* A barra inferior substitui a bolinha flutuante no mobile */ .menu-btn { display: none !important; } /* espaço reservado no fim da página: a faixa é fina agora (só letreiro), mas o botão flutuante sobe acima dela — a folga considera o botão, não a faixa. */ body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* ---------- Faixa inferior — LETREIRO (era a barra de atalhos) ---------- Os atalhos saíram: agora vivem no menu lateral. Esta faixa é a casa dos avisos do /editar (banner e temporizador correm por cima dela) e, em silêncio, do raio de descanso. */ .botnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 992; min-height: 42px; padding: 0 8px calc(0px + env(safe-area-inset-bottom)); background: radial-gradient(120% 82% at 50% 0%, color-mix(in srgb, var(--ouro) 15%, transparent), transparent 62%), linear-gradient(180deg, rgba(10, 14, 26, .82), rgba(6, 9, 18, .97)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); /* Fita LED dourada no topo (gradiente na borda) + glow que pulsa feito neon */ border-top: 2px solid transparent; border-image: linear-gradient(90deg, color-mix(in srgb, var(--ouro) 8%, transparent) 0%, #f8d67c 28%, #ffe9a8 50%, #f8d67c 72%, color-mix(in srgb, var(--ouro) 8%, transparent) 100%) 1; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .6), 0 -2px 16px -3px color-mix(in srgb, var(--ouro) 50%, transparent); /* glow do rodapé agora é FIXO (era um loop infinito só decorativo) */ justify-content: center; align-items: center; flex-wrap: nowrap; overflow: hidden; /* o raio corre por dentro, sem criar barra de rolagem */ transition: transform .3s ease; } /* Em silêncio a faixa fica VAZIA mesmo (sem enfeite): é só a base dourada que ancora o botão do menu e recebe os avisos quando existirem. */ .botnav::-webkit-scrollbar { display: none; } .botnav a, .botnav button { flex: 0 0 auto; min-width: 58px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; color: var(--sub); font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .2px; cursor: pointer; padding: 2px 9px; border-radius: 12px; text-decoration: none; position: relative; transition: color .15s, transform .12s; } .botnav a span, .botnav button span { white-space: nowrap; } .botnav .bn-sair { color: #ff8a8a; } .botnav svg { width: 20px; height: 20px; transition: filter .15s; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ouro) 22%, transparent)); } .botnav a:active, .botnav button:active { transform: scale(.9); } .botnav .on { color: var(--ouro); text-shadow: 0 0 8px color-mix(in srgb, var(--ouro) 55%, transparent); } .botnav .on svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ouro) 85%, transparent)) drop-shadow(0 0 3px #ffe9a8); } /* traço indicador do item ativo */ .botnav .on::before { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 999px; background: var(--ouro); box-shadow: 0 0 8px color-mix(in srgb, var(--ouro) 80%, transparent); } /* pontinho "ao vivo" */ .botnav-live { position: absolute; top: 3px; left: calc(50% + 8px); width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 6px #ef4444; animation: fabPulse 1.6s ease-in-out infinite; } /* (o antigo botão Menu quadrado dourado saiu daqui: o Menu virou o botão flutuante central, e este slot da direita passou a ser a Análise PRO — regras de .bn-pro mais abaixo.) */ body.menu-open .botnav { transform: translateY(110%); } /* Vão central na barra (só admin) — reserva o espaço do botão flutuante pra ele NÃO sobrepor os outros itens. */ /* align-items:flex-end alinha os itens pela BASE → todos os labels ficam na mesma linha, mesmo o Menu (ícone maior) — o ícone dele sobe, o texto fica alinhado com os outros. */ .botnav .bn-side { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 2px; } .botnav .bn-side > a, .botnav .bn-side > button { flex: 1 1 0; min-width: 0; padding: 2px 3px; justify-content: flex-end; } .botnav .bn-gap { flex: 0 0 auto; width: 60px; align-self: stretch; pointer-events: none; } /* Borda superior da barra: filete dourado FIXO. Antes era um "raio" correndo em loop infinito — puro enfeite, repintava a barra o tempo todo e não dizia nada ao cliente. */ .botnav::after { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ouro) 70%, transparent) 35%, #ffe9a8 50%, color-mix(in srgb, var(--ouro) 70%, transparent) 65%, transparent); } /* Botão flutuante CENTRAL: hoje é o MENU (trocou de lugar com a Análise Pro). Fica no VÃO central (não cobre os outros), saliente pra cima. É