Upload 3 files

app.js

@@ -0,0 +1,846 @@
+// Resonancia Rioplatense - Game Engine
+// Rewritten with robust event handling and debugging
+
+let game;
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('DOM loaded, initializing game...');
+    game = new GameEngine();
+});
+
+class GameEngine {
+    constructor() {
+        this.gameState = 'landing';
+        this.player = null;
+        this.resonanceSystem = new ResonanceSystem();
+        this.narrativeEngine = new NarrativeEngine();
+        this.eventSystem = new EventSystem();
+        
+        console.log('GameEngine constructor called');
+        this.init();
+    }
+
+    init() {
+        console.log('Initializing game...');
+        this.setupEventListeners();
+        this.loadGameData();
+        this.startGameLoop();
+        console.log('Game initialized');
+    }
+
+    setupEventListeners() {
+        console.log('Setting up event listeners...');
+        
+        // Use setTimeout to ensure DOM is ready
+        setTimeout(() => {
+            // Landing page button
+            const startButton = document.getElementById('start-game');
+            console.log('Start button:', startButton);
+            if (startButton) {
+                startButton.onclick = () => {
+                    console.log('Start button clicked');
+                    this.transitionToScreen('character-creation');
+                };
+            }
+
+            // Character creation button
+            const createButton = document.getElementById('create-character');
+            console.log('Create button:', createButton);
+            if (createButton) {
+                createButton.onclick = () => {
+                    console.log('Create character button clicked');
+                    this.createCharacter();
+                };
+            }
+
+            // Decision buttons - use event delegation
+            document.onclick = (e) => {
+                if (e.target.classList.contains('decision-btn')) {
+                    console.log('Decision button clicked:', e.target.dataset.decision);
+                    const decision = e.target.dataset.decision;
+                    this.processDecision(decision);
+                }
+
+                // Event joining
+                if (e.target.classList.contains('event-join')) {
+                    console.log('Event join button clicked');
+                    const eventElement = e.target.closest('.event-item');
+                    const eventName = eventElement.querySelector('h5').textContent;
+                    this.joinEvent(eventName);
+                }
+
+                // Modal controls
+                if (e.target.classList.contains('modal-close')) {
+                    console.log('Modal close clicked');
+                    this.closeModal();
+                }
+                
+                if (e.target.id === 'continue-game') {
+                    console.log('Continue game clicked');
+                    this.closeModal();
+                    this.generateNextScenario();
+                }
+
+                // NPC interactions
+                if (e.target.closest('.npc-item')) {
+                    console.log('NPC clicked');
+                    const npcElement = e.target.closest('.npc-item');
+                    const npcId = npcElement.dataset.npc;
+                    this.showNPCInfo(npcId);
+                }
+            };
+        }, 100);
+    }
+
+    transitionToScreen(screenId) {
+        console.log('Transitioning to screen:', screenId);
+        
+        // Hide all screens
+        const screens = document.querySelectorAll('.screen');
+        screens.forEach(screen => {
+            screen.classList.remove('active');
+        });
+        
+        // Show target screen
+        const targetScreen = document.getElementById(screenId);
+        if (targetScreen) {
+            targetScreen.classList.add('active');
+            this.gameState = screenId;
+            console.log('Successfully transitioned to:', screenId);
+        } else {
+            console.error('Screen not found:', screenId);
+        }
+    }
+
+    createCharacter() {
+        console.log('Creating character...');
+        
+        const nameInput = document.getElementById('player-name');
+        const techSelect = document.getElementById('tech-background');
+        const culturalRadio = document.querySelector('input[name="cultural-preference"]:checked');
+        const socialSelect = document.getElementById('social-style');
+        
+        const name = nameInput ? nameInput.value || 'Jugador' : 'Jugador';
+        const techBackground = techSelect ? techSelect.value : 'frontend';
+        const culturalPreference = culturalRadio ? culturalRadio.value : 'mixed';
+        const socialStyle = socialSelect ? socialSelect.value : 'adaptable';
+
+        console.log('Character data:', { name, techBackground, culturalPreference, socialStyle });
+
+        this.player = new Player({
+            name,
+            techBackground,
+            culturalPreference,
+            socialStyle
+        });
+
+        this.updatePlayerDisplay();
+        this.transitionToScreen('game-interface');
+        
+        // Give some time for the transition, then generate scenario
+        setTimeout(() => {
+            this.generateNextScenario();
+        }, 500);
+    }
+
+    updatePlayerDisplay() {
+        if (!this.player) return;
+
+        console.log('Updating player display');
+
+        const nameElement = document.getElementById('player-display-name');
+        const roleElement = document.getElementById('player-role');
+        
+        if (nameElement) nameElement.textContent = this.player.name;
+        if (roleElement) roleElement.textContent = this.getRoleDescription(this.player.techBackground);
+        
+        this.updateStats();
+        this.updateNPCRelationships();
+        this.updateResonanceDisplay();
+    }
+
+    updateStats() {
+        if (!this.player) return;
+
+        const stats = ['carrera', 'cultura', 'social', 'bienestar'];
+        stats.forEach(stat => {
+            const value = this.player.stats[stat];
+            const fillElement = document.getElementById(`${stat}-fill`);
+            const valueElement = document.getElementById(`${stat}-value`);
+            
+            if (fillElement && valueElement) {
+                fillElement.style.width = `${value}%`;
+                valueElement.textContent = value;
+            }
+        });
+    }
+
+    updateNPCRelationships() {
+        if (!this.player) return;
+
+        Object.entries(this.player.relationships).forEach(([npcId, relationship]) => {
+            const npcElement = document.querySelector(`[data-npc="${npcId}"]`);
+            if (npcElement) {
+                const fillElement = npcElement.querySelector('.relationship-fill');
+                if (fillElement) {
+                    fillElement.style.width = `${relationship}%`;
+                }
+            }
+        });
+    }
+
+    updateResonanceDisplay() {
+        const resonanceWaves = document.querySelectorAll('.resonance-wave');
+        const activeWaves = Math.min(this.resonanceSystem.getResonanceLevel(), resonanceWaves.length);
+        
+        resonanceWaves.forEach((wave, index) => {
+            if (index < activeWaves) {
+                wave.classList.add('active');
+            } else {
+                wave.classList.remove('active');
+            }
+        });
+
+        const resonanceText = document.querySelector('.resonance-text');
+        if (resonanceText) {
+            resonanceText.textContent = this.resonanceSystem.getResonanceDescription();
+        }
+    }
+
+    processDecision(decisionKey) {
+        console.log('Processing decision:', decisionKey);
+        
+        const currentScenario = this.narrativeEngine.getCurrentScenario();
+        if (!currentScenario) {
+            console.log('No current scenario');
+            return;
+        }
+        
+        const decision = currentScenario.decisions.find(d => d.key === decisionKey);
+        
+        if (!decision) {
+            console.log('Decision not found:', decisionKey);
+            return;
+        }
+
+        console.log('Found decision:', decision);
+
+        // Apply stat changes
+        if (decision.effects) {
+            Object.entries(decision.effects).forEach(([stat, change]) => {
+                this.player.changeStat(stat, change);
+            });
+        }
+
+        // Update NPC relationships
+        if (decision.relationshipChanges) {
+            Object.entries(decision.relationshipChanges).forEach(([npcId, change]) => {
+                this.player.changeRelationship(npcId, change);
+            });
+        }
+
+        // Add to resonance system
+        this.resonanceSystem.addDecision(decision);
+
+        // Show resonance visualization
+        this.showResonanceEffect(decision);
+
+        // Update displays
+        this.updatePlayerDisplay();
+
+        // Generate next scenario after a delay
+        setTimeout(() => {
+            this.generateNextScenario();
+        }, 3000);
+    }
+
+    showResonanceEffect(decision) {
+        console.log('Showing resonance effect');
+        const modal = document.getElementById('resonance-modal');
+        if (modal) {
+            modal.classList.add('active');
+            this.drawResonanceVisualization(decision);
+            
+            // Auto-close after 2 seconds
+            setTimeout(() => {
+                this.closeModal();
+            }, 2000);
+        }
+    }
+
+    drawResonanceVisualization(decision) {
+        const canvas = document.getElementById('resonance-canvas');
+        if (!canvas) return;
+        
+        const ctx = canvas.getContext('2d');
+        
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+        
+        // Draw decision impact as expanding circles
+        let radius = 10;
+        const maxRadius = 150;
+        
+        const animate = () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // Draw multiple resonance waves
+            for (let i = 0; i < 3; i++) {
+                const waveRadius = radius - (i * 30);
+                if (waveRadius > 0) {
+                    ctx.beginPath();
+                    ctx.arc(centerX, centerY, waveRadius, 0, 2 * Math.PI);
+                    ctx.strokeStyle = `rgba(33, 128, 141, ${0.8 - (waveRadius / maxRadius)})`;
+                    ctx.lineWidth = 2;
+                    ctx.stroke();
+                }
+            }
+            
+            radius += 2;
+            if (radius < maxRadius) {
+                requestAnimationFrame(animate);
+            }
+        };
+        
+        animate();
+    }
+
+    generateNextScenario() {
+        console.log('Generating next scenario');
+        const scenario = this.narrativeEngine.generateScenario(this.player, this.resonanceSystem);
+        this.displayScenario(scenario);
+        this.updateAvailableEvents();
+    }
+
+    displayScenario(scenario) {
+        console.log('Displaying scenario:', scenario);
+        
+        const locationElement = document.getElementById('current-location');
+        const descriptionElement = document.getElementById('location-description');
+        const storyElement = document.getElementById('story-content');
+        const decisionsContainer = document.getElementById('decisions-container');
+        
+        if (locationElement) locationElement.textContent = scenario.location.name;
+        if (descriptionElement) descriptionElement.textContent = scenario.location.description;
+        if (storyElement) storyElement.innerHTML = `<p>${scenario.narrative}</p>`;
+
+        if (decisionsContainer) {
+            decisionsContainer.innerHTML = `
+                <div class="decision-prompt">
+                    <p>${scenario.prompt}</p>
+                </div>
+                <div class="decisions-list">
+                    ${scenario.decisions.map(decision => `
+                        <button class="decision-btn" data-decision="${decision.key}">
+                            <span class="decision-text">${decision.text}</span>
+                            <span class="decision-impact">${this.formatDecisionImpact(decision.effects)}</span>
+                        </button>
+                    `).join('')}
+                </div>
+            `;
+        }
+    }
+
+    formatDecisionImpact(effects) {
+        if (!effects) return '';
+        
+        return Object.entries(effects)
+            .map(([stat, change]) => {
+                const prefix = change > 0 ? '+' : '';
+                const statName = stat.charAt(0).toUpperCase() + stat.slice(1);
+                return `${prefix}${statName}`;
+            })
+            .join(' ');
+    }
+
+    updateAvailableEvents() {
+        const eventsList = document.getElementById('events-list');
+        if (!eventsList || !this.player) return;
+        
+        const availableEvents = this.eventSystem.getAvailableEvents(this.player);
+        
+        eventsList.innerHTML = availableEvents.map(event => `
+            <div class="event-item ${event.available ? 'available' : 'locked'}">
+                <h5>${event.name}</h5>
+                <p>${event.description}</p>
+                ${event.available 
+                    ? `<span class="event-date">${event.date}</span>
+                       <button class="btn btn--sm btn--secondary event-join">Asistir</button>`
+                    : `<span class="event-requirement">${event.requirement}</span>`
+                }
+            </div>
+        `).join('');
+    }
+
+    joinEvent(eventName) {
+        console.log('Joining event:', eventName);
+        const result = this.eventSystem.joinEvent(eventName, this.player);
+        if (result) {
+            this.showEventResult(result);
+            this.resonanceSystem.addEvent(result);
+            this.updatePlayerDisplay();
+        }
+    }
+
+    showEventResult(result) {
+        const modal = document.getElementById('event-modal');
+        const title = document.getElementById('event-title');
+        const content = document.getElementById('event-result-content');
+        
+        if (title) title.textContent = result.eventName;
+        if (content) {
+            content.innerHTML = `
+                <div class="event-result">
+                    <p>${result.narrative}</p>
+                    <div class="event-outcomes">
+                        <h4>Resultados:</h4>
+                        <ul>
+                            ${result.outcomes.map(outcome => `<li>${outcome}</li>`).join('')}
+                        </ul>
+                    </div>
+                    ${result.newConnections ? `
+                        <div class="new-connections">
+                            <h4>Nuevas Conexiones:</h4>
+                            <p>${result.newConnections}</p>
+                        </div>
+                    ` : ''}
+                </div>
+            `;
+        }
+        
+        if (modal) modal.classList.add('active');
+    }
+
+    closeModal() {
+        document.querySelectorAll('.modal').forEach(modal => {
+            modal.classList.remove('active');
+        });
+    }
+
+    showNPCInfo(npcId) {
+        const npcData = {
+            sofia: "Sofía es una frontend developer especializada en React. Viene de trabajar en San Francisco y lidera el tech team.",
+            mateo: "Mateo es product manager, ex-consultor de BCG obsesionado con métricas y user acquisition.",
+            luna: "Luna es artista digital freelance que organiza eventos culturales alternativos en la escena underground."
+        };
+        
+        const info = npcData[npcId] || "Información no disponible";
+        alert(info);
+    }
+
+    getRoleDescription(techBackground) {
+        const roles = {
+            frontend: 'Frontend Developer',
+            backend: 'Backend Developer',
+            fullstack: 'Full Stack Developer',
+            product: 'Product Manager',
+            design: 'UX/UI Designer',
+            data: 'Data Scientist'
+        };
+        return roles[techBackground] || 'Desarrollador';
+    }
+
+    loadGameData() {
+        this.gameData = {
+            locations: [
+                {
+                    name: "Vicente López",
+                    description: "Hub tech moderno con startups y coworking spaces",
+                    events: ["North Valley Meetup", "Startup Showcase", "After Office Tech"]
+                },
+                {
+                    name: "San Isidro", 
+                    description: "Zona cultural con venues indies y espacios de arte",
+                    events: ["Showcase Indie", "Exhibición Arte Digital", "Centro Cultural"]
+                },
+                {
+                    name: "Olivos",
+                    description: "Barrio residencial con cafeterías y espacios de networking",
+                    events: ["Coffee Networking", "Encuentro Freelancers", "Workshop Design"]
+                }
+            ],
+            culturalPhrases: [
+                "¿Todo bien?", "Dale, joya", "Un golazo ese proyecto", "Re copado el evento",
+                "¿Qué tal?", "Está bárbaro", "Me parece genial", "Súper interesante"
+            ]
+        };
+    }
+
+    startGameLoop() {
+        setInterval(() => {
+            if (this.gameState === 'game-interface' && this.player) {
+                this.resonanceSystem.update();
+                this.updateResonanceDisplay();
+            }
+        }, 1000);
+    }
+}
+
+class Player {
+    constructor({ name, techBackground, culturalPreference, socialStyle }) {
+        this.name = name;
+        this.techBackground = techBackground;
+        this.culturalPreference = culturalPreference;
+        this.socialStyle = socialStyle;
+        
+        this.stats = {
+            carrera: this.getInitialStat('carrera'),
+            cultura: this.getInitialStat('cultura'),
+            social: this.getInitialStat('social'),
+            bienestar: this.getInitialStat('bienestar')
+        };
+        
+        this.relationships = {
+            sofia: 50,
+            mateo: 40,
+            luna: 30
+        };
+        
+        this.memory = [];
+        this.achievements = [];
+        
+        console.log('Player created:', this);
+    }
+
+    getInitialStat(statName) {
+        const baseStats = { carrera: 50, cultura: 30, social: 40, bienestar: 60 };
+        let value = baseStats[statName];
+        
+        if (statName === 'carrera') {
+            value += ['frontend', 'backend', 'fullstack'].includes(this.techBackground) ? 10 : 0;
+            value += this.techBackground === 'product' ? 15 : 0;
+        }
+        
+        if (statName === 'cultura') {
+            value += this.culturalPreference === 'music' ? 20 : 0;
+            value += this.culturalPreference === 'art' ? 15 : 0;
+        }
+        
+        if (statName === 'social') {
+            value += this.socialStyle === 'networking' ? 20 : 0;
+            value += this.socialStyle === 'introvert' ? -10 : 0;
+        }
+        
+        return Math.max(0, Math.min(100, value));
+    }
+
+    changeStat(statName, change) {
+        if (this.stats[statName] !== undefined) {
+            this.stats[statName] = Math.max(0, Math.min(100, this.stats[statName] + change));
+            
+            const fillElement = document.getElementById(`${statName}-fill`);
+            if (fillElement) {
+                fillElement.classList.add(change > 0 ? 'increase' : 'decrease');
+                setTimeout(() => {
+                    fillElement.classList.remove('increase', 'decrease');
+                }, 500);
+            }
+        }
+    }
+
+    changeRelationship(npcId, change) {
+        if (this.relationships[npcId] !== undefined) {
+            this.relationships[npcId] = Math.max(0, Math.min(100, this.relationships[npcId] + change));
+        }
+    }
+
+    addMemory(event) {
+        this.memory.push({
+            event,
+            timestamp: Date.now(),
+            impact: event.impact || 'minor'
+        });
+    }
+}
+
+class ResonanceSystem {
+    constructor() {
+        this.decisions = [];
+        this.resonanceLevel = 0;
+        this.activeWaves = [];
+    }
+
+    addDecision(decision) {
+        const resonanceWave = {
+            decision,
+            timestamp: Date.now(),
+            strength: this.calculateDecisionStrength(decision),
+            decayRate: 0.1
+        };
+        
+        this.activeWaves.push(resonanceWave);
+        this.updateResonanceLevel();
+    }
+
+    addEvent(event) {
+        const eventWave = {
+            event,
+            timestamp: Date.now(),
+            strength: event.resonanceImpact || 0.5,
+            decayRate: 0.05
+        };
+        
+        this.activeWaves.push(eventWave);
+        this.updateResonanceLevel();
+    }
+
+    calculateDecisionStrength(decision) {
+        const weights = { minor: 0.3, moderate: 0.6, major: 1.0, life_changing: 1.5 };
+        return weights[decision.weight] || 0.6;
+    }
+
+    update() {
+        const now = Date.now();
+        
+        this.activeWaves = this.activeWaves.filter(wave => {
+            const age = (now - wave.timestamp) / 1000;
+            wave.strength *= Math.exp(-wave.decayRate * age);
+            return wave.strength > 0.01;
+        });
+        
+        this.updateResonanceLevel();
+    }
+
+    updateResonanceLevel() {
+        this.resonanceLevel = this.activeWaves.reduce((total, wave) => total + wave.strength, 0);
+    }
+
+    getResonanceLevel() {
+        return Math.min(3, Math.floor(this.resonanceLevel));
+    }
+
+    getResonanceDescription() {
+        const level = this.getResonanceLevel();
+        const descriptions = [
+            "Calma total, sin ondas activas",
+            "Ligeras ondas de resonancia",
+            "Resonancia moderada en progreso",
+            "Intensa actividad de resonancia"
+        ];
+        return descriptions[level] || descriptions[0];
+    }
+
+    getResonanceEffects(player) {
+        const effects = [];
+        
+        if (this.resonanceLevel > 1.5) {
+            effects.push("unexpected_opportunity");
+        }
+        
+        if (this.resonanceLevel > 2.0) {
+            effects.push("personality_echo");
+        }
+        
+        return effects;
+    }
+}
+
+class NarrativeEngine {
+    constructor() {
+        this.currentScenario = null;
+        this.scenarioHistory = [];
+        this.scenarioTemplates = this.initializeScenarios();
+    }
+
+    initializeScenarios() {
+        return [
+            {
+                id: 'startup_first_day',
+                location: { name: 'Vicente López', description: 'Hub tech moderno con startups y coworking spaces' },
+                narrative: 'Llegás a tu primer día en la nueva startup en Vicente López. El coworking space está lleno de energía, pantallas con código y el aroma de café de especialidad.',
+                prompt: 'Sofía, la frontend lead, se acerca durante el coffee break. Te comenta sobre un proyecto React que está armando y menciona que buscan alguien para el equipo.',
+                decisions: [
+                    {
+                        key: 'collaborate',
+                        text: '"Me copa la propuesta, ¿cuándo arrancamos?"',
+                        effects: { carrera: 10, social: 5 },
+                        relationshipChanges: { sofia: 15 },
+                        weight: 'moderate'
+                    },
+                    {
+                        key: 'cautious',
+                        text: '"Suena interesante, ¿me contás más detalles?"',
+                        effects: { bienestar: 5 },
+                        relationshipChanges: { sofia: 5 },
+                        weight: 'minor'
+                    },
+                    {
+                        key: 'independent',
+                        text: '"Estoy enfocado en mi proyecto actual, pero gracias"',
+                        effects: { carrera: 5, social: -5 },
+                        relationshipChanges: { sofia: -10 },
+                        weight: 'moderate'
+                    }
+                ]
+            },
+            {
+                id: 'cultural_invitation',
+                location: { name: 'San Isidro', description: 'Zona cultural con venues indies y espacios de arte' },
+                narrative: 'Luna te escribe por Slack sobre un showcase de El Mató a un Policía Motorizado en un venue íntimo de San Isidro.',
+                prompt: 'Es viernes por la tarde y tenés que elegir entre quedarte terminando un sprint o ir al show.',
+                decisions: [
+                    {
+                        key: 'show',
+                        text: '"Dale, me re copa. ¿Nos vemos ahí?"',
+                        effects: { cultura: 15, bienestar: 10, carrera: -5 },
+                        relationshipChanges: { luna: 20 },
+                        weight: 'moderate'
+                    },
+                    {
+                        key: 'work_first',
+                        text: '"Me encantaría, pero tengo que cerrar este sprint"',
+                        effects: { carrera: 10, bienestar: -5 },
+                        relationshipChanges: { luna: -5 },
+                        weight: 'minor'
+                    },
+                    {
+                        key: 'compromise',
+                        text: '"Si termino temprano, me sumo al after"',
+                        effects: { carrera: 5, cultura: 5 },
+                        relationshipChanges: { luna: 5 },
+                        weight: 'minor'
+                    }
+                ]
+            }
+        ];
+    }
+
+    generateScenario(player, resonanceSystem) {
+        const availableScenarios = this.scenarioTemplates.filter(scenario => 
+            !this.scenarioHistory.includes(scenario.id)
+        );
+        
+        let selectedScenario;
+        if (availableScenarios.length === 0) {
+            selectedScenario = this.generateProceduralScenario(player, resonanceSystem);
+        } else {
+            selectedScenario = availableScenarios[0]; // Simple selection for now
+        }
+        
+        this.currentScenario = selectedScenario;
+        this.scenarioHistory.push(selectedScenario.id);
+        
+        return selectedScenario;
+    }
+
+    generateProceduralScenario(player, resonanceSystem) {
+        const locations = [
+            { name: 'Vicente López', description: 'Hub tech moderno con startups y coworking spaces' },
+            { name: 'San Isidro', description: 'Zona cultural con venues indies y espacios de arte' },
+            { name: 'Olivos', description: 'Barrio residencial con cafeterías y espacios de networking' }
+        ];
+        
+        return {
+            id: `procedural_${Date.now()}`,
+            location: locations[Math.floor(Math.random() * locations.length)],
+            narrative: `Una nueva oportunidad aparece en tu camino. Las ondas de resonancia de tus decisiones pasadas están convergiendo...`,
+            prompt: "¿Cómo vas a responder a esta nueva situación?",
+            decisions: [
+                {
+                    key: 'bold',
+                    text: '"Voy con todo, sin dudas"',
+                    effects: { carrera: 10, social: 5, bienestar: -5 },
+                    weight: 'moderate'
+                },
+                {
+                    key: 'balanced',
+                    text: '"Analizo bien antes de decidir"',
+                    effects: { carrera: 5, bienestar: 5 },
+                    weight: 'minor'
+                },
+                {
+                    key: 'creative',
+                    text: '"Busco una solución creativa"',
+                    effects: { cultura: 10, social: 5 },
+                    weight: 'moderate'
+                }
+            ]
+        };
+    }
+
+    getCurrentScenario() {
+        return this.currentScenario;
+    }
+}
+
+class EventSystem {
+    constructor() {
+        this.events = [
+            {
+                name: "North Valley Meetup",
+                description: "Networking tech en Vicente López",
+                date: "Viernes 18:30",
+                requirements: { carrera: 20, social: 15 },
+                outcomes: ["networking_boost", "tech_knowledge", "startup_contacts"],
+                resonanceImpact: 0.7
+            },
+            {
+                name: "Innovation Tech Week",
+                description: "Semana tech más importante de BA",
+                date: "Próxima semana",
+                requirements: { carrera: 40, social: 30 },
+                outcomes: ["major_networking", "tech_skills_gain", "startup_opportunity"],
+                resonanceImpact: 1.2
+            },
+            {
+                name: "Showcase Indie",
+                description: "Show en venue de San Isidro",
+                date: "Sábado 21:00",
+                requirements: { cultura: 25, social: 20 },
+                outcomes: ["cultural_inspiration", "creative_boost", "underground_contacts"],
+                resonanceImpact: 0.8
+            }
+        ];
+    }
+
+    getAvailableEvents(player) {
+        return this.events.map(event => {
+            const available = this.checkRequirements(event.requirements, player);
+            return {
+                ...event,
+                available,
+                requirement: available ? null : this.formatRequirements(event.requirements, player)
+            };
+        });
+    }
+
+    checkRequirements(requirements, player) {
+        return Object.entries(requirements).every(([stat, required]) => 
+            player.stats[stat] >= required
+        );
+    }
+
+    formatRequirements(requirements, player) {
+        const unmet = Object.entries(requirements).find(([stat, required]) => 
+            player.stats[stat] < required
+        );
+        
+        if (unmet) {
+            const [stat, required] = unmet;
+            const statName = stat.charAt(0).toUpperCase() + stat.slice(1);
+            return `Requiere ${statName}: ${required}`;
+        }
+        
+        return "";
+    }
+
+    joinEvent(eventName, player) {
+        const event = this.events.find(e => e.name === eventName);
+        if (!event || !this.checkRequirements(event.requirements, player)) {
+            return null;
+        }
+
+        return {
+            eventName: event.name,
+            narrative: `Participás en ${event.name} y la experiencia es increíble. Conectás con gente nueva y aprendés un montón.`,
+            outcomes: ["Expandiste tu red de contactos", "Aprendiste sobre nuevas tecnologías"],
+            statChanges: { carrera: 10, social: 8 },
+            relationshipChanges: {},
+            newConnections: "Conociste a un founder de una startup prometedora",
+            resonanceImpact: event.resonanceImpact
+        };
+    }
+}

index.html

@@ -1,19 +1,273 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resonancia Rioplatense - Simulador de Vida</title>
+    <link rel="stylesheet" href="style.css">
+    <meta name="description" content="Un simulador de vida revolucionario ambientado en la zona norte de Buenos Aires">
+</head>
+<body>
+    <!-- Landing Page -->
+    <div id="landing-page" class="screen active">
+        <div class="intro-container">
+            <div class="resonance-visual">
+                <div class="wave wave1"></div>
+                <div class="wave wave2"></div>
+                <div class="wave wave3"></div>
+            </div>
+            <h1 class="game-title">Resonancia Rioplatense</h1>
+            <p class="game-subtitle">Cada decisión genera ondas que transforman tu futuro</p>
+            <div class="intro-text">
+                <p>En la zona norte de Buenos Aires, donde la innovación tech se encuentra con la cultura indie, cada elección que tomás crea ondas de resonancia que se propagan en el tiempo.</p>
+                <p>¿Estás listo para descubrir cómo tus decisiones moldean tu destino?</p>
+            </div>
+            <button class="btn btn--primary btn--lg" id="start-game">Comenzar Experiencia</button>
+        </div>
+    </div>
+
+    <!-- Character Creation -->
+    <div id="character-creation" class="screen">
+        <div class="container">
+            <h2>Creá tu Perfil</h2>
+            <p>Definí tu trasfondo tech y preferencias culturales en la zona norte de Buenos Aires</p>
+            
+            <div class="creation-form">
+                <div class="form-group">
+                    <label class="form-label">Nombre</label>
+                    <input type="text" class="form-control" id="player-name" placeholder="Tu nombre">
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">Especialización Tech</label>
+                    <select class="form-control" id="tech-background">
+                        <option value="frontend">Frontend Developer - React/Vue specialist</option>
+                        <option value="backend">Backend Developer - Node.js/Python expert</option>
+                        <option value="fullstack">Full Stack Developer - Versatilidad total</option>
+                        <option value="product">Product Manager - Strategy & growth</option>
+                        <option value="design">UX/UI Designer - User experience focus</option>
+                        <option value="data">Data Scientist - AI & analytics</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">¿Qué te mueve más en la cultura rioplatense?</label>
+                    <div class="preference-grid">
+                        <label class="preference-item">
+                            <input type="radio" name="cultural-preference" value="music">
+                            <span>Música indie (Mi Amigo Invencible, El Mató)</span>
+                        </label>
+                        <label class="preference-item">
+                            <input type="radio" name="cultural-preference" value="art">
+                            <span>Arte digital y nuevos medios</span>
+                        </label>
+                        <label class="preference-item">
+                            <input type="radio" name="cultural-preference" value="literature">
+                            <span>Literatura contemporánea</span>
+                        </label>
+                        <label class="preference-item">
+                            <input type="radio" name="cultural-preference" value="mixed">
+                            <span>Un mix de todo</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">Tu approach social</label>
+                    <select class="form-control" id="social-style">
+                        <option value="networking">Super networker - Conocés a todo el mundo</option>
+                        <option value="selective">Selectivo - Círculo íntimo de confianza</option>
+                        <option value="adaptable">Adaptable - Según el contexto</option>
+                        <option value="introvert">Introvertido - Más observador que protagonista</option>
+                    </select>
+                </div>
+
+                <button class="btn btn--primary btn--lg btn--full-width" id="create-character">Comenzar Aventura</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Game Interface -->
+    <div id="game-interface" class="screen">
+        <div class="game-layout">
+            <!-- Stats Panel -->
+            <div class="stats-panel">
+                <div class="player-info">
+                    <h3 id="player-display-name">Jugador</h3>
+                    <p id="player-role">Desarrollador</p>
+                </div>
+                
+                <div class="stats-container">
+                    <div class="stat-item">
+                        <label>Carrera</label>
+                        <div class="stat-bar">
+                            <div class="stat-fill" id="carrera-fill"></div>
+                            <span class="stat-value" id="carrera-value">50</span>
+                        </div>
+                    </div>
+                    <div class="stat-item">
+                        <label>Cultura</label>
+                        <div class="stat-bar">
+                            <div class="stat-fill" id="cultura-fill"></div>
+                            <span class="stat-value" id="cultura-value">30</span>
+                        </div>
+                    </div>
+                    <div class="stat-item">
+                        <label>Social</label>
+                        <div class="stat-bar">
+                            <div class="stat-fill" id="social-fill"></div>
+                            <span class="stat-value" id="social-value">40</span>
+                        </div>
+                    </div>
+                    <div class="stat-item">
+                        <label>Bienestar</label>
+                        <div class="stat-bar">
+                            <div class="stat-fill" id="bienestar-fill"></div>
+                            <span class="stat-value" id="bienestar-value">60</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="resonance-indicator">
+                    <h4>Ondas de Resonancia</h4>
+                    <div class="resonance-waves" id="resonance-display">
+                        <div class="resonance-wave active"></div>
+                        <div class="resonance-wave"></div>
+                        <div class="resonance-wave"></div>
+                    </div>
+                    <p class="resonance-text">Tus decisiones están creando ondas...</p>
+                </div>
+            </div>
+
+            <!-- Main Game Area -->
+            <div class="game-content">
+                <div class="location-header">
+                    <h2 id="current-location">Vicente López</h2>
+                    <p id="location-description">Hub tech moderno con startups y coworking spaces</p>
+                </div>
+
+                <div class="narrative-section">
+                    <div class="story-text" id="story-content">
+                        <p>Llegás a tu primer día en la nueva startup en Vicente López. El coworking space está lleno de energía, pantallas con código y el aroma de café de especialidad. Tu decisión de mudarte a la zona norte ya está generando las primeras ondas de resonancia...</p>
+                    </div>
+                </div>
+
+                <div class="decisions-container" id="decisions-container">
+                    <div class="decision-prompt">
+                        <p>Sofía, la frontend lead, se acerca durante el coffee break. Te comenta sobre un proyecto React que está armando y menciona que buscan alguien para el equipo.</p>
+                    </div>
+                    <div class="decisions-list">
+                        <button class="decision-btn" data-decision="collaborate">
+                            <span class="decision-text">"Me copa la propuesta, ¿cuándo arrancamos?"</span>
+                            <span class="decision-impact">+Carrera +Social</span>
+                        </button>
+                        <button class="decision-btn" data-decision="cautious">
+                            <span class="decision-text">"Suena interesante, ¿me contás más detalles?"</span>
+                            <span class="decision-impact">+Bienestar</span>
+                        </button>
+                        <button class="decision-btn" data-decision="independent">
+                            <span class="decision-text">"Estoy enfocado en mi proyecto actual, pero gracias"</span>
+                            <span class="decision-impact">+Carrera -Social</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="npc-panel">
+                    <h4>Personas Importantes</h4>
+                    <div class="npc-list">
+                        <div class="npc-item" data-npc="sofia">
+                            <div class="npc-avatar">S</div>
+                            <div class="npc-info">
+                                <span class="npc-name">Sofía</span>
+                                <span class="npc-role">Frontend Developer</span>
+                                <div class="relationship-bar">
+                                    <div class="relationship-fill" style="width: 50%"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="npc-item" data-npc="mateo">
+                            <div class="npc-avatar">M</div>
+                            <div class="npc-info">
+                                <span class="npc-name">Mateo</span>
+                                <span class="npc-role">Product Manager</span>
+                                <div class="relationship-bar">
+                                    <div class="relationship-fill" style="width: 40%"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="npc-item" data-npc="luna">
+                            <div class="npc-avatar">L</div>
+                            <div class="npc-info">
+                                <span class="npc-name">Luna</span>
+                                <span class="npc-role">Digital Artist</span>
+                                <div class="relationship-bar">
+                                    <div class="relationship-fill" style="width: 30%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Event Panel -->
+            <div class="events-panel">
+                <h4>Próximos Eventos</h4>
+                <div class="events-list" id="events-list">
+                    <div class="event-item available">
+                        <h5>North Valley Meetup</h5>
+                        <p>Networking tech en Vicente López</p>
+                        <span class="event-date">Viernes 18:30</span>
+                        <button class="btn btn--sm btn--secondary event-join">Asistir</button>
+                    </div>
+                    <div class="event-item locked">
+                        <h5>Innovation Tech Week</h5>
+                        <p>Semana tech más importante de BA</p>
+                        <span class="event-requirement">Requiere Carrera: 40</span>
+                    </div>
+                    <div class="event-item available">
+                        <h5>Showcase Indie</h5>
+                        <p>Show en venue de San Isidro</p>
+                        <span class="event-date">Sábado 21:00</span>
+                        <button class="btn btn--sm btn--secondary event-join">Asistir</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Resonance Visualization Modal -->
+    <div id="resonance-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Ondas de Resonancia</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="resonance-visualization">
+                    <canvas id="resonance-canvas" width="400" height="300"></canvas>
+                </div>
+                <div class="resonance-explanation">
+                    <p>Tu decisión ha generado ondas que se propagan en el tiempo. Observá cómo pueden afectar eventos futuros de maneras inesperadas.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Event Result Modal -->
+    <div id="event-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="event-title">Resultado del Evento</h3>
+            </div>
+            <div class="modal-body">
+                <div id="event-result-content">
+                    <!-- Event results will be populated here -->
+                </div>
+                <button class="btn btn--primary" id="continue-game">Continuar</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>

style.css

@@ -1,28 +1,1290 @@
+
+:root {
+  /* Colors */
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+  --color-select-caret: rgba(19, 52, 59, 0.8);
+
+  /* Common style patterns */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for opacity control */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+
+  /* Typography */
+  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --letter-spacing-tight: -0.01em;
+
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-base: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
+    0 2px 4px -1px rgba(0, 0, 0, 0.02);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
+    0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Layout */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+}
+
+/* Dark mode colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: rgba(31, 33, 33, 1);
+    --color-surface: rgba(38, 40, 40, 1);
+    --color-text: rgba(245, 245, 245, 1);
+    --color-text-secondary: rgba(167, 169, 169, 0.7);
+    --color-primary: rgba(50, 184, 198, 1);
+    --color-primary-hover: rgba(45, 166, 178, 1);
+    --color-primary-active: rgba(41, 150, 161, 1);
+    --color-secondary: rgba(119, 124, 124, 0.15);
+    --color-secondary-hover: rgba(119, 124, 124, 0.25);
+    --color-secondary-active: rgba(119, 124, 124, 0.3);
+    --color-border: rgba(119, 124, 124, 0.3);
+    --color-error: rgba(255, 84, 89, 1);
+    --color-success: rgba(50, 184, 198, 1);
+    --color-warning: rgba(230, 129, 97, 1);
+    --color-info: rgba(167, 169, 169, 1);
+    --color-focus-ring: rgba(50, 184, 198, 0.4);
+    --color-btn-primary-text: rgba(19, 52, 59, 1);
+    --color-card-border: rgba(119, 124, 124, 0.2);
+    --color-card-border-inner: rgba(119, 124, 124, 0.15);
+    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --button-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-border-secondary: rgba(119, 124, 124, 0.2);
+    --color-select-caret: rgba(245, 245, 245, 0.8);
+
+    /* Common style patterns - updated for dark mode */
+    --focus-ring: 0 0 0 3px var(--color-focus-ring);
+    --focus-outline: 2px solid var(--color-primary);
+    --status-bg-opacity: 0.15;
+    --status-border-opacity: 0.25;
+    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+    /* RGB versions for dark mode */
+    --color-success-rgb: 50, 184, 198;
+    --color-error-rgb: 255, 84, 89;
+    --color-warning-rgb: 230, 129, 97;
+    --color-info-rgb: 167, 169, 169;
+  }
+}
+
+/* Data attribute for manual theme switching */
+[data-color-scheme="dark"] {
+  --color-background: rgba(31, 33, 33, 1);
+  --color-surface: rgba(38, 40, 40, 1);
+  --color-text: rgba(245, 245, 245, 1);
+  --color-text-secondary: rgba(167, 169, 169, 0.7);
+  --color-primary: rgba(50, 184, 198, 1);
+  --color-primary-hover: rgba(45, 166, 178, 1);
+  --color-primary-active: rgba(41, 150, 161, 1);
+  --color-secondary: rgba(119, 124, 124, 0.15);
+  --color-secondary-hover: rgba(119, 124, 124, 0.25);
+  --color-secondary-active: rgba(119, 124, 124, 0.3);
+  --color-border: rgba(119, 124, 124, 0.3);
+  --color-error: rgba(255, 84, 89, 1);
+  --color-success: rgba(50, 184, 198, 1);
+  --color-warning: rgba(230, 129, 97, 1);
+  --color-info: rgba(167, 169, 169, 1);
+  --color-focus-ring: rgba(50, 184, 198, 0.4);
+  --color-btn-primary-text: rgba(19, 52, 59, 1);
+  --color-card-border: rgba(119, 124, 124, 0.15);
+  --color-card-border-inner: rgba(119, 124, 124, 0.15);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  --color-border-secondary: rgba(119, 124, 124, 0.2);
+  --color-select-caret: rgba(245, 245, 245, 0.8);
+
+  /* Common style patterns - updated for dark mode */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for dark mode */
+  --color-success-rgb: 50, 184, 198;
+  --color-error-rgb: 255, 84, 89;
+  --color-warning-rgb: 230, 129, 97;
+  --color-info-rgb: 167, 169, 169;
+}
+
+[data-color-scheme="light"] {
+  --color-background: rgba(252, 252, 249, 1);
+  --color-surface: rgba(255, 255, 253, 1);
+  --color-text: rgba(19, 52, 59, 1);
+  --color-text-secondary: rgba(98, 108, 113, 1);
+  --color-primary: rgba(33, 128, 141, 1);
+  --color-primary-hover: rgba(29, 116, 128, 1);
+  --color-primary-active: rgba(26, 104, 115, 1);
+  --color-secondary: rgba(94, 82, 64, 0.12);
+  --color-secondary-hover: rgba(94, 82, 64, 0.2);
+  --color-secondary-active: rgba(94, 82, 64, 0.25);
+  --color-border: rgba(94, 82, 64, 0.2);
+  --color-btn-primary-text: rgba(252, 252, 249, 1);
+  --color-card-border: rgba(94, 82, 64, 0.12);
+  --color-card-border-inner: rgba(94, 82, 64, 0.12);
+  --color-error: rgba(192, 21, 47, 1);
+  --color-success: rgba(33, 128, 141, 1);
+  --color-warning: rgba(168, 75, 47, 1);
+  --color-info: rgba(98, 108, 113, 1);
+  --color-focus-ring: rgba(33, 128, 141, 0.4);
+
+  /* RGB versions for light mode */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+}
+
+/* Base styles */
+html {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  letter-spacing: var(--letter-spacing-tight);
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+  font-size: var(--font-size-4xl);
+}
+h2 {
+  font-size: var(--font-size-3xl);
+}
+h3 {
+  font-size: var(--font-size-2xl);
+}
+h4 {
+  font-size: var(--font-size-xl);
+}
+h5 {
+  font-size: var(--font-size-lg);
+}
+h6 {
+  font-size: var(--font-size-md);
 }
 
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+  margin: 0 0 var(--space-16) 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+code,
+pre {
+  font-family: var(--font-family-mono);
+  font-size: calc(var(--font-size-base) * 0.95);
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-sm);
+}
+
+code {
+  padding: var(--space-1) var(--space-4);
+}
+
+pre {
+  padding: var(--space-16);
+  margin: var(--space-16) 0;
+  overflow: auto;
+  border: 1px solid var(--color-border);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-16);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+}
+
+.btn--primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn--primary:active {
+  background: var(--color-primary-active);
+}
+
+.btn--secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.btn--secondary:hover {
+  background: var(--color-secondary-hover);
+}
+
+.btn--secondary:active {
+  background: var(--color-secondary-active);
+}
+
+.btn--outline {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.btn--outline:hover {
+  background: var(--color-secondary);
+}
+
+.btn--sm {
+  padding: var(--space-4) var(--space-12);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn--lg {
+  padding: var(--space-10) var(--space-20);
+  font-size: var(--font-size-lg);
+  border-radius: var(--radius-md);
+}
+
+.btn--full-width {
+  width: 100%;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Form elements */
+.form-control {
+  display: block;
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  transition: border-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+textarea.form-control {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+}
+
+select.form-control {
+  padding: var(--space-8) var(--space-12);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: var(--select-caret-light);
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 16px;
+  padding-right: var(--space-32);
+}
+
+/* Add a dark mode specific caret */
+@media (prefers-color-scheme: dark) {
+  select.form-control {
+    background-image: var(--select-caret-dark);
+  }
+}
+
+/* Also handle data-color-scheme */
+[data-color-scheme="dark"] select.form-control {
+  background-image: var(--select-caret-dark);
+}
+
+[data-color-scheme="light"] select.form-control {
+  background-image: var(--select-caret-light);
+}
+
+.form-control:focus {
+  border-color: var(--color-primary);
+  outline: var(--focus-outline);
 }
 
+.form-label {
+  display: block;
+  margin-bottom: var(--space-8);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.form-group {
+  margin-bottom: var(--space-16);
+}
+
+/* Card component */
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease-standard);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.card__body {
+  padding: var(--space-16);
+}
+
+.card__header,
+.card__footer {
+  padding: var(--space-16);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+/* Status indicators - simplified with CSS variables */
+.status {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-6) var(--space-12);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.status--success {
+  background-color: rgba(
+    var(--color-success-rgb, 33, 128, 141),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-success);
+  border: 1px solid
+    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
+}
+
+.status--error {
+  background-color: rgba(
+    var(--color-error-rgb, 192, 21, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-error);
+  border: 1px solid
+    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
+}
+
+.status--warning {
+  background-color: rgba(
+    var(--color-warning-rgb, 168, 75, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-warning);
+  border: 1px solid
+    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
+}
+
+.status--info {
+  background-color: rgba(
+    var(--color-info-rgb, 98, 108, 113),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-info);
+  border: 1px solid
+    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
+}
+
+/* Container layout */
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--space-16);
+  padding-left: var(--space-16);
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: var(--container-sm);
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: var(--container-md);
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: var(--container-lg);
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: var(--container-xl);
+  }
+}
+
+/* Utility classes */
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-4 {
+  gap: var(--space-4);
+}
+.gap-8 {
+  gap: var(--space-8);
+}
+.gap-16 {
+  gap: var(--space-16);
+}
+
+.m-0 {
+  margin: 0;
+}
+.mt-8 {
+  margin-top: var(--space-8);
+}
+.mb-8 {
+  margin-bottom: var(--space-8);
+}
+.mx-8 {
+  margin-left: var(--space-8);
+  margin-right: var(--space-8);
+}
+.my-8 {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+
+.p-0 {
+  padding: 0;
+}
+.py-8 {
+  padding-top: var(--space-8);
+  padding-bottom: var(--space-8);
+}
+.px-8 {
+  padding-left: var(--space-8);
+  padding-right: var(--space-8);
+}
+.py-16 {
+  padding-top: var(--space-16);
+  padding-bottom: var(--space-16);
+}
+.px-16 {
+  padding-left: var(--space-16);
+  padding-right: var(--space-16);
+}
+
+.block {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Dark mode specifics */
+[data-color-scheme="dark"] .btn--outline {
+  border: 1px solid var(--color-border-secondary);
+}
+
+@font-face {
+  font-family: 'FKGroteskNeue';
+  src: url('https://www.perplexity.ai/fonts/FKGroteskNeue.woff2')
+    format('woff2');
+}
+
+/* Game-specific styles extending the design system */
+
+.screen {
+    display: none;
+    min-height: 100vh;
+}
+
+.screen.active {
+    display: block;
+}
+
+/* Landing Page Styles */
+#landing-page {
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-background) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.intro-container {
+    max-width: 600px;
+    padding: var(--space-32);
+    position: relative;
+    z-index: 2;
+}
+
+.resonance-visual {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    margin: 0 auto var(--space-32);
+}
+
+.wave {
+    position: absolute;
+    border: 2px solid var(--color-btn-primary-text);
+    border-radius: 50%;
+    opacity: 0.7;
+    animation: pulse 3s infinite;
+}
+
+.wave1 { width: 60px; height: 60px; top: 70px; left: 70px; animation-delay: 0s; }
+.wave2 { width: 120px; height: 120px; top: 40px; left: 40px; animation-delay: 1s; }
+.wave3 { width: 180px; height: 180px; top: 10px; left: 10px; animation-delay: 2s; }
+
+@keyframes pulse {
+    0% { transform: scale(0.8); opacity: 0.8; }
+    50% { transform: scale(1.2); opacity: 0.4; }
+    100% { transform: scale(0.8); opacity: 0.8; }
+}
+
+.game-title {
+    font-size: var(--font-size-4xl);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-btn-primary-text);
+    margin-bottom: var(--space-16);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.game-subtitle {
+    font-size: var(--font-size-xl);
+    color: var(--color-btn-primary-text);
+    margin-bottom: var(--space-24);
+    opacity: 0.9;
+}
+
+.intro-text {
+    color: var(--color-btn-primary-text);
+    margin-bottom: var(--space-32);
+    opacity: 0.8;
+    line-height: 1.6;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Character Creation Styles */
+#character-creation {
+    background: var(--color-background);
+    padding: var(--space-32) 0;
 }
+
+#character-creation .container {
+    max-width: 600px;
+    text-align: center;
+}
+
+.creation-form {
+    text-align: left;
+    margin-top: var(--space-32);
+}
+
+.preference-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-12);
+    margin-top: var(--space-8);
+}
+
+.preference-item {
+    display: flex;
+    align-items: center;
+    padding: var(--space-12);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-base);
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.preference-item:hover {
+    background: var(--color-secondary);
+    border-color: var(--color-primary);
+}
+
+.preference-item input[type="radio"] {
+    margin-right: var(--space-8);
+}
+
+.preference-item input[type="radio"]:checked + span {
+    color: var(--color-primary);
+    font-weight: var(--font-weight-medium);
+}
+
+/* Game Interface Layout */
+.game-layout {
+    display: grid;
+    grid-template-columns: 280px 1fr 280px;
+    gap: var(--space-16);
+    min-height: 100vh;
+    background: var(--color-background);
+}
+
+@media (max-width: 1024px) {
+    .game-layout {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr auto;
+    }
+}
+
+/* Stats Panel */
+.stats-panel {
+    background: var(--color-surface);
+    border-right: 1px solid var(--color-border);
+    padding: var(--space-20);
+    overflow-y: auto;
+}
+
+.player-info {
+    text-align: center;
+    margin-bottom: var(--space-24);
+    padding-bottom: var(--space-16);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.player-info h3 {
+    margin-bottom: var(--space-4);
+}
+
+.player-info p {
+    color: var(--color-text-secondary);
+    margin: 0;
+}
+
+.stats-container {
+    margin-bottom: var(--space-24);
+}
+
+.stat-item {
+    margin-bottom: var(--space-16);
+}
+
+.stat-item label {
+    display: block;
+    font-weight: var(--font-weight-medium);
+    margin-bottom: var(--space-4);
+    font-size: var(--font-size-sm);
+}
+
+.stat-bar {
+    position: relative;
+    height: 24px;
+    background: var(--color-secondary);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+}
+
+.stat-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
+    border-radius: var(--radius-full);
+    transition: width var(--duration-normal) var(--ease-standard);
+    width: 50%;
+}
+
+.stat-value {
+    position: absolute;
+    right: var(--space-8);
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text);
+}
+
+.resonance-indicator {
+    background: var(--color-secondary);
+    padding: var(--space-16);
+    border-radius: var(--radius-base);
+}
+
+.resonance-indicator h4 {
+    margin-bottom: var(--space-12);
+    font-size: var(--font-size-sm);
+}
+
+.resonance-waves {
+    display: flex;
+    gap: var(--space-4);
+    margin-bottom: var(--space-8);
+}
+
+.resonance-wave {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--color-border);
+    transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.resonance-wave.active {
+    background: var(--color-primary);
+    box-shadow: 0 0 8px var(--color-primary);
+}
+
+.resonance-text {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-secondary);
+    margin: 0;
+}
+
+/* Game Content */
+.game-content {
+    padding: var(--space-20);
+    overflow-y: auto;
+}
+
+.location-header {
+    margin-bottom: var(--space-24);
+    text-align: center;
+}
+
+.location-header h2 {
+    color: var(--color-primary);
+    margin-bottom: var(--space-8);
+}
+
+.location-header p {
+    color: var(--color-text-secondary);
+    margin: 0;
+}
+
+.narrative-section {
+    background: var(--color-surface);
+    padding: var(--space-20);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-24);
+    border: 1px solid var(--color-card-border);
+}
+
+.story-text {
+    line-height: 1.6;
+}
+
+.decisions-container {
+    margin-bottom: var(--space-24);
+}
+
+.decision-prompt {
+    background: var(--color-secondary);
+    padding: var(--space-16);
+    border-radius: var(--radius-base);
+    margin-bottom: var(--space-16);
+    font-style: italic;
+}
+
+.decision-prompt p {
+    margin: 0;
+}
+
+.decisions-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+}
+
+.decision-btn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-16);
+    background: var(--color-surface);
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-base);
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-standard);
+    text-align: left;
+}
+
+.decision-btn:hover {
+    border-color: var(--color-primary);
+    background: var(--color-secondary);
+    transform: translateY(-1px);
+}
+
+.decision-btn:active {
+    transform: translateY(0);
+}
+
+.decision-text {
+    flex: 1;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text);
+}
+
+.decision-impact {
+    font-size: var(--font-size-xs);
+    color: var(--color-primary);
+    font-weight: var(--font-weight-medium);
+    background: var(--color-secondary);
+    padding: var(--space-4) var(--space-8);
+    border-radius: var(--radius-sm);
+}
+
+.npc-panel {
+    background: var(--color-surface);
+    padding: var(--space-20);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-card-border);
+}
+
+.npc-panel h4 {
+    margin-bottom: var(--space-16);
+    text-align: center;
+}
+
+.npc-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+}
+
+.npc-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-12);
+    padding: var(--space-12);
+    background: var(--color-secondary);
+    border-radius: var(--radius-base);
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.npc-item:hover {
+    background: var(--color-secondary-hover);
+}
+
+.npc-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    color: var(--color-btn-primary-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: var(--font-weight-bold);
+}
+
+.npc-info {
+    flex: 1;
+}
+
+.npc-name {
+    display: block;
+    font-weight: var(--font-weight-medium);
+    margin-bottom: var(--space-2);
+}
+
+.npc-role {
+    display: block;
+    font-size: var(--font-size-xs);
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-4);
+}
+
+.relationship-bar {
+    height: 4px;
+    background: var(--color-border);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+}
+
+.relationship-fill {
+    height: 100%;
+    background: var(--color-primary);
+    transition: width var(--duration-normal) var(--ease-standard);
+}
+
+/* Events Panel */
+.events-panel {
+    background: var(--color-surface);
+    border-left: 1px solid var(--color-border);
+    padding: var(--space-20);
+    overflow-y: auto;
+}
+
+.events-panel h4 {
+    text-align: center;
+    margin-bottom: var(--space-16);
+}
+
+.events-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+}
+
+.event-item {
+    padding: var(--space-16);
+    border-radius: var(--radius-base);
+    border: 1px solid var(--color-border);
+    transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.event-item.available {
+    background: var(--color-secondary);
+    border-color: var(--color-primary);
+}
+
+.event-item.locked {
+    background: var(--color-border);
+    opacity: 0.6;
+}
+
+.event-item h5 {
+    margin-bottom: var(--space-8);
+    color: var(--color-primary);
+}
+
+.event-item p {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    margin: 0 0 var(--space-8) 0;
+}
+
+.event-date {
+    font-size: var(--font-size-xs);
+    color: var(--color-primary);
+    font-weight: var(--font-weight-medium);
+}
+
+.event-requirement {
+    font-size: var(--font-size-xs);
+    color: var(--color-warning);
+    font-weight: var(--font-weight-medium);
+}
+
+.event-join {
+    margin-top: var(--space-8);
+    width: 100%;
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal.active {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    max-width: 600px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--color-card-border);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-20);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.modal-header h3 {
+    margin: 0;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: var(--font-size-3xl);
+    cursor: pointer;
+    color: var(--color-text-secondary);
+    transition: color var(--duration-fast) var(--ease-standard);
+}
+
+.modal-close:hover {
+    color: var(--color-text);
+}
+
+.modal-body {
+    padding: var(--space-20);
+}
+
+.resonance-visualization {
+    text-align: center;
+    margin-bottom: var(--space-16);
+}
+
+.resonance-explanation {
+    text-align: center;
+    color: var(--color-text-secondary);
+}
+
+#resonance-canvas {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-base);
+    background: var(--color-background);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .game-layout {
+        grid-template-columns: 1fr;
+        gap: 0;
+    }
+    
+    .stats-panel,
+    .events-panel {
+        border: none;
+        border-bottom: 1px solid var(--color-border);
+        padding: var(--space-16);
+    }
+    
+    .game-content {
+        padding: var(--space-16);
+    }
+    
+    .preference-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .decisions-list {
+        gap: var(--space-8);
+    }
+    
+    .decision-btn {
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--space-8);
+    }
+    
+    .decision-impact {
+        text-align: center;
+    }
+}
+
+/* Loading animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-in {
+    animation: fadeIn var(--duration-normal) var(--ease-standard);
+}
+
+/* Success/Error states */
+.stat-fill.increase {
+    animation: statIncrease 0.5s ease-out;
+}
+
+.stat-fill.decrease {
+    animation: statDecrease 0.5s ease-out;
+}
+
+@keyframes statIncrease {
+    0% { background: var(--color-success); }
+    100% { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover)); }
+}
+
+@keyframes statDecrease {
+    0% { background: var(--color-error); }
+    100% { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover)); }
+}
+
+/* Hover effects for interactivity */
+.npc-item:hover .npc-avatar {
+    transform: scale(1.1);
+    transition: transform var(--duration-fast) var(--ease-standard);
+}
+
+.event-item.available:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+/* Focus states for accessibility */
+.decision-btn:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: 2px;
+}
+
+.event-join:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: 2px;
+}