Ruleta de Derechos

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.

Create a Spanish-language educational interactive web game titled “Ruleta de los Derechos Humanos” (also recognizable as “Ruleta de Derechos”). It is a single-screen roulette activity for learning about human rights. Use a friendly polished 2D UI with a pale diagonal gradient background (light blue, warm cream, and pale pink), dark navy text, rounded white translucent cards, subtle shadows, and emoji illustrations.

Layout: a responsive app constrained to about 1100px wide and filling the viewport. At the top, place a header with a navy rounded-square logo containing a scales-of-justice emoji ⚖️, the title “Ruleta de los Derechos Humanos”, and the subtitle “Gira, descubre un tema y responde la pregunta.” On the right show a pill labeled “Aciertos: 0”. The score should initially be zero and remain a displayed counter; the source interaction does not implement answer checking or incrementing it. The main area has two rounded cards side by side on desktop, and stacked vertically on narrow screens. The left card contains the wheel; the right card contains the selected topic, question, optional answer, advice, and spin button. Add a small footer reading “Actividad educativa · Los derechos humanos pertenecen a todas las personas.”

Wheel: render a large circular canvas wheel centered in the left card. Around it is a thick dark navy outer ring. Divide the wheel into eight equal wedge-shaped sectors with white separator strokes. Put the fixed pointer as a downward-pointing triangle “▼” centered above the wheel, pointing at the top sector. In the center place a white circular hub with a thick navy outline and a ⚖️ emoji. Each wedge should show a large emoji and its Spanish topic label, arranged along the wedge’s radial/tangential orientation. Use these sectors in clockwise order starting from the top: 1) “Igualdad”, 🤝, coral/red #ff6b6b; 2) “Educación”, 📚, golden yellow #ffd166; 3) “Libertad”, 🕊️, turquoise green #06d6a0; 4) “Salud”, ❤️, cyan #4cc9f0; 5) “Identidad”, 🪪, lavender #a78bfa; 6) “Paz”, ☮️, orange #f8961e; 7) “Participación”, 🗣️, green #90be6d; 8) “Vivienda”, 🏠, pink #f15bb5. The labels are dark navy, bold, and compact enough to fit in their slices. The wheel should scale with its card and work on touch/mobile screens.

Interaction: the right card initially displays eyebrow text “CASILLA SELECCIONADA”, a topic heading with 🌍 and “¡Gira la ruleta!”, and the question “Pulsa el botón para conocer una pregunta sobre los derechos humanos.” At the bottom show the advice box “Consejo: piensa en ejemplos de tu escuela, tu familia y tu comunidad.” and a prominent blue rounded button labeled “🎡 Girar la ruleta”. When clicked, disable the button and animate the wheel clockwise for roughly 3.6–4.5 seconds, making about 5–8 full rotations with a pronounced ease-out deceleration. Hide any prior answer while spinning. Once stopped, determine the sector beneath the fixed top pointer and update the right panel with that sector’s emoji and title, its question, and a visible pale-yellow answer box prefixed “Respuesta orientativa:”. Re-enable the button.

Use these exact topic questions and orientative answers:
- Igualdad — Question: “¿Qué significa tratar a todas las personas con igualdad?” Answer: “Significa reconocer que todas las personas tienen la misma dignidad y derechos, sin discriminación.”
- Educación — Question: “¿Por qué la educación es un derecho humano importante?” Answer: “Porque ayuda a desarrollar capacidades, participar en la sociedad y abrir oportunidades para una vida digna.”
- Libertad — Question: “Menciona una forma responsable de ejercer tu libertad.” Answer: “Por ejemplo, expresar tus ideas respetando los derechos, la seguridad y la dignidad de las demás personas.”
- Salud — Question: “¿Qué acciones ayudan a cuidar el derecho a la salud?” Answer: “Acceder a atención médica, alimentarse bien, tener agua limpia y contar con información para prevenir enfermedades.”
- Identidad — Question: “¿Qué elementos forman parte de nuestra identidad?” Answer: “El nombre, la nacionalidad, la cultura, la lengua, la historia familiar y otros rasgos que nos hacen únicos.”
- Paz — Question: “¿Cómo puedes ayudar a construir una convivencia pacífica?” Answer: “Escuchando, dialogando, resolviendo conflictos sin violencia y rechazando el acoso o la discriminación.”
- Participación — Question: “¿Por qué es importante que niñas, niños y jóvenes sean escuchados?” Answer: “Porque tienen derecho a expresar su opinión y a participar en las decisiones que les afectan, de acuerdo con su edad y madurez.”
- Vivienda — Question: “¿Qué características debe tener una vivienda digna?” Answer: “Debe ser segura, habitable, contar con servicios básicos y ofrecer protección y privacidad.”

Style details: use large rounded corners, clean system sans-serif typography, an energetic blue action button, an answer panel with cream/yellow background and gold border, and accessible text. On small screens stack the wheel above the information card, reduce the wheel card’s minimum height to around 310px, hide the advice box if necessary, and keep the spin button usable. Do not add extra enemies, levels, timers, answer input, or scoring mechanics beyond the roulette, question reveal, and static “Aciertos: 0” display.