import { ArrowLeft, Loader2 } from 'lucide-react';
import {
  type CSSProperties,
  type Dispatch,
  type PointerEvent,
  type SetStateAction,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';

import jumpHopRuntimeLevelLogo from '../../../media/logo.png';
import type {
  JumpHopRuntimeRunSnapshotResponse,
  JumpHopTileFaceAsset,
  JumpHopTileAsset,
  JumpHopWorkProfileResponse,
} from '../../../packages/shared/src/contracts/jumpHop';
import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
import {
  isGeneratedLegacyPath,
  readAssetBytes,
} from '../../services/assetReadUrlService';
import type { JumpHopRuntimeRequestOptions } from '../../services/jump-hop/jumpHopClient';
import {
  buildJumpHopVisiblePlatforms,
  formatJumpHopDurationLabel,
  getJumpHopCharacterVisualPosition,
  getJumpHopJumpFeedbackLabel,
  getJumpHopBackendDragVector,
  getJumpHopLandingAssistVisualPosition,
  getJumpHopPlatformVisualSize,
  getJumpHopRunDurationMs,
  getJumpHopStatusLabel,
  getJumpHopTileTone,
  type JumpHopCharacterVisualPosition,
  type JumpHopVisiblePlatform,
  resolveJumpHopCharacterCanvasPosition,
  selectJumpHopTileAsset,
} from '../../services/jump-hop/jumpHopRuntimeModel';
import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
import { PlatformActionButton } from '../common/PlatformActionButton';
import { RuntimeResourcePendingMarker } from '../common/RuntimeResourcePendingMarker';

type JumpHopRuntimeJumpPayload = {
  dragDistance: number;
  dragVectorX: number;
  dragVectorY: number;
};

type JumpHopVisualJump = {
  from: JumpHopCharacterVisualPosition;
  to: JumpHopCharacterVisualPosition;
};

type JumpHopPlatformRenderItem = JumpHopVisiblePlatform & {
  renderKey: string;
  advanceState: 'exiting' | 'camera' | 'idle';
};

type JumpHopTilePreloadItem = {
  textureKey: string;
  asset: JumpHopTileAsset;
};

type JumpHopTileFaceKey = 'top' | 'front' | 'right' | 'back' | 'left' | 'bottom';

type JumpHopTileTextureSource = {
  imageSrc: string;
  imageObjectKey?: string;
  assetObjectId?: string;
  tileId?: string;
};

type JumpHopRuntimeShellProps = {
  profile?: JumpHopWorkProfileResponse | null;
  run?: JumpHopRuntimeRunSnapshotResponse | null;
  snapshot?: JumpHopRuntimeRunSnapshotResponse | null;
  isBusy?: boolean;
  error?: string | null;
  runtimeRequestOptions?: JumpHopRuntimeRequestOptions;
  onJump: (payload: JumpHopRuntimeJumpPayload) => Promise<unknown>;
  onRestart: () => void;
  onExit?: () => void;
  onBack?: () => void;
};

const MAX_CHARGE_RATIO = 1;
const DEFAULT_MAX_DRAG_DISTANCE_PX = 180;
const JUMP_HOP_ANIMATION_DURATION_MS = 560;
const JUMP_HOP_LANDING_RECOIL_DURATION_MS = 560;
const JUMP_HOP_PLATFORM_ADVANCE_DURATION_MS = 1440;
const JUMP_HOP_PLATFORM_RETAIN_OFFSCREEN_SCREEN_Y = 122;
const JUMP_HOP_CAMERA_ZOOM = 1.3;
const JUMP_HOP_TAONIER_CHARACTER_IMAGE_SRC =
  '/branding/jump-hop-taonier-character.png';
const JUMP_HOP_TILE_PRELOAD_LOOKAHEAD_COUNT = 3;
const JUMP_HOP_TILE_FACE_KEYS: JumpHopTileFaceKey[] = [
  'top',
  'front',
  'right',
  'back',
  'left',
  'bottom',
];
const JUMP_HOP_THREE_CAMERA_PITCH_RAD = Math.PI / 4;
const JUMP_HOP_THREE_CAMERA_PITCH_COS = Math.cos(
  JUMP_HOP_THREE_CAMERA_PITCH_RAD,
);
export const JUMP_HOP_THREE_CAMERA_UP_Y = 1;
const JUMP_HOP_THREE_CAMERA_DISTANCE_MULTIPLIER = 1.34;

function clamp(value: number, min: number, max: number) {
  return Math.min(max, Math.max(min, value));
}

function formatJumpHopCssNumber(value: number) {
  if (!Number.isFinite(value)) {
    return '0';
  }
  return value.toFixed(4).replace(/\.?0+$/, '');
}

function getRun(
  run: JumpHopRuntimeRunSnapshotResponse | null | undefined,
  snapshot: JumpHopRuntimeRunSnapshotResponse | null | undefined,
) {
  return run ?? snapshot ?? null;
}

function hasJumpHopRunDisplayChange(
  current: JumpHopRuntimeRunSnapshotResponse,
  next: JumpHopRuntimeRunSnapshotResponse,
) {
  return (
    current.currentPlatformIndex !== next.currentPlatformIndex ||
    current.status !== next.status ||
    current.successfulJumpCount !== next.successfulJumpCount ||
    current.durationMs !== next.durationMs ||
    current.score !== next.score ||
    current.combo !== next.combo ||
    current.finishedAtMs !== next.finishedAtMs ||
    current.lastJump?.targetPlatformIndex !== next.lastJump?.targetPlatformIndex ||
    current.lastJump?.result !== next.lastJump?.result ||
    current.lastJump?.chargeMs !== next.lastJump?.chargeMs
  );
}

function shouldAnimateJumpHopPlatformAdvance(
  current: JumpHopRuntimeRunSnapshotResponse,
  next: JumpHopRuntimeRunSnapshotResponse,
) {
  return (
    current.runId === next.runId &&
    next.currentPlatformIndex > current.currentPlatformIndex &&
    next.status === 'playing'
  );
}

function buildJumpHopCharacterVisualPositionFromPlatform(
  platform: JumpHopVisiblePlatform,
  isMiss = false,
): JumpHopCharacterVisualPosition {
  if (isMiss) {
    return {
      screenX: platform.screenX + 8,
      screenY: platform.screenY - 2,
      sceneX: platform.sceneX + 0.7,
      sceneY: platform.sceneY + 0.48,
      sceneZ: platform.sceneZ - 0.4,
      isMiss: true,
    };
  }

  return {
    screenX: platform.screenX,
    screenY: platform.screenY - 3,
    sceneX: platform.sceneX,
    sceneY: platform.sceneY + 0.84,
    sceneZ: platform.sceneZ,
    isMiss: false,
  };
}

function getJumpHopRunLandingVisualPosition({
  run,
  platforms,
  stageSize,
}: {
  run: JumpHopRuntimeRunSnapshotResponse;
  platforms: JumpHopVisiblePlatform[];
  stageSize: { width: number; height: number };
}) {
  const lastJump = run.lastJump;
  if (!lastJump || stageSize.width <= 0 || stageSize.height <= 0) {
    return null;
  }

  return getJumpHopCharacterVisualPosition(run, platforms, stageSize);
}

function getJumpHopThreeCubeSide(
  platform: JumpHopVisiblePlatform['platform'],
  scale: number,
) {
  const platformSize = getJumpHopPlatformVisualSize(platform, scale);
  return Math.max(56, Math.min(platformSize.width, platformSize.height) * 0.86);
}

export function getJumpHopThreeProjectedY(
  screenY: number,
  viewportHeight: number,
) {
  return (
    viewportHeight / 2 +
    (viewportHeight / 2 - screenY) / JUMP_HOP_THREE_CAMERA_PITCH_COS
  );
}

function IsometricFallbackTile({
  platform,
}: {
  platform: JumpHopVisiblePlatform['platform'];
}) {
  const tone = getJumpHopTileTone(platform.tileType);
  const style = {
    '--jump-hop-tile-tone': tone,
  } as CSSProperties;

  return (
    <div
      className="jump-hop-runtime__fallback-tile"
      style={style}
      aria-hidden="true"
    >
      <div className="jump-hop-runtime__fallback-top" />
      <div className="jump-hop-runtime__fallback-side jump-hop-runtime__fallback-side--left" />
      <div className="jump-hop-runtime__fallback-side jump-hop-runtime__fallback-side--right" />
    </div>
  );
}

function getJumpHopTileAssetRefreshKey(
  asset: JumpHopTileTextureSource | null | undefined,
) {
  return asset?.assetObjectId || asset?.imageObjectKey || asset?.tileId || null;
}

function getJumpHopTileFaceAsset(
  asset: JumpHopTileAsset | null | undefined,
  face: JumpHopTileFaceKey,
): JumpHopTileFaceAsset | null {
  return asset?.faceAssets?.[face] ?? null;
}

function getJumpHopTileTextureSource(
  asset: JumpHopTileAsset | null | undefined,
  face?: JumpHopTileFaceKey,
): JumpHopTileTextureSource | null {
  const faceAsset = face ? getJumpHopTileFaceAsset(asset, face) : null;
  if (faceAsset?.imageSrc) {
    return {
      imageSrc: faceAsset.imageSrc,
      imageObjectKey: faceAsset.imageObjectKey,
      assetObjectId: faceAsset.assetObjectId,
      tileId: `${asset?.tileId ?? asset?.sourceAtlasCell ?? 'tile'}-${face}`,
    };
  }
  if (!asset?.imageSrc) {
    return null;
  }
  return {
    imageSrc: asset.imageSrc,
    imageObjectKey: asset.imageObjectKey,
    assetObjectId: asset.assetObjectId,
    tileId: asset.tileId ?? asset.sourceAtlasCell,
  };
}

function getJumpHopTileTextureKey(renderKey: string, face: JumpHopTileFaceKey) {
  return `${renderKey}::${face}`;
}

function getJumpHopTileTextureUrl(
  textureUrls: Record<string, string>,
  renderKey: string,
  face: JumpHopTileFaceKey,
) {
  return textureUrls[getJumpHopTileTextureKey(renderKey, face)] ?? textureUrls[renderKey] ?? '';
}

export function getJumpHopTileTextureSignature(
  textureUrls: Record<string, string>,
  renderKey: string,
  asset: JumpHopTileAsset | null | undefined,
) {
  if (!asset?.faceAssets) {
    return textureUrls[renderKey] ?? '';
  }

  return JUMP_HOP_TILE_FACE_KEYS.map((face) =>
    getJumpHopTileTextureUrl(textureUrls, renderKey, face),
  ).join('|');
}

function hasJumpHopTileTexturesReady(
  textureUrls: Record<string, string>,
  renderKey: string,
  asset: JumpHopTileAsset | null | undefined,
) {
  if (!asset?.imageSrc) {
    return true;
  }
  if (!asset.faceAssets) {
    return Boolean(textureUrls[renderKey]);
  }
  return JUMP_HOP_TILE_FACE_KEYS.every((face) =>
    Boolean(textureUrls[getJumpHopTileTextureKey(renderKey, face)]),
  );
}

function getJumpHopActiveTextureKeys(
  renderKey: string,
  asset: JumpHopTileAsset | null | undefined,
) {
  if (!asset?.faceAssets) {
    return [renderKey];
  }
  return [
    renderKey,
    ...JUMP_HOP_TILE_FACE_KEYS.map((face) =>
      getJumpHopTileTextureKey(renderKey, face),
    ),
  ];
}

function buildJumpHopTileTextureEntries(
  asset: JumpHopTileAsset,
  textureKey: string,
) {
  if (!asset.faceAssets) {
    const source = getJumpHopTileTextureSource(asset);
    return source ? [{ textureKey, source }] : [];
  }

  return JUMP_HOP_TILE_FACE_KEYS.map((face) => ({
    textureKey: getJumpHopTileTextureKey(textureKey, face),
    source: getJumpHopTileTextureSource(asset, face),
  })).filter(
    (item): item is { textureKey: string; source: JumpHopTileTextureSource } =>
      Boolean(item.source?.imageSrc),
  );
}

function isJumpHopGeneratedBackgroundSource(source: string | null | undefined) {
  const value = source?.trim() ?? '';
  if (!value) {
    return false;
  }
  return !(
    value.startsWith('/generated-jump-hop-assets/') &&
    (value.endsWith('/cover-composite.png') || value.includes('/cover-composite-'))
  );
}

function JumpHopTileImage({
  asset,
  platform,
  textureKey,
  onResolvedTextureUrl,
}: {
  asset: JumpHopTileAsset | null;
  platform: JumpHopVisiblePlatform['platform'];
  textureKey?: string;
  onResolvedTextureUrl?: (
    textureKey: string,
    resolvedUrl: string,
    options?: { parentOwnedObjectUrl?: boolean },
  ) => void;
}) {
  const textureSource = getJumpHopTileTextureSource(asset, 'top');
  const assetRefreshKey = getJumpHopTileAssetRefreshKey(textureSource);
  const { resolvedUrl, isResolving } = useResolvedAssetReadUrl(
    textureSource?.imageSrc,
    {
      refreshKey: assetRefreshKey,
    },
  );
  const [isLoaded, setIsLoaded] = useState(false);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    setIsLoaded(false);
    setHasError(false);
  }, [resolvedUrl]);

  const shouldShowImage = Boolean(resolvedUrl && !hasError);
  const shouldShowFallback = !shouldShowImage;

  useEffect(() => {
    if (!textureKey || !onResolvedTextureUrl) {
      return;
    }

    let disposed = false;
    const assetSource = textureSource?.imageSrc?.trim() ?? '';
    const publishTextureUrl = (
      url: string,
      options?: { parentOwnedObjectUrl?: boolean },
    ) => {
      if (!disposed) {
        onResolvedTextureUrl(textureKey, url, options);
      }
    };

    publishTextureUrl('');
    if (!assetSource || !shouldShowImage || !isLoaded) {
      return () => {
        disposed = true;
      };
    }

    if (!isGeneratedLegacyPath(assetSource)) {
      publishTextureUrl(resolvedUrl ?? '');
      return () => {
        disposed = true;
      };
    }

    // 中文注释：Three.js 纹理不能直接依赖跨域 OSS 签名 URL；转同源字节为 blob，避免 bucket CORS 导致 WebGL 贴图失败。
    void readAssetBytes(assetSource)
      .then((response) => response.blob())
      .then((blob) => {
        if (disposed) {
          return;
        }
        publishTextureUrl(URL.createObjectURL(blob), {
          parentOwnedObjectUrl: true,
        });
      })
      .catch(() => {
        publishTextureUrl('');
      });

    return () => {
      disposed = true;
      onResolvedTextureUrl(textureKey, '');
    };
  }, [
    isLoaded,
    onResolvedTextureUrl,
    resolvedUrl,
    shouldShowImage,
    textureSource?.imageSrc,
    textureKey,
  ]);

  return (
    <div className="jump-hop-runtime__tile-image-stack">
      <RuntimeResourcePendingMarker
        source={textureSource?.imageSrc}
        kind="image"
        isPending={isResolving}
      />
      {shouldShowFallback ? <IsometricFallbackTile platform={platform} /> : null}
      {asset?.faceAssets && textureKey
        ? buildJumpHopTileTextureEntries(asset, textureKey).map((item) => (
            <JumpHopTileTextureImage
              key={item.textureKey}
              source={item.source}
              textureKey={item.textureKey}
              onResolvedTextureUrl={onResolvedTextureUrl}
            />
          ))
        : null}
      {shouldShowImage ? (
        <img
          src={resolvedUrl}
          alt=""
          draggable={false}
          data-testid="jump-hop-tile-image"
          data-tile-id={asset?.tileId ?? asset?.sourceAtlasCell}
          className="jump-hop-runtime__tile-image"
          data-loaded={isLoaded || shouldShowImage ? 'true' : 'false'}
          onLoad={() => {
            setIsLoaded(true);
          }}
          onError={() => {
            setHasError(true);
          }}
        />
      ) : null}
    </div>
  );
}

function JumpHopTileTextureImage({
  source,
  textureKey,
  onResolvedTextureUrl,
}: {
  source: JumpHopTileTextureSource;
  textureKey: string;
  onResolvedTextureUrl?: (
    textureKey: string,
    resolvedUrl: string,
    options?: { parentOwnedObjectUrl?: boolean },
  ) => void;
}) {
  const assetRefreshKey = getJumpHopTileAssetRefreshKey(source);
  const { resolvedUrl, isResolving } = useResolvedAssetReadUrl(source.imageSrc, {
    refreshKey: assetRefreshKey,
  });

  useEffect(() => {
    if (!textureKey || !onResolvedTextureUrl) {
      return undefined;
    }

    let disposed = false;
    const assetSource = source.imageSrc?.trim() ?? '';
    const publishTextureUrl = (
      url: string,
      options?: { parentOwnedObjectUrl?: boolean },
    ) => {
      if (!disposed) {
        onResolvedTextureUrl(textureKey, url, options);
      }
    };

    if (!assetSource || !resolvedUrl) {
      return () => {
        disposed = true;
      };
    }

    if (!isGeneratedLegacyPath(assetSource)) {
      publishTextureUrl(resolvedUrl);
      return () => {
        disposed = true;
      };
    }

    void readAssetBytes(assetSource)
      .then((response) => response.blob())
      .then((blob) => {
        if (disposed) {
          return;
        }
        publishTextureUrl(URL.createObjectURL(blob), {
          parentOwnedObjectUrl: true,
        });
      })
      .catch(() => {});

    return () => {
      disposed = true;
    };
  }, [
    onResolvedTextureUrl,
    resolvedUrl,
    source.imageSrc,
    textureKey,
  ]);

  if (!resolvedUrl) {
    return (
      <RuntimeResourcePendingMarker
        source={source.imageSrc}
        kind="image"
        isPending={isResolving}
      />
    );
  }

  return (
    <>
      <RuntimeResourcePendingMarker
        source={source.imageSrc}
        kind="image"
        isPending={isResolving}
      />
      <img
        src={resolvedUrl}
        alt=""
        aria-hidden="true"
        draggable={false}
        data-testid="jump-hop-tile-preload-image"
        className="jump-hop-runtime__tile-preload-image"
      />
    </>
  );
}

function JumpHopTilePreloadImage({
  asset,
  textureKey,
  onResolvedTextureUrl,
}: {
  asset: JumpHopTileAsset;
  textureKey: string;
  onResolvedTextureUrl?: (
    textureKey: string,
    resolvedUrl: string,
    options?: { parentOwnedObjectUrl?: boolean },
  ) => void;
}) {
  const sources = buildJumpHopTileTextureEntries(asset, textureKey);

  return (
    <>
      {sources.map((item) => (
        <JumpHopTileTextureImage
          key={item.textureKey}
          source={item.source}
          textureKey={item.textureKey}
          onResolvedTextureUrl={onResolvedTextureUrl}
        />
      ))}
    </>
  );
}

function hasJumpHopWebGLSupport() {
  if (import.meta.env.MODE === 'test') {
    return false;
  }

  try {
    const canvas = document.createElement('canvas');
    return Boolean(canvas.getContext('webgl2') ?? canvas.getContext('webgl'));
  } catch {
    return false;
  }
}

function applyJumpHopCanvasLayout(canvas: HTMLCanvasElement) {
  canvas.style.display = 'block';
  canvas.style.height = '100%';
  canvas.style.inset = '0';
  canvas.style.position = 'absolute';
  canvas.style.width = '100%';
}

function disposeJumpHopThreeObject(object: import('three').Object3D) {
  object.traverse((child) => {
    const mesh = child as import('three').Mesh;
    mesh.geometry?.dispose();
    const material = mesh.material;
    if (Array.isArray(material)) {
      material.forEach((item) => item.dispose());
    } else {
      material?.dispose();
    }
  });
}

function JumpHopThreeScene({
  characterPosition,
  chargeRatio,
  isJumpAnimating,
  platforms,
  platformCount,
  renderCharacter,
  textureUrlsByRenderKey,
  onCharacterLayerReadyChange,
  onPlatformLayerReadyChange,
}: {
  characterPosition: JumpHopCharacterVisualPosition | null;
  chargeRatio: number;
  isJumpAnimating: boolean;
  platforms: JumpHopPlatformRenderItem[];
  platformCount: number;
  renderCharacter: boolean;
  textureUrlsByRenderKey: Record<string, string>;
  onCharacterLayerReadyChange: Dispatch<SetStateAction<boolean>>;
  onPlatformLayerReadyChange: Dispatch<SetStateAction<boolean>>;
}) {
  const hostRef = useRef<HTMLDivElement | null>(null);
  const characterPositionRef = useRef(characterPosition);
  const chargeRatioRef = useRef(chargeRatio);
  const isJumpAnimatingRef = useRef(isJumpAnimating);
  const platformsRef = useRef(platforms);
  const textureUrlsByRenderKeyRef = useRef(textureUrlsByRenderKey);

  useEffect(() => {
    characterPositionRef.current = characterPosition;
  }, [characterPosition]);

  useEffect(() => {
    chargeRatioRef.current = chargeRatio;
  }, [chargeRatio]);

  useEffect(() => {
    isJumpAnimatingRef.current = isJumpAnimating;
  }, [isJumpAnimating]);

  useEffect(() => {
    platformsRef.current = platforms;
  }, [platforms]);

  useEffect(() => {
    textureUrlsByRenderKeyRef.current = textureUrlsByRenderKey;
  }, [textureUrlsByRenderKey]);

  useEffect(() => {
    const host = hostRef.current;
    if (!host) {
      return undefined;
    }

    onCharacterLayerReadyChange(false);
    onPlatformLayerReadyChange(false);
    host.replaceChildren();
    const fallbackCanvas = document.createElement('canvas');
    applyJumpHopCanvasLayout(fallbackCanvas);
    fallbackCanvas.setAttribute('data-testid', 'jump-hop-three-canvas');
    host.appendChild(fallbackCanvas);

    if (!hasJumpHopWebGLSupport()) {
      return () => {
        onCharacterLayerReadyChange(false);
        onPlatformLayerReadyChange(false);
        fallbackCanvas.remove();
      };
    }

    let disposed = false;
    let animationId: number | null = null;
    let cleanup: (() => void) | null = null;

    const setup = async () => {
      const [three, roundedBoxModule] = await Promise.all([
        import('three'),
        import('three/examples/jsm/geometries/RoundedBoxGeometry.js'),
      ]);
      if (disposed || !hostRef.current) {
        return;
      }

      const renderer = new three.WebGLRenderer({
        alpha: true,
        antialias: true,
        canvas: fallbackCanvas,
      });
      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.8));
      renderer.outputColorSpace = three.SRGBColorSpace;
      renderer.sortObjects = true;

      const scene = new three.Scene();
      scene.background = null;

      const camera = new three.OrthographicCamera(
        -160,
        160,
        284,
        -284,
        1,
        2400,
      );
      // 中文注释：保持 Three 平台层和 DOM 角色层的屏幕 X 轴同向，避免 WebGL 地块左右镜像后让跳跃看起来反向。
      camera.up.set(0, JUMP_HOP_THREE_CAMERA_UP_Y, 0);

      scene.add(new three.AmbientLight(0xffffff, 1.22));
      const keyLight = new three.DirectionalLight(0xffffff, 2.45);
      keyLight.position.set(-90, 105, 110);
      scene.add(keyLight);
      const fillLight = new three.DirectionalLight(0xfef3c7, 0.82);
      fillLight.position.set(110, 96, 70);
      scene.add(fillLight);
      const rimLight = new three.DirectionalLight(0xffedd5, 0.64);
      rimLight.position.set(120, 44, 120);
      scene.add(rimLight);

      const character = renderCharacter ? new three.Group() : null;
      if (character) {
        const body = new three.Mesh(
          new three.CapsuleGeometry(10, 22, 8, 18),
          new three.MeshStandardMaterial({
            color: 0xdf7f40,
            roughness: 0.74,
          }),
        );
        body.position.y = -28;
        const head = new three.Mesh(
          new three.SphereGeometry(11, 28, 20),
          new three.MeshStandardMaterial({
            color: 0xf59e0b,
            roughness: 0.7,
          }),
        );
        head.position.y = -62;
        const accent = new three.Mesh(
          new three.BoxGeometry(15, 7, 7),
          new three.MeshStandardMaterial({
            color: 0x2563eb,
            roughness: 0.64,
          }),
        );
        accent.position.set(0, -36, 10);
        character.add(body, head, accent);
        scene.add(character);
      }

      const platformGroup = new three.Group();
      platformGroup.renderOrder = 20;
      scene.add(platformGroup);

      // 中文注释：平台几何只创建一份，运行态只做等比缩放，保持标准 1x1x1 立方体规格。
      const platformGeometry = new roundedBoxModule.RoundedBoxGeometry(
        1,
        1,
        1,
        2,
        0.035,
      );
      const shadowGeometry = new three.CircleGeometry(1, 48);
      const shadowMaterial = new three.MeshBasicMaterial({
        color: 0x0f172a,
        depthWrite: false,
        opacity: 0.16,
        transparent: true,
      });
      const textureLoader = new three.TextureLoader();
      textureLoader.setCrossOrigin('anonymous');
      const textureCache = new Map<string, import('three').Texture>();
      const materialCache = new Map<
        string,
        import('three').Material | import('three').Material[]
      >();
      const fallbackMaterialCache = new Map<string, import('three').Material>();
      let platformSignature = '';

      const getTexture = (url: string) => {
        const cached = textureCache.get(url);
        if (cached) {
          return cached;
        }

        const texture = textureLoader.load(url, () => {
          renderer.render(scene, camera);
        });
        texture.colorSpace = three.SRGBColorSpace;
        texture.wrapS = three.ClampToEdgeWrapping;
        texture.wrapT = three.ClampToEdgeWrapping;
        texture.anisotropy = Math.min(renderer.capabilities.getMaxAnisotropy(), 6);
        textureCache.set(url, texture);
        return texture;
      };

      const getPlatformMaterial = (
        item: JumpHopPlatformRenderItem,
        textureUrls: Record<string, string>,
      ) => {
        const textureUrl = getJumpHopTileTextureUrl(
          textureUrls,
          item.renderKey,
          'top',
        );
        if (item.asset?.faceAssets && textureUrl) {
          const cacheKey = JUMP_HOP_TILE_FACE_KEYS.map((face) =>
            getJumpHopTileTextureUrl(textureUrls, item.renderKey, face),
          ).join('|');
          const cached = materialCache.get(cacheKey);
          if (cached) {
            return cached;
          }

          // 中文注释：Three.js Box/RoundedBox 材质顺序为 right, left, top, bottom, front, back。
          const materials = [
            'right',
            'left',
            'top',
            'bottom',
            'front',
            'back',
          ].map((face) => {
            const faceUrl =
              getJumpHopTileTextureUrl(
                textureUrls,
                item.renderKey,
                face as JumpHopTileFaceKey,
              ) || textureUrl;
            return new three.MeshStandardMaterial({
              alphaTest: 0.04,
              map: getTexture(faceUrl),
              metalness: 0,
              roughness: 0.76,
              transparent: true,
            });
          });
          materialCache.set(cacheKey, materials);
          return materials;
        }

        if (textureUrl) {
          const cached = materialCache.get(textureUrl);
          if (cached) {
            return cached;
          }

          const material = new three.MeshStandardMaterial({
            alphaTest: 0.04,
            map: getTexture(textureUrl),
            metalness: 0,
            roughness: 0.76,
            transparent: true,
          });
          materialCache.set(textureUrl, material);
          return material;
        }

        const tone = getJumpHopTileTone(item.platform.tileType);
        const cached = fallbackMaterialCache.get(tone);
        if (cached) {
          return cached;
        }

        const material = new three.MeshStandardMaterial({
          color: new three.Color(tone),
          metalness: 0,
          roughness: 0.82,
        });
        fallbackMaterialCache.set(tone, material);
        return material;
      };

      const viewportSize = {
        width: 320,
        height: 568,
      };

      const syncCamera = () => {
        const distance =
          Math.max(viewportSize.width, viewportSize.height) *
          JUMP_HOP_THREE_CAMERA_DISTANCE_MULTIPLIER;
        const targetX = viewportSize.width / 2;
        const targetY = viewportSize.height / 2;
        camera.left = -viewportSize.width / 2;
        camera.right = viewportSize.width / 2;
        camera.top = viewportSize.height / 2;
        camera.bottom = -viewportSize.height / 2;
        camera.position.set(
          targetX,
          targetY -
            Math.cos(JUMP_HOP_THREE_CAMERA_PITCH_RAD) * distance,
          Math.sin(JUMP_HOP_THREE_CAMERA_PITCH_RAD) * distance,
        );
        camera.lookAt(targetX, targetY, 0);
        camera.updateProjectionMatrix();
        camera.updateMatrixWorld();
      };

      const syncPlatformMeshes = () => {
        const nextPlatforms = platformsRef.current;
        const textureUrls = textureUrlsByRenderKeyRef.current;
        const nextSignature = nextPlatforms
          .map((item) => {
            const cubeSide = getJumpHopThreeCubeSide(
              item.platform,
              item.scale,
            );
            return [
              item.renderKey,
              item.platform.platformId,
              item.screenX.toFixed(3),
              item.screenY.toFixed(3),
              item.scale.toFixed(3),
              cubeSide.toFixed(2),
              getJumpHopTileTextureSignature(
                textureUrls,
                item.renderKey,
                item.asset,
              ),
              item.advanceState,
            ].join(':');
          })
          .join('|');

        if (nextSignature === platformSignature) {
          return;
        }

        platformSignature = nextSignature;
        platformGroup.clear();

        nextPlatforms.forEach((item) => {
          const cubeSide = getJumpHopThreeCubeSide(item.platform, item.scale);
          const root = new three.Group();
          const rootBaseX = (item.screenX / 100) * viewportSize.width;
          const rootBaseY = getJumpHopThreeProjectedY(
            (item.screenY / 100) * viewportSize.height,
            viewportSize.height,
          );
          root.position.set(rootBaseX, rootBaseY, 0);
          root.renderOrder = 20 + item.index;
          root.userData = {
            advanceState: item.advanceState,
            baseX: rootBaseX,
            baseY: rootBaseY,
          };

          const shadow = new three.Mesh(shadowGeometry, shadowMaterial);
          shadow.position.set(0, cubeSide * 0.32, -9);
          shadow.scale.set(
            Math.max(24, cubeSide * 0.48),
            Math.max(7, cubeSide * 0.13),
            1,
          );
          shadow.renderOrder = 10 + item.index;

          const mesh = new three.Mesh(
            platformGeometry,
            getPlatformMaterial(item, textureUrls),
          );
          mesh.position.set(0, 0, 0);
          mesh.rotation.set(0, 0, 0);
          mesh.scale.setScalar(cubeSide);
          mesh.renderOrder = 30 + item.index;

          root.add(shadow, mesh);
          platformGroup.add(root);
        });
      };

      const resize = () => {
        const rect = host.getBoundingClientRect();
        const width = Math.max(1, rect.width || host.clientWidth || 320);
        const height = Math.max(1, rect.height || host.clientHeight || 568);
        viewportSize.width = width;
        viewportSize.height = height;
        renderer.setSize(width, height, false);
        syncCamera();
        platformSignature = '';
        syncPlatformMeshes();
        renderer.render(scene, camera);
      };

      const resizeObserver = window.ResizeObserver
        ? new window.ResizeObserver(resize)
        : null;
      resizeObserver?.observe(host);
      resize();
      onCharacterLayerReadyChange(Boolean(character));
      onPlatformLayerReadyChange(true);

      const animate = () => {
        syncPlatformMeshes();
        const nextCharacterPosition = characterPositionRef.current;
        if (character && nextCharacterPosition) {
          const nextChargeRatio = chargeRatioRef.current;
          const canvasPosition = resolveJumpHopCharacterCanvasPosition(
            nextCharacterPosition,
            viewportSize,
          );
          character.visible = true;
          character.position.set(canvasPosition?.x ?? 0, canvasPosition?.y ?? 0, 0);
          if (isJumpAnimatingRef.current) {
            const now = window.performance.now();
            character.rotation.z = Math.sin(now / 42) * 1.22;
            character.rotation.x = Math.sin(now / 28) * 0.28;
            character.rotation.y = Math.sin(now / 34) * 0.2;
            character.position.y += Math.sin(now / 26) * 8 - 14;
          } else {
            character.rotation.z = nextCharacterPosition.isMiss ? -0.32 : 0;
            character.rotation.x = 0;
            character.rotation.y = 0;
          }
          character.scale.set(
            1 + nextChargeRatio * 0.08,
            1 - nextChargeRatio * 0.12,
            1 + nextChargeRatio * 0.08,
          );
        } else if (character) {
          character.visible = false;
        }
        renderer.render(scene, camera);
        animationId = window.requestAnimationFrame(animate);
      };
      animate();

      cleanup = () => {
        if (animationId != null) {
          window.cancelAnimationFrame(animationId);
        }
        resizeObserver?.disconnect();
        disposeJumpHopThreeObject(scene);
        textureCache.forEach((texture) => texture.dispose());
        materialCache.forEach((material) => {
          if (Array.isArray(material)) {
            material.forEach((item) => item.dispose());
          } else {
            material.dispose();
          }
        });
        fallbackMaterialCache.forEach((material) => material.dispose());
        shadowMaterial.dispose();
        platformGeometry.dispose();
        shadowGeometry.dispose();
        renderer.dispose();
        onCharacterLayerReadyChange(false);
        onPlatformLayerReadyChange(false);
      };
    };

    void setup();

    return () => {
      disposed = true;
      cleanup?.();
      fallbackCanvas.remove();
      host.replaceChildren();
    };
  }, [
    onCharacterLayerReadyChange,
    onPlatformLayerReadyChange,
    renderCharacter,
  ]);

  return (
    <div
      ref={hostRef}
      data-testid="jump-hop-three-scene"
      className="jump-hop-runtime__three-scene"
      style={{ pointerEvents: 'none', zIndex: 42 }}
      data-platform-count={platformCount}
    />
  );
}

function JumpHopLeaderboardPanel({
  profileId,
  runtimeRequestOptions,
}: {
  profileId?: string | null;
  runtimeRequestOptions?: JumpHopRuntimeRequestOptions;
}) {
  const { leaderboard, isLoading, error } = useJumpHopLeaderboard(
    profileId,
    runtimeRequestOptions,
  );
  const items = leaderboard?.items ?? [];

  return (
    <aside
      data-testid="jump-hop-runtime-leaderboard"
      className="jump-hop-runtime__leaderboard"
    >
      <div className="flex items-center justify-between gap-2">
        <div className="text-xs font-black text-slate-700">排行榜</div>
        {isLoading ? (
          <Loader2 className="h-3.5 w-3.5 animate-spin text-slate-500" />
        ) : null}
      </div>
      <div className="mt-2 grid gap-1.5">
        {items.slice(0, 3).map((entry) => (
          <div
            key={`${entry.rank}-${entry.playerId}`}
            className="grid grid-cols-[1.5rem_minmax(0,1fr)_auto_auto] items-center gap-2 text-xs font-bold text-slate-700"
          >
            <span className="text-slate-400">{entry.rank}</span>
            <span className="truncate">
              {entry.displayName?.trim() || '玩家'}
            </span>
            <span>{entry.successfulJumpCount} 跳</span>
            <span>{formatJumpHopDurationLabel(entry.durationMs)}</span>
          </div>
        ))}
        {items.length === 0 ? (
          <div className="text-xs font-bold text-slate-500">
            {error ?? '暂无成绩'}
          </div>
        ) : null}
      </div>
    </aside>
  );
}

export function JumpHopRuntimeShell({
  profile = null,
  run,
  snapshot,
  isBusy = false,
  error = null,
  runtimeRequestOptions,
  onExit,
  onBack,
  onRestart,
  onJump,
}: JumpHopRuntimeShellProps) {
  const activeRun = getRun(run, snapshot);
  const [displayRun, setDisplayRun] = useState(activeRun);
  const [isJumpAnimating, setIsJumpAnimating] = useState(false);
  const [isLandingRecoilAnimating, setIsLandingRecoilAnimating] =
    useState(false);
  const [isCharging, setIsCharging] = useState(false);
  const [dragDistance, setDragDistance] = useState(0);
  const [visualJump, setVisualJump] = useState<JumpHopVisualJump | null>(null);
  const [nowMs, setNowMs] = useState(() => Date.now());
  const [isThreeCharacterLayerReady, setIsThreeCharacterLayerReady] =
    useState(false);
  const [isThreePlatformLayerReady, setIsThreePlatformLayerReady] =
    useState(false);
  const [platformTextureUrlsByRenderKey, setPlatformTextureUrlsByRenderKey] =
    useState<Record<string, string>>({});
  const platformTextureParentObjectUrlsRef = useRef<Set<string>>(new Set());
  const [dragVector, setDragVector] = useState({ x: 0, y: 0 });
  const [jumpAnimationProgress, setJumpAnimationProgress] = useState(0);
  const [isPlatformAdvancing, setIsPlatformAdvancing] = useState(false);
  const [platformAdvanceExitingPlatforms, setPlatformAdvanceExitingPlatforms] =
    useState<JumpHopVisiblePlatform[]>([]);
  const [platformAdvanceCameraOffsetX, setPlatformAdvanceCameraOffsetX] =
    useState(0);
  const [platformAdvanceCameraOffsetY, setPlatformAdvanceCameraOffsetY] =
    useState(0);
  const [stageSize, setStageSize] = useState({ width: 0, height: 0 });
  const stageRef = useRef<HTMLElement | null>(null);
  const chargeStartedAtRef = useRef<number | null>(null);
  const chargeFrameRef = useRef<number | null>(null);
  const animationFrameRef = useRef<number | null>(null);
  const animationEndTimerRef = useRef<number | null>(null);
  const landingRecoilEndTimerRef = useRef<number | null>(null);
  const animationStartAtRef = useRef(0);
  const hasJumpAnimationReachedTargetRef = useRef(false);
  const platformAdvanceEndTimerRef = useRef<number | null>(null);
  const activeRunRef = useRef(activeRun);
  const displayRunRef = useRef(displayRun);
  const visiblePlatformsRef = useRef<JumpHopVisiblePlatform[]>([]);
  const tileAssetsRef = useRef(profile?.tileAssets);
  const stageBackgroundSource = [
    profile?.draft.coverComposite,
    profile?.summary.coverImageSrc,
  ].find(isJumpHopGeneratedBackgroundSource);
  const {
    resolvedUrl: stageBackgroundUrl,
    isResolving: isStageBackgroundResolving,
  } = useResolvedAssetReadUrl(stageBackgroundSource, {
    refreshKey: stageBackgroundSource,
  });
  const backButtonAssetSource =
    profile?.backButtonAsset?.imageSrc?.trim() ||
    profile?.draft.backButtonAsset?.imageSrc?.trim() ||
    null;
  const {
    resolvedUrl: backButtonAssetUrl,
    isResolving: isBackButtonAssetResolving,
  } = useResolvedAssetReadUrl(backButtonAssetSource, {
    refreshKey:
      profile?.backButtonAsset?.assetObjectId ||
      profile?.draft.backButtonAsset?.assetObjectId ||
      backButtonAssetSource ||
      undefined,
  });

  useEffect(() => {
    activeRunRef.current = activeRun;
  }, [activeRun]);

  useEffect(() => {
    displayRunRef.current = displayRun;
  }, [displayRun]);

  const stageRun = displayRun ?? activeRun;
  const maxDragDistancePx =
    stageRun?.path.scoring.maxChargeMs && stageRun.path.scoring.maxChargeMs > 0
      ? stageRun.path.scoring.maxChargeMs
      : DEFAULT_MAX_DRAG_DISTANCE_PX;
  const chargeRatio = clamp(
    dragDistance / maxDragDistancePx,
    0,
    MAX_CHARGE_RATIO,
  );
  const canJump = Boolean(
    activeRun &&
      activeRun.status === 'playing' &&
      !isBusy &&
      !isJumpAnimating &&
      !isPlatformAdvancing,
  );
  const exitHandler = onExit ?? onBack;
  const visiblePlatforms = useMemo(
    () =>
      buildJumpHopVisiblePlatforms(
        stageRun?.path,
        stageRun?.currentPlatformIndex ?? 0,
        profile?.tileAssets,
      ),
    [profile?.tileAssets, stageRun?.currentPlatformIndex, stageRun?.path],
  );
  const platformRenderItems = useMemo(() => {
    const exitingItems = platformAdvanceExitingPlatforms.map((item) => ({
      ...item,
      renderKey: item.platform.platformId,
      advanceState: 'exiting' as const,
    }));
    const visibleItems = visiblePlatforms.map((item) => ({
      ...item,
      renderKey: item.platform.platformId,
      advanceState: isPlatformAdvancing ? ('camera' as const) : ('idle' as const),
    }));

    return [...exitingItems, ...visibleItems];
  }, [
    isPlatformAdvancing,
    platformAdvanceExitingPlatforms,
    visiblePlatforms,
  ]);
  const platformRenderKeySignature = useMemo(
    () => platformRenderItems.map((item) => item.renderKey).join('|'),
    [platformRenderItems],
  );
  const shouldUseThreePlatformLayer = useMemo(
    () =>
      isThreePlatformLayerReady &&
      platformRenderItems.every((item) =>
        hasJumpHopTileTexturesReady(
          platformTextureUrlsByRenderKey,
          item.renderKey,
          item.asset,
        ),
      ),
    [
      isThreePlatformLayerReady,
      platformRenderItems,
      platformTextureUrlsByRenderKey,
    ],
  );
  const preloadTileAssets = useMemo(() => {
    const path = stageRun?.path;
    const tileAssets = profile?.tileAssets;
    const platforms = path?.platforms ?? [];
    const startIndex =
      (stageRun?.currentPlatformIndex ?? 0) + visiblePlatforms.length;
    const assets = new Map<string, JumpHopTilePreloadItem>();

    for (
      let index = startIndex;
      index <
      Math.min(
        platforms.length,
        startIndex + JUMP_HOP_TILE_PRELOAD_LOOKAHEAD_COUNT,
      );
      index += 1
    ) {
      const platform = platforms[index];
      if (!platform) {
        continue;
      }
      const asset = selectJumpHopTileAsset(
        tileAssets,
        path?.seed ?? null,
        index,
        platform.platformId,
      );
      if (!asset) {
        continue;
      }
      const key = platform.platformId;
      assets.set(key, {
        textureKey: platform.platformId,
        asset,
      });
    }

    return [...assets.values()];
  }, [
    profile?.tileAssets,
    stageRun?.currentPlatformIndex,
    stageRun?.path,
    visiblePlatforms.length,
  ]);
  const landingAssistStageSize =
    stageSize.width > 0 && stageSize.height > 0
      ? stageSize
      : { width: 320, height: 568 };
  const characterPosition = getJumpHopCharacterVisualPosition(
    stageRun,
    visiblePlatforms,
    landingAssistStageSize,
  );
  const currentPlatformOriginPosition = useMemo(() => {
    if (!stageRun) {
      return null;
    }
    const currentPlatform = visiblePlatforms.find(
      (item) => item.index === stageRun.currentPlatformIndex,
    );
    return currentPlatform
      ? buildJumpHopCharacterVisualPositionFromPlatform(currentPlatform)
      : null;
  }, [stageRun, visiblePlatforms]);
  const jumpTargetPlatform = useMemo(() => {
    if (!stageRun) {
      return null;
    }
    return (
      visiblePlatforms.find(
        (item) => item.index === stageRun.currentPlatformIndex + 1,
      ) ?? null
    );
  }, [stageRun, visiblePlatforms]);
  const targetDirection = useMemo(() => {
    const directionOrigin = currentPlatformOriginPosition ?? characterPosition;
    if (!directionOrigin || !jumpTargetPlatform) {
      return null;
    }
    const targetCharacterPosition =
      buildJumpHopCharacterVisualPositionFromPlatform(jumpTargetPlatform);
    const directionX = targetCharacterPosition.screenX - directionOrigin.screenX;
    const directionY = targetCharacterPosition.screenY - directionOrigin.screenY;
    const distance = Math.hypot(directionX, directionY);
    if (distance < 0.0001) {
      return null;
    }

    return {
      screenX: directionX,
      screenY: directionY,
      unitScreenX: directionX / distance,
      unitScreenY: directionY / distance,
    };
  }, [characterPosition, currentPlatformOriginPosition, jumpTargetPlatform]);
  const visualCharacterPosition = useMemo(() => {
    if (!characterPosition) {
      return null;
    }
    if (isJumpAnimating && visualJump) {
      return visualJump.to;
    }
    return characterPosition;
  }, [
    characterPosition,
    isJumpAnimating,
    visualJump,
  ]);
  const characterMotionStyle = useMemo(() => {
    const idleTransform = 'matrix(1, 0, 0, 1, 0, 0)';
    const recoilDistance = Math.hypot(dragVector.x, dragVector.y);
    const recoilUnitX =
      recoilDistance > 0
        ? dragVector.x / recoilDistance
        : targetDirection
          ? -targetDirection.unitScreenX
          : 0;
    const recoilUnitY =
      recoilDistance > 0
        ? dragVector.y / recoilDistance
        : targetDirection
          ? -targetDirection.unitScreenY
          : 0;
    let stretchTransform = idleTransform;

    if (isCharging) {
      const squashY = 1 - chargeRatio * 0.32;
      const squashX = 1 + chargeRatio * 0.1;
      stretchTransform = `scale(${formatJumpHopCssNumber(
        squashX,
      )}, ${formatJumpHopCssNumber(squashY)})`;
    }

    return {
      stretchTransform,
      flightFromX: visualJump
        ? `${formatJumpHopCssNumber(
            ((visualJump.from.screenX - visualJump.to.screenX) / 100) *
              landingAssistStageSize.width,
          )}px`
        : '0px',
      flightFromY: visualJump
        ? `${formatJumpHopCssNumber(
            ((visualJump.from.screenY - visualJump.to.screenY) / 100) *
              landingAssistStageSize.height,
          )}px`
        : '0px',
      recoilX: `${formatJumpHopCssNumber(recoilUnitX * 11)}px`,
      recoilY: `${formatJumpHopCssNumber(recoilUnitY * 11)}px`,
    };
  }, [
    chargeRatio,
    dragVector.x,
    dragVector.y,
    isCharging,
    landingAssistStageSize.height,
    landingAssistStageSize.width,
    targetDirection,
    visualJump,
  ]);
  const jumpFeedbackForDisplay = getJumpHopJumpFeedbackLabel(stageRun);
  const isSettled =
    stageRun?.status === 'failed' || stageRun?.status === 'cleared';
  const shouldShowFailureLeaderboard =
    stageRun?.status === 'failed' &&
    profile?.summary.publicationStatus === 'published';
  const successfulJumpCount = stageRun?.successfulJumpCount ?? 0;
  const durationLabel = formatJumpHopDurationLabel(
    getJumpHopRunDurationMs(stageRun, nowMs),
  );

  useEffect(() => {
    visiblePlatformsRef.current = visiblePlatforms;
  }, [visiblePlatforms]);

  useEffect(() => {
    const activeKeys = new Set([
      ...platformRenderItems.flatMap((item) =>
        getJumpHopActiveTextureKeys(item.renderKey, item.asset),
      ),
      ...preloadTileAssets.flatMap((item) =>
        getJumpHopActiveTextureKeys(item.textureKey, item.asset),
      ),
    ]);
    setPlatformTextureUrlsByRenderKey((current) => {
      let changed = false;
      const next: Record<string, string> = {};
      for (const [key, value] of Object.entries(current)) {
        if (activeKeys.has(key)) {
          next[key] = value;
        } else {
          changed = true;
          if (
            value.startsWith('blob:') &&
            platformTextureParentObjectUrlsRef.current.has(value)
          ) {
            URL.revokeObjectURL(value);
            platformTextureParentObjectUrlsRef.current.delete(value);
          }
        }
      }
      return changed ? next : current;
    });
  }, [platformRenderItems, platformRenderKeySignature, preloadTileAssets]);

  const handleResolvedPlatformTextureUrl = useCallback(
    (
      textureKey: string,
      resolvedUrl: string,
      options?: { parentOwnedObjectUrl?: boolean },
    ) => {
      setPlatformTextureUrlsByRenderKey((current) => {
        const previousUrl = current[textureKey];
        if (!resolvedUrl) {
          return current;
        }
        if (previousUrl === resolvedUrl) {
          return current;
        }
        if (
          previousUrl &&
          previousUrl.startsWith('blob:') &&
          platformTextureParentObjectUrlsRef.current.has(previousUrl)
        ) {
          URL.revokeObjectURL(previousUrl);
          platformTextureParentObjectUrlsRef.current.delete(previousUrl);
        }
        if (options?.parentOwnedObjectUrl && resolvedUrl.startsWith('blob:')) {
          platformTextureParentObjectUrlsRef.current.add(resolvedUrl);
        }
        return {
          ...current,
          [textureKey]: resolvedUrl,
        };
      });
    },
    [],
  );

  useEffect(() => {
    return () => {
      platformTextureParentObjectUrlsRef.current.forEach((url) => {
        URL.revokeObjectURL(url);
      });
      platformTextureParentObjectUrlsRef.current.clear();
    };
  }, []);

  useEffect(() => {
    tileAssetsRef.current = profile?.tileAssets;
  }, [profile?.tileAssets]);

  const clearPlatformAdvanceState = useCallback(() => {
    if (platformAdvanceEndTimerRef.current != null) {
      window.clearTimeout(platformAdvanceEndTimerRef.current);
      platformAdvanceEndTimerRef.current = null;
    }
    setIsPlatformAdvancing(false);
    setPlatformAdvanceExitingPlatforms([]);
    setPlatformAdvanceCameraOffsetX(0);
    setPlatformAdvanceCameraOffsetY(0);
  }, []);

  const clearLandingRecoilState = useCallback(() => {
    if (landingRecoilEndTimerRef.current != null) {
      window.clearTimeout(landingRecoilEndTimerRef.current);
      landingRecoilEndTimerRef.current = null;
    }
    setIsLandingRecoilAnimating(false);
  }, []);

  const stopChargeFrame = useCallback(() => {
    if (chargeFrameRef.current != null) {
      window.cancelAnimationFrame(chargeFrameRef.current);
      chargeFrameRef.current = null;
    }
  }, []);

  const beginPlatformAdvance = useCallback(
    (
      fromRun: JumpHopRuntimeRunSnapshotResponse,
      toRun: JumpHopRuntimeRunSnapshotResponse,
    ) => {
      if (!shouldAnimateJumpHopPlatformAdvance(fromRun, toRun)) {
        clearPlatformAdvanceState();
        return;
      }

      const fromVisiblePlatforms = visiblePlatformsRef.current;
      const toVisiblePlatforms = buildJumpHopVisiblePlatforms(
        toRun.path,
        toRun.currentPlatformIndex,
        tileAssetsRef.current,
      );
      const toPlatformIds = new Set(
        toVisiblePlatforms.map((item) => item.platform.platformId),
      );
      const fromLandingPosition =
        getJumpHopRunLandingVisualPosition({
          run: toRun,
          platforms: fromVisiblePlatforms,
          stageSize: landingAssistStageSize,
        }) ??
        (() => {
          const fromLandingPlatform = fromVisiblePlatforms.find(
            (item) => item.index === toRun.currentPlatformIndex,
          );
          return fromLandingPlatform
            ? buildJumpHopCharacterVisualPositionFromPlatform(
                fromLandingPlatform,
              )
            : null;
        })();
      const toLandingPosition =
        getJumpHopRunLandingVisualPosition({
          run: toRun,
          platforms: toVisiblePlatforms,
          stageSize: landingAssistStageSize,
        }) ??
        (() => {
          const toCurrentPlatform = toVisiblePlatforms.find(
            (item) => item.index === toRun.currentPlatformIndex,
          );
          return toCurrentPlatform
            ? buildJumpHopCharacterVisualPositionFromPlatform(
                toCurrentPlatform,
              )
            : null;
        })();
      const toCurrentPlatform = toVisiblePlatforms.find(
        (item) => item.index === toRun.currentPlatformIndex,
      );
      const fromLandingPlatform = fromVisiblePlatforms.find(
        (item) => item.index === toRun.currentPlatformIndex,
      );
      const cameraOffsetX =
        (fromLandingPosition?.screenX ?? fromLandingPlatform?.screenX ?? 0) -
        (toLandingPosition?.screenX ?? toCurrentPlatform?.screenX ?? 0);
      const cameraOffsetY = Math.max(
        0,
        (toLandingPosition?.screenY ?? toCurrentPlatform?.screenY ?? 0) -
          (fromLandingPosition?.screenY ?? fromLandingPlatform?.screenY ?? 0),
      );

      const movePlatformBehindCamera = (item: JumpHopVisiblePlatform) => ({
        ...item,
        screenX: item.screenX - cameraOffsetX,
        screenY: item.screenY + cameraOffsetY,
      });
      setPlatformAdvanceExitingPlatforms((currentRetainedPlatforms) => {
        const retainedPlatforms = currentRetainedPlatforms
          .filter((item) => !toPlatformIds.has(item.platform.platformId))
          .map(movePlatformBehindCamera);
        const newlyRetainedPlatforms = fromVisiblePlatforms
          .filter((item) => !toPlatformIds.has(item.platform.platformId))
          .map(movePlatformBehindCamera);
        const byPlatformId = new Map<string, JumpHopVisiblePlatform>();

        [...retainedPlatforms, ...newlyRetainedPlatforms].forEach((item) => {
          if (item.screenY < JUMP_HOP_PLATFORM_RETAIN_OFFSCREEN_SCREEN_Y) {
            byPlatformId.set(item.platform.platformId, item);
          }
        });

        return [...byPlatformId.values()];
      });
      setPlatformAdvanceCameraOffsetX(cameraOffsetX);
      setPlatformAdvanceCameraOffsetY(cameraOffsetY);
      setIsPlatformAdvancing(true);

      if (platformAdvanceEndTimerRef.current != null) {
        window.clearTimeout(platformAdvanceEndTimerRef.current);
      }
      platformAdvanceEndTimerRef.current = window.setTimeout(() => {
        platformAdvanceEndTimerRef.current = null;
        setIsPlatformAdvancing(false);
        setPlatformAdvanceCameraOffsetX(0);
        setPlatformAdvanceCameraOffsetY(0);
      }, JUMP_HOP_PLATFORM_ADVANCE_DURATION_MS);
    },
    [clearPlatformAdvanceState, landingAssistStageSize],
  );

  const finishJumpHopFlightAnimation = useCallback(
    (
      fromRun: JumpHopRuntimeRunSnapshotResponse,
      toRun: JumpHopRuntimeRunSnapshotResponse,
    ) => {
      if (
        fromRun.runId === toRun.runId &&
        hasJumpHopRunDisplayChange(fromRun, toRun)
      ) {
        beginPlatformAdvance(fromRun, toRun);
        setDisplayRun(toRun);
      }

      const shouldPlayLandingRecoil =
        toRun.lastJump && toRun.lastJump.result !== 'miss';
      if (shouldPlayLandingRecoil) {
        if (landingRecoilEndTimerRef.current != null) {
          window.clearTimeout(landingRecoilEndTimerRef.current);
        }
        setIsLandingRecoilAnimating(true);
        landingRecoilEndTimerRef.current = window.setTimeout(() => {
          landingRecoilEndTimerRef.current = null;
          setIsLandingRecoilAnimating(false);
        }, JUMP_HOP_LANDING_RECOIL_DURATION_MS);
      } else {
        clearLandingRecoilState();
      }

      setIsJumpAnimating(false);
      setJumpAnimationProgress(0);
      setVisualJump(null);
      hasJumpAnimationReachedTargetRef.current = false;
      setNowMs(Date.now());
    },
    [beginPlatformAdvance, clearLandingRecoilState],
  );

  useEffect(() => {
    if (stageRun?.status !== 'playing') {
      return undefined;
    }

    const timer = window.setInterval(() => {
      setNowMs(Date.now());
    }, 250);

    return () => window.clearInterval(timer);
  }, [stageRun?.runId, stageRun?.status]);

  useEffect(() => {
    const stage = stageRef.current;
    if (!stage) {
      return undefined;
    }

    const updateStageSize = () => {
      const rect = stage.getBoundingClientRect();
      setStageSize({
        width: rect.width,
        height: rect.height,
      });
    };

    updateStageSize();
    const resizeObserver = window.ResizeObserver
      ? new window.ResizeObserver(updateStageSize)
      : null;
    resizeObserver?.observe(stage);

    return () => {
      resizeObserver?.disconnect();
    };
  }, []);

  useEffect(() => {
    if (!activeRun) {
      if (animationFrameRef.current != null) {
        window.cancelAnimationFrame(animationFrameRef.current);
        animationFrameRef.current = null;
      }
      if (animationEndTimerRef.current != null) {
        window.clearTimeout(animationEndTimerRef.current);
        animationEndTimerRef.current = null;
      }
      clearPlatformAdvanceState();
      clearLandingRecoilState();
      hasJumpAnimationReachedTargetRef.current = false;
      setDisplayRun(null);
      setVisualJump(null);
      setIsJumpAnimating(false);
      setJumpAnimationProgress(0);
      setIsCharging(false);
      chargeStartedAtRef.current = null;
      stopChargeFrame();
      setDragDistance(0);
      setDragVector({ x: 0, y: 0 });
      setNowMs(Date.now());
      return;
    }

    if (!displayRun || displayRun.runId !== activeRun.runId) {
      if (animationFrameRef.current != null) {
        window.cancelAnimationFrame(animationFrameRef.current);
        animationFrameRef.current = null;
      }
      if (animationEndTimerRef.current != null) {
        window.clearTimeout(animationEndTimerRef.current);
        animationEndTimerRef.current = null;
      }
      clearPlatformAdvanceState();
      clearLandingRecoilState();
      hasJumpAnimationReachedTargetRef.current = false;
      setDisplayRun(activeRun);
      setVisualJump(null);
      setIsJumpAnimating(false);
      setJumpAnimationProgress(0);
      setIsCharging(false);
      chargeStartedAtRef.current = null;
      stopChargeFrame();
      setDragDistance(0);
      setDragVector({ x: 0, y: 0 });
      setNowMs(Date.now());
      return;
    }

    if (isJumpAnimating) {
      if (
        (jumpAnimationProgress >= 1 ||
          hasJumpAnimationReachedTargetRef.current) &&
        displayRun &&
        displayRun.runId === activeRun.runId &&
        hasJumpHopRunDisplayChange(displayRun, activeRun)
      ) {
        finishJumpHopFlightAnimation(displayRun, activeRun);
      }
      return;
    }

    if (hasJumpHopRunDisplayChange(displayRun, activeRun)) {
      clearPlatformAdvanceState();
      clearLandingRecoilState();
      setDisplayRun(activeRun);
    }
  }, [
    activeRun,
    clearLandingRecoilState,
    clearPlatformAdvanceState,
    displayRun,
    finishJumpHopFlightAnimation,
    isJumpAnimating,
    jumpAnimationProgress,
    stopChargeFrame,
  ]);

  useEffect(() => {
    return () => {
      if (animationFrameRef.current != null) {
        window.cancelAnimationFrame(animationFrameRef.current);
      }
      if (animationEndTimerRef.current != null) {
        window.clearTimeout(animationEndTimerRef.current);
      }
      if (platformAdvanceEndTimerRef.current != null) {
        window.clearTimeout(platformAdvanceEndTimerRef.current);
      }
      if (landingRecoilEndTimerRef.current != null) {
        window.clearTimeout(landingRecoilEndTimerRef.current);
      }
      if (chargeFrameRef.current != null) {
        window.cancelAnimationFrame(chargeFrameRef.current);
      }
    };
  }, []);

  useEffect(() => {
    if (!isJumpAnimating) {
      hasJumpAnimationReachedTargetRef.current = false;
      setJumpAnimationProgress(0);
      if (animationFrameRef.current != null) {
        window.cancelAnimationFrame(animationFrameRef.current);
        animationFrameRef.current = null;
      }
      if (animationEndTimerRef.current != null) {
        window.clearTimeout(animationEndTimerRef.current);
        animationEndTimerRef.current = null;
      }
      return undefined;
    }

    animationStartAtRef.current = window.performance.now();
    hasJumpAnimationReachedTargetRef.current = false;
    animationEndTimerRef.current = window.setTimeout(() => {
      animationEndTimerRef.current = null;
      hasJumpAnimationReachedTargetRef.current = true;
      setJumpAnimationProgress(1);
      const latestDisplayRun = displayRunRef.current;
      const latestActiveRun = activeRunRef.current;
      if (
        latestDisplayRun &&
        latestActiveRun &&
        latestDisplayRun.runId === latestActiveRun.runId &&
        hasJumpHopRunDisplayChange(latestDisplayRun, latestActiveRun)
      ) {
        finishJumpHopFlightAnimation(latestDisplayRun, latestActiveRun);
      }
    }, JUMP_HOP_ANIMATION_DURATION_MS);
    const tick = (now: number) => {
      if (hasJumpAnimationReachedTargetRef.current) {
        animationFrameRef.current = null;
        return;
      }
      const elapsed = now - animationStartAtRef.current;
      const progress = clamp(
        elapsed / JUMP_HOP_ANIMATION_DURATION_MS,
        0,
        1,
      );
      setJumpAnimationProgress(progress);
      if (progress < 1) {
        animationFrameRef.current = window.requestAnimationFrame(tick);
      } else {
        animationFrameRef.current = null;
      }
    };

    animationFrameRef.current = window.requestAnimationFrame(tick);

    return () => {
      if (animationFrameRef.current != null) {
        window.cancelAnimationFrame(animationFrameRef.current);
        animationFrameRef.current = null;
      }
      if (animationEndTimerRef.current != null) {
        window.clearTimeout(animationEndTimerRef.current);
        animationEndTimerRef.current = null;
      }
    };
  }, [finishJumpHopFlightAnimation, isJumpAnimating]);

  const beginCharge = (event: PointerEvent<HTMLElement>) => {
    if (!canJump) {
      return;
    }
    event.currentTarget.setPointerCapture?.(event.pointerId);
    chargeStartedAtRef.current = Date.now();
    stopChargeFrame();
    clearLandingRecoilState();
    setIsCharging(true);
    setDragDistance(0);
    setDragVector({ x: 0, y: 0 });

    const tick = () => {
      const chargeStartedAt = chargeStartedAtRef.current;
      if (chargeStartedAt == null) {
        chargeFrameRef.current = null;
        return;
      }

      const nextDragDistance = clamp(
        Date.now() - chargeStartedAt,
        0,
        maxDragDistancePx,
      );
      setDragDistance(nextDragDistance);
      if (nextDragDistance < maxDragDistancePx) {
        chargeFrameRef.current = window.requestAnimationFrame(tick);
        return;
      }
      chargeFrameRef.current = null;
    };

    chargeFrameRef.current = window.requestAnimationFrame(tick);
  };

  const finishCharge = async (event?: PointerEvent<HTMLElement>) => {
    if (!isCharging) {
      return;
    }
    if (event) {
      event.currentTarget.releasePointerCapture?.(event.pointerId);
    }

    const chargeStartedAt = chargeStartedAtRef.current;
    const nextDragDistance =
      chargeStartedAt == null
        ? 0
        : clamp(
            Date.now() - chargeStartedAt,
            0,
            maxDragDistancePx,
          );
    const predictionRun = stageRun ?? activeRun;
    const predictedLandingPosition =
      predictionRun && characterPosition
        ? getJumpHopLandingAssistVisualPosition(
            predictionRun,
            visiblePlatforms,
            characterPosition,
            landingAssistStageSize,
            nextDragDistance,
          )
        : null;
    if (characterPosition) {
      const predictionOrigin =
        currentPlatformOriginPosition ?? characterPosition;
      const visualDeltaX = predictedLandingPosition
        ? predictedLandingPosition.screenX - predictionOrigin.screenX
        : 0;
      const visualDeltaY = predictedLandingPosition
        ? predictedLandingPosition.screenY - predictionOrigin.screenY
        : 0;
      setVisualJump({
        from: characterPosition,
        to: predictedLandingPosition
          ? {
              ...characterPosition,
              screenX: clamp(characterPosition.screenX + visualDeltaX, 6, 94),
              screenY: clamp(characterPosition.screenY + visualDeltaY, 10, 92),
              isMiss: !predictedLandingPosition.isOnTargetPlatform,
            }
          : characterPosition,
      });
    } else {
      setVisualJump(null);
    }
    chargeStartedAtRef.current = null;
    stopChargeFrame();
    clearLandingRecoilState();
    setIsCharging(false);
    setJumpAnimationProgress(0);
    hasJumpAnimationReachedTargetRef.current = false;
    setIsJumpAnimating(true);
    setDragDistance(nextDragDistance);
    setDragVector({
      x: targetDirection ? -targetDirection.unitScreenX : 0,
      y: targetDirection ? -targetDirection.unitScreenY : 0,
    });
    const backendDragVector = getJumpHopBackendDragVector(
      predictionRun ?? activeRun,
      visiblePlatforms,
      landingAssistStageSize,
      targetDirection ? -targetDirection.unitScreenX : 0,
      targetDirection ? -targetDirection.unitScreenY : 0,
    );
    await onJump({
      dragDistance: nextDragDistance,
      dragVectorX: backendDragVector.dragVectorX,
      dragVectorY: backendDragVector.dragVectorY,
    });
  };

  const cancelCharge = () => {
    chargeStartedAtRef.current = null;
    stopChargeFrame();
    clearLandingRecoilState();
    hasJumpAnimationReachedTargetRef.current = false;
    setVisualJump(null);
    setIsCharging(false);
    setDragDistance(0);
    setDragVector({ x: 0, y: 0 });
  };

  return (
    <div className="platform-remap-surface jump-hop-runtime relative h-full min-h-dvh w-full overflow-hidden bg-[#fffdf9] text-slate-950">
      <RuntimeResourcePendingMarker
        source={stageBackgroundSource}
        kind="image"
        isPending={isStageBackgroundResolving}
      />
      <RuntimeResourcePendingMarker
        source={backButtonAssetSource}
        kind="image"
        isPending={isBackButtonAssetResolving}
      />
      <section
        ref={stageRef}
        data-testid="jump-hop-stage"
        data-charging={isCharging ? 'true' : 'false'}
        data-jump-animating={isJumpAnimating ? 'true' : 'false'}
        data-platform-advancing={isPlatformAdvancing ? 'true' : 'false'}
        className="jump-hop-runtime__stage absolute inset-0 h-full w-full touch-none select-none overflow-hidden"
        onPointerDown={beginCharge}
        onPointerUp={(event) => void finishCharge(event)}
        onPointerCancel={cancelCharge}
      >
        <div
          aria-hidden="true"
          className="jump-hop-runtime__scene-backdrop"
          data-has-background={stageBackgroundUrl ? 'true' : 'false'}
        >
          {stageBackgroundUrl ? (
            <img
              src={stageBackgroundUrl}
              alt=""
              draggable={false}
              data-testid="jump-hop-stage-background-image"
              className="jump-hop-runtime__scene-background-image"
            />
          ) : null}
        </div>
        <div
          data-testid="jump-hop-camera-layer"
          data-platform-advancing={isPlatformAdvancing ? 'true' : 'false'}
          data-three-platform-ready={shouldUseThreePlatformLayer ? 'true' : 'false'}
          className="jump-hop-runtime__camera-layer"
          style={
            {
              '--jump-hop-camera-shift-x': `${platformAdvanceCameraOffsetX}%`,
              '--jump-hop-camera-shift-y': `${-platformAdvanceCameraOffsetY}%`,
              '--jump-hop-camera-zoom': JUMP_HOP_CAMERA_ZOOM,
            } as CSSProperties
          }
        >
          <JumpHopThreeScene
            characterPosition={visualCharacterPosition}
            chargeRatio={chargeRatio}
            isJumpAnimating={isJumpAnimating}
            platforms={platformRenderItems}
            platformCount={platformRenderItems.length}
            renderCharacter={false}
            textureUrlsByRenderKey={platformTextureUrlsByRenderKey}
            onCharacterLayerReadyChange={setIsThreeCharacterLayerReady}
            onPlatformLayerReadyChange={setIsThreePlatformLayerReady}
          />

          {platformRenderItems.map((item) => {
            const { width, height } = getJumpHopPlatformVisualSize(
              item.platform,
              1,
            );
            const style = {
              left: `${item.screenX}%`,
              top: `${item.screenY}%`,
              width,
              height,
              '--jump-hop-platform-scale': item.scale,
              zIndex:
                item.advanceState === 'exiting' ? 12 + item.index : 20 + item.index,
            } as CSSProperties;
            const isCurrent =
              item.advanceState !== 'exiting' &&
              item.index === stageRun?.currentPlatformIndex;

            return (
              <div
                key={item.renderKey}
                className="jump-hop-runtime__platform"
                style={style}
                data-current={isCurrent ? 'true' : 'false'}
                data-advance-state={item.advanceState}
                data-platform-id={item.platform.platformId}
                data-platform-index={item.index}
              >
                <div className="jump-hop-runtime__platform-shadow" />
                <JumpHopTileImage
                  asset={item.asset}
                  platform={item.platform}
                  textureKey={item.renderKey}
                  onResolvedTextureUrl={handleResolvedPlatformTextureUrl}
                />
              </div>
            );
          })}

          {preloadTileAssets.length > 0 ? (
            <div className="jump-hop-runtime__tile-preload" aria-hidden="true">
              {preloadTileAssets.map((item) => (
                <JumpHopTilePreloadImage
                  key={item.textureKey}
                  asset={item.asset}
                  textureKey={item.textureKey}
                  onResolvedTextureUrl={handleResolvedPlatformTextureUrl}
                />
              ))}
            </div>
          ) : null}

          {visualCharacterPosition && !isThreeCharacterLayerReady ? (
            <div
              className="jump-hop-runtime__character"
              data-charging={isCharging ? 'true' : 'false'}
              data-jump-animating={isJumpAnimating ? 'true' : 'false'}
              data-landing-recoil={
                isLandingRecoilAnimating ? 'true' : 'false'
              }
              data-miss={visualCharacterPosition.isMiss ? 'true' : 'false'}
              style={
                {
                  left: `${visualCharacterPosition.screenX}%`,
                  top: `${visualCharacterPosition.screenY}%`,
                  '--jump-hop-charge': chargeRatio,
                  '--jump-hop-character-stretch-transform':
                    characterMotionStyle.stretchTransform,
                  '--jump-hop-flight-from-x':
                    characterMotionStyle.flightFromX,
                  '--jump-hop-flight-from-y':
                    characterMotionStyle.flightFromY,
                  '--jump-hop-recoil-x': characterMotionStyle.recoilX,
                  '--jump-hop-recoil-y': characterMotionStyle.recoilY,
                } as CSSProperties
              }
              >
                <div className="jump-hop-runtime__character-shadow" />
              <img
                src={JUMP_HOP_TAONIER_CHARACTER_IMAGE_SRC}
                alt=""
                draggable={false}
                className="jump-hop-runtime__character-image"
                data-testid="jump-hop-character-logo"
              />
            </div>
          ) : null}
        </div>

        {isCharging && characterPosition ? (
          <div
            aria-hidden="true"
            className="jump-hop-runtime__charge-guide"
            style={
              (() => {
                const anchorX =
                  stageSize.width * (characterPosition.screenX / 100);
                const anchorY =
                  stageSize.height * (characterPosition.screenY / 100);
                const lineLength = 42 + chargeRatio * 84;
                const ringSize = 56 + chargeRatio * 24;
                const angle =
                  targetDirection == null
                    ? -90
                    : (Math.atan2(
                        targetDirection.screenY,
                        targetDirection.screenX,
                      ) *
                        180) /
                      Math.PI;
                return {
                  '--jump-hop-anchor-x': `${anchorX}px`,
                  '--jump-hop-anchor-y': `${anchorY}px`,
                  '--jump-hop-charge': chargeRatio,
                  '--jump-hop-charge-ring-size': `${ringSize}px`,
                  '--jump-hop-charge-turn': `${chargeRatio}turn`,
                  '--jump-hop-guide-angle': `${angle}deg`,
                  '--jump-hop-guide-length': `${lineLength}px`,
                } as CSSProperties;
              })()
            }
          >
            <div className="jump-hop-runtime__charge-ring" />
            <div className="jump-hop-runtime__charge-line" />
            <div className="jump-hop-runtime__charge-core" />
          </div>
        ) : null}

        {jumpFeedbackForDisplay ? (
          <div
            key={`${stageRun?.currentPlatformIndex}-${stageRun?.lastJump?.result}`}
            className="jump-hop-runtime__feedback"
          >
            {jumpFeedbackForDisplay}
          </div>
        ) : null}

        {!stageRun ? (
          <div className="absolute inset-0 grid place-items-center bg-white/35 text-sm font-black text-slate-600 backdrop-blur-sm">
            等待开局
          </div>
        ) : null}

        {isSettled ? (
          <div className="absolute inset-0 z-[120] grid place-items-center bg-slate-950/28 px-6 backdrop-blur-[2px]">
            <div
              role="dialog"
              aria-modal="true"
              aria-labelledby="jump-hop-result-title"
              className="w-full max-w-[24rem] rounded-[1.25rem] border border-white/70 bg-white/90 p-4 text-center shadow-[0_18px_50px_rgba(15,23,42,0.22)]"
            >
              <div className="text-2xl font-black">
                <span id="jump-hop-result-title">
                  {getJumpHopStatusLabel(stageRun?.status)}
                </span>
              </div>
              <div className="mt-2 flex justify-center gap-4 text-sm font-bold text-slate-600">
                <span>{successfulJumpCount} 跳</span>
                <span>{durationLabel}</span>
              </div>
              {shouldShowFailureLeaderboard ? (
                <JumpHopLeaderboardPanel
                  profileId={profile?.summary.profileId}
                  runtimeRequestOptions={runtimeRequestOptions}
                />
              ) : null}
              <div className="mt-4 grid grid-cols-2 gap-2">
                <PlatformActionButton
                  onClick={onRestart}
                  disabled={isBusy}
                  className="min-h-11 px-3 py-2 text-sm"
                >
                  重开
                </PlatformActionButton>
                <PlatformActionButton
                  onClick={exitHandler}
                  tone="ghost"
                  className="min-h-11 bg-white px-3 py-2 text-sm"
                >
                  返回
                </PlatformActionButton>
              </div>
            </div>
          </div>
        ) : null}
      </section>

      <header className="pointer-events-none absolute inset-x-0 top-0 z-[130] grid grid-cols-[3.5rem_minmax(0,1fr)_3.5rem] items-start gap-2 px-3 pt-[calc(env(safe-area-inset-top,0px)+0.65rem)] sm:grid-cols-[3.875rem_minmax(0,1fr)_3.875rem] sm:px-4">
        <button
          type="button"
          onClick={exitHandler}
          aria-label="返回"
          title="返回"
          data-has-asset={backButtonAssetUrl ? 'true' : 'false'}
          className="jump-hop-runtime__back-button pointer-events-auto -mt-0.5 inline-flex h-14 w-14 items-center justify-center justify-self-start rounded-full transition hover:-translate-y-px hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 sm:-mt-1 sm:h-[3.875rem] sm:w-[3.875rem]"
        >
          {backButtonAssetUrl ? (
            <img
              src={backButtonAssetUrl}
              alt=""
              aria-hidden="true"
              draggable={false}
              data-testid="jump-hop-runtime-back-button-asset"
              className="jump-hop-runtime__back-button-image"
            />
          ) : (
            <ArrowLeft className="h-7 w-7 drop-shadow-[0_1px_2px_rgba(255,255,255,0.74)] sm:h-[2.1rem] sm:w-[2.1rem]" />
          )}
        </button>
        <div className="puzzle-runtime-header-card pointer-events-auto mx-auto flex max-w-[min(18.5rem,calc(100vw_-_8rem))] min-w-0 flex-col items-center text-center sm:max-w-[22rem]">
          <div className="puzzle-runtime-level-title-card jump-hop-runtime__score-title-card flex max-w-full items-center justify-center gap-2 px-3.5 py-1.5 sm:px-4">
            <span
              aria-hidden="true"
              className="puzzle-runtime-level-logo jump-hop-runtime__score-title-logo"
            >
              <img
                src={jumpHopRuntimeLevelLogo}
                alt=""
                data-testid="jump-hop-runtime-level-logo"
                className="puzzle-runtime-level-logo__image"
                draggable={false}
              />
            </span>
            <span className="puzzle-runtime-level-badge jump-hop-runtime__score-title-text text-[0.92rem] font-black sm:text-base">
              得分
            </span>
          </div>
          <div
            data-testid="jump-hop-score-card"
            className="puzzle-runtime-timer-card puzzle-runtime-timer jump-hop-runtime__score-value-card -mt-px inline-flex items-center justify-center gap-1.5 px-3.5 py-1.5 text-center font-mono text-lg font-black leading-none sm:text-xl"
          >
            <span>{successfulJumpCount}</span>
          </div>
        </div>
        <div aria-hidden="true" />
      </header>

      {error ? (
        <footer className="pointer-events-none absolute inset-x-0 bottom-[max(0.75rem,env(safe-area-inset-bottom))] z-[130] flex items-center justify-center px-3">
          <div className="pointer-events-auto min-w-0 rounded-full bg-white/82 px-3 py-2 text-sm font-bold text-[var(--platform-button-danger-text)] shadow-sm backdrop-blur">
            {error}
          </div>
        </footer>
      ) : null}

      <style>{`
        .jump-hop-runtime__stage {
          isolation: isolate;
          cursor: pointer;
        }

        .jump-hop-runtime__back-button {
          border: 2px solid rgba(255, 216, 173, 0.72);
          background:
            radial-gradient(circle at 38% 26%, rgba(255, 242, 216, 0.9), transparent 28%),
            linear-gradient(135deg, #d7803f 0%, #b95527 58%, #8e3e22 100%);
          color: #fffaf2;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.42),
            0 8px 18px rgba(86, 43, 18, 0.18);
        }

        .jump-hop-runtime__back-button[data-has-asset='true'] {
          border-color: transparent;
          background: transparent;
          box-shadow: none;
        }

        .jump-hop-runtime__back-button-image {
          width: 100%;
          height: 100%;
          object-fit: contain;
          pointer-events: none;
          user-select: none;
          filter: drop-shadow(0 8px 14px rgba(63, 36, 18, 0.22));
        }

        .jump-hop-runtime__score-title-card {
          padding-left: 3.35rem;
          padding-right: 3.35rem;
        }

        .jump-hop-runtime__score-title-logo {
          position: absolute;
          left: 0.45rem;
          top: 50%;
          margin: 0;
          transform: translateY(-50%);
        }

        .jump-hop-runtime__score-title-text {
          display: block;
          min-width: 2.5rem;
          text-align: center;
        }

        .jump-hop-runtime__score-value-card {
          justify-content: center;
          text-align: center;
        }

        .jump-hop-runtime__stage[data-charging='true'] {
          cursor: grabbing;
        }

        .jump-hop-runtime__scene-backdrop {
          position: absolute;
          inset: 0;
          z-index: 0;
          pointer-events: none;
          overflow: hidden;
          background:
            radial-gradient(circle at 18% 18%, rgba(253, 230, 138, 0.36), transparent 24%),
            radial-gradient(circle at 82% 22%, rgba(226, 171, 134, 0.34), transparent 28%),
            linear-gradient(180deg, #fffdf9 0%, #f8efe7 52%, #f4e5d7 100%);
        }

        .jump-hop-runtime__scene-backdrop[data-has-background='true'] {
          background: #f8efe7;
        }

        .jump-hop-runtime__scene-backdrop[data-has-background='true']::after {
          content: '';
          position: absolute;
          inset: 0;
          z-index: 2;
          background:
            radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.16), transparent 34%),
            linear-gradient(180deg, rgba(255, 253, 249, 0.08), rgba(50, 34, 24, 0.08));
        }

        .jump-hop-runtime__scene-background-image {
          position: absolute;
          inset: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 50% 50%;
          user-select: none;
        }

        .jump-hop-runtime__camera-layer {
          position: absolute;
          inset: 0;
          z-index: 2;
          pointer-events: none;
          transform: translate(0, 0) scale(var(--jump-hop-camera-zoom, 1));
          transform-origin: 50% 56%;
        }

        .jump-hop-runtime__camera-layer[data-platform-advancing='true'] {
          animation: jump-hop-camera-advance 1440ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
        }

        .jump-hop-runtime__three-scene {
          position: absolute;
          inset: 0;
          z-index: 42;
          pointer-events: none;
          overflow: hidden;
          background: transparent;
          opacity: 1;
          transition: opacity 120ms ease;
        }

        .jump-hop-runtime__camera-layer[data-three-platform-ready='false'] .jump-hop-runtime__three-scene {
          opacity: 0;
        }

        .jump-hop-runtime__platform {
          position: absolute;
          z-index: 8;
          transform: translate(-50%, -50%) scale(var(--jump-hop-platform-scale, 1));
          transform-origin: 50% 50%;
          display: grid;
          place-items: center;
          transition:
            left 480ms cubic-bezier(0.2, 0.78, 0.24, 1),
            top 480ms cubic-bezier(0.2, 0.78, 0.24, 1),
            transform 480ms cubic-bezier(0.2, 0.78, 0.24, 1),
            opacity 220ms ease;
        }

        .jump-hop-runtime__platform[data-advance-state='exiting'] {
          pointer-events: none;
        }

        .jump-hop-runtime__stage[data-platform-advancing='true'] .jump-hop-runtime__platform {
          transition:
            transform 1440ms cubic-bezier(0.2, 0.78, 0.24, 1),
            opacity 220ms ease;
        }

        .jump-hop-runtime__stage[data-platform-advancing='true'] .jump-hop-runtime__character {
          transition:
            transform 120ms ease,
            opacity 160ms ease;
        }

        .jump-hop-runtime__platform-shadow {
          position: absolute;
          left: 8%;
          right: 8%;
          bottom: -16%;
          height: 32%;
          border-radius: 999px;
          background: rgba(15, 82, 126, 0.18);
          filter: blur(7px);
        }

        .jump-hop-runtime__camera-layer[data-three-platform-ready='true'] .jump-hop-runtime__platform-shadow,
        .jump-hop-runtime__camera-layer[data-three-platform-ready='true'] .jump-hop-runtime__tile-image-stack {
          opacity: 0;
        }

        .jump-hop-runtime__tile-image {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
          image-rendering: auto;
          opacity: 0;
          transition: opacity 120ms ease;
        }

        .jump-hop-runtime__tile-image[data-loaded='true'] {
          opacity: 1;
        }

        .jump-hop-runtime__tile-image-stack {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }

        .jump-hop-runtime__tile-preload {
          position: absolute;
          left: -9999px;
          top: -9999px;
          width: 1px;
          height: 1px;
          overflow: hidden;
          opacity: 0;
          pointer-events: none;
        }

        .jump-hop-runtime__tile-preload-image {
          width: 1px;
          height: 1px;
        }

        .jump-hop-runtime__fallback-tile {
          position: relative;
          width: 100%;
          height: 100%;
          transform: rotateX(58deg) rotateZ(45deg);
          transform-style: preserve-3d;
        }

        .jump-hop-runtime__fallback-top {
          position: absolute;
          inset: 8%;
          border-radius: 14%;
          background:
            linear-gradient(135deg, rgba(255,255,255,0.8), transparent 44%),
            var(--jump-hop-tile-tone);
          border: 2px solid rgba(255, 255, 255, 0.86);
          box-shadow: inset -8px -8px 14px rgba(15, 23, 42, 0.08);
        }

        .jump-hop-runtime__fallback-side {
          position: absolute;
          background: color-mix(in srgb, var(--jump-hop-tile-tone) 72%, #0f766e);
          opacity: 0.88;
        }

        .jump-hop-runtime__fallback-side--left {
          left: 8%;
          bottom: -9%;
          width: 84%;
          height: 18%;
          transform: skewX(45deg);
          transform-origin: top;
        }

        .jump-hop-runtime__fallback-side--right {
          right: -9%;
          top: 8%;
          width: 18%;
          height: 84%;
          transform: skewY(45deg);
          transform-origin: left;
        }

        .jump-hop-runtime__character {
          position: absolute;
          z-index: 80;
          width: 4.7rem;
          height: 5.5rem;
          transform:
            translate(-50%, -100%)
            var(--jump-hop-character-stretch-transform);
          transform-origin: 50% 78%;
          transition:
            left 240ms ease,
            top 240ms ease,
            transform 120ms ease,
            opacity 160ms ease;
        }

        .jump-hop-runtime__character[data-jump-animating='true'] {
          animation: jump-hop-character-flight 560ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
          transition: opacity 160ms ease;
        }

        .jump-hop-runtime__character[data-jump-animating='true'] .jump-hop-runtime__character-image {
          animation: jump-hop-character-flip 560ms ease-out both;
        }

        .jump-hop-runtime__character[data-landing-recoil='true'] .jump-hop-runtime__character-image {
          animation: jump-hop-character-recoil 560ms cubic-bezier(0.18, 0.88, 0.24, 1) both;
        }

        .jump-hop-runtime__character[data-miss='true'] {
          opacity: 0.78;
          transform: translate(-50%, -72%) rotate(18deg) scale(0.88);
        }

        .jump-hop-runtime__character-shadow {
          position: absolute;
          left: 20%;
          right: 20%;
          bottom: 0.16rem;
          height: 0.86rem;
          border-radius: 999px;
          background: rgba(15, 23, 42, 0.18);
          filter: blur(3px);
          transform: scaleX(1);
          transition: transform 120ms ease;
        }

        .jump-hop-runtime__character[data-charging='true'] .jump-hop-runtime__character-shadow {
          transform: scaleX(calc(1 + (var(--jump-hop-charge) * 0.42)));
        }

        .jump-hop-runtime__character-image {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
          filter: drop-shadow(0 12px 10px rgba(15, 23, 42, 0.18));
        }

        .jump-hop-runtime__leaderboard {
          position: relative;
          z-index: 20;
          margin-top: 0.65rem;
          border: 1px solid rgba(255, 255, 255, 0.72);
          border-radius: 1rem;
          background: rgba(255, 255, 255, 0.72);
          box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
          padding: 0.75rem;
          backdrop-filter: blur(12px);
        }

        .jump-hop-runtime__character-fallback {
          position: absolute;
          left: 50%;
          bottom: 0.68rem;
          width: 2.3rem;
          height: 3.3rem;
          transform: translateX(-50%);
          border-radius: 999px 999px 0.9rem 0.9rem;
          background:
            radial-gradient(circle at 50% 22%, #fff 0 17%, transparent 18%),
            linear-gradient(180deg, #c7653d 0%, #df7f40 100%);
          box-shadow: inset 0 0 0 2px rgba(255,255,255,0.72), 0 12px 18px rgba(190, 80, 40, 0.24);
        }

        .jump-hop-runtime__feedback {
          position: absolute;
          left: 50%;
          top: 20%;
          z-index: 90;
          transform: translateX(-50%);
          border-radius: 999px;
          background: rgba(15, 23, 42, 0.74);
          color: white;
          padding: 0.42rem 0.86rem;
          font-size: 0.85rem;
          font-weight: 900;
          letter-spacing: 0;
          animation: jump-hop-feedback 900ms ease both;
        }

        .jump-hop-runtime__charge-guide {
          position: absolute;
          inset: 0;
          z-index: 85;
          pointer-events: none;
        }

        .jump-hop-runtime__charge-ring {
          position: absolute;
          left: var(--jump-hop-anchor-x);
          top: var(--jump-hop-anchor-y);
          width: var(--jump-hop-charge-ring-size);
          height: var(--jump-hop-charge-ring-size);
          margin-left: calc(var(--jump-hop-charge-ring-size) / -2);
          margin-top: calc(var(--jump-hop-charge-ring-size) / -2);
          border-radius: 999px;
          border: 2px solid rgba(250, 204, 21, 0.82);
          background:
            radial-gradient(circle, rgba(250, 204, 21, 0.2) 0 38%, transparent 39%),
            conic-gradient(
              from -90deg,
              rgba(194, 101, 64, 0.88) var(--jump-hop-charge-turn),
              rgba(255, 255, 255, 0.34) 0
            );
          box-shadow:
            0 0 0 5px rgba(255, 255, 255, 0.36),
            0 8px 18px rgba(194, 101, 64, 0.2);
          opacity: 0.95;
        }

        .jump-hop-runtime__charge-line {
          position: absolute;
          left: var(--jump-hop-anchor-x);
          top: var(--jump-hop-anchor-y);
          width: var(--jump-hop-guide-length);
          height: 3px;
          transform-origin: left center;
          transform: translateY(-1px) rotate(var(--jump-hop-guide-angle));
          border-radius: 999px;
          background: linear-gradient(90deg, rgba(250, 204, 21, 0.12), rgba(194, 101, 64, 0.82));
          box-shadow: 0 0 10px rgba(194, 101, 64, 0.2);
        }

        .jump-hop-runtime__charge-core {
          position: absolute;
          left: var(--jump-hop-anchor-x);
          top: var(--jump-hop-anchor-y);
          width: 0.82rem;
          height: 0.82rem;
          margin-left: -0.41rem;
          margin-top: -0.41rem;
          border-radius: 999px;
          background: #c7653d;
          box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.72),
            0 0 16px rgba(250, 204, 21, 0.48);
        }

        @keyframes jump-hop-feedback {
          0% {
            opacity: 0;
            transform: translate(-50%, 0.8rem) scale(0.96);
          }
          20%, 72% {
            opacity: 1;
            transform: translate(-50%, 0) scale(1);
          }
          100% {
            opacity: 0;
            transform: translate(-50%, -0.6rem) scale(1.02);
          }
        }

        @keyframes jump-hop-character-flip {
          0% {
            transform: translateY(0) rotate(0deg) scale(1);
          }
          40% {
            transform: translateY(-1.35rem) rotate(180deg) scale(1.12);
          }
          100% {
            transform: translateY(0.16rem) rotate(360deg) scale(1);
          }
        }

        @keyframes jump-hop-character-flight {
          0% {
            transform:
              translate(-50%, -100%)
              translate(
                var(--jump-hop-flight-from-x),
                var(--jump-hop-flight-from-y)
              )
              scale(0.98);
          }
          42% {
            transform:
              translate(-50%, -100%)
              translate(
                calc(var(--jump-hop-flight-from-x) * 0.48),
                calc(var(--jump-hop-flight-from-y) * 0.48 - 30px)
              )
              scale(1.04);
          }
          74% {
            transform:
              translate(-50%, -100%)
              translate(
                calc(var(--jump-hop-flight-from-x) * 0.14),
                calc(var(--jump-hop-flight-from-y) * 0.14 - 10px)
              )
              scale(1.015);
          }
          100% {
            transform:
              translate(-50%, -100%)
              translate(0, 0)
              scale(1);
          }
        }

        @keyframes jump-hop-character-recoil {
          0% {
            transform: translate(0, 0) scale(1);
          }
          18% {
            transform:
              translate(var(--jump-hop-recoil-x), var(--jump-hop-recoil-y))
              scale(1.05, 0.96);
          }
          34% {
            transform:
              translate(
                calc(var(--jump-hop-recoil-x) * -0.34),
                calc(var(--jump-hop-recoil-y) * -0.34)
              )
              scale(0.98, 1.03);
          }
          54% {
            transform:
              translate(
                calc(var(--jump-hop-recoil-x) * 0.62),
                calc(var(--jump-hop-recoil-y) * 0.62)
              )
              scale(1.03, 0.98);
          }
          76% {
            transform:
              translate(
                calc(var(--jump-hop-recoil-x) * -0.16),
                calc(var(--jump-hop-recoil-y) * -0.16)
              )
              scale(0.995, 1.01);
          }
          100% {
            transform: translate(0, 0) scale(1);
          }
        }

        @keyframes jump-hop-camera-advance {
          0% {
            transform:
              translate(
                var(--jump-hop-camera-shift-x),
                var(--jump-hop-camera-shift-y)
              )
              scale(var(--jump-hop-camera-zoom, 1));
          }
          100% {
            transform: translate(0, 0) scale(var(--jump-hop-camera-zoom, 1));
          }
        }

        @media (max-width: 430px) {
          .jump-hop-runtime__stage {
            min-height: 100%;
          }

          .jump-hop-runtime__character {
            width: 4.15rem;
            height: 4.95rem;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .jump-hop-runtime__feedback {
            animation: none;
          }

          .jump-hop-runtime__character-image {
            animation: none !important;
          }

          .jump-hop-runtime__camera-layer {
            animation: none;
          }

          .jump-hop-runtime__platform,
          .jump-hop-runtime__character {
            transition: none;
          }
        }
      `}</style>
    </div>
  );
}

export default JumpHopRuntimeShell;