Cidade Livre 3D

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Crie um jogo web chamado “Cidade Livre 3D”, em português do Brasil, com uma interface de simulador de vida, política e cidades. A experiência atual é uma apresentação interativa baseada em menus, seleção de papel e uma cutscene de aproximação à Terra; não adicione sistemas de movimentação, combate, economia jogável ou exploração que não estejam descritos aqui.

Use uma cena 3D em tela cheia atrás da interface, renderizada em estilo low-poly/realista estilizado com Three.js. O fundo deve ser quase preto-azulado (#020711), com aproximadamente 850 pequenos pontos luminosos formando um campo de estrelas. No centro, exiba um globo terrestre azul com esfera de aparência fosca, uma camada simplificada de continentes verdes achatada verticalmente, uma camada externa de nuvens azul-brancas em wireframe/transparência e um halo azul sutil. O globo deve girar lentamente, os continentes em sentido contrário mais devagar e as nuvens lentamente; também deve flutuar levemente para cima e para baixo. Iluminação fria azulada, com luz hemisférica, luz direcional ciano e uma luz roxa de recorte. A câmera é perspectiva, inicialmente posicionada aproximadamente em (0, 3.6, 9), olhando para o centro do globo.

Na tela inicial, coloque uma camada de interface sobre a cena, com um grande painel central escuro translúcido, borda azul discreta, cantos arredondados e efeito de vidro/desfoque. O painel deve conter, nesta ordem: o texto pequeno em caixa alta “SIMULADOR DE VIDA · POLÍTICA · CIDADES” em azul-ciano com espaçamento amplo; o título grande em duas linhas “Cidade” e “Livre 3D”, sendo “3D” azul-ciano; o subtítulo “Escolha seu papel, tome decisões e construa a sua própria história em um mundo urbano vivo.”; e três botões verticais: “JOGAR” com gradiente ciano-azul e texto escuro, “CONFIGURAÇÕES” em painel escuro, e “SAIR” com borda/realce rosa-avermelhado. Use tipografia sans-serif pesada e moderna, texto branco, fundo geral azul-marinho, e layout responsivo para telas pequenas.

Comportamentos dos botões: “JOGAR” abre a tela de seleção de papéis; “CONFIGURAÇÕES” abre a tela de preferências; “SAIR” não fecha a aba do navegador, mas mostra uma notificação informando que o navegador bloqueou o fechamento automático e retorna ao menu.

Na tela de seleção, mantenha a cena do globo ao fundo e cubra-a com uma camada escura translúcida. No topo, exiba a marca “CIDADE LIVRE 3D” à esquerda e um botão “VOLTAR” à direita. Centralize um cabeçalho com o rótulo “ETAPA 1 · ESCOLHA SUA EXPERIÊNCIA”, o título “O QUE VOCÊ QUER SER?” e o texto “Cada papel abre objetivos e responsabilidades diferentes. Selecione um cartão para ver os detalhes.”. Abaixo, mostre uma grade responsiva de cartões escuros com bordas azuladas, cantos arredondados e efeito de elevação no hover. Cada cartão tem um emoji/ícone, nome e descrição curta. Inclua exatamente estes 13 papéis e descrições:
- 👤 Presidente — “Governe um país, administre ministérios e tome decisões nacionais.”
- 🗺️ Governador — “Distribua recursos entre municípios e melhore serviços regionais.”
- 🏙️ Prefeito — “Construa uma cidade melhor e cuide dos serviços municipais.”
- ⚖️ Deputado — “Represente a população e participe da criação de leis.”
- 🏛️ Senador — “Participe das decisões legislativas nacionais.”
- 📜 Vereador — “Fiscalize a prefeitura e defenda as necessidades dos bairros.”
- 🧭 Ministro — “Administre uma área de governo e cumpra metas públicas.”
- ⚖️ Juiz — “Analise processos fictícios e decida conforme as regras do jogo.”
- 💼 Empresário — “Abra negócios, contrate pessoas e expanda sua organização.”
- 🏠 Cidadão — “Viva uma rotina comum, trabalhe, consuma e explore a cidade.”
- 🚓 Policial — “Patrulhe, atenda ocorrências e ajude na segurança pública.”
- 🩺 Médico — “Atenda pacientes e participe do sistema de saúde.”
- 🧰 Trabalhador — “Escolha uma profissão, receba salário e construa sua carreira.”

Ao clicar em um cartão, abra um modal central escuro com borda azul. O modal mostra o papel selecionado, a descrição, e quatro campos de metadados: “Local de atuação”, “Nível de dificuldade”, “Objetivos iniciais” e “Habilidades”, além de uma lista “Responsabilidades”. Use estes dados exatos:
Presidente: local “Nacional”; dificuldade “Alta”; objetivo “Equilibrar orçamento e satisfação”; habilidades “Políticas públicas, orçamento”; responsabilidades “Administração nacional, infraestrutura e relações internacionais”.
Governador: “Estado ou região”; “Alta”; “Investir em saúde e educação”; “Planejamento regional, obras”; “Hospitais, escolas, rodovias e repasses”.
Prefeito: “Cidade”; “Média”; “Resolver problemas urbanos”; “Construção, orçamento”; “Bairros, ruas, serviços e economia local”.
Deputado: “País e região”; “Média”; “Apresentar uma proposta”; “Debate, fiscalização”; “Projetos de lei, comissões e votações”.
Senador: “País e região”; “Alta”; “Avaliar projetos importantes”; “Análise, negociação”; “Leis nacionais, comissões e votações”.
Vereador: “Cidade”; “Baixa”; “Ouvir um bairro e propor ação”; “Fiscalização, leis municipais”; “Projetos de bairro, sessões e votação”.
Ministro: “País e ministério”; “Alta”; “Definir metas da pasta”; “Gestão, relatórios”; “Orçamento, equipe e projetos setoriais”.
Juiz: “Região judicial”; “Alta”; “Analisar o primeiro processo”; “Raciocínio, evidências”; “Audiências, processos e decisões”.
Empresário: “Cidade”; “Média”; “Abrir o primeiro negócio”; “Gestão, investimento”; “Fábricas, lojas, funcionários e finanças”.
Cidadão: “Cidade”; “Baixa”; “Encontrar moradia e emprego”; “Rotina, renda, relações”; “Vida cotidiana, serviços e escolhas pessoais”.
Policial: “Cidade”; “Média”; “Atender uma ocorrência”; “Patrulha, investigação”; “Rondas, chamados e segurança”.
Médico: “Cidade”; “Média”; “Atender o primeiro paciente”; “Diagnóstico, cuidado”; “Hospital, clínica e plantões”.
Trabalhador: “Cidade”; “Baixa”; “Conseguir o primeiro emprego”; “Habilidades, carreira”; “Trabalho, renda e progressão”.

No modal, ofereça “ESCOLHER ESTE CARGO” e “VOLTAR”. Escolher salva o nome do cargo e abre a cutscene. Fechar ou voltar apenas fecha o modal.

A tela de configurações deve manter o mesmo estilo visual, com painel central escuro. Inclua: seletor “Idioma” com “Português brasileiro” e “English”; seletor “Qualidade gráfica” com “Alta”, “Média” e “Baixa”; checkbox “Sombras” inicialmente marcado; slider “Volume geral” inicialmente em 65; slider “Sensibilidade da câmera” inicialmente em 50; checkbox “Inverter eixo vertical”; checkbox “Texto ampliado”; botões “SALVAR” e “VOLTAR”. Salvar mostra a notificação “Configurações salvas.” e retorna ao menu; texto ampliado deve aumentar a fonte global. Não é necessário implementar efeitos adicionais para cada preferência além desses comportamentos visíveis.

A cutscene é uma tela sobre o globo, sem cidade jogável. Mostre no topo central o título “ESCOLHA UM PAÍS OU UMA CIDADE” e abaixo uma linha com o papel selecionado seguida de “· preparando sua entrada no mundo”. No canto inferior esquerdo, exiba “A Terra está se aproximando do seu próximo capítulo.” e no canto inferior direito o botão “PULAR CUTSCENE”. Durante 12 segundos, anime suavemente a câmera de uma visão distante (aproximadamente posição y=8, z=34) para a visão próxima inicial (y=3.6, z=9), sempre olhando para o globo, com interpolação suave. Ao terminar, mostre a notificação “A Terra está pronta. Próximo passo: pesquisa de locais.” e deixe a cutscene concluída. Pular deve interromper a animação, mostrar “Próxima etapa liberada: escolha um país ou uma cidade.” e voltar à tela de seleção de papéis. Use notificações toast discretas no centro inferior para essas mensagens.

Como detalhe visual de fundo preparado para uma possível continuação, a cena também pode conter um grupo de cidade oculto: plano de chão azul-esverdeado, 34 prédios cúbicos de alturas e cores azuladas variadas e 18 árvores simples com troncos marrons e copas verdes. Esse grupo permanece invisível nas telas atuais; não o transforme em uma fase jogável. O resultado deve ser uma experiência de menu polida, cinematográfica e responsiva, com alto contraste, painéis translúcidos azul-marinho, acentos ciano/azul e pequenos acentos roxos e rosa.