Você é um engenheiro de jogos sênior, game designer, diretor...

Prompt

Você é um engenheiro de jogos sênior, game designer, diretor de arte e especialista em UX. Sua missão é criar, em UMA ÚNICA RESPOSTA, um jogo de navegador completo e realmente jogável de dedução social inspirado em Mafia/Werewolf. Não entregue conceito, wireframe, pseudocódigo, tutorial ou trechos soltos: entregue a implementação funcional. OBJETIVO Crie “MAFIA: NOITE DE SANGUE”, um jogo premium de dedução social em que 1 jogador humano disputa contra 11 personagens controlados por IA local. O jogo deve parecer um produto indie comercial, não uma demo escolar. Quero testar simultaneamente sua capacidade de arquitetura, lógica, design visual, escrita, UX, responsividade, estado, aleatoriedade e tratamento de edge cases. ENTREGA OBRIGATÓRIA - Entregue um único arquivo "index.html", autocontido, com HTML + CSS + JavaScript no próprio arquivo. - Sem backend, build step, npm, framework obrigatório ou arquivos adicionais. - Pode usar bibliotecas via CDN apenas se forem realmente necessárias; prefira JavaScript/CSS puro. - Não dependa de imagens locais. Para retratos/ícones, use SVG/CSS/emoji ou recursos remotos estáveis com fallback. - O arquivo deve abrir diretamente no navegador e funcionar. - Não use TODO, “implemente depois”, placeholders falsos, botões decorativos sem função ou sistemas descritos mas inexistentes. - Ao final, devolva APENAS o conteúdo completo do "index.html" dentro de um único bloco de código. Nada de explicação fora do código. DIREÇÃO VISUAL Tema: cidade noir moderna, chuva, neon, crime organizado, investigação e tensão psicológica. Visual cinematográfico, escuro e sofisticado, com sensação de “mesa de jogo digital premium”. - Desktop: painel central de jogo, coluna de jogadores e painel contextual. - Mobile: reorganização real, sem simplesmente esmagar o desktop. - Fundo vivo e discreto: chuva/neblina/luzes animadas em CSS, sem prejudicar performance. - Tipografia forte, hierarquia visual clara, cards com profundidade, sombras, vidro fosco, microanimações, hover/press/focus e transições suaves. - Paleta coerente: preto/grafite, vinho/vermelho para a Máfia, azul/ciano para investigação, âmbar para alertas, verde moderado para vida/sucesso. - Não exagere em glow, gradientes aleatórios ou HUD sci-fi. O tema é noir criminal. - Use ícones consistentes; não espalhe emoji infantil pela interface. - Todas as telas devem parecer parte do mesmo produto. TELAS E FLUXO 1. Splash curta com logotipo e botão “Entrar na cidade”. 2. Menu principal com: Jogar, Como jogar, Estatísticas e Configurações. 3. Setup da partida: - nome do jogador; - escolha de 1 entre pelo menos 6 avatares estilizados; - dificuldade: Recruta / Detetive / Don; - toggle de efeitos, animações e velocidade dos bots; - botão “Iniciar partida”. 4. Revelação de função em tela dramática, com card que vira/abre e explica objetivo e habilidade. 5. Jogo principal com ciclo Dia → Julgamento → Noite → Resultado da noite → próximo Dia. 6. Tela final de vitória/derrota com causa do fim, funções reveladas, estatísticas da partida e botão para revanche. COMPOSIÇÃO DA PARTIDA 12 participantes no total: o humano + 11 bots. Distribuição padrão: - 3 Mafiosos, sendo 1 Don; - 1 Detetive; - 1 Médico; - 1 Vigilante; - 1 Bobo; - 5 Cidadãos. A função do humano deve ser sorteada de forma justa entre as funções disponíveis, ajustando a composição restante sem duplicações indevidas. CONDIÇÕES DE VITÓRIA - Cidade vence quando todos os membros vivos da Máfia forem eliminados. - Máfia vence quando o número de mafiosos vivos for maior ou igual ao número de não-mafiosos vivos, salvo se uma ação pendente puder alterar legitimamente o estado antes da checagem. - Bobo vence individualmente se for eliminado por votação durante o dia. Mostre isso como vitória especial; a partida pode encerrar imediatamente para simplificar, desde que isso seja claramente comunicado. - Nunca deixe a partida entrar em loop infinito ou estado sem vencedor possível. PERSONAGENS/BOTS Crie 11 bots com nomes, avatar visual, profissão, personalidade e padrão de fala distintos. Exemplos de arquétipos: advogado frio, enfermeira empática, mecânico impulsivo, jornalista inquisitiva, empresário arrogante, estudante nervoso, policial aposentado, bartender observador etc. Cada bot deve manter: - nível de suspeita sobre cada jogador vivo; - confiança; - agressividade; - tendência a seguir maioria ou desafiar consenso; - memória curta dos últimos eventos; - preferência de alvo; - pequeno “perfil comportamental”. Bots não podem saber magicamente as funções secretas que sua função não deveria conhecer. IA LOCAL DE DECISÃO Implemente heurísticas reais, não respostas totalmente aleatórias. Durante o dia, bots devem avaliar: - votos anteriores; - acusações recebidas; - contradições simples; - quem iniciou bandwagon; - quem defendeu um eliminado que depois revelou ser mafioso/cidadão; - resultados públicos; - tendência pessoal do bot. Máfia deve coordenar discretamente: evitar votar de forma obviamente idêntica, proteger aliados com moderação e tentar criar suspeitos plausíveis. Detetive deve usar investigações privadas para influenciar votos sem revelar informação de forma suicida o tempo todo. Médico deve priorizar alvos ameaçados e reduzir repetição excessiva. Vigilante deve ser conservador nas dificuldades menores e mais agressivo na maior. Bobo deve tentar parecer suspeito sem agir de forma absurdamente óbvia. A dificuldade deve realmente modificar qualidade da tomada de decisão dos bots, e não apenas mudar texto. SISTEMA DE CONVERSA Durante cada Dia, gere uma discussão curta em turnos antes da votação. - Pelo menos 5 a 9 mensagens por dia. - Mensagens devem citar nomes e eventos reais daquela partida. - Inclua tipos de fala: acusação, defesa, dúvida, análise, provocação, concordância e mudança de opinião. - Use templates combinados dinamicamente para produzir variedade; não precisa usar IA externa. - Evite repetir a mesma frase em sequência. - Exiba as mensagens em um feed elegante com retrato, nome, horário/ordem e pequenos indicadores contextuais. - O jogador humano deve poder clicar em até 3 respostas contextuais por rodada, como “Acusar X”, “Defender X”, “Pedir provas”, “Ficar em silêncio” ou “Rebater”. Essas ações precisam influenciar suspeita/relacionamentos. - Permita selecionar o alvo quando a resposta exigir uma pessoa. FASE DO DIA Mostre: - número do dia; - vivos/mortos; - cronologia dos eventos; - lista de participantes com status; - feed de conversa; - painel do próprio papel/habilidade; - botão para avançar quando apropriado. Depois da discussão, abra votação. Cada vivo vota em um vivo elegível. O humano escolhe seu voto. Mostre votos surgindo um a um com suspense. Empate deve ter regra definida: segundo turno apenas entre empatados; se persistir empate, ninguém é eliminado. Ao eliminar alguém, mostre animação curta e revele sua função publicamente. FASE NOTURNA A cidade “dorme” e a interface muda de atmosfera. Ações: - Máfia escolhe uma vítima em conjunto. - Don participa do voto da Máfia. - Detetive investiga um jogador e recebe “Máfia” ou “Não Máfia”; o Don tem 35% de chance de aparecer como “Não Máfia”. - Médico protege um jogador; não pode proteger a mesma pessoa em noites consecutivas. - Vigilante pode atirar ou poupar; limite total de 2 tiros. Se matar um cidadão, mostre consequência narrativa e isso deve entrar na memória social no dia seguinte. - Cidadão/Bobo não têm ação ativa. Se o humano tiver ação noturna, apresente seleção clara e confirmação. Se não tiver, mostre a transição e execute os bots. Resolva ações em ordem lógica e consistente. Proteção do Médico pode impedir a morte da Máfia. Defina explicitamente como conflitos são resolvidos e implemente sem contradições. INFORMAÇÃO SECRETA O humano só pode ver o que sua função permite. - Mafioso conhece os outros mafiosos. - Detetive só vê seus próprios resultados. - Médico só sabe quem protegeu. - Cidadão/Vigilante/Bobo não veem funções secretas. - Não vaze papel secreto por cor de borda, tooltip, DOM visual óbvio ou texto acidental antes da revelação. - No final da partida, revele tudo. PAINEL DE JOGADORES Cada card deve mostrar: - avatar; - nome; - profissão; - vivo/morto; - tags públicas relevantes; - voto atual quando público; - um medidor de “minha suspeita” editável pelo humano (0–100) para ajudar raciocínio. Clicar em um jogador abre dossier lateral/modal com histórico público: votos, acusações, defesas, eventos e anotações do jogador. Permita adicionar uma anotação curta local por personagem. SISTEMA DE EVENTOS E MEMÓRIA Mantenha um log estruturado de eventos da partida. Cada evento deve ter turno, fase, tipo, ator, alvo e texto público/privado quando aplicável. Use esse log para: - alimentar falas; - atualizar suspeitas; - montar dossiers; - calcular estatísticas; - explicar o desfecho. Não derive tudo apenas do DOM; use um estado JavaScript centralizado. ESTADO E ARQUITETURA Organize o JavaScript com responsabilidade clara: estado, setup, renderização, regras, IA, diálogo, ações noturnas, votação, persistência e utilidades. Pode usar classes ou módulos internos, mas mantenha o arquivo único. Implemente uma máquina de estados ou controle equivalente para impedir ações fora de fase. Evite listeners duplicados, variáveis globais caóticas e renders que destruam estado importante. Desabilite controles inválidos em vez de deixar o usuário quebrar a partida. ALEATORIEDADE E REPRODUTIBILIDADE Inclua um seed numérico visível nas Configurações avançadas. - Se o mesmo seed e as mesmas decisões humanas forem usados, o sorteio inicial e decisões pseudoaleatórias dos bots devem ser reproduzíveis. - Implemente um PRNG simples próprio em vez de depender exclusivamente de "Math.random()". - Adicione botão “Novo seed”. ESTATÍSTICAS E PERSISTÊNCIA Use localStorage para registrar: - partidas jogadas; - vitórias/derrotas; - vitórias por função; - maior sequência; - eliminações corretas/erradas quando aplicável; - últimas 5 partidas. Menu Estatísticas deve mostrar cards e pelo menos um gráfico simples feito em CSS/SVG/canvas, sem exigir biblioteca pesada. Configurações também devem persistir. ONBOARDING E ACESSIBILIDADE - Primeira partida: tutorial curto em 3 ou 4 passos, pulável. - Tooltips para funções e mecânicas importantes. - Navegação por teclado nas ações principais. - "aria-label" onde necessário. - foco visível; - contraste aceitável; - "prefers-reduced-motion"; - layout utilizável a partir de ~360 px de largura. - Não bloqueie a experiência se áudio não for permitido pelo navegador. ÁUDIO E FEEDBACK Se possível, use Web Audio API para criar efeitos simples proceduralmente: clique, transição, votação, morte/revelação e vitória. Deve existir mute. Falha de áudio nunca pode quebrar o jogo. Use toast/notificações para feedback de ações importantes. DETALHES DE POLIMENTO Inclua: - relógio/indicador de fase; - transições entre fases; - confirmação antes de ação irreversível do humano; - skeleton/fade curto onde fizer sentido, sem espera artificial longa; - empty states bem desenhados; - tooltips; - modais acessíveis; - botão para abrir “Regras” durante a partida; - atalho para mutar; - tooltip ou legenda explicando símbolos; - efeitos visuais sutis quando alguém morre, é salvo ou é revelado. Nunca dependa só de cor para transmitir estado. EDGE CASES OBRIGATÓRIOS Trate corretamente: - humano morto: ele vira espectador e a partida continua automaticamente com bots, sem permitir ações ilegais; - alvo escolhido morre antes da resolução; - empate de votação; - médico tentando repetir proteção; - vigilante sem munição; - último mafioso eliminado; - paridade da Máfia; - Bobo votado; - múltiplas mortes na mesma noite; - ninguém morrer à noite; - partida encerrando no meio de uma transição; - localStorage indisponível/corrompido; - seed inválido; - double-click em confirmar; - resize/orientação do celular; - recomeçar partida sem recarregar a página. MODO DESENVOLVEDOR Inclua uma pequena área “Debug” escondida atrás de um toggle em Configurações avançadas, desligado por padrão. Ela pode mostrar seed, fase atual, turno, IDs, log cru e funções secretas. Isso serve para verificar a lógica, mas NUNCA deve aparecer no fluxo normal sem ativação explícita. Inclua também um botão “Rodar sanity checks” que verifique pelo menos: - total de 12 jogadores; - exatamente 3 membros da Máfia no início; - IDs únicos; - nenhuma ação pendente com alvo morto/inválido; - condição de vitória coerente; - contagem de vivos consistente. Mostre PASS/FAIL de cada check no próprio painel. CRITÉRIOS DE QUALIDADE O resultado será avaliado rigidamente em 10 dimensões: 1) funcionamento real; 2) profundidade das regras; 3) inteligência aparente dos bots; 4) ausência de vazamento de informação; 5) qualidade visual; 6) UX desktop/mobile; 7) robustez e edge cases; 8) arquitetura do código; 9) variedade narrativa; 10) acabamento de produto. PRIORIDADE EM CASO DE CONFLITO 1. Jogo funcionar do início ao fim sem travar. 2. Regras e informação secreta corretas. 3. Interações e decisões terem efeito real. 4. Responsividade. 5. Polimento visual. 6. Efeitos cosméticos. REGRA FINAL Você possui liberdade para tomar decisões criativas adicionais, desde que preserve os requisitos acima. Surpreenda nos detalhes, mas não sacrifique funcionalidade por aparência. O objetivo é que outra pessoa consiga salvar sua resposta como "index.html", abrir e jogar uma partida completa imediatamente.

A system prompt was added to support web rendering