solanapolis 1.0.0

package/src/components/CesiumFlight.tsx

@@ -0,0 +1,1768 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import type { RealtimeChannel } from "@supabase/supabase-js";
+import type {
+  Cartesian3,
+  ConstantPositionProperty,
+  ConstantProperty,
+  Entity,
+  HeadingPitchRoll,
+  HeadingPitchRange,
+  Viewer,
+  Matrix4,
+  Cartesian4,
+} from "cesium";
+import MiniMap from "./FlightMiniMap";
+
+const CESIUM_CDN = "https://cesium.com/downloads/cesiumjs/releases/1.139/Build/Cesium/";
+
+// ─── Wallet-gated plane skins ─────────────────────────────────────────────────
+const PLANE_SKINS = [
+  { id: "default", uri: "/plane.glb", name: "Cessna", minSol: 0, badge: "FREE", color: "#ffffff" },
+  { id: "fighter", uri: "/plane.glb", name: "F-22 Raptor", minSol: 1, badge: "1+ SOL", color: "#E35930" },
+  { id: "stealth", uri: "/plane.glb", name: "B-2 Spirit", minSol: 5, badge: "5+ SOL", color: "#8B5CF6" },
+];
+
+interface CesiumFlightProps {
+  walletAddress: string | null;
+  onExit: () => void;
+}
+
+type FlightStatus = "intro" | "loading" | "ready" | "crashed" | "landed" | "error";
+type CameraMode = "follow" | "close" | "cinematic" | "cockpit" | "drone";
+type QualityPreset = "performance" | "balanced" | "quality";
+type WeatherType = "clear" | "cloudy" | "stormy";
+
+type CesiumModule = typeof import("cesium");
+
+// ─── Interfaces ───────────────────────────────────────────────────────────────
+
+interface FlightPhysicsState {
+  currentSpeed: number;
+  targetSpeed: number;
+  heading: number;
+  pitch: number;
+  roll: number;
+  verticalVelocity: number;
+  stallFactor: number;   // 0 = flying normally, 1 = full stall
+  gForce: number;   // current G-load (1 = normal)
+  lastVertVelocity: number;  // for G computation
+  onGround: boolean;
+  landingQuality: number;   // 0-100 when landing detected
+}
+
+interface FlightInputState {
+  throttle: boolean;
+  brake: boolean;
+  turnLeft: boolean;
+  turnRight: boolean;
+  rollLeft: boolean;
+  rollRight: boolean;
+  altitudeUp: boolean;
+  altitudeDown: boolean;
+  fire: boolean;
+  targetSpeed?: number;
+}
+
+interface CameraTrackState {
+  heading: number;
+  pitch: number;
+  roll: number;
+  appliedRoll: number;
+  fov: number;
+  lastVehicleHeading: number;
+  hpRange: HeadingPitchRange;
+}
+
+interface PhysicsScratch {
+  transform: Matrix4;
+  enu: Matrix4;
+  worldFwd: Cartesian3;
+  upCol: Cartesian4;
+  up: Cartesian3;
+  vertDelta: Cartesian3;
+  totalDelta: Cartesian3;
+  newPos: Cartesian3;
+  localFwd: Cartesian3;
+  cockpitPos: Cartesian3;
+  cockpitLook: Cartesian3;
+  cockpitDir: Cartesian3;
+  cockpitUpCol: Cartesian4;
+  cockpitUp: Cartesian3;
+  cockpitLocalPos: Cartesian3;
+  cockpitLocalLook: Cartesian3;
+}
+
+interface RemotePilot {
+  positionProperty: ConstantPositionProperty;
+  orientationProperty: ConstantProperty;
+  entity: Entity;
+  lastSeen: number;
+  hp: number;
+}
+
+interface ProjectileEntity {
+  positionProperty: ConstantPositionProperty;
+  entity: Entity;
+  heading: number;
+  pitch: number;
+  speed: number;
+  createdAt: number;
+  shooterWallet: string;
+}
+
+interface WeatherState {
+  type: WeatherType;
+  windX: number;   // ENU east m/s
+  windY: number;   // ENU north m/s
+  turbulence: number;   // random force magnitude m/s
+  rainIntensity: number;   // 0-1
+  fogDensity: number;   // 0-1
+  nextChange: number;   // ms timestamp for next weather shift
+}
+
+interface CombatState {
+  score: number;
+  kills: number;
+  deaths: number;
+  streak: number;
+  lastFireTs: number;
+}
+
+interface CockpitSolanaData {
+  solPrice: number | null;
+  tps: number | null;
+  slot: number | null;
+  epoch: number | null;
+  epochProgress: string | null;
+  walletBalance: number | null;
+  updatedAt: number | null;
+}
+
+interface CesiumGameState {
+  viewer: Viewer;
+  aircraft: Entity;
+  positionProperty: ConstantPositionProperty;
+  orientationProperty: ConstantProperty;
+  position: Cartesian3;
+  hpRoll: HeadingPitchRoll;
+  physics: FlightPhysicsState;
+  camera: CameraTrackState;
+  cameraMode: CameraMode;
+  crashed: boolean;
+  landed: boolean;
+  scratch: PhysicsScratch;
+  Cesium: CesiumModule;
+  remotePilots: Map<string, RemotePilot>;
+  projectiles: ProjectileEntity[];
+  weather: WeatherState;
+  combat: CombatState;
+  lastTerrainAlt: number;
+  terrainCheckTimer: number;
+  selectedSkin: string;
+}
+
+// ─── World locations ──────────────────────────────────────────────────────────
+const LOCATIONS = [
+  { name: "London", flag: "🇬🇧", lon: -0.1278, lat: 51.5074, alt: 500, hdg: 90 },
+  { name: "New York", flag: "🇺🇸", lon: -74.0060, lat: 40.7128, alt: 600, hdg: 45 },
+  { name: "Tokyo", flag: "🇯🇵", lon: 139.6917, lat: 35.6895, alt: 550, hdg: 180 },
+  { name: "Dubai", flag: "🇦🇪", lon: 55.2708, lat: 25.2048, alt: 700, hdg: 270 },
+  { name: "Paris", flag: "🇫🇷", lon: 2.3522, lat: 48.8566, alt: 500, hdg: 135 },
+  { name: "Sydney", flag: "🇦🇺", lon: 151.2093, lat: -33.8688, alt: 600, hdg: 0 },
+  { name: "San Francisco", flag: "🇺🇸", lon: -122.4194, lat: 37.7749, alt: 550, hdg: 315 },
+  { name: "Rio de Janeiro", flag: "🇧🇷", lon: -43.1729, lat: -22.9068, alt: 700, hdg: 90 },
+  { name: "Singapore", flag: "🇸🇬", lon: 103.8198, lat: 1.3521, alt: 500, hdg: 180 },
+  { name: "Barcelona", flag: "🇪🇸", lon: 2.1734, lat: 41.3851, alt: 550, hdg: 225 },
+  { name: "Giza", flag: "🇪🇬", lon: 31.1342, lat: 29.9792, alt: 800, hdg: 0 },
+  { name: "Reykjavik", flag: "🇮🇸", lon: -21.9426, lat: 64.1466, alt: 600, hdg: 90 },
+  { name: "Solana Beach", flag: "⚡", lon: -117.2700, lat: 32.9915, alt: 500, hdg: 270 },
+];
+
+// ─── Real airports (ICAO, exact coords, runway heading) ─────────────────────
+const AIRPORTS = [
+  { name: "London Heathrow (EGLL)", flag: "🛫", lon: -0.4543, lat: 51.4775, alt: 83, hdg: 91 },
+  { name: "JFK New York (KJFK)", flag: "🛫", lon: -73.7781, lat: 40.6413, alt: 13, hdg: 40 },
+  { name: "Tokyo Narita (RJAA)", flag: "🛫", lon: 140.3929, lat: 35.7647, alt: 43, hdg: 160 },
+  { name: "Dubai Intl (OMDB)", flag: "🛫", lon: 55.3644, lat: 25.2532, alt: 19, hdg: 120 },
+  { name: "Paris CDG (LFPG)", flag: "🛫", lon: 2.5479, lat: 49.0097, alt: 119, hdg: 270 },
+  { name: "Sydney (YSSY)", flag: "🛫", lon: 151.1772, lat: -33.9461, alt: 6, hdg: 160 },
+  { name: "SFO San Francisco (KSFO)", flag: "🛫", lon: -122.3789, lat: 37.6213, alt: 4, hdg: 280 },
+  { name: "Singapore Changi (WSSS)", flag: "🛫", lon: 103.9894, lat: 1.3644, alt: 7, hdg: 20 },
+  { name: "Mexico City (MMMX)", flag: "🛫", lon: -99.0721, lat: 19.4363, alt: 2230, hdg: 230 },
+  { name: "O'Hare Chicago (KORD)", flag: "🛫", lon: -87.9073, lat: 41.9742, alt: 205, hdg: 90 },
+];
+
+const CAM_LABELS: Record<CameraMode, string> = { follow: "FOLLOW", close: "CLOSE", cinematic: "CINEMA", cockpit: "COCKPIT", drone: "DRONE" };
+const CAM_CYCLE: CameraMode[] = ["follow", "close", "cinematic", "cockpit", "drone"];
+
+const CAM_PARAMS: Record<CameraMode, { dist: number; basePitch: number; bankFactor: number; lerpK: number; baseFOV: number; maxFOV: number }> = {
+  follow: { dist: 25, basePitch: -15, bankFactor: 0.5, lerpK: 0.04, baseFOV: 60, maxFOV: 100 },
+  close: { dist: 8, basePitch: -10, bankFactor: 0.7, lerpK: 0.08, baseFOV: 70, maxFOV: 110 },
+  cinematic: { dist: 80, basePitch: -22, bankFactor: 0.3, lerpK: 0.02, baseFOV: 50, maxFOV: 85 },
+  cockpit: { dist: 2, basePitch: -2, bankFactor: 0.1, lerpK: 0.16, baseFOV: 72, maxFOV: 92 },
+  drone: { dist: 80, basePitch: -30, bankFactor: 0.0, lerpK: 0.02, baseFOV: 55, maxFOV: 80 },
+};
+
+const WEATHER_PRESETS: Record<WeatherType, Omit<WeatherState, "nextChange">> = {
+  clear: { type: "clear", windX: 2, windY: 1, turbulence: 0.5, rainIntensity: 0, fogDensity: 0 },
+  cloudy: { type: "cloudy", windX: 8, windY: -4, turbulence: 2.0, rainIntensity: 0.2, fogDensity: 0.3 },
+  stormy: { type: "stormy", windX: 20, windY: 15, turbulence: 6.0, rainIntensity: 0.8, fogDensity: 0.6 },
+};
+
+function isMobileDevice(): boolean {
+  if (typeof window === "undefined") return false;
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;
+}
+
+// ─── Simple Web Audio sounds ──────────────────────────────────────────────────
+let audioCtx: AudioContext | null = null;
+function getAudioCtx() {
+  if (!audioCtx) audioCtx = new AudioContext();
+  return audioCtx;
+}
+
+function playStallBeep() {
+  try {
+    const ctx = getAudioCtx();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.connect(gain); gain.connect(ctx.destination);
+    osc.frequency.setValueAtTime(880, ctx.currentTime);
+    osc.frequency.setValueAtTime(440, ctx.currentTime + 0.1);
+    gain.gain.setValueAtTime(0.15, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25);
+    osc.start(ctx.currentTime);
+    osc.stop(ctx.currentTime + 0.25);
+  } catch { /* ignore */ }
+}
+
+function playGunshot() {
+  try {
+    const ctx = getAudioCtx();
+    const buf = ctx.createBuffer(1, ctx.sampleRate * 0.1, ctx.sampleRate);
+    const d = buf.getChannelData(0);
+    for (let i = 0; i < d.length; i++) d[i] = (Math.random() * 2 - 1) * Math.exp(-i / (ctx.sampleRate * 0.02));
+    const src = ctx.createBufferSource();
+    const gain = ctx.createGain();
+    src.buffer = buf;
+    src.connect(gain); gain.connect(ctx.destination);
+    gain.gain.setValueAtTime(0.4, ctx.currentTime);
+    src.start();
+  } catch { /* ignore */ }
+}
+
+function playExplosion() {
+  try {
+    const ctx = getAudioCtx();
+    const buf = ctx.createBuffer(1, ctx.sampleRate * 0.5, ctx.sampleRate);
+    const d = buf.getChannelData(0);
+    for (let i = 0; i < d.length; i++) d[i] = (Math.random() * 2 - 1) * Math.exp(-i / (ctx.sampleRate * 0.15));
+    const src = ctx.createBufferSource();
+    const gain = ctx.createGain();
+    src.buffer = buf;
+    src.connect(gain); gain.connect(ctx.destination);
+    gain.gain.setValueAtTime(0.6, ctx.currentTime);
+    src.start();
+  } catch { /* ignore */ }
+}
+
+function playLanding() {
+  try {
+    const ctx = getAudioCtx();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = "triangle";
+    osc.connect(gain); gain.connect(ctx.destination);
+    osc.frequency.setValueAtTime(220, ctx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(440, ctx.currentTime + 0.3);
+    gain.gain.setValueAtTime(0.2, ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.5);
+    osc.start(ctx.currentTime);
+    osc.stop(ctx.currentTime + 0.5);
+  } catch { /* ignore */ }
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export default function CesiumFlight({ walletAddress, onExit }: CesiumFlightProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [status, setStatus] = useState<FlightStatus>("intro");
+  const [initError, setInitError] = useState<string | null>(null);
+  const [hud, setHud] = useState({
+    speed: 0, altitude: 0, heading: 0, throttlePct: 0,
+    gForce: 1.0, stallPct: 0, terrainAlt: 0, score: 0, kills: 0,
+  });
+  const [camMode, setCamMode] = useState<CameraMode>("follow");
+  const [showControls, setShowControls] = useState(false);
+  const [showLocations, setShowLocations] = useState(false);
+  const [showSkins, setShowSkins] = useState(false);
+  const [quality, setQuality] = useState<QualityPreset>("performance");
+  const [mapPos, setMapPos] = useState({ lon: -0.1278, lat: 51.5074, heading: 0 });
+  const [weatherType, setWeatherType] = useState<WeatherType>("clear");
+  const [stallWarning, setStallWarning] = useState(false);
+  const [landingScore, setLandingScore] = useState<number | null>(null);
+  const [solBalance, setSolBalance] = useState(0);
+  const [selectedSkin, setSelectedSkin] = useState("default");
+  const [cockpitSolana, setCockpitSolana] = useState<CockpitSolanaData>({
+    solPrice: null,
+    tps: null,
+    slot: null,
+    epoch: null,
+    epochProgress: null,
+    walletBalance: null,
+    updatedAt: null,
+  });
+  const isMobile = isMobileDevice();
+
+  const gameRef = useRef<CesiumGameState | null>(null);
+  const inputRef = useRef<FlightInputState>({
+    throttle: false, brake: false, turnLeft: false, turnRight: false,
+    rollLeft: false, rollRight: false, altitudeUp: false, altitudeDown: false, fire: false,
+  });
+  const animFrameRef = useRef(0);
+  const channelRef = useRef<RealtimeChannel | null>(null);
+  const lastBroadcastRef = useRef(0);
+  const lastHudRef = useRef(0);
+  const lastStallBeep = useRef(0);
+  const qualityRef = useRef<QualityPreset>(quality);
+  const walletAddressRef = useRef<string | null>(walletAddress);
+  const selectedSkinRef = useRef(selectedSkin);
+  const pendingLaunchRef = useRef<{ lon: number; lat: number; alt: number; heading: number } | null>(null);
+  const [initTrigger, setInitTrigger] = useState(0);
+
+  useEffect(() => { qualityRef.current = quality; }, [quality]);
+  useEffect(() => { walletAddressRef.current = walletAddress; }, [walletAddress]);
+  useEffect(() => { selectedSkinRef.current = selectedSkin; }, [selectedSkin]);
+
+  // If launched from globe map "fly here", auto-start directly into flight sim.
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const win = window as Window & { __solanapolis_fly_coords?: { lon: number; lat: number; alt: number; heading: number } };
+    const launch = win.__solanapolis_fly_coords;
+    if (!launch) return;
+    pendingLaunchRef.current = launch;
+    delete win.__solanapolis_fly_coords;
+    setStatus("loading");
+    setInitTrigger((n) => n + 1);
+  }, []);
+
+  // ─── Fetch SOL balance ──────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!walletAddress) {
+      setSolBalance(0);
+      return;
+    }
+    fetch(`/api/wallet/${walletAddress}/balances`)
+      .then(r => r.json())
+      .then(d => {
+        const bal = typeof d.solBalance === "number" ? d.solBalance : null;
+        if (bal !== null) setSolBalance(bal);
+      })
+      .catch(() => { });
+  }, [walletAddress]);
+
+  // ─── Solana telemetry for cockpit HUD ───────────────────────────────────────
+  useEffect(() => {
+    if (status !== "ready") return;
+    let active = true;
+
+    async function fetchCockpitSolana() {
+      try {
+        const [networkRes, treasuryRes, walletRes] = await Promise.allSettled([
+          fetch("/api/network-stats"),
+          fetch("/api/treasury"),
+          walletAddress ? fetch(`/api/wallet/${walletAddress}/balances`) : Promise.resolve(null),
+        ]);
+
+        if (!active) return;
+
+        const next: Partial<CockpitSolanaData> = { updatedAt: Date.now() };
+
+        if (networkRes.status === "fulfilled" && networkRes.value?.ok) {
+          const n = await networkRes.value.json();
+          next.tps = typeof n.tps === "number" ? n.tps : null;
+          next.slot = typeof n.slot === "number" ? n.slot : null;
+          next.epoch = typeof n.epoch === "number" ? n.epoch : null;
+          next.epochProgress = typeof n.epochProgress === "string" ? n.epochProgress : null;
+        }
+
+        if (treasuryRes.status === "fulfilled" && treasuryRes.value?.ok) {
+          const t = await treasuryRes.value.json();
+          next.solPrice = typeof t.solPrice === "number" ? t.solPrice : null;
+        }
+
+        if (!walletAddress) {
+          next.walletBalance = null;
+        } else if (walletRes.status === "fulfilled" && walletRes.value?.ok) {
+          const w = await walletRes.value.json();
+          next.walletBalance = typeof w.solBalance === "number" ? w.solBalance : null;
+        }
+
+        setCockpitSolana(prev => ({ ...prev, ...next }));
+      } catch {
+        // keep previous values on telemetry fetch failures
+      }
+    }
+
+    fetchCockpitSolana();
+    const interval = setInterval(fetchCockpitSolana, 15000);
+    return () => {
+      active = false;
+      clearInterval(interval);
+    };
+  }, [status, walletAddress]);
+
+  const handleExit = useCallback(() => onExit(), [onExit]);
+
+  // ─── Teleport ───────────────────────────────────────────────────────────────
+  const teleportTo = useCallback((lon: number, lat: number, alt: number, hdg: number) => {
+    const game = gameRef.current;
+    if (!game) return;
+    const { Cesium } = game;
+    game.position = Cesium.Cartesian3.fromDegrees(lon, lat, Math.max(alt, 30));
+    game.physics.heading = Cesium.Math.toRadians(hdg);
+    game.physics.pitch = 0; game.physics.roll = 0;
+    game.physics.currentSpeed = 200; game.physics.targetSpeed = 200;
+    game.physics.verticalVelocity = 0; game.physics.stallFactor = 0;
+    game.crashed = false; game.landed = false;
+    game.hpRoll.heading = game.physics.heading;
+    game.hpRoll.pitch = 0; game.hpRoll.roll = 0;
+    game.positionProperty.setValue(game.position);
+    game.orientationProperty.setValue(Cesium.Transforms.headingPitchRollQuaternion(game.position, game.hpRoll));
+    game.camera.heading = game.physics.heading + Math.PI;
+    game.camera.lastVehicleHeading = game.physics.heading;
+    setStatus("ready");
+    setShowLocations(false);
+  }, []);
+
+  // ─── Cesium init ────────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (initTrigger === 0) return;
+    if (!containerRef.current) return;
+    let mounted = true;
+
+    async function initialize() {
+      try {
+        (window as Window & { CESIUM_BASE_URL?: string }).CESIUM_BASE_URL = CESIUM_CDN;
+        if (!document.querySelector("#cesium-css")) {
+          const link = document.createElement("link");
+          link.id = "cesium-css"; link.rel = "stylesheet";
+          link.href = `${CESIUM_CDN}Widgets/widgets.css`;
+          document.head.appendChild(link);
+        }
+
+        const Cesium: CesiumModule = await import("cesium");
+        if (!mounted || !containerRef.current) return;
+
+        const token = process.env.NEXT_PUBLIC_CESIUM_ION_TOKEN;
+        if (token) Cesium.Ion.defaultAccessToken = token;
+
+        const viewer = new Cesium.Viewer(containerRef.current, {
+          animation: false, baseLayerPicker: false, fullscreenButton: false,
+          geocoder: false, homeButton: false, infoBox: false, sceneModePicker: false,
+          selectionIndicator: false, timeline: false, navigationHelpButton: false,
+          vrButton: false, scene3DOnly: true, requestRenderMode: false,
+        });
+
+        viewer.imageryLayers.removeAll();
+        if (token) {
+          try {
+            viewer.imageryLayers.addImageryProvider(await Cesium.IonImageryProvider.fromAssetId(2));
+          } catch {
+            viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
+              url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png", maximumLevel: 19,
+            }));
+          }
+        } else {
+          viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
+            url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png", maximumLevel: 19,
+          }));
+        }
+        (viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";
+
+        try { viewer.terrainProvider = await Cesium.createWorldTerrainAsync({ requestVertexNormals: true }); } catch { /* ellipsoid */ }
+
+        if (token && qualityRef.current !== "performance") {
+          try {
+            const buildings = await Cesium.Cesium3DTileset.fromIonAssetId(96188);
+            viewer.scene.primitives.add(buildings);
+          } catch { /* skip */ }
+        }
+
+        applyQualityToScene(viewer, qualityRef.current);
+        if (!mounted) { viewer.destroy(); return; }
+
+        const launch = pendingLaunchRef.current;
+        const spawnLon = launch?.lon ?? -0.1278;
+        const spawnLat = launch?.lat ?? 51.5074;
+        const spawnAlt = Math.max(launch?.alt ?? 500, 80);
+        const spawnHeading = Cesium.Math.toRadians(launch?.heading ?? 0);
+
+        const spawnPos = Cesium.Cartesian3.fromDegrees(spawnLon, spawnLat, spawnAlt);
+        const hpRoll = new Cesium.HeadingPitchRoll(spawnHeading, 0, 0);
+        const positionProperty = new Cesium.ConstantPositionProperty(spawnPos);
+        const orientationProperty = new Cesium.ConstantProperty(
+          Cesium.Transforms.headingPitchRollQuaternion(spawnPos, hpRoll)
+        );
+
+        const skin = PLANE_SKINS.find(s => s.id === selectedSkinRef.current) ?? PLANE_SKINS[0];
+        const aircraft = viewer.entities.add({
+          position: positionProperty,
+          orientation: orientationProperty,
+          model: { uri: skin.uri, scale: 5.0, minimumPixelSize: 64, maximumScale: 20, shadows: Cesium.ShadowMode.DISABLED },
+        });
+
+        viewer.camera.lookAt(
+          spawnPos,
+          new Cesium.HeadingPitchRange(spawnHeading + Math.PI, Cesium.Math.toRadians(-15), 25),
+        );
+
+        const scratch: PhysicsScratch = {
+          transform: new Cesium.Matrix4(), enu: new Cesium.Matrix4(),
+          worldFwd: new Cesium.Cartesian3(), upCol: new Cesium.Cartesian4(),
+          up: new Cesium.Cartesian3(), vertDelta: new Cesium.Cartesian3(),
+          totalDelta: new Cesium.Cartesian3(), newPos: new Cesium.Cartesian3(),
+          localFwd: new Cesium.Cartesian3(1, 0, 0),
+          cockpitPos: new Cesium.Cartesian3(),
+          cockpitLook: new Cesium.Cartesian3(),
+          cockpitDir: new Cesium.Cartesian3(),
+          cockpitUpCol: new Cesium.Cartesian4(),
+          cockpitUp: new Cesium.Cartesian3(),
+          cockpitLocalPos: new Cesium.Cartesian3(0, 1.2, 2.3),
+          cockpitLocalLook: new Cesium.Cartesian3(0, 1.1, 240),
+        };
+
+        const cameraState: CameraTrackState = {
+          heading: spawnHeading + Math.PI, pitch: Cesium.Math.toRadians(-15), roll: 0, appliedRoll: 0,
+          fov: Cesium.Math.toRadians(60), lastVehicleHeading: 0,
+          hpRange: new Cesium.HeadingPitchRange(Math.PI, Cesium.Math.toRadians(-15), 25),
+        };
+
+        const weather: WeatherState = {
+          ...WEATHER_PRESETS.clear,
+          nextChange: Date.now() + 60000 + Math.random() * 120000,
+        };
+
+        const game: CesiumGameState = {
+          viewer, aircraft, positionProperty, orientationProperty,
+          position: Cesium.Cartesian3.clone(spawnPos),
+          hpRoll, physics: {
+            currentSpeed: 200, targetSpeed: 200, heading: spawnHeading, pitch: 0, roll: 0,
+            verticalVelocity: 0, stallFactor: 0, gForce: 1.0, lastVertVelocity: 0,
+            onGround: false, landingQuality: 0,
+          },
+          camera: cameraState, cameraMode: "follow",
+          crashed: false, landed: false,
+          scratch, Cesium, remotePilots: new Map(),
+          projectiles: [],
+          weather,
+          combat: { score: 0, kills: 0, deaths: 0, streak: 0, lastFireTs: 0 },
+          lastTerrainAlt: 0, terrainCheckTimer: 0,
+          selectedSkin: selectedSkinRef.current,
+        };
+        gameRef.current = game;
+        pendingLaunchRef.current = null;
+
+        // ── Multiplayer channel ────────────────────────────────────────────
+        const supabase = (await import("@/lib/supabase")).createClient();
+        const mpChannel = supabase.channel("heliopolis-cesium-planes");
+
+        mpChannel.on("broadcast", { event: "cesium-position" }, ({ payload }) => {
+          if (!mounted) return;
+          const { wallet, lat, lon, alt, heading, pitch, roll } = payload as {
+            wallet: string; lat: number; lon: number; alt: number;
+            heading: number; pitch: number; roll: number;
+          };
+          if (wallet === walletAddressRef.current) return;
+
+          const pos = Cesium.Cartesian3.fromDegrees(lon, lat, alt);
+          const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
+          const quat = Cesium.Transforms.headingPitchRollQuaternion(pos, hpr);
+          const existing = game.remotePilots.get(wallet);
+          if (existing) {
+            existing.positionProperty.setValue(pos);
+            existing.orientationProperty.setValue(quat);
+            existing.lastSeen = Date.now();
+          } else {
+            const rPosProp = new Cesium.ConstantPositionProperty(pos);
+            const rOriProp = new Cesium.ConstantProperty(quat);
+            const entity = viewer.entities.add({
+              position: rPosProp, orientation: rOriProp,
+              model: { uri: "/plane.glb", scale: 5.0, minimumPixelSize: 48, maximumScale: 20, shadows: Cesium.ShadowMode.DISABLED },
+              label: {
+                text: wallet.slice(0, 4) + "…" + wallet.slice(-4),
+                font: "11px monospace",
+                fillColor: Cesium.Color.fromCssColorString("#E35930"),
+                outlineColor: Cesium.Color.BLACK, outlineWidth: 2,
+                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                pixelOffset: new Cesium.Cartesian2(0, -20),
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
+              },
+            });
+            game.remotePilots.set(wallet, { positionProperty: rPosProp, orientationProperty: rOriProp, entity, lastSeen: Date.now(), hp: 100 });
+          }
+        });
+
+        // ── Incoming projectile hits ───────────────────────────────────────
+        mpChannel.on("broadcast", { event: "cesium-hit" }, ({ payload }) => {
+          if (!mounted) return;
+          const { target } = payload as { target: string; shooter: string };
+          if (target === walletAddressRef.current) {
+            game.combat.deaths += 1;
+            playExplosion();
+            if (mounted) setStatus("crashed");
+            game.crashed = true;
+          }
+        });
+
+        mpChannel.subscribe();
+        channelRef.current = mpChannel;
+
+        setStatus("ready");
+
+        let lastTs = performance.now();
+        function loop(ts: number) {
+          if (!mounted) return;
+          const dt = Math.min((ts - lastTs) / 1000, 0.05);
+          lastTs = ts;
+
+          if (!game.crashed && !game.landed) {
+            // Weather evolution
+            updateWeather(game, ts, viewer, setWeatherType);
+
+            physicsUpdate(game, inputRef.current, dt);
+
+            // Terrain probe (every 500ms)
+            game.terrainCheckTimer += dt;
+            if (game.terrainCheckTimer > 0.5) {
+              game.terrainCheckTimer = 0;
+              probeTerrainHeight(game);
+            }
+
+            // Projectiles
+            if (inputRef.current.fire && ts - game.combat.lastFireTs > 300) {
+              fireProjectile(game);
+              game.combat.lastFireTs = ts;
+              inputRef.current.fire = false;
+            }
+            updateProjectiles(game, dt, ts, walletAddressRef, channelRef);
+
+            // Stall warning sound
+            if (game.physics.stallFactor > 0.5 && ts - lastStallBeep.current > 600) {
+              lastStallBeep.current = ts;
+              playStallBeep();
+            }
+
+            // Broadcast position
+            if (walletAddressRef.current && channelRef.current && ts - lastBroadcastRef.current > 100) {
+              lastBroadcastRef.current = ts;
+              const carto = Cesium.Cartographic.fromCartesian(game.position);
+              channelRef.current.send({
+                type: "broadcast", event: "cesium-position",
+                payload: {
+                  wallet: walletAddressRef.current,
+                  lat: Cesium.Math.toDegrees(carto.latitude),
+                  lon: Cesium.Math.toDegrees(carto.longitude),
+                  alt: carto.height,
+                  heading: game.physics.heading,
+                  pitch: game.physics.pitch,
+                  roll: game.physics.roll,
+                },
+              });
+            }
+
+            if (game.crashed) setStatus("crashed");
+            if (game.landed) {
+              setLandingScore(game.physics.landingQuality);
+              setStatus("landed");
+              playLanding();
+            }
+          }
+
+          followCamera(game);
+
+          if (ts - lastHudRef.current > 100) {
+            lastHudRef.current = ts;
+            const c = Cesium.Cartographic.fromCartesian(game.position);
+            const hdg = Math.round(Cesium.Math.toDegrees(game.physics.heading) + 360) % 360;
+            const throttlePct = Math.round(((game.physics.currentSpeed - 80) / (1200 - 80)) * 100);
+            const stallPct = Math.round(game.physics.stallFactor * 100);
+            setStallWarning(game.physics.stallFactor > 0.4);
+            setHud({
+              speed: Math.round(game.physics.currentSpeed),
+              altitude: Math.max(0, Math.round(c.height)),
+              heading: hdg,
+              throttlePct: Math.max(0, Math.min(100, throttlePct)),
+              gForce: Math.round(game.physics.gForce * 10) / 10,
+              stallPct,
+              terrainAlt: Math.max(0, Math.round(c.height - game.lastTerrainAlt)),
+              score: game.combat.score,
+              kills: game.combat.kills,
+            });
+            setMapPos({
+              lon: Cesium.Math.toDegrees(c.longitude),
+              lat: Cesium.Math.toDegrees(c.latitude),
+              heading: hdg,
+            });
+          }
+
+          animFrameRef.current = requestAnimationFrame(loop);
+        }
+        animFrameRef.current = requestAnimationFrame(loop);
+      } catch (e) {
+        console.error("Cesium initialize failed:", e);
+        if (mounted) { setInitError(String(e)); setStatus("error"); }
+      }
+    }
+
+    initialize().catch((e) => {
+      if (mounted) { setInitError(String(e)); setStatus("error"); }
+    });
+
+    return () => {
+      mounted = false;
+      cancelAnimationFrame(animFrameRef.current);
+      channelRef.current?.unsubscribe();
+      try { gameRef.current?.viewer.destroy(); } catch { /* ignore */ }
+      gameRef.current = null;
+    };
+  }, [initTrigger]);
+
+  // ─── Apply quality change live ────────────────────────────────────────────
+  useEffect(() => {
+    const game = gameRef.current;
+    if (!game) return;
+    applyQualityToScene(game.viewer, quality);
+  }, [quality]);
+
+  // ─── Keyboard input ───────────────────────────────────────────────────────
+  useEffect(() => {
+    function onKey(e: KeyboardEvent, down: boolean) {
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      const inp = inputRef.current;
+      switch (e.key) {
+        case "w": case "W": case "ArrowUp": inp.throttle = down; break;
+        case "s": case "S": case "ArrowDown": inp.brake = down; break;
+        case "a": case "A": case "ArrowLeft": inp.turnLeft = down; break;
+        case "d": case "D": case "ArrowRight": inp.turnRight = down; break;
+        case "q": case "Q": inp.rollLeft = down; break;
+        case "e": case "E": inp.rollRight = down; break;
+        case " ": case "PageUp": inp.altitudeUp = down; e.preventDefault(); break;
+        case "PageDown": inp.altitudeDown = down; break;
+        case "f": case "F": if (down) inp.fire = true; break;
+        case "c": case "C":
+          if (down && gameRef.current) {
+            const next = CAM_CYCLE[(CAM_CYCLE.indexOf(gameRef.current.cameraMode) + 1) % CAM_CYCLE.length];
+            gameRef.current.cameraMode = next;
+            setCamMode(next);
+          }
+          break;
+        case "r": case "R":
+          if (down && (gameRef.current?.crashed || gameRef.current?.landed)) handleRestart();
+          break;
+        case "n": case "N":
+          if (down && gameRef.current) {
+            const types: WeatherType[] = ["clear", "cloudy", "stormy"];
+            const cur = gameRef.current.weather.type;
+            const next = types[(types.indexOf(cur) + 1) % types.length] as WeatherType;
+            applyWeatherPreset(gameRef.current, next, gameRef.current.viewer, setWeatherType);
+          }
+          break;
+        case "?": if (down) setShowControls(v => !v); break;
+        case "l": case "L": if (down) setShowLocations(v => !v); break;
+        case "k": case "K": if (down) setShowSkins(v => !v); break;
+        case "Escape": if (down) handleExit(); break;
+      }
+      if (e.key.startsWith("Arrow")) e.preventDefault();
+    }
+    const dn = (e: KeyboardEvent) => onKey(e, true);
+    const up = (e: KeyboardEvent) => onKey(e, false);
+    window.addEventListener("keydown", dn);
+    window.addEventListener("keyup", up);
+    return () => { window.removeEventListener("keydown", dn); window.removeEventListener("keyup", up); };
+  }, [handleExit]);
+
+  // ─── Restart ─────────────────────────────────────────────────────────────
+  function handleRestart() {
+    const game = gameRef.current;
+    if (!game) return;
+    const { Cesium } = game;
+    game.crashed = false; game.landed = false;
+    game.position = Cesium.Cartesian3.fromDegrees(-0.1278, 51.5074, 500);
+    game.physics = {
+      currentSpeed: 200, targetSpeed: 200, heading: 0, pitch: 0, roll: 0,
+      verticalVelocity: 0, stallFactor: 0, gForce: 1, lastVertVelocity: 0,
+      onGround: false, landingQuality: 0,
+    };
+    game.hpRoll.heading = 0; game.hpRoll.pitch = 0; game.hpRoll.roll = 0;
+    game.camera.heading = Math.PI; game.camera.lastVehicleHeading = 0;
+    game.positionProperty.setValue(game.position);
+    setLandingScore(null);
+    setStatus("ready");
+  }
+
+  // ─── Render ───────────────────────────────────────────────────────────────
+  return (
+    <div className="fixed inset-0 z-50 bg-black">
+      <div ref={containerRef} className="w-full h-full" />
+
+      {/* Rain overlay */}
+      {status === "ready" && <RainOverlay intensity={weatherType === "stormy" ? 0.8 : weatherType === "cloudy" ? 0.2 : 0} />}
+
+      {/* Stall warning vignette */}
+      {stallWarning && status === "ready" && (
+        <div className="absolute inset-0 pointer-events-none animate-pulse" style={{
+          background: "radial-gradient(ellipse at center, transparent 40%, rgba(255,60,60,0.25) 100%)",
+        }} />
+      )}
+
+      {/* G-force vignette */}
+      {status === "ready" && hud.gForce > 3 && (
+        <div className="absolute inset-0 pointer-events-none" style={{
+          background: `radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,${Math.min(0.7, (hud.gForce - 3) * 0.2)}) 100%)`,
+        }} />
+      )}
+
+      {/* ── Intro ─────────────────────────────────────────────────────────── */}
+      {status === "intro" && (
+        <IntroScreen
+          isMobile={isMobile}
+          onStart={() => { setStatus("loading"); setInitTrigger(n => n + 1); }}
+          onExit={handleExit}
+        />
+      )}
+
+      {/* ── Loading ───────────────────────────────────────────────────────── */}
+      {status === "loading" && (
+        <div className="absolute inset-0 flex items-center justify-center bg-[#0a0a12]">
+          <div className="text-center">
+            <div className="w-12 h-12 border-2 border-[#E35930]/30 border-t-[#E35930] rounded-full animate-spin mx-auto mb-5" />
+            <h2 className="text-xl font-bold mb-1" style={{ color: "#E35930" }}>SOLANApolis</h2>
+            <p className="text-white/60 text-sm mb-1">Loading flight simulator…</p>
+            <p className="text-white/25 text-xs tracking-wide">Real-world terrain · Cesium · Solana</p>
+          </div>
+        </div>
+      )}
+
+      {/* ── In-flight HUD ─────────────────────────────────────────────────── */}
+      {status === "ready" && (
+        <>
+          {/* Top-centre HUD */}
+          <div className="absolute top-4 left-1/2 -translate-x-1/2 flex items-center gap-4 bg-black/75 backdrop-blur-xl border border-white/10 rounded-2xl px-5 py-2.5 pointer-events-none">
+            <HudStat label="SPEED" value={hud.speed} unit="km/h" warn={hud.speed < 130} />
+            <Sep />
+            <HudStat label="ALT" value={hud.altitude} unit="m" />
+            <Sep />
+            <HudStat label="AGL" value={hud.terrainAlt} unit="m" warn={hud.terrainAlt < 50} />
+            <Sep />
+            <HudStat label="HDG" value={hud.heading} unit="°" />
+            <Sep />
+            {/* G-force meter */}
+            <div className="text-center min-w-[44px]">
+              <div className="text-white/40 text-[10px] font-medium tracking-widest mb-0.5">G</div>
+              <div className={`font-mono text-base font-bold ${Math.abs(hud.gForce) > 4 ? "text-red-400" : Math.abs(hud.gForce) > 2.5 ? "text-yellow-400" : "text-white"}`}>
+                {hud.gForce.toFixed(1)}
+              </div>
+            </div>
+            <Sep />
+            {/* Throttle */}
+            <div className="text-center min-w-[48px]">
+              <div className="text-white/40 text-[10px] font-medium tracking-widest mb-1">THR</div>
+              <div className="w-10 h-1.5 bg-white/10 rounded-full overflow-hidden mx-auto">
+                <div className="h-full rounded-full transition-all duration-100"
+                  style={{ width: `${hud.throttlePct}%`, background: hud.throttlePct > 80 ? "#ff4400" : hud.throttlePct > 50 ? "#E35930" : "#22c55e" }} />
+              </div>
+              <div className="text-white/60 font-mono text-xs mt-0.5">{hud.throttlePct}%</div>
+            </div>
+          </div>
+
+          {/* Stall warning */}
+          {stallWarning && (
+            <div className="absolute top-24 left-1/2 -translate-x-1/2 pointer-events-none">
+              <div className="bg-red-600/90 text-white text-xs font-bold tracking-widest px-4 py-1.5 rounded-lg animate-pulse border border-red-400/50">
+                ⚠ STALL — NOSE DOWN — ADD THROTTLE
+              </div>
+            </div>
+          )}
+
+          {/* Score / combat HUD */}
+          {hud.kills > 0 && (
+            <div className="absolute top-20 right-4 bg-black/60 border border-[#E35930]/30 rounded-xl px-3 py-2 text-right pointer-events-none">
+              <div className="text-[10px] text-white/40 tracking-widest">SCORE</div>
+              <div className="text-[#E35930] font-mono font-bold text-lg">{hud.score}</div>
+              <div className="text-white/50 text-xs">{hud.kills} kills</div>
+            </div>
+          )}
+
+          {/* Top-right: camera + quality + exit */}
+          <div className="absolute top-4 right-4 flex items-center gap-2">
+            {/* Weather indicator */}
+            <div className="px-2 py-2 bg-black/60 border border-white/10 rounded-xl text-xs font-mono text-white/40">
+              {weatherType === "stormy" ? "⛈" : weatherType === "cloudy" ? "☁️" : "☀️"}
+            </div>
+            <button
+              onClick={() => {
+                if (!gameRef.current) return;
+                const next = CAM_CYCLE[(CAM_CYCLE.indexOf(gameRef.current.cameraMode) + 1) % CAM_CYCLE.length];
+                gameRef.current.cameraMode = next; setCamMode(next);
+              }}
+              className="px-3 py-2 bg-black/60 hover:bg-black/80 border border-white/10 hover:border-white/25 rounded-xl text-[10px] tracking-widest text-white/50 hover:text-white/80 font-mono transition-colors cursor-pointer"
+            >
+              📷 {CAM_LABELS[camMode]}
+            </button>
+            <select value={quality} onChange={e => setQuality(e.target.value as QualityPreset)}
+              className="px-2 py-2 bg-black/60 border border-white/10 rounded-xl text-[10px] text-white/40 font-mono cursor-pointer appearance-none">
+              <option value="performance">PERF</option>
+              <option value="balanced">BAL</option>
+              <option value="quality">MAX</option>
+            </select>
+            <button onClick={handleExit}
+              className="px-4 py-2 bg-black/70 backdrop-blur-xl border border-white/10 rounded-xl text-sm text-white/70 hover:text-white hover:border-white/25 transition-colors cursor-pointer">
+              ← City
+            </button>
+          </div>
+
+          {/* Top-left */}
+          <div className="absolute top-4 left-4 flex items-center gap-2">
+            {walletAddress && (
+              <div className="px-3 py-2 bg-purple-500/10 border border-purple-400/20 rounded-xl text-xs text-purple-300/80 font-mono">
+                ✈ {walletAddress.slice(0, 4)}…{walletAddress.slice(-4)}
+                {solBalance > 0 && <span className="ml-1.5 text-purple-400/60">{solBalance.toFixed(2)} SOL</span>}
+              </div>
+            )}
+            {/* Location picker */}
+            <div className="relative">
+              <button onClick={() => setShowLocations(v => !v)}
+                className="px-3 py-2 bg-black/60 hover:bg-black/80 border border-white/10 hover:border-white/25 rounded-xl text-xs text-white/50 hover:text-white/80 transition-colors cursor-pointer">
+                🌍 Fly To
+              </button>
+              {showLocations && (
+                <div className="absolute top-full left-0 mt-2 w-64 bg-black/90 backdrop-blur-xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl z-10">
+                  <div className="px-4 py-2 border-b border-white/10">
+                    <p className="text-[10px] text-white/40 tracking-widest font-medium">CITIES</p>
+                  </div>
+                  <div className="max-h-48 overflow-y-auto">
+                    {LOCATIONS.map(loc => (
+                      <button key={loc.name} onClick={() => teleportTo(loc.lon, loc.lat, loc.alt, loc.hdg)}
+                        className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/5 text-left transition-colors cursor-pointer">
+                        <span className="text-sm">{loc.flag}</span>
+                        <div><p className="text-xs text-white/80">{loc.name}</p><p className="text-[10px] text-white/30">{loc.alt}m · {loc.hdg}°</p></div>
+                      </button>
+                    ))}
+                  </div>
+                  <div className="px-4 py-2 border-t border-white/10">
+                    <p className="text-[10px] text-white/40 tracking-widest font-medium">AIRPORTS</p>
+                  </div>
+                  <div className="max-h-48 overflow-y-auto">
+                    {AIRPORTS.map(ap => (
+                      <button key={ap.name} onClick={() => teleportTo(ap.lon, ap.lat, ap.alt + 200, ap.hdg)}
+                        className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/5 text-left transition-colors cursor-pointer">
+                        <span className="text-sm">{ap.flag}</span>
+                        <div>
+                          <p className="text-xs text-white/80">{ap.name}</p>
+                          <p className="text-[10px] text-white/30">Runway {ap.hdg}° · {ap.alt}m elev</p>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            {/* Skins */}
+            <div className="relative">
+              <button onClick={() => setShowSkins(v => !v)}
+                className="px-3 py-2 bg-black/60 hover:bg-black/80 border border-white/10 hover:border-white/25 rounded-xl text-xs text-white/50 hover:text-white/80 transition-colors cursor-pointer">
+                ✈ Skins
+              </button>
+              {showSkins && (
+                <div className="absolute top-full left-0 mt-2 w-52 bg-black/90 backdrop-blur-xl border border-white/10 rounded-2xl overflow-hidden shadow-2xl z-10">
+                  <div className="px-4 py-2.5 border-b border-white/10">
+                    <p className="text-[10px] text-white/40 tracking-widest">SELECT AIRCRAFT</p>
+                  </div>
+                  {PLANE_SKINS.map(skin => {
+                    const locked = skin.minSol > solBalance;
+                    return (
+                      <button key={skin.id}
+                        onClick={() => { if (!locked) { setSelectedSkin(skin.id); setShowSkins(false); } }}
+                        className={`w-full flex items-center justify-between px-4 py-3 text-left transition-colors ${locked ? "opacity-40 cursor-not-allowed" : "hover:bg-white/5 cursor-pointer"} ${selectedSkin === skin.id ? "bg-white/8 border-l-2 border-[#E35930]" : ""}`}>
+                        <div>
+                          <p className="text-xs text-white/80">{skin.name}</p>
+                          <p className="text-[10px] text-white/30">{locked ? `🔒 ${skin.badge}` : "✓ Unlocked"}</p>
+                        </div>
+                        {selectedSkin === skin.id && <span className="text-[#E35930] text-xs">●</span>}
+                      </button>
+                    );
+                  })}
+                  <div className="px-4 py-2 border-t border-white/10">
+                    <p className="text-[9px] text-white/25">Changes apply on next launch</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Bottom-right: mini-map */}
+          <div className="absolute bottom-6 right-5">
+            <MiniMap lon={mapPos.lon} lat={mapPos.lat} heading={mapPos.heading} />
+          </div>
+
+          {/* Bottom-left: controls */}
+          {showControls ? (
+            <div className="absolute bottom-6 left-5 bg-black/70 backdrop-blur-xl border border-white/10 rounded-2xl px-5 py-4 text-xs text-white/50 space-y-1.5 max-w-[220px]">
+              <div className="flex justify-between items-center mb-2">
+                <p className="text-white/70 font-semibold">Controls</p>
+                <button onClick={() => setShowControls(false)} className="text-white/30 hover:text-white/70 cursor-pointer text-base ml-4 leading-none">✕</button>
+              </div>
+              {[
+                ["W / ↑", "Throttle up"],
+                ["S / ↓", "Brake / slow"],
+                ["A / D", "Bank left / right"],
+                ["Space", "Climb"],
+                ["F", "Fire weapon 💥"],
+                ["N", "Cycle weather"],
+                ["C", "Camera mode (incl. cockpit)"],
+                ["K", "Plane skins"],
+                ["L", "Locations / airports"],
+                ["R", "Restart (crash)"],
+                ["Esc", "Return to city"],
+              ].map(([key, action]) => (
+                <p key={key}><span className="text-white/65">{key}</span><span className="text-white/25"> — </span>{action}</p>
+              ))}
+              <p className="text-white/20 text-[10px] tracking-wide pt-1">? to toggle</p>
+            </div>
+          ) : (
+            <button onClick={() => setShowControls(true)}
+              className="absolute bottom-6 left-5 px-3 py-2 bg-black/50 border border-white/10 rounded-xl text-xs text-white/35 hover:text-white/60 cursor-pointer">
+              ? Controls
+            </button>
+          )}
+
+          {/* Fire button (mobile) */}
+          {isMobile && (
+            <button
+              onTouchStart={() => { inputRef.current.fire = true; }}
+              className="absolute bottom-24 left-5 w-14 h-14 bg-red-600/80 border border-red-400/40 rounded-full text-white text-xl flex items-center justify-center shadow-lg cursor-pointer"
+              style={{ touchAction: "none" }}
+            >
+              🔫
+            </button>
+          )}
+
+          {isMobile && (
+            <ThrottleSlider onChange={(pct) => {
+              inputRef.current.targetSpeed = 80 + (pct / 100) * (1200 - 80);
+              inputRef.current.throttle = pct > 55;
+              inputRef.current.brake = pct < 45;
+            }} />
+          )}
+
+          {/* Cockpit-only overlays */}
+          {camMode === "cockpit" && (
+            <>
+              {/* Cockpit frame */}
+              <div className="absolute inset-0 pointer-events-none">
+                <div
+                  className="absolute top-0 left-0 right-0 h-10"
+                  style={{
+                    background: "linear-gradient(180deg, rgba(12,12,18,0.92) 0%, rgba(12,12,18,0.55) 62%, transparent 100%)",
+                  }}
+                />
+                <div
+                  className="absolute bottom-0 left-0 right-0 h-36"
+                  style={{
+                    background: "linear-gradient(0deg, rgba(12,12,18,0.96) 0%, rgba(12,12,18,0.78) 46%, rgba(12,12,18,0.35) 72%, transparent 100%)",
+                  }}
+                />
+                <div
+                  className="absolute top-0 bottom-0 left-0 w-14"
+                  style={{
+                    background: "linear-gradient(90deg, rgba(12,12,18,0.88) 0%, rgba(12,12,18,0.42) 70%, transparent 100%)",
+                  }}
+                />
+                <div
+                  className="absolute top-0 bottom-0 right-0 w-14"
+                  style={{
+                    background: "linear-gradient(-90deg, rgba(12,12,18,0.88) 0%, rgba(12,12,18,0.42) 70%, transparent 100%)",
+                  }}
+                />
+              </div>
+
+              {/* Center reticle */}
+              <div className="absolute inset-0 pointer-events-none flex items-center justify-center">
+                <div className="relative w-16 h-16">
+                  <div className="absolute inset-0 border border-[#E35930]/25 rounded-full" />
+                  <div className="absolute top-1/2 left-0 w-5 h-px bg-[#E35930]/55" />
+                  <div className="absolute top-1/2 right-0 w-5 h-px bg-[#E35930]/55" />
+                  <div className="absolute left-1/2 top-0 w-px h-5 bg-[#E35930]/55" />
+                  <div className="absolute left-1/2 bottom-0 w-px h-5 bg-[#E35930]/55" />
+                  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-[#E35930]" />
+                </div>
+              </div>
+
+              {/* Solana data panel */}
+              <div className="absolute bottom-6 left-5 bg-black/72 backdrop-blur-xl border border-purple-400/20 rounded-2xl px-4 py-3 text-xs min-w-[220px] pointer-events-none">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                    <span className="w-1.5 h-1.5 rounded-full bg-purple-400 animate-pulse" />
+                    <span className="text-[10px] tracking-widest text-purple-300/70 font-semibold">SOLANA LINK</span>
+                  </div>
+                  <span className="text-[10px] text-white/30 font-mono">{cockpitSolana.updatedAt ? "LIVE" : "SYNC"}</span>
+                </div>
+                <div className="space-y-1.5 font-mono text-[11px]">
+                  <div className="flex justify-between gap-3"><span className="text-white/35">SOL/USD</span><span className="text-white/85">{cockpitSolana.solPrice != null ? `$${cockpitSolana.solPrice.toFixed(2)}` : "—"}</span></div>
+                  <div className="flex justify-between gap-3"><span className="text-white/35">TPS</span><span className="text-emerald-300/90">{cockpitSolana.tps != null ? cockpitSolana.tps.toLocaleString() : "—"}</span></div>
+                  <div className="flex justify-between gap-3"><span className="text-white/35">SLOT</span><span className="text-white/70">{cockpitSolana.slot != null ? `#${cockpitSolana.slot.toLocaleString()}` : "—"}</span></div>
+                  <div className="flex justify-between gap-3"><span className="text-white/35">EPOCH</span><span className="text-white/70">{cockpitSolana.epoch != null ? `${cockpitSolana.epoch}${cockpitSolana.epochProgress ? ` · ${cockpitSolana.epochProgress}%` : ""}` : "—"}</span></div>
+                  {walletAddress && (
+                    <div className="flex justify-between gap-3 pt-1 border-t border-white/10">
+                      <span className="text-white/35">WALLET</span>
+                      <span className="text-amber-300/90">{cockpitSolana.walletBalance != null ? `${cockpitSolana.walletBalance.toFixed(4)} SOL` : "—"}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </>
+      )}
+
+      {/* ── Crash screen ──────────────────────────────────────────────────── */}
+      {status === "crashed" && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/85 backdrop-blur-sm">
+          <div className="text-center bg-black/80 border border-red-500/20 rounded-3xl px-10 py-8 shadow-2xl">
+            <div className="text-5xl mb-4 animate-bounce">💥</div>
+            <h2 className="text-2xl font-bold text-white mb-1">Crashed!</h2>
+            <p className="text-white/50 text-sm mb-1">Don&apos;t worry, happens to the best pilots</p>
+            {hud.kills > 0 && <p className="text-[#E35930] text-sm mb-1">Score: {hud.score} · {hud.kills} kills</p>}
+            <p className="text-[10px] text-white/25 mb-6 tracking-widest">SOLANApolis · powered by Helius on Solana</p>
+            <div className="flex gap-3 justify-center mb-4">
+              <button onClick={handleRestart}
+                className="px-5 py-2.5 bg-[#E35930]/15 hover:bg-[#E35930]/25 border border-[#E35930]/30 rounded-xl text-sm text-[#E35930] transition-colors cursor-pointer">
+                ✈ Fly Again
+              </button>
+              <button onClick={handleExit}
+                className="px-5 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-sm text-white/60 transition-colors cursor-pointer">
+                Return to City
+              </button>
+            </div>
+            <p className="text-[10px] text-white/20 tracking-widest">Press R to restart</p>
+          </div>
+        </div>
+      )}
+
+      {/* ── Landing screen ────────────────────────────────────────────────── */}
+      {status === "landed" && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/75 backdrop-blur-sm">
+          <div className="text-center bg-black/80 border border-green-500/20 rounded-3xl px-10 py-8 shadow-2xl">
+            <div className="text-5xl mb-4">🛬</div>
+            <h2 className="text-2xl font-bold text-white mb-1">Landed!</h2>
+            {landingScore !== null && (
+              <div className="mb-4">
+                <div className="text-4xl font-bold mb-1" style={{ color: landingScore > 80 ? "#22c55e" : landingScore > 50 ? "#E35930" : "#ef4444" }}>
+                  {landingScore}/100
+                </div>
+                <p className="text-white/40 text-xs">
+                  {landingScore > 80 ? "Smooth landing! ✓" : landingScore > 50 ? "Acceptable landing" : "Rough — work on your approach"}
+                </p>
+              </div>
+            )}
+            <div className="flex gap-3 justify-center">
+              <button onClick={handleRestart}
+                className="px-5 py-2.5 bg-green-600/20 hover:bg-green-600/30 border border-green-500/30 rounded-xl text-sm text-green-400 transition-colors cursor-pointer">
+                ✈ Fly Again
+              </button>
+              <button onClick={handleExit}
+                className="px-5 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-sm text-white/60 transition-colors cursor-pointer">
+                Return to City
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Error screen ──────────────────────────────────────────────────── */}
+      {status === "error" && (
+        <div className="absolute inset-0 flex items-center justify-center bg-[#0a0a12]">
+          <div className="text-center bg-black/80 border border-red-500/20 rounded-3xl px-10 py-8 shadow-2xl max-w-md">
+            <div className="text-4xl mb-4">⚠️</div>
+            <h2 className="text-xl font-bold text-white mb-2">Flight Sim Error</h2>
+            <p className="text-white/50 text-sm mb-4">{initError || "Something went wrong loading the flight simulator."}</p>
+            <div className="flex gap-3 justify-center">
+              <button onClick={() => { setInitError(null); setStatus("loading"); setInitTrigger(n => n + 1); }}
+                className="px-5 py-2.5 bg-[#E35930]/15 hover:bg-[#E35930]/25 border border-[#E35930]/30 rounded-xl text-sm text-[#E35930] transition-colors cursor-pointer">
+                ✈ Retry
+              </button>
+              <button onClick={handleExit}
+                className="px-5 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-sm text-white/60 transition-colors cursor-pointer">
+                Return to City
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {(showLocations || showSkins) && (
+        <div className="absolute inset-0 z-[5]" onClick={() => { setShowLocations(false); setShowSkins(false); }} />
+      )}
+    </div>
+  );
+}
+
+// ─── Sub-components ────────────────────────────────────────────────────────────
+
+function Sep() { return <div className="w-px h-8 bg-white/10" />; }
+
+function HudStat({ label, value, unit, warn }: { label: string; value: number; unit: string; warn?: boolean }) {
+  return (
+    <div className="text-center min-w-[56px]">
+      <div className="text-white/40 text-[10px] font-medium tracking-widest mb-0.5">{label}</div>
+      <div className={`font-mono text-base font-bold leading-none ${warn ? "text-red-400 animate-pulse" : "text-white"}`}>
+        {value}<span className="text-white/35 text-xs ml-0.5">{unit}</span>
+      </div>
+    </div>
+  );
+}
+
+function ThrottleSlider({ onChange }: { onChange: (pct: number) => void }) {
+  const [throttle, setThrottle] = useState(50);
+  const [isDragging, setIsDragging] = useState(false);
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const update = (clientY: number) => {
+    if (!sliderRef.current) return;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(100, 100 - ((clientY - rect.top) / rect.height) * 100));
+    setThrottle(pct); onChange(pct);
+  };
+  return (
+    <div ref={sliderRef}
+      className="fixed right-0 top-0 h-full w-20 flex items-center justify-center z-40"
+      onTouchStart={e => { e.stopPropagation(); setIsDragging(true); update(e.touches[0].clientY); }}
+      onTouchMove={e => { if (isDragging) { e.stopPropagation(); update(e.touches[0].clientY); } }}
+      onTouchEnd={e => { e.stopPropagation(); setIsDragging(false); }}
+      style={{ touchAction: "none" }}>
+      <div className="relative h-[50vh] w-2 bg-white/10 rounded-full overflow-hidden">
+        <div className="absolute bottom-0 left-0 right-0 rounded-full transition-all duration-75"
+          style={{ height: `${throttle}%`, background: throttle > 80 ? "#ff4400" : throttle > 50 ? "#E35930" : "#22c55e" }} />
+      </div>
+      <div className="absolute top-1/2 -translate-y-1/2 right-2 text-white/40 text-[10px] font-mono select-none">{Math.round(throttle)}</div>
+    </div>
+  );
+}
+
+/** CSS-only rain overlay — no Cesium overhead */
+function RainOverlay({ intensity }: { intensity: number }) {
+  if (intensity <= 0) return null;
+  const drops = Math.round(intensity * 60);
+  return (
+    <div className="absolute inset-0 overflow-hidden pointer-events-none" style={{ opacity: intensity }}>
+      {Array.from({ length: drops }, (_, i) => (
+        <div key={i} className="absolute"
+          style={{
+            left: `${Math.random() * 100}%`,
+            top: `-${Math.random() * 20}%`,
+            width: 1,
+            height: `${8 + Math.random() * 14}px`,
+            background: "rgba(180,210,255,0.5)",
+            animation: `rain-fall ${0.6 + Math.random() * 0.4}s linear ${Math.random() * 2}s infinite`,
+            transform: `rotate(${15 + Math.random() * 10}deg)`,
+          }}
+        />
+      ))}
+      <style>{`@keyframes rain-fall { 0% { transform: rotate(20deg) translateY(0); } 100% { transform: rotate(20deg) translateY(110vh); } }`}</style>
+    </div>
+  );
+}
+
+function IntroScreen({ isMobile, onStart, onExit }: { isMobile: boolean; onStart: () => void; onExit: () => void }) {
+  return (
+    <div className="absolute inset-0 z-10 bg-[#0a0a12]/95 backdrop-blur-lg flex items-center justify-center">
+      <div className="max-w-lg w-full mx-4">
+        <div className="bg-black/60 border border-white/10 rounded-3xl p-8 space-y-5 shadow-2xl">
+          <div className="text-center space-y-1">
+            <div className="text-4xl mb-3">✈️</div>
+            <h1 className="text-2xl font-bold" style={{ color: "#E35930" }}>SOLANApolis Flight</h1>
+            <p className="text-white/50 text-sm">Real-world terrain · Multiplayer · Combat · Weather</p>
+          </div>
+          {isMobile ? (
+            <div className="space-y-2.5">
+              {[["↔️", "Swipe left/right", "Roll / bank"], ["↕️", "Swipe up/down", "Climb / descend"], ["🎚️", "Right slider", "Throttle"], ["🔫", "Fire button", "Shoot enemies"]].map(([icon, action, desc]) => (
+                <div key={action} className="flex items-center gap-3 bg-white/5 border border-white/10 rounded-xl px-4 py-3">
+                  <span className="text-2xl">{icon}</span><div><p className="text-sm font-medium text-white/80">{action}</p><p className="text-xs text-white/40">{desc}</p></div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <p className="text-[10px] text-white/30 tracking-widest font-medium uppercase">Flight</p>
+                {[["W / ↑", "Throttle"], ["S / ↓", "Brake"], ["A / D", "Roll"], ["Space", "Climb"], ["F", "Fire!"]].map(([k, a]) => (
+                  <div key={k} className="flex justify-between items-center gap-2">
+                    <kbd className="px-2 py-0.5 text-[10px] bg-white/5 border border-white/10 rounded-md font-mono text-white/70">{k}</kbd>
+                    <span className="text-xs text-white/50 flex-1 text-right">{a}</span>
+                  </div>
+                ))}
+              </div>
+              <div className="space-y-2">
+                <p className="text-[10px] text-white/30 tracking-widest font-medium uppercase">System</p>
+                {[["C", "Camera"], ["N", "Weather"], ["K", "Skins"], ["L", "Fly To"], ["Esc", "Exit"]].map(([k, a]) => (
+                  <div key={k} className="flex justify-between items-center gap-2">
+                    <kbd className="px-2 py-0.5 text-[10px] bg-white/5 border border-white/10 rounded-md font-mono text-white/70">{k}</kbd>
+                    <span className="text-xs text-white/50 flex-1 text-right">{a}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          <div className="bg-white/5 border border-white/10 rounded-xl p-3 space-y-1.5">
+            <p className="text-[10px] text-[#E35930] tracking-widest font-semibold uppercase">Tips</p>
+            {["Speed below 130 km/h triggers stall — add throttle fast", "F key fires at enemy pilots — hit = score points", "Land at airports for bonus scoring"].map(tip => (
+              <p key={tip} className="text-xs text-white/50"><span className="text-[#E35930]/60 mr-1.5">•</span>{tip}</p>
+            ))}
+          </div>
+          <div className="flex gap-3">
+            <button onClick={onStart}
+              className="flex-1 py-3 bg-[#E35930] hover:bg-[#E35930]/90 rounded-xl text-sm font-semibold text-white transition-colors cursor-pointer">
+              Start Flying
+            </button>
+            <button onClick={onExit}
+              className="px-5 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-sm text-white/60 transition-colors cursor-pointer">
+              ← City
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function lerpAngle(start: number, end: number, factor: number): number {
+  const TWO_PI = Math.PI * 2;
+  start = ((start % TWO_PI) + TWO_PI) % TWO_PI;
+  end = ((end % TWO_PI) + TWO_PI) % TWO_PI;
+  let delta = end - start;
+  if (delta > Math.PI) delta -= TWO_PI;
+  if (delta < -Math.PI) delta += TWO_PI;
+  return ((start + delta * factor) % TWO_PI + TWO_PI) % TWO_PI;
+}
+
+function angularDelta(current: number, previous: number): number {
+  const TWO_PI = Math.PI * 2;
+  current = ((current % TWO_PI) + TWO_PI) % TWO_PI;
+  previous = ((previous % TWO_PI) + TWO_PI) % TWO_PI;
+  let d = current - previous;
+  if (d > Math.PI) d -= TWO_PI;
+  if (d < -Math.PI) d += TWO_PI;
+  return d;
+}
+
+function applyQualityToScene(viewer: Viewer, preset: QualityPreset) {
+  const globe = viewer.scene.globe as typeof viewer.scene.globe & { maximumScreenSpaceError: number };
+  if (preset === "performance") {
+    globe.maximumScreenSpaceError = 32;
+    viewer.scene.fog.enabled = false;
+  } else if (preset === "balanced") {
+    globe.maximumScreenSpaceError = 16;
+    viewer.scene.fog.enabled = true;
+  } else {
+    globe.maximumScreenSpaceError = 8;
+    viewer.scene.fog.enabled = true;
+  }
+}
+
+// ─── Weather ──────────────────────────────────────────────────────────────────
+
+function applyWeatherPreset(game: CesiumGameState, type: WeatherType, viewer: Viewer, setWeatherType: (t: WeatherType) => void) {
+  const preset = WEATHER_PRESETS[type];
+  game.weather = { ...preset, nextChange: Date.now() + 60000 + Math.random() * 180000 };
+  setWeatherType(type);
+
+  // Fog
+  viewer.scene.fog.enabled = type !== "clear";
+  if (type === "stormy") {
+    (viewer.scene.fog as typeof viewer.scene.fog & { density: number }).density = 0.0008;
+  } else if (type === "cloudy") {
+    (viewer.scene.fog as typeof viewer.scene.fog & { density: number }).density = 0.0003;
+  }
+}
+
+function updateWeather(game: CesiumGameState, now: number, viewer: Viewer, setWeatherType: (t: WeatherType) => void) {
+  if (now < game.weather.nextChange) return;
+  const types: WeatherType[] = ["clear", "cloudy", "stormy", "clear", "clear"]; // clear more likely
+  const next = types[Math.floor(Math.random() * types.length)] as WeatherType;
+  applyWeatherPreset(game, next, viewer, setWeatherType);
+}
+
+// ─── Terrain probing ──────────────────────────────────────────────────────────
+
+function probeTerrainHeight(game: CesiumGameState) {
+  const { Cesium, viewer, position } = game;
+  if (!viewer.terrainProvider) return;
+  const carto = Cesium.Cartographic.fromCartesian(position);
+  Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [Cesium.Cartographic.clone(carto)])
+    .then(updated => { if (updated[0]) game.lastTerrainAlt = updated[0].height ?? 0; })
+    .catch(() => { });
+}
+
+// ─── Weapon system ────────────────────────────────────────────────────────────
+
+function fireProjectile(game: CesiumGameState) {
+  const { Cesium, viewer, position, physics } = game;
+  const pos = Cesium.Cartesian3.clone(position);
+  const posProp = new Cesium.ConstantPositionProperty(pos);
+  const entity = viewer.entities.add({
+    position: posProp,
+    point: { pixelSize: 6, color: Cesium.Color.fromCssColorString("#ff4400"), outlineColor: Cesium.Color.fromCssColorString("#ff8800"), outlineWidth: 2 },
+  });
+  game.projectiles.push({
+    positionProperty: posProp, entity,
+    heading: physics.heading, pitch: physics.pitch,
+    speed: physics.currentSpeed * 3.5,
+    createdAt: performance.now(),
+    shooterWallet: "self",
+  });
+  playGunshot();
+}
+
+function updateProjectiles(
+  game: CesiumGameState,
+  dt: number,
+  now: number,
+  walletRef: { current: string | null },
+  channelRef: { current: RealtimeChannel | null }
+) {
+  const { Cesium, viewer, projectiles, remotePilots, combat } = game;
+  const HIT_RADIUS = 60; // metres
+  const PROJECTILE_TTL = 5000; // ms
+
+  for (let i = projectiles.length - 1; i >= 0; i--) {
+    const proj = projectiles[i];
+
+    // Remove expired
+    if (now - proj.createdAt > PROJECTILE_TTL) {
+      viewer.entities.remove(proj.entity);
+      projectiles.splice(i, 1);
+      continue;
+    }
+
+    // Advance position in heading/pitch direction
+    const hpr = new Cesium.HeadingPitchRoll(proj.heading, proj.pitch, 0);
+    const transform = Cesium.Transforms.headingPitchRollToFixedFrame(
+      proj.positionProperty.getValue(Cesium.JulianDate.now()) ?? game.position,
+      hpr, Cesium.Ellipsoid.WGS84
+    );
+    const speedMs = (proj.speed / 3.6) * dt;
+    // Cesium local forward axis is +X for HeadingPitchRoll transforms.
+    const localFwd = new Cesium.Cartesian3(speedMs, 0, 0);
+    const worldFwd = Cesium.Matrix4.multiplyByPoint(transform, localFwd, new Cesium.Cartesian3());
+    const curPos = proj.positionProperty.getValue(Cesium.JulianDate.now()) ?? game.position;
+    const delta = Cesium.Cartesian3.subtract(worldFwd, curPos, new Cesium.Cartesian3());
+    const newPos = Cesium.Cartesian3.add(curPos, delta, new Cesium.Cartesian3());
+
+    // Remove if hit terrain
+    const carto = Cesium.Cartographic.fromCartesian(newPos);
+    if (carto.height < game.lastTerrainAlt + 2) {
+      viewer.entities.remove(proj.entity);
+      projectiles.splice(i, 1);
+      continue;
+    }
+
+    proj.positionProperty.setValue(newPos);
+
+    // Hit detection against remote pilots
+    remotePilots.forEach((pilot, wallet) => {
+      const pilotPos = pilot.positionProperty.getValue(Cesium.JulianDate.now());
+      if (!pilotPos) return;
+      const dist = Cesium.Cartesian3.distance(newPos, pilotPos);
+      if (dist < HIT_RADIUS) {
+        // Hit!
+        combat.score += 100;
+        combat.kills += 1;
+        combat.streak += 1;
+        playExplosion();
+        // Broadcast hit to the target pilot
+        channelRef.current?.send({
+          type: "broadcast", event: "cesium-hit",
+          payload: { target: wallet, shooter: walletRef.current ?? "unknown" },
+        });
+        viewer.entities.remove(proj.entity);
+        projectiles.splice(i, 1);
+        // Visual flash at hit location
+        const flash = viewer.entities.add({
+          position: pilotPos,
+          point: { pixelSize: 40, color: Cesium.Color.fromCssColorString("#ff8800").withAlpha(0.8) },
+        });
+        setTimeout(() => { try { viewer.entities.remove(flash); } catch { } }, 600);
+      }
+    });
+  }
+}
+
+// ─── Physics — stall / lift / drag / ground effect / auto-level / weather ─────
+function physicsUpdate(game: CesiumGameState, input: FlightInputState, dt: number) {
+  const Cesium = game.Cesium;
+  const p = game.physics;
+  const s = game.scratch;
+  const w = game.weather;
+
+  const stallSpeed = 130;  // km/h — below this, lift starts to fail
+  const minSpeed = 80;
+  const maxSpeed = 1200;
+  const speedRate = 100;
+  const turnRate = Cesium.Math.toRadians(45);
+  const climbRate = 30;
+  const gravity = 9.8;  // m/s²
+  const liftCoeff = 0.00012; // vertical m/s per (km/h)² — tuned so 200km/h sustains flight
+  const maxRoll = Cesium.Math.toRadians(55);
+  const dragCoeff = 0.00004;
+
+  // ── Speed ──
+  if (input.targetSpeed !== undefined) {
+    p.targetSpeed = Math.max(minSpeed, Math.min(maxSpeed, input.targetSpeed));
+  } else {
+    const tDelta = (input.throttle ? 1 : 0) - (input.brake ? 1 : 0);
+    if (tDelta !== 0) p.targetSpeed += tDelta * speedRate * dt;
+    p.targetSpeed = Math.max(minSpeed, Math.min(maxSpeed, p.targetSpeed));
+  }
+  const speedStep = Cesium.Math.clamp(p.targetSpeed - p.currentSpeed, -speedRate * dt, speedRate * dt);
+  p.currentSpeed += speedStep;
+
+  // Drag — slows you proportionally to speed squared
+  const drag = dragCoeff * p.currentSpeed * p.currentSpeed * dt;
+  p.currentSpeed = Math.max(minSpeed, p.currentSpeed - drag);
+
+  // ── Roll ──
+  let rollInput = 0;
+  if (input.rollLeft || input.turnLeft) rollInput -= 1;
+  if (input.rollRight || input.turnRight) rollInput += 1;
+
+  // Turbulence randomly jostles roll
+  if (w.turbulence > 0) rollInput += (Math.random() * 2 - 1) * w.turbulence * 0.03 * dt;
+
+  p.roll += (rollInput * maxRoll - p.roll) * 0.15;
+
+  // ── Heading — roll-induced yaw ──
+  const rollFactor = p.roll / maxRoll;
+  p.heading = Cesium.Math.zeroToTwoPi(p.heading + rollFactor * turnRate * dt);
+
+  // Wind effect on heading (lateral wind pushes plane)
+  const windStrength = Math.sqrt(w.windX * w.windX + w.windY * w.windY);
+  if (windStrength > 0) {
+    p.heading = Cesium.Math.zeroToTwoPi(p.heading + (w.windX * 0.00002 + w.windY * 0.00002) * dt);
+  }
+
+  // ── Stall ──
+  p.stallFactor = Math.max(0, 1 - p.currentSpeed / stallSpeed);
+
+  // ── Vertical velocity ──
+  const prevVert = p.verticalVelocity;
+  let climbInput = 0;
+  if (input.altitudeUp) climbInput += 1;
+  if (input.altitudeDown) climbInput -= 1;
+
+  // Turbulence vertical force
+  if (w.turbulence > 0) climbInput += (Math.random() * 2 - 1) * w.turbulence * 0.02;
+
+  p.verticalVelocity += (climbInput * climbRate - p.verticalVelocity) * 0.1;
+
+  // Gravity minus lift
+  const lift = liftCoeff * p.currentSpeed * p.currentSpeed;
+  const netGravity = gravity - lift;
+  p.verticalVelocity -= netGravity * dt;
+
+  // Stall: lose lift → nose pitches down, rapid sink
+  if (p.stallFactor > 0) {
+    p.verticalVelocity -= p.stallFactor * gravity * 2 * dt;
+  }
+
+  // Ground effect: within 20m of terrain → extra lift
+  const carto0 = Cesium.Cartographic.fromCartesian(game.position);
+  const heightAGL = Math.max(0, carto0.height - game.lastTerrainAlt);
+  if (heightAGL < 20 && heightAGL > 0 && p.currentSpeed > stallSpeed * 0.8) {
+    const geFactor = (20 - heightAGL) / 20 * 0.4;
+    p.verticalVelocity += geFactor * gravity * dt;
+  }
+
+  // Auto-level: if no vertical input and not stalled, gently level off
+  if (!input.altitudeUp && !input.altitudeDown && p.stallFactor < 0.3 && Math.abs(p.verticalVelocity) > 1) {
+    p.verticalVelocity *= (1 - 0.008 * dt * 60);
+  }
+
+  // ── G-force = 1 + deltaV/g ──
+  p.gForce = 1 + (p.verticalVelocity - prevVert) / (gravity * dt);
+  p.lastVertVelocity = prevVert;
+
+  // Pitch (visual)
+  const targetPitch = Cesium.Math.toRadians(30) * climbInput - p.stallFactor * Cesium.Math.toRadians(20);
+  p.pitch += (targetPitch - p.pitch) * 0.08;
+
+  game.hpRoll.heading = p.heading;
+  game.hpRoll.pitch = p.pitch;
+  game.hpRoll.roll = p.roll;
+
+  // ── Position translation ──
+  Cesium.Transforms.headingPitchRollToFixedFrame(
+    game.position, game.hpRoll, Cesium.Ellipsoid.WGS84, undefined, s.transform
+  );
+  const speedMs = (p.currentSpeed / 3.6) * dt;
+  // Cesium local forward axis is +X for HeadingPitchRoll transforms.
+  s.localFwd.x = speedMs; s.localFwd.y = 0; s.localFwd.z = 0;
+  Cesium.Matrix4.multiplyByPoint(s.transform, s.localFwd, s.worldFwd);
+  Cesium.Cartesian3.subtract(s.worldFwd, game.position, s.worldFwd);
+
+  Cesium.Transforms.eastNorthUpToFixedFrame(game.position, Cesium.Ellipsoid.WGS84, s.enu);
+  Cesium.Matrix4.getColumn(s.enu, 2, s.upCol);
+  s.up.x = s.upCol.x; s.up.y = s.upCol.y; s.up.z = s.upCol.z;
+  Cesium.Cartesian3.multiplyByScalar(s.up, p.verticalVelocity * dt, s.vertDelta);
+  Cesium.Cartesian3.add(s.worldFwd, s.vertDelta, s.totalDelta);
+  Cesium.Cartesian3.add(game.position, s.totalDelta, s.newPos);
+
+  const carto = Cesium.Cartographic.fromCartesian(s.newPos);
+  const groundAlt = game.lastTerrainAlt;
+
+  if (carto.height < groundAlt + 2) {
+    // Check for landing vs crash
+    const approachSpeed = p.currentSpeed;
+    const approachPitch = Math.abs(p.pitch);
+    const approachVert = Math.abs(p.verticalVelocity);
+
+    if (approachSpeed < 200 && approachPitch < 0.25 && approachVert < 8) {
+      // Smooth enough — landing!
+      const speedScore = Math.max(0, 100 - (approachSpeed - 100) * 0.5);
+      const pitchScore = Math.max(0, 100 - approachPitch * 200);
+      const sinkScore = Math.max(0, 100 - approachVert * 8);
+      p.landingQuality = Math.round((speedScore + pitchScore + sinkScore) / 3);
+      game.landed = true;
+    } else {
+      game.crashed = true;
+    }
+    return;
+  }
+
+  game.position = Cesium.Cartesian3.clone(s.newPos, game.position);
+  game.positionProperty.setValue(game.position);
+  game.orientationProperty.setValue(Cesium.Transforms.headingPitchRollQuaternion(game.position, game.hpRoll));
+}
+
+// ─── Follow camera ────────────────────────────────────────────────────────────
+function followCamera(game: CesiumGameState) {
+  const { viewer, physics: p, position, hpRoll, cameraMode, camera: cam, Cesium, scratch: s } = game;
+  if (!viewer || !position) return;
+
+  if (cameraMode === "cockpit") {
+    Cesium.Transforms.headingPitchRollToFixedFrame(
+      position,
+      hpRoll,
+      Cesium.Ellipsoid.WGS84,
+      undefined,
+      s.transform,
+    );
+
+    Cesium.Matrix4.multiplyByPoint(s.transform, s.cockpitLocalPos, s.cockpitPos);
+    Cesium.Matrix4.multiplyByPoint(s.transform, s.cockpitLocalLook, s.cockpitLook);
+    Cesium.Cartesian3.subtract(s.cockpitLook, s.cockpitPos, s.cockpitDir);
+    Cesium.Cartesian3.normalize(s.cockpitDir, s.cockpitDir);
+
+    // Use local Y axis as camera up to avoid collinearity with forward vector.
+    Cesium.Matrix4.getColumn(s.transform, 1, s.cockpitUpCol);
+    s.cockpitUp.x = s.cockpitUpCol.x;
+    s.cockpitUp.y = s.cockpitUpCol.y;
+    s.cockpitUp.z = s.cockpitUpCol.z;
+    Cesium.Cartesian3.normalize(s.cockpitUp, s.cockpitUp);
+
+    viewer.camera.setView({
+      destination: s.cockpitPos,
+      orientation: {
+        direction: s.cockpitDir,
+        up: s.cockpitUp,
+      },
+    });
+
+    const params = CAM_PARAMS.cockpit;
+    const baseFOV = Cesium.Math.toRadians(params.baseFOV);
+    const maxFOV = Cesium.Math.toRadians(params.maxFOV);
+    const t = Math.min(p.currentSpeed / 600, 1.0);
+    const targetFOV = baseFOV + (maxFOV - baseFOV) * t * t;
+    cam.fov += (targetFOV - cam.fov) * 0.12;
+    const frustum = viewer.camera.frustum;
+    if (frustum instanceof Cesium.PerspectiveFrustum) frustum.fov = cam.fov;
+
+    cam.lastVehicleHeading = p.heading;
+    return;
+  }
+
+  // ─── Drone camera — auto-orbits around the aircraft ────────────────────────
+  if (cameraMode === "drone") {
+    // Slowly orbit around the plane (0.3 rad/s)
+    cam.heading = Cesium.Math.zeroToTwoPi(cam.heading + 0.3 * 0.016);
+    const params = CAM_PARAMS.drone;
+    const orbitDist = params.dist;
+    const orbitHeight = 60;
+
+    // Place camera in orbit around vehicle position
+    const offsetX = Math.sin(cam.heading) * orbitDist;
+    const offsetZ = Math.cos(cam.heading) * orbitDist;
+    const offsetCartesian = new Cesium.Cartesian3(offsetX, offsetZ, orbitHeight);
+
+    Cesium.Transforms.headingPitchRollToFixedFrame(
+      position, hpRoll, Cesium.Ellipsoid.WGS84, undefined, s.transform,
+    );
+    const camPos = Cesium.Matrix4.multiplyByPoint(s.transform, offsetCartesian, new Cesium.Cartesian3());
+
+    // Look at the plane
+    const lookDir = Cesium.Cartesian3.subtract(position, camPos, new Cesium.Cartesian3());
+    Cesium.Cartesian3.normalize(lookDir, lookDir);
+
+    // Up vector from transform Y axis
+    Cesium.Matrix4.getColumn(s.transform, 2, s.cockpitUpCol);
+    const droneUp = new Cesium.Cartesian3(s.cockpitUpCol.x, s.cockpitUpCol.y, s.cockpitUpCol.z);
+    Cesium.Cartesian3.normalize(droneUp, droneUp);
+
+    viewer.camera.setView({
+      destination: camPos,
+      orientation: { direction: lookDir, up: droneUp },
+    });
+
+    // FOV
+    const baseFOV = Cesium.Math.toRadians(params.baseFOV);
+    const maxFOV = Cesium.Math.toRadians(params.maxFOV);
+    const t = Math.min(p.currentSpeed / 600, 1.0);
+    const targetFOV = baseFOV + (maxFOV - baseFOV) * t * t;
+    cam.fov += (targetFOV - cam.fov) * 0.05;
+    const frustum = viewer.camera.frustum;
+    if (frustum instanceof Cesium.PerspectiveFrustum) frustum.fov = cam.fov;
+
+    cam.lastVehicleHeading = p.heading;
+    return;
+  }
+
+  const params = CAM_PARAMS[cameraMode];
+  const targetHeading = Cesium.Math.zeroToTwoPi(p.heading + Math.PI);
+  const targetPitch = Cesium.Math.toRadians(params.basePitch) + p.pitch * 0.3;
+  cam.heading = lerpAngle(cam.heading, targetHeading, params.lerpK);
+  cam.pitch = cam.pitch + (targetPitch - cam.pitch) * params.lerpK;
+  const hdgDelta = angularDelta(p.heading, cam.lastVehicleHeading);
+  const targetRoll = -hdgDelta * params.bankFactor * 15 + hpRoll.roll * params.bankFactor * 0.5;
+  cam.roll = cam.roll + (targetRoll - cam.roll) * 0.08;
+  cam.hpRange.heading = cam.heading;
+  cam.hpRange.pitch = cam.pitch;
+  cam.hpRange.range = params.dist;
+  viewer.camera.lookAt(position, cam.hpRange);
+  const rollDiff = cam.roll - cam.appliedRoll;
+  if (Math.abs(rollDiff) > 0.001) {
+    try { viewer.camera.twistRight(rollDiff); } catch { /* ignore */ }
+    cam.appliedRoll = cam.roll;
+  }
+  const baseFOV = Cesium.Math.toRadians(params.baseFOV);
+  const maxFOV = Cesium.Math.toRadians(params.maxFOV);
+  const t = Math.min(p.currentSpeed / 600, 1.0);
+  const targetFOV = baseFOV + (maxFOV - baseFOV) * t * t;
+  cam.fov += (targetFOV - cam.fov) * 0.05;
+  const frustum = viewer.camera.frustum;
+  if (frustum instanceof Cesium.PerspectiveFrustum) frustum.fov = cam.fov;
+  cam.lastVehicleHeading = p.heading;
+}