feat(ui): destaca o CTA "Ficar pronto" no lobby (#71)

[caioross]

Contexto

Jogadores não achavam o botão de confirmar presença no lobby, então a partida demorava a começar e o líder achava que alguém estava AFK. A causa era uma hierarquia visual invertida: em src/components/Lobby.tsx, a ação que o jogador precisa achar ("marcar como pronto") era o btn-secondary apagado, enquanto o estado já concluído era o btn-primary verde chamativo — o oposto do que um CTA deveria ser.

O que mudou e por quê

• Estado NÃO-pronto = CTA primário e visível: btn-primary verde, maior (px-5 py-2.5 text-sm font-bold), com ícone Zap e um anel pulsante (animate-ready-pulse) que chama o olhar. Label mais direto: "Ficar pronto".
• Estado pronto = confirmação calma e clara: btn-secondary com borda/texto verde e check "pronto!" — claramente identificado como concluído, sem competir por atenção.
• Animação (globals.css): @keyframes cr-ready-pulse — anel verde que expande e some, box-shadow-only (sem layout/reflow). É lobby, não a corrida, então não encosta na área sagrada.

prefers-reduced-motion respeitado

O pulso é uma classe CSS animate-*, e a regra global de globals.css (prefers-reduced-motion: reduce) já zera animation-duration/iteration-count — mesmo padrão do .editor-shake. Para quem prefere menos movimento, o anel some e resta o glow estático do btn-primary. Sem animation-fill-mode: forwards, o botão volta ao estilo base após o ciclo.

Critérios de aceite

• O botão possui maior destaque visual (primário verde + tamanho + pulso).
• Permanece facilmente visível independentemente da resolução (fica no 1º card, sempre renderizado; header com flex-wrap mantém o botão visível ao quebrar).
• O estado "Pronto" fica claramente identificado (verde + check "pronto!").
• Usuários conseguem encontrá-lo sem dificuldade (era o objetivo da inversão de hierarquia).

Gate (resultado real, no worktree)

• pnpm install --frozen-lockfile ✅
• pnpm typecheck ✅
• pnpm build ✅
• pnpm test ✅ 34/34
• pnpm lint = N/A (sem config ESLint no repo; a CI não roda lint)

Riscos e verificação

Baixo. Diff = Lobby.tsx (um botão + import do ícone Zap) e um keyframe aditivo em globals.css. Sem tocar banco/RLS/anti-cheat nem a área sagrada (input da corrida). O único efeito colateral do keyframe é o anel durante o pulso substituir momentaneamente o glow estático do btn-primary — intencional.

Verificação em browser do lobby fica atrás de uma sala Supabase ao vivo (sem .env.local no worktree e sem o harness dev proposto na #37, a tela é inalcançável headless). Validado por typecheck+build+test e inspeção do markup.

Closes #71

[gemini-code-assist]

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
code-racer	Ready	Preview, Comment	Jul 26, 2026 12:42pm

[caioross]

✅ PR Doctor — APROVADA (Normal §7.3)

Diff lido. globals.css (keyframe cr-ready-pulse — box-shadow only, sem reflow, e prefers-reduced-motion global zera a duração) + Lobby.tsx (CTA "Ficar pronto" vira primário/pulsante quando não-pronto; estado calmo quando pronto). Lobby, fora da área sagrada. CI + Vercel verdes. Closes #71. Squash-merge.