/* ============================================================================= * BOLAS DE BINGO — a cara das dezenas na tela do cliente (rota /v/{token}) * ----------------------------------------------------------------------------- * Por que este arquivo existe e não é Tailwind: * * 🔑 O CSS do painel é compilado pelo Vite, e nenhuma máquina daqui tem * `node_modules` para rebuildar. Classe nova de Tailwind no Blade não vira * nada em produção — a tela sai quebrada, sem erro nenhum. Então o visual * novo mora aqui, em CSS de verdade, com classes próprias (`.bola-dezena`). * * 🔑 Ele entra pela URL versionada (`App\Support\Arte::url(...)`) porque a * hospedagem guarda uma cópia gzipada do estático por SETE DIAS: arquivo * trocado sem trocar a URL não chega no celular do cliente. * * 🔑 A REGRA DE OURO DAQUI: quem decide a COR de cada estado continua sendo o * Blade/Alpine, pelo atributo `style` (inline). Inline vence folha de estilo, * então este arquivo NUNCA declara a cor de fundo do estado marcado — ele só * desenha o VOLUME da esfera com camadas TRANSPARENTES (`background-image`), * que se acomodam por cima de qualquer `background-color` que chegar. Assim a * dezena escolhida continua exatamente na cor de hoje (--ct-primaria na * grade do filtro, --ct-destaque dentro da cartela), só que redonda. * * ⚠️ Nada aqui pode mexer em tamanho de célula, gap ou número de colunas: a * grade é a mesma de sempre (`grid-cols-10 gap-1`), é troca de aparência. * ========================================================================== */ /* ----------------------------------------------------------------------------- * A BOLA * -------------------------------------------------------------------------- */ .bola-dezena { position: relative; /* Redonda de verdade e travada em 1:1 — mesmo que a célula da grade estique, ela nunca vira ovo. */ aspect-ratio: 1 / 1; border-radius: 50%; padding: 0; /* O corpo da bola. É só a BASE: o estado marcado troca este `background-color` pelo `style` inline e o brilho continua por cima. */ background-color: #f2f3f7; /* O volume da esfera, em camadas translúcidas (a primeira fica por cima): 1) o brilho especular no alto à esquerda, como nas bolas de sorteio; 2) o claro no miolo virando cinza na borda de baixo, que é o que engana o olho e faz a coisa parecer uma esfera e não um disco. */ background-image: radial-gradient( ellipse 44% 36% at 31% 24%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 100% ), radial-gradient( circle at 50% 40%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(0, 0, 0, 0.1) 72%, rgba(0, 0, 0, 0.27) 100% ); background-repeat: no-repeat; /* O número: preto, pesado e legível. `tabular-nums` para o "11" e o "50" ocuparem a mesma largura — sem isso os dois dígitos dançam de bola em bola e a grade parece torta. */ color: #1b1f33; font-weight: 800; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; line-height: 1; letter-spacing: 0.01em; /* Rebordo de luz em cima, sombreado por dentro embaixo e a sombra projetada no chão. Curta de propósito: o respiro da grade é de 4px e sombra grande borraria uma bola na outra. */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85), inset 0 -2px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(18, 21, 40, 0.22), 0 2px 4px rgba(18, 21, 40, 0.1); /* ⚠️ A COR ANDA MAIS RÁPIDO QUE O RESTO, e é regra dele (17/08/2026): "a marcação tem que acontecer de forma instantânea", mesmo que a contagem das cartelas lá embaixo demore. O Alpine já acende a bola em um quadro; quem sobrava na conta era esta transição de 140ms, que ainda deixava a cor a meio caminho quando o dedo saía. Em 70ms a bola já está pintada. O `transform` continua em 140ms de propósito — é o estufadinho, e ele precisa de tempo para ser percebido como resposta ao toque. */ transition: transform 140ms cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 90ms ease, background-color 70ms ease, color 70ms ease; /* Toque de celular sem atraso e sem o quadrado cinza do Android. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } /* Só as bolas do filtro são clicáveis; as da cartela são leitura. */ button.bola-dezena { cursor: pointer; } /* ----------------------------------------------------------------------------- * ALVO DE TOQUE * ----------------------------------------------------------------------------- * São 10 dezenas por linha num celular: a célula da grade dá uns 25px e não há * como crescer sem desmontar a grade que ele pediu para manter. Então a bola * empresta para o dedo o respiro que sobra ao redor — exatamente a metade do * `gap`, para uma nunca roubar o toque da vizinha. * -------------------------------------------------------------------------- */ button.bola-dezena::after { content: ''; position: absolute; inset: -2px; border-radius: 28%; } /* ----------------------------------------------------------------------------- * TAMANHO DO NÚMERO * ----------------------------------------------------------------------------- * A bola acompanha a célula da grade sozinha (aspect-ratio). O que precisa de * degrau é a fonte: no computador a mesma bola fica bem maior e um 12px lá * dentro pareceria perdido. * -------------------------------------------------------------------------- */ .bola-dezena { font-size: 12px; } @media (min-width: 480px) { .bola-dezena { font-size: 14px; } } @media (min-width: 640px) { .bola-dezena { font-size: 17px; } } @media (min-width: 1024px) { .bola-dezena { font-size: 21px; } } /* ----------------------------------------------------------------------------- * ESTADO MARCADO — o "pop" * ----------------------------------------------------------------------------- * A COR não está aqui de propósito (ela continua vindo do inline, igual a hoje). * O que esta classe faz é só o gesto: um estufadinho de 170ms e a sombra * reagindo, como bola que pulou. Some sozinho, não mexe em layout. * -------------------------------------------------------------------------- */ .bola-dezena.esta-marcada { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.26), 0 2px 3px rgba(18, 21, 40, 0.3), 0 4px 8px rgba(18, 21, 40, 0.16); animation: bola-pop 170ms ease-out; } @keyframes bola-pop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } } /* O afundadinho enquanto o dedo está encostado. */ button.bola-dezena:active { transform: scale(0.92); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(18, 21, 40, 0.24); } button.bola-dezena:focus-visible { outline: 2px solid var(--ct-primaria, #304090); outline-offset: 2px; } /* ----------------------------------------------------------------------------- * O ANEL DO TOQUE * ----------------------------------------------------------------------------- * Uma ondinha que sai da bola no instante do toque. Quem põe a classe * `bola-tocada` é o `bolas.js`. Vale mesmo quando o clique é recusado (as 5 * dezenas já cheias): o cliente vê que a tela ouviu o dedo dele. * -------------------------------------------------------------------------- */ .bola-dezena::before { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none; } .bola-dezena.bola-tocada::before { animation: bola-toque 340ms ease-out; } @keyframes bola-toque { 0% { opacity: 0.55; box-shadow: 0 0 0 0 rgba(27, 31, 51, 0.45); } 100% { opacity: 0; box-shadow: 0 0 0 7px rgba(27, 31, 51, 0); } } /* ----------------------------------------------------------------------------- * AS 20 DEZENAS DA CARTELA * ----------------------------------------------------------------------------- * Mesma bola, em miniatura. As filtradas continuam com a cor de destaque que * já vem do Blade — aqui só se ganha um degrauzinho de sombra para elas * saltarem do meio das outras. * -------------------------------------------------------------------------- */ .bola-dezena--mini { color: #3a405c; font-size: 11px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -1px 2px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(18, 21, 40, 0.18); } @media (min-width: 1024px) { .bola-dezena--mini { font-size: 12px; } } .bola-dezena--mini.esta-filtrada { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 3px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(18, 21, 40, 0.28); } /* ----------------------------------------------------------------------------- * QUEM PEDIU MENOS MOVIMENTO * ----------------------------------------------------------------------------- * A bola continua bola e a cor continua trocando na hora — o que sai é só o * balanço. Acessibilidade não é motivo para a tela ficar sem resposta. * -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .bola-dezena { transition: background-color 1ms linear, color 1ms linear; } .bola-dezena.esta-marcada, .bola-dezena.bola-tocada::before { animation: none; } button.bola-dezena:active { transform: none; } } /* ----------------------------------------------------------------------------- * CELULAR: DEZENAS MAIORES, MARGEM MENOR * ----------------------------------------------------------------------------- * Pedido dele em 17/08/2026, com o motivo junto: "pessoas que acessam o * aplicativo com mais de 50 anos têm dificuldade de enxergar as dezenas". * * 🔑 A BOLA NÃO TEM TAMANHO PRÓPRIO — ela é `aspect-ratio: 1/1` dentro de uma * célula de `grid-cols-10`, ou seja, o diâmetro É a largura da coluna. Não * existe "aumentar a bola" direto: o que se aumenta é a largura útil da * grade. Por isso a receita aqui é devolver margem lateral para dentro: * * · a tela (`.ct-tela`, o `px-4` do shell) .... 16px -> 8px de cada lado * · o cartão (`.ct-card`) ..................... 20px -> 12px de cada lado * * São 32px devolvidos à grade num aparelho de 390px: a bola sai de 27px * para ~30px e a fonte sobe de 12px para 14px, que é o que de fato se lê. * * ⚠️ O GAP DA GRADE CONTINUA INTOCADO (`gap-1`, 4px), e as colunas continuam * dez. Ele já mandou manter a grade duas vezes; espaço se tira da margem, * nunca do respiro entre as bolas — bola colada na vizinha rouba o toque * do dedo, e aí o cliente marca a dezena errada. * * ⚠️ SÓ CELULAR. O teto de 620px é o mesmo que a home mobile usa. Do tablet * para cima nada disto existe e o desktop fica exatamente como estava. * -------------------------------------------------------------------------- */ @media (max-width: 620px) { .ct-tela { padding-left: 8px; padding-right: 8px; } .ct-card { padding-left: 12px; padding-right: 12px; } .bola-dezena { font-size: 14px; } .bola-dezena--mini { font-size: 13px; } } /* ----------------------------------------------------------------------------- * A DEZENA SORTEADA, NA CONFERÊNCIA * ----------------------------------------------------------------------------- * ⚠️ Este arquivo já ganhou um bloco `.bilhete-card` inteiro em 30/08/2026 — um * desenho paralelo, com cinco colunas no celular, que fazia a cartela sair com * bolas gigantes e sem parecer com a da página de compra. Foi removido: o card * do bilhete é o `.ct-card` + `grid-cols-10` da vitrine, e nada mais. * * O que sobra aqui é a única coisa que a vitrine não tem: a bola VERDE do * número que saiu no sorteio. Dois nomes de classe no seletor para ganhar do * `background-image` da bola branca sem precisar de `!important`. * -------------------------------------------------------------------------- */ .bola-dezena.bola-dezena--acesa { background-color: var(--ct-sucesso, #2f9e44); background-image: none; color: #fff; } /* ----------------------------------------------------------------------------- * DOIS BILHETES NO MESMO CARTÃO * ----------------------------------------------------------------------------- * Cartelas da MESMA extração moram no mesmo cartão (ordem dele, 31/08/2026), e * lá dentro cada bilhete não tem caixa própria — teria borda dentro de borda. * O que separa um do outro é um fio, e só a partir do segundo: `+` garante que * o primeiro encoste no cabeçalho sem risco nenhum no meio. * * A legenda "comprada em… · PIX" mora DENTRO do bloco, na linha do número, então * aqui só existe bilhete seguido de bilhete. * -------------------------------------------------------------------------- */ .bilhete-linha + .bilhete-linha { margin-top: 12px; border-top: 1px solid var(--ct-borda); padding-top: 12px; }