App.js

import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import { View, Text, TouchableOpacity, StatusBar } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import ReAnimated, {
  useSharedValue, useAnimatedStyle,
  withSequence, withTiming,
  cancelAnimation, Easing as REasing,
} from 'react-native-reanimated';
import { useFonts } from 'expo-font';
import { Orbitron_400Regular, Orbitron_700Bold, Orbitron_900Black } from '@expo-google-fonts/orbitron';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import * as Haptics from 'expo-haptics';
import AsyncStorage from '@react-native-async-storage/async-storage';


import { GRID, GRID_PRESETS, setGridSize, COLORS, TICK_MS, FAST_TICK_MS } from './src/constants';
import {
  createBoard, spawnPiece, spawnBomb, spawnPieceReverse,
  nextFromBag, resetBag, getShape,
  collides, collidesReverse,
  lockPiece, lockPieceGravity, lockBomb, lockPieceReverse,
  rotatePiece, getGhostY, getGhostYReverse,
  createVisibilityBoard, markVisibleWithSonar, decayVisibility, buildVisibilityActiveSet,
  cloneBoard,
} from './src/gameLogic';
import { THEMES } from './src/themes';
import { GAME_MODES, BOMB_ID } from './src/modes';
import { loadStats, saveStats, mergeSessionStats, defaultStats } from './src/stats';
import { createRecord, addRecord, loadHistory } from './src/history';
import { ParticleLayer, DEFAULT_FX_CONFIG } from './src/particles';
import {
  getActiveEffects, ACTIVE_SKILLS, SKILL_IDS,
  defaultTreeState, unlockNode, canUnlock, getUnlockedActiveSkills,
  loadTreeState, saveTreeState, loadStars, saveStars, calcStars,
  loadEquippedSkills, saveEquippedSkills,
} from './src/skillTree';

import { getLayout, SIDE_W, THEME_KEY, FX_KEY, FX_SPEED_KEY, HAPTICS_KEY, BG_KEY, GHOST_KEY, GRID_KEY } from './src/layout';
import SkiaBoard from './src/components/SkiaBoard';
import FpsMonitor from './src/components/FpsMonitor';
import {
  ModeSelector, StarResultToast, MenuPanel,
} from './src/components/Panels';
import GameHeader from './src/components/GameHeader';
import GameSidePanel from './src/components/GameSidePanel';
import GameControls from './src/components/GameControls';
import CyberBackground from './src/components/CyberBackground';
import { audioService } from './src/audio';
import { useTaskSystem } from './src/hooks/useTaskSystem';
import { getClaimableCount } from './src/tasks';
import { styles } from './src/styles/appStyles';

const CHARGE_MAX = 150;
const MAX_EFFECTS = 5; // 同时存活粒子效果数量上限，防止连续消行叠加爆炸
const VIS_TICK_MS = 80;
const INVISIBLE_OUTLINE_DEPTH = [6, 4, 2];
const SONAR_RADIUS_BY_PERF = [4, 3, 2];
// 充能值：消行获得的充能
const CHARGE_TABLE = [0, 25, 35, 50, 100]; // 0/1/2/3/4 行
const FREEZE_DURATION_DEFAULT = 3000;

// ─── 初始游戏状态 ─────────────────────────────────────────────────────────────
function makeInitialState() {
  return {
    mode: 'classic',
    board: createBoard(), piece: null,
    nextQueue: [],
    holdKeys: [null, null], holdUsed: false,
    score: 0, lines: 0, level: 1,
    started: false, paused: false, gameOver: false, flashRows: [],
    pieces: 0, hardDrops: 0, holds: 0,
    combo: 0, maxCombo: 0,
    singleLines: 0, doubleLines: 0, tripleLines: 0, quadLines: 0,
    bombsUsed: 0,
    pieceCounts: { I: 0, O: 0, T: 0, S: 0, Z: 0, J: 0, L: 0 },
    startTime: 0, visBoard: null, pausedAt: 0,
    visActiveSet: null,
    skillCharge: 0, bombNextReady: false,
    isFrozen: false,
  };
}

// ─── 主组件 ───────────────────────────────────────────────────────────────────
export default function App() {
  const [fontsLoaded] = useFonts({
    Orbitron: Orbitron_400Regular,
    Orbitron_Bold: Orbitron_700Bold,
    Orbitron_Black: Orbitron_900Black,
  });

  const [renderTick, setTick] = useState(0);
  const rerender = useCallback(() => setTick(n => n + 1), []);

  const [allStats, setAllStats] = useState(defaultStats());
  const [themeKey, setThemeKey] = useState('retro');
  const [gameMode, setGameMode] = useState('classic');
  const [gridPreset, setGridPreset] = useState('standard');
  const [startLevel, setStartLevel] = useState(1);
  const [endlessLevel, setEndlessLevel] = useState(1);

  const [treeState, setTreeState] = useState(defaultTreeState());
  const [stars, setStars] = useState(0);
  const [equippedSkills, setEquippedSkills] = useState([null, null]);

  const [showModes, setShowModes] = useState(false);
  const [showMenu, setShowMenu] = useState(false);
  const [starToast, setStarToast] = useState(null);

  const [fxConfig, setFxConfig] = useState(DEFAULT_FX_CONFIG);
  const [fxSpeed, setFxSpeed] = useState(1);

  const [gameHistory, setGameHistory] = useState([]);

  const [hapticsEnabled, setHapticsEnabled] = useState(true);
  const hapticsRef = useRef(true);

  const [bgEnabled, setBgEnabled] = useState(true);
  const [fpsVisible, setFpsVisible] = useState(false);
  const [ghostEnabled, setGhostEnabled] = useState(true);

  const [particles, setParticles] = useState([]);
  const particleIdRef = useRef(0);

  const theme = THEMES[themeKey] || THEMES.retro;
  const gs = useRef(makeInitialState());
  const intervalRef = useRef(null);
  const softRef = useRef(null);
  const moveDelayRef = useRef(null);
  const moveRepeatRef = useRef(null);
  const activeMoveRef = useRef(null);
  const dasActiveRef = useRef(false);
  const tickRef = useRef(null);
  const prevBestRef = useRef(0);
  const freezeTimerRef = useRef(null);
  const visTimerRef = useRef(null); // 隐形模式视觉刷新定时器
  const visSkipRef = useRef(0);
  const visOverBudgetRef = useRef(0);
  const visRecoverRef = useRef(0);
  const perfLevelRef = useRef(0);
  const [invisiblePerfLevel, setInvisiblePerfLevel] = useState(0);

  // ── 原始模式：禁用所有技能效果 ──────────────────────────────────────────────
  const rawEffects = getActiveEffects(treeState);
  const isOriginal = gameMode === 'original';
  const effects = isOriginal ? {
    scoreMultiplier: 1.0, previewCount: 1, holdSlots: 1, bombRadius: 1,
    chargeBonus: 1.0, freezeDuration: 3000, freezeChargeBonus: false,
    lineClearCount: 1, ghostEnhance: false, bombGravity: false, startLevelMax: 1,
    unlockedModes: rawEffects.unlockedModes, unlockedSkills: [],
    unlockedGrids: rawEffects.unlockedGrids,
  } : rawEffects;

  // ── 动态布局（根据当前网格预设计算）────────────────────────────────────
  const layout = useMemo(() => getLayout(), [gridPreset]);
  const CELL = layout.CELL;
  const BOARD_W = layout.BOARD_W;
  const BOARD_H = layout.BOARD_H;

  // ── 装备槽红点 ─────────────────────────────────────────────────────────────
  const hasEquipBadge = equippedSkills.includes(null) &&
    getUnlockedActiveSkills(treeState).length > equippedSkills.filter(s => s).length;

  const task = useTaskSystem({
    stars, setStars, setAllStats, setTreeState, setEquippedSkills, setThemeKey, defaultTreeState,
    hapticsRef,
  });

  // ── 动画 ────────────────────────────────────────────────────────────────────
  // 屏幕震动：Reanimated（UI 线程同步取消，无竞态）
  const shakeY = useSharedValue(0);
  const shakeX = useSharedValue(0);
  const boardShakeStyle = useAnimatedStyle(() => ({
    transform: [
      { translateY: shakeY.value },
      { translateX: shakeX.value },
    ],
  }));
  const flashProgress = useSharedValue(0);
  const flashTimerRef = useRef(null);
  const flashOverlayRef = useRef([]);  // 预计算闪光行视觉数据 [{y, color}]，独立于游戏逻辑

  const playBounce = useCallback((intensity = 4) => {
    cancelAnimation(shakeY);
    cancelAnimation(shakeX);
    shakeX.value = 0;
    // 固定时长动画，无弹簧振荡残留
    shakeY.value = withSequence(
      withTiming(intensity, { duration: 50 }),
      withTiming(0, { duration: 150, easing: REasing.out(REasing.cubic) }),
    );
    // 强震动时加水平抖动 (四消/炸弹)
    if (intensity >= 10) {
      shakeX.value = withSequence(
        withTiming(intensity * 0.5, { duration: 30 }),
        withTiming(-intensity * 0.4, { duration: 40 }),
        withTiming(intensity * 0.2, { duration: 35 }),
        withTiming(0, { duration: 100, easing: REasing.out(REasing.cubic) }),
      );
    }
  }, []);

  const playFlash = useCallback(() => {
    clearTimeout(flashTimerRef.current);
    // Reanimated UI 线程丝滑淡出：1 → 0，总时长 280ms
    cancelAnimation(flashProgress);
    flashProgress.value = 1;
    flashProgress.value = withTiming(0, {
      duration: 280,
      easing: REasing.out(REasing.quad),
    });
    // 动画结束后清除闪光视觉叠加层
    flashTimerRef.current = setTimeout(() => {
      flashOverlayRef.current = [];
    }, 300);
  }, []);

  // ── 持久化 ──────────────────────────────────────────────────────────────────
  useEffect(() => {
    audioService.init();
    loadStats().then(setAllStats);
    loadTreeState().then(setTreeState);
    loadStars().then(setStars);
    loadEquippedSkills().then(setEquippedSkills);
    loadHistory().then(setGameHistory);
    AsyncStorage.getItem(THEME_KEY).then(v => { if (v && THEMES[v]) setThemeKey(v); });
    AsyncStorage.getItem(FX_KEY).then(v => {
      if (v) try {
        const parsed = JSON.parse(v);
        // 迁移旧特效键名
        if (parsed.scanLine !== undefined && parsed.prismRays === undefined) {
          parsed.prismRays = parsed.scanLine; delete parsed.scanLine;
        }
        if (parsed.rowFlash !== undefined && parsed.gridImplode === undefined) {
          parsed.gridImplode = parsed.rowFlash; delete parsed.rowFlash;
        }
        setFxConfig({ ...DEFAULT_FX_CONFIG, ...parsed });
      } catch { }
    });
    AsyncStorage.getItem(FX_SPEED_KEY).then(v => {
      if (v !== null) { const n = parseFloat(v); if (n > 0) setFxSpeed(n); }
    });
    AsyncStorage.getItem(HAPTICS_KEY).then(v => {
      if (v !== null) {
        const enabled = v !== 'false';
        setHapticsEnabled(enabled);
        hapticsRef.current = enabled;
      }
    });
    AsyncStorage.getItem(BG_KEY).then(v => {
      if (v !== null) setBgEnabled(v !== 'false');
    });
    AsyncStorage.getItem(GHOST_KEY).then(v => {
      if (v !== null) setGhostEnabled(v !== 'false');
    });
    AsyncStorage.getItem(GRID_KEY).then(v => {
      if (v && GRID_PRESETS[v]) {
        setGridPreset(v);
        setGridSize(v);
      }
    });
    task.initTasks();
  }, []);

  const saveTheme = useCallback((key) => {
    setThemeKey(key);
    AsyncStorage.setItem(THEME_KEY, key);
  }, []);

  const toggleFx = useCallback((fxKey) => {
    setFxConfig(prev => {
      const next = { ...prev, [fxKey]: !prev[fxKey] };
      AsyncStorage.setItem(FX_KEY, JSON.stringify(next));
      return next;
    });
  }, []);

  const changeFxSpeed = useCallback((speed) => {
    setFxSpeed(speed);
    AsyncStorage.setItem(FX_SPEED_KEY, String(speed));
  }, []);

  const toggleHaptics = useCallback(() => {
    setHapticsEnabled(prev => {
      const next = !prev;
      hapticsRef.current = next;
      AsyncStorage.setItem(HAPTICS_KEY, String(next));
      return next;
    });
  }, []);

  const toggleBg = useCallback(() => {
    setBgEnabled(prev => {
      const next = !prev;
      AsyncStorage.setItem(BG_KEY, String(next));
      return next;
    });
  }, []);

  const toggleGhost = useCallback(() => {
    setGhostEnabled(prev => {
      const next = !prev;
      AsyncStorage.setItem(GHOST_KEY, String(next));
      return next;
    });
  }, []);

  const handleUnlockSkill = useCallback((nodeId) => {
    const result = unlockNode(nodeId, treeState, stars);
    if (!result) return;
    setTreeState(result.treeState);
    setStars(result.starsRemaining);
    saveTreeState(result.treeState);
    saveStars(result.starsRemaining);
    if (hapticsRef.current) Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
  }, [treeState, stars]);

  // ── 粒子 ────────────────────────────────────────────────────────────────────
  const spawnParticles = useCallback((type, data) => {
    const id = ++particleIdRef.current;
    const colors = theme.particleColors;
    const dur = Math.round((data.duration || 800) * fxSpeed);
    const lifetime = dur + 200;
    setParticles(prev => {
      const next = [...prev, { id, type, colors, ...data, duration: dur, createdAt: Date.now(), lifetime }];
      return next.length > MAX_EFFECTS ? next.slice(next.length - MAX_EFFECTS) : next;
    });
  }, [theme, fxSpeed]);

  // 批量添加粒子（单次 setState），减少四消等场景的重渲染次数
  const spawnParticlesBatch = useCallback((items) => {
    const colors = theme.particleColors;
    const now = Date.now();
    const newParticles = items.map(({ type, ...data }) => {
      const id = ++particleIdRef.current;
      const dur = Math.round((data.duration || 800) * fxSpeed);
      const lifetime = dur + 200;
      return { id, type, colors, ...data, duration: dur, createdAt: now, lifetime };
    });
    setParticles(prev => {
      const next = [...prev, ...newParticles];
      return next.length > MAX_EFFECTS ? next.slice(next.length - MAX_EFFECTS) : next;
    });
  }, [theme, fxSpeed]);

  // 统一低频清理过期粒子（每500ms一次，替代每个粒子各自的setTimeout）
  useEffect(() => {
    const timer = setInterval(() => {
      setParticles(prev => {
        const now = Date.now();
        const alive = prev.filter(p => now - p.createdAt < p.lifetime);
        return alive.length === prev.length ? prev : alive;
      });
    }, 500);
    return () => clearInterval(timer);
  }, []);

  // ── 循环 ────────────────────────────────────────────────────────────────────
  const stopLoop = useCallback(() => {
    clearInterval(intervalRef.current); intervalRef.current = null;
    clearInterval(visTimerRef.current); visTimerRef.current = null;
  }, []);

  const startLoopStable = useCallback(() => {
    stopLoop();
    const g = gs.current;
    const mode = g.mode || gameMode;
    let speed = Math.max(80, TICK_MS - (g.level - 1) * 50);
    if (g.isFrozen) speed = 999999; // 冻结时不下落
    intervalRef.current = setInterval(() => tickRef.current?.(), speed);
    // 隐形模式：独立视觉刷新（活动格增量更新 + 高堆叠降采样）
    if (mode === 'invisible') {
      visTimerRef.current = setInterval(() => {
        const gg = gs.current;
        if (!gg.started || gg.paused || gg.gameOver || !gg.visBoard) return;
        const t0 = Date.now();
        const { changed, activeCount } = decayVisibility(gg.visBoard, gg.visActiveSet);
        const costMs = Date.now() - t0;
        if (!changed) return;

        const curLevel = perfLevelRef.current;
        const overBudget = activeCount > 150 || costMs > 6;
        const underBudget = activeCount < 70 && costMs < 3;

        if (overBudget) {
          visOverBudgetRef.current++;
          visRecoverRef.current = 0;
        } else if (underBudget) {
          visRecoverRef.current++;
          visOverBudgetRef.current = 0;
        } else {
          visOverBudgetRef.current = 0;
          visRecoverRef.current = 0;
        }

        if (visOverBudgetRef.current >= 4 && curLevel < 2) {
          const next = curLevel + 1;
          perfLevelRef.current = next;
          setInvisiblePerfLevel(next);
          visOverBudgetRef.current = 0;
          visRecoverRef.current = 0;
        } else if (visRecoverRef.current >= 12 && curLevel > 0) {
          const next = curLevel - 1;
          perfLevelRef.current = next;
          setInvisiblePerfLevel(next);
          visOverBudgetRef.current = 0;
          visRecoverRef.current = 0;
        }

        const level = perfLevelRef.current;
        const skipMod =
          level === 0 ? (activeCount > 120 ? 2 : 1)
            : level === 1 ? (activeCount > 90 ? 2 : 1)
              : (activeCount > 120 ? 3 : 2);
        if (skipMod > 1) {
          visSkipRef.current = (visSkipRef.current + 1) % skipMod;
          if (visSkipRef.current !== 0) return;
        } else {
          visSkipRef.current = 0;
        }
        rerender();
      }, VIS_TICK_MS);
    }
  }, [stopLoop, rerender, gameMode]);

  // ── 游戏结束 ────────────────────────────────────────────────────────────────
  const handleGameOver = useCallback(() => {
    const g = gs.current;
    g.gameOver = true; g.piece = null;
    stopLoop();
    clearTimeout(freezeTimerRef.current);
    if (hapticsRef.current) Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
    audioService.play('gameover');

    audioService.pauseBGM();
    prevBestRef.current = allStats.modeBest[gameMode] || 0;

    const session = {
      score: g.score, lines: g.lines, level: g.level, pieces: g.pieces,
      playTimeMs: Date.now() - g.startTime,
      singleLines: g.singleLines, doubleLines: g.doubleLines,
      tripleLines: g.tripleLines, quadLines: g.quadLines,
      hardDrops: g.hardDrops, holds: g.holds, maxCombo: g.maxCombo,
      bombsUsed: g.bombsUsed, pieceCounts: g.pieceCounts, mode: gameMode,
    };
    const updated = mergeSessionStats(allStats, session);
    setAllStats(updated);
    saveStats(updated);

    const earned = calcStars(session);
    if (earned > 0) {
      const newStars = stars + earned;
      setStars(newStars);
      saveStars(newStars);
      setStarToast(earned);
      setTimeout(() => setStarToast(null), 3500);
    }

    // 保存游玩历史记录
    const record = createRecord(session);
    addRecord(record).then(setGameHistory);

    // 更新任务进度
    task.onGameOver(session);

    rerender();
  }, [stopLoop, rerender, allStats, gameMode, stars]);

  // ── 生成下一块 ──────────────────────────────────────────────────────────────
  const spawnNext = useCallback(() => {
    const g = gs.current;
    const isReverse = gameMode === 'reverse';
    const collideFn = isReverse ? collidesReverse : collides;

    const nextKey = g.nextQueue[0];

    let newPiece;
    if (g.bombNextReady) {
      // 充能已触发：下一个方块变成炸弹
      newPiece = isReverse ? { ...spawnBomb(), y: GRID.rows - 3 } : spawnBomb();
      g.bombNextReady = false;
    } else {
      newPiece = isReverse ? spawnPieceReverse(nextKey) : spawnPiece(nextKey);
      if (g.pieceCounts[nextKey] !== undefined) g.pieceCounts[nextKey]++;
    }

    g.nextQueue = [...g.nextQueue.slice(1), nextFromBag()];

    g.holdUsed = false;
    g.pieces++;

    if (collideFn(g.board, newPiece, 0, 0)) { handleGameOver(); return; }
    g.piece = newPiece;
    rerender();
  }, [gameMode, handleGameOver, rerender]);

  // ── 落地锁定 ────────────────────────────────────────────────────────────────
  const doLock = useCallback((boardAfterLock, linesCleared, points) => {
    const g = gs.current;
    g.board = boardAfterLock;
    // 注意：不在这里清除 g.piece，由 spawnNext 直接覆盖，避免 piece=null 导致的闪黑
    g.score += Math.floor(points * effects.scoreMultiplier);
    g.lines += linesCleared;
    const mode = g.mode || gameMode;
    // 无尽模式：等级不递增，速度保持固定
    if (mode !== 'endless') {
      g.level = Math.max(g.level, Math.floor(g.lines / 10) + 1);
    }

    if (linesCleared > 0) {
      // 连击系统（原始模式禁用）
      if (!isOriginal) {
        g.combo++;
        if (g.combo > g.maxCombo) g.maxCombo = g.combo;
        if (g.combo > 1) {
          g.score += Math.floor(g.combo * 50 * effects.scoreMultiplier);
        }
      }
      if (linesCleared === 1) g.singleLines++;
      else if (linesCleared === 2) g.doubleLines++;
      else if (linesCleared === 3) g.tripleLines++;
      else if (linesCleared >= 4) g.quadLines++;
      if (hapticsRef.current) Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      audioService.play('clear');

      // 技能充能（有装备技能时才充能）
      if (equippedSkills.some(s => s)) {
        let bonus = effects.chargeBonus || 1.0;
        if (g.isFrozen && effects.freezeChargeBonus) bonus *= 2; // 极寒冻结：充能翻倍
        const chargeGain = Math.floor(
          (CHARGE_TABLE[Math.min(linesCleared, 4)] || 0) * bonus
        );
        g.skillCharge = Math.min(CHARGE_MAX, g.skillCharge + chargeGain);
      }
    } else {
      g.combo = 0;
      if (hapticsRef.current) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
      audioService.play('drop');
    }

    // 隐形模式：无条件同步 visBoard 与 board（修复炸弹/技能清行后数据错位）
    if (mode === 'invisible' && g.visBoard) {
      if (!g.visActiveSet) g.visActiveSet = new Set();
      if (linesCleared > 0) {
        // 实验方案：消行后仅显示每列最顶部的方块（轮廓高亮）
        // 避免一次性显形整盘，显著降低隐形模式高堆叠开销
        const rebuiltVis = createVisibilityBoard();
        const rebuiltActive = new Set();
        const now = Date.now();
        for (let c = 0; c < GRID.cols; c++) {
          for (let r = 0; r < GRID.rows; r++) {
            if (boardAfterLock[r][c] !== 0) {
              rebuiltVis[r][c] = { v: 0.85, t: now - 250, sonar: 0 };
              rebuiltActive.add(r * GRID.cols + c);
              break;
            }
          }
        }
        g.visBoard = rebuiltVis;
        g.visActiveSet = rebuiltActive;
      } else {
        // 无消行：确保 board 中空格子的 visBoard 也清零（修复炸弹爆炸后残留数据）
        for (let r = 0; r < GRID.rows; r++)
          for (let c = 0; c < GRID.cols; c++)
            if (boardAfterLock[r][c] === 0) {
              g.visBoard[r][c] = { v: 0, t: 0, sonar: 0 };
              g.visActiveSet.delete(r * GRID.cols + c);
            }
      }
    }

    spawnNext();
    startLoopStable();
  }, [spawnNext, startLoopStable, gameMode, effects.scoreMultiplier, effects.chargeBonus, effects.freezeChargeBonus, equippedSkills]);

  // ── 消行闪光 ────────────────────────────────────────────────────────────────
  const lockWithFlash = useCallback((pieceToLock, isHardDrop = false) => {
    const g = gs.current;

    if (pieceToLock.isBomb) {
      const isReverse = gameMode === 'reverse';
      const result = lockBomb(g.board, pieceToLock, effects.bombRadius, isReverse, effects.bombGravity);
      g.bombsUsed++;
      playBounce(10);
      spawnParticles('explosion', { center: result.explosionCenter, duration: 900 });
      // 冲击波涟漪效果
      spawnParticles('shockwave', {
        center: result.explosionCenter,
        color: '#FF4400',
        duration: 700,
      });
      if (hapticsRef.current) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
      doLock(result.newBoard, result.linesCleared, result.points);
      return;
    }

    if (gameMode === 'invisible') {
      if (!g.visBoard) g.visBoard = createVisibilityBoard();
      if (!g.visActiveSet) g.visActiveSet = new Set();
      const sonarRadius = SONAR_RADIUS_BY_PERF[perfLevelRef.current] ?? 2;
      markVisibleWithSonar(g.visBoard, pieceToLock, sonarRadius, g.visActiveSet, g.board);
    }

    let result;
    if (gameMode === 'gravity') result = lockPieceGravity(g.board, pieceToLock);
    else if (gameMode === 'reverse') result = lockPieceReverse(g.board, pieceToLock);
    else result = lockPiece(g.board, pieceToLock);

    const { newBoard, linesCleared, points } = result;
    // 根据消行数一次性确定震动强度；仅硬降触发屏幕震动
    const bounceIntensity = isHardDrop
      ? (linesCleared >= 4 ? 14 : linesCleared > 0 ? 7 : 4)
      : 0;
    if (bounceIntensity > 0) playBounce(bounceIntensity);

    if (linesCleared === 0) { doLock(newBoard, 0, 0); return; }

    // 预计算闪光行视觉数据（Y 坐标 + 颜色），存入独立 ref
    const tempBoard = cloneBoard(g.board);
    const shape = getShape(pieceToLock);
    for (let r = 0; r < 4; r++)
      for (let c = 0; c < 4; c++) {
        if (!shape[r][c]) continue;
        const ny = pieceToLock.y + r, nx = pieceToLock.x + c;
        if (ny >= 0 && ny < GRID.rows && nx >= 0 && nx < GRID.cols) tempBoard[ny][nx] = pieceToLock.id;
      }
    const flashRows = [];
    for (let r = 0; r < GRID.rows; r++)
      if (tempBoard[r].every(cell => cell !== 0)) flashRows.push(r);

    // 将闪光行数据存入视觉叠加层 ref（独立于游戏逻辑）
    const themeColors = theme.colors;
    flashOverlayRef.current = flashRows.map(r => {
      // 取该行第一个有效颜色作为行主色调
      const firstId = tempBoard[r].find(cell => cell !== 0);
      const color = themeColors[firstId] ?? COLORS[firstId] ?? '#00F5FF';
      return { y: r * CELL, color };
    });

    // 批量收集所有粒子效果，单次 setState
    const pieceCenterX = pieceToLock.x + 1.5;
    const pieceCenterY = pieceToLock.y + 1.5;
    const pieceColor = theme.colors[pieceToLock.id] ?? COLORS[pieceToLock.id] ?? '#00F5FF';
    const isQuad = linesCleared >= 4;
    // 四消时简化 lineClear 子特效，避免与 quadFlash 叠加导致 GPU 峰值
    const lineClearConfig = isQuad
      ? { shards: false, prismRays: false, pulse: false, gridImplode: false }
      : fxConfig;
    const batch = [
      { type: 'lineClear', rows: flashRows, config: lineClearConfig, duration: 1200 },
    ];
    // 四消时 QuadPulse 自带强化脉冲，跳过普通 lockPulse 避免重叠
    if (fxConfig.pulse && !isQuad) {
      batch.push({
        type: 'lockPulse',
        center: { x: pieceCenterX, y: pieceCenterY },
        color: pieceColor,
        duration: 600,
      });
    }
    if (isQuad) {
      batch.push({ type: 'quadFlash', rows: flashRows, duration: 2500 });
    }
    spawnParticlesBatch(batch);

    // 纯视觉闪光动画（不阻塞游戏逻辑）
    playFlash();
    // 立即执行游戏逻辑：更新分数 + 生成新方块（0ms 延迟）
    doLock(newBoard, linesCleared, points);
  }, [doLock, rerender, playBounce, playFlash, gameMode, spawnParticles, spawnParticlesBatch, effects.bombRadius, theme, fxConfig]);

  // ── Tick ────────────────────────────────────────────────────────────────────
  const tick = useCallback(() => {
    const g = gs.current;
    if (!g.started || g.paused || g.gameOver || !g.piece) return;

    const mode = g.mode || gameMode;
    const isReverse = mode === 'reverse';
    const collideFn = isReverse ? collidesReverse : collides;
    const moveDir = isReverse ? -1 : 1;

    // 隐形模式的 visBoard 衰减由独立视觉定时器驱动（80ms 基准 + 自适应跳帧），tick 不再处理

    if (!collideFn(g.board, g.piece, 0, moveDir)) {
      g.piece = { ...g.piece, y: g.piece.y + moveDir };
      rerender();
    } else {
      stopLoop();
      lockWithFlash(g.piece);
    }
  }, [lockWithFlash, stopLoop, rerender, gameMode]);

  useEffect(() => { tickRef.current = tick; }, [tick]);

  // ── 开始游戏 ────────────────────────────────────────────────────────────────
  const startGame = useCallback((mode, grid) => {
    stopLoop(); clearInterval(softRef.current); clearMoveRepeat(); clearTimeout(freezeTimerRef.current);
    resetBag();
    const selectedMode = mode || gameMode;
    const selectedGrid = grid || gridPreset;
    setGridSize(selectedGrid);
    setGridPreset(selectedGrid);
    AsyncStorage.setItem(GRID_KEY, selectedGrid);
    setGameMode(selectedMode);
    setShowModes(false);

    const previewCount = effects.previewCount;
    const keys = [];
    for (let i = 0; i < previewCount + 1; i++) keys.push(nextFromBag());

    const firstKey = keys[0];
    const isReverse = selectedMode === 'reverse';
    const nextQueue = keys.slice(1);

    gs.current = {
      ...makeInitialState(),
      mode: selectedMode,
      piece: isReverse ? spawnPieceReverse(firstKey) : spawnPiece(firstKey),
      nextQueue,
      started: true, startTime: Date.now(),
      level: selectedMode === 'endless' ? endlessLevel : startLevel,
      visBoard: selectedMode === 'invisible' ? createVisibilityBoard() : null,
      visActiveSet: selectedMode === 'invisible' ? new Set() : null,
      pieceCounts: { I: 0, O: 0, T: 0, S: 0, Z: 0, J: 0, L: 0 },
    };
    gs.current.pieceCounts[firstKey]++;
    gs.current.pieces = 1;

    setParticles([]);
    visSkipRef.current = 0;
    visOverBudgetRef.current = 0;
    visRecoverRef.current = 0;
    perfLevelRef.current = 0;
    setInvisiblePerfLevel(0);
    audioService.playBGM();
    rerender(); startLoopStable();
  }, [stopLoop, rerender, startLoopStable, gameMode,
    effects.previewCount, startLevel, endlessLevel]);

  // ── 快速重开（暂停界面用）──────────────────────────────────────────────────
  const restartGame = useCallback(() => {
    const g = gs.current;
    stopLoop();
    clearInterval(softRef.current); softRef.current = null;
    clearTimeout(freezeTimerRef.current);

    // 保存当前局统计（如果有实际游玩）
    if (g.started && g.pieces > 0) {
      const session = {
        score: g.score, lines: g.lines, level: g.level, pieces: g.pieces,
        playTimeMs: Date.now() - g.startTime,
        singleLines: g.singleLines, doubleLines: g.doubleLines,
        tripleLines: g.tripleLines, quadLines: g.quadLines,
        hardDrops: g.hardDrops, holds: g.holds, maxCombo: g.maxCombo,
        bombsUsed: g.bombsUsed, pieceCounts: g.pieceCounts, mode: gameMode,
      };
      const updated = mergeSessionStats(allStats, session);
      setAllStats(updated);
      saveStats(updated);

      const earned = calcStars(session);
      if (earned > 0) {
        const newStars = stars + earned;
        setStars(newStars);
        saveStars(newStars);
      }

      const record = createRecord(session);
      addRecord(record).then(setGameHistory);
      task.onGameOver(session);
    }

    // 直接开始新局
    startGame(gameMode, gridPreset);
  }, [stopLoop, startGame, gameMode, gridPreset, allStats, stars]);

  // ── Hold ────────────────────────────────────────────────────────────────────
  const hold = useCallback((slotIndex = 0) => {
    const g = gs.current;
    if (!g.piece || g.paused || g.gameOver || g.holdUsed) return;
    if (g.piece.isBomb) return;
    if (isOriginal) return; // 原始模式：无暂存
    if (hapticsRef.current) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    g.holds++;

    const holdSlots = effects.holdSlots;
    const idx = holdSlots === 1 ? 0 : slotIndex;

    if (g.holdKeys[idx] === null) {
      // 槽位为空：存入当前块，生成新块
      const newKeys = [...g.holdKeys];
      newKeys[idx] = g.piece.key;
      g.holdKeys = newKeys;
      g.holdUsed = true;
      spawnNext();
    } else {
      // 槽位有块：交换
      const outKey = g.holdKeys[idx];
      const newKeys = [...g.holdKeys];
      newKeys[idx] = g.piece.key;
      g.holdKeys = newKeys;
      g.holdUsed = true;
      g.piece = gameMode === 'reverse' ? spawnPieceReverse(outKey) : spawnPiece(outKey);
      rerender();
    }
  }, [spawnNext, rerender, gameMode, effects.holdSlots]);

  // ── 操作 ────────────────────────────────────────────────────────────────────
  const moveLeft = useCallback(() => {
    const g = gs.current;
    if (!g.piece || g.paused || g.gameOver) return;
    const fn = gameMode === 'reverse' ? collidesReverse : collides;
    if (!fn(g.board, g.piece, -1, 0)) { g.piece = { ...g.piece, x: g.piece.x - 1 }; audioService.play('move'); rerender(); }
    else if (!dasActiveRef.current && hapticsRef.current) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  }, [rerender, gameMode]);

  const moveRight = useCallback(() => {
    const g = gs.current;
    if (!g.piece || g.paused || g.gameOver) return;
    const fn = gameMode === 'reverse' ? collidesReverse : collides;
    if (!fn(g.board, g.piece, 1, 0)) { g.piece = { ...g.piece, x: g.piece.x + 1 }; audioService.play('move'); rerender(); }
    else if (!dasActiveRef.current && hapticsRef.current) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  }, [rerender, gameMode]);

  const clearMoveRepeat = useCallback(() => {
    if (moveDelayRef.current) {
      clearTimeout(moveDelayRef.current);
      moveDelayRef.current = null;
    }
    if (moveRepeatRef.current) {
      clearInterval(moveRepeatRef.current);
      moveRepeatRef.current = null;
    }
    activeMoveRef.current = null;
  }, []);

  const onMovePressIn = useCallback((moveFn) => {
    // 先清理上一轮 DAS，避免多指/快速切换方向时残留 interval
    clearMoveRepeat();
    activeMoveRef.current = moveFn;
    dasActiveRef.current = false;
    moveFn();
    moveDelayRef.current = setTimeout(() => {
      if (activeMoveRef.current !== moveFn) return;
      dasActiveRef.current = true;
      moveRepeatRef.current = setInterval(() => {
        if (activeMoveRef.current !== moveFn) return;
        moveFn();
      }, FAST_TICK_MS);
    }, 170);
  }, [clearMoveRepeat]);

  const onMovePressOut = useCallback(() => {
    dasActiveRef.current = false;
    clearMoveRepeat();
  }, [clearMoveRepeat]);

  const rotate = useCallback(() => {
    const g = gs.current;
    if (!g.piece || g.paused || g.gameOver) return;
    const rotated = rotatePiece(g.board, g.piece, gameMode === 'reverse');
    if (rotated) {
      g.piece = rotated;
      audioService.play('move');
      if (hapticsRef.current) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      rerender();
    }
  }, [rerender, gameMode]);

  const hardDrop = useCallback(() => {
    const g = gs.current;
    if (!g.piece || g.paused || g.gameOver) return;
    const isR = gameMode === 'reverse';
    const fn = isR ? collidesReverse : collides;
    const dir = isR ? -1 : 1;
    let dy = 0;
    while (!fn(g.board, g.piece, 0, dy + dir)) dy += dir;
    const dropped = { ...g.piece, y: g.piece.y + dy };
    g.score += Math.floor(Math.abs(dy) * 2 * effects.scoreMultiplier);
    g.hardDrops++;
    stopLoop();
    if (hapticsRef.current) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
    audioService.play('drop');
    lockWithFlash(dropped, true);
  }, [lockWithFlash, stopLoop, gameMode, effects.scoreMultiplier]);

  const softDropTick = useCallback(() => {
    const g = gs.current;
    if (!g.piece || g.paused || g.gameOver) return;
    const isR = gameMode === 'reverse';
    const fn = isR ? collidesReverse : collides;
    const dir = isR ? -1 : 1;
    if (!fn(g.board, g.piece, 0, dir)) {
      g.piece = { ...g.piece, y: g.piece.y + dir };
      g.score += 1; rerender();
    }
  }, [rerender, gameMode]);

  const onSoftPressIn = useCallback(() => {
    softDropTick();
    softRef.current = setInterval(softDropTick, FAST_TICK_MS);
  }, [softDropTick]);

  const onSoftPressOut = useCallback(() => {
    clearInterval(softRef.current); softRef.current = null;
  }, []);

  // ── 主动技能：统一使用接口 ──────────────────────────────────────────────────
  const useActiveSkill = useCallback((skillId) => {
    const g = gs.current;
    if (!g.started || g.paused || g.gameOver) return;
    const skill = ACTIVE_SKILLS[skillId];
    if (!skill) return;
    if (g.skillCharge < skill.cost) return;

    // 炸弹：不能重复激活
    if (skillId === 'bomb' && g.bombNextReady) return;
    // 冻结：不能在冻结中再次使用
    if (skillId === 'freeze' && g.isFrozen) return;

    g.skillCharge -= skill.cost;
    if (hapticsRef.current) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);

    if (skillId === 'bomb') {
      g.bombNextReady = true;
    } else if (skillId === 'freeze') {
      g.isFrozen = true;
      startLoopStable(); // 重启循环（速度变为极慢）
      const duration = effects.freezeDuration || FREEZE_DURATION_DEFAULT;
      freezeTimerRef.current = setTimeout(() => {
        gs.current.isFrozen = false;
        startLoopStable();
        rerender();
      }, duration);
    } else if (skillId === 'lineClear') {
      const count = effects.lineClearCount || 1;
      const board = g.board;
      const isReverse = gameMode === 'reverse';
      let cleared = 0;

      if (isReverse) {
        // 反转模式：从顶部清除有方块的行，空行补到底部
        for (let r = 0; r < GRID.rows && cleared < count; r++) {
          if (board[r].some(c => c !== 0)) {
            board.splice(r, 1);
            board.push(new Array(GRID.cols).fill(0));
            if (gameMode === 'invisible' && g.visBoard) {
              g.visBoard.splice(r, 1);
              g.visBoard.push(Array.from({ length: GRID.cols }, () => ({ v: 0, t: 0, sonar: 0 })));
            }
            cleared++;
            r--; // 重新检查当前行（下面的行上移了）
          }
        }
        if (cleared > 0) {
          if (gameMode === 'invisible' && g.visBoard) {
            g.visActiveSet = buildVisibilityActiveSet(g.visBoard);
          }
          g.lines += cleared;
          g.score += Math.floor(cleared * 100 * effects.scoreMultiplier);
          spawnParticles('lineClear', { rows: Array.from({ length: cleared }, (_, i) => i), config: fxConfig, duration: 1200 });
        }
      } else {
        // 正常模式：从底部清除有方块的行，空行补到顶部
        for (let r = GRID.rows - 1; r >= 0 && cleared < count; r--) {
          if (board[r].some(c => c !== 0)) {
            board.splice(r, 1);
            board.unshift(new Array(GRID.cols).fill(0));
            if (gameMode === 'invisible' && g.visBoard) {
              g.visBoard.splice(r, 1);
              g.visBoard.unshift(Array.from({ length: GRID.cols }, () => ({ v: 0, t: 0, sonar: 0 })));
            }
            cleared++;
            r++; // 重新检查当前行（上面的行下移了）
          }
        }
        if (cleared > 0) {
          if (gameMode === 'invisible' && g.visBoard) {
            g.visActiveSet = buildVisibilityActiveSet(g.visBoard);
          }
          g.lines += cleared;
          g.score += Math.floor(cleared * 100 * effects.scoreMultiplier);
          spawnParticles('lineClear', { rows: Array.from({ length: cleared }, (_, i) => GRID.rows - 1 - i), config: fxConfig, duration: 1200 });
        }
      }
    }

    rerender();
  }, [rerender, startLoopStable, spawnParticles, effects.freezeDuration, effects.lineClearCount, effects.scoreMultiplier, gameMode]);

  const togglePause = useCallback(() => {
    const g = gs.current;
    if (g.gameOver || !g.started) return;
    g.paused = !g.paused;
    if (g.paused) {
      g.pausedAt = Date.now();
      stopLoop(); clearInterval(softRef.current); softRef.current = null; clearMoveRepeat();
    } else {
      // 恢复时补偿 visBoard 时间戳，防止暂停期间的时间被算入衰减
      if (gameMode === 'invisible' && g.visBoard && g.pausedAt > 0) {
        const pauseDuration = Date.now() - g.pausedAt;
        if (g.visActiveSet && g.visActiveSet.size > 0) {
          for (const idx of g.visActiveSet) {
            const r = Math.floor(idx / GRID.cols);
            const c = idx % GRID.cols;
            if (g.visBoard[r][c].t > 0) g.visBoard[r][c].t += pauseDuration;
          }
        } else {
          for (let r = 0; r < GRID.rows; r++)
            for (let c = 0; c < GRID.cols; c++)
              if (g.visBoard[r][c].t > 0)
                g.visBoard[r][c].t += pauseDuration;
        }
      }
      g.pausedAt = 0;
      startLoopStable();
    }
    rerender();
  }, [stopLoop, startLoopStable, rerender, gameMode]);

  useEffect(() => () => {
    stopLoop(); clearInterval(softRef.current); clearMoveRepeat(); clearTimeout(freezeTimerRef.current); clearTimeout(flashTimerRef.current);
  }, [stopLoop]);

  // ── 构建渲染网格 ─────────────────────────────────────────────────────────────
  const { board, piece, nextQueue, holdKeys, holdUsed,
    score, lines, level, started, paused, gameOver,
    visBoard,
    skillCharge, bombNextReady, isFrozen } = gs.current;

  // board 引用仅在 doLock/startGame 时变更，移动/旋转时保持不变
  // 隐形模式 visBoard 就地变异需要 tick 驱动更新，用 board + visBoard 引用做 key
  const grid = useMemo(() =>
    board.map((row, r) => row.map((cell, c) => ({
      colorId: cell,
      isBomb: cell === BOMB_ID,
      visibility: (gameMode === 'invisible' && visBoard && cell !== 0) ? visBoard[r][c] : undefined,
    }))),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    // tick 驱动隐形模式 grid 重建（visBoard 就地变异，引用不变，需要外部计数器触发）
    [board, gameMode === 'invisible' ? renderTick : null]
  );

  // 幽灵块数据独立于 grid，避免每帧重建 grid
  const skiaGhostCells = useMemo(() => {
    // 幽灵块显示逻辑：
    // - 原始模式：永远不显示
    // - 隱形模式：需要解锁技能 + 全局开关开启
    // - 其他模式：受全局开关控制
    const showGhost = !isOriginal && ghostEnabled &&
      (gameMode !== 'invisible' || effects.invisibleGhost);
    if (!piece || !showGhost) return [];
    const ghosts = [];
    const isR = gameMode === 'reverse';
    const ghostY = isR ? getGhostYReverse(board, piece) : getGhostY(board, piece);
    const shape = getShape(piece);
    for (let r = 0; r < 4; r++)
      for (let c = 0; c < 4; c++) {
        if (!shape[r][c]) continue;
        const gy = ghostY + r, gx = piece.x + c;
        if (gy >= 0 && gy < GRID.rows && gx >= 0 && gx < GRID.cols && board[gy][gx] === 0) {
          const color = theme.colors[piece.id] ?? COLORS[piece.id] ?? '#333';
          ghosts.push({ x: gx * CELL, y: gy * CELL, color });
        }
      }
    return ghosts;
  }, [piece, board, isOriginal, gameMode, ghostEnabled, effects.invisibleGhost, theme.colors]);

  const { skiaActiveCells, skiaActiveBombs } = useMemo(() => {
    const cells = [];
    const bombs = [];
    if (piece) {
      const shape = getShape(piece);
      for (let r = 0; r < 4; r++)
        for (let c = 0; c < 4; c++) {
          if (!shape[r][c]) continue;
          const py = piece.y + r, px = piece.x + c;
          if (py >= 0 && py < GRID.rows && px >= 0 && px < GRID.cols) {
            if (piece.isBomb) {
              bombs.push({ x: px * CELL, y: py * CELL });
            } else {
              const color = theme.colors[piece.id] ?? COLORS[piece.id] ?? '#333';
              cells.push({ x: px * CELL, y: py * CELL, color, opacity: 1 });
            }
          }
        }
    }
    return { skiaActiveCells: cells, skiaActiveBombs: bombs };
  }, [piece, theme.colors]);


  const modeInfo = GAME_MODES[gameMode];
  const bestScore = allStats.modeBest[gameMode] || 0;
  const comboCount = gs.current.combo;
  const ghostEnhance = effects.ghostEnhance;
  const invisibleOutlineDepth = gameMode === 'invisible'
    ? (INVISIBLE_OUTLINE_DEPTH[invisiblePerfLevel] ?? 2)
    : 6;

  // ── 渲染 ─────────────────────────────────────────────────────────────────────
  return (
    <SafeAreaProvider>
      <CyberBackground theme={theme} enabled={bgEnabled} playing={started && !paused && !gameOver} />
      <SafeAreaView style={[styles.safe]} edges={['top', 'bottom']}>
        <StatusBar barStyle="light-content" backgroundColor="transparent" translucent={true} />

        {/* 顶栏 */}
        <GameHeader score={score} bestScore={bestScore} level={level} lines={lines}
          theme={theme} modeInfo={modeInfo}
          equippedSkills={equippedSkills} effects={effects}
          comboCount={comboCount} gameMode={gameMode} />

        {/* 棋盘 + 侧边栏 */}
        <View style={styles.gameRow}>
          <ReAnimated.View style={[
            styles.board,
            { width: BOARD_W, height: BOARD_H },
            isFrozen && { shadowColor: '#00BFFF', shadowOpacity: 0.8, shadowRadius: 12, elevation: 8 },
            boardShakeStyle,
          ]}>
            {/* Skia 棋盘 — 替代 200 个 <View> 格子 */}
            <SkiaBoard
              grid={grid}
              cellSize={CELL}
              boardW={BOARD_W}
              boardH={BOARD_H}
              theme={theme}
              invisibleOutlineDepth={invisibleOutlineDepth}
              ghostEnhance={ghostEnhance}
              flashProgress={flashProgress}
              flashOverlay={flashOverlayRef.current}
              borderColor={isFrozen ? '#00BFFF' : theme.boardBorder}
              isGlowing={isFrozen}
              activeCells={skiaActiveCells}
              activeBombs={skiaActiveBombs}
              ghostCells={skiaGhostCells}
            />

            <ParticleLayer particles={particles} cellSize={CELL} boardW={BOARD_W} boardH={BOARD_H} />
            <FpsMonitor visible={fpsVisible} />

            {(!started || gameOver || paused) && (
              <View style={[styles.overlay, { backgroundColor: theme.overlayBg }]}>
                {gameOver ? (
                  <>
                    <Text style={[styles.overlayTitle, {
                      color: theme.titleColor,
                      textShadowColor: theme.titleGlow
                    }]}>游戏结束</Text>
                    <Text style={[styles.overlayScore, { color: theme.scoreColor }]}>得分：{score}</Text>
                    {score > prevBestRef.current && score > 0 &&
                      <Text style={styles.overlayNew}>新纪录!</Text>}
                    <TouchableOpacity style={[styles.overlayBtn, { borderColor: theme.titleColor }]}
                      onPress={() => startGame(gameMode)}>
                      <Text style={[styles.overlayBtnText, { color: theme.titleColor }]}>再来一局</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.overlayBtn, { borderColor: modeInfo.color, marginTop: 8 }]}
                      onPress={() => setShowModes(true)}>
                      <Text style={[styles.overlayBtnText, { color: modeInfo.color }]}>换个模式</Text>
                    </TouchableOpacity>
                  </>
                ) : paused ? (
                  <>
                    <Text style={[styles.overlayTitle, {
                      color: theme.titleColor,
                      textShadowColor: theme.titleGlow
                    }]}>已暂停</Text>
                    <TouchableOpacity style={[styles.overlayBtn, { borderColor: theme.titleColor }]}
                      onPress={togglePause}>
                      <Text style={[styles.overlayBtnText, { color: theme.titleColor }]}>继续游戏</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.overlayBtn, { borderColor: theme.titleColor, marginTop: 8 }]}
                      onPress={restartGame}>
                      <Text style={[styles.overlayBtnText, { color: theme.titleColor }]}>再来一局</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.overlayBtn, { borderColor: modeInfo.color, marginTop: 8 }]}
                      onPress={() => setShowModes(true)}>
                      <Text style={[styles.overlayBtnText, { color: modeInfo.color }]}>切换模式</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.overlayBtn, { borderColor: '#FF3131', marginTop: 8 }]}
                      onPress={handleGameOver}>
                      <Text style={[styles.overlayBtnText, { color: '#FF3131' }]}>结束游戏</Text>
                    </TouchableOpacity>
                  </>
                ) : (
                  <>
                    <Text style={[styles.overlayTitle, {
                      color: theme.titleColor,
                      textShadowColor: theme.titleGlow
                    }]}>霓虹方块</Text>
                    <TouchableOpacity style={[styles.overlayBtn, { borderColor: theme.titleColor }]}
                      onPress={() => setShowModes(true)}>
                      <Text style={[styles.overlayBtnText, { color: theme.titleColor }]}>开始游戏</Text>
                    </TouchableOpacity>
                  </>
                )}
              </View>
            )}
          </ReAnimated.View>

          {/* 侧边栏 */}
          <GameSidePanel
            nextQueue={nextQueue} holdKeys={holdKeys} holdUsed={holdUsed}
            effects={effects} theme={theme} gameMode={gameMode}
            equippedSkills={equippedSkills} started={started} gameOver={gameOver}
            skillCharge={skillCharge} bombNextReady={bombNextReady} isFrozen={isFrozen}
            useActiveSkill={useActiveSkill} hold={hold}
          />
        </View>

        {/* 控制区 */}
        <GestureHandlerRootView style={{ width: '100%' }}>
          <GameControls
            gameMode={gameMode} theme={theme}
            started={started} paused={paused} gameOver={gameOver}
            onMovePressIn={onMovePressIn} onMovePressOut={onMovePressOut}
            rotate={rotate}
            moveLeft={moveLeft} moveRight={moveRight}
            onSoftPressIn={onSoftPressIn} onSoftPressOut={onSoftPressOut}
            hardDrop={hardDrop}
            onMenuPress={() => setShowMenu(true)}
            menuDisabled={started && !paused && !gameOver}
            hasBadge={!(started && !paused && !gameOver) && (
              getClaimableCount(task.taskState, allStats) > 0 ||
              SKILL_IDS.some(id => canUnlock(id, treeState, stars)) ||
              hasEquipBadge
            )}
            togglePause={togglePause}
          />
        </GestureHandlerRootView>

        {starToast !== null && <StarResultToast starsEarned={starToast} visible={true} />}

        <ModeSelector visible={showModes} onSelect={startGame}
          onClose={() => setShowModes(false)} theme={theme}
          unlockedModes={effects.unlockedModes}
          unlockedGrids={effects.unlockedGrids}
          gridPreset={gridPreset}
          startLevelMax={effects.startLevelMax}
          startLevel={startLevel}
          onStartLevelChange={setStartLevel}
          endlessLevel={endlessLevel}
          onEndlessLevelChange={setEndlessLevel} />
        <MenuPanel visible={showMenu} onClose={() => setShowMenu(false)} theme={theme}
          onOpenTasks={task.openTasks}
          hasTaskBadge={getClaimableCount(task.taskState, allStats) > 0}
          hasSkillBadge={SKILL_IDS.some(id => canUnlock(id, treeState, stars)) || hasEquipBadge}
          fxConfig={fxConfig}
          onToggleFx={toggleFx}
          fxSpeed={fxSpeed}
          onChangeFxSpeed={changeFxSpeed}
          hapticsEnabled={hapticsEnabled}
          onToggleHaptics={toggleHaptics}
          bgEnabled={bgEnabled}
          onToggleBg={toggleBg}
          ghostEnabled={ghostEnabled}
          onToggleGhost={toggleGhost}
          stats={allStats}
          stars={stars}
          history={gameHistory}
          treeState={treeState}
          onUnlock={handleUnlockSkill}
          equippedSkills={equippedSkills}
          hasEquipBadge={hasEquipBadge}
          onEquipSkill={(skillId, slot) => {
            const newEquipped = [...equippedSkills];
            const otherSlot = slot === 0 ? 1 : 0;
            if (newEquipped[otherSlot] === skillId) newEquipped[otherSlot] = null;
            if (newEquipped[slot] === skillId) {
              newEquipped[slot] = null;
            } else {
              newEquipped[slot] = skillId;
            }
            setEquippedSkills(newEquipped);
            saveEquippedSkills(newEquipped);
          }}
          onSelectTheme={saveTheme}
          taskState={task.taskState}
          onClaimAchievement={task.handleClaimAchievement}
          onClaimDaily={task.handleClaimDaily}
          onDevStars={task.handleDevStars}
          onDevReset={task.handleDevReset}
          fpsVisible={fpsVisible}
          onToggleFps={() => setFpsVisible(v => !v)} />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

// ─── 样式已提取至 src/styles/appStyles.js ──────────────────────────────────