Meu Jeitinho

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/app interativo educativo em português do Brasil chamado “Meu Jeitinho”, apresentado como uma experiência de autocuidado, rotina e escolhas no próprio ritmo. Não é um jogo de ação nem usa câmera 3D: é uma interface 2D responsiva, em página rolável, com cartões arredondados e estética acolhedora/pastel.

Layout e visual: use fundo geral com gradiente suave creme para lilás, tipografia sans-serif, texto principal azul-marinho escuro e texto secundário cinza. No topo, mostre à esquerda um ícone quadrado lilás com cantos arredondados e um coração branco, o título “Meu Jeitinho” e o subtítulo “Autocuidado, rotina e escolhas no seu ritmo”. À direita, exiba uma cápsula de progresso inicialmente com “Missão 1 de 3”. Em telas largas, organize dois painéis brancos translúcidos com borda clara, sombra discreta e cantos bem arredondados: uma coluna esquerda estreita para o avatar e uma coluna direita maior para as atividades. Em telas estreitas, empilhe os painéis verticalmente; a página deve poder rolar.

Painel de avatar: título “Crie seu avatar”. Mostre uma ilustração simples e fofa de corpo inteiro sentada/em pé dentro de um cartão grande com fundo em gradiente lilás/creme e uma sombra oval lavanda no chão. O avatar deve ser desenhado com formas CSS ou equivalente: cabeça arredondada com contorno azul-marinho, dois olhos pequenos, sorriso simples, cabelo sobre a testa, tronco com roupa colorida, uma faixa/peça amarela no peito e duas pernas azuis com contorno. Permita personalização imediata de quatro cores de pele (do claro ao marrom escuro, com amostras circulares), três estilos de cabelo (“Curto”, “Longo”, “Cacheado”) e quatro cores de roupa (“Lilás”, “Verde”, “Rosa”, “Azul”). A opção selecionada deve ficar visualmente destacada. Alterar pele muda a cabeça, alterar cabelo muda formato e cor do cabelo, e alterar roupa muda o tronco. O cabelo longo deve ser mais comprido; o cacheado deve ter aparência volumosa/cacheada. Inclua botão roxo de largura total “Salvar avatar”; ao clicar, mostre uma notificação temporária: “Avatar salvo do jeitinho que você escolheu!”.

Painel principal: no alto, três abas arredondadas: “Missões”, “Minha bolsa” e “Cantinho calmo”. A aba ativa deve ter fundo azul-marinho e texto branco; as inativas devem ser claras. Exiba somente o conteúdo da aba selecionada.

Aba Missões: mostre um cartão de missão com ícone de tulipa rosa, etiqueta verde “ROTINA DO PERÍODO”, título “Missão: trocar o absorvente” e texto: “Você pode fazer cada parte com calma. Marque os passos conforme completar — não existe pressa.” Abaixo, uma caixa de aviso amarelo-clara com borda dourada contendo exatamente uma dica de segurança semelhante a: “Dica de segurança: lave as mãos antes e depois. Se sentir dor forte, mal-estar ou tiver dúvidas, fale com um adulto de confiança ou profissional de saúde.”

Depois do aviso, mostre quatro passos em cartões brancos empilhados, cada um com checkbox grande: “Lavar as mãos”, “Ir a um banheiro ou espaço reservado”, “Trocar o absorvente com calma” e “Enrolar e descartar no lixo”. O jogador pode marcar/desmarcar livremente. Quando marcado, o cartão deve ficar verde-claro e o texto riscado. Inclua botão “Concluir missão”. Só permita concluir quando os quatro passos estiverem marcados; se tentar antes, mostre notificação temporária “Marque todos os passos para concluir a missão.” Quando concluir, mostre na área de resumo as cápsulas “✓ Missão concluída” e “Você cuidou de si”, altere o progresso do topo para “Missão 2 de 3” e mostre “Missão concluída com calma 🌷”.

Aba Minha bolsa: título “Monte sua bolsa” e texto “Escolha o que faz sentido para você levar. A bolsa pode ser diferente para cada pessoa.” Mostre uma grade de cartões selecionáveis, dois por linha em telas largas e uma coluna em telas estreitas. Cada item tem checkbox, emoji, nome em negrito e descrição curta. Os seis itens são: absorvente 🩷 — “para trocar quando precisar”; calcinha extra 🩲 — “uma opção de troca”; saquinho 🛍️ — “para guardar o usado”; lenço 🧻 — “para ajudar na limpeza”; álcool em gel 🧴 — “para quando não houver pia”; garrafinha de água 💧 — “para se hidratar”. Inclua botão “Guardar escolhas”. Ao clicar, persista a seleção, mostre uma cápsula com a quantidade no formato “N item(ns) escolhido(s)” e uma notificação “Sua bolsa foi guardada!”.

Aba Cantinho calmo: título “Cantinho calmo” e texto “Antes ou depois de uma missão, você pode fazer uma pausa. Escolha uma opção:”. Mostre três botões claros: “🌬️ Respirar devagar”, “🎧 Usar fone” e “🧸 Abraçar uma almofada”. Abaixo, uma caixa tracejada inicialmente com “Seu corpo pode pedir pausas. Pausar também é autocuidado.” Ao clicar em qualquer uma das três opções, substitua a mensagem por “Boa escolha. Você pode continuar quando se sentir pronta — ou fazer outra pausa.” e mostre uma notificação “Pausa registrada”.

Use notificações tipo toast escuras, centralizadas na parte inferior, temporárias, para confirmações e erros. Mantenha o tom não punitivo, calmo e inclusivo; não adicione combate, pontuação, vidas, cronômetro ou pressão de tempo. O estado deve permanecer durante a interação: avatar, checkboxes dos quatro passos, itens escolhidos da bolsa e missão concluída. O visual deve corresponder a um painel de autocuidado com bordas suaves, espaçamento generoso, cores lilás, rosa, verde-menta, creme e amarelo suave.