Oregon Trailer Park: Design Outline A post-apocalyptic, deck-building roguelike where survival hinges on scavenging, combat, and managing your crew’s sanity. Here’s a structured breakdown of core mechanics, themes, and features: Core Mechanics Deck-Building Start with class-specific cards (e.g., Tweaker begins with "Improvised Pipe Bomb" or "Meth-fueled Sprint"). Acquire new cards via scavenging, trading, or defeating enemies (e.g., "Rusty Chainsaw," "Radiation Suit," "Corporate Contract Betrayal"). Remove/add cards at trailer park "safe zones" (costs resources). Turn-Based Combat Battles against raiders, mutated creatures, and Corporate enforcers. Use action points for attacks, defense, or special abilities (e.g., Brawler’s "Knuckle Dust" stuns enemies). Environmental hazards: Toxic pools damage both sides each turn. Resource Management Track Food, Fuel, Scrap, and Chems. Chems act as currency/moonshine-crafting ingredients (critical for trading and buffs). Starvation or radiation sickness adds permanent debuff cards to your deck. Party Permadeath Lose a party member? Their cards are removed from your deck. Replace them by recruiting survivors at random events. Classes & Starting Bonuses Tweaker Starts with "Stimulant Rush" (draw 2 extra cards per turn, but take radiation damage). Bonus: Craft chems from toxic waste. Scout Starts with "Snipe" (ignore enemy armor) and "Scavenger’s Luck" (better loot odds). Bonus: Reveal map hazards early. Brawler Starts with "Junk Armor" (damage resistance) and "Crowbar Toss" (AOE damage). Bonus: Intimidate enemies to skip combat. Journey Structure Node-Based Map (like Slay the Spire): Choose routes with risks/rewards: Scavenge Sites: Draw from a "junk pile" card deck. Trader Camps: Trade chems for gear or hire mercenaries. Corporate Checkpoints: Pay with resources or fight. Random Events (Oregon Trail-inspired): Toxic Rainstorm: Lose Fuel or take radiation damage. Mutant Attack: Draw 3 combat cards to resolve quickly. Mysterious Moonshiner: Buy a powerful buff (e.g., "Adrenaline Shot: +1 action per turn for 3 battles"). Thematic Endgame Reach the rumored "Clean Zone," only to discover it’s a Corporate trap. Final boss: The CEO’s Bio-Mecha. Multiple Endings: Join the Corporation, overthrow them, or escape to the irradiated wilds. Art & Tone Visuals: Grungy, cel-shaded trailers, neon toxic waste, and mutated wildlife. Writing: Dark humor (e.g., "Your '98 pickup truck breaks down. Again. Maybe duct tape isn’t* the answer."). Music: Twangy banjo mixed with glitchy synths. Unlockables & Replayability Unlock new classes (e.g., Rad-Witch or Corporate Defector). Discover hidden "recipe" cards for crafting overpowered items (e.g., Nuke Moonshine). Daily challenges with leaderboards (e.g., "Reach the Clean Zone in 10 days"). Tech Stack (Browser-Based) Phaser.js or React + Redux for turn-based logic. Procedural generation for maps/events via seed-based RNG. Save/Load system using local storage. Oregon Trailer Park A post-apocalyptic deck-building roguelike where survival hinges on scavenging, combat, and managing your crew’s mutations and sanity. Core Mechanics Deck-Building Start with class-specific cards (e.g., Tweaker begins with "Improvised Pipe Bomb" or "Meth-fueled Sprint"). Acquire new cards via scavenging, trading, or defeating enemies (e.g., "Rusty Chainsaw," "Radiation Suit"). Remove/add cards at trailer park safe zones (costs resources like Scrap or Chems). Turn-Based Combat Battles against raiders, mutated creatures, and Corporate enforcers. Use action points for attacks, defense, or abilities (e.g., Brawler’s "Knuckle Dust" stuns enemies). Environmental hazards: Toxic pools damage both sides each turn. Resource Management Track Food, Fuel, Scrap, and Chems. Chems act as currency and moonshine-crafting ingredients (critical for trading and buffs). Starvation or radiation sickness adds permanent debuff cards to your deck. Party Permadeath GIGANT-218-EVOLUTION Lose a party member? Their cards are removed. Replace them by recruiting survivors at random events. Classes & Starting Bonuses Tweaker Starts with "Stimulant Rush" (draw 2 extra cards per turn, but take radiation damage). Bonus: Craft chems from toxic waste. Scout Starts with "Snipe" (ignore enemy armor) and "Scavenger’s Luck" (better loot odds). Bonus: Reveal map hazards early. Brawler Starts with "Junk Armor" (damage resistance) and "Crowbar Toss" (AOE damage). Bonus: Intimidate enemies to skip combat. Journey Structure Node-Based Map (akin to Slay the Spire): Choose routes with risks/rewards: Scavenge Sites: Draw from a "junk pile" card deck. Trader Camps: Trade Chems for gear or hire mercenaries. Corporate Checkpoints: Pay with resources or fight. Random Events (Oregon Trail-inspired): Toxic Rainstorm: Lose Fuel or take radiation damage. Mutant Attack: Draw 3 combat cards to resolve quickly. Mysterious Moonshiner: Buy powerful buffs (e.g., "Adrenaline Shot: +1 action per turn for 3 battles"). Thematic Endgame Reach the rumored "Clean Zone," only to discover it’s a Corporate trap. Final Boss: The CEO’s Bio-Mecha. Multiple Endings: Join the Corporation, overthrow them, or escape to the irradiated wilds. Art & Tone Visuals: Grungy, cel-shaded trailers, neon toxic waste, and mutated wildlife. Writing: Dark humor (e.g., "Your '98 pickup truck breaks down. Again. Maybe duct tape isn’t the answer."). Music: Twangy banjo mixed with glitchy synths. Unlockables & Replayability Unlock new classes (Rad-Witch or Corporate Defector). Discover hidden recipe cards for crafting overpowered items (e.g., Nuke Moonshine). Daily challenges with leaderboards (e.g., "Reach the Clean Zone in 10 days"). Tech Stack (Browser-Based) Frontend: Phaser.js or React+Redux for turn-based logic. Procedural Generation: Maps/events via seed-based random number generation (RNG). Save/Load System: Local storage for progress. Survive the wasteland. Outsmart the Corporations. Keep your crew sane—or die trying. - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Arce
-emoji: 👀
-colorFrom: indigo
-colorTo: blue
+title: arce
+emoji: 🐳
+colorFrom: pink
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,581 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Oregon Trailer Park - Post-Apocalyptic Deckbuilder</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
+        
+        .pixel-font {
+            font-family: 'VT323', monospace;
+        }
+        
+        .title-font {
+            font-family: 'Press Start 2P', cursive;
+        }
+        
+        .toxic-gradient {
+            background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 25%, #CDDC39 50%, #FFEB3B 75%, #FFC107 100%);
+        }
+        
+        .glow {
+            text-shadow: 0 0 5px #4CAF50, 0 0 10px #8BC34A;
+        }
+        
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        
+        .radiation-pulse {
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
+            }
+        }
+        
+        .typewriter {
+            overflow: hidden;
+            border-right: .15em solid #4CAF50;
+            white-space: nowrap;
+            margin: 0 auto;
+            letter-spacing: .15em;
+            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
+        }
+        
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #4CAF50; }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-green-400 pixel-font">
+    <!-- Header/Navigation -->
+    <header class="bg-black bg-opacity-80 sticky top-0 z-50 border-b-2 border-green-500">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-radiation-alt text-green-500 text-2xl"></i>
+                <h1 class="title-font text-xl md:text-2xl glow">OREGON TRAILER PARK</h1>
+            </div>
+            <nav class="hidden md:block">
+                <ul class="flex space-x-6">
+                    <li><a href="#features" class="hover:text-green-300 transition">Features</a></li>
+                    <li><a href="#classes" class="hover:text-green-300 transition">Classes</a></li>
+                    <li><a href="#gameplay" class="hover:text-green-300 transition">Gameplay</a></li>
+                    <li><a href="#about" class="hover:text-green-300 transition">About</a></li>
+                </ul>
+            </nav>
+            <button id="mobile-menu-button" class="md:hidden text-green-400">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </div>
+        <!-- Mobile Menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90 px-4 py-2 border-t border-green-500">
+            <ul class="flex flex-col space-y-3">
+                <li><a href="#features" class="block hover:text-green-300 transition">Features</a></li>
+                <li><a href="#classes" class="block hover:text-green-300 transition">Classes</a></li>
+                <li><a href="#gameplay" class="block hover:text-green-300 transition">Gameplay</a></li>
+                <li><a href="#about" class="block hover:text-green-300 transition">About</a></li>
+            </ul>
+        </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="relative h-screen flex items-center justify-center bg-gray-800 overflow-hidden">
+        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1508514177221-188e1e5f9425?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center opacity-30"></div>
+        <div class="container mx-auto px-4 z-10 text-center">
+            <h1 class="title-font text-4xl md:text-6xl mb-6 glow typewriter">SURVIVE THE WASTELAND</h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">A post-apocalyptic deck-building roguelike where survival hinges on scavenging, combat, and managing your crew's sanity.</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <button class="bg-green-600 hover:bg-green-700 text-black font-bold py-3 px-6 rounded-lg transition transform hover:scale-105 flex items-center justify-center gap-2">
+                    <i class="fas fa-play"></i> PLAY DEMO
+                </button>
+                <button class="border-2 border-green-500 hover:bg-green-900 hover:bg-opacity-30 text-green-400 font-bold py-3 px-6 rounded-lg transition transform hover:scale-105 flex items-center justify-center gap-2">
+                    <i class="fas fa-book"></i> LEARN MORE
+                </button>
+            </div>
+        </div>
+        <div class="absolute bottom-0 left-0 right-0 h-16 toxic-gradient opacity-20"></div>
+    </section>
+
+    <!-- Features Section -->
+    <section id="features" class="py-16 bg-gray-800 bg-opacity-70">
+        <div class="container mx-auto px-4">
+            <h2 class="title-font text-3xl md:text-4xl text-center mb-12 glow">CORE MECHANICS</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-900 bg-opacity-80 p-6 rounded-lg border-2 border-green-500 card-hover radiation-pulse">
+                    <div class="text-center mb-4">
+                        <i class="fas fa-cards text-4xl text-green-500 mb-3"></i>
+                        <h3 class="title-font text-xl mb-2">DECK-BUILDING</h3>
+                    </div>
+                    <ul class="space-y-2 text-sm">
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Class-specific starting cards</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Acquire new cards through scavenging and combat</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Modify your deck at safe zones</span>
+                        </li>
+                    </ul>
+                </div>
+                
+                <!-- Feature 2 -->
+                <div class="bg-gray-900 bg-opacity-80 p-6 rounded-lg border-2 border-green-500 card-hover">
+                    <div class="text-center mb-4">
+                        <i class="fas fa-fist-raised text-4xl text-green-500 mb-3"></i>
+                        <h3 class="title-font text-xl mb-2">TURN-BASED COMBAT</h3>
+                    </div>
+                    <ul class="space-y-2 text-sm">
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Fight raiders, mutants, and Corporate enforcers</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Action point system for strategic play</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Environmental hazards affect battles</span>
+                        </li>
+                    </ul>
+                </div>
+                
+                <!-- Feature 3 -->
+                <div class="bg-gray-900 bg-opacity-80 p-6 rounded-lg border-2 border-green-500 card-hover">
+                    <div class="text-center mb-4">
+                        <i class="fas fa-boxes text-4xl text-green-500 mb-3"></i>
+                        <h3 class="title-font text-xl mb-2">RESOURCE MANAGEMENT</h3>
+                    </div>
+                    <ul class="space-y-2 text-sm">
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Track Food, Fuel, Scrap, and Chems</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Chems as currency and crafting ingredients</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Starvation adds permanent debuffs</span>
+                        </li>
+                    </ul>
+                </div>
+                
+                <!-- Feature 4 -->
+                <div class="bg-gray-900 bg-opacity-80 p-6 rounded-lg border-2 border-green-500 card-hover">
+                    <div class="text-center mb-4">
+                        <i class="fas fa-skull text-4xl text-green-500 mb-3"></i>
+                        <h3 class="title-font text-xl mb-2">PERMADEATH</h3>
+                    </div>
+                    <ul class="space-y-2 text-sm">
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Lose party members permanently</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Their cards are removed from your deck</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
+                            <span>Recruit replacements at random events</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Classes Section -->
+    <section id="classes" class="py-16 bg-gray-900">
+        <div class="container mx-auto px-4">
+            <h2 class="title-font text-3xl md:text-4xl text-center mb-12 glow">CHOOSE YOUR CLASS</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Tweaker Class -->
+                <div class="bg-gray-800 bg-opacity-80 rounded-lg overflow-hidden border-2 border-purple-500 card-hover">
+                    <div class="bg-purple-900 bg-opacity-60 p-4">
+                        <h3 class="title-font text-xl text-center">TWEAKER</h3>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-center mb-4">
+                            <div class="w-24 h-24 rounded-full bg-purple-800 flex items-center justify-center border-2 border-purple-500">
+                                <i class="fas fa-pills text-4xl text-purple-300"></i>
+                            </div>
+                        </div>
+                        <p class="text-sm mb-4">Chem-fueled survivalist who can turn toxic waste into valuable resources.</p>
+                        
+                        <h4 class="font-bold text-purple-400 mb-2">STARTING CARDS:</h4>
+                        <ul class="mb-4 space-y-2">
+                            <li class="flex items-start">
+                                <i class="fas fa-radiation-alt text-purple-400 mt-1 mr-2"></i>
+                                <span>"Stimulant Rush" - Draw 2 extra cards per turn (take radiation damage)</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-bomb text-purple-400 mt-1 mr-2"></i>
+                                <span>"Improvised Pipe Bomb" - High damage AOE</span>
+                            </li>
+                        </ul>
+                        
+                        <h4 class="font-bold text-purple-400 mb-2">BONUS:</h4>
+                        <p class="text-sm">Craft chems from toxic waste, gaining resources from radiation zones.</p>
+                    </div>
+                </div>
+                
+                <!-- Scout Class -->
+                <div class="bg-gray-800 bg-opacity-80 rounded-lg overflow-hidden border-2 border-green-500 card-hover">
+                    <div class="bg-green-900 bg-opacity-60 p-4">
+                        <h3 class="title-font text-xl text-center">SCOUT</h3>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-center mb-4">
+                            <div class="w-24 h-24 rounded-full bg-green-800 flex items-center justify-center border-2 border-green-500">
+                                <i class="fas fa-binoculars text-4xl text-green-300"></i>
+                            </div>
+                        </div>
+                        <p class="text-sm mb-4">Resourceful tracker who can spot danger and opportunities from afar.</p>
+                        
+                        <h4 class="font-bold text-green-400 mb-2">STARTING CARDS:</h4>
+                        <ul class="mb-4 space-y-2">
+                            <li class="flex items-start">
+                                <i class="fas fa-crosshairs text-green-400 mt-1 mr-2"></i>
+                                <span>"Snipe" - Ignore enemy armor</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-clover text-green-400 mt-1 mr-2"></i>
+                                <span>"Scavenger's Luck" - Better loot odds</span>
+                            </li>
+                        </ul>
+                        
+                        <h4 class="font-bold text-green-400 mb-2">BONUS:</h4>
+                        <p class="text-sm">Reveal map hazards early, avoiding dangerous encounters.</p>
+                    </div>
+                </div>
+                
+                <!-- Brawler Class -->
+                <div class="bg-gray-800 bg-opacity-80 rounded-lg overflow-hidden border-2 border-red-500 card-hover">
+                    <div class="bg-red-900 bg-opacity-60 p-4">
+                        <h3 class="title-font text-xl text-center">BRAWLER</h3>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-center mb-4">
+                            <div class="w-24 h-24 rounded-full bg-red-800 flex items-center justify-center border-2 border-red-500">
+                                <i class="fas fa-fist-raised text-4xl text-red-300"></i>
+                            </div>
+                        </div>
+                        <p class="text-sm mb-4">Brutal fighter who can smash through enemies and intimidate foes.</p>
+                        
+                        <h4 class="font-bold text-red-400 mb-2">STARTING CARDS:</h4>
+                        <ul class="mb-4 space-y-2">
+                            <li class="flex items-start">
+                                <i class="fas fa-shield-alt text-red-400 mt-1 mr-2"></i>
+                                <span>"Junk Armor" - Damage resistance</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-hammer text-red-400 mt-1 mr-2"></i>
+                                <span>"Crowbar Toss" - AOE damage</span>
+                            </li>
+                        </ul>
+                        
+                        <h4 class="font-bold text-red-400 mb-2">BONUS:</h4>
+                        <p class="text-sm">Intimidate enemies to skip combat encounters entirely.</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="mt-12 text-center">
+                <button class="border-2 border-green-500 hover:bg-green-900 hover:bg-opacity-30 text-green-400 font-bold py-3 px-6 rounded-lg transition transform hover:scale-105">
+                    VIEW ALL CLASSES (6+)
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Gameplay Section -->
+    <section id="gameplay" class="py-16 bg-gray-800 bg-opacity-70">
+        <div class="container mx-auto px-4">
+            <h2 class="title-font text-3xl md:text-4xl text-center mb-12 glow">JOURNEY STRUCTURE</h2>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h3 class="title-font text-2xl mb-6 text-green-400">NODE-BASED MAP</h3>
+                    <p class="mb-6">Navigate through a wasteland of choices, each with risks and rewards. Your path determines your survival.</p>
+                    
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="bg-green-900 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4 mt-1">
+                                <i class="fas fa-trash text-green-400"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-lg mb-1">Scavenge Sites</h4>
+                                <p class="text-sm">Draw from a "junk pile" card deck to find resources, gear, or trouble.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="bg-yellow-900 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4 mt-1">
+                                <i class="fas fa-exchange-alt text-yellow-400"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-lg mb-1">Trader Camps</h4>
+                                <p class="text-sm">Trade Chems for gear or hire mercenaries to bolster your crew.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="bg-red-900 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0 mr-4 mt-1">
+                                <i class="fas fa-building text-red-400"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-lg mb-1">Corporate Checkpoints</h4>
+                                <p class="text-sm">Pay with resources or fight your way through Corporate enforcers.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="relative">
+                    <div class="bg-gray-900 rounded-lg border-2 border-green-500 p-6 card-hover">
+                        <h3 class="title-font text-xl mb-4 text-center">RANDOM EVENTS</h3>
+                        <div class="space-y-4">
+                            <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-green-500">
+                                <h4 class="font-bold flex items-center">
+                                    <i class="fas fa-cloud-rain text-blue-400 mr-2"></i>
+                                    Toxic Rainstorm
+                                </h4>
+                                <p class="text-sm mt-1">Lose Fuel or take radiation damage. Choose wisely.</p>
+                            </div>
+                            
+                            <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-red-500">
+                                <h4 class="font-bold flex items-center">
+                                    <i class="fas fa-paw text-red-400 mr-2"></i>
+                                    Mutant Attack
+                                </h4>
+                                <p class="text-sm mt-1">Draw 3 combat cards to resolve quickly. Speed is survival.</p>
+                            </div>
+                            
+                            <div class="bg-gray-800 p-4 rounded-lg border-l-4 border-purple-500">
+                                <h4 class="font-bold flex items-center">
+                                    <i class="fas fa-flask text-purple-400 mr-2"></i>
+                                    Mysterious Moonshiner
+                                </h4>
+                                <p class="text-sm mt-1">Buy powerful buffs like "Adrenaline Shot: +1 action per turn for 3 battles".</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Endgame Section -->
+    <section class="py-16 bg-black bg-opacity-80 relative overflow-hidden">
+        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1560508184684-3dcfaac3f0f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80')] bg-cover bg-center opacity-20"></div>
+        <div class="container mx-auto px-4 relative z-10">
+            <h2 class="title-font text-3xl md:text-4xl text-center mb-12 glow">THEMATIC ENDGAME</h2>
+            
+            <div class="max-w-4xl mx-auto bg-gray-900 bg-opacity-80 p-8 rounded-lg border-2 border-green-500">
+                <div class="flex flex-col md:flex-row items-center gap-8">
+                    <div class="flex-shrink-0">
+                        <div class="w-32 h-32 md:w-48 md:h-48 rounded-full bg-red-900 flex items-center justify-center border-4 border-red-600 mx-auto">
+                            <i class="fas fa-robot text-5xl md:text-7xl text-red-400"></i>
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="title-font text-2xl mb-4 text-red-400">THE CEO'S BIO-MECHA</h3>
+                        <p class="mb-4">Reach the rumored "Clean Zone", only to discover it's a Corporate trap. Face off against the ultimate weapon of the wasteland oligarchy.</p>
+                        
+                        <h4 class="font-bold text-green-400 mb-2">MULTIPLE ENDINGS:</h4>
+                        <ul class="space-y-2">
+                            <li class="flex items-start">
+                                <i class="fas fa-handshake text-yellow-400 mt-1 mr-2"></i>
+                                <span>Join the Corporation - Become part of the machine</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-gavel text-red-400 mt-1 mr-2"></i>
+                                <span>Overthrow them - Lead the wasteland rebellion</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-running text-purple-400 mt-1 mr-2"></i>
+                                <span>Escape to the wilds - Reject all civilization</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="py-16 bg-gray-900">
+        <div class="container mx-auto px-4">
+            <h2 class="title-font text-3xl md:text-4xl text-center mb-12 glow">ART & TONE</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+                <div class="bg-gray-800 p-6 rounded-lg border-2 border-green-500">
+                    <h3 class="title-font text-xl mb-4 text-center">VISUALS</h3>
+                    <div class="flex justify-center mb-4">
+                        <i class="fas fa-palette text-5xl text-green-500"></i>
+                    </div>
+                    <p class="text-center">Grungy, cel-shaded trailers, neon toxic waste, and mutated wildlife bring the wasteland to life.</p>
+                </div>
+                
+                <div class="bg-gray-800 p-6 rounded-lg border-2 border-green-500">
+                    <h3 class="title-font text-xl mb-4 text-center">WRITING</h3>
+                    <div class="flex justify-center mb-4">
+                        <i class="fas fa-pen-fancy text-5xl text-green-500"></i>
+                    </div>
+                    <p class="text-center">Dark humor permeates the apocalypse. "Your '98 pickup truck breaks down. Again. Maybe duct tape isn't the answer."</p>
+                </div>
+                
+                <div class="bg-gray-800 p-6 rounded-lg border-2 border-green-500">
+                    <h3 class="title-font text-xl mb-4 text-center">MUSIC</h3>
+                    <div class="flex justify-center mb-4">
+                        <i class="fas fa-music text-5xl text-green-500"></i>
+                    </div>
+                    <p class="text-center">Twangy banjo mixed with glitchy synths creates a uniquely post-apocalyptic soundscape.</p>
+                </div>
+            </div>
+            
+            <div class="bg-gray-800 p-8 rounded-lg border-2 border-green-500 max-w-4xl mx-auto">
+                <h3 class="title-font text-2xl mb-6 text-center">TECH STACK</h3>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <h4 class="font-bold text-center mb-2">FRONTEND</h4>
+                        <p class="text-center text-sm">Phaser.js or React+Redux for turn-based logic</p>
+                    </div>
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <h4 class="font-bold text-center mb-2">PROCEDURAL GEN</h4>
+                        <p class="text-center text-sm">Maps/events via seed-based RNG</p>
+                    </div>
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <h4 class="font-bold text-center mb-2">SAVE SYSTEM</h4>
+                        <p class="text-center text-sm">Local storage for progress</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 bg-black bg-opacity-80 relative overflow-hidden">
+        <div class="absolute inset-0 toxic-gradient opacity-10"></div>
+        <div class="container mx-auto px-4 relative z-10">
+            <div class="max-w-3xl mx-auto text-center">
+                <h2 class="title-font text-3xl md:text-4xl mb-6 glow">READY TO SURVIVE?</h2>
+                <p class="text-xl mb-8">Outsmart the Corporations. Keep your crew sane—or die trying.</p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <button class="bg-green-600 hover:bg-green-700 text-black font-bold py-3 px-8 rounded-lg transition transform hover:scale-105 flex items-center justify-center gap-2">
+                        <i class="fas fa-play"></i> PLAY DEMO NOW
+                    </button>
+                    <button class="border-2 border-green-500 hover:bg-green-900 hover:bg-opacity-30 text-green-400 font-bold py-3 px-8 rounded-lg transition transform hover:scale-105 flex items-center justify-center gap-2">
+                        <i class="fas fa-book"></i> READ THE DEV BLOG
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-black bg-opacity-90 py-8 border-t border-green-900">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-2 mb-4 md:mb-0">
+                    <i class="fas fa-radiation-alt text-green-500 text-xl"></i>
+                    <span class="title-font">OREGON TRAILER PARK</span>
+                </div>
+                
+                <div class="flex space-x-6 mb-4 md:mb-0">
+                    <a href="#" class="text-gray-400 hover:text-green-400 transition">
+                        <i class="fab fa-twitter text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-green-400 transition">
+                        <i class="fab fa-discord text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-green-400 transition">
+                        <i class="fab fa-steam text-xl"></i>
+                    </a>
+                </div>
+                
+                <div class="text-sm text-gray-500">
+                    &copy; 2023 Wasteland Games. All rights reserved.
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Mobile menu toggle
+        document.getElementById('mobile-menu-button').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                    
+                    // Close mobile menu if open
+                    const mobileMenu = document.getElementById('mobile-menu');
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                    }
+                }
+            });
+        });
+        
+        // Add animation class to cards when they come into view
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('card-hover');
+                }
+            });
+        }, { threshold: 0.1 });
+        
+        document.querySelectorAll('.card-hover').forEach(card => {
+            observer.observe(card);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ssergorp/arce" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>