Spaces:

oldjeff123
/

lol-test

Runtime error

App Files Files Community

oldjeff123 commited on Sep 26, 2025

Commit

cb98aa9

verified ·

1 Parent(s): d710f95

Upload app.py with huggingface_hub

Browse files

Files changed (1) hide show

app.py +918 -0

app.py ADDED Viewed

	@@ -0,0 +1,918 @@

+=== index.html ===
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dino RPG Runner</title>
+    <link rel="stylesheet" href="style.css">
+    <!-- Mandatory transformers.js Import -->
+    <script type="module">
+        import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.3';
+        window.transformersPipeline = pipeline;
+    </script>
+</head>
+<body>
+    <header>
+        <div class="header-content">
+            <h1>Dino RPG Runner</h1>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+                Built with anycoder
+            </a>
+        </div>
+    </header>
+    <main id="app-container">
+        <!-- Loading State Overlay -->
+        <div id="loading-overlay" class="overlay active">
+            <div class="loader"></div>
+            <p>Initializing AI components and game assets...</p>
+        </div>
+        <!-- Error State Overlay -->
+        <div id="error-overlay" class="overlay">
+            <p>An error occurred. Check console for details.</p>
+        </div>
+        <!-- Page 1: The Game -->
+        <section id="page-game" class="page active" data-page-index="0">
+            <div class="game-area">
+                <div class="ground"></div>
+                <div id="dino" class="dino">🦖</div>
+                <!-- Obstacles generated here -->
+                <div id="game-info">
+                    Score: <span id="game-score">0</span> | HP: <span id="dino-hp">3</span>
+                </div>
+                <div id="game-message" class="hidden">PRESS SPACE TO JUMP!</div>
+            </div>
+            <p class="navigation-hint">Use ⬅️ and ➡️ to switch pages.</p>
+        </section>
+        <!-- Page 2: Stats and AI Ability Tree -->
+        <section id="page-stats" class="page" data-page-index="1">
+            <h2>The Fossil Codex (Stats & Abilities)</h2>
+            <div class="stats-grid">
+                <div class="stat-box">
+                    <h3>Performance</h3>
+                    <p>Total Distance Run: <span id="stat-distance">0</span> m</p>
+                    <p>Obstacles Dodged: <span id="stat-dodged">0</span></p>
+                </div>
+                <div class="stat-box">
+                    <h3>Abilities</h3>
+                    <p>Current HP: <span id="ability-hp">3</span></p>
+                    <p>Available Level Up Points: <span id="ability-points">0</span></p>
+                    <button id="btn-upgrade-hp" disabled>Level Up HP (Cost: 1 Pt)</button>
+                </div>
+            </div>
+            <div class="ability-tree-generator">
+                <h3>Ancient Lore Generator (Powered by AI)</h3>
+                <p>Use our machine learning artifact to describe your next power-up!</p>
+                <input type="text" id="ability-prompt" placeholder="e.g., A better jump, stronger skin, faster speed...">
+                <button id="btn-generate-lore">Generate Lore</button>
+                <div id="lore-output" class="output-box">
+                    <p id="lore-text">The whispers of the ancient ones await your command...</p>
+                    <div id="lore-loading" class="loader small hidden"></div>
+                </div>
+            </div>
+        </section>
+        <!-- Page 3: Death Animation / Memorial -->
+        <section id="page-memorial" class="page" data-page-index="2">
+            <h2>The Graveyard of Giants</h2>
+            <p>A solemn place dedicated to the fallen heroes who dared to run...</p>
+            <div id="memorial-container">
+                <!-- Died dinosaurs fall here -->
+            </div>
+        </section>
+    </main>
+    <script src="index.js"></script>
+</body>
+</html>
+=== index.js ===
+// index.js content here
+// --- CONFIGURATION ---
+const DINO_JUMP_VELOCITY = -18;
+const GRAVITY = 1;
+const GAME_SPEED_START = 6;
+const OBSTACLE_INTERVAL_BASE = 1200; // ms
+const MODEL_NAME = 'Xenova/distilgpt2'; // Fast text generation model
+const LORE_PROMPT_PREFIX = "In the mythical world of Terra, describe the ancient dinosaur power-up known as ";
+// --- GLOBAL STATE ---
+let state = {
+    // Game State
+    currentPage: 0,
+    gameLoopId: null,
+    isGameRunning: false,
+    isJumping: false,
+    dinoY: 0,
+    dinoVY: 0,
+    score: 0,
+    hp: 3,
+    maxHp: 3,
+    gameSpeed: GAME_SPEED_START,
+    obstacleTimer: 0,
+    lastTime: 0,
+    // Stats State
+    totalDistance: 0,
+    obstaclesDodged: 0,
+    abilityPoints: 0,
+    // AI State
+    aiPipeline: null,
+    aiLoading: false,
+    hasWebGPU: false,
+};
+// --- DOM ELEMENTS ---
+const elements = {
+    appContainer: document.getElementById('app-container'),
+    dino: document.getElementById('dino'),
+    gameArea: document.querySelector('#page-game .game-area'),
+    gameScore: document.getElementById('game-score'),
+    dinoHp: document.getElementById('dino-hp'),
+    gameMessage: document.getElementById('game-message'),
+    pages: document.querySelectorAll('.page'),
+    loadingOverlay: document.getElementById('loading-overlay'),
+    errorOverlay: document.getElementById('error-overlay'),
+    // Stats Page
+    statDistance: document.getElementById('stat-distance'),
+    statDodged: document.getElementById('stat-dodged'),
+    abilityHp: document.getElementById('ability-hp'),
+    abilityPoints: document.getElementById('ability-points'),
+    btnUpgradeHp: document.getElementById('btn-upgrade-hp'),
+    // AI Elements
+    abilityPrompt: document.getElementById('ability-prompt'),
+    btnGenerateLore: document.getElementById('btn-generate-lore'),
+    loreText: document.getElementById('lore-text'),
+    loreLoading: document.getElementById('lore-loading'),
+    // Memorial Page
+    memorialContainer: document.getElementById('memorial-container'),
+};
+// --- INITIALIZATION ---
+/**
+ * Initializes the transformers.js pipeline.
+ */
+async function initializeAI() {
+    state.aiLoading = true;
+    try {
+        if (!window.transformersPipeline) {
+             throw new Error("Transformers.js pipeline is not available.");
+        }
+        // Check for WebGPU support (optional device setting)
+        const device = navigator.gpu ? 'webgpu' : 'cpu';
+        state.hasWebGPU = (device === 'webgpu');
+        console.log(`Using device: ${device}`);
+        elements.loadingOverlay.querySelector('p').textContent = `Loading AI model (${MODEL_NAME}) on ${device}...`;
+        const pipeline = window.transformersPipeline;
+        state.aiPipeline = await pipeline('text-generation', MODEL_NAME, { device: device });
+        console.log("AI Pipeline Loaded.");
+        state.aiLoading = false;
+        elements.loadingOverlay.classList.remove('active');
+        // Start Game
+        resetGame();
+        elements.gameMessage.classList.remove('hidden');
+    } catch (e) {
+        console.error("Failed to load AI pipeline:", e);
+        elements.loadingOverlay.classList.remove('active');
+        elements.errorOverlay.classList.add('active');
+        elements.errorOverlay.querySelector('p').textContent =
+            `Error loading AI. Try refreshing or check console. Details: ${e.message}`;
+        state.aiLoading = false;
+    }
+}
+// --- GAME LOGIC (PAGE 1) ---
+/**
+ * Resets the game state.
+ */
+function resetGame() {
+    state.score = 0;
+    state.hp = state.maxHp;
+    state.gameSpeed = GAME_SPEED_START;
+    state.dinoY = 0;
+    state.dinoVY = 0;
+    state.isJumping = false;
+    elements.dino.style.bottom = '0px';
+    elements.gameArea.querySelectorAll('.obstacle').forEach(o => o.remove());
+    updateGameUI();
+    if (state.currentPage === 0) {
+        state.isGameRunning = true;
+        gameLoop(0);
+    }
+}
+/**
+ * Updates the game score and UI elements.
+ */
+function updateGameUI() {
+    elements.gameScore.textContent = Math.floor(state.score);
+    elements.dinoHp.textContent = state.hp;
+    elements.abilityHp.textContent = state.maxHp;
+    elements.abilityPoints.textContent = state.abilityPoints;
+    elements.statDistance.textContent = Math.floor(state.totalDistance);
+    elements.statDodged.textContent = state.obstaclesDodged;
+    elements.btnUpgradeHp.disabled = state.abilityPoints < 1;
+}
+/**
+ * Handles the dinosaur jump action.
+ */
+function jump() {
+    if (!state.isJumping && state.isGameRunning) {
+        state.isJumping = true;
+        state.dinoVY = DINO_JUMP_VELOCITY;
+    }
+}
+/**
+ * Generates and adds a new obstacle to the game area.
+ */
+function spawnObstacle() {
+    const obstacle = document.createElement('div');
+    const type = Math.random() < 0.7 ? 'cactus' : 'wall';
+    const height = type === 'cactus' ? (20 + Math.random() * 30) : (40 + Math.random() * 50);
+    obstacle.className = `obstacle ${type}`;
+    obstacle.style.height = `${height}px`;
+    obstacle.style.right = '0px'; // Start off-screen right
+    elements.gameArea.appendChild(obstacle);
+}
+/**
+ * Checks for collision between the dinosaur and obstacles.
+ * @param {HTMLElement} obstacle
+ * @returns {boolean}
+ */
+function checkCollision(obstacle) {
+    const dinoRect = elements.dino.getBoundingClientRect();
+    const obsRect = obstacle.getBoundingClientRect();
+    // Define generous hitbox for simplicity
+    return (
+        dinoRect.right - 10 > obsRect.left &&
+        dinoRect.left + 10 < obsRect.right &&
+        dinoRect.bottom > obsRect.top
+    );
+}
+/**
+ * Main game loop using requestAnimationFrame.
+ * @param {number} timestamp
+ */
+function gameLoop(timestamp) {
+    if (!state.isGameRunning || state.currentPage !== 0) {
+        state.gameLoopId = null;
+        return;
+    }
+    const deltaTime = (timestamp - state.lastTime) / 1000;
+    state.lastTime = timestamp;
+    // 1. Dinosaur Physics Update
+    if (state.isJumping) {
+        state.dinoVY += GRAVITY;
+        state.dinoY += state.dinoVY;
+        if (state.dinoY >= 0) {
+            state.dinoY = 0;
+            state.dinoVY = 0;
+            state.isJumping = false;
+        }
+        elements.dino.style.bottom = `${state.dinoY}px`;
+    }
+    // 2. Obstacle Movement & Collision
+    const obstacles = elements.gameArea.querySelectorAll('.obstacle');
+    let hit = false;
+    let dodgedCount = 0;
+    obstacles.forEach(obstacle => {
+        let currentRight = parseFloat(obstacle.style.right);
+        // Move obstacle
+        currentRight += state.gameSpeed * 60 * deltaTime; // Speed scaling
+        obstacle.style.right = `${currentRight}px`;
+        const obstacleWidth = obstacle.offsetWidth;
+        const dinoLeftOffset = elements.dino.offsetLeft; // Dino is centered
+        // Check for collision when obstacle is near the dino
+        if (currentRight + obstacleWidth > dinoLeftOffset && currentRight < dinoLeftOffset + 40) {
+            if (checkCollision(obstacle)) {
+                if (!obstacle.dataset.hit) {
+                    state.hp -= 1;
+                    obstacle.dataset.hit = 'true'; // Prevent multiple hits
+                    hit = true;
+                }
+            }
+        }
+        // Check for obstacle passing
+        if (currentRight > elements.gameArea.offsetWidth + 50) {
+            obstacle.remove();
+            if (!obstacle.dataset.hit) {
+                dodgedCount++;
+            }
+        }
+    });
+    if (hit) {
+        elements.dino.classList.add('hit');
+        setTimeout(() => elements.dino.classList.remove('hit'), 150);
+    }
+    state.obstaclesDodged += dodgedCount;
+    state.abilityPoints += dodgedCount;
+    // 3. Spawning Logic
+    state.obstacleTimer += deltaTime * 1000;
+    const interval = Math.max(800, OBSTACLE_INTERVAL_BASE - state.gameSpeed * 20);
+    if (state.obstacleTimer >= interval) {
+        spawnObstacle();
+        state.obstacleTimer = 0;
+    }
+    // 4. Score and Speed Update
+    state.score += deltaTime * state.gameSpeed;
+    state.totalDistance += deltaTime * state.gameSpeed;
+    state.gameSpeed = Math.min(20, GAME_SPEED_START + state.score / 500); // Speed increases gradually
+    updateGameUI();
+    // 5. Game Over Check
+    if (state.hp <= 0) {
+        gameOver();
+        return;
+    }
+    state.gameLoopId = requestAnimationFrame(gameLoop);
+}
+/**
+ * Handles the game over state.
+ */
+function gameOver() {
+    state.isGameRunning = false;
+    cancelAnimationFrame(state.gameLoopId);
+    state.gameLoopId = null;
+    elements.gameMessage.textContent = `GAME OVER! Score: ${Math.floor(state.score)}. Press SPACE to restart.`;
+    elements.gameMessage.classList.remove('hidden');
+    // Add a dead dino to the memorial
+    addDeadDinoToMemorial();
+    // Switch to memorial page for immediate visual feedback
+    // switchPage(2);
+}
+// --- AI LORE GENERATOR (PAGE 2) ---
+/**
+ * Generates lore using the transformers.js model.
+ */
+async function generateLore() {
+    if (state.aiLoading || !state.aiPipeline) {
+        alert("AI model is still loading or failed.");
+        return;
+    }
+    const promptText = elements.abilityPrompt.value.trim();
+    if (!promptText) {
+        elements.loreText.textContent = "Please enter a concept for the power-up (e.g., 'faster run').";
+        return;
+    }
+    elements.loreLoading.classList.remove('hidden');
+    elements.btnGenerateLore.disabled = true;
+    const fullPrompt = LORE_PROMPT_PREFIX + promptText + ". The description must be detailed and majestic.";
+    try {
+        const output = await state.aiPipeline(fullPrompt, {
+            max_new_tokens: 60,
+            temperature: 0.8,
+            do_sample: true,
+            repetition_penalty: 1.2
+        });
+        if (output && output.length > 0) {
+            // Clean up the generated text (often repeats the prompt or generates incomplete sentence)
+            let lore = output[0].generated_text.replace(fullPrompt, '').trim();
+            // Try to find the first complete sentence after the prompt
+            lore = lore.split('.').filter(s => s.length > 5).join('. ').trim();
+            if (lore.length < 10) {
+                 lore = output[0].generated_text.substring(fullPrompt.length, fullPrompt.length + 100).trim() + '...';
+            }
+            elements.loreText.textContent = lore;
+        } else {
+            elements.loreText.textContent = "AI failed to generate lore. Try again.";
+        }
+    } catch (e) {
+        console.error("AI Generation Error:", e);
+        elements.loreText.textContent = `AI Generation Failed: ${e.message}`;
+    } finally {
+        elements.loreLoading.classList.add('hidden');
+        elements.btnGenerateLore.disabled = false;
+    }
+}
+// --- PAGE 3 ANIMATION ---
+/**
+ * Adds a visual representation of a fallen dino to the memorial page.
+ */
+function addDeadDinoToMemorial() {
+    const dino = document.createElement('div');
+    dino.className = 'dead-dino';
+    dino.textContent = '💀';
+    // Randomize initial horizontal position
+    dino.style.left = `${Math.random() * 90 + 5}vw`;
+    // Randomize duration for a staggered fall effect
+    dino.style.animationDuration = `${3 + Math.random() * 2}s`;
+    elements.memorialContainer.appendChild(dino);
+    // Limit memorial to 20 dinos for performance
+    if (elements.memorialContainer.children.length > 20) {
+        elements.memorialContainer.firstChild.remove();
+    }
+}
+// --- NAVIGATION & EVENT HANDLERS ---
+/**
+ * Switches the active page view.
+ * @param {number} index
+ */
+function switchPage(index) {
+    if (index < 0 || index >= elements.pages.length) return;
+    // Pause/Resume animations based on the page
+    if (index === 0) {
+        if (state.hp > 0 && !state.isGameRunning) {
+             resetGame(); // Restart game loop if switching back to the game
+        }
+    } else {
+        if (state.gameLoopId) {
+            cancelAnimationFrame(state.gameLoopId);
+            state.gameLoopId = null;
+            state.isGameRunning = false;
+        }
+    }
+    // Update active class
+    elements.pages[state.currentPage].classList.remove('active');
+    state.currentPage = index;
+    elements.pages[state.currentPage].classList.add('active');
+}
+/**
+ * Global keydown handler for navigation and game controls.
+ * @param {KeyboardEvent} e
+ */
+function handleKeyDown(e) {
+    if (e.key === 'ArrowRight') {
+        switchPage((state.currentPage + 1) % elements.pages.length);
+    } else if (e.key === 'ArrowLeft') {
+        switchPage((state.currentPage - 1 + elements.pages.length) % elements.pages.length);
+    } else if (e.key === ' ' && state.currentPage === 0) { // Space key for jump/restart
+        e.preventDefault();
+        if (state.isGameRunning) {
+            jump();
+        } else {
+            resetGame();
+            elements.gameMessage.classList.add('hidden');
+        }
+    }
+}
+/**
+ * Handles the HP upgrade button click.
+ */
+function handleHpUpgrade() {
+    if (state.abilityPoints >= 1) {
+        state.abilityPoints -= 1;
+        state.maxHp += 1;
+        state.hp = state.maxHp; // Refill HP on level up
+        updateGameUI();
+        alert(`Maximum HP increased to ${state.maxHp}! Health fully restored.`);
+    }
+}
+// --- MAIN EXECUTION ---
+document.addEventListener('DOMContentLoaded', () => {
+    // Set up event listeners
+    document.addEventListener('keydown', handleKeyDown);
+    elements.btnGenerateLore.addEventListener('click', generateLore);
+    elements.btnUpgradeHp.addEventListener('click', handleHpUpgrade);
+    // Initial AI and Game Setup
+    initializeAI();
+});
+=== style.css ===
+/* style.css content here */
+:root {
+    --color-primary: #5c8d4e;
+    --color-secondary: #f0f0c0;
+    --color-background: #fff8e1;
+    --color-dark: #333;
+    --color-danger: #c0392b;
+    --font-family: 'Arial', sans-serif;
+}
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body {
+    font-family: var(--font-family);
+    background-color: var(--color-background);
+    color: var(--color-dark);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+header {
+    background-color: var(--color-primary);
+    color: white;
+    padding: 10px 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+h1 {
+    font-size: 1.8rem;
+}
+.anycoder-link {
+    color: var(--color-secondary);
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: color 0.2s;
+}
+.anycoder-link:hover {
+    color: white;
+    text-decoration: underline;
+}
+/* --- General Page Layout --- */
+main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    position: relative;
+    min-height: calc(100vh - 70px);
+}
+.page {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    right: 20px;
+    min-height: 80vh;
+    padding: 20px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s ease, visibility 0.5s;
+}
+.page.active {
+    opacity: 1;
+    visibility: visible;
+    position: relative; /* Take up space when active */
+}
+h2 {
+    color: var(--color-primary);
+    margin-bottom: 20px;
+    border-bottom: 2px solid var(--color-secondary);
+    padding-bottom: 5px;
+}
+.navigation-hint {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 0.9rem;
+    color: #666;
+}
+/* --- Loading/Error Overlays --- */
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+.overlay.active {
+    visibility: visible;
+    opacity: 1;
+}
+.loader {
+    border: 8px solid #f3f3f3;
+    border-top: 8px solid var(--color-primary);
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+    margin-bottom: 15px;
+}
+.loader.small {
+    width: 20px;
+    height: 20px;
+    border-width: 3px;
+    margin-right: 10px;
+    display: inline-block;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+/* --- Page 1: Game Styles --- */
+#page-game {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.game-area {
+    width: 100%;
+    max-width: 800px;
+    height: 300px;
+    border: 3px solid var(--color-dark);
+    margin: 20px 0;
+    position: relative;
+    overflow: hidden;
+    background-color: #e0f7fa;
+}
+.ground {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 15px;
+    background-color: var(--color-primary);
+    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2) inset;
+    z-index: 5;
+}
+#dino {
+    position: absolute;
+    left: 20%; /* Dinosaur is centered relative to the game viewport */
+    bottom: 0;
+    font-size: 40px;
+    transition: filter 0.1s ease;
+    z-index: 10;
+}
+#dino.hit {
+    filter: drop-shadow(0 0 10px var(--color-danger));
+    animation: shake 0.2s 2;
+}
+@keyframes shake {
+    0%, 100% { transform: translate(0, 0); }
+    25% { transform: translate(-2px, 0); }
+    75% { transform: translate(2px, 0); }
+}
+.obstacle {
+    position: absolute;
+    bottom: 0;
+    width: 30px;
+    background-color: var(--color-primary);
+    z-index: 8;
+    border-radius: 5px 5px 0 0;
+}
+.obstacle.cactus {
+    width: 25px;
+    background: #008000;
+}
+.obstacle.wall {
+    width: 40px;
+    background: #a0522d;
+}
+#game-info {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-weight: bold;
+    padding: 5px 10px;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 5px;
+    z-index: 15;
+}
+#game-message {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--color-danger);
+    background: rgba(255, 255, 255, 0.9);
+    padding: 10px 20px;
+    border-radius: 5px;
+    z-index: 20;
+}
+.hidden {
+    display: none !important;
+}
+/* --- Page 2: Stats/Ability Tree Styles --- */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin-bottom: 40px;
+}
+.stat-box {
+    background: var(--color-secondary);
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+.stat-box h3 {
+    color: var(--color-dark);
+    margin-top: 0;
+}
+button {
+    background-color: var(--color-primary);
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background-color 0.2s;
+    margin-top: 10px;
+}
+button:hover:not(:disabled) {
+    background-color: #4a7541;
+}
+button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+.ability-tree-generator {
+    padding: 20px;
+    background: #f8f8f8;
+    border: 1px dashed #ddd;
+    border-radius: 8px;
+}
+#ability-prompt {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+.output-box {
+    margin-top: 20px;
+    padding: 15px;
+    border: 1px solid var(--color-primary);
+    background: #e6f3e6;
+    border-left: 5px solid var(--color-primary);
+    min-height: 80px;
+    display: flex;
+    align-items: center;
+}
+#lore-text {
+    font-style: italic;
+    color: #444;
+}
+/* --- Page 3: Memorial Styles --- */
+#page-memorial {
+    text-align: center;
+    overflow: hidden; /* Hide dinos when they fall past the bottom */
+}
+#memorial-container {
+    position: relative;
+    width: 100%;
+    height: 60vh;
+    border: 1px solid #eee;
+    background: #333 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="gray"/><circle cx="5" cy="5" r="1" fill="#444"/></svg>'); /* Simple texture */
+    overflow: hidden;
+    margin: 20px auto;
+    border-radius: 8px;
+}
+.dead-dino {
+    position: absolute;
+    top: -50px;
+    font-size: 3rem;
+    color: #777;
+    animation: fall linear forwards;
+    pointer-events: none;
+}
+/* The 'fall' animation is only active when Page 3 is loaded and running */
+@keyframes fall {
+    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
+    90% { opacity: 1; }
+    100% { transform: translateY(calc(60vh + 100px)) rotate(360deg); opacity: 0; }
+}
+/* --- Responsiveness --- */
+@media (max-width: 768px) {
+    h1 {
+        font-size: 1.5rem;
+    }
+    .page {
+        padding: 10px;
+        top: 10px;
+        left: 10px;
+        right: 10px;
+    }
+    .game-area {
+        height: 200px;
+        margin: 10px 0;
+    }
+    #dino {
+        font-size: 30px;
+        left: 10%;
+    }
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+}