<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Path to Enlightenment - RS Universe</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Georgia', serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #e8dcc4;
            padding: 20px;
        }

        .game-container {
            max-width: 700px;
            width: 100%;
            background: linear-gradient(180deg, #2d2d44 0%, #1a1a2e 100%);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 0 60px rgba(255, 200, 100, 0.15);
            border: 2px solid rgba(255, 200, 100, 0.2);
        }

        header {
            text-align: center;
            margin-bottom: 25px;
        }

        h1 {
            font-size: 2rem;
            color: #ffd700;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
            margin-bottom: 5px;
        }

        .subtitle {
            color: #a0a0b0;
            font-style: italic;
        }

        /* Progress/Karma bar */
        .stats-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }

        .stat {
            text-align: center;
        }

        .stat-label {
            font-size: 0.75rem;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .stat-value {
            font-size: 1.3rem;
            color: #ffd700;
            font-weight: bold;
        }

        .wisdom-bar {
            flex: 1;
            margin: 0 20px;
        }

        .wisdom-track {
            height: 12px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 6px;
            overflow: hidden;
        }

        .wisdom-fill {
            height: 100%;
            background: linear-gradient(90deg, #ffd700, #ffec8b);
            border-radius: 6px;
            transition: width 0.5s ease;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        /* Scene area */
        .scene {
            position: relative;
            min-height: 200px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            border: 1px solid rgba(255, 200, 100, 0.1);
        }

        .scene-icon {
            font-size: 4rem;
            text-align: center;
            margin-bottom: 15px;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .scene-title {
            font-size: 1.4rem;
            color: #ffd700;
            text-align: center;
            margin-bottom: 15px;
        }

        .scene-text {
            line-height: 1.8;
            text-align: center;
            color: #d0c8b8;
        }

        /* Choices */
        .choices {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .choice-btn {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
            border: 1px solid rgba(255, 215, 0, 0.3);
            color: #e8dcc4;
            padding: 15px 20px;
            border-radius: 10px;
            font-size: 1rem;
            font-family: 'Georgia', serif;
            cursor: pointer;
            transition: all 0.3s;
            text-align: left;
        }

        .choice-btn:hover {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.15));
            border-color: rgba(255, 215, 0, 0.6);
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2);
        }

        .choice-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* Teaching reveal */
        .teaching {
            background: rgba(255, 215, 0, 0.1);
            border-left: 4px solid #ffd700;
            padding: 15px 20px;
            margin: 20px 0;
            border-radius: 0 10px 10px 0;
            font-style: italic;
        }

        .teaching-label {
            font-size: 0.8rem;
            color: #ffd700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

        /* Continue button */
        .continue-btn {
            display: block;
            width: 100%;
            background: linear-gradient(135deg, #ffd700, #daa520);
            color: #1a1a2e;
            border: none;
            padding: 15px;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: bold;
            font-family: 'Georgia', serif;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 15px;
        }

        .continue-btn:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 30px rgba(255, 215, 0, 0.4);
        }

        /* Ending screen */
        .ending {
            text-align: center;
            padding: 30px;
        }

        .ending h2 {
            font-size: 2rem;
            color: #ffd700;
            margin-bottom: 20px;
        }

        .ending-icon {
            font-size: 5rem;
            margin-bottom: 20px;
            animation: glow 2s ease-in-out infinite;
        }

        @keyframes glow {
            0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); }
            50% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)); }
        }

        .final-wisdom {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .restart-btn {
            background: transparent;
            border: 2px solid #ffd700;
            color: #ffd700;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 1rem;
            font-family: 'Georgia', serif;
            cursor: pointer;
            transition: all 0.3s;
        }

        .restart-btn:hover {
            background: #ffd700;
            color: #1a1a2e;
        }

        footer {
            margin-top: 20px;
            color: #555;
            font-size: 0.85rem;
        }

        /* Lotus decorations */
        .lotus {
            position: absolute;
            opacity: 0.1;
            font-size: 3rem;
        }
        .lotus-1 { top: 10px; left: 10px; }
        .lotus-2 { bottom: 10px; right: 10px; }

        /* Mobile */
        @media (max-width: 600px) {
            .game-container {
                padding: 20px;
            }
            h1 {
                font-size: 1.6rem;
            }
            .stats-bar {
                flex-wrap: wrap;
                gap: 10px;
            }
            .wisdom-bar {
                width: 100%;
                margin: 10px 0;
                order: 3;
            }
        }
    </style>
</head>
<body>
    <a href="/games/" style="position:fixed;top:15px;left:15px;background:rgba(0,0,0,0.5);color:#fff;padding:8px 15px;border-radius:20px;text-decoration:none;font-size:0.9rem;z-index:100;">← Back</a>
    <div class="game-container">
        <header>
            <h1>Path to Enlightenment</h1>
            <p class="subtitle">The Journey of Siddhartha Gautama</p>
        </header>

        <div class="stats-bar">
            <div class="stat">
                <div class="stat-label">Chapter</div>
                <div class="stat-value" id="chapter">1</div>
            </div>
            <div class="wisdom-bar">
                <div class="stat-label" style="text-align: center; margin-bottom: 5px;">Wisdom</div>
                <div class="wisdom-track">
                    <div class="wisdom-fill" id="wisdomBar" style="width: 0%"></div>
                </div>
            </div>
            <div class="stat">
                <div class="stat-label">Karma</div>
                <div class="stat-value" id="karma">0</div>
            </div>
        </div>

        <div class="scene" id="scene">
            <span class="lotus lotus-1">🪷</span>
            <span class="lotus lotus-2">🪷</span>
            <!-- Content loaded by JS -->
        </div>

        <div id="choices" class="choices">
            <!-- Choices loaded by JS -->
        </div>

        <div id="teaching" class="teaching" style="display: none;">
            <div class="teaching-label">Buddhist Teaching</div>
            <div id="teachingText"></div>
        </div>

        <button id="continueBtn" class="continue-btn" style="display: none;">Continue Journey</button>
    </div>

    <footer>
        &copy; 2025 RS Universe. All rights reserved.
    </footer>

    <script>
        // Game state
        let currentScene = 0;
        let wisdom = 0;
        let karma = 0;

        // Story scenes
        const scenes = [
            {
                icon: "👶",
                title: "Birth of a Prince",
                text: "In the kingdom of Kapilavastu, Queen Maya gives birth to a son named Siddhartha. A wise sage prophesies: 'This child will become either a great king or a great spiritual teacher.' King Suddhodana, wanting his son to be king, shields him from all suffering.",
                choices: [
                    { text: "Accept life in the palace with gratitude", karma: 1, wisdom: 5 },
                    { text: "Wonder what lies beyond the palace walls", karma: 0, wisdom: 10 }
                ],
                teaching: "The First Noble Truth: Life contains suffering (Dukkha). Even in luxury, the seeds of questioning are planted."
            },
            {
                icon: "🏰",
                title: "The Four Sights",
                text: "Years pass. Prince Siddhartha, now married with a son, ventures outside the palace for the first time. He encounters an old man, a sick person, a corpse, and finally a wandering ascetic with a peaceful countenance.",
                choices: [
                    { text: "Return to the comfort of the palace", karma: -5, wisdom: 5 },
                    { text: "Contemplate the meaning of what you've seen", karma: 5, wisdom: 15 },
                    { text: "Seek out the wandering ascetic to learn more", karma: 10, wisdom: 20 }
                ],
                teaching: "Seeing reality clearly is the first step toward awakening. The ascetic's peace showed that liberation from suffering is possible."
            },
            {
                icon: "🌙",
                title: "The Great Renunciation",
                text: "At age 29, Siddhartha faces a profound choice. His heart is torn between his love for his family and his calling to find the end of suffering for all beings.",
                choices: [
                    { text: "Stay and fulfill your duties as prince and father", karma: 5, wisdom: 10 },
                    { text: "Leave at midnight to seek the truth", karma: 0, wisdom: 20 }
                ],
                teaching: "The Middle Way teaches balance, but sometimes the path requires difficult sacrifices. Siddhartha left not from lack of love, but from boundless compassion for all suffering beings."
            },
            {
                icon: "🧘",
                title: "Years of Seeking",
                text: "Siddhartha studies under great teachers and masters severe austerities. He fasts until near death, yet enlightenment eludes him. One day, a village girl offers him rice milk.",
                choices: [
                    { text: "Refuse - continue the path of extreme asceticism", karma: -5, wisdom: 5 },
                    { text: "Accept the offering with gratitude", karma: 10, wisdom: 25 }
                ],
                teaching: "The Middle Way: Avoid extremes of indulgence and self-denial. The body is the vessel for awakening and must be cared for."
            },
            {
                icon: "🌳",
                title: "Under the Bodhi Tree",
                text: "Strengthened, Siddhartha sits beneath a fig tree and vows not to rise until he finds the truth. Mara, the demon of illusion, sends armies of fear and temptation. Beautiful visions and terrifying demons assail him.",
                choices: [
                    { text: "Fight the demons with anger and force", karma: -10, wisdom: 5 },
                    { text: "Observe the visions without attachment or aversion", karma: 15, wisdom: 30 },
                    { text: "Touch the earth and call it as witness to your merit", karma: 20, wisdom: 35 }
                ],
                teaching: "The Earth-Touching Gesture (Bhumisparsha): When Mara demanded proof of Siddhartha's worthiness, he simply touched the earth. The earth itself bore witness to countless lifetimes of compassion."
            },
            {
                icon: "✨",
                title: "The Morning Star",
                text: "As the morning star rises, Siddhartha's mind becomes perfectly clear. He sees his past lives, understands the law of karma, and perceives the Four Noble Truths. He has become the Buddha - the Awakened One.",
                choices: [
                    { text: "Remain in blissful nirvana, beyond the world", karma: 0, wisdom: 20 },
                    { text: "Return to teach others the path to liberation", karma: 25, wisdom: 40 }
                ],
                teaching: "The Four Noble Truths: 1) Life contains suffering, 2) Suffering arises from craving, 3) Suffering can end, 4) The Eightfold Path leads to the end of suffering."
            },
            {
                icon: "☸️",
                title: "Turning the Wheel",
                text: "The Buddha travels to the Deer Park at Sarnath. There he finds five ascetics who had abandoned him when he accepted the rice milk. How will you approach them?",
                choices: [
                    { text: "Prove your enlightenment through displays of power", karma: -5, wisdom: 10 },
                    { text: "Simply share the truth with compassion and patience", karma: 20, wisdom: 35 }
                ],
                teaching: "The first sermon, 'Setting the Wheel of Dharma in Motion,' established the Three Jewels: Buddha (the teacher), Dharma (the teaching), and Sangha (the community)."
            },
            {
                icon: "🙏",
                title: "45 Years of Teaching",
                text: "For 45 years, the Buddha walks across India, teaching all who seek wisdom - kings and beggars, scholars and outcasts, men and women alike. Now, at age 80, he lies between two sal trees, preparing to pass into final nirvana.",
                choices: [
                    { text: "Ask the Buddha to remain longer in the world", karma: 5, wisdom: 15 },
                    { text: "Accept impermanence and ask for final teachings", karma: 15, wisdom: 40 }
                ],
                teaching: "The Buddha's final words: 'All conditioned things are impermanent. Work out your own salvation with diligence.' (Vayadhammā saṅkhārā, appamādena sampādethā)"
            }
        ];

        // DOM elements
        const sceneEl = document.getElementById('scene');
        const choicesEl = document.getElementById('choices');
        const teachingEl = document.getElementById('teaching');
        const teachingTextEl = document.getElementById('teachingText');
        const continueBtn = document.getElementById('continueBtn');
        const chapterEl = document.getElementById('chapter');
        const karmaEl = document.getElementById('karma');
        const wisdomBar = document.getElementById('wisdomBar');

        function updateStats() {
            chapterEl.textContent = currentScene + 1;
            karmaEl.textContent = karma;
            const maxWisdom = 200;
            wisdomBar.style.width = Math.min(100, (wisdom / maxWisdom) * 100) + '%';
        }

        function renderScene() {
            if (currentScene >= scenes.length) {
                showEnding();
                return;
            }

            const scene = scenes[currentScene];

            sceneEl.innerHTML = `
                <span class="lotus lotus-1">🪷</span>
                <span class="lotus lotus-2">🪷</span>
                <div class="scene-icon">${scene.icon}</div>
                <h2 class="scene-title">${scene.title}</h2>
                <p class="scene-text">${scene.text}</p>
            `;

            choicesEl.innerHTML = '';
            scene.choices.forEach((choice, index) => {
                const btn = document.createElement('button');
                btn.className = 'choice-btn';
                btn.textContent = choice.text;
                btn.onclick = () => makeChoice(index);
                choicesEl.appendChild(btn);
            });

            teachingEl.style.display = 'none';
            continueBtn.style.display = 'none';
            updateStats();
        }

        function makeChoice(index) {
            const scene = scenes[currentScene];
            const choice = scene.choices[index];

            karma += choice.karma;
            wisdom += choice.wisdom;

            // Disable all choice buttons
            document.querySelectorAll('.choice-btn').forEach(btn => {
                btn.disabled = true;
            });

            // Highlight selected choice
            document.querySelectorAll('.choice-btn')[index].style.borderColor = '#ffd700';
            document.querySelectorAll('.choice-btn')[index].style.background = 'rgba(255, 215, 0, 0.2)';

            // Show teaching
            teachingTextEl.textContent = scene.teaching;
            teachingEl.style.display = 'block';
            continueBtn.style.display = 'block';

            updateStats();
        }

        function nextScene() {
            currentScene++;
            renderScene();
        }

        function showEnding() {
            let title, message, icon;

            if (wisdom >= 180 && karma >= 80) {
                icon = "☸️";
                title = "Perfect Enlightenment";
                message = "Like Siddhartha, you have walked the path with wisdom and compassion. You understand that enlightenment is not an escape from the world, but a return to it with boundless love for all beings.";
            } else if (wisdom >= 120) {
                icon = "🪷";
                title = "The Lotus Blooms";
                message = "You have gained deep wisdom on your journey. Like the lotus that grows from mud to bloom in purity, you have transformed suffering into understanding. Continue practicing the Eightfold Path.";
            } else {
                icon = "🌱";
                title = "Seeds of Awakening";
                message = "Every journey begins with a single step. The seeds of wisdom have been planted in your mind. With continued practice and reflection, they will grow into the tree of enlightenment.";
            }

            sceneEl.innerHTML = `
                <div class="ending">
                    <div class="ending-icon">${icon}</div>
                    <h2>${title}</h2>
                    <p class="final-wisdom">${message}</p>
                    <p style="margin: 20px 0; color: #a0a0b0;">
                        Final Wisdom: ${wisdom} | Karma: ${karma}
                    </p>
                    <button class="restart-btn" onclick="restartGame()">Begin Again</button>
                </div>
            `;

            choicesEl.innerHTML = '';
            teachingEl.style.display = 'none';
            continueBtn.style.display = 'none';
        }

        function restartGame() {
            currentScene = 0;
            wisdom = 0;
            karma = 0;
            renderScene();
        }

        continueBtn.onclick = nextScene;

        // Start game
        renderScene();
    </script>
</body>
</html>
