\n
",
"css": ".body { margin: 0; padding: 0; overflow: hidden; background: #0a0a0a; font-family: 'Courier New', Courier, monospace; color: #fff; }\n#app { width: 100vw; height: 100vh; position: relative; overflow: hidden; }\n#canvas-container { width: 100%; height: 100%; position: relative; }\n#main-canvas { width: 100%; height: 100%; display: block; }\n#ui-overlay { position: absolute; top: 20px; left: 20px; pointer-events: none; z-index: 10; }\n.title { font-size: 2rem; text-transform: uppercase; letter-spacing: 3px; margin: 0; color: #e74c3c; text-shadow: 0 0 10px rgba(231, 76, 62, 0.5); }\n.subtitle { font-size: 0.9rem; opacity: 0.7; margin: 5px 0 20px 0; }\n#balance-meter { width: 200px; height: 10px; background: #333; border: 1px solid #555; position: relative; }\n#meter-fill { width: 50%; height: 100%; background: #e74c3c; transition: width 0.3s ease; }\n#status-text { margin-top: 10px; font-size: 0.8rem; font-weight: bold; color: #aaa; }\ncanvas { cursor: crosshair; }",
"js": "const canvas = document.getElementById('main-canvas');\nconst ctx = canvas.getContext('2d');\nconst meterFill = document.getElementById('meter-fill');\nconst statusText = document.getElementById('status-text');\n\nlet width, height, particles = [];\nlet stability = 50;\n\nfunction resize() {\n width = canvas.width = window.innerWidth;\n height = canvas.height = window.innerHeight;\n}\n\nwindow.addEventListener('resize', resize);\nresize();\n\nclass Particle {\n constructor(x, y) {\n this.// (Removed forbrevity in JSON string) This logic will be expanded for the full implementation\n this.x = x;\n this.y = y;\n this.vx = (Math.random() - 0.5) * 2;\n this.vy = (Math.random() - 0.5) * 2;\n this.size = Math.random() * 3 + 1;\n this.color = '#fff';\n this.isLeader = Math.random() > 0.95;\n this.targetX = x;\n this.targetY = y;\n }\n\n update() {\n if (this.isLeader) {\n this.vx += (this.targetX - this.x) * 0.01;\n this.vy += (this.targetY - this.y) * 0.01;\n } else {\n // Follow the leader\n let leader = particles[0];\n this.vx += (leader.x - this.x) * 0.001;\n this.vy += (leader.y - this.y) * 0.001;\n }\n this.vx *= 0.98;\n this.vy *= 0.98;\n this.x += this.vx;\n this.y += this.vy;\n }\n\n draw() {\n ctx.fillStyle = this.color;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, this.size, 0, Math.PI * 2);\n ctx.fill();\n }\n}\n\nfunction init() {\n particles = [];\n for (let i = 0; i < 500; i++) {\n particles.push(new Particle(Math.random() * width, Math.random() * height));\n }\n}\n\nfunction animate() {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';\n ctx.fillRect(0, 0, width, height);\n\n particles.forEach(p => {\n p.update();\n p.draw();\n }\n );\n\n requestAnimationFrame(animate);\n}\n\ninit();\nanimate();\n\ncanvas.addEventListener('mousedown', (e) => {\n stability -= 10;\n if (stability < 0) stability = 0;\n \n // Trigger a 'chaos' event\n particles.forEach(p =>
\n \n
\n\n
\n El Teatro del Poder
\nHaz clic para redistribuir la \"estabilidad\"\n
\n\n \n
\n ESTADO: EQUILIBRIO PRECARIO
\n