Spaces:

apirrone
/

spaceship_game

Running

App Files Files Community

apirrone commited on Dec 22, 2025

Commit

626e568

0 Parent(s):

Initial commit

Browse files

Files changed (10) hide show

.gitignore +3 -0
README.md +12 -0
index.html +40 -0
pyproject.toml +28 -0
spaceship_game/__init__.py +0 -0
spaceship_game/main.py +113 -0
spaceship_game/static/index.html +146 -0
spaceship_game/static/main.js +847 -0
spaceship_game/static/style.css +25 -0
style.css +411 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,3 @@

+__pycache__/
+*.egg-info/
+build/

README.md ADDED Viewed

	@@ -0,0 +1,12 @@

+---
+title: Spaceship Game
+emoji: 👋
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+short_description: Write your description here
+tags:
+ - reachy_mini
+ - reachy_mini_python_app
+---

index.html ADDED Viewed

	@@ -0,0 +1,40 @@

+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title> Spaceship Game </title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+	<div class="hero">
+		<div class="hero-content">
+			<div class="app-icon">🤖⚡</div>
+			<h1> Spaceship Game </h1>
+			<p class="tagline">Enter your tagline here</p>
+		</div>
+	</div>
+	<div class="container">
+		<div class="main-card">
+			<div class="app-preview">
+				<div class="preview-image">
+					<div class="camera-feed">🛠️</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="footer">
+		<p>
+			🤖 Spaceship Game •
+			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
+			<a href="https://huggingface.co/spaces/pollen-robotics/reachy-mini-landing-page#apps" target="_blank">Browse More
+				Apps</a>
+		</p>
+	</div>
+</body>
+</html>

pyproject.toml ADDED Viewed

	@@ -0,0 +1,28 @@

+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+[project]
+name = "spaceship_game"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini"
+]
+keywords = ["reachy-mini-app"]
+[project.entry-points."reachy_mini_apps"]
+spaceship_game = "spaceship_game.main:SpaceshipGame"
+[tool.setuptools]
+package-dir = { "" = "." }
+include-package-data = true
+[tool.setuptools.packages.find]
+where = ["."]
+[tool.setuptools.package-data]
+spaceship_game = ["**/*"] # Also include all non-.py files

spaceship_game/__init__.py ADDED Viewed

File without changes

spaceship_game/main.py ADDED Viewed

	@@ -0,0 +1,113 @@

+import threading
+import logging
+from reachy_mini import ReachyMini, ReachyMiniApp
+import numpy as np
+import time
+from scipy.spatial.transform import Rotation as R
+from pydantic import BaseModel
+# Disable uvicorn access logs to prevent spam
+logging.getLogger("uvicorn.access").setLevel(logging.WARNING)
+class ScoreData(BaseModel):
+    points: int
+class DamageData(BaseModel):
+    damage: int
+class SpaceshipGame(ReachyMiniApp):
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+    request_media_backend: str | None = None
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        # Shared state for sensor data
+        current_head_pose = np.eye(4)
+        current_antennas = [0.0, 0.0]
+        game_score = 0
+        player_health = 100
+        # Game state
+        fire_left = False
+        fire_right = False
+        # Add endpoints to serve sensor data to the frontend
+        @self.settings_app.get("/sensor_data")
+        def get_sensor_data():
+            # Extract rotation from head pose
+            rotation_matrix = current_head_pose[:3, :3]
+            r = R.from_matrix(rotation_matrix)
+            roll, pitch, yaw = r.as_euler('xyz', degrees=True)
+            return {
+                "roll": float(roll),
+                "pitch": float(pitch),
+                "yaw": float(yaw),
+                "antennas": {
+                    "right": float(current_antennas[0]),
+                    "left": float(current_antennas[1])
+                },
+                "fire_left": fire_left,
+                "fire_right": fire_right,
+                "score": game_score,
+                "health": player_health
+            }
+        @self.settings_app.post("/add_score")
+        def add_score_endpoint(data: ScoreData):
+            nonlocal game_score
+            game_score += data.points
+            return {"score": game_score}
+        @self.settings_app.post("/damage_player")
+        def damage_player_endpoint(data: DamageData):
+            nonlocal player_health
+            player_health = max(0, player_health - data.damage)
+            return {"health": player_health}
+        @self.settings_app.post("/reset_game")
+        def reset_game():
+            nonlocal game_score, player_health
+            game_score = 0
+            player_health = 100
+            return {"score": game_score, "health": player_health}
+        # Main control loop - read sensors from Reachy Mini
+        while not stop_event.is_set():
+            # Read current head pose from the robot
+            current_head_pose = reachy_mini.get_current_head_pose()
+            # Read current antenna positions
+            current_antennas = reachy_mini.get_present_antenna_joint_positions()
+            # Detect antenna triggers - pull down to shoot
+            # Antenna [0] is right antenna: pull down = negative value < -threshold
+            # Antenna [1] is left antenna: pull down = positive value > threshold
+            # Lower threshold = more sensitive (0.25 instead of 0.5 = 2x more sensitive)
+            PULL_THRESHOLD = 0.25
+            # Right antenna controls LEFT gun
+            if current_antennas[0] < -PULL_THRESHOLD:
+                if not fire_left:
+                    fire_left = True
+            else:
+                fire_left = False
+            # Left antenna controls RIGHT gun
+            if current_antennas[1] > PULL_THRESHOLD:
+                if not fire_right:
+                    fire_right = True
+            else:
+                fire_right = False
+            time.sleep(0.02)
+if __name__ == "__main__":
+    app = SpaceshipGame()
+    try:
+        app.wrapped_run()
+    except KeyboardInterrupt:
+        app.stop()

spaceship_game/static/index.html ADDED Viewed

	@@ -0,0 +1,146 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Spaceship Game - Reachy Mini</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Arial', sans-serif;
+            background: #000;
+        }
+        #game-canvas {
+            display: block;
+            width: 100vw;
+            height: 100vh;
+        }
+        #hud {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            color: #0ff;
+            font-size: 24px;
+            text-shadow: 0 0 10px #0ff;
+            z-index: 100;
+            font-family: 'Courier New', monospace;
+        }
+        #debug-info {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            color: #0f0;
+            font-size: 14px;
+            text-shadow: 0 0 5px #0f0;
+            z-index: 100;
+            font-family: 'Courier New', monospace;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px;
+            border-radius: 5px;
+        }
+        #instructions {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            color: #fff;
+            font-size: 16px;
+            z-index: 100;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 15px;
+            border-radius: 10px;
+            max-width: 300px;
+        }
+        .crosshair {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 40px;
+            height: 40px;
+            border: 2px solid #0ff;
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: 50;
+            opacity: 0.7;
+            transition: all 0.05s ease-out;
+            box-shadow: 0 0 10px #0ff, inset 0 0 10px #0ff;
+        }
+        .crosshair::before,
+        .crosshair::after {
+            content: '';
+            position: absolute;
+            background: #0ff;
+        }
+        .crosshair::before {
+            width: 2px;
+            height: 20px;
+            left: 50%;
+            top: -10px;
+            transform: translateX(-50%);
+        }
+        .crosshair::after {
+            width: 20px;
+            height: 2px;
+            top: 50%;
+            left: -10px;
+            transform: translateY(-50%);
+        }
+    </style>
+</head>
+<body>
+    <div id="game-canvas"></div>
+    <div class="crosshair"></div>
+    <div id="hud">
+        <div>SCORE: <span id="score">0</span></div>
+        <div id="status">HP: <span style="color: #0f0">100</span></div>
+    </div>
+    <div id="debug-info">
+        <div>Roll: <span id="roll">0</span>°</div>
+        <div>Pitch: <span id="pitch">0</span>°</div>
+        <div>Yaw: <span id="yaw">0</span>°</div>
+        <div>Antennas: <span id="antennas">0, 0</span></div>
+    </div>
+    <div id="instructions">
+        <h3>SHMUP Controls</h3>
+        <p><strong>Defend yourself from enemy ships!</strong></p>
+        <ul>
+            <li><strong>Tilt up/down</strong> → Aim up/down</li>
+            <li><strong>Turn left/right</strong> → Aim left/right</li>
+            <li><strong>Tilt left/right</strong> → Banking (visual)</li>
+            <li><strong>Pull antennas</strong> → Fire guns!</li>
+        </ul>
+        <hr style="border-color: #444;">
+        <p><strong>Enemy Types:</strong></p>
+        <ul style="font-size: 14px;">
+            <li>🔴 Red: Basic (100pts)</li>
+            <li>🟠 Orange: Fast &amp; Aimed (150pts)</li>
+            <li>🟣 Purple: Heavy Spread (300pts)</li>
+        </ul>
+    </div>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
+                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
+            }
+        }
+    </script>
+    <script type="module" src="/static/main.js"></script>
+</body>
+</html>

spaceship_game/static/main.js ADDED Viewed

	@@ -0,0 +1,847 @@

+import * as THREE from 'three';
+// Game state
+let scene, camera, renderer;
+let spaceship, spaceshipParts = {};
+let stars = [];
+let asteroids = [];
+let enemies = [];
+let projectiles = [];
+let enemyBullets = [];
+let explosions = [];
+let sensorData = { roll: 0, pitch: 0, yaw: 0, antennas: { right: 0, left: 0 }, fire_left: false, fire_right: false, score: 0, health: 100 };
+let lastFireLeftState = false;
+let lastFireRightState = false;
+// Game settings
+const SMOOTHING = 0.15;
+const MOVEMENT_SCALE = 1.8;
+const YAW_MOVEMENT_SCALE = 0.3;
+const SPEED = 0.5;
+const FORWARD_SPEED = 1.5; // Speed moving through space
+const MAX_ASTEROIDS = 10;
+const ASTEROID_SPAWN_INTERVAL = 3000;
+const ENEMY_SPAWN_INTERVAL = 2500;
+const MAX_ENEMIES = 10;
+// Initialize the scene
+function init() {
+    // Scene setup
+    scene = new THREE.Scene();
+    scene.fog = new THREE.FogExp2(0x000000, 0.0008);
+    // Camera setup - positioned behind the spaceship
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.set(0, 2, 8);
+    camera.lookAt(0, 0, 0);
+    // Renderer setup
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    document.getElementById('game-canvas').appendChild(renderer.domElement);
+    // Lighting
+    const ambientLight = new THREE.AmbientLight(0x404040, 1);
+    scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(5, 10, 7.5);
+    scene.add(directionalLight);
+    // Create starfield
+    createStarfield();
+    // Create spaceship
+    createSpaceship();
+    // Create initial asteroids
+    for (let i = 0; i < 5; i++) {
+        createAsteroid();
+    }
+    // Handle window resize
+    window.addEventListener('resize', onWindowResize, false);
+    // Start game loop
+    animate();
+    // Start fetching sensor data
+    fetchSensorData();
+    // Spawn asteroids and enemies periodically
+    setInterval(createAsteroid, ASTEROID_SPAWN_INTERVAL);
+    setInterval(createEnemy, ENEMY_SPAWN_INTERVAL);
+}
+function createSpaceship() {
+    spaceship = new THREE.Group();
+    // Main body - fuselage
+    const bodyGeometry = new THREE.ConeGeometry(0.5, 2, 8);
+    const bodyMaterial = new THREE.MeshPhongMaterial({
+        color: 0x00ccff,
+        emissive: 0x004466,
+        shininess: 100
+    });
+    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+    body.rotation.x = Math.PI / 2;
+    spaceship.add(body);
+    spaceshipParts.body = body;
+    // Wings
+    const wingGeometry = new THREE.BoxGeometry(3, 0.1, 0.8);
+    const wingMaterial = new THREE.MeshPhongMaterial({
+        color: 0x0099cc,
+        emissive: 0x003344
+    });
+    const wings = new THREE.Mesh(wingGeometry, wingMaterial);
+    wings.position.z = 0.3;
+    spaceship.add(wings);
+    spaceshipParts.wings = wings;
+    // Cockpit
+    const cockpitGeometry = new THREE.SphereGeometry(0.3, 16, 16);
+    const cockpitMaterial = new THREE.MeshPhongMaterial({
+        color: 0x88ffff,
+        emissive: 0x004466,
+        transparent: true,
+        opacity: 0.8
+    });
+    const cockpit = new THREE.Mesh(cockpitGeometry, cockpitMaterial);
+    cockpit.position.z = -0.5;
+    cockpit.scale.z = 0.7;
+    spaceship.add(cockpit);
+    spaceshipParts.cockpit = cockpit;
+    // Engine glow
+    const engineGeometry = new THREE.CylinderGeometry(0.2, 0.3, 0.5, 8);
+    const engineMaterial = new THREE.MeshBasicMaterial({
+        color: 0xff6600,
+        transparent: true,
+        opacity: 0.8
+    });
+    const engineGlow = new THREE.Mesh(engineGeometry, engineMaterial);
+    engineGlow.rotation.x = Math.PI / 2;
+    engineGlow.position.z = 1.2;
+    spaceship.add(engineGlow);
+    spaceshipParts.engine = engineGlow;
+    // Add point light for engine
+    const engineLight = new THREE.PointLight(0xff6600, 2, 10);
+    engineLight.position.z = 1.5;
+    spaceship.add(engineLight);
+    spaceshipParts.engineLight = engineLight;
+    scene.add(spaceship);
+}
+function createStarfield() {
+    const starGeometry = new THREE.BufferGeometry();
+    const starPositions = [];
+    for (let i = 0; i < 2000; i++) {
+        const x = (Math.random() - 0.5) * 2000;
+        const y = (Math.random() - 0.5) * 2000;
+        const z = Math.random() * -2000; // Stars in front of us
+        starPositions.push(x, y, z);
+    }
+    starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3));
+    const starMaterial = new THREE.PointsMaterial({
+        color: 0xffffff,
+        size: 2,
+        transparent: true
+    });
+    const starField = new THREE.Points(starGeometry, starMaterial);
+    scene.add(starField);
+    stars.push(starField);
+}
+function createAsteroid() {
+    if (asteroids.length >= MAX_ASTEROIDS) return;
+    const size = Math.random() * 2 + 1;
+    const geometry = new THREE.DodecahedronGeometry(size, 0);
+    const material = new THREE.MeshPhongMaterial({
+        color: 0x888888,
+        flatShading: true
+    });
+    const asteroid = new THREE.Mesh(geometry, material);
+    // Random position in front of spaceship
+    asteroid.position.x = (Math.random() - 0.5) * 50;
+    asteroid.position.y = (Math.random() - 0.5) * 50;
+    asteroid.position.z = -100 - Math.random() * 50;
+    // Random rotation
+    asteroid.rotation.x = Math.random() * Math.PI;
+    asteroid.rotation.y = Math.random() * Math.PI;
+    // Random velocity (z is relative to forward speed)
+    asteroid.userData.velocity = {
+        x: (Math.random() - 0.5) * 0.1,
+        y: (Math.random() - 0.5) * 0.1,
+        z: Math.random() * 0.5
+    };
+    asteroid.userData.rotationSpeed = {
+        x: (Math.random() - 0.5) * 0.02,
+        y: (Math.random() - 0.5) * 0.02,
+        z: (Math.random() - 0.5) * 0.02
+    };
+    scene.add(asteroid);
+    asteroids.push(asteroid);
+}
+function createEnemy() {
+    if (enemies.length >= MAX_ENEMIES) return;
+    const enemyGroup = new THREE.Group();
+    // Enemy type (0: basic, 1: fast, 2: heavy)
+    const type = Math.floor(Math.random() * 3);
+    let color, size, health, points, shootPattern;
+    switch(type) {
+        case 0: // Basic enemy
+            color = 0xff3333;
+            size = 1;
+            health = 2;
+            points = 100;
+            shootPattern = 'straight';
+            break;
+        case 1: // Fast enemy
+            color = 0xffaa00;
+            size = 0.7;
+            health = 1;
+            points = 150;
+            shootPattern = 'aimed';
+            break;
+        case 2: // Heavy enemy
+            color = 0xff00ff;
+            size = 1.5;
+            health = 5;
+            points = 300;
+            shootPattern = 'spread';
+            break;
+    }
+    // Create enemy ship model
+    // Main body - inverted cone (pointy end forward)
+    const bodyGeometry = new THREE.ConeGeometry(size * 0.5, size * 1.5, 6);
+    const bodyMaterial = new THREE.MeshPhongMaterial({
+        color: color,
+        emissive: color,
+        emissiveIntensity: 0.3,
+        flatShading: true
+    });
+    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+    body.rotation.x = -Math.PI / 2; // Point forward (toward player)
+    enemyGroup.add(body);
+    // Wings
+    const wingGeometry = new THREE.BoxGeometry(size * 2.5, size * 0.1, size * 0.6);
+    const wingMaterial = new THREE.MeshPhongMaterial({
+        color: color,
+        emissive: color,
+        emissiveIntensity: 0.2
+    });
+    const wings = new THREE.Mesh(wingGeometry, wingMaterial);
+    wings.position.z = size * 0.3;
+    enemyGroup.add(wings);
+    // Cockpit/core
+    const cockpitGeometry = new THREE.SphereGeometry(size * 0.3, 8, 8);
+    const cockpitMaterial = new THREE.MeshPhongMaterial({
+        color: 0xffffff,
+        emissive: color,
+        emissiveIntensity: 0.8
+    });
+    const cockpit = new THREE.Mesh(cockpitGeometry, cockpitMaterial);
+    cockpit.position.z = -size * 0.3;
+    enemyGroup.add(cockpit);
+    // Engine glow at back
+    const engineGeometry = new THREE.CylinderGeometry(size * 0.15, size * 0.25, size * 0.4, 6);
+    const engineMaterial = new THREE.MeshBasicMaterial({
+        color: 0xff0000,
+        transparent: true,
+        opacity: 0.8
+    });
+    const engine = new THREE.Mesh(engineGeometry, engineMaterial);
+    engine.rotation.x = Math.PI / 2;
+    engine.position.z = size * 0.8;
+    enemyGroup.add(engine);
+    // Outer glow
+    const glowGeometry = new THREE.SphereGeometry(size * 1.5, 8, 8);
+    const glowMaterial = new THREE.MeshBasicMaterial({
+        color: color,
+        transparent: true,
+        opacity: 0.1
+    });
+    const glow = new THREE.Mesh(glowGeometry, glowMaterial);
+    enemyGroup.add(glow);
+    // Position enemy far away, will move into screen
+    enemyGroup.position.x = (Math.random() - 0.5) * 50;
+    enemyGroup.position.y = (Math.random() - 0.5) * 40;
+    enemyGroup.position.z = -120 - Math.random() * 20;
+    // Movement pattern (0: horizontal sweep, 1: sine wave, 2: circle, 3: stationary)
+    const movementPattern = Math.floor(Math.random() * 4);
+    // Set up movement parameters
+    let moveSpeed, targetZ, moveDirection;
+    switch(movementPattern) {
+        case 0: // Horizontal sweep
+            moveSpeed = 0.3;
+            targetZ = -40; // Stop closer to player
+            moveDirection = Math.random() > 0.5 ? 1 : -1;
+            break;
+        case 1: // Sine wave
+            moveSpeed = 0.2;
+            targetZ = -35;
+            moveDirection = Math.random() > 0.5 ? 1 : -1;
+            break;
+        case 2: // Circle
+            moveSpeed = 0.15;
+            targetZ = -30;
+            moveDirection = Math.random() > 0.5 ? 1 : -1;
+            break;
+        case 3: // Stationary sniper
+            moveSpeed = 0.4;
+            targetZ = -50;
+            moveDirection = 0;
+            break;
+    }
+    enemyGroup.userData = {
+        type: type,
+        health: health,
+        maxHealth: health,
+        points: points,
+        shootPattern: shootPattern,
+        movementPattern: movementPattern,
+        moveSpeed: moveSpeed,
+        targetZ: targetZ,
+        moveDirection: moveDirection,
+        hasReachedPosition: false,
+        lastShootTime: Date.now() + Math.random() * 2000,
+        shootCooldown: 1500 + Math.random() * 1000,
+        timeAlive: 0,
+        circleRadius: 10 + Math.random() * 5,
+        circleAngle: Math.random() * Math.PI * 2,
+        initialX: (Math.random() - 0.5) * 50,
+        initialY: (Math.random() - 0.5) * 40,
+        body: body,
+        glow: glow,
+        engine: engine,
+        cockpit: cockpit
+    };
+    scene.add(enemyGroup);
+    enemies.push(enemyGroup);
+}
+function createEnemyBullet(enemy, pattern) {
+    const bulletGeometry = new THREE.SphereGeometry(0.15, 8, 8);
+    const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+    const playerPos = spaceship.position.clone();
+    const enemyPos = enemy.position.clone();
+    switch(pattern) {
+        case 'straight':
+            // Single bullet straight down
+            const bullet1 = new THREE.Mesh(bulletGeometry, bulletMaterial);
+            bullet1.position.copy(enemyPos);
+            bullet1.userData.velocity = new THREE.Vector3(0, 0, 2);
+            scene.add(bullet1);
+            enemyBullets.push(bullet1);
+            break;
+        case 'aimed':
+            // Aimed at player
+            const bullet2 = new THREE.Mesh(bulletGeometry, bulletMaterial);
+            bullet2.position.copy(enemyPos);
+            const direction = playerPos.sub(enemyPos).normalize();
+            bullet2.userData.velocity = direction.multiplyScalar(2.5);
+            scene.add(bullet2);
+            enemyBullets.push(bullet2);
+            break;
+        case 'spread':
+            // 5-way spread
+            for (let i = 0; i < 5; i++) {
+                const bullet3 = new THREE.Mesh(bulletGeometry, bulletMaterial.clone());
+                bullet3.position.copy(enemyPos);
+                const angle = (i - 2) * 0.3; // -0.6 to 0.6 radians
+                const vel = new THREE.Vector3(
+                    Math.sin(angle) * 2,
+                    0,
+                    Math.cos(angle) * 2
+                );
+                bullet3.userData.velocity = vel;
+                scene.add(bullet3);
+                enemyBullets.push(bullet3);
+            }
+            break;
+    }
+}
+function createExplosion(position, color = 0xff6600) {
+    const particleCount = 20;
+    for (let i = 0; i < particleCount; i++) {
+        const geometry = new THREE.SphereGeometry(0.2, 4, 4);
+        const material = new THREE.MeshBasicMaterial({ color: color });
+        const particle = new THREE.Mesh(geometry, material);
+        particle.position.copy(position);
+        const velocity = new THREE.Vector3(
+            (Math.random() - 0.5) * 3,
+            (Math.random() - 0.5) * 3,
+            (Math.random() - 0.5) * 3
+        );
+        particle.userData = {
+            velocity: velocity,
+            lifetime: 30,
+            decay: 0.05
+        };
+        scene.add(particle);
+        explosions.push(particle);
+    }
+}
+function createProjectile(side) {
+    const geometry = new THREE.SphereGeometry(0.2, 8, 8);
+    const color = side === 'left' ? 0xff00ff : 0x00ffff; // Pink for left, cyan for right
+    const material = new THREE.MeshBasicMaterial({ color: color });
+    const projectile = new THREE.Mesh(geometry, material);
+    // Position based on which gun is firing (in local space)
+    const offsetX = side === 'left' ? -1.2 : 1.2;
+    const gunPosition = new THREE.Vector3(offsetX, 0, -2);
+    // Transform gun position to world space based on spaceship rotation and position
+    gunPosition.applyEuler(spaceship.rotation);
+    gunPosition.add(spaceship.position);
+    projectile.position.copy(gunPosition);
+    // Add glow
+    const glowGeometry = new THREE.SphereGeometry(0.4, 8, 8);
+    const glowMaterial = new THREE.MeshBasicMaterial({
+        color: color,
+        transparent: true,
+        opacity: 0.3
+    });
+    const glow = new THREE.Mesh(glowGeometry, glowMaterial);
+    projectile.add(glow);
+    // Calculate velocity direction based on spaceship rotation
+    const direction = new THREE.Vector3(0, 0, -1); // Forward direction
+    direction.applyEuler(spaceship.rotation);
+    direction.normalize();
+    projectile.userData.velocity = direction.multiplyScalar(5);
+    scene.add(projectile);
+    projectiles.push(projectile);
+}
+async function fetchSensorData() {
+    try {
+        const response = await fetch('/sensor_data');
+        const data = await response.json();
+        // Smooth the sensor data
+        sensorData.roll = sensorData.roll * (1 - SMOOTHING) + data.roll * SMOOTHING;
+        sensorData.pitch = sensorData.pitch * (1 - SMOOTHING) + data.pitch * SMOOTHING;
+        sensorData.yaw = sensorData.yaw * (1 - SMOOTHING) + data.yaw * SMOOTHING;
+        sensorData.antennas = data.antennas;
+        sensorData.score = data.score;
+        sensorData.health = data.health;
+        // Detect left gun fire trigger (rising edge)
+        if (data.fire_left && !lastFireLeftState) {
+            createProjectile('left');
+            lastFireLeftState = true;
+        } else if (!data.fire_left) {
+            lastFireLeftState = false;
+        }
+        // Detect right gun fire trigger (rising edge)
+        if (data.fire_right && !lastFireRightState) {
+            createProjectile('right');
+            lastFireRightState = true;
+        } else if (!data.fire_right) {
+            lastFireRightState = false;
+        }
+        // Update HUD
+        updateHUD();
+    } catch (error) {
+        console.error('Error fetching sensor data:', error);
+    }
+    // Fetch at 50Hz
+    setTimeout(fetchSensorData, 20);
+}
+function updateHUD() {
+    document.getElementById('score').textContent = sensorData.score;
+    document.getElementById('roll').textContent = sensorData.roll.toFixed(1);
+    document.getElementById('pitch').textContent = sensorData.pitch.toFixed(1);
+    document.getElementById('yaw').textContent = sensorData.yaw.toFixed(1);
+    document.getElementById('antennas').textContent =
+        `${sensorData.antennas.right.toFixed(2)}, ${sensorData.antennas.left.toFixed(2)}`;
+    const healthPercent = (sensorData.health / 100) * 100;
+    const healthColor = healthPercent > 50 ? '#0f0' : healthPercent > 25 ? '#ff0' : '#f00';
+    document.getElementById('status').innerHTML = `HP: <span style="color: ${healthColor}">${sensorData.health}</span>`;
+}
+async function addScore(points) {
+    try {
+        await fetch('/add_score', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ points })
+        });
+    } catch (e) {
+        console.error('Error adding score:', e);
+    }
+}
+async function damagePlayer(damage) {
+    try {
+        await fetch('/damage_player', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ damage })
+        });
+    } catch (e) {
+        console.error('Error damaging player:', e);
+    }
+}
+function updateSpaceship() {
+    if (!spaceship) return;
+    // Map sensor data to spaceship rotation
+    // Pitch: tilt forward/back controls pitch (up/down aiming)
+    // Yaw: turn head left/right controls yaw (left/right aiming)
+    // Roll: tilt left/right for visual banking effect
+    const targetRotation = {
+        x: THREE.MathUtils.degToRad(sensorData.pitch * MOVEMENT_SCALE),
+        y: THREE.MathUtils.degToRad(sensorData.yaw * MOVEMENT_SCALE), // Yaw controls yaw for left/right aim
+        z: THREE.MathUtils.degToRad(sensorData.roll * MOVEMENT_SCALE) // Roll for visual banking
+    };
+    // Smooth rotation
+    spaceship.rotation.x += (targetRotation.x - spaceship.rotation.x) * 0.1;
+    spaceship.rotation.y += (targetRotation.y - spaceship.rotation.y) * 0.1;
+    spaceship.rotation.z += (targetRotation.z - spaceship.rotation.z) * 0.1;
+    // Use yaw to also move spaceship left/right in space for dynamic feel
+    const targetX = sensorData.yaw * YAW_MOVEMENT_SCALE;
+    spaceship.position.x += (targetX - spaceship.position.x) * 0.1;
+    // Limit spaceship movement range
+    spaceship.position.x = Math.max(-30, Math.min(30, spaceship.position.x));
+    // Animate engine glow
+    if (spaceshipParts.engine) {
+        const pulse = Math.sin(Date.now() * 0.01) * 0.1 + 0.9;
+        spaceshipParts.engine.material.opacity = pulse;
+        spaceshipParts.engineLight.intensity = pulse * 2;
+    }
+}
+function updateAsteroids() {
+    for (let i = asteroids.length - 1; i >= 0; i--) {
+        const asteroid = asteroids[i];
+        // Move asteroid toward camera (simulating forward movement)
+        asteroid.position.x += asteroid.userData.velocity.x;
+        asteroid.position.y += asteroid.userData.velocity.y;
+        asteroid.position.z += FORWARD_SPEED + asteroid.userData.velocity.z;
+        // Rotate asteroid
+        asteroid.rotation.x += asteroid.userData.rotationSpeed.x;
+        asteroid.rotation.y += asteroid.userData.rotationSpeed.y;
+        asteroid.rotation.z += asteroid.userData.rotationSpeed.z;
+        // Remove if behind camera
+        if (asteroid.position.z > 20) {
+            scene.remove(asteroid);
+            asteroids.splice(i, 1);
+        }
+    }
+}
+function updateProjectiles() {
+    for (let i = projectiles.length - 1; i >= 0; i--) {
+        const projectile = projectiles[i];
+        // Move projectile using velocity vector
+        projectile.position.add(projectile.userData.velocity);
+        let hitSomething = false;
+        // Check collision with asteroids
+        for (let j = asteroids.length - 1; j >= 0; j--) {
+            const asteroid = asteroids[j];
+            const distance = projectile.position.distanceTo(asteroid.position);
+            if (distance < asteroid.geometry.parameters.radius + 0.5) {
+                scene.remove(asteroid);
+                asteroids.splice(j, 1);
+                scene.remove(projectile);
+                projectiles.splice(i, 1);
+                createExplosion(projectile.position, 0x888888);
+                hitSomething = true;
+                break;
+            }
+        }
+        if (hitSomething) continue;
+        // Check collision with enemies
+        for (let j = enemies.length - 1; j >= 0; j--) {
+            const enemy = enemies[j];
+            const distance = projectile.position.distanceTo(enemy.position);
+            // Larger hitbox based on enemy size
+            const hitRadius = 3 + (enemy.userData.type === 2 ? 1 : 0); // Heavy enemies are bigger
+            if (distance < hitRadius) {
+                enemy.userData.health -= 1;
+                // Flash enemy when hit
+                enemy.userData.body.material.emissiveIntensity = 1;
+                setTimeout(() => {
+                    if (enemy.userData.body) {
+                        enemy.userData.body.material.emissiveIntensity = 0.3;
+                    }
+                }, 100);
+                scene.remove(projectile);
+                projectiles.splice(i, 1);
+                if (enemy.userData.health <= 0) {
+                    createExplosion(enemy.position, enemy.userData.body.material.color);
+                    scene.remove(enemy);
+                    enemies.splice(j, 1);
+                    addScore(enemy.userData.points);
+                }
+                hitSomething = true;
+                break;
+            }
+        }
+        if (hitSomething) continue;
+        // Remove if too far from camera
+        if (projectile.position.z < -200 || projectile.position.length() > 300) {
+            scene.remove(projectile);
+            projectiles.splice(i, 1);
+        }
+    }
+}
+function updateEnemies() {
+    for (let i = enemies.length - 1; i >= 0; i--) {
+        const enemy = enemies[i];
+        enemy.userData.timeAlive += 0.016;
+        // Move enemy into position first
+        if (!enemy.userData.hasReachedPosition) {
+            // Move toward target Z position
+            if (enemy.position.z < enemy.userData.targetZ) {
+                enemy.position.z += enemy.userData.moveSpeed;
+                if (enemy.position.z >= enemy.userData.targetZ) {
+                    enemy.userData.hasReachedPosition = true;
+                    enemy.userData.initialX = enemy.position.x;
+                    enemy.userData.initialY = enemy.position.y;
+                }
+            }
+        } else {
+            // Once in position, execute movement pattern
+            switch(enemy.userData.movementPattern) {
+                case 0: // Horizontal sweep
+                    enemy.position.x += enemy.userData.moveDirection * 0.2;
+                    // Bounce off edges
+                    if (Math.abs(enemy.position.x) > 35) {
+                        enemy.userData.moveDirection *= -1;
+                    }
+                    break;
+                case 1: // Sine wave
+                    enemy.position.x = enemy.userData.initialX + Math.sin(enemy.userData.timeAlive * 2) * 15;
+                    enemy.position.y = enemy.userData.initialY + Math.sin(enemy.userData.timeAlive * 1.5) * 8;
+                    break;
+                case 2: // Circle
+                    enemy.userData.circleAngle += 0.02 * enemy.userData.moveDirection;
+                    enemy.position.x = enemy.userData.initialX + Math.cos(enemy.userData.circleAngle) * enemy.userData.circleRadius;
+                    enemy.position.y = enemy.userData.initialY + Math.sin(enemy.userData.circleAngle) * enemy.userData.circleRadius;
+                    break;
+                case 3: // Stationary
+                    // Stay in place
+                    break;
+            }
+        }
+        // Rotate enemy slowly
+        enemy.rotation.z += 0.01;
+        // Animate engine glow
+        if (enemy.userData.engine) {
+            const pulse = Math.sin(Date.now() * 0.005 + i) * 0.3 + 0.7;
+            enemy.userData.engine.material.opacity = pulse;
+        }
+        // Shoot at player only when in position
+        if (enemy.userData.hasReachedPosition) {
+            const now = Date.now();
+            if (now - enemy.userData.lastShootTime > enemy.userData.shootCooldown) {
+                createEnemyBullet(enemy, enemy.userData.shootPattern);
+                enemy.userData.lastShootTime = now;
+            }
+        }
+        // Remove if too far away or if player flew past them
+        if (enemy.position.z > 30 || enemy.position.length() > 150) {
+            scene.remove(enemy);
+            enemies.splice(i, 1);
+        }
+    }
+}
+function updateEnemyBullets() {
+    for (let i = enemyBullets.length - 1; i >= 0; i--) {
+        const bullet = enemyBullets[i];
+        // Move bullet
+        bullet.position.add(bullet.userData.velocity);
+        // Check collision with player - larger hitbox
+        const distance = bullet.position.distanceTo(spaceship.position);
+        if (distance < 3.5) { // Increased from 2 to 3.5
+            createExplosion(bullet.position, 0xff0000);
+            scene.remove(bullet);
+            enemyBullets.splice(i, 1);
+            damagePlayer(10);
+            console.log('Player hit! HP should decrease by 10');
+            continue;
+        }
+        // Remove if too far
+        if (bullet.position.z > 50 || bullet.position.length() > 200) {
+            scene.remove(bullet);
+            enemyBullets.splice(i, 1);
+        }
+    }
+}
+function updateExplosions() {
+    for (let i = explosions.length - 1; i >= 0; i--) {
+        const particle = explosions[i];
+        particle.position.add(particle.userData.velocity);
+        particle.userData.velocity.multiplyScalar(0.95);
+        particle.userData.lifetime--;
+        particle.material.opacity = particle.userData.lifetime / 30;
+        if (particle.userData.lifetime <= 0) {
+            scene.remove(particle);
+            explosions.splice(i, 1);
+        }
+    }
+}
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+}
+function updateReticle() {
+    // Calculate where the spaceship is aiming based on rotation
+    // Create a point 50 units in front, rotated by the spaceship's rotation
+    const aimDirection = new THREE.Vector3(0, 0, -50);
+    // Apply spaceship rotation to get aim direction
+    const rotationMatrix = new THREE.Matrix4();
+    rotationMatrix.makeRotationFromEuler(spaceship.rotation);
+    aimDirection.applyMatrix4(rotationMatrix);
+    // Add to spaceship position
+    const aimPoint = spaceship.position.clone().add(aimDirection);
+    // Project to screen coordinates
+    const screenPosition = aimPoint.clone();
+    screenPosition.project(camera);
+    // Convert to pixel coordinates
+    const x = (screenPosition.x * 0.5 + 0.5) * window.innerWidth;
+    const y = (screenPosition.y * -0.5 + 0.5) * window.innerHeight;
+    // Update crosshair position
+    const crosshair = document.querySelector('.crosshair');
+    if (crosshair) {
+        crosshair.style.left = `${x}px`;
+        crosshair.style.top = `${y}px`;
+        crosshair.style.transform = 'translate(-50%, -50%)';
+    }
+}
+function animate() {
+    requestAnimationFrame(animate);
+    updateSpaceship();
+    updateAsteroids();
+    updateEnemies();
+    updateProjectiles();
+    updateEnemyBullets();
+    updateExplosions();
+    updateReticle();
+    // Move stars to simulate forward movement through space
+    stars.forEach(starField => {
+        const positions = starField.geometry.attributes.position.array;
+        for (let i = 0; i < positions.length; i += 3) {
+            positions[i + 2] += FORWARD_SPEED; // Move stars toward us
+            // Wrap stars around when they pass us
+            if (positions[i + 2] > 50) {
+                positions[i + 2] = -1950;
+                positions[i] = (Math.random() - 0.5) * 2000;
+                positions[i + 1] = (Math.random() - 0.5) * 2000;
+            }
+        }
+        starField.geometry.attributes.position.needsUpdate = true;
+    });
+    renderer.render(scene, camera);
+}
+// Start the game
+init();

spaceship_game/static/style.css ADDED Viewed

	@@ -0,0 +1,25 @@

+body {
+    font-family: sans-serif;
+    margin: 24px;
+}
+#sound-btn {
+    padding: 10px 20px;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+    border-radius: 6px;
+    background-color: #3498db;
+}
+#status {
+    margin-top: 16px;
+    font-weight: bold;
+}
+#controls {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}

style.css ADDED Viewed

	@@ -0,0 +1,411 @@

+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	line-height: 1.6;
+	color: #333;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	min-height: 100vh;
+}
+.hero {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	padding: 4rem 2rem;
+	text-align: center;
+}
+.hero-content {
+	max-width: 800px;
+	margin: 0 auto;
+}
+.app-icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	display: inline-block;
+}
+.hero h1 {
+	font-size: 3rem;
+	font-weight: 700;
+	margin-bottom: 1rem;
+	background: linear-gradient(45deg, #fff, #f0f9ff);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+.tagline {
+	font-size: 1.25rem;
+	opacity: 0.9;
+	max-width: 600px;
+	margin: 0 auto;
+}
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 2rem;
+	position: relative;
+	z-index: 2;
+}
+.main-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	margin-top: -2rem;
+	overflow: hidden;
+	margin-bottom: 3rem;
+}
+.app-preview {
+	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
+	padding: 3rem;
+	color: white;
+	text-align: center;
+	position: relative;
+}
+.preview-image {
+	background: #000;
+	border-radius: 15px;
+	padding: 2rem;
+	max-width: 500px;
+	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+}
+.camera-feed {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	opacity: 0.7;
+}
+.detection-overlay {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100%;
+}
+.bbox {
+	background: rgba(34, 197, 94, 0.9);
+	color: white;
+	padding: 0.5rem 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	font-weight: 600;
+	margin: 0.5rem;
+	display: inline-block;
+	border: 2px solid #22c55e;
+}
+.app-details {
+	padding: 3rem;
+}
+.app-details h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 2rem;
+	text-align: center;
+}
+.template-info {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 2rem;
+	margin-bottom: 3rem;
+}
+.info-box {
+	background: #f0f9ff;
+	border: 2px solid #e0f2fe;
+	border-radius: 12px;
+	padding: 2rem;
+}
+.info-box h3 {
+	color: #0c4a6e;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+.info-box p {
+	color: #0369a1;
+	line-height: 1.6;
+}
+.how-to-use {
+	background: #fefce8;
+	border: 2px solid #fde047;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 3rem;
+}
+.how-to-use h3 {
+	color: #a16207;
+	margin-bottom: 1.5rem;
+	font-size: 1.3rem;
+	text-align: center;
+}
+.steps {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+.step {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+}
+.step-number {
+	background: #eab308;
+	color: white;
+	width: 2rem;
+	height: 2rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	flex-shrink: 0;
+}
+.step h4 {
+	color: #a16207;
+	margin-bottom: 0.5rem;
+	font-size: 1.1rem;
+}
+.step p {
+	color: #ca8a04;
+}
+.download-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	padding: 3rem;
+	text-align: center;
+}
+.download-card h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 1rem;
+}
+.download-card>p {
+	color: #64748b;
+	font-size: 1.1rem;
+	margin-bottom: 2rem;
+}
+.dashboard-config {
+	margin-bottom: 2rem;
+	text-align: left;
+	max-width: 400px;
+	margin-left: auto;
+	margin-right: auto;
+}
+.dashboard-config label {
+	display: block;
+	color: #374151;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+.dashboard-config input {
+	width: 100%;
+	padding: 0.75rem 1rem;
+	border: 2px solid #e5e7eb;
+	border-radius: 8px;
+	font-size: 0.95rem;
+	transition: border-color 0.2s;
+}
+.dashboard-config input:focus {
+	outline: none;
+	border-color: #667eea;
+}
+.install-btn {
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: white;
+	border: none;
+	padding: 1.25rem 3rem;
+	border-radius: 16px;
+	font-size: 1.2rem;
+	font-weight: 700;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-bottom: 2rem;
+	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+.install-btn:hover:not(:disabled) {
+	transform: translateY(-3px);
+	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
+}
+.install-btn:disabled {
+	opacity: 0.7;
+	cursor: not-allowed;
+	transform: none;
+}
+.manual-option {
+	background: #f8fafc;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 2rem;
+}
+.manual-option h3 {
+	color: #1e293b;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+.manual-option>p {
+	color: #64748b;
+	margin-bottom: 1rem;
+}
+.btn-icon {
+	font-size: 1.1rem;
+}
+.install-status {
+	padding: 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	text-align: center;
+	display: none;
+	margin-top: 1rem;
+}
+.install-status.success {
+	background: #dcfce7;
+	color: #166534;
+	border: 1px solid #bbf7d0;
+}
+.install-status.error {
+	background: #fef2f2;
+	color: #dc2626;
+	border: 1px solid #fecaca;
+}
+.install-status.loading {
+	background: #dbeafe;
+	color: #1d4ed8;
+	border: 1px solid #bfdbfe;
+}
+.install-status.info {
+	background: #e0f2fe;
+	color: #0369a1;
+	border: 1px solid #7dd3fc;
+}
+.manual-install {
+	background: #1f2937;
+	border-radius: 8px;
+	padding: 1rem;
+	margin-bottom: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+.manual-install code {
+	color: #10b981;
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+	font-size: 0.85rem;
+	flex: 1;
+	overflow-x: auto;
+}
+.copy-btn {
+	background: #374151;
+	color: white;
+	border: none;
+	padding: 0.5rem 1rem;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+.copy-btn:hover {
+	background: #4b5563;
+}
+.manual-steps {
+	color: #6b7280;
+	font-size: 0.9rem;
+	line-height: 1.8;
+}
+.footer {
+	text-align: center;
+	padding: 2rem;
+	color: white;
+	opacity: 0.8;
+}
+.footer a {
+	color: white;
+	text-decoration: none;
+	font-weight: 600;
+}
+.footer a:hover {
+	text-decoration: underline;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+	.hero {
+		padding: 2rem 1rem;
+	}
+	.hero h1 {
+		font-size: 2rem;
+	}
+	.container {
+		padding: 0 1rem;
+	}
+	.app-details,
+	.download-card {
+		padding: 2rem;
+	}
+	.features-grid {
+		grid-template-columns: 1fr;
+	}
+	.download-options {
+		grid-template-columns: 1fr;
+	}
+}