chore: initial project state with snake and design docs

docs/superpowers/specs/2026-03-31-retro-arcade-platform-design.md

@@ -0,0 +1,97 @@
+# Retro Arcade Platform — Design Spec
+
+**Date:** 2026-03-31
+
+## Overview
+
+Erweiterung des bestehenden Snake-Spiels zu einer kleinen Retro-Arcade-Plattform mit vier Spielen. Alle Dateien sind plain HTML/CSS/JS, kein Build-Schritt, kein Server, kein Package Manager — direkt im Browser öffenbar.
+
+## Spiele
+
+1. **Snake** — bestehendes `snake.html`, minimal angepasst
+2. **Tetris** — neu
+3. **Breakout** — neu
+4. **Space Invaders** — neu
+
+## Dateistruktur
+
+```
+testprojekt/
+├── index.html          ← Startmenü (neu)
+├── style.css           ← gemeinsame Styles (neu)
+├── scores.js           ← Highscore-Logik (neu)
+├── snake.html          ← angepasst (shared assets einbinden)
+├── tetris.html         ← neu
+├── breakout.html       ← neu
+└── spaceinvaders.html  ← neu
+```
+
+## Architektur
+
+### Gemeinsame Assets
+
+**`style.css`**
+- Navy/Teal-Theme: Hintergrund `#1a1a2e`, Akzent `#4ecca3`, Schrift `Courier New`
+- Gemeinsame Klassen: Body-Layout, Überschriften, HUD, Canvas-Border, Overlay, Buttons, Game-Kacheln
+- Wird von allen HTML-Dateien via `<link rel="stylesheet" href="style.css">` eingebunden
+
+**`scores.js`**
+- `getHighscore(game)` — liest aus `localStorage` (`hs_snake`, `hs_tetris`, `hs_breakout`, `hs_spaceinvaders`), gibt `0` zurück wenn kein Eintrag
+- `setHighscore(game, score)` — speichert nur wenn `score > getHighscore(game)`
+- Wird via `<script src="scores.js"></script>` eingebunden
+
+### Startmenü (`index.html`)
+
+- Titel: "RETRO ARCADE" in Teal, zentriert
+- 2×2 Grid mit einer Kachel pro Spiel
+- Jede Kachel zeigt: Spielname + aktuellen Highscore (gelesen beim Seitenload via `scores.js`)
+- Klick auf Kachel → öffnet die jeweilige Spieldatei (`href="snake.html"` etc.)
+- Highscores werden beim Öffnen von `index.html` frisch aus `localStorage` gelesen — immer aktuell
+
+### Einzelne Spiele
+
+Jedes Spiel bekommt:
+- `<link rel="stylesheet" href="style.css">` und `<script src="scores.js"></script>` im Head
+- "← Menü"-Button oben links, verlinkt auf `index.html`
+- Beim Game Over: `setHighscore('tetris', score)` (bzw. jeweiliger Spielname) aufrufen, bevor der Overlay angezeigt wird
+- Spielspezifische Styles (z.B. Tetris-Blockfarben) inline im jeweiligen `<style>`-Block
+
+### Snake-Anpassung
+
+`snake.html` wird minimal geändert:
+- Inline-CSS für gemeinsame Stile auf `style.css` auslagern
+- `scores.js` einbinden
+- "← Menü"-Button hinzufügen
+- `setHighscore('snake', score)` bei Game Over aufrufen
+
+## Highscore-Speicherung
+
+| localStorage-Key    | Spiel         |
+|---------------------|---------------|
+| `hs_snake`          | Snake         |
+| `hs_tetris`         | Tetris        |
+| `hs_breakout`       | Breakout      |
+| `hs_spaceinvaders`  | Space Invaders|
+
+Ein Highscore wird nur überschrieben wenn der neue Score höher ist.
+
+## Visueller Stil
+
+Einheitliches Navy/Teal-Theme, abgeleitet vom bestehenden Snake-Design:
+
+- Background: `#1a1a2e`
+- Akzentfarbe: `#4ecca3`
+- Text: `#e0e0e0`
+- Sekundärtext: `#a0a0c0`
+- Schrift: `'Courier New', monospace`
+- Canvas/Kachel-Border: `2px solid #4ecca3`, Glow via `box-shadow`
+
+Jedes Spiel behält seine eigenen Spielmechanik-spezifischen Farben (z.B. Tetris-Blockfarben), aber das Rahmenlayout (HUD, Overlay, Menübutton) ist identisch.
+
+## Nicht im Scope
+
+- Sound / Musik
+- Mobile-Touch-Steuerung
+- Globale Ranglisten / Server
+- Animierte Übergänge zwischen Spielen
+- Schwierigkeitsstufen