<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Princess Elara's Choice: A Royal Adventure</title>
    <link rel="stylesheet" href="style.css"> </head>
<body>

<div id="game-container">
        
        <div id="title-screen" class="screen">
            <h1 class="game-title">? Princess Elara's Choice ?</h1>
            <p class="subtitle">A Royal Choose Your Own Adventure</p>
            <button id="start-button">Begin the Reign</button>
        </div>

<div id="status-display">
                <p>Status: **Act 1**</p>
            </div>
        </div>

<div id="end-screen" class="screen hidden">
            <h2 id="end-title"></h2>
            <p id="end-text"></p>
            <button onclick="startGame()">Play Again?</button>
        </div>

</div>

</body>
</html>

/*
 * --------------------------------
 * GLOBAL & LAYOUT
 * --------------------------------
 */

:root {
    --color-primary-dark: #3a2b1c; /* Deep Brown/Leather */
    --color-secondary-gold: #cfa861; /* Rich Gold */
    --color-text-light: #f5f5dc; /* Off-White/Parchment */
    --color-text-dark: #1e1e1e;
    --font-serif: "Georgia", serif;
    --font-sans: "Arial", sans-serif;
    --border-radius: 8px;
}

body {
    font-family: var(--font-serif);
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
}

#game-container {
    width: 90%;
    max-width: 800px; /* Max width for readability */
    padding: 30px;
    background: linear-gradient(145deg, #5c442d, #4a3423); /* Soft gradient for depth */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 5px var(--color-secondary-gold); /* Shadow and a gold border */
    border-radius: var(--border-radius);
    text-align: center;
}

.screen {
    transition: opacity 0.5s ease-in-out;
}

.hidden {
    display: none;
    opacity: 0;
}

/*
 * --------------------------------
 * TITLE SCREEN
 * --------------------------------
 */

.game-title {
    font-family: var(--font-sans);
    font-size: 3.5em;
    color: var(--color-secondary-gold);
    text-shadow: 2px 2px var(--color-primary-dark);
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.subtitle {
    font-size: 1.2em;
    margin-bottom: 40px;
    font-style: italic;
    color: var(--color-text-light);
}

/*
 * --------------------------------
 * GAME INTERFACE (Story & Choices)
 * --------------------------------
 */

#story-area {
    background-color: var(--color-text-light); /* Parchment effect */
    color: var(--color-text-dark);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px;
    min-height: 150px;
    text-align: left;
    line-height: 1.6;
    font-size: 1.1em;
}

#story-text {
    margin: 0;
    white-space: pre-wrap; /* Ensures line breaks in the JS are respected */
}

#choice-area {
    display: flex;
    flex-direction: column;
    }

// --- 1. GAME DATA: The Story Scenes ---
// This object holds all the story nodes, keyed by their scene ID.
// Format: { text: "...", choices: [ { text: "...", nextScene: "..." }, ... ] ] }
const GAME_DATA = {
    // === TITLE SCREEN ===
    'start': {
        text: "The day has come. Your father, King Theron, has summoned you to the Grand Hall. Your kingdom needs an alliance, and you must choose a husband from the three suitors presented.",
        choices: [
            { text: "Enter the Grand Hall", nextScene: 's1_valerius_intro' }
        ]
    },

// =================================================================
    // === SUITOR 1: PRINCE VALERIUS (The Traditionalist) ACTS 1-3 ===
    // =================================================================

's1_valerius_intro': {
        text: "You are led to the Throne Room. Prince Valerius, heir to a powerful and wealthy neighboring kingdom, stands tall in polished armor. King Theron introduces him: 'My daughter, this is Prince Valerius. He represents stability and duty.' Valerius bows with textbook grace and says, 'I offer you a life of honor, respect, and a throne that will never falter.'",
        choices: [
            { text: "Accept: 'I accept, Prince Valerius. Duty calls.'", nextScene: 's1_valerius_act2' },
            { text: "Reject: 'My heart seeks a different path, Your Highness. I must decline.'", nextScene: 's2_kaelan_intro' } // Move to the next suitor
        ]
    },

's1_valerius_act2': {
        text: "The first month of marriage was characterized by impeccable organization and scheduled affairs. Affection is measured, but your status as Queen is revered. Valerius enters, his expression serious. 'My Queen, we have fulfilled our political duties. Now, our people wait. We must secure the line of succession. Will you embrace your primary duty?'",
        choices: [
            { text: "Embrace Duty: 'I understand. We must provide the realm with an heir.'", nextScene: 's1_valerius_end_secure' },
            { text: "Delay: 'My duties extend beyond the nursery, Valerius. Let us wait.'", nextScene: 's1_valerius_end_stifled' }
        ]
    },
    
    // --- Valerius Endings ---
    's1_valerius_end_secure': {
        isEnding: true,
        title: "The Secure Queen",
        text: "You bore a healthy son and two daughters. Your life became a tapestry of state dinners and diplomacy. Valerius treats you with unwavering respect, and your kingdom is the most stable in the land. Looking into the silver mirror, you see a woman in a heavy, jewel-encrusted gown. You touch the fabric. 'I did my duty. The throne is secure.' A tear of relief falls."
    },
    's1_valerius_end_stifled': {
        isEnding: true,
        title: "The Stifled Queen",
        text: "Your refusal to immediately provide an heir cooled Valerius's respect into polite indifference. Your days are spent attending court formalities, a symbolic figurehead in a cage of silk. Looking into the gold-framed mirror, you see flawless hair and makeup. You whisper, 'I am magnificent. Yet, I am alone in this perfect silence.' A tear of loneliness falls."
    },

// =================================================================
    // === SUITOR 2: LORD KAELAN (The Intellectual) ACTS 1-3 ===
    // =================================================================
    
    's2_kaelan_intro': {
        text: "You move to the King's library, filled with scrolls. King Theron presents Lord Kaelan, a man of staggering intellect: 'He offers wisdom, not armies.' Kaelan, with ink-stained fingers, says, 'Princess Elara, I offer you a shared journey of discovery. We will govern with logic and knowledge.'",
        choices: [
            { text: "Accept: 'I am intrigued, Lord Kaelan. Let us pursue knowledge together.'", nextScene: 's2_kaelan_act2' },
            { text: "Reject: 'My kingdom requires more than books, my Lord. I must decline.'", nextScene: 's3_ronan_intro' } // Move to the next suitor
        ]
    },

's2_kaelan_act2': {
        text: "The first month was stimulating but chaotic. You spent your days debating politics and astronomy, but Kaelan is deeply distracted by his studies. He looks up from a manuscript. 'My Queen, my mind is consumed by the cosmos. But we must provide an heir to inherit the wisdom of our house.'",
        choices: [
            { text: "Commit to Partnership: 'Yes. But only if we share the responsibility, not just the conception.'", nextScene: 's2_kaelan_end_enlightened' },
            { text: "Commit to Independence: 'I will, but my own studies and duties must remain my priority.'", nextScene: 's2_kaelan_end_free' }
        ]
    },

// --- Kaelan Endings ---
    's2_kaelan_end_enlightened': {
        isEnding: true,
        title: "The Enlightened Co-Ruler",
        text: "You and Kaelan had one precocious daughter. By sharing responsibilities, you taught him to balance logic with practical governance. You rule as true equals, and your kingdom is a beacon of intellectual progress. Looking into a simple, functional mirror, you smile. 'He taught me to think. I taught him to live.' A tear of pride falls."
    },
    's2_kaelan_end_free': {
        isEnding: true,
        title: "The Free Scholar",
        text: "Kaelan retreated into his studies, respecting your independence, and you had a child eventually, but the family unit remained distant. You dedicated your life to mastering ancient languages. Looking into a dusty, antique mirror in the tower chamber, you hold a worn book. You whisper, 'I know all the answers... but who is here to hear them?' A tear of pity falls."
    },

// =================================================================
    // === SUITOR 3: SIR RONAN (The Adventurer) ACTS 1-3 ===
    // =================================================================

's3_ronan_intro': {
        text: "Finally, you are led to the castle courtyard. King Theron hesitantly introduces Sir Ronan, a common-born Knight in travel-worn leathers: 'He brings no title, only a fearless heart.' Ronan grins: 'I can't offer you gold, but I can offer you passion and excitement. Marry me, and you'll never be bored.'",
        choices: [
            { text: "Accept: 'I am tired of gilded cages. I choose passion and bravery.'", nextScene: 's3_ronan_act2' },
            { text: "Reject: 'A kingdom needs stability, not excitement. I must decline.'", nextScene: 's_escape_choice' } // *** LEADS TO THE NEW SECRET PATH ***
        ]
    },

's3_ronan_act2': {
        text: "The first month was a whirlwind of passion and travel; you spent your time riding and sleeping under the stars. Ronan is intensely affectionate but reckless. He sits beside you, tracing the lines on your hand. 'My love, the roads are dangerous for a single soul, let alone a growing family. Will you give up the open road and come home, so we can bring forth an heir?'",
        choices: [
            { text: "Embrace Adventure: 'The road is our home. We will raise our child under the sky!'", nextScene: 's3_ronan_end_wild' },
            { text: "Demand Stability: 'Yes. We must choose stability. Let's build a castle and a life.'", nextScene: 's3_ronan_end_settled' }
        ]
    },

// --- Ronan Endings ---
    's3_ronan_end_wild': {
        isEnding: true,
        title: "The Wild Spirit",
        text: "You never truly settled. Your life was filled with danger, romance, and freedom. Ronan was always by your side, a legendary figure. Looking into a hand-mirror she carries in her saddlebag, you see a weathered face and a confident smile. You chuckle. 'I have no crown, and no castle. But I have loved, and I have lived.' A tear of joy falls."
    },
    's3_ronan_end_settled': {
        isEnding: true,
        title: "The Settled Heroine",
        text: "Ronan struggled to stay put, but for your sake, he built a solid barony. Your love story slowly faded into routine as he took frequent 'hunting trips.' You are safe, but yearn for the old passion. Looking into a newly polished, ornate mirror, you sigh softly. 'We bought safety with our fire. Was the price too high?' A tear of regret falls."
    },

// =================================================================
    // === SECRET PATH: ESCAPE ===
    // =================================================================

's_escape_choice': {
        text: "King Theron sighs, defeated by your rejections. As you turn away, you spot a forgotten servant's passage behind a tapestry—a tiny crack in your life of duty. Do you finally accept the inevitable, or seize the chance for freedom?",
        choices: [
            { text: "Accept Fate: Return to your chamber to rule alone.", nextScene: 'end_solitary_sovereign' },
            { text: "Seize Freedom: Slip into the dark passage and run.", nextScene: 's_escape_secret_life' } // The Secret Ending trigger
        ]
    },

's_escape_secret_life': {
        isEnding: true,
        title: "? The Secret Life of Elara",
        text: "You traded velvet and gold for wool and grit. Your father searched, but you vanished into the common world, earning your bread as a bookbinder's apprentice in a quiet coastal town. You are simply 'Elsie' now—unburdened, unknown, and truly alive. Looking into a small, cracked mirror above a washbasin, you see a face dusted with flour, your hair simply tied back. There is no crown, only peace. You smile, a genuine, private smile. 'The kingdom got its queen. But I got myself.' A tear of **pure contentment** falls."
    },

// --- Revised Solitary Ending (still an option) ---
    'end_solitary_sovereign': {
        isEnding: true,
        title: "The Solitary Sovereign",
        text: "You rejected all three suitors and remained the sole ruler of your kingdom. You secured your borders through shrewd alliances and your treasury swelled, but your throne room remains quiet. Looking into your own mirror, you see the face of a great, solitary Queen. You whisper, 'I chose the kingdom above all. It is done.' A tear of sacrifice falls."
    }
};

// --- 2. GAME FUNCTIONS ---
// (The functions below remain the same as the original game.js)

function showScreen(screenId) {
    document.getElementById('title-screen').classList.add('hidden');
    document.getElementById('game-screen').classList.add('hidden');
    document.getElementById('end-screen').classList.add('hidden');
    
    document.getElementById(screenId).classList.remove('hidden');
}

function init() {
    showScreen('title-screen');
    document.getElementById('start-button').onclick = startGame;
}

function startGame() {
    showScreen('game-screen');
    loadScene('start');
}

function loadScene(sceneId) {
    const scene = GAME_DATA[sceneId];
    if (!scene) {
        console.error('Scene not found:', sceneId);
        return;
    }

if (scene.isEnding) {
        return displayEnding(scene.title, scene.text);
    }

document.getElementById('story-text').innerHTML = scene.text;

const choiceArea = document.getElementById('choice-area');
    choiceArea.innerHTML = '';

scene.choices.forEach(choice => {
        const button = document.createElement('button');
        button.classList.add('choice-button');
        button.textContent = choice.text;
        
        button.onclick = () => loadScene(choice.nextScene);
        
        choiceArea.appendChild(button);
    });
}

function displayEnding(title, text) {
    document.getElementById('end-title').textContent = title;
    document.getElementById('end-text').textContent = text;
    showScreen('end-screen');
}

// --- 3. EXECUTION ---
document.addEventListener('DOMContentLoaded', init);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground