feat: live settings panel (≈45 Werte, Live/Reload, Persistenz, AO live)

- panel.js: Drawer-Panel (P / ⚙), schema-getrieben, ●live/⟳reload-Badges
- Werte direkt im Panel einstellbar statt in config.js grabben
- Live-Apply über mutateNested (nur Plain-Objekte, nie Modul-Namespace)
  + registerApply-Callbacks für Three.js-Objekte (FOV, Belichtung, Fog, Licht, Schatten-Frustum, Bloom)
- PLAYER.*/CONTROLS.* live (player.js liest jeden Frame neu)
- AO jetzt live: debounced world.markAllDirty() remesht alle Chunks ohne F5
- Reload-Pflichtige Werte persistiert + blinkender Neu-Starten-Button
  (Seed, Meereshöhe, Spawn, MSAA, Tone-Mapping, Schatten an/Größe, AO-Level)
- Persistenz: localStorage (debounced), config.js lädt beim Start
- HUD/Overlay ausgeblendet, solange das Panel offen ist (Welt frei sichtbar)
- Buttons: Neu starten, Auf Standard zurücksetzen, Werte kopieren (JSON)

Co-Authored-By: Claude <noreply@anthropic.com>

index.html

@@ -25,7 +25,7 @@
         <div><b>WASD</b> Laufen &nbsp; <b>Leertaste</b> Springen</div>
         <div><b>Maus</b> Umsehen &nbsp; <b>Shift</b> Sprint / Runter (Fly)</div>
         <div><b>Linke Maustaste</b> Abbauen &nbsp; <b>Rechte Maustaste</b> Setzen</div>
-        <div><b>F</b> Flug-Modus &nbsp; <b>1–6</b> Block wählen &nbsp; <b>Esc</b> Pause</div>
+        <div><b>F</b> Flug-Modus &nbsp; <b>P</b> / <b>⚙</b> Einstellungen &nbsp; <b>1–6</b> Block wählen &nbsp; <b>Esc</b> Pause</div>
       </div>
     </div>
   </div>

js/config.js

@@ -7,87 +7,65 @@
 //  constants.js und sollten NICHT geändert werden (sonst
 //  drohen Mesh/Storage-Fehler).
 //
-//  Nach jeder Änderung: Seite HARD-REFRESHEN (Ctrl+Shift+R),
+//  👉 Live anpassen: Im Spiel **P** drücken (oder ⚙ oben
+//     rechts). Grafik-Werte greifen sofort, Welt-/Performance-
+//     Werte brauchen einen Neustart (Button im Panel).
+//     Alle Änderungen werden in localStorage gespeichert und
+//     überschreiben diese Defaults beim Laden.
+//
+//  Nach jeder Direktänderung hier: HARD-REFRESH (Ctrl+Shift+R),
 //  damit der Browser die Module nicht aus dem Cache lädt.
 // ============================================================
 
 import * as THREE from 'three';
 
-// ────────────────────────────────────────────────────────────
+// Primitives sind `let`, damit gespeicherte Overrides (localStorage)
-//  🌍 WELT
+// sie beim Laden überschreiben können. Objekte bleiben `const` und
-// ────────────────────────────────────────────────────────────
+// werden per Object.assign gemutiert.
-export const WORLD_SEED = 1337;   // gleicher Seed = gleiche Welt. Beliebige ganze Zahl.
+export let WORLD_SEED = 1337;   // gleicher Seed = gleiche Welt. Beliebige ganze Zahl.
-export const SEA_LEVEL = 26;      // Höhe der Wasseroberfläche (muss < CHUNK_HEIGHT=64 bleiben)
+export let SEA_LEVEL = 26;      // Höhe der Wasseroberfläche (muss < CHUNK_HEIGHT=64 bleiben)
 
 // Spawn-Position (X/Z in Blöcken; Y wird automatisch auf den Boden gesetzt).
 export const SPAWN = { x: 8, z: 8 };
 
-// ────────────────────────────────────────────────────────────
+export let RENDER_DISTANCE = 6;     // Chunk-Radius um den Spieler (höher = weiter sichtbar, mehr Last)
-//  ⚡ PERFORMANCE
+export let MAX_OPS_PER_FRAME = 2;   // Chunk-Generierung/Meshing pro Frame (höher = lädt schneller, ruckelt eher)
-// ────────────────────────────────────────────────────────────
+export let MAX_PIXEL_RATIO = 2;     // Cap der Gerät-Pixelratio (2 = scharf; 1 = schneller auf HiDPI-Screens)
-export const RENDER_DISTANCE = 6;     // Chunk-Radius um den Spieler (höher = weiter sichtbar, mehr Last)
-export const MAX_OPS_PER_FRAME = 2;   // Chunk-Generierung/Meshing pro Frame (höher = lädt schneller, ruckelt eher)
-export const MAX_PIXEL_RATIO = 2;     // Cap der Gerät-Pixelratio (2 = scharf; 1 = schneller auf HiDPI-Screens)
 
-// ────────────────────────────────────────────────────────────
+export let ANTIALIAS = true;                 // MSAA direkt am Renderer (Kantenglättung ohne Composer)
-//  🎨 RENDERER & TONE-MAPPING
+export let MSAA_SAMPLES = 4;                 // MSAA-Stufen im Post-Processing-Composer (WebGL2; 0 = aus)
-// ────────────────────────────────────────────────────────────
+export let TONE_MAPPING = THREE.ACESFilmicToneMapping; // "Color Grading". Alternativen: THREE.Linear / Reinhard / Cineon
-export const ANTIALIAS = true;                 // MSAA direkt am Renderer (Kantenglättung ohne Composer)
+export let TONE_MAPPING_EXPOSURE = 1.1;      // globale Helligkeit (höher = heller). ACES dunkelt leicht ab.
-export const MSAA_SAMPLES = 4;                 // MSAA-Stufen im Post-Processing-Composer (WebGL2; 0 = aus)
-export const TONE_MAPPING = THREE.ACESFilmicToneMapping; // "Color Grading". Alternativen: THREE.Linear / Reinhard / Cineon
-export const TONE_MAPPING_EXPOSURE = 1.1;      // globale Helligkeit (höher = heller). ACES dunkelt leicht ab.
 
-// ────────────────────────────────────────────────────────────
+export let SKY_COLOR = 0xaaccff;   // Hintergrund- und Nebelfarbe
-//  🌫️ HIMMEL & NEBEL
+export let FOG_NEAR = 64;          // Block-Distanz, ab der Nebel einsetzt (≈ (RENDER_DISTANCE-2)*16)
-// ────────────────────────────────────────────────────────────
+export let FOG_FAR = 96;           // Block-Distanz, ab der Nebel ganz undurchsichtig ist (≈ RENDER_DISTANCE*16)
-export const SKY_COLOR = 0xaaccff;   // Hintergrund- und Nebelfarbe
-export const FOG_NEAR = 64;          // Block-Distanz, ab der Nebel einsetzt (≈ (RENDER_DISTANCE-2)*16)
-export const FOG_FAR = 96;           // Block-Distanz, ab der Nebel ganz undurchsichtig ist (≈ RENDER_DISTANCE*16)
-//  Hinweis: bei Änderung von RENDER_DISTANCE FOG_NEAR/FOG_FAR passend nachziehen.
 
-// ────────────────────────────────────────────────────────────
+export let CAMERA_FOV = 72;   // Sichtfeld in Grad (höher = weiterer Blickwinkel / Fisheye)
-//  📷 KAMERA
+export let CAMERA_NEAR = 0.1;
-// ────────────────────────────────────────────────────────────
+export let CAMERA_FAR = 1000;
-export const CAMERA_FOV = 72;   // Sichtfeld in Grad (höher = weiterer Blickwinkel / Fisheye)
-export const CAMERA_NEAR = 0.1;
-export const CAMERA_FAR = 1000;
 
-// ────────────────────────────────────────────────────────────
-//  💡 BELEUCHTUNG
-// ────────────────────────────────────────────────────────────
 export const HEMISPHERE = { sky: 0xbfdfff, ground: 0x5a6b3a, intensity: 1.05 }; // weiche Aufhellung von oben/unten
 export const SUN = { color: 0xfff4d6, intensity: 1.2 };                          // gerichtetes Hauptlicht
 // Sonnenrichtung (wird intern normalisiert). Bestimmt, aus welcher Seite Licht/Schatten kommen.
 export const SUN_DIRECTION = [0.55, 0.72, 0.42];
 
-// ────────────────────────────────────────────────────────────
+export let SHADOWS_ENABLED = true;
-//  🌑 SCHATTEN
+export let SHADOW_MAP_SIZE = 2048;      // Schatten-Textur-Auflösung (höher = schärfer + mehr Last; 1024/2048 typisch)
-// ────────────────────────────────────────────────────────────
+export let SHADOW_AREA = 44;            // halbe Kantenlänge des Schatten-Frustums um den Spieler (Blöcke)
-export const SHADOWS_ENABLED = true;
+export let SHADOW_BIAS = 0.0002;        // gegen "Shadow Acne" (strichartige Selbstschatten)
-export const SHADOW_MAP_SIZE = 2048;      // Schatten-Textur-Auflösung (höher = schärfer + mehr Last; 1024/2048 typisch)
+export let SHADOW_NORMAL_BIAS = 0.02;   // gegen Acne auf Voxelflächen (in Normalenrichtung verschieben)
-export const SHADOW_AREA = 44;            // halbe Kantenlänge des Schatten-Frustums um den Spieler (Blöcke)
-export const SHADOW_BIAS = 0.0002;        // gegen "Shadow Acne" (strichartige Selbstschatten)
-export const SHADOW_NORMAL_BIAS = 0.02;   // gegen Acne auf Voxelflächen (in Normalenrichtung verschieben)
 
-// ────────────────────────────────────────────────────────────
+export let BLOOM_ENABLED = true;
-//  ✨ POST-PROCESSING (Bloom / Glanz)
-// ────────────────────────────────────────────────────────────
-export const BLOOM_ENABLED = true;
 export const BLOOM = { strength: 0.4, radius: 0.5, threshold: 0.55 };
 //   strength  = Glanz-Stärke (höher = stärkeres Leuchten)
 //   radius    = Ausbreitung des Glanzes
 //   threshold = nur Pixel HELLER als dieser Wert glühen (niedriger = mehr glüht)
 
-// ────────────────────────────────────────────────────────────
-//  🔲 AMBIENT OCCLUSION (Eck-Verdunkelung = "Smooth Lighting")
-// ────────────────────────────────────────────────────────────
 //  AO-Stufe pro Vertex: Index 0 = stärkste Verdeckung (dunkelste Ecke),
 //  3 = keine Verdeckung. Niedrigere Werte = dunklere Ecken/Kanten.
 export const AO_LEVEL = [0.2, 0.4, 0.5, 1.8];
 
-// ────────────────────────────────────────────────────────────
-//  🚶 SPIELER (Physik & Dimensionen)
-// ────────────────────────────────────────────────────────────
 export const PLAYER = {
   HALF: 0.3,        // halbe Spielerbreite (X/Z) — AABB-Kollisionskasten
   HEIGHT: 1.8,      // Körperhöhe
@@ -100,12 +78,86 @@ export const PLAYER = {
   MAX_FALL: 50,     // max. Fallgeschwindigkeit (Terminal-Speed)
 };
 
-// ────────────────────────────────────────────────────────────
+// Steuerungs-Werte (live änderbar). Zusammen im Objekt, damit das Panel
-//  🖱️ STEUERUNG
+// die Properties mutieren kann und Spieler/Raycast sie live sehen.
-// ────────────────────────────────────────────────────────────
+export const CONTROLS = {
-export const MOUSE_SENSITIVITY = 0.0022;   // Maus-Look-Empfindlichkeit (höher = schnellere Drehung)
+  MOUSE_SENSITIVITY: 0.0022,   // Maus-Look-Empfindlichkeit (höher = schnellere Drehung)
+  REACH: 6,                    // Reichweite für Abbauen/Bauen (Blöcke)
+};
 
 // ────────────────────────────────────────────────────────────
-//  🎯 GAMEPLAY
+//  Defaults-Snapshot (für "Zurücksetzen" im Panel)
 // ────────────────────────────────────────────────────────────
-export const REACH = 6;   // Reichweite für Abbauen/Bauen (Blöcke)
+//  Wird VOR dem Anwenden gespeicherter Overrides erzeugt und
+//  enthält die ursprünglichen Code-Defaults (als tiefe Kopie).
+const DEFAULTS = JSON.parse(JSON.stringify({
+  WORLD_SEED, SEA_LEVEL, SPAWN,
+  RENDER_DISTANCE, MAX_OPS_PER_FRAME, MAX_PIXEL_RATIO,
+  ANTIALIAS, MSAA_SAMPLES, TONE_MAPPING, TONE_MAPPING_EXPOSURE,
+  SKY_COLOR, FOG_NEAR, FOG_FAR,
+  CAMERA_FOV, CAMERA_NEAR, CAMERA_FAR,
+  HEMISPHERE, SUN, SUN_DIRECTION,
+  SHADOWS_ENABLED, SHADOW_MAP_SIZE, SHADOW_AREA, SHADOW_BIAS, SHADOW_NORMAL_BIAS,
+  BLOOM_ENABLED, BLOOM,
+  AO_LEVEL,
+  PLAYER,
+  CONTROLS,
+}));
+export { DEFAULTS };
+
+// ────────────────────────────────────────────────────────────
+//  Persistenz (für das Live-Settings-Panel)
+// ────────────────────────────────────────────────────────────
+const STORAGE_KEY = 'mc-clone-settings';
+
+/** Gespeicherte Overrides aus localStorage (oder {}). */
+export function loadSettings() {
+  try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); }
+  catch { return {}; }
+}
+
+/** Kompletten Settings-Stand schreiben. */
+export function saveSettings(obj) {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(obj)); } catch { /* localStorage gesperrt */ }
+}
+
+/** Gespeicherte Overrides löschen → nächster Load nutzt Code-Defaults. */
+export function clearSettings() {
+  try { localStorage.removeItem(STORAGE_KEY); } catch { /* ignore */ }
+}
+
+// Gespeicherte Overrides auf die Exporte anwenden — passiert beim Modul-Laden
+// (also VOR jedem Konsumenten, da ESM config.js zuerst vollständig auswertet).
+(() => {
+  const s = loadSettings();
+  if (!s) return;
+  if (s.WORLD_SEED != null) WORLD_SEED = s.WORLD_SEED;
+  if (s.SEA_LEVEL != null) SEA_LEVEL = s.SEA_LEVEL;
+  if (s.RENDER_DISTANCE != null) RENDER_DISTANCE = s.RENDER_DISTANCE;
+  if (s.MAX_OPS_PER_FRAME != null) MAX_OPS_PER_FRAME = s.MAX_OPS_PER_FRAME;
+  if (s.MAX_PIXEL_RATIO != null) MAX_PIXEL_RATIO = s.MAX_PIXEL_RATIO;
+  if (typeof s.ANTIALIAS === 'boolean') ANTIALIAS = s.ANTIALIAS;
+  if (s.MSAA_SAMPLES != null) MSAA_SAMPLES = s.MSAA_SAMPLES;
+  if (s.TONE_MAPPING != null) TONE_MAPPING = s.TONE_MAPPING;
+  if (s.TONE_MAPPING_EXPOSURE != null) TONE_MAPPING_EXPOSURE = s.TONE_MAPPING_EXPOSURE;
+  if (s.SKY_COLOR != null) SKY_COLOR = s.SKY_COLOR;
+  if (s.FOG_NEAR != null) FOG_NEAR = s.FOG_NEAR;
+  if (s.FOG_FAR != null) FOG_FAR = s.FOG_FAR;
+  if (s.CAMERA_FOV != null) CAMERA_FOV = s.CAMERA_FOV;
+  if (s.CAMERA_NEAR != null) CAMERA_NEAR = s.CAMERA_NEAR;
+  if (s.CAMERA_FAR != null) CAMERA_FAR = s.CAMERA_FAR;
+  if (typeof s.SHADOWS_ENABLED === 'boolean') SHADOWS_ENABLED = s.SHADOWS_ENABLED;
+  if (s.SHADOW_MAP_SIZE != null) SHADOW_MAP_SIZE = s.SHADOW_MAP_SIZE;
+  if (s.SHADOW_AREA != null) SHADOW_AREA = s.SHADOW_AREA;
+  if (s.SHADOW_BIAS != null) SHADOW_BIAS = s.SHADOW_BIAS;
+  if (s.SHADOW_NORMAL_BIAS != null) SHADOW_NORMAL_BIAS = s.SHADOW_NORMAL_BIAS;
+  if (typeof s.BLOOM_ENABLED === 'boolean') BLOOM_ENABLED = s.BLOOM_ENABLED;
+  if (s.SPAWN) Object.assign(SPAWN, s.SPAWN);
+  if (s.HEMISPHERE) Object.assign(HEMISPHERE, s.HEMISPHERE);
+  if (s.SUN) Object.assign(SUN, s.SUN);
+  if (s.SUN_DIRECTION) for (let i = 0; i < 3; i++) if (s.SUN_DIRECTION[i] != null) SUN_DIRECTION[i] = s.SUN_DIRECTION[i];
+  if (s.BLOOM) Object.assign(BLOOM, s.BLOOM);
+  if (s.AO_LEVEL) for (let i = 0; i < 4; i++) if (s.AO_LEVEL[i] != null) AO_LEVEL[i] = s.AO_LEVEL[i];
+  if (s.PLAYER) Object.assign(PLAYER, s.PLAYER);
+  if (s.CONTROLS) Object.assign(CONTROLS, s.CONTROLS);
+})();

js/main.js

@@ -15,7 +15,7 @@ import {
   HEMISPHERE, SUN, SUN_DIRECTION,
   SHADOWS_ENABLED, SHADOW_MAP_SIZE, SHADOW_AREA, SHADOW_BIAS, SHADOW_NORMAL_BIAS,
   BLOOM_ENABLED, BLOOM,
-  PLAYER, SPAWN, REACH,
+  PLAYER, SPAWN, CONTROLS,
 } from './config.js';
 import { buildAtlasTexture } from './textures.js';
 import { World } from './world.js';
@@ -23,6 +23,7 @@ import { Player } from './player.js';
 import { Input } from './input.js';
 import { raycastVoxel } from './raycast.js';
 import { getBiome } from './worldgen.js';
+import { initPanel, registerApply } from './panel.js';
 
 const BIOME_NAME = { [BIOME.PLAINS]: 'Plains', [BIOME.FOREST]: 'Wald', [BIOME.DESERT]: 'Wüste' };
 
@@ -98,7 +99,10 @@ const bloom = new UnrealBloomPass(
   BLOOM.radius,
   BLOOM.threshold,
 );
-if (BLOOM_ENABLED) composer.addPass(bloom);
+// Bloom-Pass immer anhängen, nur aktivieren/deaktivieren – so lässt er sich
+// über das Settings-Panel live ein-/ausschalten (pass.enabled).
+composer.addPass(bloom);
+bloom.enabled = BLOOM_ENABLED;
 composer.addPass(new OutputPass());
 
 // ---------- Welt & Spieler ----------
@@ -158,7 +162,12 @@ overlay.addEventListener('click', () => {
   input.requestLock();
 });
 document.addEventListener('pointerlockchange', () => {
-  if (!document.pointerLockElement) overlay.classList.remove('hidden');
+  // Start-Overlay nur zeigen, wenn der Lock verloren ging UND nicht das
+  // Settings-Panel geöffnet ist – das Panel gibt den Pointer-Lock selbst
+  // frei (open()), darf dabei aber nicht die Welt verdecken.
+  if (!document.pointerLockElement && !document.body.classList.contains('panel-open')) {
+    overlay.classList.remove('hidden');
+  }
 });
 
 // ---------- Resize ----------
@@ -194,6 +203,52 @@ function wouldIntersectPlayer(bx, by, bz) {
 
 const _dir = new THREE.Vector3();
 
+// ---------- Settings-Panel: Live-Apply-Callbacks ----------
+// Performance-Werte werden in der Loop gelesen → lokal halten und per
+// Apply-Callback mutieren (ESM-lets lassen sich von außen nicht schreiben).
+let renderDistance = RENDER_DISTANCE;
+let maxOpsPerFrame = MAX_OPS_PER_FRAME;
+registerApply('RENDER_DISTANCE', (v) => { renderDistance = v; });
+registerApply('MAX_OPS_PER_FRAME', (v) => { maxOpsPerFrame = v; });
+registerApply('MAX_PIXEL_RATIO', (v) => renderer.setPixelRatio(Math.min(window.devicePixelRatio, v)));
+registerApply('TONE_MAPPING_EXPOSURE', (v) => { renderer.toneMappingExposure = v; });
+registerApply('SKY_COLOR', (v) => { scene.background.setHex(v); scene.fog.color.setHex(v); });
+registerApply('FOG_NEAR', (v) => { scene.fog.near = v; });
+registerApply('FOG_FAR', (v) => { scene.fog.far = v; });
+registerApply('CAMERA_FOV', (v) => { camera.fov = v; camera.updateProjectionMatrix(); });
+registerApply('CAMERA_NEAR', (v) => { camera.near = v; camera.updateProjectionMatrix(); });
+registerApply('CAMERA_FAR', (v) => { camera.far = v; camera.updateProjectionMatrix(); });
+registerApply('HEMISPHERE.intensity', (v) => { hemi.intensity = v; });
+registerApply('HEMISPHERE.sky', (v) => hemi.color.setHex(v));
+registerApply('HEMISPHERE.ground', (v) => hemi.groundColor.setHex(v));
+registerApply('SUN.intensity', (v) => { sun.intensity = v; });
+registerApply('SUN.color', (v) => sun.color.setHex(v));
+registerApply('SHADOW_AREA', (v) => {
+  sun.shadow.camera.left = -v; sun.shadow.camera.right = v;
+  sun.shadow.camera.top = v; sun.shadow.camera.bottom = -v;
+  sun.shadow.camera.updateProjectionMatrix();
+});
+registerApply('SHADOW_BIAS', (v) => { sun.shadow.bias = v; });
+registerApply('SHADOW_NORMAL_BIAS', (v) => { sun.shadow.normalBias = v; });
+registerApply('BLOOM_ENABLED', (v) => { bloom.enabled = v; });
+registerApply('BLOOM.strength', (v) => { bloom.strength = v; });
+registerApply('BLOOM.radius', (v) => { bloom.radius = v; });
+registerApply('BLOOM.threshold', (v) => { bloom.threshold = v; });
+// AO live: AO_LEVEL ist pro Vertex in die Chunk-Meshes gebacken. Eine Änderung
+// → debounced Neubau aller geladenen Chunks (panel.js mutiert AO_LEVEL im
+// Config-Array; das Streaming verteilt den Neubau über mehrere Frames).
+let aoRemeshTimer = 0;
+function scheduleAoRemesh() {
+  if (aoRemeshTimer) clearTimeout(aoRemeshTimer);
+  aoRemeshTimer = setTimeout(() => { aoRemeshTimer = 0; world.markAllDirty(); }, 150);
+}
+for (const p of ['AO_LEVEL.0', 'AO_LEVEL.1', 'AO_LEVEL.2', 'AO_LEVEL.3']) {
+  registerApply(p, scheduleAoRemesh);
+}
+// PLAYER.* und CONTROLS.* braucht keinen Callback: player.js/raycast lesen
+// die Config-Objekte live; panel.js mutiert sie direkt.
+initPanel({ onRequestLock: () => input.requestLock() });
+
 // ---------- Game-Loop ----------
 let last = performance.now();
 function frame(now) {
@@ -213,7 +268,7 @@ function frame(now) {
     const hit = raycastVoxel(
       (x, y, z) => world.getBlock(x, y, z),
       camera.position.x, camera.position.y, camera.position.z,
-      _dir.x, _dir.y, _dir.z, REACH
+      _dir.x, _dir.y, _dir.z, CONTROLS.REACH
     );
     if (hit) {
       hlEdges.visible = true;
@@ -240,7 +295,7 @@ function frame(now) {
   input.endFrame();
 
   // Streaming (immer, auch im Pause-Menue, damit die Welt laedt)
-  world.updateStreaming(player.pos[0], player.pos[2], RENDER_DISTANCE, MAX_OPS_PER_FRAME);
+  world.updateStreaming(player.pos[0], player.pos[2], renderDistance, maxOpsPerFrame);
 
   // Sonne folgt dem Spieler -> Shadow-Frustum bleibt um den Spieler zentriert.
   sun.position.set(

js/panel.js

@@ -0,0 +1,411 @@
+// ============================================================
+//  Live-Settings-Panel
+// ============================================================
+//  Schiebt sich als Drawer von rechts ein (⚙ oben rechts oder P).
+//  Jeder Wert ist als "live" (greift sofort) oder "reload" (braucht
+//  Neustart) markiert. Live-Werte werden entweder:
+//    • direkt auf dem config-Objekt mutiert (PLAYER.*, CONTROLS.*),
+//      die player.js/raycast live lesen, ODER
+//    • über einen Apply-Callback (registerApply) angewandt, den
+//      main.js für alle Three.js-Objekte registriert.
+//  Reload-Werte werden nur persistiert + der Neustart-Button blinkt.
+//  Alles landet debounced in localStorage (config.js lädt es beim
+//  nächsten Start).
+// ============================================================
+import * as THREE from 'three';
+import * as CFG from './config.js';
+import { loadSettings, saveSettings, clearSettings } from './config.js';
+
+// ---------- Apply-Registry (von main.js gefüllt) ----------
+const applyFns = Object.create(null);
+/** Registriert eine Live-Apply-Funktion für einen config-Pfad. */
+export function registerApply(path, fn) { applyFns[path] = fn; }
+
+// ---------- Pfad-Helfer ----------
+function getPath(obj, path) {
+  return path.split('.').reduce((o, k) => (o == null ? o : o[k]), obj);
+}
+function setPath(root, path, value) {
+  const parts = path.split('.');
+  const last = parts.pop();
+  const obj = parts.reduce((o, k) => (o[k] = o[k] || (Number.isInteger(+parts[parts.indexOf(k) + 1]) ? [] : {})), root);
+  obj[last] = value;
+  return obj;
+}
+
+// Schreibt einen Wert in die config.js-Exports – aber NUR in geschachtelte
+// Objekte/Arrays (PLAYER.WALK, CONTROLS.REACH, AO_LEVEL.0, HEMISPHERE.intensity …).
+// Der Modul-Namespace CFG selbst ist read-only: JEDWEDE Zuweisung auf ein
+// Top-Level-Binding (TONE_MAPPING, SHADOWS_ENABLED, PLAYER …) wirft
+// "Cannot assign to read only property" – auch der Zwischenschritt im alten
+// setPath(reduce) hat das getan, weshalb früher auch PLAYER.*/CONTROLS.*
+// crashten. Navigation läuft daher nur über Lesezugriffe; die Mutation findet
+// auf dem Plain-Object/Array statt. Top-Level-Skalare brauchen einen
+// applyFn-Callback (live) oder sind reload.
+function mutateNested(path, value) {
+  const parts = path.split('.');
+  if (parts.length < 2) return; // Top-Level-Skalar → via applyFn/reload behandelt
+  const last = parts.pop();
+  let obj = CFG;
+  for (const k of parts) {
+    obj = obj[k];
+    if (obj == null) return;
+  }
+  obj[last] = value;
+}
+
+// ---------- Farbkonvertierung (config speichert Hex-Numbers) ----------
+function toHex(n) { return '#' + Math.max(0, n).toString(16).padStart(6, '0'); }
+function fromHex(s) { return parseInt(String(s).replace('#', ''), 16); }
+
+// ---------- SCHEMA ----------
+// type: 'range' | 'number' | 'checkbox' | 'color' | 'select'
+// live: true = greift sofort, false = braucht Neustart
+const SCHEMA = [
+  {
+    group: 'Welt', reload: true, items: [
+      { path: 'WORLD_SEED', label: 'Seed', type: 'number', step: 1 },
+      { path: 'SEA_LEVEL', label: 'Meereshöhe', type: 'range', min: 0, max: 60, step: 1 },
+      { path: 'SPAWN.x', label: 'Spawn X', type: 'number', step: 1 },
+      { path: 'SPAWN.z', label: 'Spawn Z', type: 'number', step: 1 },
+    ],
+  },
+  {
+    group: 'Performance', items: [
+      { path: 'RENDER_DISTANCE', label: 'Sichtweite (Chunks)', type: 'range', min: 2, max: 12, step: 1, live: true },
+      { path: 'MAX_OPS_PER_FRAME', label: 'Chunks/Frame', type: 'range', min: 1, max: 6, step: 1, live: true },
+      { path: 'MAX_PIXEL_RATIO', label: 'Pixel-Ratio-Cap', type: 'range', min: 1, max: 3, step: 1, live: true },
+    ],
+  },
+  {
+    group: 'Renderer', items: [
+      { path: 'TONE_MAPPING_EXPOSURE', label: 'Belichtung', type: 'range', min: 0.3, max: 2.5, step: 0.05, live: true },
+      {
+        path: 'TONE_MAPPING', label: 'Tone-Mapping', type: 'select', live: false, options: [
+          { label: 'ACES Filmic', value: THREE.ACESFilmicToneMapping },
+          { label: 'Linear', value: THREE.LinearToneMapping },
+          { label: 'Reinhard', value: THREE.ReinhardToneMapping },
+          { label: 'Cineon', value: THREE.CineonToneMapping },
+        ],
+      },
+      { path: 'ANTIALIAS', label: 'MSAA (Renderer)', type: 'checkbox', live: false },
+      {
+        path: 'MSAA_SAMPLES', label: 'MSAA (Composer)', type: 'select', live: false, options: [
+          { label: 'Aus', value: 0 },
+          { label: '2×', value: 2 },
+          { label: '4×', value: 4 },
+        ],
+      },
+    ],
+  },
+  {
+    group: 'Himmel & Nebel', items: [
+      { path: 'SKY_COLOR', label: 'Himmel', type: 'color', live: true },
+      { path: 'FOG_NEAR', label: 'Nebel Anfang', type: 'range', min: 10, max: 240, step: 2, live: true },
+      { path: 'FOG_FAR', label: 'Nebel Ende', type: 'range', min: 40, max: 500, step: 4, live: true },
+    ],
+  },
+  {
+    group: 'Kamera', items: [
+      { path: 'CAMERA_FOV', label: 'Sichtfeld (FOV)', type: 'range', min: 50, max: 110, step: 1, live: true },
+      { path: 'CAMERA_NEAR', label: 'Near', type: 'range', min: 0.05, max: 1, step: 0.05, live: true },
+      { path: 'CAMERA_FAR', label: 'Far', type: 'range', min: 200, max: 2000, step: 50, live: true },
+    ],
+  },
+  {
+    group: 'Beleuchtung', items: [
+      { path: 'HEMISPHERE.intensity', label: 'Hemi-Intensität', type: 'range', min: 0, max: 3, step: 0.05, live: true },
+      { path: 'HEMISPHERE.sky', label: 'Hemi Himmel', type: 'color', live: true },
+      { path: 'HEMISPHERE.ground', label: 'Hemi Boden', type: 'color', live: true },
+      { path: 'SUN.intensity', label: 'Sonnen-Intensität', type: 'range', min: 0, max: 3, step: 0.05, live: true },
+      { path: 'SUN.color', label: 'Sonnenfarbe', type: 'color', live: true },
+    ],
+  },
+  {
+    group: 'Schatten', items: [
+      { path: 'SHADOWS_ENABLED', label: 'Schatten an', type: 'checkbox', live: false },
+      {
+        path: 'SHADOW_MAP_SIZE', label: 'Karten-Größe', type: 'select', live: false, options: [
+          { label: '1024', value: 1024 },
+          { label: '2048', value: 2048 },
+          { label: '4096', value: 4096 },
+        ],
+      },
+      { path: 'SHADOW_AREA', label: 'Frustum-Größe', type: 'range', min: 10, max: 120, step: 2, live: true },
+      { path: 'SHADOW_BIAS', label: 'Bias', type: 'range', min: 0, max: 0.001, step: 0.00005, live: true },
+      { path: 'SHADOW_NORMAL_BIAS', label: 'Normal-Bias', type: 'range', min: 0, max: 0.1, step: 0.005, live: true },
+    ],
+  },
+  {
+    group: 'Post-Processing', items: [
+      { path: 'BLOOM_ENABLED', label: 'Bloom an', type: 'checkbox', live: true },
+      { path: 'BLOOM.strength', label: 'Bloom-Stärke', type: 'range', min: 0, max: 2, step: 0.05, live: true },
+      { path: 'BLOOM.radius', label: 'Bloom-Radius', type: 'range', min: 0, max: 2, step: 0.05, live: true },
+      { path: 'BLOOM.threshold', label: 'Bloom-Schwelle', type: 'range', min: 0, max: 2, step: 0.05, live: true },
+    ],
+  },
+  {
+    group: 'Ambient Occlusion', items: [
+      { path: 'AO_LEVEL.0', label: 'Ecke 0 (dunkelste)', type: 'range', min: 0, max: 1, step: 0.05, live: true },
+      { path: 'AO_LEVEL.1', label: 'Ecke 1', type: 'range', min: 0, max: 1, step: 0.05, live: true },
+      { path: 'AO_LEVEL.2', label: 'Ecke 2', type: 'range', min: 0, max: 1, step: 0.05, live: true },
+      { path: 'AO_LEVEL.3', label: 'Ecke 3 (hellste)', type: 'range', min: 0, max: 2, step: 0.05, live: true },
+    ],
+  },
+  {
+    group: 'Spieler', items: [
+      { path: 'PLAYER.WALK', label: 'Laufgeschwindigkeit', type: 'range', min: 1, max: 10, step: 0.1, live: true },
+      { path: 'PLAYER.SPRINT', label: 'Sprintgeschwindigkeit', type: 'range', min: 2, max: 15, step: 0.1, live: true },
+      { path: 'PLAYER.FLY_SPEED', label: 'Fluggeschwindigkeit', type: 'range', min: 2, max: 20, step: 0.1, live: true },
+      { path: 'PLAYER.GRAVITY', label: 'Gravitation', type: 'range', min: 5, max: 60, step: 1, live: true },
+      { path: 'PLAYER.JUMP_VEL', label: 'Sprungkraft', type: 'range', min: 3, max: 15, step: 0.1, live: true },
+      { path: 'PLAYER.MAX_FALL', label: 'Max. Fallgeschw.', type: 'range', min: 10, max: 100, step: 1, live: true },
+      { path: 'PLAYER.HEIGHT', label: 'Körperhöhe', type: 'range', min: 0.5, max: 3, step: 0.05, live: true },
+      { path: 'PLAYER.HALF', label: 'Halbe Breite', type: 'range', min: 0.1, max: 0.49, step: 0.01, live: true },
+      { path: 'PLAYER.EYE', label: 'Augenhöhe', type: 'range', min: 0.5, max: 3, step: 0.01, live: true },
+    ],
+  },
+  {
+    group: 'Steuerung', items: [
+      { path: 'CONTROLS.MOUSE_SENSITIVITY', label: 'Maus-Empfindlichkeit', type: 'range', min: 0.0005, max: 0.01, step: 0.0001, live: true },
+      { path: 'CONTROLS.REACH', label: 'Reichweite', type: 'range', min: 2, max: 12, step: 0.5, live: true },
+    ],
+  },
+];
+
+// ---------- Zustand ----------
+let panelEl, reloadBanner, copyBtn;
+let settings = loadSettings();
+let reloadDirty = false;
+let wasLocked = false;
+let saveTimer = 0;
+let onRequestLockFn = null;
+let overlayEl = null;
+
+// ---------- Persistenz ----------
+function persist(path, value) {
+  setPath(settings, path, value);
+  if (saveTimer) clearTimeout(saveTimer);
+  saveTimer = setTimeout(() => { saveSettings(settings); saveTimer = 0; }, 250);
+}
+
+// ---------- Apply ----------
+function onControlChange(item, value, skipDisplay) {
+  persist(item.path, value);
+  const live = item.live !== false && !(item.groupReload);
+  if (live) {
+    // Geschachtelte Pfade (PLAYER.*, CONTROLS.*, AO_LEVEL.*, HEMISPHERE.* …)
+    // im Config-Objekt mutieren; Three.js-Objekte zusätzlich über applyFn.
+    mutateNested(item.path, value);
+    if (applyFns[item.path]) applyFns[item.path](value);
+  } else {
+    markReloadNeeded();
+  }
+  if (!skipDisplay && item._valueEl) item._valueEl.textContent = fmt(item, value);
+}
+
+function markReloadNeeded() {
+  if (reloadDirty) return;
+  reloadDirty = true;
+  if (reloadBanner) reloadBanner.hidden = false;
+  panelEl?.classList.add('dirty');
+}
+
+// ---------- Anzeige-Formatierung ----------
+function fmt(item, value) {
+  if (item.type === 'checkbox') return value ? 'an' : 'aus';
+  if (item.type === 'select') {
+    const o = item.options.find((o) => o.value === value);
+    return o ? o.label : String(value);
+  }
+  if (item.type === 'color') return toHex(value);
+  if (item.step && item.step < 0.001) return (+value).toFixed(5);
+  if (item.step && item.step < 0.01) return (+value).toFixed(4);
+  if (item.step && item.step < 1) return (+value).toFixed(2);
+  return String(value);
+}
+
+// ---------- Wert eines Controls aus config lesen ----------
+function currentValue(item) {
+  return getPath(CFG, item.path);
+}
+
+// ---------- DOM-Aufbau ----------
+function el(tag, cls, html) {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (html != null) e.innerHTML = html;
+  return e;
+}
+
+function buildControl(item) {
+  const row = el('div', 'ctrl-row');
+  const head = el('div', 'ctrl-head');
+  const label = el('span', 'ctrl-label', item.label);
+  const badge = el('span', 'badge ' + (item.live === false || item.groupReload ? 'reload' : 'live'),
+    item.live === false || item.groupReload ? '⟳' : '●');
+  badge.title = item.live === false || item.groupReload ? 'Braucht Neustart' : 'Greift sofort';
+  head.append(label, badge);
+  row.append(head);
+
+  const val = el('span', 'ctrl-value');
+  item._valueEl = val;
+
+  let input;
+  if (item.type === 'checkbox') {
+    input = el('label', 'switch');
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    cb.checked = !!currentValue(item);
+    cb.addEventListener('change', () => onControlChange(item, cb.checked));
+    const slider = el('span', 'switch-track');
+    input.append(cb, slider);
+    val.textContent = cb.checked ? 'an' : 'aus';
+    row.append(input, val);
+    return row;
+  }
+
+  if (item.type === 'select') {
+    input = document.createElement('select');
+    item.options.forEach((o) => {
+      const opt = document.createElement('option');
+      opt.value = o.value;
+      opt.textContent = o.label;
+      input.append(opt);
+    });
+    input.value = String(currentValue(item));
+    input.addEventListener('change', () => onControlChange(item, Number(input.value)));
+    val.textContent = fmt(item, Number(input.value));
+    row.append(input, val);
+    return row;
+  }
+
+  input = document.createElement('input');
+  input.type = item.type;
+  const cv = currentValue(item);
+  if (item.type === 'color') {
+    input.value = toHex(cv);
+    input.addEventListener('input', () => onControlChange(item, fromHex(input.value)));
+    val.textContent = toHex(cv);
+  } else if (item.type === 'number') {
+    if (item.min != null) input.min = item.min;
+    if (item.max != null) input.max = item.max;
+    if (item.step != null) input.step = item.step;
+    input.value = cv;
+    input.addEventListener('change', () => onControlChange(item, Number(input.value)));
+    val.textContent = fmt(item, Number(cv));
+  } else { // range
+    input.min = item.min; input.max = item.max; input.step = item.step;
+    input.value = cv;
+    input.addEventListener('input', () => onControlChange(item, Number(input.value)));
+    val.textContent = fmt(item, Number(cv));
+  }
+  row.append(input, val);
+  return row;
+}
+
+function buildPanel() {
+  // Gear-Button
+  const gear = el('button', 'gear-btn', '⚙');
+  gear.title = 'Einstellungen (P)';
+  gear.addEventListener('click', toggle);
+  document.body.appendChild(gear);
+
+  // Drawer
+  panelEl = el('aside', 'settings-panel');
+  const header = el('div', 'sp-header');
+  header.append(el('h2', '', 'Einstellungen'), (() => {
+    const b = el('button', 'sp-close', '✕');
+    b.title = 'Schließen (P)';
+    b.addEventListener('click', close);
+    return b;
+  })());
+  panelEl.append(header);
+
+  reloadBanner = el('div', 'reload-banner');
+  reloadBanner.innerHTML = 'Einige Änderungen brauchen einen <b>Neustart</b>, um zu greifen.';
+  reloadBanner.hidden = true;
+  panelEl.append(reloadBanner);
+
+  const body = el('div', 'sp-body');
+  SCHEMA.forEach((grp) => {
+    const section = el('div', 'sp-group');
+    section.append(el('div', 'sp-group-title', grp.group + (grp.reload ? ' ⟳' : '')));
+    grp.items.forEach((item) => {
+      item.groupReload = !!grp.reload;
+      // explicit item.live=false beats group reload? Nein: reload-Gruppe erzwingt reload.
+      if (grp.reload) item.live = false;
+      section.append(buildControl(item));
+    });
+    body.append(section);
+  });
+  panelEl.append(body);
+
+  // Footer
+  const footer = el('div', 'sp-footer');
+
+  const restartBtn = el('button', 'sp-btn restart', '⟳ Neu starten');
+  restartBtn.title = 'Seite neu laden';
+  restartBtn.addEventListener('click', () => location.reload());
+
+  const resetBtn = el('button', 'sp-btn reset', '↺ Auf Standard zurücksetzen');
+  resetBtn.title = 'Alle Werte löschen und neu laden';
+  resetBtn.addEventListener('click', () => {
+    if (confirm('Alle Einstellungen auf die Standardwerte zurücksetzen?')) {
+      clearSettings();
+      location.reload();
+    }
+  });
+
+  copyBtn = el('button', 'sp-btn copy', '⧉ Werte kopieren');
+  copyBtn.title = 'Aktuelle Werte als JSON in die Zwischenablage';
+  copyBtn.addEventListener('click', async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(loadSettings(), null, 2));
+      copyBtn.textContent = '✓ Kopiert';
+      setTimeout(() => (copyBtn.textContent = '⧉ Werte kopieren'), 1200);
+    } catch { copyBtn.textContent = '✗ Fehler'; }
+  });
+
+  footer.append(restartBtn, resetBtn, copyBtn);
+  panelEl.append(footer);
+  document.body.appendChild(panelEl);
+}
+
+// ---------- Öffnen / Schließen ----------
+function open() {
+  if (!panelEl) return;
+  panelEl.classList.add('open');
+  document.body.classList.add('panel-open'); // HUD/Hotbar/Crosshair verstecken
+  wasLocked = !!document.pointerLockElement;
+  if (document.pointerLockElement) document.exitPointerLock();
+}
+function close() {
+  if (!panelEl) return;
+  panelEl.classList.remove('open');
+  document.body.classList.remove('panel-open');
+  if (wasLocked && onRequestLockFn) onRequestLockFn();
+}
+function toggle() {
+  if (!panelEl) return;
+  panelEl.classList.contains('open') ? close() : open();
+}
+
+// ---------- Tastatur (P) ----------
+function onKey(e) {
+  if (e.code !== 'KeyP') return;
+  const t = e.target;
+  if (t && (t.tagName === 'INPUT' || t.tagName === 'SELECT' || t.tagName === 'TEXTAREA')) return;
+  // Vor Spielstart (Overlay sichtbar) nicht umschalten
+  if (overlayEl && !overlayEl.classList.contains('hidden')) return;
+  e.preventDefault();
+  toggle();
+}
+
+// ---------- Init ----------
+export function initPanel({ onRequestLock } = {}) {
+  onRequestLockFn = onRequestLock || null;
+  overlayEl = document.getElementById('overlay');
+  buildPanel();
+  window.addEventListener('keydown', onKey);
+}

js/player.js

@@ -1,10 +1,12 @@
 // First-Person-Spieler: Bewegung, Gravitation, AABB-Kollision, Springen,
 // Flug-Modus, Schwimmen. yaw/pitch steuern die Kamera (extern gesetzt).
+//
+// WICHTIG: PLAYER- und CONTROLS-Werte werden LIVE aus config.js gelesen
+// (jeder Frame), nicht beim Laden destrukturiert. So kann das Settings-
+// Panel Geschwindigkeit/Gravitation/Maus-Empfindlichkeit usw. zur
+// Laufzeit ändern.
 import { isSolid, BLOCK } from './constants.js';
-import { PLAYER, MOUSE_SENSITIVITY } from './config.js';
+import { PLAYER, CONTROLS } from './config.js';
-
-// Werte aus config.js (PLAYER). Lokal gebunden, damit die Verwendungen kurz bleiben.
-const { HALF, HEIGHT, EYE, GRAVITY, JUMP_VEL, WALK, SPRINT, FLY_SPEED, MAX_FALL } = PLAYER;
 
 export class Player {
   constructor(world) {
@@ -23,21 +25,21 @@ export class Player {
   }
 
   eyePosition(out) {
-    out.set(this.pos[0], this.pos[1] + EYE, this.pos[2]);
+    out.set(this.pos[0], this.pos[1] + PLAYER.EYE, this.pos[2]);
     return out;
   }
 
   inWater() {
     // Pruefe den Block auf Augen- und Fuss-Hoehe
     const ex = Math.floor(this.pos[0]);
-    const ey = Math.floor(this.pos[1] + EYE * 0.6);
+    const ey = Math.floor(this.pos[1] + PLAYER.EYE * 0.6);
     const ez = Math.floor(this.pos[2]);
     return this.world.getBlock(ex, ey, ez) === BLOCK.WATER;
   }
 
   update(input, dt) {
-    // --- Maus-Look ---
+    // --- Maus-Look (Empfindlichkeit live aus config) ---
-    const sens = MOUSE_SENSITIVITY;
+    const sens = CONTROLS.MOUSE_SENSITIVITY;
     this.yaw -= input.mouseDX * sens;
     this.pitch -= input.mouseDY * sens;
     const lim = Math.PI / 2 - 0.001;
@@ -69,7 +71,7 @@ export class Player {
     // ShiftLeft/Right dient im Fly-Modus gleichzeitig als "Runter" – kein
     // Konflikt, da Sprint nur beim Gehen greift (Fly nutzt konstante FLY_SPEED).
     const sprint = input.down('ShiftLeft') || input.down('ShiftRight');
-    const speed = this.flying ? FLY_SPEED : (sprint ? SPRINT : WALK);
+    const speed = this.flying ? PLAYER.FLY_SPEED : (sprint ? PLAYER.SPRINT : PLAYER.WALK);
 
     if (this.flying) {
       this.vel[0] = mx * speed;
@@ -85,14 +87,14 @@ export class Player {
       this.vel[2] = mz * move;
       // Gravitation / Schwimmen
       if (water) {
-        this.vel[1] -= GRAVITY * 0.28 * dt;
+        this.vel[1] -= PLAYER.GRAVITY * 0.28 * dt;
         if (this.vel[1] < -6) this.vel[1] = -6;
         if (input.down('Space')) this.vel[1] = 4.0; // nach oben schwimmen
       } else {
-        this.vel[1] -= GRAVITY * dt;
+        this.vel[1] -= PLAYER.GRAVITY * dt;
-        if (this.vel[1] < -MAX_FALL) this.vel[1] = -MAX_FALL;
+        if (this.vel[1] < -PLAYER.MAX_FALL) this.vel[1] = -PLAYER.MAX_FALL;
         if (input.down('Space') && this.onGround) {
-          this.vel[1] = JUMP_VEL;
+          this.vel[1] = PLAYER.JUMP_VEL;
           this.onGround = false;
         }
       }
@@ -110,6 +112,7 @@ export class Player {
     this.pos[axis] += amount;
     if (amount === 0) return;
 
+    const HALF = PLAYER.HALF, HEIGHT = PLAYER.HEIGHT;
     const x = this.pos[0], y = this.pos[1], z = this.pos[2];
     const minX = Math.floor(x - HALF), maxX = Math.floor(x + HALF);
     const minY = Math.floor(y), maxY = Math.floor(y + HEIGHT - 0.001);

js/world.js

@@ -97,6 +97,13 @@ export class World {
     if (c) c.dirty = true;
   }
 
+  // Alle geladenen Chunks für einen Neubau markieren – z.B. wenn ein global
+  // mesh-relevanter Wert (AO_LEVEL) live geändert wird. updateStreaming baut
+  // sie dann über mehrere Frames (maxOpsPerFrame) verteilt neu.
+  markAllDirty() {
+    for (const c of this.chunks.values()) c.dirty = true;
+  }
+
   // --- Meshing ---
   getBlockWorld = (wx, wy, wz) => this.getBlock(wx, wy, wz);
 

style.css

@@ -105,3 +105,172 @@ canvas { display: block; }
 .panel p { font-size: 16px; margin-bottom: 16px; opacity: 0.9; }
 .keys { font-size: 13px; line-height: 1.9; opacity: 0.85; }
 .keys b { color: #ffe08a; }
+
+/* Settings-Panel offen → Spiel-HUD und Start-Overlay verstecken, damit die
+   Welt unverstellt sichtbar bleibt. Das Overlay verdeckt sonst die ganze Welt,
+   sobald das Panel den Pointer-Lock freigibt (pointerlockchange-Handler). */
+body.panel-open #overlay,
+body.panel-open #hud,
+body.panel-open #hotbar,
+body.panel-open #crosshair { opacity: 0; pointer-events: none; transition: opacity 0.18s; }
+
+/* ============================================================
+   Settings-Panel (Drawer von rechts)
+   ============================================================ */
+.gear-btn {
+  position: fixed;
+  top: 12px; right: 12px;
+  width: 40px; height: 40px;
+  border-radius: 8px;
+  border: 1px solid rgba(255,255,255,0.18);
+  background: rgba(0,0,0,0.45);
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  z-index: 20;
+  display: flex; align-items: center; justify-content: center;
+  transition: background 0.15s, transform 0.15s;
+  backdrop-filter: blur(2px);
+}
+.gear-btn:hover { background: rgba(0,0,0,0.65); transform: rotate(30deg); }
+
+.settings-panel {
+  position: fixed;
+  top: 0; right: 0; bottom: 0;
+  width: 340px;
+  max-width: 92vw;
+  background: rgba(18,22,28,0.96);
+  border-left: 1px solid rgba(255,255,255,0.12);
+  box-shadow: -10px 0 40px rgba(0,0,0,0.5);
+  transform: translateX(105%);
+  transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  font-size: 13px;
+  color: #e8eaed;
+}
+.settings-panel.open { transform: translateX(0); }
+
+.sp-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  flex: 0 0 auto;
+}
+.sp-header h2 { font-size: 17px; font-weight: 600; letter-spacing: 0.5px; }
+.sp-close {
+  background: none; border: none; color: #bdc1c6;
+  font-size: 18px; cursor: pointer; padding: 2px 8px; border-radius: 4px;
+}
+.sp-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
+
+.reload-banner {
+  background: rgba(255,180,60,0.16);
+  border-bottom: 1px solid rgba(255,180,60,0.35);
+  color: #ffd9a0;
+  padding: 9px 16px;
+  font-size: 12px;
+  flex: 0 0 auto;
+}
+
+.sp-body {
+  overflow-y: auto;
+  padding: 8px 14px 16px;
+  flex: 1 1 auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.25) transparent;
+}
+.sp-body::-webkit-scrollbar { width: 8px; }
+.sp-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 4px; }
+
+.sp-group { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
+.sp-group:last-child { border-bottom: none; }
+.sp-group-title {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
+  color: #8ab4f8; margin-bottom: 8px; font-weight: 600;
+}
+
+.ctrl-row { margin: 9px 0; }
+.ctrl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
+.ctrl-label { color: #cdd2da; }
+.ctrl-value {
+  font-variant-numeric: tabular-nums;
+  color: #9aa0a6; font-size: 12px;
+  min-width: 56px; text-align: right;
+}
+.badge { font-size: 10px; padding: 1px 5px; border-radius: 8px; margin-left: 6px; vertical-align: middle; }
+.badge.live { background: rgba(80,200,120,0.18); color: #7ee2a0; }
+.badge.reload { background: rgba(255,180,60,0.18); color: #ffc870; }
+
+/* Range-Slider */
+.ctrl-row input[type=range] {
+  width: 100%; height: 5px; -webkit-appearance: none; appearance: none;
+  background: rgba(255,255,255,0.15); border-radius: 3px; outline: none; cursor: pointer;
+}
+.ctrl-row input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 16px; height: 16px; border-radius: 50%;
+  background: #8ab4f8; border: 2px solid #1b2a3a; cursor: pointer;
+}
+.ctrl-row input[type=range]::-moz-range-thumb {
+  width: 14px; height: 14px; border-radius: 50%;
+  background: #8ab4f8; border: 2px solid #1b2a3a; cursor: pointer;
+}
+
+/* Number / Select / Color */
+.ctrl-row input[type=number] {
+  width: 100%; box-sizing: border-box;
+  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
+  color: #fff; padding: 5px 8px; border-radius: 5px; font-size: 13px;
+}
+.ctrl-row select {
+  width: 100%; box-sizing: border-box;
+  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
+  color: #fff; padding: 5px 8px; border-radius: 5px; font-size: 13px;
+}
+.ctrl-row input[type=color] {
+  width: 100%; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 5px; background: transparent; cursor: pointer;
+}
+
+/* Toggle-Switch (Checkbox) */
+.switch { display: inline-flex; align-items: center; cursor: pointer; }
+.switch input { display: none; }
+.switch-track {
+  width: 38px; height: 20px; border-radius: 12px;
+  background: rgba(255,255,255,0.18); position: relative; transition: background 0.2s;
+}
+.switch-track::after {
+  content: ""; position: absolute; top: 2px; left: 2px;
+  width: 16px; height: 16px; border-radius: 50%; background: #fff;
+  transition: transform 0.2s;
+}
+.switch input:checked + .switch-track { background: #4caf7d; }
+.switch input:checked + .switch-track::after { transform: translateX(18px); }
+.ctrl-row:has(.switch) .ctrl-value { display: none; }
+
+/* Footer-Buttons */
+.sp-footer {
+  display: flex; gap: 8px; padding: 12px 14px;
+  border-top: 1px solid rgba(255,255,255,0.1);
+  flex: 0 0 auto; flex-wrap: wrap;
+}
+.sp-btn {
+  flex: 1 1 auto; min-width: 90px;
+  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
+  color: #e8eaed; padding: 8px 6px; border-radius: 6px;
+  font-size: 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
+}
+.sp-btn:hover { background: rgba(255,255,255,0.16); }
+.sp-btn.restart { background: rgba(138,180,248,0.18); border-color: rgba(138,180,248,0.45); }
+.sp-btn.restart:hover { background: rgba(138,180,248,0.32); }
+.sp-btn.reset { background: rgba(240,90,90,0.15); border-color: rgba(240,90,90,0.4); }
+.sp-btn.reset:hover { background: rgba(240,90,90,0.28); }
+.settings-panel.dirty .sp-btn.restart {
+  animation: pulse 1.4s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(138,180,248,0.4); }
+  50% { box-shadow: 0 0 0 5px rgba(138,180,248,0); }
+}