fix(gta): keep scenic views above roofs and clean mobile HUD

中文：远景镜头避开建筑屋顶，修复移动端调试信息重叠，并在生产环境隐藏诊断 HUD。

Author: functionstackx

packages/app/src/components/gta/gta-game.css

@@ -435,3 +435,10 @@
 .gta-map-panel button {
   margin: 4px;
 }
+@media (max-width: 700px) {
+  .gta-performance {
+    top: 3.7rem;
+    left: 0.7rem;
+    font-size: 9px;
+  }
+}

packages/app/src/components/gta/gta-game.tsx

@@ -570,11 +570,13 @@ export function GtaGame({ locale = 'en' }: { locale?: 'en' | 'zh' }) {
           </span>
         </div>
       </header>
-      <output
-        ref={performanceHud}
-        className="gta-performance"
-        aria-label={locale === 'zh' ? '渲染性能' : 'Rendering performance'}
-      />
+      {process.env.NODE_ENV !== 'production' && (
+        <output
+          ref={performanceHud}
+          className="gta-performance"
+          aria-label={locale === 'zh' ? '渲染性能' : 'Rendering performance'}
+        />
+      )}
       <div className="gta-objective">
         <small>
           {view.explorer

packages/app/src/components/gta/gta-geography.test.ts

@@ -7,9 +7,14 @@ import {
   STREETS_SF,
   streetRoute,
 } from './gta-geography';
-import { blocked, DESTINATIONS, JOBS, START } from './gta-world';
+import { blocked, cameraClearanceHeight, DESTINATIONS, JOBS, START } from './gta-world';
 
 describe('San Paloma geography', () => {
+  it('keeps scenic cameras above rooftops without lifting cameras over clear roads', () => {
+    expect(cameraClearanceHeight({ x: -125, z: 1850 }, 20)).toBe(31);
+    expect(cameraClearanceHeight({ x: -125, z: 1850 }, 500)).toBe(500);
+    expect(cameraClearanceHeight({ x: 0, z: 1850 }, 20)).toBe(20);
+  });
   it('uses the SF survey instead of an invented rectangular grid', () => {
     expect(FOOTPRINTS.length).toBeGreaterThan(1800);
     expect(STREETS_SF.length).toBeGreaterThan(600);

packages/app/src/components/gta/gta-renderer.ts

@@ -1,7 +1,7 @@
 import * as T from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
-import { JOBS, lanePoint, type Point } from './gta-world';
+import { cameraClearanceHeight, JOBS, lanePoint, type Point } from './gta-world';
 import { target, type CityState } from './gta-engine';
 import { clonePedestrian, createPedestrianAnimation, rigPedestrian } from './gta-pedestrian';
 import { ARCHITECTURE_ASSET_COUNT, loadArchitecture } from './gta-architecture';
@@ -348,13 +348,16 @@ export async function createCityRenderer(
             ? 0.2
             : 10 + Math.abs(s.car.speed) * 0.05;
       const height = scenic
-        ? 15 + landmarkHeight * 0.2
+        ? landmarkHeight > 100
+          ? landmarkHeight + 60
+          : 15 + landmarkHeight * 0.2
         : s.onFoot
           ? 3.1
           : s.camera === 1
             ? 1.6
             : 5.2;
       tmp.set(s.player.x - Math.sin(a) * dist, height, s.player.z - Math.cos(a) * dist);
+      if (scenic) tmp.y = cameraClearanceHeight({ x: tmp.x, z: tmp.z }, tmp.y);
       if (snap) camera.position.copy(tmp);
       else camera.position.lerp(tmp, 0.14);
       camera.lookAt(

packages/app/src/components/gta/gta-world.ts

@@ -58,6 +58,13 @@ export function blocked(p: Point, radius = 1.2) {
           return true;
   return false;
 }
+export function cameraClearanceHeight(p: Point, minimumHeight: number) {
+  let height = minimumHeight;
+  for (const b of cells.get(`${Math.floor(p.x / 50)},${Math.floor(p.z / 50)}`) ?? []) {
+    if (b.h + 15 > height && inside(p, b.ring)) height = b.h + 15;
+  }
+  return height;
+}
 export const DESTINATIONS = [
   { ...START, en: "Oren's Hummus", zh: "Oren's Hummus" },
   { ...nearestRoadPoint(BAY_LANDMARKS[1]), en: 'Ferry Building', zh: '渡轮大厦' },