solanapolis 1.0.0

package/src/components/CityScene.tsx

@@ -0,0 +1,1289 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { OrbitControls as OrbitControlsImpl } from "three-stdlib";
+import * as THREE from "three";
+import CityGrid from "./CityGrid";
+import SceneLighting from "./SceneLighting";
+import SelectionBeam from "./SelectionBeam";
+import WalletPanel from "./WalletPanel";
+import AuthPanel from "./AuthPanel";
+import WalletSearch from "./WalletSearch";
+import { WalletBuilding, PlacedWallet } from "@/types/wallet";
+import { getBuildingDimensions, getWalletWorldPosition } from "@/lib/building-math";
+import WindowTooltip, { WindowHoverInfo } from "./WindowTooltip";
+import InstancedCars, { TrackedCarInfo } from "./InstancedCars";
+import SwapPanel from "./SwapPanel";
+import { useSwapEvents } from "@/lib/swap-events";
+import HowItWorksModal from "./HowItWorksModal";
+import { useAuth } from "@/context/AuthContext";
+import { lazy, Suspense, useMemo } from "react";
+import PlayerCar from "./PlayerCar";
+import PlayerPlane from "./PlayerPlane";
+import { buildCollisionMap } from "@/lib/collision-map";
+import ActivityFeed from "./ActivityFeed";
+import NetworkStats from "./NetworkStats";
+import SwapParticles from "./SwapParticles";
+import NewBuildingSpotlight from "./NewBuildingSpotlight";
+import InstancedCityPlanes from "./InstancedCityPlanes";
+import InstancedResidentCars from "./InstancedResidentCars";
+import CitySlotsBadge from "./CitySlotsBadge";
+import { getSlotCounts } from "@/lib/city-slots";
+import ProjectileRenderer from "./ProjectileRenderer";
+import GameHUD from "./GameHUD";
+import { ProjectileManager } from "@/lib/projectile-system";
+import { MultiplayerManager } from "@/lib/multiplayer-manager";
+import LeaderboardPanel from "./LeaderboardPanel";
+import GameChat from "./GameChat";
+import BeachScene from "./BeachScene";
+import { PlaneEngine, initAudio, playClick } from "@/lib/sound-engine";
+import ParcelReward from "./ParcelReward";
+import ParcelChallengeBanner from "./ParcelChallengeBanner";
+import TreasureGate from "./TreasureGate";
+import CockpitHUD from "./CockpitHUD";
+import RealPlayerTags from "./RealPlayerTags";
+import CityLandmarks from "./CityLandmarks";
+import AITownNPCs from "./AITownNPCs";
+import DubaiDistrict from "./DubaiDistrict";
+
+const CitizenCardModal = lazy(() => import("./CitizenCardModal"));
+const CesiumFlight = lazy(() => import("./CesiumFlight"));
+const CesiumGlobe = lazy(() => import("./CesiumGlobe"));
+
+const _trackTarget = new THREE.Vector3();
+const _prevTarget = new THREE.Vector3();
+const _delta = new THREE.Vector3();
+const _desiredCamPos = new THREE.Vector3();
+
+// Chase camera constants
+const CHASE_DISTANCE = 18;
+const CHASE_HEIGHT = 10;
+const CHASE_LOOK_AHEAD = 8;
+const CHASE_CAM_LERP = 0.06;
+
+// Flight camera constants
+const FLIGHT_DISTANCE = 25;
+const FLIGHT_HEIGHT = 8;
+const FLIGHT_LOOK_AHEAD = 12;
+const FLIGHT_CAM_LERP = 0.04;
+
+
+
+function CameraControls({
+  targetPosition,
+  trackingRef,
+  isTracking,
+  playerCarMode,
+  flyMode,
+  headingRef,
+}: {
+  targetPosition: [number, number, number] | null;
+  trackingRef: React.MutableRefObject<[number, number, number] | null>;
+  isTracking: boolean;
+  playerCarMode: boolean;
+  flyMode: boolean;
+  headingRef: React.MutableRefObject<number>;
+}) {
+  const controlsRef = useRef<OrbitControlsImpl>(null);
+
+  useEffect(() => {
+    const controls = controlsRef.current;
+    if (!controls) return;
+
+    if (flyMode || playerCarMode) {
+      // Disable all user camera manipulation in chase-cam or flight-cam mode
+      controls.enableRotate = false;
+      controls.enablePan = false;
+      controls.enableZoom = false;
+      return;
+    }
+
+    if (isTracking) {
+      // Orbit mode for AI car tracking — useFrame handles position
+      controls.enableRotate = true;
+      controls.enablePan = false;
+      controls.enableZoom = true;
+      controls.mouseButtons = {
+        LEFT: THREE.MOUSE.ROTATE,
+        MIDDLE: THREE.MOUSE.DOLLY,
+        RIGHT: THREE.MOUSE.PAN,
+      };
+      return;
+    }
+
+    controls.enableZoom = true;
+
+    if (targetPosition) {
+      const target = new THREE.Vector3(...targetPosition);
+      const start = controls.target.clone();
+      const startTime = performance.now();
+      const duration = 400;
+
+      function animate() {
+        const elapsed = performance.now() - startTime;
+        const t = Math.min(elapsed / duration, 1);
+        const ease = 1 - Math.pow(1 - t, 3);
+
+        controls!.target.lerpVectors(start, target, ease);
+        controls!.update();
+
+        if (t < 1) {
+          requestAnimationFrame(animate);
+        }
+      }
+      animate();
+
+      controls.enableRotate = true;
+      controls.enablePan = false;
+      controls.mouseButtons = {
+        LEFT: THREE.MOUSE.ROTATE,
+        MIDDLE: THREE.MOUSE.DOLLY,
+        RIGHT: THREE.MOUSE.PAN,
+      };
+    } else {
+      controls.enableRotate = true;
+      controls.enablePan = true;
+      controls.mouseButtons = {
+        LEFT: THREE.MOUSE.PAN,
+        MIDDLE: THREE.MOUSE.DOLLY,
+        RIGHT: THREE.MOUSE.ROTATE,
+      };
+    }
+  }, [targetPosition, isTracking, playerCarMode, flyMode]);
+
+  useFrame(() => {
+    const controls = controlsRef.current;
+    if (!controls || !isTracking || !trackingRef.current) return;
+
+    const pos = trackingRef.current;
+
+    if (flyMode) {
+      // Flight camera: behind & slightly above the plane
+      const heading = headingRef.current;
+      _desiredCamPos.set(
+        pos[0] - Math.sin(heading) * FLIGHT_DISTANCE,
+        pos[1] + FLIGHT_HEIGHT,
+        pos[2] - Math.cos(heading) * FLIGHT_DISTANCE,
+      );
+      controls.object.position.lerp(_desiredCamPos, FLIGHT_CAM_LERP);
+
+      _trackTarget.set(
+        pos[0] + Math.sin(heading) * FLIGHT_LOOK_AHEAD,
+        pos[1],
+        pos[2] + Math.cos(heading) * FLIGHT_LOOK_AHEAD,
+      );
+      controls.target.lerp(_trackTarget, FLIGHT_CAM_LERP);
+      controls.update();
+      return;
+    }
+
+    if (playerCarMode) {
+      // Chase camera: position behind & above the car, look ahead of it
+      const heading = headingRef.current;
+      _desiredCamPos.set(
+        pos[0] - Math.sin(heading) * CHASE_DISTANCE,
+        pos[1] + CHASE_HEIGHT,
+        pos[2] - Math.cos(heading) * CHASE_DISTANCE,
+      );
+      controls.object.position.lerp(_desiredCamPos, CHASE_CAM_LERP);
+
+      // Look ahead of the car
+      _trackTarget.set(
+        pos[0] + Math.sin(heading) * CHASE_LOOK_AHEAD,
+        pos[1] + 1,
+        pos[2] + Math.cos(heading) * CHASE_LOOK_AHEAD,
+      );
+      controls.target.lerp(_trackTarget, CHASE_CAM_LERP);
+      controls.update();
+      return;
+    }
+
+    // AI car tracking — translate both target and camera by the same delta
+    _trackTarget.set(pos[0], pos[1], pos[2]);
+    _prevTarget.copy(controls.target);
+    controls.target.lerp(_trackTarget, 0.08);
+    _delta.subVectors(controls.target, _prevTarget);
+    controls.object.position.add(_delta);
+    controls.update();
+  });
+
+  return (
+    <OrbitControls
+      ref={controlsRef}
+      makeDefault
+      minDistance={10}
+      maxDistance={500}
+      maxPolarAngle={Math.PI / 2.1}
+      enableDamping
+      dampingFactor={0.05}
+      enableRotate={false}
+      enablePan={true}
+      panSpeed={1.5}
+      screenSpacePanning={false}
+    />
+  );
+}
+
+const TIME_PRESETS = [
+  { id: "sunrise", label: "Sunrise", time: 0.0 },
+  { id: "day", label: "Day", time: 0.25 },
+  { id: "sunset", label: "Sunset", time: 0.5 },
+  { id: "night", label: "Night", time: 0.75 },
+] as const;
+
+export default function CityScene() {
+  const [selectedWallet, setSelectedWallet] = useState<WalletBuilding | null>(null);
+  const [selectedPosition, setSelectedPosition] = useState<[number, number, number] | null>(null);
+  const [wallets, setWallets] = useState<PlacedWallet[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [windowHover, setWindowHover] = useState<WindowHoverInfo | null>(null);
+  const [showCard, setShowCard] = useState(false);
+  const [buildingToast, setBuildingToast] = useState<{ message: string; type: 'loading' | 'success' | 'error' } | null>(null);
+  const { profile, phantomAddress, phantomConnected, openPhantomModal } = useAuth();
+  const activeWalletAddress = phantomAddress ?? profile?.wallet_address ?? null;
+  const walletConnected = phantomConnected || !!activeWalletAddress;
+
+  // Treasure gate — show the play-to-win game before entering the city
+  const [treasureGatePlayed, setTreasureGatePlayed] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return !!sessionStorage.getItem('treasure-gate-played');
+    }
+    return false;
+  });
+  const showTreasureGate = !!activeWalletAddress && !treasureGatePlayed && !loading;
+
+  function handleTreasureGateComplete() {
+    sessionStorage.setItem('treasure-gate-played', '1');
+    setTreasureGatePlayed(true);
+    // Auto-claim building after entering the city from treasure gate
+    // handleClaimBuilding has its own guards, so always attempt
+    setTimeout(() => {
+      if (activeWalletAddress) {
+        handleClaimBuilding();
+      }
+    }, 800);
+  }
+
+  // Day/night cycle state (refs to avoid per-frame re-renders)
+  // Start at sunset (0.50) for dramatic first impression — blazing orange sky
+  const timeRef = useRef(0.50);
+  const autoModeRef = useRef(true);
+  const [activePreset, setActivePreset] = useState("cycle");
+
+  // Swap events — mutable ref queue, no re-renders
+  const swapQueueRef = useSwapEvents(wallets);
+
+  // Particle burst queue for swap effects
+  const swapBurstRef = useRef<Array<{ x: number; y: number; z: number; color: string }>>([]);
+
+  // Tracked car state — trackedCar controls the panel UI,
+  // cameraFollowSlot controls which car the camera follows (persists after panel close)
+  const [trackedCar, setTrackedCar] = useState<TrackedCarInfo | null>(null);
+  const trackedCarPosRef = useRef<[number, number, number] | null>(null);
+  const [cameraFollowSlot, setCameraFollowSlot] = useState<number | null>(null);
+
+  // Player car mode
+  const [carMode, setCarMode] = useState(false);
+  const playerCarPosRef = useRef<[number, number, number] | null>(null);
+  const playerCarHeadingRef = useRef(0);
+  const carSpeedRef = useRef(0);
+
+  // In-city flight mode (Three.js)
+  const [flyMode, setFlyMode] = useState(false);
+  // World globe mode (Cesium globe)
+  const [worldFlyMode, setWorldFlyMode] = useState(false);
+  // Cesium real-world flight sim (separate from in-city fly)
+  const [cesiumFlightMode, setCesiumFlightMode] = useState(false);
+  const planePosRef = useRef<[number, number, number] | null>(null);
+  const planeHeadingRef = useRef(0);
+  const planeEngineRef = useRef<PlaneEngine | null>(null);
+
+  // Plane engine sound lifecycle
+  useEffect(() => {
+    if (flyMode) {
+      initAudio();
+      const eng = new PlaneEngine();
+      eng.start();
+      eng.setThrottle(0.5);
+      planeEngineRef.current = eng;
+    } else {
+      planeEngineRef.current?.stop();
+      planeEngineRef.current = null;
+    }
+    return () => {
+      planeEngineRef.current?.stop();
+      planeEngineRef.current = null;
+    };
+  }, [flyMode]);
+
+  // New building spotlights — track recently added wallet addresses
+  const [newSpotlights, setNewSpotlights] = useState<Array<{ address: string; position: [number, number, number]; height: number; id: number }>>([]);
+  const spotlightIdRef = useRef(0);
+
+  const collisionMap = useMemo(
+    () => (carMode ? buildCollisionMap(wallets) : null),
+    [wallets, carMode],
+  );
+
+  // Projectile system + position tracking for HUD
+  const [projectileManager] = useState(() => new ProjectileManager());
+  const planePositionsRef = useRef<Array<{ x: number; y: number; z: number }>>([]);
+  const residentCarPositionsRef = useRef<Array<{ x: number; y: number; z: number }>>([]);
+  const planePitchRef = useRef(0);
+  const planeSpeedRef = useRef(0);
+
+  // Building center positions for minimap (computed once when wallets change)
+  const buildingPositions = useMemo(() => {
+    return wallets.map(w => {
+      const dims = getBuildingDimensions(w);
+      const pos = getWalletWorldPosition(w, dims);
+      return { x: pos[0], z: pos[2] };
+    });
+  }, [wallets]);
+
+  // Active combat mode flag
+  const combatActive = carMode || flyMode;
+
+  // Multiplayer manager — handles realtime sync and session persistence
+  const [mpManager] = useState(() => new MultiplayerManager());
+
+  // Connect multiplayer when wallet is available
+  useEffect(() => {
+    if (activeWalletAddress) {
+      mpManager.connect(activeWalletAddress);
+    }
+    return () => { mpManager.disconnect(); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeWalletAddress]);
+
+  // Keep multiplayer position/score getters up to date
+  useEffect(() => {
+    mpManager.getPosition = () => {
+      const pos = carMode ? playerCarPosRef.current : planePosRef.current;
+      if (!pos) return null;
+      return {
+        x: pos[0], y: pos[1], z: pos[2],
+        heading: carMode ? playerCarHeadingRef.current : planeHeadingRef.current,
+      };
+    };
+    mpManager.getScore = () => projectileManager.score;
+  }, [carMode, mpManager, projectileManager]);
+
+  const prevWalletAddresses = useRef<Set<string>>(new Set());
+
+  const fetchWallets = useCallback(async (): Promise<PlacedWallet[]> => {
+    try {
+      const res = await fetch(`/api/wallets?t=${Date.now()}`);
+      if (!res.ok) return [];
+      const data = await res.json();
+      const fresh: PlacedWallet[] = data.wallets ?? [];
+
+      // Detect newly added wallets and add spotlights
+      const prevAddrs = prevWalletAddresses.current;
+      for (const w of fresh) {
+        if (!prevAddrs.has(w.address) && prevAddrs.size > 0) {
+          const dims = getBuildingDimensions(w);
+          const pos = getWalletWorldPosition(w, dims);
+          const id = ++spotlightIdRef.current;
+          setNewSpotlights(prev => [...prev, { address: w.address, position: pos, height: dims.height, id }]);
+          // Auto-remove after 8 seconds
+          setTimeout(() => {
+            setNewSpotlights(prev => prev.filter(s => s.id !== id));
+          }, 8000);
+        }
+      }
+      prevWalletAddresses.current = new Set(fresh.map(w => w.address));
+
+      setWallets(fresh);
+      return fresh;
+    } catch {
+      return [];
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Fetch placed wallets on mount
+  useEffect(() => {
+    fetchWallets();
+  }, [fetchWallets]);
+
+  // Check if wallet needs building when Phantom connects
+  const [buildingInProgress, setBuildingInProgress] = useState(false);
+  const [claimArrival, setClaimArrival] = useState<{ address: string; phase: 'driving' | 'reveal' } | null>(null);
+  const [hasBuilding, setHasBuilding] = useState(false);
+  const [onChainVerify, setOnChainVerify] = useState<{
+    phase: 'hashing' | 'verifying' | 'confirmed' | 'failed';
+    hash: string;
+    blockSlot: number;
+    steps: { label: string; done: boolean }[];
+  } | null>(null);
+
+  useEffect(() => {
+    if (!activeWalletAddress) {
+      setHasBuilding(false);
+      return;
+    }
+    const exists = wallets.find(w => w.address === activeWalletAddress);
+    setHasBuilding(!!exists);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeWalletAddress, wallets]);
+
+  /** Generate a fake tx hash from wallet address for visual effect */
+  function genTxHash(addr: string): string {
+    let h = 0xdeadbeef;
+    for (let i = 0; i < addr.length; i++) h = Math.imul(h ^ addr.charCodeAt(i), 2654435761);
+    const hex = Array.from({ length: 64 }, (_, i) => ((h >> (i % 28)) & 0xf).toString(16)).join('');
+    return hex;
+  }
+
+  /** User clicks "Claim My Building" — on-chain verify animation + car arrival */
+  async function handleClaimBuilding() {
+    if (!activeWalletAddress || buildingInProgress) return;
+    setBuildingInProgress(true);
+
+    const txHash = genTxHash(activeWalletAddress);
+    const blockSlot = 280_000_000 + Math.floor(Math.random() * 1_000_000);
+    const steps = [
+      { label: 'Reading wallet history', done: false },
+      { label: 'Hashing on-chain data', done: false },
+      { label: 'Verifying block inclusion', done: false },
+      { label: 'Confirming parcel assignment', done: false },
+    ];
+
+    // Phase 1: On-chain verification animation
+    setOnChainVerify({ phase: 'hashing', hash: txHash, blockSlot, steps });
+
+    // Animate steps one by one
+    for (let i = 0; i < steps.length; i++) {
+      await new Promise(r => setTimeout(r, 800 + Math.random() * 400));
+      setOnChainVerify(prev => {
+        if (!prev) return prev;
+        const updated = prev.steps.map((s, j) => j <= i ? { ...s, done: true } : s);
+        return { ...prev, steps: updated, phase: i < 2 ? 'hashing' : 'verifying' };
+      });
+    }
+
+    // Phase 2: Actually fetch wallet / create building
+    try {
+      const res = await fetch(`/api/wallet/${activeWalletAddress}`);
+      if (res.ok) {
+        const data = await res.json();
+        setBuildingToast({ message: data.isNew ? 'Building your parcel...' : 'Building found!', type: 'loading' });
+
+        // Show confirmed
+        setOnChainVerify(prev => prev ? { ...prev, phase: 'confirmed' } : prev);
+        await new Promise(r => setTimeout(r, 1200));
+        setOnChainVerify(null);
+
+        const freshWallets = await fetchWallets();
+        const placed = freshWallets.find((w: PlacedWallet) => w.address === activeWalletAddress);
+        if (placed) {
+          // Start the car arrival animation
+          setClaimArrival({ address: activeWalletAddress, phase: 'driving' });
+          const dims = getBuildingDimensions(placed);
+          const pos = getWalletWorldPosition(placed, dims);
+          handleSelectWallet(placed, pos);
+          setBuildingToast({ message: 'Arriving at your building...', type: 'loading' });
+
+          // Car drives in (3s)
+          setTimeout(() => {
+            setClaimArrival(prev => prev ? { ...prev, phase: 'reveal' } : null);
+            setBuildingToast({ message: 'Welcome to Solanapolis, citizen!', type: 'success' });
+          }, 3000);
+
+          // Show ID card after reveal (5s total)
+          setTimeout(() => {
+            setClaimArrival(null);
+            setBuildingToast(null);
+            setShowCard(true);
+          }, 5500);
+        } else {
+          setBuildingToast({ message: 'Building created!', type: 'success' });
+          setTimeout(() => setBuildingToast(null), 4000);
+        }
+      } else {
+        setOnChainVerify(prev => prev ? { ...prev, phase: 'failed' } : prev);
+        await new Promise(r => setTimeout(r, 1500));
+        setOnChainVerify(null);
+        const err = await res.json().catch(() => ({ error: 'Failed' }));
+        setBuildingToast({ message: err.error || 'Could not create building', type: 'error' });
+        setTimeout(() => setBuildingToast(null), 5000);
+      }
+    } catch {
+      setOnChainVerify(prev => prev ? { ...prev, phase: 'failed' } : prev);
+      await new Promise(r => setTimeout(r, 1500));
+      setOnChainVerify(null);
+      setBuildingToast({ message: 'Network error — try refreshing', type: 'error' });
+      setTimeout(() => setBuildingToast(null), 5000);
+    } finally {
+      setBuildingInProgress(false);
+    }
+  }
+
+
+
+  function handleTimePreset(id: string, time: number) {
+    timeRef.current = time;
+    autoModeRef.current = false;
+    setActivePreset(id);
+  }
+
+  function handleCycle() {
+    autoModeRef.current = true;
+    setActivePreset("cycle");
+  }
+
+
+  function handleSelectWallet(wallet: WalletBuilding, position: [number, number, number]) {
+    setCarMode(false);
+    setFlyMode(false);
+    setWorldFlyMode(false);
+    playerCarPosRef.current = null;
+    planePosRef.current = null;
+    setSelectedWallet(wallet);
+    setSelectedPosition(position);
+    setTrackedCar(null);
+    setCameraFollowSlot(null);
+    trackedCarPosRef.current = null;
+  }
+
+  function handleDeselect() {
+    setSelectedWallet(null);
+    setSelectedPosition(null);
+    setTrackedCar(null);
+    setCameraFollowSlot(null);
+    trackedCarPosRef.current = null;
+    setFlyMode(false);
+    setWorldFlyMode(false);
+    planePosRef.current = null;
+  }
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        if (cesiumFlightMode) {
+          setCesiumFlightMode(false);
+          return;
+        }
+        if (worldFlyMode) {
+          setWorldFlyMode(false);
+          return;
+        }
+        if (flyMode) {
+          setFlyMode(false);
+          planePosRef.current = null;
+          return;
+        }
+        if (carMode) {
+          setCarMode(false);
+          playerCarPosRef.current = null;
+          return;
+        }
+        handleDeselect();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [carMode, flyMode, worldFlyMode, cesiumFlightMode]);
+
+  function handleClickAddress(address: string) {
+    const wallet = wallets.find(w => w.address === address);
+    if (!wallet) return;
+    const dims = getBuildingDimensions(wallet);
+    const pos = getWalletWorldPosition(wallet, dims);
+    handleSelectWallet(wallet, pos);
+  }
+
+  function handleClickCar(info: TrackedCarInfo) {
+    setCarMode(false);
+    setFlyMode(false);
+    setWorldFlyMode(false);
+    playerCarPosRef.current = null;
+    planePosRef.current = null;
+    setTrackedCar(info);
+    setCameraFollowSlot(info.slotIndex);
+    setSelectedWallet(null);
+    setSelectedPosition(null);
+    setWindowHover(null);
+  }
+
+  function handleCarDied(slotIndex: number) {
+    setTrackedCar(prev => prev?.slotIndex === slotIndex ? null : prev);
+    setCameraFollowSlot(prev => prev === slotIndex ? null : prev);
+    trackedCarPosRef.current = null;
+  }
+
+  function endCombatSession() {
+    mpManager.endSession(
+      projectileManager.score,
+      projectileManager.hits.filter(h => h.targetType === "plane").length,
+      projectileManager.hits.filter(h => h.targetType === "car").length,
+      projectileManager.projectiles.length,
+    );
+    projectileManager.reset();
+  }
+
+  return (
+    <div className="relative w-full h-screen">
+      {windowHover && <WindowTooltip {...windowHover} />}
+
+      {/* Top left — branding */}
+      <div className="absolute top-3 left-3 sm:top-5 sm:left-5 z-10 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-2xl px-3.5 py-2.5 sm:px-5 sm:py-3.5">
+        <div className="flex items-center gap-2.5">
+          <img src="/helius-icon.svg" alt="Helius" className="w-6 h-6 sm:w-7 sm:h-7" />
+          <div>
+            <h1 className="text-lg sm:text-xl font-bold tracking-tight leading-tight" style={{ color: "#E35930" }}>SOLANApolis</h1>
+            <p className="text-[9px] text-white/30 tracking-wider leading-none hidden sm:block">powered by Helius on Solana</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 mt-0.5">
+          <CitySlotsBadge counts={getSlotCounts(wallets.length)} loading={loading} />
+          <HowItWorksModal />
+          {(() => {
+            const myAddr = profile?.wallet_address || activeWalletAddress;
+            const myWallet = myAddr
+              ? wallets.find((w) => w.address === myAddr && (!w.ingestionStatus || w.ingestionStatus === "complete"))
+              : null;
+            if (!myWallet) return null;
+            return (
+              <>
+                <button
+                  onClick={() => {
+                    const dims = getBuildingDimensions(myWallet as PlacedWallet);
+                    const pos = getWalletWorldPosition(myWallet as PlacedWallet, dims);
+                    handleSelectWallet(myWallet, pos);
+                  }}
+                  className="px-2 py-0.5 bg-purple-500/15 hover:bg-purple-500/25 border border-purple-400/20 rounded-lg text-[10px] font-medium text-purple-300 transition-colors cursor-pointer"
+                >
+                  My Building
+                </button>
+                <button
+                  onClick={() => setShowCard(true)}
+                  className="px-2 py-0.5 bg-[#E35930]/15 hover:bg-[#E35930]/25 border border-[#E35930]/20 rounded-lg text-[10px] font-medium text-[#E35930] transition-colors cursor-pointer"
+                >
+                  ID Card
+                </button>
+              </>
+            );
+          })()}
+        </div>
+      </div>
+
+      {/* Building creation toast */}
+      {buildingToast && (
+        <div className="fixed top-28 left-1/2 -translate-x-1/2 z-40 animate-[fadeSlideDown_0.4s_ease-out]">
+          <div className={`flex items-center gap-3 px-5 py-3 rounded-2xl backdrop-blur-2xl border shadow-xl text-sm font-medium ${buildingToast.type === 'loading'
+            ? 'bg-purple-900/80 border-purple-500/30 text-purple-200 shadow-purple-900/30'
+            : buildingToast.type === 'success'
+              ? 'bg-emerald-900/80 border-emerald-500/30 text-emerald-200 shadow-emerald-900/30'
+              : 'bg-red-900/80 border-red-500/30 text-red-200 shadow-red-900/30'
+            }`}>
+            {buildingToast.type === 'loading' && (
+              <div className="w-4 h-4 border-2 border-purple-400/30 border-t-purple-300 rounded-full animate-spin" />
+            )}
+            <span>{buildingToast.message}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Claim My Building — persistent button when wallet connected but no building */}
+      {walletConnected && activeWalletAddress && !hasBuilding && !claimArrival && (
+        <div className="fixed bottom-24 left-1/2 -translate-x-1/2 z-40 animate-[fadeSlideUp_0.5s_ease-out]">
+          <button
+            onClick={handleClaimBuilding}
+            disabled={buildingInProgress}
+            className="group relative flex items-center gap-3 px-6 py-3.5 rounded-2xl text-sm font-bold text-white transition-all cursor-pointer active:scale-[0.97] disabled:opacity-70 disabled:cursor-wait"
+            style={{
+              background: 'linear-gradient(135deg, #E35930 0%, #c94420 50%, #E35930 100%)',
+              backgroundSize: '200% 200%',
+              animation: buildingInProgress ? 'none' : 'claimShimmer 3s ease infinite',
+              boxShadow: '0 0 30px rgba(227,89,48,0.4), 0 0 60px rgba(227,89,48,0.15)',
+            }}
+          >
+            {/* Pulsing glow ring */}
+            <div className="absolute -inset-1 rounded-2xl opacity-60 blur-md" style={{ background: 'linear-gradient(135deg, #E35930, #8b5cf6)' }} />
+            <div className="relative flex items-center gap-3">
+              {buildingInProgress ? (
+                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+              ) : (
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M3 21h18" /><path d="M5 21V7l8-4v18" /><path d="M19 21V11l-6-4" />
+                  <path d="M9 9v.01" /><path d="M9 12v.01" /><path d="M9 15v.01" /><path d="M9 18v.01" />
+                </svg>
+              )}
+              <span className="text-base tracking-tight">
+                {buildingInProgress ? 'Building...' : 'Claim My Building'}
+              </span>
+            </div>
+          </button>
+          <p className="text-center text-[10px] text-white/30 mt-2">
+            Your wallet shapes a unique skyscraper in the city
+          </p>
+        </div>
+      )}
+
+      {/* On-chain verification overlay */}
+      {onChainVerify && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 backdrop-blur-sm">
+          <div className="relative w-[380px] max-w-[90vw] bg-gradient-to-b from-gray-900/95 to-black/95 border border-white/10 rounded-3xl p-6 shadow-2xl overflow-hidden">
+            {/* Scanning line animation */}
+            <div className="absolute inset-0 overflow-hidden rounded-3xl pointer-events-none">
+              <div
+                className="absolute left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#E35930] to-transparent"
+                style={{ animation: 'scanLine 2s ease-in-out infinite', top: '0%' }}
+              />
+            </div>
+
+            {/* Header */}
+            <div className="flex items-center gap-3 mb-5">
+              <div className={`w-10 h-10 rounded-xl flex items-center justify-center text-lg ${onChainVerify.phase === 'confirmed'
+                ? 'bg-emerald-500/20'
+                : onChainVerify.phase === 'failed'
+                  ? 'bg-red-500/20'
+                  : 'bg-[#E35930]/20'
+                }`}>
+                {onChainVerify.phase === 'confirmed' ? '✓' : onChainVerify.phase === 'failed' ? '✕' : '⛓'}
+              </div>
+              <div>
+                <h3 className="text-sm font-bold text-white tracking-tight">
+                  {onChainVerify.phase === 'confirmed'
+                    ? 'Verified on Solana'
+                    : onChainVerify.phase === 'failed'
+                      ? 'Verification Failed'
+                      : 'Verifying On-Chain...'}
+                </h3>
+                <p className="text-[10px] text-white/30 font-mono">
+                  Block #{onChainVerify.blockSlot.toLocaleString()}
+                </p>
+              </div>
+            </div>
+
+            {/* Transaction hash */}
+            <div className="bg-black/40 rounded-xl px-3 py-2 mb-4 border border-white/[0.06]">
+              <p className="text-[8px] uppercase tracking-widest text-white/20 mb-1">TX HASH</p>
+              <p className="text-[10px] font-mono text-[#E35930]/70 break-all leading-relaxed">
+                {onChainVerify.hash.slice(0, 32)}...
+              </p>
+            </div>
+
+            {/* Verification steps */}
+            <div className="space-y-2.5 mb-4">
+              {onChainVerify.steps.map((step, i) => (
+                <div key={i} className="flex items-center gap-3">
+                  <div className={`w-5 h-5 rounded-full flex items-center justify-center shrink-0 transition-all duration-500 ${step.done
+                    ? 'bg-emerald-500/20 text-emerald-400'
+                    : onChainVerify.steps[i - 1]?.done || i === 0
+                      ? 'bg-[#E35930]/20 text-[#E35930]'
+                      : 'bg-white/5 text-white/15'
+                    }`}>
+                    {step.done ? (
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M20 6L9 17l-5-5" />
+                      </svg>
+                    ) : (onChainVerify.steps[i - 1]?.done || i === 0) && !step.done ? (
+                      <div className="w-2.5 h-2.5 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                    ) : (
+                      <div className="w-1.5 h-1.5 rounded-full bg-current opacity-30" />
+                    )}
+                  </div>
+                  <span className={`text-xs transition-all duration-500 ${step.done ? 'text-white/70' : 'text-white/25'
+                    }`}>
+                    {step.label}
+                  </span>
+                  {step.done && (
+                    <span className="ml-auto text-[8px] font-mono text-emerald-400/50">
+                      {(Math.random() * 0.4 + 0.1).toFixed(3)}s
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+
+            {/* Result bar */}
+            {onChainVerify.phase === 'confirmed' && (
+              <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-xl px-4 py-3 text-center animate-[fadeSlideUp_0.5s_ease-out]">
+                <p className="text-xs font-bold text-emerald-300">Parcel Claimed Successfully</p>
+                <p className="text-[9px] text-emerald-400/40 mt-0.5">Your building is being generated on-chain</p>
+              </div>
+            )}
+            {onChainVerify.phase === 'failed' && (
+              <div className="bg-red-500/10 border border-red-500/20 rounded-xl px-4 py-3 text-center animate-[fadeSlideUp_0.5s_ease-out]">
+                <p className="text-xs font-bold text-red-300">Verification Failed</p>
+                <p className="text-[9px] text-red-400/40 mt-0.5">Please try again</p>
+              </div>
+            )}
+
+            {/* Progress bar */}
+            {(onChainVerify.phase === 'hashing' || onChainVerify.phase === 'verifying') && (
+              <div className="h-1 rounded-full bg-white/5 overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-all duration-700 ease-out"
+                  style={{
+                    width: `${(onChainVerify.steps.filter(s => s.done).length / onChainVerify.steps.length) * 100}%`,
+                    background: 'linear-gradient(90deg, #E35930, #8b5cf6)',
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Car arrival cinematic overlay */}
+      {claimArrival && (
+        <div className="fixed inset-0 z-50 pointer-events-none">
+          {/* Cinematic letterbox bars */}
+          <div className="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-black/80 to-transparent" />
+          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black/80 to-transparent" />
+
+          {/* Status text */}
+          <div className="absolute bottom-20 left-1/2 -translate-x-1/2 text-center">
+            <p className={`text-sm font-bold tracking-wider uppercase transition-all duration-1000 ${claimArrival.phase === 'driving'
+              ? 'text-[#E35930] animate-pulse'
+              : 'text-white animate-[fadeSlideUp_0.5s_ease-out]'
+              }`}>
+              {claimArrival.phase === 'driving' ? 'Arriving at your building...' : 'Welcome to Solanapolis'}
+            </p>
+            <p className="font-mono text-xs text-white/30 mt-1">
+              {claimArrival.address.slice(0, 6)}...{claimArrival.address.slice(-4)}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Citizen ID Card modal */}
+      {showCard && (() => {
+        const myAddr = profile?.wallet_address || activeWalletAddress;
+        const myWallet = myAddr ? wallets.find((w) => w.address === myAddr) : null;
+        return myWallet ? (
+          <Suspense fallback={null}>
+            <CitizenCardModal
+              wallet={myWallet}
+              identityName={
+                profile?.x_username
+                  ? `@${profile.x_username}`
+                  : myWallet.identityName || null
+              }
+              onClose={() => setShowCard(false)}
+            />
+          </Suspense>
+        ) : null;
+      })()}
+
+      {/* Top center — search */}
+      <div className="absolute top-[4.5rem] left-3 right-3 sm:top-5 sm:left-1/2 sm:right-auto sm:-translate-x-1/2 z-10">
+        <WalletSearch
+          wallets={wallets}
+          onSelect={handleSelectWallet}
+          onRefetch={fetchWallets}
+        />
+      </div>
+
+      {/* Left side — activity feed */}
+      <div className="hidden sm:block">
+        <ActivityFeed wallets={wallets} onClickAddress={handleClickAddress} />
+      </div>
+
+      {/* Top right — auth + connect wallet */}
+      <div className="absolute top-3 right-3 sm:top-5 sm:right-5 z-10 flex flex-col items-end gap-3">
+        {phantomConnected || !!profile ? (
+          <AuthPanel onClickAddress={handleClickAddress} />
+        ) : (
+          <button
+            onClick={openPhantomModal}
+            className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-purple-600/80 to-purple-500/80 hover:from-purple-500/90 hover:to-purple-400/90 backdrop-blur-xl border border-purple-400/20 rounded-2xl text-sm text-white font-medium transition-all cursor-pointer shadow-lg shadow-purple-900/30"
+          >
+            <svg width="16" height="16" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="128" height="128" rx="26" fill="#AB9FF2" />
+              <path fillRule="evenodd" clipRule="evenodd" d="M55.6416 82.1477C50.8744 89.4525 42.8862 98.6966 32.2568 98.6966C27.232 98.6966 22.4004 96.628 22.4004 87.6424C22.4004 64.7584 53.6445 29.3335 82.6339 29.3335C99.1257 29.3335 105.697 40.7755 105.697 53.7689C105.697 70.4471 94.8739 89.5171 84.1156 89.5171C80.7013 89.5171 79.0264 87.6424 79.0264 84.6688C79.0264 83.8931 79.1552 83.0527 79.4129 82.1477C75.7409 88.4182 68.6546 94.2361 62.0192 94.2361C57.1877 94.2361 54.7397 91.1979 54.7397 86.9314C54.7397 85.3799 55.0618 83.7638 55.6416 82.1477ZM80.6133 53.3182C80.6133 57.1044 78.3795 58.9975 75.8806 58.9975C73.3438 58.9975 71.1479 57.1044 71.1479 53.3182C71.1479 49.532 73.3438 47.6389 75.8806 47.6389C78.3795 47.6389 80.6133 49.532 80.6133 53.3182ZM94.8102 53.3184C94.8102 57.1046 92.5763 58.9977 90.0775 58.9977C87.5407 58.9977 85.3447 57.1046 85.3447 53.3184C85.3447 49.5323 87.5407 47.6392 90.0775 47.6392C92.5763 47.6392 94.8102 49.5323 94.8102 53.3184Z" fill="#FFFDF8" />
+            </svg>
+            Connect Wallet
+          </button>
+        )}
+        {/* Wallet / Swap panel: top-right on sm+, hidden here on mobile */}
+        <div className="hidden sm:block">
+          <WalletPanel wallet={selectedWallet} onClose={handleDeselect} />
+          <SwapPanel swap={trackedCar} onClose={handleDeselect} />
+        </div>
+      </div>
+
+      {/* Wallet / Swap panel: bottom sheet on mobile */}
+      <div className="block sm:hidden fixed bottom-0 left-0 right-0 z-30">
+        <WalletPanel wallet={selectedWallet} onClose={handleDeselect} />
+        <SwapPanel swap={trackedCar} onClose={handleDeselect} />
+      </div>
+
+      {/* Camera controls help — hidden on mobile and during combat (HUD takes over) */}
+      <div className={`hidden sm:block absolute bottom-6 left-5 z-10 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-2xl px-4 py-3 text-xs text-white/35 space-y-1.5 transition-opacity ${combatActive || worldFlyMode ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}>
+        <p className="text-white/50 font-medium mb-1">Controls</p>
+        {flyMode ? (
+          <>
+            <p><span className="text-white/45">W / ↑</span> Throttle up</p>
+            <p><span className="text-white/45">S / ↓</span> Throttle down</p>
+            <p><span className="text-white/45">A / ←</span> Bank left</p>
+            <p><span className="text-white/45">D / →</span> Bank right</p>
+            <p><span className="text-white/45">Q / Space</span> Climb</p>
+            <p><span className="text-white/45">E</span> Descend</p>
+            <p><span className="text-white/45">Esc</span> Exit flight</p>
+          </>
+        ) : carMode ? (
+          <>
+            <p><span className="text-white/45">W / ↑</span> Accelerate</p>
+            <p><span className="text-white/45">S / ↓</span> Brake / Reverse</p>
+            <p><span className="text-white/45">A / ←</span> Steer left</p>
+            <p><span className="text-white/45">D / →</span> Steer right</p>
+            <p><span className="text-white/45">Space</span> Brake</p>
+            <p><span className="text-white/45">Esc</span> Exit drive</p>
+          </>
+        ) : (
+          <>
+            <p><span className="text-white/45">Left-click</span> {selectedWallet ? "Orbit" : "Pan"}</p>
+            <p><span className="text-white/45">Right-click</span> {selectedWallet ? "Pan" : "Rotate"}</p>
+            <p><span className="text-white/45">Scroll</span> Zoom</p>
+          </>
+        )}
+        <div className="flex gap-1.5 mt-2">
+          <button
+            onClick={() => {
+              initAudio();
+              playClick();
+              if (carMode) {
+                setCarMode(false);
+                playerCarPosRef.current = null;
+                endCombatSession();
+              } else {
+                if (flyMode) {
+                  endCombatSession();
+                }
+                handleDeselect();
+                setWorldFlyMode(false);
+                setFlyMode(false);
+                planePosRef.current = null;
+                setCarMode(true);
+                mpManager.startSession("car");
+              }
+            }}
+            className={`flex-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer border ${carMode
+              ? "bg-[#E35930]/20 border-[#E35930]/40 text-[#E35930] hover:bg-[#E35930]/30"
+              : "bg-white/5 border-white/10 text-white/50 hover:text-white/70 hover:bg-white/10"
+              }`}
+          >
+            {carMode ? "Exit Drive" : "Drive"}
+          </button>
+          <button
+            onClick={() => {
+              initAudio();
+              playClick();
+              if (flyMode) {
+                setFlyMode(false);
+                planePosRef.current = null;
+                endCombatSession();
+              } else {
+                if (carMode) {
+                  endCombatSession();
+                }
+                handleDeselect();
+                setWorldFlyMode(false);
+                setCarMode(false);
+                playerCarPosRef.current = null;
+                setFlyMode(true);
+                mpManager.startSession("plane");
+              }
+            }}
+            title={flyMode ? 'Exit flight mode' : 'Fly your plane around the city'}
+            className={`flex-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer border ${flyMode
+              ? "bg-blue-500/20 border-blue-400/40 text-blue-400 hover:bg-blue-500/30"
+              : "bg-white/5 border-white/10 text-white/50 hover:text-white/70 hover:bg-white/10"
+              }`}
+          >
+            {flyMode ? "Exit Flight" : "✈ Fly"}
+          </button>
+          <button
+            onClick={() => {
+              initAudio();
+              playClick();
+              if (worldFlyMode) {
+                setWorldFlyMode(false);
+              } else {
+                if (carMode || flyMode) {
+                  endCombatSession();
+                }
+                handleDeselect();
+                setWorldFlyMode(true);
+              }
+            }}
+            className={`flex-1 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer border ${worldFlyMode
+              ? "bg-purple-500/20 border-purple-400/40 text-purple-300 hover:bg-purple-500/30"
+              : "bg-white/5 border-white/10 text-white/50 hover:text-white/70 hover:bg-white/10"
+              }`}
+          >
+            {worldFlyMode ? "Exit World" : "🌍 World"}
+          </button>
+        </div>
+      </div>
+
+      {/* Bottom right — credits (hidden during combat / globe overlays) */}
+      <div className={`hidden sm:flex absolute bottom-20 right-5 z-10 flex-col items-end gap-1.5 transition-opacity ${combatActive || worldFlyMode ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}>
+        <a href="https://www.helius.dev/" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-white/30 hover:text-white/55 text-xs transition-colors">
+          <span>Powered by</span>
+          <img src="/helius-logo.svg" alt="Helius" className="h-4" />
+        </a>
+        <p className="text-[10px] text-white/20 tracking-wide">
+          shoutout <span className="text-[#E35930]/60 font-medium">Nathan</span> 🔥
+        </p>
+      </div>
+
+      {/* Network stats HUD */}
+      <NetworkStats />
+
+      {/* Time control buttons */}
+      <div className="absolute bottom-4 sm:bottom-6 left-1/2 -translate-x-1/2 z-10 flex gap-1 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-full px-2.5 py-2">
+        {TIME_PRESETS.map((preset) => (
+          <button
+            key={preset.id}
+            onClick={() => handleTimePreset(preset.id, preset.time)}
+            className={`px-2.5 sm:px-3.5 py-1.5 min-h-[44px] sm:min-h-0 rounded-full text-xs font-medium transition-colors cursor-pointer ${activePreset === preset.id
+              ? "bg-white/15 text-white"
+              : "text-white/40 hover:text-white/70"
+              }`}
+          >
+            {preset.label}
+          </button>
+        ))}
+        <button
+          onClick={handleCycle}
+          className={`px-2.5 sm:px-3.5 py-1.5 min-h-[44px] sm:min-h-0 rounded-full text-xs font-medium transition-colors cursor-pointer ${activePreset === "cycle"
+            ? "bg-white/15 text-white"
+            : "text-white/40 hover:text-white/70"
+            }`}
+        >
+          Cycle
+        </button>
+      </div>
+
+      <Canvas
+        camera={{ position: [200, 150, 200], fov: 50, near: 5, far: 2000 }}
+        onPointerMissed={handleDeselect}
+      >
+        <SceneLighting timeRef={timeRef} autoModeRef={autoModeRef} />
+
+        <CityGrid
+          wallets={wallets}
+          timeRef={timeRef}
+          onSelectWallet={handleSelectWallet}
+          onHoverWindow={setWindowHover}
+          selectedAddress={selectedWallet?.address ?? null}
+        />
+
+        <InstancedCars
+          swapQueueRef={swapQueueRef}
+          wallets={wallets}
+          timeRef={timeRef}
+          onHoverSwap={setWindowHover}
+          onClickCar={handleClickCar}
+          trackedCarSlot={cameraFollowSlot}
+          trackedCarPosRef={trackedCarPosRef}
+          onCarDied={handleCarDied}
+          selectedAddress={selectedWallet?.address ?? null}
+          swapBurstRef={swapBurstRef}
+        />
+
+        {/* Resident planes — first 100 wallets each get a plane circling their building */}
+        <InstancedCityPlanes
+          wallets={wallets}
+          timeRef={timeRef}
+          onHoverPlane={setWindowHover}
+          onClickPlane={handleSelectWallet}
+          positionsRef={planePositionsRef}
+        />
+
+        {/* Resident cars — first 250 wallets each get a car driving the streets */}
+        <InstancedResidentCars
+          wallets={wallets}
+          timeRef={timeRef}
+          onHoverCar={setWindowHover}
+          onClickCar={handleSelectWallet}
+          positionsRef={residentCarPositionsRef}
+        />
+
+        {/* Beach, ocean, seagulls, boats — southern shoreline */}
+        <BeachScene />
+
+        {/* Famous crypto-themed landmarks around the city */}
+        <CityLandmarks />
+
+        <PlayerCar
+          active={carMode}
+          collisionMap={collisionMap}
+          positionRef={playerCarPosRef}
+          headingRef={playerCarHeadingRef}
+          speedRef={carSpeedRef}
+        />
+
+        {/* In-city player plane */}
+        <PlayerPlane
+          active={flyMode}
+          positionRef={planePosRef}
+          headingRef={planeHeadingRef}
+          pitchRef={planePitchRef}
+          speedRef={planeSpeedRef}
+          walletAddress={activeWalletAddress}
+        />
+
+        {selectedWallet && selectedPosition && (
+          <SelectionBeam
+            position={selectedPosition}
+            buildingHeight={getBuildingDimensions(selectedWallet).height}
+          />
+        )}
+
+        {/* New building spotlights */}
+        {newSpotlights.map(s => (
+          <NewBuildingSpotlight
+            key={s.id}
+            position={s.position}
+            buildingHeight={s.height}
+          />
+        ))}
+
+        <SwapParticles swapBurstRef={swapBurstRef} />
+
+        {/* Projectile system — active in car or plane mode */}
+        <ProjectileRenderer
+          manager={projectileManager}
+          planePositionsRef={planePositionsRef}
+          carPositionsRef={residentCarPositionsRef}
+          active={combatActive}
+          playerPosRef={carMode ? playerCarPosRef : planePosRef}
+          playerHeadingRef={carMode ? playerCarHeadingRef : planeHeadingRef}
+          playerPitchRef={planePitchRef}
+          mode={carMode ? "car" : "plane"}
+        />
+
+        <CameraControls
+          targetPosition={selectedPosition}
+          trackingRef={flyMode ? planePosRef : carMode ? playerCarPosRef : trackedCarPosRef}
+          isTracking={flyMode || carMode || cameraFollowSlot !== null}
+          playerCarMode={carMode}
+          flyMode={flyMode}
+          headingRef={flyMode ? planeHeadingRef : playerCarHeadingRef}
+        />
+
+        {/* AI Town NPCs — LLM-powered agents walking the streets */}
+        <AITownNPCs />
+
+        {/* Dubai Marina district — influencers, lambos, explosions */}
+        <DubaiDistrict />
+
+        {/* Real multiplayer players — in-world floating labels/markers */}
+        <RealPlayerTags
+          active={combatActive}
+          remotePlayers={mpManager.remotePlayers}
+        />
+      </Canvas>
+
+      {/* Cesium globe overlay — interactive 3D Earth with OSM Buildings + metadata */}
+      {worldFlyMode && !flyMode && !cesiumFlightMode && (
+        <Suspense fallback={
+          <div className="fixed inset-0 z-50 bg-[#0a0a12] flex items-center justify-center">
+            <div className="text-center">
+              <div className="w-10 h-10 border-2 border-emerald-500/30 border-t-emerald-400 rounded-full animate-spin mx-auto mb-4" />
+              <p className="text-white/60 text-sm">Loading globe…</p>
+            </div>
+          </div>
+        }>
+          <CesiumGlobe
+            walletAddress={activeWalletAddress}
+            onExit={() => setWorldFlyMode(false)}
+            onFlyAt={(lon: number, lat: number, alt: number, heading: number) => {
+              setWorldFlyMode(false);
+              setCesiumFlightMode(true);
+              (window as Window & { __solanapolis_fly_coords?: { lon: number; lat: number; alt: number; heading: number } }).__solanapolis_fly_coords = { lon, lat, alt, heading };
+            }}
+          />
+        </Suspense>
+      )}
+
+      {/* Cesium flight simulator overlay — only from World globe "Fly At" */}
+      {cesiumFlightMode && (
+        <Suspense fallback={
+          <div className="fixed inset-0 z-50 bg-[#0a0a12] flex items-center justify-center">
+            <div className="text-center">
+              <div className="w-10 h-10 border-2 border-[#E35930]/30 border-t-[#E35930] rounded-full animate-spin mx-auto mb-4" />
+              <p className="text-white/60 text-sm">Loading flight simulator...</p>
+            </div>
+          </div>
+        }>
+          <CesiumFlight
+            walletAddress={activeWalletAddress}
+            onExit={() => { setCesiumFlightMode(false); }}
+          />
+        </Suspense>
+      )}
+
+      {/* Game HUD — minimap + score (active in car or plane mode, not Cesium) */}
+      {combatActive && (
+        <GameHUD
+          active={combatActive}
+          mode={carMode ? "car" : "plane"}
+          manager={projectileManager}
+          playerPosRef={carMode ? playerCarPosRef : planePosRef}
+          playerHeadingRef={carMode ? playerCarHeadingRef : planeHeadingRef}
+          planePositionsRef={planePositionsRef}
+          carPositionsRef={residentCarPositionsRef}
+          remotePlayers={mpManager.remotePlayers}
+          buildingPositions={buildingPositions}
+        />
+      )}
+
+      {/* Cockpit HUD — first-person view with Solana data (car + plane) */}
+      <CockpitHUD
+        active={(flyMode && !cesiumFlightMode) || carMode}
+        mode={carMode ? "car" : "plane"}
+        positionRef={carMode ? playerCarPosRef : planePosRef}
+        headingRef={carMode ? playerCarHeadingRef : planeHeadingRef}
+        pitchRef={flyMode ? planePitchRef : undefined}
+        speedRef={carMode ? carSpeedRef : planeSpeedRef}
+        walletAddress={activeWalletAddress}
+        hp={projectileManager.playerHP}
+        maxHP={projectileManager.playerMaxHP}
+        destroyed={projectileManager.destroyed}
+        respawnRemaining={projectileManager.getRespawnRemaining()}
+      />
+
+      {/* Leaderboard panel — visible in combat mode */}
+      <LeaderboardPanel
+        visible={combatActive}
+        currentWallet={activeWalletAddress}
+        currentScore={projectileManager.score}
+      />
+
+      {/* In-game chat — requires wallet + building in the city */}
+      <GameChat
+        walletAddress={activeWalletAddress}
+        displayName={profile?.x_username || null}
+        hasBuilding={!!activeWalletAddress && wallets.some(w => w.address === activeWalletAddress)}
+      />
+
+      {/* Parcel Reward — first 16 wallets get hidden SOL */}
+      <ParcelReward walletAddress={activeWalletAddress} />
+
+      {/* Treasure hunt challenge banner */}
+      <ParcelChallengeBanner
+        walletConnected={walletConnected}
+        walletCount={wallets.length}
+      />
+
+      {/* Treasure Gate — play-to-win overlay before entering the city */}
+      {showTreasureGate && activeWalletAddress && (
+        <TreasureGate
+          walletAddress={activeWalletAddress}
+          onEnterCity={handleTreasureGateComplete}
+        />
+      )}
+    </div>
+  );
+}