CSS (styles.css): css Copy code body { font-family: Arial, sans-serif; } #game-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } #game-screen { width: 400px; height: 300px; background-color: #eee; padding: 20px; border: 2px solid #333; } #dialogue { margin-bottom: 10px; } button { display: block; width: 100%; margin-bottom: 10px; } JavaScript (script.js): javascript Copy code let dialogue = document.getElementById('dialogue'); let choice1 = document.getElementById('choice1'); let choice2 = document.getElementById('choice2'); let relationship = 50; // Initial relationship level let currentPlayer = 'Alex'; // Initial player function startGame() { dialogue.innerHTML = "Alex and Emma find themselves at a crossroads. What should they do?"; choice1.innerHTML = "Stay together"; choice2.innerHTML = "Go their separate ways"; } function makeChoice(choice) { if (choice === 1) { dialogue.innerHTML = currentPlayer + " decides to stay together."; relationship += 10; // Increase relationship level } else { dialogue.innerHTML = currentPlayer + " decides to go their separate ways."; relationship -= 10; // Decrease relationship level } updateRelationship(); // Update relationship display switchPlayer(); // Switch player } function updateRelationship() { if (relationship <= 0) { dialogue.innerHTML += "
Unfortunately, Alex and Emma's bond has been broken."; } else if (relationship >= 100) { dialogue.innerHTML += "
Alex and Emma's bond has never been stronger."; } else { dialogue.innerHTML += "
The strength of Alex and Emma's bond: " + relationship; } } function switchPlayer() { currentPlayer = (currentPlayer === 'Alex') ? 'Emma' : 'Alex'; } startGame(); // Start the game