import {
  ArrowLeft,
  CheckCircle2,
  Clock3,
  RotateCcw,
  Settings,
  XCircle,
} from 'lucide-react';
import {
  type CSSProperties,
  type PointerEvent,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from 'react';

import type {
  Match3DClickItemRequest,
  Match3DClickItemResult,
  Match3DItemSnapshot,
  Match3DRunSnapshot,
  Match3DTraySlot,
} from '../../../packages/shared/src/contracts/match3dRuntime';
import type {
  Match3DGeneratedBackgroundAsset,
  Match3DGeneratedItemAsset,
} from '../../../packages/shared/src/contracts/match3dWorks';
import {
  isGeneratedLegacyPath,
  readAssetBytes,
  resolveAssetReadUrl,
} from '../../services/assetReadUrlService';
import {
  getMatch3DGeneratedImageViewSources,
  normalizeMatch3DGeneratedItemAssetsForRuntime,
} from '../../services/match3dGeneratedModelCache';
import {
  buildMatch3DItemSpritesheetViewRegions,
  loadMatch3DSpritesheetAssetRegions,
  type Match3DDecodedSpritesheetRegion,
} from '../../services/match3dSpritesheetParser';
import {
  buildMatch3DTrayInsertionPlan,
  resolveMatch3DTrayItemIdToSlotIndexMap,
  syncMatch3DItemTraySlotIndexes,
} from '../../services/match3d-runtime/match3dTrayLayout';
import {
  DEFAULT_RUNTIME_LEVEL_AUDIO_CONFIG,
  playRuntimeClickSound,
  playRuntimeCountdownSound,
  playRuntimeLevelClearSound,
  playRuntimeMergeSound,
  resolveRuntimeCountdownSecondBucket,
} from '../../services/runtimeAudioFeedback';
import { useAuthUi } from '../auth/AuthUiContext';
import {
  findMatch3DHitItem,
  type Match3DAlphaHitMask,
  type Match3DGeneratedItemRelativeSize,
  type Match3DResolvedImageSourceEntry,
  resolveMatch3DImageSourceEntryForItem,
  resolveMatch3DItemSizeScale,
} from './match3dHotspot';
import {
  isItemState,
  isRunState,
  resolveRenderableItemFrame,
} from './match3dRuntimePresentation';
import {
  MATCH3D_RUNTIME_BOARD_BASE_CLASS,
  MATCH3D_RUNTIME_BOARD_FALLBACK_CLASS,
  MATCH3D_RUNTIME_BOARD_WIDTH,
  MATCH3D_RUNTIME_BOARD_WITH_CONTAINER_CLASS,
  MATCH3D_RUNTIME_CONTAINER_IMAGE_CLASS,
  MATCH3D_RUNTIME_CONTAINER_PLACEHOLDER_CLASS,
  MATCH3D_RUNTIME_GLASS_ICON_BUTTON_CLASS,
  MATCH3D_RUNTIME_GLASS_TRAY_CLASS,
  MATCH3D_RUNTIME_GLASS_TRAY_SLOT_CLASS,
  MATCH3D_RUNTIME_HEADER_CARD_CLASS,
  MATCH3D_RUNTIME_LEVEL_BADGE_CLASS,
  MATCH3D_RUNTIME_STAGE_CLASS,
  MATCH3D_RUNTIME_TIMER_CLASS,
  MATCH3D_RUNTIME_TIMER_URGENT_CLASS,
} from './match3dRuntimeUiStyles';
import { Match3DVisualIcon, resolveVisualSeed } from './match3dVisualAssets';

type Match3DRuntimeShellProps = {
  run: Match3DRunSnapshot | null;
  generatedItemAssets?: Match3DGeneratedItemAsset[];
  generatedBackgroundAsset?: Match3DGeneratedBackgroundAsset | null;
  backgroundImageSrc?: string | null;
  isBusy?: boolean;
  error?: string | null;
  embedded?: boolean;
  hideBackButton?: boolean;
  levelName?: string | null;
  onBack: () => void;
  onRestart: () => void;
  onOptimisticRunChange: (run: Match3DRunSnapshot) => void;
  onClickItem: (
    payload: Match3DClickItemRequest,
  ) => Promise<Match3DClickItemResult>;
  onTimeExpired?: () => void;
};

type PendingClick = {
  clientEventId: string;
  itemInstanceId: string;
  previousRun: Match3DRunSnapshot;
};

type Match3DFeedbackEvent = {
  id: string;
  kind: 'cleared' | 'rejected';
  itemIds: string[];
};

type Match3DBoardPoint = {
  x: number;
  y: number;
};

type Match3DTraySlotLayout = {
  left: number;
  top: number;
  width: number;
  height: number;
};

type Match3DTrayMovingItemAnimation = {
  itemInstanceId: string;
  offsetX: number;
  offsetY: number;
};

type Match3DFlyingTrayAnimation = {
  id: string;
  item: Match3DItemSnapshot;
  imageSrc: string;
  itemSize: Match3DGeneratedItemRelativeSize;
  fromX: number;
  fromY: number;
  toX: number;
  toY: number;
  fromSize: number;
  toSize: number;
};

type Match3DTrayClearAnimation = {
  id: string;
  items: Array<{
    itemInstanceId: string;
    itemTypeId: string;
    visualKey: string;
    imageSrc: string;
    itemSize: Match3DGeneratedItemRelativeSize;
    fromX: number;
    fromY: number;
    toX: number;
    toY: number;
    width: number;
    height: number;
  }>;
  centerX: number;
  centerY: number;
};

type Match3DItemSpritesheetViewGroup = {
  itemIndex: number;
  itemName: string;
  regions: Match3DDecodedSpritesheetRegion[];
};

function resolveTrayPreviewItem(
  run: Match3DRunSnapshot,
  slot: Match3DTraySlot,
) {
  if (!slot.itemInstanceId) {
    return null;
  }
  const item = run.items.find(
    (entry) => entry.itemInstanceId === slot.itemInstanceId,
  );
  if (!item) {
    return null;
  }
  return {
    ...item,
    itemTypeId: slot.itemTypeId ?? item.itemTypeId,
    visualKey: slot.visualKey ?? item.visualKey,
  };
}

const DEFAULT_MATCH3D_MUSIC_VOLUME = 0.42;
const EMPTY_MATCH3D_GENERATED_ITEM_ASSETS: Match3DGeneratedItemAsset[] = [];
const MATCH3D_CONTAINER_REFERENCE_SRC =
  '/match3d-background-references/pot-fused-reference.png';
const MATCH3D_UI_SPRITESHEET_LABELS = [
  '返回',
  '设置',
  '方格',
  '移出',
  '凑齐',
  '打乱',
] as const;
const MATCH3D_PROP_BUTTONS = [
  ['移出', 'match3d-ui-sprite-prop-remove'],
  ['凑齐', 'match3d-ui-sprite-prop-collect'],
  ['打乱', 'match3d-ui-sprite-prop-shuffle'],
] as const;

function formatTimer(value: number) {
  const totalSeconds = Math.max(0, Math.ceil(value / 1000));
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function formatElapsed(
  startedAtMs: number,
  remainingMs: number,
  durationLimitMs: number,
) {
  const elapsedMs = Math.max(0, durationLimitMs - remainingMs);
  const totalSeconds = Math.floor(elapsedMs / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function buildClientEventId(itemInstanceId: string) {
  return `match3d-click-${itemInstanceId}-${Date.now()}-${Math.round(
    Math.random() * 1_000_000,
  )}`;
}

function resolveBoardPointFromPointerEvent(
  event: Pick<PointerEvent<HTMLDivElement>, 'clientX' | 'clientY'>,
  stage: HTMLElement | null,
): Match3DBoardPoint | null {
  const rect = stage?.getBoundingClientRect();
  if (!rect || rect.width <= 0 || rect.height <= 0) {
    return null;
  }
  return {
    x: (event.clientX - rect.left) / rect.width,
    y: (event.clientY - rect.top) / rect.height,
  };
}

function compareMatch3DGeneratedTypeId(left: string, right: string) {
  const leftIndex = resolveMatch3DGeneratedItemIndex(left);
  const rightIndex = resolveMatch3DGeneratedItemIndex(right);
  if (leftIndex !== null && rightIndex !== null) {
    return leftIndex - rightIndex;
  }
  return left.localeCompare(right);
}

function resolveMatch3DGeneratedTypeIds(run: Match3DRunSnapshot) {
  return [...new Set(run.items.map((item) => item.itemTypeId.trim()))]
    .filter(Boolean)
    .sort(compareMatch3DGeneratedTypeId);
}

function resolveMatch3DGeneratedItemIndex(value: string | null | undefined) {
  const parsed = Number.parseInt(
    value?.match(/^match3d-(?:item|type)-0*(\d+)$/u)?.[1] ?? '',
    10,
  );
  return Number.isFinite(parsed) && parsed > 0 ? parsed - 1 : null;
}

function buildMatch3DImageSourcesByType(
  run: Match3DRunSnapshot | null,
  generatedItemAssets: readonly Match3DGeneratedItemAsset[],
  itemSpritesheetViewGroups: readonly Match3DItemSpritesheetViewGroup[] = [],
) {
  if (!run) {
    return new Map<string, string[]>();
  }
  const typeIds = resolveMatch3DGeneratedTypeIds(run);
  const readyAssets = generatedItemAssets.flatMap((asset, fallbackIndex) => {
    const sources = getMatch3DGeneratedImageViewSources(asset);
    return sources.length > 0
      ? [
          {
            fallbackIndex,
            itemIndex: resolveMatch3DGeneratedItemIndex(asset.itemId),
            sources,
          },
        ]
      : [];
  });
  const parsedAssets = itemSpritesheetViewGroups.flatMap((group) => {
    const sources = group.regions
      .map((region) => region.imageSrc.trim())
      .filter(Boolean);
    return sources.length > 0
      ? [
          {
            fallbackIndex: group.itemIndex,
            itemIndex: group.itemIndex,
            sources,
          },
        ]
      : [];
  });

  return new Map(
    typeIds.flatMap((typeId, index) => {
      const directIndex = resolveMatch3DGeneratedItemIndex(typeId);
      const asset =
        readyAssets.find(
          (entry) => directIndex !== null && entry.itemIndex === directIndex,
        ) ??
        readyAssets.find((entry) => entry.fallbackIndex === index) ??
        parsedAssets.find(
          (entry) => directIndex !== null && entry.itemIndex === directIndex,
        ) ??
        parsedAssets.find((entry) => entry.fallbackIndex === index);
      return asset ? [[typeId, asset.sources] as const] : [];
    }),
  );
}

function resolveMatch3DUiSpritesheetSource(
  generatedBackgroundAsset: Match3DGeneratedBackgroundAsset | null | undefined,
  generatedItemAssets: readonly Match3DGeneratedItemAsset[],
) {
  return (
    generatedBackgroundAsset?.uiSpritesheetImageSrc?.trim() ||
    generatedBackgroundAsset?.uiSpritesheetImageObjectKey?.trim() ||
    generatedItemAssets
      .map(
        (asset) =>
          asset.backgroundAsset?.uiSpritesheetImageSrc?.trim() ||
          asset.backgroundAsset?.uiSpritesheetImageObjectKey?.trim() ||
          '',
      )
      .find(Boolean) ||
    ''
  );
}

function resolveMatch3DItemSpritesheetSource(
  generatedBackgroundAsset: Match3DGeneratedBackgroundAsset | null | undefined,
  generatedItemAssets: readonly Match3DGeneratedItemAsset[],
) {
  return (
    generatedBackgroundAsset?.itemSpritesheetImageSrc?.trim() ||
    generatedBackgroundAsset?.itemSpritesheetImageObjectKey?.trim() ||
    generatedItemAssets
      .map(
        (asset) =>
          asset.backgroundAsset?.itemSpritesheetImageSrc?.trim() ||
          asset.backgroundAsset?.itemSpritesheetImageObjectKey?.trim() ||
          '',
      )
      .find(Boolean) ||
    ''
  );
}

function resolveMatch3DGeneratedContainerSource(
  generatedBackgroundAsset: Match3DGeneratedBackgroundAsset | null | undefined,
  generatedItemAssets: readonly Match3DGeneratedItemAsset[],
) {
  const normalize = (value: string | null | undefined) =>
    value?.trim().replace(/^\/+/u, '') ?? '';
  const resolveAssetContainerSource = (
    asset: Match3DGeneratedBackgroundAsset | null | undefined,
  ) => {
    const containerSrc = asset?.containerImageSrc?.trim() || '';
    const containerObjectKey = asset?.containerImageObjectKey?.trim() || '';
    const uiSrc = asset?.uiSpritesheetImageSrc?.trim() || '';
    const uiObjectKey = asset?.uiSpritesheetImageObjectKey?.trim() || '';

    if (
      normalize(containerSrc) &&
      normalize(containerSrc) !== normalize(uiSrc)
    ) {
      return containerSrc;
    }
    if (
      normalize(containerObjectKey) &&
      normalize(containerObjectKey) !== normalize(uiObjectKey)
    ) {
      return containerObjectKey;
    }
    return '';
  };

  return (
    resolveAssetContainerSource(generatedBackgroundAsset) ||
    generatedItemAssets
      .map((asset) => resolveAssetContainerSource(asset.backgroundAsset))
      .find(Boolean) ||
    ''
  );
}

function indexMatch3DUiSpritesheetRegions(
  regions: readonly Match3DDecodedSpritesheetRegion[],
) {
  return new Map(regions.map((region) => [region.label, region]));
}

function resolveMatch3DImageReadUrlCacheKey(
  imageSourcesByType: ReadonlyMap<string, readonly string[]>,
) {
  return resolveMatch3DImageReadUrlSources(imageSourcesByType).join('|');
}

function resolveMatch3DImageReadUrlSources(
  imageSourcesByType: ReadonlyMap<string, readonly string[]>,
) {
  return [
    ...new Set(
      [...imageSourcesByType.values()]
        .flatMap((sources) => sources)
        .map((source) => source.trim())
        .filter(Boolean),
    ),
  ]
    .sort()
    .filter(Boolean);
}

function resolveStaticMatch3DReadUrlMap(sources: readonly string[]) {
  return new Map(
    sources.flatMap((source) =>
      isGeneratedLegacyPath(source) ? [] : [[source, source] as const],
    ),
  );
}

function buildResolvedMatch3DImageSourceEntriesByType(
  imageSourcesByType: ReadonlyMap<string, readonly string[]>,
  resolvedImageSources: ReadonlyMap<string, string>,
) {
  return new Map(
    [...imageSourcesByType.entries()].map(([typeId, sources]) => [
      typeId,
      sources.flatMap((rawSource) => {
        const source = rawSource.trim();
        if (!source) {
          return [];
        }
        const resolvedSource = resolvedImageSources.get(source);
        if (resolvedSource) {
          return [{ source, resolvedSource }];
        }
        return isGeneratedLegacyPath(source)
          ? []
          : [{ source, resolvedSource: source }];
      }),
    ]),
  );
}

function resolveMatch3DAlphaHitMaskCacheKey(
  imageSourceEntriesByType: ReadonlyMap<
    string,
    readonly Match3DResolvedImageSourceEntry[]
  >,
) {
  return [
    ...new Set(
      [...imageSourceEntriesByType.values()].flatMap((entries) =>
        entries.map((entry) => entry.source.trim()).filter(Boolean),
      ),
    ),
  ]
    .sort()
    .join('|');
}

function normalizeMatch3DGeneratedItemSize(
  itemSize: Match3DGeneratedItemAsset['itemSize'] | null | undefined,
): Match3DGeneratedItemRelativeSize {
  const normalized = String(itemSize ?? '').trim();
  if (normalized === '小' || normalized.toLowerCase() === 'small') {
    return '小';
  }
  if (normalized === '中' || normalized.toLowerCase() === 'medium') {
    return '中';
  }
  return '大';
}

function buildMatch3DItemSizeByType(
  run: Match3DRunSnapshot | null,
  generatedItemAssets: readonly Match3DGeneratedItemAsset[],
) {
  if (!run) {
    return new Map<string, Match3DGeneratedItemRelativeSize>();
  }
  const typeIds = resolveMatch3DGeneratedTypeIds(run);
  const assets = generatedItemAssets.map((asset, fallbackIndex) => ({
    fallbackIndex,
    itemIndex: resolveMatch3DGeneratedItemIndex(asset.itemId),
    itemSize: normalizeMatch3DGeneratedItemSize(asset.itemSize),
  }));
  return new Map(
    typeIds.flatMap((typeId, index) => {
      const directIndex = resolveMatch3DGeneratedItemIndex(typeId);
      const asset =
        assets.find(
          (entry) => directIndex !== null && entry.itemIndex === directIndex,
        ) ?? assets.find((entry) => entry.fallbackIndex === index);
      return asset ? [[typeId, asset.itemSize] as const] : [];
    }),
  );
}

function resolveMatch3DResolvedImageForItem(
  item: Match3DItemSnapshot,
  imageSourceEntriesByType: ReadonlyMap<
    string,
    readonly Match3DResolvedImageSourceEntry[]
  >,
) {
  return (
    resolveMatch3DImageSourceEntryForItem(item, imageSourceEntriesByType)
      ?.resolvedSource ?? ''
  );
}

function hasPendingMatch3DGeneratedImageForItem(
  item: Match3DItemSnapshot,
  imageSourcesByType: ReadonlyMap<string, readonly string[]>,
  resolvedImageSources: ReadonlyMap<string, string>,
  failedImageSources: ReadonlySet<string>,
) {
  const sources = imageSourcesByType.get(item.itemTypeId);
  if (!sources?.length) {
    return false;
  }
  return sources.some(
    (source) =>
      isGeneratedLegacyPath(source) &&
      !resolvedImageSources.has(source) &&
      !failedImageSources.has(source),
  );
}

function resolveMatch3DItemSizeForType(
  item: Pick<Match3DItemSnapshot, 'itemTypeId'>,
  itemSizeByType: ReadonlyMap<string, Match3DGeneratedItemRelativeSize>,
) {
  return itemSizeByType.get(item.itemTypeId) ?? '大';
}

function resolveMatch3DSlotLayout(
  element: HTMLElement | null,
): Match3DTraySlotLayout | null {
  const rect = element?.getBoundingClientRect();
  if (!rect || rect.width <= 0 || rect.height <= 0) {
    return null;
  }
  return {
    left: rect.left,
    top: rect.top,
    width: rect.width,
    height: rect.height,
  };
}

function buildOptimisticRun(
  run: Match3DRunSnapshot,
  item: Match3DItemSnapshot,
) {
  const insertion = buildMatch3DTrayInsertionPlan(run.traySlots, item);
  if (!insertion) {
    return run;
  }
  const nextItems = run.items.map((entry) =>
    entry.itemInstanceId === item.itemInstanceId
      ? {
          ...entry,
          state: 'Flying' as const,
          clickable: false,
          traySlotIndex: insertion.slotIndex,
        }
      : entry,
  );
  return {
    ...run,
    items: syncMatch3DItemTraySlotIndexes(nextItems, insertion.traySlots),
    traySlots: insertion.traySlots,
  };
}

function loadMatch3DAlphaHitMaskImage(source: string) {
  return new Promise<HTMLImageElement>((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error('读取抓大鹅物品热区图片失败'));
    image.src = source;
  });
}

async function loadMatch3DAlphaHitMask(
  source: string,
  signal: AbortSignal,
): Promise<Match3DAlphaHitMask> {
  const response = await readAssetBytes(source, {
    signal,
    expireSeconds: 300,
  });
  const blob = await response.blob();
  const canCreateObjectUrl =
    typeof URL.createObjectURL === 'function' &&
    typeof URL.revokeObjectURL === 'function';
  const imageSource = canCreateObjectUrl
    ? URL.createObjectURL(blob)
    : await new Promise<string>((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(String(reader.result ?? ''));
        reader.onerror = () => reject(new Error('读取抓大鹅热区图片失败'));
        reader.readAsDataURL(blob);
      });
  try {
    const image = await loadMatch3DAlphaHitMaskImage(imageSource);
    if (signal.aborted) {
      throw new DOMException('热区图片读取已取消', 'AbortError');
    }
    const width = Math.max(1, image.naturalWidth || image.width || 1);
    const height = Math.max(1, image.naturalHeight || image.height || 1);
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const context = canvas.getContext('2d', {
      willReadFrequently: true,
    });
    if (!context) {
      throw new Error('浏览器不支持读取物品热区图片');
    }
    context.clearRect(0, 0, width, height);
    context.drawImage(image, 0, 0, width, height);
    const pixels = context.getImageData(0, 0, width, height).data;
    const alpha = new Uint8ClampedArray(width * height);
    for (let index = 0; index < alpha.length; index += 1) {
      alpha[index] = pixels[index * 4 + 3] ?? 0;
    }
    return { width, height, alpha };
  } finally {
    if (canCreateObjectUrl) {
      URL.revokeObjectURL(imageSource);
    }
  }
}

function Match3DToken({
  item,
  imageSrc,
  itemSize,
  disabled,
  selected,
}: {
  item: Match3DItemSnapshot;
  imageSrc?: string;
  itemSize?: Match3DGeneratedItemRelativeSize;
  disabled: boolean;
  selected: boolean;
}) {
  const visualSeed = resolveVisualSeed(item.visualKey);
  const frame = resolveRenderableItemFrame(item);
  const size = `${frame.radius * 200}%`;
  const itemStateClass = isItemState(item.state, 'flying')
    ? 'scale-75 opacity-0'
    : item.clickable
      ? 'cursor-pointer opacity-100 hover:scale-105'
      : 'opacity-48';
  const selectedClass = selected
    ? 'scale-110 rounded-full bg-white/18 ring-4 ring-amber-100/85 drop-shadow-[0_0_22px_rgba(254,240,138,0.92)]'
    : '';

  if (
    !isItemState(item.state, 'in_board') &&
    !isItemState(item.state, 'flying')
  ) {
    return null;
  }

  return (
    <button
      type="button"
      className={`absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center bg-transparent p-0 transition-all duration-150 ${itemStateClass} ${selectedClass}`}
      style={{
        left: `${frame.x * 100}%`,
        top: `${frame.y * 100}%`,
        width: size,
        height: size,
        zIndex: item.layer + 10,
      }}
      aria-label={`${visualSeed.label} ${item.clickable ? '可点击' : '被遮挡'}`}
      aria-pressed={selected}
      data-testid={`match3d-item-${item.itemInstanceId}`}
      disabled={
        disabled || !item.clickable || !isItemState(item.state, 'in_board')
      }
    >
      {imageSrc ? (
        <img
          src={imageSrc}
          alt=""
          aria-hidden="true"
          data-testid="match3d-token-image"
          className="relative z-10 h-full w-full object-contain drop-shadow-[0_10px_14px_rgba(15,23,42,0.34)]"
          style={{
            transform: `scale(${resolveMatch3DItemSizeScale(itemSize)})`,
          }}
          draggable={false}
        />
      ) : (
        <Match3DVisualIcon
          visualKey={item.visualKey}
          className="relative z-10"
        />
      )}
    </button>
  );
}

function Match3DSpriteImage({
  region,
  testId,
  className = 'h-full w-full object-contain',
}: {
  region: Match3DDecodedSpritesheetRegion | null | undefined;
  testId: string;
  className?: string;
}) {
  if (!region?.imageSrc) {
    return null;
  }

  return (
    <img
      src={region.imageSrc}
      alt=""
      aria-hidden="true"
      data-testid={testId}
      className={className}
      draggable={false}
    />
  );
}

function Match3DTrayToken({
  slot,
  imageSrc,
  itemSize,
  isArriving = false,
  isClearing = false,
  moveAnimation = null,
}: {
  slot: Match3DTraySlot;
  imageSrc?: string;
  itemSize?: Match3DGeneratedItemRelativeSize;
  isArriving?: boolean;
  isClearing?: boolean;
  moveAnimation?: Match3DTrayMovingItemAnimation | null;
}) {
  if (!slot.visualKey) {
    return (
      <span className="h-full w-full rounded-xl border border-dashed border-slate-300/35 bg-white/8" />
    );
  }
  const visualSeed = resolveVisualSeed(slot.visualKey);
  const style = moveAnimation
    ? ({
        '--match3d-tray-shift-x': `${moveAnimation.offsetX}px`,
        '--match3d-tray-shift-y': `${moveAnimation.offsetY}px`,
      } as CSSProperties)
    : undefined;
  return (
    <span
      className={`flex h-full w-full items-center justify-center p-1 transition-opacity duration-150 ${
        moveAnimation ? 'match3d-tray-token-shift' : ''
      } ${isArriving || isClearing ? 'opacity-0' : 'opacity-100'} ${
        isClearing ? 'pointer-events-none' : ''
      }`}
      style={style}
      aria-label={visualSeed.label}
    >
      {imageSrc ? (
        <img
          src={imageSrc}
          alt=""
          aria-hidden="true"
          data-testid="match3d-tray-image"
          className="h-full w-full object-contain drop-shadow-[0_5px_8px_rgba(15,23,42,0.26)]"
          style={{
            transform: `scale(${resolveMatch3DItemSizeScale(itemSize)})`,
          }}
          draggable={false}
        />
      ) : (
        <Match3DVisualIcon visualKey={slot.visualKey} />
      )}
    </span>
  );
}

function Match3DFlyingTrayToken({
  animation,
  onDone,
}: {
  animation: Match3DFlyingTrayAnimation;
  onDone: (id: string) => void;
}) {
  const visualSeed = resolveVisualSeed(animation.item.visualKey);
  const style = {
    '--match3d-fly-dx': `${animation.toX - animation.fromX}px`,
    '--match3d-fly-dy': `${animation.toY - animation.fromY}px`,
    '--match3d-fly-scale': String(
      Math.min(1.05, Math.max(0.42, animation.toSize / animation.fromSize)),
    ),
    height: `${animation.fromSize}px`,
    left: `${animation.fromX}px`,
    top: `${animation.fromY}px`,
    width: `${animation.fromSize}px`,
  } as CSSProperties;

  return (
    <div
      className="match3d-token-fly-to-tray pointer-events-none fixed z-[95] flex items-center justify-center"
      style={style}
      aria-hidden="true"
      data-testid="match3d-flying-token"
      onAnimationEnd={() => onDone(animation.id)}
    >
      {animation.imageSrc ? (
        <img
          src={animation.imageSrc}
          alt=""
          className="h-full w-full object-contain drop-shadow-[0_12px_18px_rgba(15,23,42,0.32)]"
          style={{
            transform: `scale(${resolveMatch3DItemSizeScale(animation.itemSize)})`,
          }}
          data-testid="match3d-flying-token-image"
          draggable={false}
        />
      ) : (
        <Match3DVisualIcon
          visualKey={animation.item.visualKey}
          className="relative z-10"
        />
      )}
      <span className="absolute inset-[12%] -z-10 rounded-full bg-white/24 blur-md" />
      <span className="sr-only">{visualSeed.label}</span>
    </div>
  );
}

function Match3DTrayClearToken({
  animation,
  onDone,
}: {
  animation: Match3DTrayClearAnimation;
  onDone: (id: string) => void;
}) {
  return (
    <div aria-hidden="true" data-testid="match3d-tray-clear-animation">
      {animation.items.map((item, index) => {
        const visualSeed = resolveVisualSeed(item.visualKey);
        const style = {
          '--match3d-tray-clear-dx': `${item.toX - item.fromX}px`,
          '--match3d-tray-clear-dy': `${item.toY - item.fromY}px`,
          height: `${item.height}px`,
          left: `${item.fromX}px`,
          top: `${item.fromY}px`,
          width: `${item.width}px`,
        } as CSSProperties;
        return (
          <div
            key={item.itemInstanceId}
            className="match3d-tray-token-clear pointer-events-none fixed z-[96] flex items-center justify-center p-1"
            data-testid="match3d-tray-clear-token"
            style={style}
            onAnimationEnd={
              index === animation.items.length - 1
                ? () => onDone(animation.id)
                : undefined
            }
          >
            {item.imageSrc ? (
              <img
                src={item.imageSrc}
                alt=""
                className="h-full w-full object-contain drop-shadow-[0_7px_11px_rgba(15,23,42,0.28)]"
                style={{
                  transform: `scale(${resolveMatch3DItemSizeScale(item.itemSize)})`,
                }}
                draggable={false}
              />
            ) : (
              <Match3DVisualIcon visualKey={item.visualKey} />
            )}
            <span className="sr-only">{visualSeed.label}</span>
          </div>
        );
      })}
      <div
        className="match3d-tray-clear-flash pointer-events-none fixed z-[97]"
        style={{
          left: `${animation.centerX}px`,
          top: `${animation.centerY}px`,
        }}
      />
    </div>
  );
}

function Match3DSettlement({
  run,
  hideBackButton,
  onBack,
  onRestart,
}: {
  run: Match3DRunSnapshot;
  hideBackButton?: boolean;
  onBack: () => void;
  onRestart: () => void;
}) {
  if (isRunState(run.status, 'running')) {
    return null;
  }
  const won = isRunState(run.status, 'won');
  const stopped = isRunState(run.status, 'stopped');
  const title = won ? '通关完成' : stopped ? '已停止' : '本轮失败';
  const description = won
    ? `用时 ${formatElapsed(run.startedAtMs, run.remainingMs, run.durationLimitMs)}`
    : `已清除 ${run.clearedItemCount}/${run.totalItemCount}`;
  return (
    <div className="absolute inset-0 z-[80] flex items-center justify-center bg-slate-950/62 px-5 backdrop-blur-sm">
      <section
        className="w-full max-w-sm rounded-[1.5rem] border border-white/18 bg-white/94 p-5 text-slate-950 shadow-[0_26px_70px_rgba(15,23,42,0.34)]"
        role="dialog"
        aria-label={title}
      >
        <div className="mb-4 flex items-center gap-3">
          <span
            className={`flex h-11 w-11 items-center justify-center rounded-full ${
              won
                ? 'bg-emerald-100 text-emerald-700'
                : 'bg-rose-100 text-rose-700'
            }`}
          >
            {won ? <CheckCircle2 size={24} /> : <XCircle size={24} />}
          </span>
          <div>
            <h2 className="text-xl font-black">{title}</h2>
            <p className="text-sm font-semibold text-slate-500">
              {description}
            </p>
          </div>
        </div>
        <div className={`grid gap-2 ${hideBackButton ? '' : 'grid-cols-2'}`}>
          {!hideBackButton ? (
            <button
              type="button"
              className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-black text-slate-700"
              onClick={onBack}
            >
              返回
            </button>
          ) : null}
          <button
            type="button"
            className="rounded-xl bg-slate-950 px-4 py-3 text-sm font-black text-white"
            onClick={onRestart}
          >
            再来一局
          </button>
        </div>
      </section>
    </div>
  );
}

export function Match3DRuntimeShell({
  run,
  generatedItemAssets = EMPTY_MATCH3D_GENERATED_ITEM_ASSETS,
  generatedBackgroundAsset = null,
  backgroundImageSrc = null,
  isBusy = false,
  error = null,
  embedded = false,
  hideBackButton = false,
  levelName = null,
  onBack,
  onRestart,
  onOptimisticRunChange,
  onClickItem,
  onTimeExpired,
}: Match3DRuntimeShellProps) {
  const authUi = useAuthUi();
  const stageRef = useRef<HTMLDivElement | null>(null);
  const traySlotRefs = useRef<Array<HTMLDivElement | null>>([]);
  const backgroundAudioRef = useRef<HTMLAudioElement | null>(null);
  const clearSoundKeyRef = useRef<string | null>(null);
  const countdownSoundKeyRef = useRef<string | null>(null);
  const mergeSoundKeyRef = useRef<string | null>(null);
  const [pendingClick, setPendingClick] = useState<PendingClick | null>(null);
  const [feedbackEvent, setFeedbackEvent] =
    useState<Match3DFeedbackEvent | null>(null);
  const [pressedItemInstanceId, setPressedItemInstanceId] = useState<
    string | null
  >(null);
  const activePointerIdRef = useRef<number | null>(null);
  const pendingClickLockRef = useRef(false);
  const [flyingTrayAnimation, setFlyingTrayAnimation] =
    useState<Match3DFlyingTrayAnimation | null>(null);
  const [trayClearAnimation, setTrayClearAnimation] =
    useState<Match3DTrayClearAnimation | null>(null);
  const [trayMovingItemAnimations, setTrayMovingItemAnimations] = useState<
    Match3DTrayMovingItemAnimation[]
  >([]);
  const previousTrayItemSlotIndexMapRef = useRef<Map<string, number>>(
    new Map(),
  );
  const trayMovingTimeoutRef = useRef<number | null>(null);
  const [timeLeftMs, setTimeLeftMs] = useState(run?.remainingMs ?? 0);
  const [resolvedBackgroundImageSrc, setResolvedBackgroundImageSrc] =
    useState('');
  const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false);
  const musicVolume = authUi?.musicVolume ?? DEFAULT_MATCH3D_MUSIC_VOLUME;
  const levelAudioConfig = DEFAULT_RUNTIME_LEVEL_AUDIO_CONFIG;
  const runtimeGeneratedItemAssets = useMemo(
    () => normalizeMatch3DGeneratedItemAssetsForRuntime(generatedItemAssets),
    [generatedItemAssets],
  );
  const uiSpritesheetSource = useMemo(
    () =>
      resolveMatch3DUiSpritesheetSource(
        generatedBackgroundAsset,
        runtimeGeneratedItemAssets,
      ),
    [generatedBackgroundAsset, runtimeGeneratedItemAssets],
  );
  const itemSpritesheetSource = useMemo(
    () =>
      resolveMatch3DItemSpritesheetSource(
        generatedBackgroundAsset,
        runtimeGeneratedItemAssets,
      ),
    [generatedBackgroundAsset, runtimeGeneratedItemAssets],
  );
  const [uiSpritesheetRegions, setUiSpritesheetRegions] = useState<
    Match3DDecodedSpritesheetRegion[]
  >([]);
  const [itemSpritesheetViewGroups, setItemSpritesheetViewGroups] = useState<
    Match3DItemSpritesheetViewGroup[]
  >([]);
  const uiSpritesheetRegionByLabel = useMemo(
    () => indexMatch3DUiSpritesheetRegions(uiSpritesheetRegions),
    [uiSpritesheetRegions],
  );

  useEffect(() => {
    setTimeLeftMs(run?.remainingMs ?? 0);
  }, [run?.remainingMs, run?.snapshotVersion]);

  useEffect(() => {
    if (!run || !isRunState(run.status, 'running')) {
      return undefined;
    }
    const timer = window.setInterval(() => {
      setTimeLeftMs((current) => {
        const next = Math.max(0, current - 1000);
        if (next <= 0) {
          onTimeExpired?.();
        }
        return next;
      });
    }, 1000);
    return () => window.clearInterval(timer);
  }, [onTimeExpired, run]);

  useEffect(() => {
    if (!uiSpritesheetSource) {
      setUiSpritesheetRegions((current) =>
        current.length > 0 ? [] : current,
      );
      return undefined;
    }

    let cancelled = false;
    const controller = new AbortController();
    void loadMatch3DSpritesheetAssetRegions({
      source: uiSpritesheetSource,
      labels: MATCH3D_UI_SPRITESHEET_LABELS,
      maxRegions: MATCH3D_UI_SPRITESHEET_LABELS.length,
      minArea: 16,
      alphaThreshold: 8,
      signal: controller.signal,
    })
      .then((regions) => {
        if (!cancelled) {
          setUiSpritesheetRegions(regions);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setUiSpritesheetRegions([]);
        }
      });

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [uiSpritesheetSource]);

  useEffect(() => {
    if (!itemSpritesheetSource) {
      setItemSpritesheetViewGroups((current) =>
        current.length > 0 ? [] : current,
      );
      return undefined;
    }

    let cancelled = false;
    const controller = new AbortController();
    void loadMatch3DSpritesheetAssetRegions({
      source: itemSpritesheetSource,
      maxRegions: 100,
      minArea: 16,
      alphaThreshold: 8,
      signal: controller.signal,
    })
      .then((regions) => {
        if (!cancelled) {
          setItemSpritesheetViewGroups(
            buildMatch3DItemSpritesheetViewRegions(
              regions,
              runtimeGeneratedItemAssets.map((asset) => asset.itemName),
            ),
          );
        }
      })
      .catch(() => {
        if (!cancelled) {
          setItemSpritesheetViewGroups([]);
        }
      });

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [itemSpritesheetSource, runtimeGeneratedItemAssets]);

  useEffect(() => {
    if (!feedbackEvent) {
      return undefined;
    }
    const timer = window.setTimeout(() => setFeedbackEvent(null), 520);
    return () => window.clearTimeout(timer);
  }, [feedbackEvent]);

  useEffect(() => {
    if (!flyingTrayAnimation) {
      return undefined;
    }
    const timer = window.setTimeout(() => {
      setFlyingTrayAnimation((current) =>
        current?.id === flyingTrayAnimation.id ? null : current,
      );
    }, 520);
    return () => window.clearTimeout(timer);
  }, [flyingTrayAnimation]);

  useEffect(() => {
    if (!trayClearAnimation) {
      return undefined;
    }
    const timer = window.setTimeout(() => {
      setTrayClearAnimation((current) =>
        current?.id === trayClearAnimation.id ? null : current,
      );
    }, 500);
    return () => window.clearTimeout(timer);
  }, [trayClearAnimation]);

  useLayoutEffect(() => {
    if (!run) {
      previousTrayItemSlotIndexMapRef.current = new Map();
      setTrayMovingItemAnimations((current) =>
        current.length > 0 ? [] : current,
      );
      return;
    }

    const previousMap = previousTrayItemSlotIndexMapRef.current;
    const nextMap = resolveMatch3DTrayItemIdToSlotIndexMap(run.traySlots);
    const movingAnimations = [...nextMap.entries()].flatMap(
      ([itemInstanceId, nextSlotIndex]) => {
        const previousSlotIndex = previousMap.get(itemInstanceId);
        if (
          previousSlotIndex === undefined ||
          previousSlotIndex === nextSlotIndex
        ) {
          return [];
        }
        const previousLayout = resolveMatch3DSlotLayout(
          traySlotRefs.current[previousSlotIndex] ?? null,
        );
        const nextLayout = resolveMatch3DSlotLayout(
          traySlotRefs.current[nextSlotIndex] ?? null,
        );
        if (!previousLayout || !nextLayout) {
          return [];
        }
        return [
          {
            itemInstanceId,
            offsetX: previousLayout.left - nextLayout.left,
            offsetY: previousLayout.top - nextLayout.top,
          },
        ];
      },
    );
    previousTrayItemSlotIndexMapRef.current = nextMap;
    if (movingAnimations.length <= 0) {
      return;
    }

    setTrayMovingItemAnimations(movingAnimations);
    if (trayMovingTimeoutRef.current !== null) {
      window.clearTimeout(trayMovingTimeoutRef.current);
    }
    trayMovingTimeoutRef.current = window.setTimeout(() => {
      setTrayMovingItemAnimations([]);
      trayMovingTimeoutRef.current = null;
    }, 260);
  }, [run]);

  useEffect(
    () => () => {
      if (trayMovingTimeoutRef.current !== null) {
        window.clearTimeout(trayMovingTimeoutRef.current);
      }
    },
    [],
  );

  useEffect(() => {
    if (!run) {
      clearSoundKeyRef.current = null;
      return;
    }
    if (!isRunState(run.status, 'won')) {
      return;
    }

    const soundKey = `${run.runId}:${run.snapshotVersion}:won`;
    if (clearSoundKeyRef.current === soundKey) {
      return;
    }
    clearSoundKeyRef.current = soundKey;
    playRuntimeLevelClearSound(musicVolume);
  }, [musicVolume, run, run?.runId, run?.snapshotVersion, run?.status]);

  useEffect(() => {
    if (!run || !isRunState(run.status, 'running')) {
      countdownSoundKeyRef.current = null;
      return;
    }
    const secondBucket =
      timeLeftMs <= levelAudioConfig.countdownWarningThresholdMs
        ? resolveRuntimeCountdownSecondBucket(timeLeftMs)
        : null;
    if (secondBucket === null) {
      countdownSoundKeyRef.current = null;
      return;
    }

    const soundKey = `${run.runId}:${run.startedAtMs}:${secondBucket}`;
    if (countdownSoundKeyRef.current === soundKey) {
      return;
    }
    countdownSoundKeyRef.current = soundKey;
    playRuntimeCountdownSound(musicVolume);
  }, [
    levelAudioConfig.countdownWarningThresholdMs,
    musicVolume,
    run,
    run?.runId,
    run?.startedAtMs,
    run?.status,
    timeLeftMs,
  ]);

  const backgroundAssetSrc =
    backgroundImageSrc?.trim() ||
    generatedBackgroundAsset?.imageSrc?.trim() ||
    generatedBackgroundAsset?.imageObjectKey?.trim() ||
    runtimeGeneratedItemAssets
      .map(
        (asset) =>
          asset.backgroundAsset?.imageSrc?.trim() ||
          asset.backgroundAsset?.imageObjectKey?.trim() ||
          '',
      )
      .find(Boolean) ||
    '';
  const generatedContainerAssetSrc = resolveMatch3DGeneratedContainerSource(
    generatedBackgroundAsset,
    runtimeGeneratedItemAssets,
  );
  const containerAssetSrc =
    generatedContainerAssetSrc || MATCH3D_CONTAINER_REFERENCE_SRC;
  const imageSourcesByType = useMemo(
    () =>
      buildMatch3DImageSourcesByType(
        run,
        runtimeGeneratedItemAssets,
        itemSpritesheetViewGroups,
      ),
    [itemSpritesheetViewGroups, runtimeGeneratedItemAssets, run],
  );
  const itemSizeByType = useMemo(
    () => buildMatch3DItemSizeByType(run, runtimeGeneratedItemAssets),
    [runtimeGeneratedItemAssets, run],
  );
  const imageReadUrlCacheKey = useMemo(
    () => resolveMatch3DImageReadUrlCacheKey(imageSourcesByType),
    [imageSourcesByType],
  );
  const [resolvedImageSources, setResolvedImageSources] = useState<
    Map<string, string>
  >(() => new Map());
  const [failedImageSources, setFailedImageSources] = useState<Set<string>>(
    () => new Set(),
  );
  const resolvedImageSourceEntriesByType = useMemo(
    () =>
      buildResolvedMatch3DImageSourceEntriesByType(
        imageSourcesByType,
        resolvedImageSources,
      ),
    [imageSourcesByType, resolvedImageSources],
  );
  const alphaHitMaskCacheKey = useMemo(
    () => resolveMatch3DAlphaHitMaskCacheKey(resolvedImageSourceEntriesByType),
    [resolvedImageSourceEntriesByType],
  );
  const [alphaHitMasks, setAlphaHitMasks] = useState<
    Map<string, Match3DAlphaHitMask>
  >(() => new Map());
  const [failedAlphaHitMaskSources, setFailedAlphaHitMaskSources] = useState<
    Set<string>
  >(() => new Set());
  const backgroundMusicSrc =
    runtimeGeneratedItemAssets.find((asset) => asset.backgroundMusic?.audioSrc)
      ?.backgroundMusic?.audioSrc ?? null;
  const [resolvedBackgroundMusicSrc, setResolvedBackgroundMusicSrc] =
    useState('');
  const [resolvedContainerImageSrc, setResolvedContainerImageSrc] =
    useState('');
  const [isContainerImageLoaded, setIsContainerImageLoaded] = useState(false);
  const hasRenderedContainerAsset = Boolean(
    resolvedContainerImageSrc && isContainerImageLoaded,
  );
  const clickSoundByTypeId = useMemo(() => {
    if (!run) {
      return new Map<string, string>();
    }
    const readyAssets = runtimeGeneratedItemAssets.filter(
      (asset) => asset.clickSound?.audioSrc,
    );
    const sortedTypes = [
      ...new Set(run.items.map((item) => item.itemTypeId)),
    ].sort();
    return new Map(
      sortedTypes.flatMap((typeId, index) => {
        const src = readyAssets[index]?.clickSound?.audioSrc?.trim();
        return src ? [[typeId, src] as const] : [];
      }),
    );
  }, [runtimeGeneratedItemAssets, run]);

  const tryPlayBackgroundMusic = useCallback(() => {
    const audio = backgroundAudioRef.current;
    if (
      !audio ||
      !resolvedBackgroundMusicSrc ||
      !run ||
      !isRunState(run.status, 'running')
    ) {
      if (audio) {
        audio.pause();
      }
      return;
    }
    audio.volume = Math.max(0, Math.min(1, musicVolume));
    void audio.play().catch(() => {});
  }, [musicVolume, resolvedBackgroundMusicSrc, run]);

  useEffect(() => {
    tryPlayBackgroundMusic();
  }, [tryPlayBackgroundMusic]);

  useEffect(() => {
    const source = backgroundMusicSrc?.trim() ?? '';
    if (!source) {
      setResolvedBackgroundMusicSrc('');
      return undefined;
    }
    if (!isGeneratedLegacyPath(source)) {
      setResolvedBackgroundMusicSrc(source);
      return undefined;
    }

    let cancelled = false;
    const controller = new AbortController();
    setResolvedBackgroundMusicSrc('');
    void resolveAssetReadUrl(source, {
      signal: controller.signal,
      expireSeconds: 300,
    })
      .then((resolvedSrc) => {
        if (!cancelled) {
          setResolvedBackgroundMusicSrc(resolvedSrc);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setResolvedBackgroundMusicSrc('');
        }
      });

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [backgroundMusicSrc]);

  const playClickSound = useCallback(
    (item: Match3DItemSnapshot) => {
      const src = clickSoundByTypeId.get(item.itemTypeId);
      playRuntimeClickSound(src, musicVolume);
    },
    [clickSoundByTypeId, musicVolume],
  );

  useEffect(() => {
    if (!backgroundAssetSrc) {
      setResolvedBackgroundImageSrc('');
      return undefined;
    }
    if (!isGeneratedLegacyPath(backgroundAssetSrc)) {
      setResolvedBackgroundImageSrc(backgroundAssetSrc);
      return undefined;
    }

    let cancelled = false;
    const controller = new AbortController();
    void resolveAssetReadUrl(backgroundAssetSrc, {
      signal: controller.signal,
      expireSeconds: 300,
    })
      .then((resolvedSrc) => {
        if (!cancelled) {
          setResolvedBackgroundImageSrc(resolvedSrc);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setResolvedBackgroundImageSrc('');
        }
      });

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [backgroundAssetSrc]);

  useEffect(() => {
    let cancelled = false;
    const controller = new AbortController();
    setResolvedContainerImageSrc('');
    setIsContainerImageLoaded(false);
    if (!isGeneratedLegacyPath(containerAssetSrc)) {
      setResolvedContainerImageSrc(containerAssetSrc);
      return undefined;
    }
    void resolveAssetReadUrl(containerAssetSrc, {
      signal: controller.signal,
      expireSeconds: 300,
    })
      .then((resolvedSrc) => {
        if (!cancelled) {
          setResolvedContainerImageSrc(resolvedSrc);
          setIsContainerImageLoaded(false);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setResolvedContainerImageSrc(
            containerAssetSrc === MATCH3D_CONTAINER_REFERENCE_SRC
              ? ''
              : MATCH3D_CONTAINER_REFERENCE_SRC,
          );
          setIsContainerImageLoaded(false);
        }
      });

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [containerAssetSrc]);

  useEffect(() => {
    const rawSources = resolveMatch3DImageReadUrlSources(imageSourcesByType);
    if (rawSources.length <= 0) {
      setResolvedImageSources((current) =>
        current.size > 0 ? new Map() : current,
      );
      setFailedImageSources((current) =>
        current.size > 0 ? new Set() : current,
      );
      return undefined;
    }

    if (rawSources.every((source) => !isGeneratedLegacyPath(source))) {
      setResolvedImageSources(resolveStaticMatch3DReadUrlMap(rawSources));
      setFailedImageSources((current) =>
        current.size > 0 ? new Set() : current,
      );
      return undefined;
    }

    let cancelled = false;
    const controller = new AbortController();
    const sourceSet = new Set(rawSources);
    const nextSources = new Map<string, string>();
    const failedSources = new Set<string>();
    setResolvedImageSources((current) => {
      const retained = new Map(
        [...current.entries()].filter(([source]) => sourceSet.has(source)),
      );
      retained.forEach((value, source) => nextSources.set(source, value));
      return retained;
    });
    setFailedImageSources(new Set());
    void Promise.all(
      rawSources.map(async (source) => {
        if (nextSources.has(source)) {
          return;
        }
        if (!isGeneratedLegacyPath(source)) {
          nextSources.set(source, source);
          return;
        }
        try {
          const resolvedSource = await resolveAssetReadUrl(source, {
            signal: controller.signal,
            expireSeconds: 300,
          });
          nextSources.set(source, resolvedSource || source);
        } catch {
          failedSources.add(source);
        }
      }),
    )
      .then(() => {
        if (!cancelled) {
          setResolvedImageSources(nextSources);
          setFailedImageSources(failedSources);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setFailedImageSources(new Set(rawSources));
        }
      });

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [imageReadUrlCacheKey, imageSourcesByType]);

  useEffect(() => {
    const rawSources = alphaHitMaskCacheKey
      ? alphaHitMaskCacheKey.split('|').filter(Boolean)
      : [];
    if (rawSources.length <= 0) {
      setAlphaHitMasks((current) => (current.size > 0 ? new Map() : current));
      setFailedAlphaHitMaskSources((current) =>
        current.size > 0 ? new Set() : current,
      );
      return undefined;
    }

    let cancelled = false;
    const controller = new AbortController();
    const sourceSet = new Set(rawSources);
    const nextMasks = new Map<string, Match3DAlphaHitMask>();
    const failedSources = new Set<string>();
    setAlphaHitMasks((current) => {
      const retained = new Map(
        [...current.entries()].filter(([source]) => sourceSet.has(source)),
      );
      retained.forEach((mask, source) => nextMasks.set(source, mask));
      return retained.size === current.size ? current : retained;
    });
    setFailedAlphaHitMaskSources(new Set());

    void Promise.all(
      rawSources.map(async (source) => {
        if (nextMasks.has(source)) {
          return;
        }
        try {
          nextMasks.set(
            source,
            await loadMatch3DAlphaHitMask(source, controller.signal),
          );
        } catch {
          // 中文注释：读不到 alpha 时保留旧圆形粗筛，避免个别跨域旧图导致物品完全不可点。
          failedSources.add(source);
        }
      }),
    ).then(() => {
      if (!cancelled) {
        setAlphaHitMasks(new Map(nextMasks));
        setFailedAlphaHitMaskSources(failedSources);
      }
    });

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [alphaHitMaskCacheKey]);

  const trayPreviewItems = useMemo(() => {
    if (!run) {
      return [];
    }
    return run.traySlots.map((slot) => resolveTrayPreviewItem(run, slot));
  }, [run]);
  const trayMovingItemAnimationById = useMemo(
    () =>
      new Map(
        trayMovingItemAnimations.map((animation) => [
          animation.itemInstanceId,
          animation,
        ]),
      ),
    [trayMovingItemAnimations],
  );

  const resolveFirstResolvedImageForItem = useCallback(
    (item: Match3DItemSnapshot) => {
      return resolvedImageSourceEntriesByType.get(item.itemTypeId)?.[0]
        ?.resolvedSource ?? '';
    },
    [resolvedImageSourceEntriesByType],
  );

  const startFlyingTrayAnimation = useCallback(
    (
      item: Match3DItemSnapshot,
      targetSlotIndex: number,
      animationId: string,
    ) => {
      const boardRect = stageRef.current?.getBoundingClientRect();
      const slotRect =
        traySlotRefs.current[targetSlotIndex]?.getBoundingClientRect();
      if (
        !boardRect ||
        !slotRect ||
        boardRect.width <= 0 ||
        slotRect.width <= 0
      ) {
        return;
      }

      const frame = resolveRenderableItemFrame(item);
      const fromSize = Math.max(28, frame.radius * boardRect.width * 2);
      const toSize = Math.max(
        24,
        Math.min(slotRect.width, slotRect.height) * 0.78,
      );
      setFlyingTrayAnimation({
        id: animationId,
        item,
        imageSrc: resolveFirstResolvedImageForItem(item),
        itemSize: resolveMatch3DItemSizeForType(item, itemSizeByType),
        fromSize,
        fromX: boardRect.left + frame.x * boardRect.width,
        fromY: boardRect.top + frame.y * boardRect.height,
        toSize,
        toX: slotRect.left + slotRect.width / 2,
        toY: slotRect.top + slotRect.height / 2,
      });
    },
    [itemSizeByType, resolveFirstResolvedImageForItem],
  );

  const startTrayClearAnimation = useCallback(
    (
      animationId: string,
      clearedItemInstanceIds: readonly string[],
      sourceRun: Match3DRunSnapshot,
    ) => {
      if (clearedItemInstanceIds.length <= 0) {
        return;
      }
      const slots = clearedItemInstanceIds
        .map((itemInstanceId) =>
          sourceRun.traySlots.find(
            (slot) => slot.itemInstanceId === itemInstanceId,
          ),
        )
        .filter((slot): slot is Match3DTraySlot => Boolean(slot));
      const layouts = slots
        .map((slot) => ({
          slot,
          layout: resolveMatch3DSlotLayout(
            traySlotRefs.current[slot.slotIndex] ?? null,
          ),
        }))
        .filter(
          (entry): entry is { slot: Match3DTraySlot; layout: Match3DTraySlotLayout } =>
            Boolean(entry.layout),
        );
      if (layouts.length <= 0) {
        return;
      }
      const centerX =
        layouts.reduce(
          (sum, entry) => sum + entry.layout.left + entry.layout.width / 2,
          0,
        ) / layouts.length;
      const centerY =
        layouts.reduce(
          (sum, entry) => sum + entry.layout.top + entry.layout.height / 2,
          0,
        ) / layouts.length;

      setTrayClearAnimation({
        id: animationId,
        centerX,
        centerY,
        items: layouts.map(({ slot, layout }) => {
          const item = sourceRun.items.find(
            (entry) => entry.itemInstanceId === slot.itemInstanceId,
          );
          const itemTypeId = slot.itemTypeId ?? item?.itemTypeId ?? '';
          const visualKey = slot.visualKey ?? item?.visualKey ?? '';
          return {
            itemInstanceId: slot.itemInstanceId ?? '',
            itemTypeId,
            visualKey,
            imageSrc: item
              ? resolveFirstResolvedImageForItem(item)
              : itemTypeId
                ? (resolvedImageSourceEntriesByType.get(itemTypeId)?.[0]
                    ?.resolvedSource ?? '')
                : '',
            itemSize:
              itemSizeByType.get(itemTypeId) ??
              (item ? resolveMatch3DItemSizeForType(item, itemSizeByType) : '大'),
            fromX: layout.left + layout.width / 2,
            fromY: layout.top + layout.height / 2,
            toX: centerX,
            toY: centerY,
            width: layout.width,
            height: layout.height,
          };
        }),
      });
    },
    [
      itemSizeByType,
      resolvedImageSourceEntriesByType,
      resolveFirstResolvedImageForItem,
    ],
  );

  const handleItemClick = async (item: Match3DItemSnapshot) => {
    if (
      !run ||
      !isRunState(run.status, 'running') ||
      pendingClick ||
      pendingClickLockRef.current
    ) {
      return;
    }
    pendingClickLockRef.current = true;
    const optimisticRun = buildOptimisticRun(run, item);
    const clientEventId = buildClientEventId(item.itemInstanceId);
    const targetSlotIndex =
      optimisticRun.items.find(
        (entry) => entry.itemInstanceId === item.itemInstanceId,
      )?.traySlotIndex ?? null;
    // 中文注释：先更新前端即时反馈，再等待后端确认；确认失败时用权威快照回滚校正。
    tryPlayBackgroundMusic();
    playClickSound(item);
    if (targetSlotIndex !== null && targetSlotIndex !== undefined) {
      startFlyingTrayAnimation(item, targetSlotIndex, clientEventId);
    }
    setPendingClick({
      clientEventId,
      itemInstanceId: item.itemInstanceId,
      previousRun: run,
    });
    onOptimisticRunChange(optimisticRun);

    try {
      const result = await onClickItem({
        runId: run.runId,
        itemInstanceId: item.itemInstanceId,
        clientSnapshotVersion: run.snapshotVersion,
        clientEventId,
        clickedAtMs: Date.now(),
      });
      if (result.status === 'Accepted') {
        if (result.clearedItemInstanceIds.length > 0) {
          startTrayClearAnimation(
            clientEventId,
            result.clearedItemInstanceIds,
            optimisticRun,
          );
          // 中文注释：普通三消播放合成音效；最终胜利局由结算音效接管，避免同一手势连播。
          if (!isRunState(result.run.status, 'won')) {
            const soundKey = `${result.run.runId}:${result.run.snapshotVersion}:merge`;
            if (mergeSoundKeyRef.current !== soundKey) {
              mergeSoundKeyRef.current = soundKey;
              playRuntimeMergeSound(musicVolume);
            }
          }
          setFeedbackEvent({
            id: clientEventId,
            kind: 'cleared',
            itemIds: result.clearedItemInstanceIds,
          });
        }
        onOptimisticRunChange(result.run);
      } else {
        setFeedbackEvent({
          id: clientEventId,
          kind: 'rejected',
          itemIds: [item.itemInstanceId],
        });
        onOptimisticRunChange(result.run ?? run);
      }
    } finally {
      pendingClickLockRef.current = false;
      setPendingClick(null);
    }
  };

  const resolvePointerCandidate = (event: PointerEvent<HTMLDivElement>) => {
    if (!run || !isRunState(run.status, 'running') || pendingClick) {
      return null;
    }
    const point = resolveBoardPointFromPointerEvent(event, stageRef.current);
    return point
      ? (findMatch3DHitItem(run, point.x, point.y, {
          alphaHitMasks,
          failedAlphaHitMaskSources,
          imageSourceEntriesByType: resolvedImageSourceEntriesByType,
          itemSizeByType,
        }) ?? null)
      : null;
  };

  const handleBoardPointerDown = (event: PointerEvent<HTMLDivElement>) => {
    if (!run || !isRunState(run.status, 'running') || pendingClick) {
      setPressedItemInstanceId(null);
      return;
    }
    activePointerIdRef.current = event.pointerId;
    event.currentTarget.setPointerCapture?.(event.pointerId);
    setPressedItemInstanceId(
      resolvePointerCandidate(event)?.itemInstanceId ?? null,
    );
  };

  const handleBoardPointerMove = (event: PointerEvent<HTMLDivElement>) => {
    if (activePointerIdRef.current !== event.pointerId) {
      return;
    }
    setPressedItemInstanceId(
      resolvePointerCandidate(event)?.itemInstanceId ?? null,
    );
  };

  const handleBoardPointerCancel = (event: PointerEvent<HTMLDivElement>) => {
    if (activePointerIdRef.current !== event.pointerId) {
      return;
    }
    activePointerIdRef.current = null;
    setPressedItemInstanceId(null);
    event.currentTarget.releasePointerCapture?.(event.pointerId);
  };

  const handleBoardPointerUp = (event: PointerEvent<HTMLDivElement>) => {
    if (activePointerIdRef.current !== event.pointerId) {
      return;
    }
    const item = resolvePointerCandidate(event);
    activePointerIdRef.current = null;
    setPressedItemInstanceId(null);
    event.currentTarget.releasePointerCapture?.(event.pointerId);
    if (item) {
      void handleItemClick(item);
    }
  };

  if (!run) {
    return (
      <div
        className={`flex ${embedded ? 'h-full min-h-0 w-full' : 'min-h-dvh'} items-center justify-center bg-slate-950 text-white`}
      >
        {isBusy ? '载入中' : (error ?? '暂无运行态')}
      </div>
    );
  }

  const displayLevelName = levelName?.trim() || '抓大鹅';
  const timerClassName =
    timeLeftMs <= levelAudioConfig.countdownWarningThresholdMs &&
    isRunState(run.status, 'running')
      ? MATCH3D_RUNTIME_TIMER_URGENT_CLASS
      : MATCH3D_RUNTIME_TIMER_CLASS;
  const canRestartRun = Boolean(run?.runId) && !isBusy;

  return (
    <main
      className={`relative flex ${embedded ? 'h-full min-h-0' : 'min-h-dvh'} w-full justify-center overflow-hidden bg-[#16221f] text-white`}
    >
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_12%,rgba(255,255,255,0.22),transparent_26%),linear-gradient(180deg,#b8e28d_0%,#377569_52%,#14201f_100%)]" />
      {resolvedBackgroundImageSrc ? (
        <img
          src={resolvedBackgroundImageSrc}
          alt=""
          aria-hidden="true"
          data-testid="match3d-background-image"
          className="pointer-events-none absolute inset-0 h-full w-full object-cover"
        />
      ) : null}
      {resolvedBackgroundMusicSrc ? (
        <audio
          ref={backgroundAudioRef}
          src={resolvedBackgroundMusicSrc}
          loop
          preload="auto"
          aria-label="抓大鹅背景音乐"
        />
      ) : null}
      <div
        className={`relative flex ${embedded ? 'h-full min-h-0' : 'min-h-dvh'} min-w-0 flex-col overflow-hidden px-3 pb-[calc(env(safe-area-inset-bottom,0px)+0.8rem)] pt-[calc(env(safe-area-inset-top,0px)+0.65rem)]`}
        style={{
          boxSizing: 'border-box',
          maxWidth: '100vw',
          width: 'min(100vw, 28rem)',
        }}
      >
        <header className="relative z-10 grid grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-start gap-2 sm:grid-cols-[2.75rem_minmax(0,1fr)_2.75rem]">
          {hideBackButton ? (
            <div aria-hidden="true" />
          ) : (
            <button
              type="button"
              className={MATCH3D_RUNTIME_GLASS_ICON_BUTTON_CLASS}
              onClick={onBack}
              aria-label="返回"
            >
              <Match3DSpriteImage
                region={uiSpritesheetRegionByLabel.get('返回')}
                testId="match3d-ui-sprite-back"
                className="h-7 w-7 object-contain"
              />
              {!uiSpritesheetRegionByLabel.get('返回') ? (
                <ArrowLeft size={20} />
              ) : null}
            </button>
          )}
          <div className={`${MATCH3D_RUNTIME_HEADER_CARD_CLASS} mx-auto`}>
            <div className="flex max-w-full items-center justify-center gap-1.5">
              <span className={MATCH3D_RUNTIME_LEVEL_BADGE_CLASS}>第 1 关</span>
              <span className="min-w-0 truncate text-sm font-black sm:text-base">
                {displayLevelName}
              </span>
            </div>
            <div className={timerClassName}>
              <Clock3 className="h-4 w-4 sm:h-5 sm:w-5" />
              {formatTimer(timeLeftMs)}
            </div>
          </div>
          <button
            type="button"
            className={MATCH3D_RUNTIME_GLASS_ICON_BUTTON_CLASS}
            onClick={() => setIsSettingsPanelOpen(true)}
            aria-label="打开抓大鹅设置"
          >
            <Match3DSpriteImage
              region={uiSpritesheetRegionByLabel.get('设置')}
              testId="match3d-ui-sprite-settings"
              className="h-7 w-7 object-contain"
            />
            {!uiSpritesheetRegionByLabel.get('设置') ? (
              <Settings size={18} />
            ) : null}
          </button>
        </header>

        <section className={MATCH3D_RUNTIME_STAGE_CLASS}>
          <div
            ref={stageRef}
            className={`${MATCH3D_RUNTIME_BOARD_BASE_CLASS} ${
              hasRenderedContainerAsset
                ? MATCH3D_RUNTIME_BOARD_WITH_CONTAINER_CLASS
                : MATCH3D_RUNTIME_BOARD_FALLBACK_CLASS
            }`}
            style={{
              width: MATCH3D_RUNTIME_BOARD_WIDTH,
            }}
            onPointerDown={handleBoardPointerDown}
            onPointerMove={handleBoardPointerMove}
            onPointerCancel={handleBoardPointerCancel}
            onPointerUp={handleBoardPointerUp}
            data-testid="match3d-board"
          >
            {resolvedContainerImageSrc ? (
              <img
                src={resolvedContainerImageSrc}
                alt=""
                aria-hidden="true"
                className={`${MATCH3D_RUNTIME_CONTAINER_IMAGE_CLASS} ${
                  isContainerImageLoaded ? 'opacity-100' : 'opacity-0'
                }`}
                data-testid="match3d-container-image"
                onLoad={() => setIsContainerImageLoaded(true)}
                onError={() => {
                  setIsContainerImageLoaded(false);
                  setResolvedContainerImageSrc((currentSrc) =>
                    currentSrc && currentSrc !== MATCH3D_CONTAINER_REFERENCE_SRC
                      ? MATCH3D_CONTAINER_REFERENCE_SRC
                      : '',
                  );
                }}
              />
            ) : (
              <div className={MATCH3D_RUNTIME_CONTAINER_PLACEHOLDER_CLASS} />
            )}
            {run.items.map((item) =>
              hasPendingMatch3DGeneratedImageForItem(
                item,
                imageSourcesByType,
                resolvedImageSources,
                failedImageSources,
              ) ? null : (
                <Match3DToken
                  key={item.itemInstanceId}
                  item={item}
                  imageSrc={resolveMatch3DResolvedImageForItem(
                    item,
                    resolvedImageSourceEntriesByType,
                  )}
                  itemSize={resolveMatch3DItemSizeForType(item, itemSizeByType)}
                  disabled={Boolean(pendingClick)}
                  selected={pressedItemInstanceId === item.itemInstanceId}
                />
              ),
            )}
            {feedbackEvent?.kind === 'cleared' ? (
              <div className="pointer-events-none absolute inset-0 z-[70] flex items-center justify-center">
                <div
                  className="match3d-merge-feedback-pulse h-24 w-24 rounded-full bg-white/20 shadow-[0_0_42px_rgba(255,255,255,0.62)] backdrop-blur-sm"
                  data-testid="match3d-merge-feedback"
                />
              </div>
            ) : null}
          </div>
        </section>

        <section className={MATCH3D_RUNTIME_GLASS_TRAY_CLASS}>
          <div
            className="relative grid grid-cols-7 gap-1.5"
            data-testid="match3d-tray"
          >
            {run.traySlots.map((slot) => {
              const trayItem =
                trayPreviewItems[slot.slotIndex] ??
                (slot.itemInstanceId
                  ? run.items.find(
                      (item) => item.itemInstanceId === slot.itemInstanceId,
                    )
                  : null);
              return (
                <div
                  key={slot.slotIndex}
                  className={MATCH3D_RUNTIME_GLASS_TRAY_SLOT_CLASS}
                  data-testid="match3d-tray-slot"
                  data-slot-index={slot.slotIndex}
                  ref={(element) => {
                    traySlotRefs.current[slot.slotIndex] = element;
                  }}
                >
                  <Match3DSpriteImage
                    region={uiSpritesheetRegionByLabel.get('方格')}
                    testId={`match3d-ui-sprite-grid-${slot.slotIndex}`}
                    className="pointer-events-none absolute inset-0 h-full w-full object-fill"
                  />
                  <Match3DTrayToken
                    slot={slot}
                    isArriving={
                      flyingTrayAnimation?.item.itemInstanceId ===
                      slot.itemInstanceId
                    }
                    isClearing={
                      Boolean(slot.itemInstanceId) &&
                      (trayClearAnimation?.items.some(
                        (clearItem) =>
                          clearItem.itemInstanceId === slot.itemInstanceId,
                      ) ??
                        false)
                    }
                    moveAnimation={
                      slot.itemInstanceId
                        ? (trayMovingItemAnimationById.get(
                            slot.itemInstanceId,
                          ) ?? null)
                        : null
                    }
                    imageSrc={
                      trayItem
                        ? resolveFirstResolvedImageForItem(trayItem)
                        : ''
                    }
                    itemSize={
                      trayItem
                        ? resolveMatch3DItemSizeForType(
                            trayItem,
                            itemSizeByType,
                          )
                        : '大'
                    }
                  />
                </div>
              );
            })}
          </div>
        </section>

        <section
          className="relative z-10 mt-2 grid grid-cols-3 gap-2"
          aria-label="抓大鹅道具"
        >
          {MATCH3D_PROP_BUTTONS.map(([label, testId]) => {
            const region = uiSpritesheetRegionByLabel.get(label);
            return (
              <button
                key={label}
                type="button"
                className="flex min-h-12 items-center justify-center overflow-hidden rounded-[1rem] border border-white/58 bg-white/50 px-2 py-2 text-sm font-black text-slate-800 shadow-[0_10px_24px_rgba(15,23,42,0.14)] backdrop-blur-md"
                aria-label={label}
              >
                <Match3DSpriteImage
                  region={region}
                  testId={testId}
                  className="h-10 w-full object-contain"
                />
                {!region ? label : null}
              </button>
            );
          })}
        </section>
      </div>

      {feedbackEvent?.kind === 'rejected' ? (
        <div className="pointer-events-none absolute left-1/2 top-24 z-[90] -translate-x-1/2 rounded-full border border-rose-200/60 bg-rose-500/88 px-4 py-2 text-xs font-black text-white shadow-lg">
          已校正
        </div>
      ) : null}

      {flyingTrayAnimation ? (
        <Match3DFlyingTrayToken
          animation={flyingTrayAnimation}
          onDone={(id) =>
            setFlyingTrayAnimation((current) =>
              current?.id === id ? null : current,
            )
          }
        />
      ) : null}

      {trayClearAnimation ? (
        <Match3DTrayClearToken
          animation={trayClearAnimation}
          onDone={(id) =>
            setTrayClearAnimation((current) =>
              current?.id === id ? null : current,
            )
          }
        />
      ) : null}

      <Match3DSettlement
        run={run}
        hideBackButton={hideBackButton}
        onBack={onBack}
        onRestart={onRestart}
      />

      {isSettingsPanelOpen ? (
        <div
          className="absolute inset-0 z-[85] flex items-center justify-center bg-slate-950/42 px-4 py-6 backdrop-blur-sm"
          onClick={() => setIsSettingsPanelOpen(false)}
        >
          <section
            role="dialog"
            aria-modal="true"
            aria-labelledby="match3d-settings-title"
            className="w-full max-w-[20.5rem] overflow-hidden rounded-[1.35rem] border border-white/18 bg-white/95 text-slate-950 shadow-[0_26px_70px_rgba(15,23,42,0.34)]"
            onClick={(event) => event.stopPropagation()}
          >
            <header className="border-b border-slate-200 px-5 py-4">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <h2
                    id="match3d-settings-title"
                    className="text-base font-black"
                  >
                    抓大鹅设置
                  </h2>
                </div>
                <button
                  type="button"
                  aria-label="关闭设置"
                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-600 transition hover:bg-slate-50 hover:text-slate-900"
                  onClick={() => setIsSettingsPanelOpen(false)}
                >
                  <XCircle size={18} />
                </button>
              </div>
            </header>
            <div className="space-y-3 px-5 py-4">
              <div className="rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3">
                <div className="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500">
                  当前进度
                </div>
                <div className="mt-2 text-sm font-black text-slate-900">
                  {displayLevelName}
                </div>
                <div className="mt-1 text-xs text-slate-500">
                  已清除 {run.clearedItemCount}/{run.totalItemCount}
                </div>
              </div>
              <div className="rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3">
                <div className="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500">
                  本局时间
                </div>
                <div className="mt-2 font-mono text-xl font-black text-slate-900">
                  {formatTimer(timeLeftMs)}
                </div>
              </div>
            </div>
            <footer className="grid gap-3 border-t border-slate-200 px-5 py-4">
              <button
                type="button"
                className="inline-flex min-h-12 items-center justify-center gap-2 rounded-[1rem] bg-slate-950 px-4 py-3 text-sm font-black text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-45"
                disabled={!canRestartRun}
                onClick={() => {
                  setIsSettingsPanelOpen(false);
                  onRestart();
                }}
              >
                <RotateCcw size={16} />
                重新开始
              </button>
              <button
                type="button"
                className="inline-flex min-h-12 items-center justify-center rounded-[1rem] border border-slate-200 bg-white px-4 py-3 text-sm font-bold text-slate-700 transition hover:bg-slate-50"
                onClick={() => setIsSettingsPanelOpen(false)}
              >
                继续抓大鹅
              </button>
            </footer>
          </section>
        </div>
      ) : null}
    </main>
  );
}

export default Match3DRuntimeShell;