blacktrigram 0.7.2

package/lib/components/screens/combat/CombatScreen3D.js

@@ -0,0 +1,1912 @@
+import { useAudio } from "../../../audio/AudioProvider.js";
+import useActionFeedback from "../../../hooks/useActionFeedback.js";
+import { useCombatTimer } from "../../../hooks/useCombatTimer.js";
+import { AnimationState } from "../../../systems/animation/core/types.js";
+import { CombatState, PlayerArchetype, TrigramStance } from "../../../types/common.js";
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../types/constants/typography.js";
+import { getPerformanceSettings } from "../../../types/constants/performance.js";
+import { ROUND_ANNOUNCEMENT_TIMINGS } from "../../../types/constants/index.js";
+import { Z_INDEX } from "../../../types/LayoutTypes.js";
+import "../../../types/index.js";
+import { TRIGRAM_STANCES_ORDER } from "../../../systems/trigram/types.js";
+import { useKeyboardControls } from "../../../hooks/useKeyboardControls.js";
+import { getAnimation, getAnimationForTechnique } from "../../../systems/animation/core/AnimationRegistry.js";
+import { determineRecoveryType, getRecoveryAnimationState } from "../../../systems/animation/catalogs/RecoveryAnimations.js";
+import "../../../systems/animation/index.js";
+import { usePlayerAnimation } from "../../../hooks/usePlayerAnimation.js";
+import useRoundTransition from "../../../hooks/useRoundTransition.js";
+import useTechniqueSelection from "../../../hooks/useTechniqueSelection.js";
+import { useWebGLContextLossHandler } from "../../../hooks/useWebGLContextLossHandler.js";
+import { injuryMovementModifier } from "../../../systems/movement/InjuryMovementModifier.js";
+import { MovementType, SpeedModifierSystem } from "../../../systems/physics/SpeedModifierSystem.js";
+import { useCombatAttackMovement } from "./hooks/useCombatAttackMovement.js";
+import { InjuryType } from "../../../types/injury.js";
+import BalanceSystem from "../../../systems/combat/BalanceSystem.js";
+import CombatSystem from "../../../systems/CombatSystem.js";
+import { getPersonalityByArchetype } from "../../../systems/ai/AIPersonality.js";
+import { AdaptiveDifficulty } from "../../../systems/ai/AdaptiveDifficulty.js";
+import "../../../systems/ai/index.js";
+import { getAnimationTypeForTechnique } from "../../../data/techniqueMappings.js";
+import { toHexColor } from "../../../utils/colorHelpers.js";
+import { usePlayerMovement } from "../../../utils/inputSystem.js";
+import PerformanceOverlay3D from "../../../utils/performance/PerformanceOverlay3D.js";
+import "../../../utils/performance/index.js";
+import { createPlayerFromArchetype } from "../../../utils/playerUtils.js";
+import { createCameraConfig } from "../../../utils/sharedPhysicsConfig.js";
+import { useAdaptiveQuality } from "../../shared/three/optimization/AdaptiveQuality.js";
+import "../../shared/three/optimization/index.js";
+import { useKoreanTheme } from "../../shared/base/useKoreanTheme.js";
+import ActionFeedback, { TechniqueName } from "../../shared/three/effects/ActionFeedback.js";
+import DamageNumbers from "../../shared/three/effects/DamageNumbers.js";
+import HitEffects3D from "../../shared/three/effects/HitEffects3D.js";
+import VitalPointMarkers3D from "../../shared/three/effects/VitalPointMarkers3D.js";
+import { StanceChangeIndicator } from "../../shared/three/indicators/StanceChangeIndicator.js";
+import CombatArena3D from "../../shared/three/scene/CombatArena3D.js";
+import { BreathingIndicator } from "../../shared/three/ui/BreathingIndicator2.js";
+import ComboCounter from "../../shared/three/ui/ComboCounter.js";
+import VitalPointOverlayControlsHtml from "../../shared/three/ui/VitalPointOverlayControlsHtml.js";
+import { KeyboardHints } from "./components/controls/KeyboardHints.js";
+import MatchCountdown from "./components/feedback/MatchCountdown.js";
+import RoundAnnouncement from "./components/feedback/RoundAnnouncementOverlayHtml.js";
+import RoundDisplayStatus from "./components/feedback/RoundDisplayStatus.js";
+import RoundStartAnnouncement from "./components/feedback/RoundStartAnnouncementOverlayHtml.js";
+import { InputBufferDisplay } from "./components/indicators/InputBufferDisplay.js";
+import { animationStateToPlayerAnimation, convertPlayerStateToProps, getBalanceState } from "../../../utils/player3DHelpers.js";
+import MobileControlsOverlay from "../../shared/mobile/MobileControlsPure.js";
+import { StanceWheelPure } from "../../shared/mobile/StanceWheelPure.js";
+import { GestureRecognizerPure } from "../../shared/mobile/GestureRecognizerPure.js";
+import "../../shared/mobile/index.js";
+import Player3DWithTransitions from "../../shared/three/models/Player3DWithTransitions.js";
+import PauseMenu from "./components/controls/PauseMenu.js";
+import TraumaOverlay3D from "./components/effects/TraumaOverlay3D.js";
+import { CombatParticleEffects3D } from "./components/effects/CombatParticleEffects3D.js";
+import CombatTopHUD from "./components/hud/CombatTopHUD.js";
+import CombatBottomHUD from "./components/hud/CombatBottomHUD.js";
+import CombatLeftHUD from "./components/hud/CombatLeftHUD.js";
+import CombatRightHUD from "./components/hud/CombatRightHUD.js";
+import "./components/hud/index.js";
+import FPSMonitor from "./components/hud/FPSMonitor.js";
+import { PlayerStateOverlayHtml } from "./components/hud/PlayerStateOverlayHtml.js";
+import { BalanceIndicatorOverlayHtml } from "../../ui/combat/BalanceIndicatorOverlayHtml.js";
+import AnimationUpdater from "./helpers/AnimationUpdater.js";
+import { STANCE_INDEX_MAP, calculateAccuracy } from "./helpers/combatHelpers.js";
+import "./helpers/index.js";
+import { isRunningSpeed } from "../../../systems/movement/helpers/accelerationUtils.js";
+import AccelerationUpdater from "../../../systems/movement/helpers/AccelerationUpdater.js";
+import { useAICombat } from "./hooks/useAICombat.js";
+import { useCombatActions } from "./hooks/useCombatActions.js";
+import useCombatAudio from "./hooks/useCombatAudio.js";
+import { useCombatLayout } from "./hooks/useCombatLayout.js";
+import { useCombatState } from "./hooks/useCombatState.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Canvas } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import { Bloom, EffectComposer, Noise, Vignette } from "@react-three/postprocessing";
+//#region src/components/screens/combat/CombatScreen3D.tsx
+/**
+* CombatScreen3D - Three.js-based combat screen
+*
+* Maintains all existing combat logic and state management
+* Uses Html overlays for UI and 3D meshes for game objects
+*/
+/**
+* CombatScreen3D Component
+* Three.js-based combat screen with 3D characters and effects
+*/
+var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, isPaused, onReturnToMenu, onGameEnd, width = 1200, height = 800, enableAdaptiveQuality, showPerformanceOverlay = false }) => {
+	const [contentReady, setContentReady] = useState(false);
+	const contextLossCountRef = useRef(0);
+	useWebGLContextLossHandler({
+		onContextLost: () => {
+			console.warn("⚠️ WebGL context lost in CombatScreen");
+			contextLossCountRef.current += 1;
+			setContentReady(false);
+		},
+		onContextRestored: () => {
+			setTimeout(() => setContentReady(true), 100);
+		},
+		autoRestore: true
+	});
+	useEffect(() => {
+		const timer = setTimeout(() => setContentReady(true), 50);
+		return () => clearTimeout(timer);
+	}, []);
+	const audio = useAudio();
+	useEffect(() => {}, []);
+	const { arenaBounds, isMobile, screenSize, layoutConstants } = useCombatLayout(width, height);
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	const positionScale = useMemo(() => {
+		switch (screenSize) {
+			case "mobile": return 1;
+			case "tablet": return 1;
+			case "desktop": return 1;
+			case "large": return 1.25;
+			case "xlarge": return 1.5;
+			default: return 1;
+		}
+	}, [screenSize]);
+	const cameraConfig = useMemo(() => createCameraConfig(isMobile), [isMobile]);
+	const renderConfig = useMemo(() => {
+		const performanceSettings = getPerformanceSettings(width, isMobile);
+		return {
+			shadowMapSize: performanceSettings.shadowMapSize,
+			dpr: performanceSettings.dpr,
+			antialias: performanceSettings.antialias,
+			maxParticles: performanceSettings.maxParticles,
+			postProcessing: performanceSettings.postProcessing
+		};
+	}, [isMobile, width]);
+	const shouldEnableAdaptiveQuality = enableAdaptiveQuality ?? isMobile;
+	/**
+	* AdaptiveQualityWrapper - Internal component to use adaptive quality hook
+	* Must be inside Canvas to use useFrame from @react-three/fiber
+	*
+	* Memoized with useMemo so the component type is stable across renders.
+	* Note: renderConfig is intentionally NOT in dependencies to prevent
+	* component recreation when performance settings change, which would
+	* reset the internal state of useAdaptiveQuality hook.
+	*/
+	const AdaptiveQualityWrapper = useMemo(() => {
+		const Component = ({ children }) => {
+			useAdaptiveQuality(shouldEnableAdaptiveQuality, isMobile, (newQuality) => {});
+			return /* @__PURE__ */ jsx(Fragment, { children });
+		};
+		return Component;
+	}, [shouldEnableAdaptiveQuality, isMobile]);
+	const { state: combatState, actions: combatActions } = useCombatState();
+	const [overlayVisible, setOverlayVisible] = useState(false);
+	const [severityFilters, setSeverityFilters] = useState([]);
+	const [regionFilter, setRegionFilter] = useState("all");
+	const [searchQuery, setSearchQuery] = useState("");
+	const [showLabels, setShowLabels] = useState(true);
+	const [animated, setAnimated] = useState(true);
+	const [scale, setScale] = useState(1.2);
+	const [showPerformanceMonitor, setShowPerformanceMonitor] = useState(false);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "v" || e.key === "V") {
+				setOverlayVisible((prev) => !prev);
+				audio.playSFX("menu_select");
+			}
+			if (e.key === "F9" && false);
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [audio]);
+	const { state: feedbackState, actions: feedbackActions } = useActionFeedback({
+		damageNumberDuration: 1500,
+		actionFeedbackDuration: 1200,
+		techniqueDuration: 2e3,
+		comboResetTime: 2e3
+	});
+	const combatAudio = useCombatAudio();
+	const { playStanceChangeSound } = combatAudio;
+	const [matchScore, setMatchScore] = useState({
+		player1: 0,
+		player2: 0
+	});
+	const matchScoreRef = useRef(matchScore);
+	const updateMatchScore = useCallback((winner) => {
+		const newScore = {
+			player1: winner === 0 ? matchScoreRef.current.player1 + 1 : matchScoreRef.current.player1,
+			player2: winner === 1 ? matchScoreRef.current.player2 + 1 : matchScoreRef.current.player2
+		};
+		matchScoreRef.current = newScore;
+		setTimeout(() => setMatchScore(newScore), 0);
+	}, []);
+	const [internalRound, setInternalRound] = useState(currentRound);
+	const [currentTime, setCurrentTime] = useState(Date.now());
+	const [hasShownMatchCountdown, setHasShownMatchCountdown] = useState(true);
+	const [showMatchCountdown, setShowMatchCountdown] = useState(false);
+	const [showRoundStart, setShowRoundStart] = useState(false);
+	const [matchCountdownComplete, setMatchCountdownComplete] = useState(true);
+	const [player1Position, setPlayer1Position] = useState({
+		x: arenaBounds.worldWidthMeters * -.1,
+		y: 0
+	});
+	const [showPauseMenu, setShowPauseMenu] = useState(false);
+	const handlePause = useCallback(() => {
+		setShowPauseMenu(true);
+		audio.playSFX("menu_select");
+	}, [audio]);
+	const handleResume = useCallback(() => {
+		setShowPauseMenu(false);
+		audio.playSFX("menu_select");
+	}, [audio]);
+	const handleRestart = useCallback(() => {
+		setInternalRound(1);
+		setMatchScore({
+			player1: 0,
+			player2: 0
+		});
+		matchScoreRef.current = {
+			player1: 0,
+			player2: 0
+		};
+		combatActions.setRoundEnded(false);
+		combatActions.setRoundStarted(false);
+		combatActions.setRoundDisplayStatus(null);
+		onPlayerUpdate(0, {
+			health: 100,
+			stamina: 100,
+			ki: 100,
+			consciousness: 100,
+			pain: 0,
+			balance: 100,
+			combatState: CombatState.IDLE,
+			isStunned: false,
+			isBlocking: false
+		});
+		onPlayerUpdate(1, {
+			health: 100,
+			stamina: 100,
+			ki: 100,
+			consciousness: 100,
+			pain: 0,
+			balance: 100,
+			combatState: CombatState.IDLE,
+			isStunned: false,
+			isBlocking: false
+		});
+		setPlayer1Position({
+			x: arenaBounds.worldWidthMeters * -.1,
+			y: 0
+		});
+		onPlayerUpdate(1, { position: {
+			x: arenaBounds.worldWidthMeters * .1,
+			y: 0
+		} });
+		setShowPauseMenu(false);
+		setShowRoundStart(true);
+		audio.playSFX("menu_select");
+	}, [
+		audio,
+		combatActions,
+		onPlayerUpdate,
+		arenaBounds,
+		setPlayer1Position
+	]);
+	const handleRoundTransitionComplete = useCallback(() => {
+		const currentScore = matchScoreRef.current;
+		if (currentScore.player1 >= 2 || currentScore.player2 >= 2) {
+			onGameEnd(currentScore.player1 >= 2 ? 0 : 1);
+			return;
+		}
+		combatActions.resetRoundState();
+		setInternalRound((prev) => {
+			const nextRound = prev + 1;
+			setTimeout(() => {
+				setShowRoundStart(true);
+			}, 300);
+			return nextRound;
+		});
+		onPlayerUpdate(0, {
+			health: 100,
+			stamina: 100,
+			ki: 100,
+			consciousness: 100,
+			pain: 0,
+			balance: 100,
+			combatState: CombatState.IDLE,
+			isStunned: false,
+			isBlocking: false
+		});
+		onPlayerUpdate(1, {
+			health: 100,
+			stamina: 100,
+			ki: 100,
+			consciousness: 100,
+			pain: 0,
+			balance: 100,
+			combatState: CombatState.IDLE,
+			isStunned: false,
+			isBlocking: false
+		});
+		setPlayer1Position({
+			x: arenaBounds.worldWidthMeters * -.1,
+			y: 0
+		});
+		onPlayerUpdate(1, { position: {
+			x: arenaBounds.worldWidthMeters * .1,
+			y: 0
+		} });
+	}, [
+		combatActions,
+		onGameEnd,
+		onPlayerUpdate,
+		arenaBounds,
+		setPlayer1Position
+	]);
+	const { showAnnouncement, roundWinner, currentRoundNumber: transitionRoundNumber, skipCountdown, startTransition } = useRoundTransition({
+		announcementDuration: ROUND_ANNOUNCEMENT_TIMINGS.ANNOUNCEMENT_DURATION,
+		countdownDuration: ROUND_ANNOUNCEMENT_TIMINGS.COUNTDOWN_DURATION,
+		transitionDuration: ROUND_ANNOUNCEMENT_TIMINGS.TRANSITION_DURATION
+	}, handleRoundTransitionComplete);
+	const player2Position = useMemo(() => {
+		if (players.length >= 2 && players[1].position) return players[1].position;
+		return {
+			x: arenaBounds.worldWidthMeters * .1,
+			y: 0
+		};
+	}, [players, arenaBounds]);
+	const playerPositions = useMemo(() => {
+		return [player1Position, player2Position];
+	}, [player1Position, player2Position]);
+	const player1Position3D = useMemo(() => {
+		return [
+			playerPositions[0].x,
+			0,
+			playerPositions[0].y
+		];
+	}, [playerPositions]);
+	const player2Position3D = useMemo(() => {
+		return [
+			playerPositions[1].x,
+			0,
+			playerPositions[1].y
+		];
+	}, [playerPositions]);
+	const player1LastRotationRef = useRef(0);
+	const player2Rotation = useMemo(() => {
+		const dx = player1Position3D[0] - player2Position3D[0];
+		const dz = player1Position3D[2] - player2Position3D[2];
+		return Math.atan2(dx, dz);
+	}, [player1Position3D, player2Position3D]);
+	const combatSystem = useMemo(() => new CombatSystem(), []);
+	const balanceSystem = useMemo(() => new BalanceSystem(), []);
+	const speedModifierSystem = useMemo(() => new SpeedModifierSystem(), []);
+	const [player1SpeedModifiers, setPlayer1SpeedModifiers] = useState({
+		finalSpeed: 6,
+		baseSpeed: 6,
+		finalAcceleration: 12
+	});
+	const [player2SpeedModifiers, setPlayer2SpeedModifiers] = useState({
+		finalSpeed: 6,
+		baseSpeed: 6,
+		finalAcceleration: 12
+	});
+	const [player1WalkRunSpeeds, setPlayer1WalkRunSpeeds] = useState({
+		walkSpeed: 6,
+		runSpeed: 10
+	});
+	useEffect(() => {
+		const updateSpeedModifiers = () => {
+			if (players.length >= 2) {
+				const player1WalkModifiers = speedModifierSystem.calculateSpeedModifiers(players[0], MovementType.WALKING, false);
+				const player1RunModifiers = speedModifierSystem.calculateSpeedModifiers(players[0], MovementType.RUNNING, false);
+				setPlayer1SpeedModifiers({
+					finalSpeed: player1WalkModifiers.finalSpeed,
+					baseSpeed: player1WalkModifiers.baseSpeed,
+					finalAcceleration: player1WalkModifiers.finalAcceleration
+				});
+				setPlayer1WalkRunSpeeds({
+					walkSpeed: player1WalkModifiers.finalSpeed,
+					runSpeed: player1RunModifiers.finalSpeed
+				});
+				const player2Modifiers = speedModifierSystem.calculateSpeedModifiers(players[1], MovementType.WALKING, false);
+				setPlayer2SpeedModifiers({
+					finalSpeed: player2Modifiers.finalSpeed,
+					baseSpeed: player2Modifiers.baseSpeed,
+					finalAcceleration: player2Modifiers.finalAcceleration
+				});
+			}
+		};
+		updateSpeedModifiers();
+		const intervalId = setInterval(updateSpeedModifiers, 200);
+		return () => clearInterval(intervalId);
+	}, [players]);
+	useEffect(() => {
+		const updateTime = () => {
+			setCurrentTime(Date.now());
+		};
+		const intervalId = setInterval(updateTime, 200);
+		return () => clearInterval(intervalId);
+	}, []);
+	const calculateLegInjuryFactor = useCallback((player) => {
+		if (!player.bodyPartHealth) return 0;
+		const leftLeg = player.bodyPartHealth.legLeft ?? player.maxHealth;
+		const rightLeg = player.bodyPartHealth.legRight ?? player.maxHealth;
+		const maxHealth = player.maxHealth;
+		const averageLegHealth = (leftLeg + rightLeg) / (2 * maxHealth);
+		return Math.max(0, Math.min(1, 1 - averageLegHealth));
+	}, []);
+	const player1 = players.length > 0 ? players[0] : void 0;
+	const player1Data = useMemo(() => {
+		const p1 = player1 ?? createPlayerFromArchetype(PlayerArchetype.MUSA, 0);
+		return {
+			currentStance: p1.currentStance,
+			legInjuryFactor: calculateLegInjuryFactor(p1)
+		};
+	}, [player1, calculateLegInjuryFactor]);
+	const [player1AttackAnimation, setPlayer1AttackAnimation] = useState(void 0);
+	const [player2AttackAnimation, setPlayer2AttackAnimation] = useState(void 0);
+	const [player1TechniqueId, setPlayer1TechniqueId] = useState(void 0);
+	const [player2TechniqueId, setPlayer2TechniqueId] = useState(void 0);
+	const [player1Injuries, setPlayer1Injuries] = useState([]);
+	const [player2Injuries, setPlayer2Injuries] = useState([]);
+	useEffect(() => {
+		return () => {
+			setPlayer1Injuries([]);
+			setPlayer2Injuries([]);
+		};
+	}, []);
+	useEffect(() => {
+		if (players.length >= 2) {
+			const player1 = players[0];
+			const player2 = players[1];
+			if (player1?.health === player1?.maxHealth && player2?.health === player2?.maxHealth) {
+				setPlayer1Injuries([]);
+				setPlayer2Injuries([]);
+			}
+		}
+	}, [players]);
+	const handlePlayer1PositionChange = useCallback((newPosition) => {
+		setPlayer1Position(newPosition);
+		onPlayerUpdate(0, { position: newPosition });
+	}, [onPlayerUpdate]);
+	const movementBounds = useMemo(() => ({
+		worldWidthMeters: arenaBounds.worldWidthMeters,
+		worldDepthMeters: arenaBounds.worldDepthMeters
+	}), [arenaBounds.worldWidthMeters, arenaBounds.worldDepthMeters]);
+	const player1MovementTimeRef = useRef(0);
+	const player1LastDirectionRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const [player1AccelerationBasedSpeed, setPlayer1AccelerationBasedSpeed] = useState(player1WalkRunSpeeds.walkSpeed);
+	const player1IsRunning = isRunningSpeed(player1AccelerationBasedSpeed, player1WalkRunSpeeds.runSpeed);
+	const { isMoving: player1IsMoving, velocity: player1Velocity } = usePlayerMovement({
+		enabled: !isPaused && combatState.roundStarted && !combatState.roundEnded && matchCountdownComplete && !showRoundStart,
+		bounds: movementBounds,
+		onPositionChange: handlePlayer1PositionChange,
+		initialPositionMeters: player1Position,
+		currentStance: player1Data.currentStance,
+		legInjuryFactor: player1Data.legInjuryFactor,
+		isRunning: player1IsRunning,
+		useTacticalSteps: false,
+		maxSpeedOverride: player1AccelerationBasedSpeed,
+		accelerationOverride: player1SpeedModifiers.finalAcceleration
+	});
+	const player1Rotation = useMemo(() => {
+		if (player1IsMoving && player1Velocity && (player1Velocity.x !== 0 || player1Velocity.y !== 0)) {
+			const movementRotation = Math.atan2(player1Velocity.x, player1Velocity.y);
+			player1LastRotationRef.current = movementRotation;
+			return movementRotation;
+		} else {
+			const dx = player2Position3D[0] - player1Position3D[0];
+			const dz = player2Position3D[2] - player1Position3D[2];
+			const targetRotation = Math.atan2(dx, dz);
+			player1LastRotationRef.current = targetRotation;
+			return targetRotation;
+		}
+	}, [
+		player1IsMoving,
+		player1Velocity,
+		player1Position3D,
+		player2Position3D
+	]);
+	const handleAttackRef = useRef(null);
+	const player1AnimationRef = useRef(null);
+	const validPlayersRefForAnimation = useRef(null);
+	const player1HitTriggerFrameRef = useRef(6);
+	const player1AttackHitFiredRef = useRef(false);
+	const player1AttackDurationRef = useRef(.55);
+	const player2AttackDurationRef = useRef(.55);
+	const clearPlayer1AttackAnimation = useRef(() => {
+		setPlayer1AttackAnimation(void 0);
+		setPlayer1TechniqueId(void 0);
+	});
+	const clearPlayer2AttackAnimation = useRef(() => {
+		setPlayer2AttackAnimation(void 0);
+		setPlayer2TechniqueId(void 0);
+	});
+	const player1Animation = usePlayerAnimation({ events: useMemo(() => ({
+		onFrame: (frame, state) => {
+			if (state === AnimationState.ATTACK && frame >= player1HitTriggerFrameRef.current && !player1AttackHitFiredRef.current) {
+				player1AttackHitFiredRef.current = true;
+				handleAttackRef.current?.();
+			}
+		},
+		onAnimationComplete: (state) => {
+			if (state === AnimationState.ATTACK || state === AnimationState.DEFEND) {
+				combatActions.setExecutingTechnique(false);
+				if (state === AnimationState.ATTACK) clearPlayer1AttackAnimation.current();
+			} else if (state === AnimationState.STANCE_CHANGE) {
+				audio.playSFX("menu_select");
+				const currentStance = validPlayersRefForAnimation.current?.[0]?.currentStance;
+				if (currentStance && player1AnimationRef.current) player1AnimationRef.current.transitionToStanceGuard(currentStance);
+			}
+		}
+	}), [combatActions, audio]) });
+	useEffect(() => {
+		player1AnimationRef.current = player1Animation;
+	}, [player1Animation]);
+	const player2Animation = usePlayerAnimation({ events: {
+		onFrame: (frame, state) => {
+			if (state === AnimationState.ATTACK && frame === 6) {}
+		},
+		onAnimationComplete: (state) => {
+			if (state === AnimationState.ATTACK) clearPlayer2AttackAnimation.current();
+		}
+	} });
+	const prevPlayer1IsMovingRef = useRef(player1IsMoving);
+	const prevPlayer1IsRunningRef = useRef(player1IsRunning);
+	useEffect(() => {
+		const movementChanged = prevPlayer1IsMovingRef.current !== player1IsMoving;
+		const runningChanged = prevPlayer1IsRunningRef.current !== player1IsRunning;
+		if (movementChanged || runningChanged) {
+			if (player1IsMoving) {
+				const targetState = player1IsRunning ? AnimationState.RUN : AnimationState.WALK;
+				if (player1Animation.currentState !== targetState) player1Animation.transitionTo(targetState);
+			} else if (player1Animation.currentState === AnimationState.WALK || player1Animation.currentState === AnimationState.RUN) player1Animation.transitionToStanceGuard(player1Data.currentStance);
+			prevPlayer1IsMovingRef.current = player1IsMoving;
+			prevPlayer1IsRunningRef.current = player1IsRunning;
+		}
+	}, [
+		player1IsMoving,
+		player1IsRunning,
+		player1Animation,
+		player1Data.currentStance
+	]);
+	const MOVEMENT_DETECTION_THRESHOLD = .5;
+	const player2Stance = useMemo(() => {
+		return players[1]?.currentStance ?? TrigramStance.GEON;
+	}, [players]);
+	const prevPlayer2PositionRef = useRef(player2Position);
+	useEffect(() => {
+		const currentPos = playerPositions[1];
+		const prevPos = prevPlayer2PositionRef.current;
+		if (Math.abs(currentPos.x - prevPos.x) > MOVEMENT_DETECTION_THRESHOLD || Math.abs(currentPos.y - prevPos.y) > MOVEMENT_DETECTION_THRESHOLD) {
+			if (player2Animation.currentState !== AnimationState.WALK && player2Animation.currentState !== AnimationState.ATTACK) player2Animation.transitionTo(AnimationState.WALK);
+		} else if (player2Animation.currentState === AnimationState.WALK) player2Animation.transitionToStanceGuard(player2Stance);
+		prevPlayer2PositionRef.current = currentPos;
+	}, [
+		playerPositions,
+		player2Animation,
+		player2Stance
+	]);
+	const validPlayers = useMemo(() => {
+		if (players.length === 0) {
+			const player1 = createPlayerFromArchetype(PlayerArchetype.MUSA, 0);
+			const player2 = createPlayerFromArchetype(PlayerArchetype.AMSALJA, 1);
+			return [{
+				...player1,
+				position: playerPositions[0]
+			}, {
+				...player2,
+				position: playerPositions[1]
+			}];
+		}
+		const player1 = players[0];
+		const player2 = players[1] ?? createPlayerFromArchetype(PlayerArchetype.AMSALJA, 1);
+		return [{
+			...player1,
+			position: playerPositions[0]
+		}, {
+			...player2,
+			position: playerPositions[1]
+		}];
+	}, [players, playerPositions]);
+	const validPlayersRef = useRef(validPlayers);
+	useEffect(() => {
+		validPlayersRef.current = validPlayers;
+		validPlayersRefForAnimation.current = validPlayers;
+	}, [validPlayers]);
+	const getTechniqueAnimationType = useCallback((techniqueId) => {
+		if (!techniqueId) return void 0;
+		return getAnimationTypeForTechnique(techniqueId);
+	}, []);
+	const { player1Position: player1PositionWithAttackMovement, player2Position: player2PositionWithAttackMovement } = useCombatAttackMovement({
+		player1Attacking: player1Animation.currentState === AnimationState.ATTACK,
+		player1AnimationType: getTechniqueAnimationType(player1TechniqueId),
+		player1Stance: player1Data.currentStance,
+		player1BasePosition: player1Position3D,
+		player1AnimationDuration: player1AttackDurationRef.current,
+		player2Attacking: player2Animation.currentState === AnimationState.ATTACK,
+		player2AnimationType: getTechniqueAnimationType(player2TechniqueId),
+		player2Stance: validPlayers[1].currentStance,
+		player2BasePosition: player2Position3D,
+		player2AnimationDuration: player2AttackDurationRef.current
+	});
+	const [player1LocalStance, setPlayer1LocalStance] = useState(validPlayers[0].currentStance);
+	useEffect(() => {
+		setPlayer1LocalStance(validPlayers[0].currentStance);
+	}, [validPlayers]);
+	const player1WithLocalStance = useMemo(() => ({
+		...validPlayers[0],
+		currentStance: player1LocalStance
+	}), [validPlayers, player1LocalStance]);
+	const startTransitionRef = useRef(startTransition);
+	const internalRoundRef = useRef(internalRound);
+	useEffect(() => {
+		startTransitionRef.current = startTransition;
+		internalRoundRef.current = internalRound;
+	}, [startTransition, internalRound]);
+	const addCombatMessage = useCallback((korean, english) => {
+		const message = `${korean} | ${english}`;
+		combatActions.addCombatMessage(message);
+	}, [combatActions]);
+	const handleTimeUp = useCallback(() => {
+		if (!combatState.roundEnded) {
+			combatActions.setRoundEnded(true);
+			addCombatMessage("시간 종료!", "Time's Up!");
+			const currentPlayers = validPlayersRef.current;
+			const player1Health = currentPlayers[0].health;
+			const player2Health = currentPlayers[1].health;
+			if (player1Health > player2Health) {
+				updateMatchScore(0);
+				startTransitionRef.current(currentPlayers[0], internalRoundRef.current);
+			} else if (player2Health > player1Health) {
+				updateMatchScore(1);
+				startTransitionRef.current(currentPlayers[1], internalRoundRef.current);
+			} else startTransitionRef.current(null, internalRoundRef.current);
+		}
+	}, [
+		combatState.roundEnded,
+		combatActions,
+		addCombatMessage,
+		updateMatchScore
+	]);
+	const handleTimeUpRef = useRef(handleTimeUp);
+	useEffect(() => {
+		handleTimeUpRef.current = handleTimeUp;
+	}, [handleTimeUp]);
+	const timerResetKey = `round-${internalRound}`;
+	const timerState = useCombatTimer({
+		initialTime: Math.max(0, timeRemaining),
+		isPaused: isPaused || !combatState.roundStarted || combatState.roundEnded || !matchCountdownComplete || showRoundStart,
+		onTimeUp: useCallback(() => handleTimeUpRef.current(), []),
+		warningThreshold: 10,
+		urgentThreshold: 5,
+		resetKey: timerResetKey
+	});
+	const startRound = useCallback(() => {
+		combatActions.setRoundStarted(true);
+		combatActions.setRoundEnded(false);
+		addCombatMessage("라운드 시작!", "Round Start!");
+		const player = validPlayers[0];
+		if (player?.archetype) {
+			const playerArchetype = player.archetype.toLowerCase();
+			combatAudio.playArchetypeMusic(playerArchetype, 2e3);
+		} else combatAudio.playCombatMusic(2e3);
+	}, [
+		combatActions,
+		addCombatMessage,
+		validPlayers,
+		combatAudio
+	]);
+	const hasAutoStartedRef = useRef(false);
+	useEffect(() => {
+		if (matchCountdownComplete && !hasAutoStartedRef.current) {
+			hasAutoStartedRef.current = true;
+			combatActions.setRoundStarted(true);
+			addCombatMessage("라운드 시작!", "Round Start!");
+			const player = validPlayers[0];
+			if (player?.archetype) {
+				const playerArchetype = player.archetype.toLowerCase();
+				combatAudio.playArchetypeMusic(playerArchetype, 2e3);
+			} else combatAudio.playCombatMusic(2e3);
+		}
+	}, [
+		matchCountdownComplete,
+		combatActions,
+		addCombatMessage,
+		validPlayers,
+		combatAudio
+	]);
+	const adaptiveDifficulty = useMemo(() => new AdaptiveDifficulty(), []);
+	useEffect(() => {
+		try {
+			const savedMetrics = localStorage.getItem("ai_difficulty_metrics");
+			if (savedMetrics) adaptiveDifficulty.importMetrics(savedMetrics);
+		} catch (err) {
+			console.warn("Failed to load AI difficulty metrics:", err);
+		}
+		return () => {
+			try {
+				const metrics = adaptiveDifficulty.exportMetrics();
+				localStorage.setItem("ai_difficulty_metrics", metrics);
+			} catch (err) {
+				console.warn("Failed to save AI difficulty metrics:", err);
+			}
+		};
+	}, [adaptiveDifficulty]);
+	const aiPersonality = useMemo(() => getPersonalityByArchetype(validPlayers[1].archetype), [validPlayers]);
+	const handleAIStanceChange = useCallback((stance) => {
+		const currentStance = validPlayers[1].currentStance;
+		player2Animation.transitionToStanceChange(currentStance, stance);
+		onPlayerUpdate(1, { currentStance: stance });
+		addCombatMessage(`AI 자세 변경: ${stance}`, `AI Stance Change: ${stance}`);
+	}, [
+		validPlayers,
+		player2Animation,
+		onPlayerUpdate,
+		addCombatMessage
+	]);
+	const handleEffectComplete = useCallback((effectId) => {
+		combatActions.removeHitEffect(effectId);
+	}, [combatActions]);
+	const createHitEffect = useCallback((id, type, position, intensity) => ({
+		id,
+		type,
+		attackerId: "player1",
+		defenderId: "player2",
+		timestamp: Date.now(),
+		duration: 1e3,
+		position,
+		intensity,
+		startTime: Date.now()
+	}), []);
+	const addHitEffect = useCallback((type, position, intensity = 1) => {
+		const effect = createHitEffect(`effect_${Date.now()}`, type, position, intensity);
+		combatActions.addHitEffect(effect);
+	}, [createHitEffect, combatActions]);
+	const handlePlayerPositionUpdate = useCallback((playerIndex, position) => {
+		if (playerIndex === 0) {
+			setPlayer1Position(position);
+			onPlayerUpdate(0, { position });
+		} else if (playerIndex === 1) onPlayerUpdate(1, { position });
+	}, [onPlayerUpdate, setPlayer1Position]);
+	const handleInjuryCreated = useCallback((injury, targetPlayerIndex) => {
+		const updateInjuries = (prev) => {
+			const recentHitTime = 5e3;
+			const now = Date.now();
+			const recentHit = prev.find((existing) => existing.region === injury.region && now - existing.timestamp < recentHitTime && existing.type === InjuryType.BRUISE && injury.type === InjuryType.BRUISE);
+			if (recentHit) {
+				const newHitCount = recentHit.hitCount + 1;
+				const escalatedSeverity = Math.min(1, recentHit.severity + .15);
+				return prev.map((existing) => existing.id === recentHit.id ? {
+					...existing,
+					hitCount: newHitCount,
+					severity: escalatedSeverity,
+					timestamp: now
+				} : existing);
+			}
+			return [...prev, injury];
+		};
+		if (targetPlayerIndex === 0) setPlayer1Injuries(updateInjuries);
+		else if (targetPlayerIndex === 1) setPlayer2Injuries(updateInjuries);
+	}, []);
+	const { handleAttack, handleDefend, handleStanceSwitch, handleStanceSideSwitch, handleAIAttack, handleAIDefend, handleAITechnique, moveAIPlayer } = useCombatActions({
+		validPlayers,
+		playerPositions: [playerPositions[0], playerPositions[1]],
+		combatState,
+		combatActions,
+		combatSystem,
+		onPlayerUpdate,
+		onPlayerPositionUpdate: handlePlayerPositionUpdate,
+		onLateralityUpdate: (playerIndex, laterality) => {
+			combatActions.setPlayerLateralityIndex(playerIndex, laterality);
+		},
+		onInjuryCreated: handleInjuryCreated,
+		addCombatMessage,
+		addHitEffect,
+		arenaBounds,
+		combatAudio,
+		playerAnimations: {
+			player1: player1Animation,
+			player2: player2Animation
+		}
+	});
+	useEffect(() => {
+		handleAttackRef.current = handleAttack;
+	}, [handleAttack]);
+	const techniqueSelection = useTechniqueSelection({
+		player: player1WithLocalStance,
+		enabled: !isPaused && combatState.roundStarted && !combatState.roundEnded && matchCountdownComplete && !showRoundStart,
+		onTechniqueExecute: useCallback((technique) => {
+			feedbackActions.showTechnique(technique.name.korean, technique.name.english);
+			const animationName = getAnimationForTechnique(technique.name.english || technique.id);
+			setPlayer1AttackAnimation(animationName);
+			setPlayer1TechniqueId(technique.id);
+			const attackDuration = getAnimation(animationName)?.duration ?? .55;
+			const attackFrames = Math.max(1, Math.round(attackDuration * 60));
+			player1HitTriggerFrameRef.current = Math.round(attackFrames * .4);
+			player1AttackHitFiredRef.current = false;
+			player1AttackDurationRef.current = attackDuration;
+			player1Animation.transitionToAttack(attackDuration);
+			combatActions.setExecutingTechnique(true);
+			onPlayerUpdate(0, {
+				stamina: Math.max(0, validPlayers[0].stamina - technique.staminaCost),
+				ki: Math.max(0, validPlayers[0].ki - technique.kiCost)
+			});
+			handleAttack(technique);
+			addCombatMessage(`${technique.name.korean} 사용!`, `Used ${technique.name.english}!`);
+		}, [
+			validPlayers,
+			onPlayerUpdate,
+			feedbackActions,
+			handleAttack,
+			addCombatMessage,
+			player1Animation,
+			combatActions
+		])
+	});
+	const cooldownsMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		techniqueSelection.activeCooldowns.forEach((cd) => {
+			map.set(cd.techniqueId, cd.remaining);
+		});
+		return map;
+	}, [techniqueSelection.activeCooldowns]);
+	const [previousStance, setPreviousStance] = useState(0);
+	const currentPlayerStance = validPlayers[0].currentStance;
+	const currentStanceIndex = useMemo(() => {
+		return STANCE_INDEX_MAP.get(currentPlayerStance) ?? 0;
+	}, [currentPlayerStance]);
+	const handleStanceChangeWithAnimation = useCallback((newStance) => {
+		const currentStance = validPlayers[0].currentStance;
+		if (player1Animation.transitionToStanceGuard(newStance)) {
+			setPreviousStance(STANCE_INDEX_MAP.get(currentStance) ?? 0);
+			setPlayer1LocalStance(newStance);
+			handleStanceSwitch(newStance);
+			playStanceChangeSound();
+		}
+	}, [
+		validPlayers,
+		player1Animation,
+		handleStanceSwitch,
+		playStanceChangeSound
+	]);
+	const player1Health = validPlayers[0].health;
+	const player2Health = validPlayers[1].health;
+	const lastPlayer2HealthRef = useRef(player2Health);
+	useEffect(() => {
+		const currentHealth = player2Health;
+		const damageDone = lastPlayer2HealthRef.current - currentHealth;
+		if (damageDone > 0 && combatState.roundStarted && !combatState.roundEnded) {
+			const getDamageType = () => {
+				if (damageDone >= 25) return "critical";
+				if (damageDone >= 20) return "vital";
+				return "normal";
+			};
+			const damageType = getDamageType();
+			feedbackActions.addDamageNumber(Math.round(damageDone), playerPositions[1], damageType);
+			feedbackActions.incrementCombo();
+			if (damageType === "critical") feedbackActions.addActionFeedback("critical", "Critical!", "치명타!", playerPositions[0]);
+		}
+		lastPlayer2HealthRef.current = currentHealth;
+	}, [
+		player2Health,
+		validPlayers,
+		playerPositions,
+		feedbackActions,
+		combatState.roundStarted,
+		combatState.roundEnded
+	]);
+	const lastPlayer1HealthRef = useRef(player1Health);
+	useEffect(() => {
+		const currentHealth = player1Health;
+		const damageDone = lastPlayer1HealthRef.current - currentHealth;
+		if (damageDone > 0 && combatState.roundStarted && !combatState.roundEnded) {
+			const damageType = damageDone >= 20 ? "critical" : "normal";
+			feedbackActions.addDamageNumber(Math.round(damageDone), playerPositions[0], damageType);
+		}
+		lastPlayer1HealthRef.current = currentHealth;
+	}, [
+		player1Health,
+		validPlayers,
+		playerPositions,
+		feedbackActions,
+		combatState.roundStarted,
+		combatState.roundEnded
+	]);
+	const handleAttackWithFeedback = useCallback(() => {
+		setPlayer1AttackAnimation("jab");
+		if (player1Animation.transitionTo(AnimationState.ATTACK)) combatActions.setExecutingTechnique(true);
+		else {
+			console.warn("Attack animation transition failed; executing attack logic directly.");
+			handleAttack();
+		}
+	}, [
+		player1Animation,
+		combatActions,
+		handleAttack
+	]);
+	const handleDefendWithFeedback = useCallback(() => {
+		const defenderPos = playerPositions[0];
+		if (player1Animation.transitionTo(AnimationState.DEFEND)) {
+			handleDefend();
+			feedbackActions.addActionFeedback("blocked", "Blocked", "방어!", defenderPos);
+		} else {
+			console.warn("Defend animation transition failed; executing defend logic directly.");
+			handleDefend();
+			feedbackActions.addActionFeedback("blocked", "Blocked", "방어!", defenderPos);
+		}
+	}, [
+		handleDefend,
+		playerPositions,
+		feedbackActions,
+		player1Animation
+	]);
+	/**
+	* Helper function to execute fallback recovery animation
+	* when a specific recovery type cannot be performed.
+	*
+	* Determines the appropriate recovery type based on ground state
+	* and transitions to that animation.
+	*
+	* @korean 대체회복실행
+	*/
+	const executeFallbackRecovery = useCallback(() => {
+		const groundState = balanceSystem.getGroundState(player1Animation.currentState);
+		if (groundState) {
+			const animationState = getRecoveryAnimationState(determineRecoveryType(groundState));
+			player1Animation.transitionTo(animationState);
+		}
+	}, [balanceSystem, player1Animation]);
+	const { queuedInputs, showHints } = useKeyboardControls({
+		onStanceChange: useCallback((stanceIndex) => {
+			const stance = TRIGRAM_STANCES_ORDER[stanceIndex];
+			if (stance) handleStanceChangeWithAnimation(stance);
+		}, [handleStanceChangeWithAnimation]),
+		onAction: useCallback((action) => {
+			switch (action) {
+				case "attack":
+					techniqueSelection.executeTechnique();
+					break;
+				case "block":
+					handleDefendWithFeedback();
+					break;
+				case "recovery_quick":
+					executeFallbackRecovery();
+					break;
+				case "recovery_roll": {
+					const player1 = players[0];
+					if (balanceSystem.canRecoverWithType(player1, "roll_recovery")) {
+						onPlayerUpdate(0, { stamina: balanceSystem.applyRecoveryCost(player1, "roll_recovery").stamina });
+						player1Animation.transitionTo(AnimationState.RECOVERY_ROLL);
+					} else {
+						audio.playSFX("menu_error");
+						const player1Pos = playerPositions[0];
+						feedbackActions.addActionFeedback("blocked", "Not enough stamina!", "체력 부족!", player1Pos);
+						executeFallbackRecovery();
+					}
+					break;
+				}
+				case "recovery_defensive":
+					player1Animation.transitionTo(AnimationState.RECOVERY_DEFENSIVE);
+					break;
+				case "footwork_circular_left":
+				case "footwork_circular_right":
+				case "footwork_slide_forward":
+				case "footwork_slide_back":
+				case "footwork_pivot_left":
+				case "footwork_pivot_right":
+				case "footwork_shuffle":
+					player1Animation.transitionTo(action);
+					break;
+				case "stance_side_switch":
+					player1Animation.transitionTo(AnimationState.STANCE_SIDE_SWITCH);
+					break;
+			}
+		}, [
+			techniqueSelection,
+			handleDefendWithFeedback,
+			executeFallbackRecovery,
+			balanceSystem,
+			player1Animation,
+			players,
+			onPlayerUpdate,
+			audio,
+			feedbackActions,
+			playerPositions
+		]),
+		enabled: !isPaused && !showPauseMenu && combatState.roundStarted && !combatState.roundEnded && matchCountdownComplete && !showRoundStart && !combatState.isExecutingTechnique,
+		currentStance: currentStanceIndex,
+		playSFX: audio.playSFX,
+		currentAnimationState: player1Animation.currentState
+	});
+	const [stanceWheelExpanded, setStanceWheelExpanded] = useState(false);
+	const activeMobileKeyRef = useRef(null);
+	/**
+	* Mobile touch control handler - Converts VirtualDPad touch inputs to keyboard events
+	*
+	* Dispatches synthetic KeyboardEvents with proper properties to ensure compatibility
+	* with usePlayerMovement hook. The synthetic events include:
+	* - key: The character key (w/a/s/d)
+	* - code: The physical key code (KeyW/KeyA/KeyS/KeyD)
+	* - bubbles: true - Allows event to propagate through DOM
+	* - cancelable: true - Allows event to be prevented
+	*
+	* These properties are essential for the keyboard event listeners in inputSystem.ts
+	* to properly recognize and process the movement commands.
+	*
+	* @param direction - The D-pad direction or null
+	* @param eventType - 'start' for press, 'end' for release
+	*/
+	const handleMobileMove = useCallback((direction, eventType) => {
+		const directionMap = {
+			up: "w",
+			"up-right": "w",
+			right: "d",
+			"down-right": "s",
+			down: "s",
+			"down-left": "s",
+			left: "a",
+			"up-left": "w"
+		};
+		if (eventType === "start" && direction) {
+			if (activeMobileKeyRef.current && activeMobileKeyRef.current !== directionMap[direction]) {
+				const prevKey = activeMobileKeyRef.current;
+				window.dispatchEvent(new KeyboardEvent("keyup", {
+					key: prevKey,
+					code: `Key${prevKey.toUpperCase()}`,
+					bubbles: true,
+					cancelable: true
+				}));
+			}
+			const key = directionMap[direction];
+			activeMobileKeyRef.current = key;
+			window.dispatchEvent(new KeyboardEvent("keydown", {
+				key,
+				code: `Key${key.toUpperCase()}`,
+				bubbles: true,
+				cancelable: true
+			}));
+		} else if (eventType === "end") {
+			if (activeMobileKeyRef.current) {
+				const key = activeMobileKeyRef.current;
+				window.dispatchEvent(new KeyboardEvent("keyup", {
+					key,
+					code: `Key${key.toUpperCase()}`,
+					bubbles: true,
+					cancelable: true
+				}));
+				activeMobileKeyRef.current = null;
+			}
+		}
+	}, []);
+	const handleMobileAttack = useCallback(() => {
+		techniqueSelection.executeTechnique();
+	}, [techniqueSelection]);
+	const handleMobileBlock = useCallback((eventType) => {
+		if (eventType === "start") handleDefendWithFeedback();
+	}, [handleDefendWithFeedback]);
+	const handleMobileStanceChange = useCallback((stanceIndex) => {
+		const stance = TRIGRAM_STANCES_ORDER[stanceIndex];
+		if (stance) handleStanceChangeWithAnimation(stance);
+	}, [handleStanceChangeWithAnimation]);
+	const handleMobileGesture = useCallback((gesture) => {
+		switch (gesture.type) {
+			case "swipe-right":
+				window.dispatchEvent(new KeyboardEvent("keydown", { key: "d" }));
+				setTimeout(() => {
+					window.dispatchEvent(new KeyboardEvent("keyup", { key: "d" }));
+				}, 100);
+				break;
+			case "swipe-left":
+				window.dispatchEvent(new KeyboardEvent("keydown", { key: "a" }));
+				setTimeout(() => {
+					window.dispatchEvent(new KeyboardEvent("keyup", { key: "a" }));
+				}, 100);
+				break;
+			case "swipe-up":
+				techniqueSelection.executeTechnique();
+				break;
+			case "swipe-down":
+				techniqueSelection.executeTechnique();
+				break;
+			case "two-finger-tap":
+				audio.playSFX("menu_select");
+				break;
+		}
+	}, [techniqueSelection, audio]);
+	const toggleStanceWheel = useCallback(() => {
+		setStanceWheelExpanded((prev) => !prev);
+	}, []);
+	const mobileControlsEnabled = isMobile && !isPaused && !showPauseMenu && combatState.roundStarted && !combatState.roundEnded && matchCountdownComplete && !showRoundStart && !combatState.isExecutingTechnique;
+	useEffect(() => {
+		if (isPaused) return;
+		if (timeRemaining <= 0 && !combatState.roundEnded) {
+			combatActions.setRoundEnded(true);
+			combatActions.setRoundStarted(false);
+			combatActions.setRoundDisplayStatus("end");
+			combatAudio.stopCombatMusic(1e3);
+			const winner = validPlayers[0].health > validPlayers[1].health ? 0 : 1;
+			const roundWinner = validPlayers[winner];
+			updateMatchScore(winner);
+			addCombatMessage("라운드 종료!", "Round Over!");
+			setTimeout(() => {
+				startTransition(roundWinner, internalRound);
+			}, 1500);
+		}
+	}, [
+		timeRemaining,
+		combatState.roundEnded,
+		combatState.roundStarted,
+		validPlayers,
+		onGameEnd,
+		addCombatMessage,
+		internalRound,
+		isPaused,
+		combatActions,
+		combatAudio,
+		startTransition,
+		updateMatchScore
+	]);
+	const executeAIActionCallbackRef = useRef(void 0);
+	const { updateDifficultyTarget } = useAICombat({
+		player: validPlayers[1],
+		opponent: validPlayers[0],
+		personality: aiPersonality,
+		adaptiveDifficulty,
+		isPaused,
+		roundStarted: combatState.roundStarted,
+		roundEnded: combatState.roundEnded,
+		arenaBounds,
+		onExecuteAction: (action, targetPos, selectedTechnique, targetVitalPoint) => executeAIActionCallbackRef.current?.(action, targetPos, selectedTechnique, targetVitalPoint),
+		onStanceChange: handleAIStanceChange,
+		onLateralityChange: () => handleStanceSideSwitch(1),
+		playerLaterality: combatState.playerLaterality[1],
+		opponentLaterality: combatState.playerLaterality[0]
+	});
+	const currentDifficultyTier = useMemo(() => adaptiveDifficulty.getDifficultyTier(), [adaptiveDifficulty]);
+	useEffect(() => {
+		if (!combatState.roundEnded || internalRound < 1) return;
+		if (internalRound % 2 === 0) {
+			const player1 = validPlayersRef.current[0];
+			adaptiveDifficulty.updateSkillMetrics({
+				hitsLanded: player1.hitsLanded ?? 0,
+				totalAttacks: (player1.hitsLanded ?? 0) + (player1.misses ?? 0),
+				combosExecuted: 0,
+				perfectBlockCount: 0,
+				avgReactionTimeMs: 600,
+				vitalPointsHit: 0,
+				effectiveStanceChanges: 0,
+				damageDealt: player1.totalDamageDealt ?? 0,
+				damageTaken: player1.totalDamageReceived ?? 0
+			});
+			updateDifficultyTarget(adaptiveDifficulty.getDifficultyParameters());
+		}
+	}, [
+		combatState.roundEnded,
+		internalRound,
+		adaptiveDifficulty,
+		updateDifficultyTarget
+	]);
+	const executeAIActionCallback = useCallback((action, targetPos, selectedTechnique, targetVitalPoint) => {
+		switch (action) {
+			case "attack":
+				if (selectedTechnique?.name?.english || selectedTechnique?.englishName) {
+					const p2AttackAnimName = getAnimationForTechnique(selectedTechnique.name?.english ?? selectedTechnique.englishName ?? "jab");
+					setPlayer2AttackAnimation(p2AttackAnimName);
+					if (selectedTechnique?.id) setPlayer2TechniqueId(selectedTechnique.id);
+					const p2AttackDur = getAnimation(p2AttackAnimName)?.duration ?? .55;
+					player2AttackDurationRef.current = p2AttackDur;
+					player2Animation.transitionToAttack(p2AttackDur);
+				} else {
+					setPlayer2AttackAnimation("jab");
+					player2AttackDurationRef.current = .55;
+					player2Animation.transitionToAttack(.55);
+				}
+				handleAIAttack(selectedTechnique, targetVitalPoint);
+				break;
+			case "defend":
+				player2Animation.transitionTo(AnimationState.DEFEND);
+				handleAIDefend();
+				break;
+			case "technique":
+			case "combo":
+				if (selectedTechnique?.name?.english || selectedTechnique?.englishName) {
+					const p2TechAnimName = getAnimationForTechnique(selectedTechnique.name?.english ?? selectedTechnique.englishName ?? "cross");
+					setPlayer2AttackAnimation(p2TechAnimName);
+					if (selectedTechnique?.id) setPlayer2TechniqueId(selectedTechnique.id);
+					const p2TechDur = getAnimation(p2TechAnimName)?.duration ?? .6;
+					player2AttackDurationRef.current = p2TechDur;
+					player2Animation.transitionToAttack(p2TechDur);
+				} else {
+					setPlayer2AttackAnimation("cross");
+					player2AttackDurationRef.current = .6;
+					player2Animation.transitionToAttack(.6);
+				}
+				handleAITechnique(selectedTechnique, targetVitalPoint);
+				break;
+			case "approach":
+			case "retreat":
+			case "circle":
+				if (targetPos) moveAIPlayer(targetPos);
+				break;
+			case "feint":
+				{
+					const playerPos = validPlayers[0].position;
+					const feintOffsetMeters = .5;
+					moveAIPlayer({
+						x: playerPos.x + (Math.random() - .5) * feintOffsetMeters,
+						y: playerPos.y + (Math.random() - .5) * feintOffsetMeters
+					});
+					addCombatMessage("AI 페인트", "AI Feint");
+					setTimeout(() => {
+						if (!combatState.roundEnded && combatState.roundStarted && validPlayers.length >= 2) {
+							const currentPlayerPos = validPlayers[0].position;
+							const currentAiPos = validPlayers[1].position;
+							const dx = currentAiPos.x - currentPlayerPos.x;
+							const dy = currentAiPos.y - currentPlayerPos.y;
+							const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+							const retreatDistanceMeters = .8;
+							const halfWidth = arenaBounds.worldWidthMeters / 2;
+							const halfDepth = arenaBounds.worldDepthMeters / 2;
+							moveAIPlayer({
+								x: Math.max(-halfWidth + .5, Math.min(halfWidth - .5, currentPlayerPos.x + dx / dist * retreatDistanceMeters)),
+								y: Math.max(-halfDepth + .5, Math.min(halfDepth - .5, currentPlayerPos.y + dy / dist * retreatDistanceMeters))
+							});
+						}
+					}, 200);
+				}
+				break;
+			case "counter":
+				if (selectedTechnique?.name?.english || selectedTechnique?.englishName) {
+					const p2CounterAnimName = getAnimationForTechnique(selectedTechnique.name?.english ?? selectedTechnique.englishName ?? "cross");
+					setPlayer2AttackAnimation(p2CounterAnimName);
+					if (selectedTechnique?.id) setPlayer2TechniqueId(selectedTechnique.id);
+					const p2CounterDur = getAnimation(p2CounterAnimName)?.duration ?? .6;
+					player2AttackDurationRef.current = p2CounterDur;
+					player2Animation.transitionToAttack(p2CounterDur);
+				} else {
+					setPlayer2AttackAnimation("cross");
+					player2AttackDurationRef.current = .6;
+					player2Animation.transitionToAttack(.6);
+				}
+				handleAIAttack(selectedTechnique, targetVitalPoint);
+				addCombatMessage("AI 반격!", "AI Counter!");
+				break;
+		}
+	}, [
+		handleAIAttack,
+		handleAIDefend,
+		handleAITechnique,
+		moveAIPlayer,
+		addCombatMessage,
+		validPlayers,
+		arenaBounds,
+		combatState.roundEnded,
+		combatState.roundStarted,
+		player2Animation
+	]);
+	useEffect(() => {
+		executeAIActionCallbackRef.current = executeAIActionCallback;
+	}, [executeAIActionCallback]);
+	useEffect(() => {
+		if (combatState.roundEnded && validPlayers.length === 2) {
+			const player = validPlayers[0];
+			const totalAttacks = (player.hitsLanded ?? 0) + (player.hitsTaken ?? 0);
+			if (totalAttacks === 0) return;
+			adaptiveDifficulty.updateSkillMetrics({
+				hitsLanded: player.hitsLanded ?? 0,
+				totalAttacks,
+				combosExecuted: player.comboCount ?? 0,
+				perfectBlockCount: 0,
+				avgReactionTimeMs: 500,
+				vitalPointsHit: player.vitalPointHits ?? 0,
+				effectiveStanceChanges: 0,
+				damageDealt: player.totalDamageDealt ?? 0,
+				damageTaken: player.totalDamageReceived ?? 0
+			});
+		}
+	}, [
+		combatState.roundEnded,
+		adaptiveDifficulty,
+		validPlayers
+	]);
+	const checkGameEnd = useCallback(() => {
+		if (combatState.roundEnded) return;
+		const p1Defeated = validPlayers[0].health <= 0;
+		const p2Defeated = validPlayers[1].health <= 0;
+		if (p1Defeated || p2Defeated) {
+			combatActions.setRoundEnded(true);
+			combatActions.setRoundStarted(false);
+			combatActions.setRoundDisplayStatus("ko");
+			const winner = p1Defeated ? 1 : 0;
+			const roundWinner = validPlayers[winner];
+			updateMatchScore(winner);
+			addCombatMessage(p1Defeated ? "플레이어 1 패배" : "플레이어 1 승리!", p1Defeated ? "Player 1 Defeated" : "Player 1 Victory!");
+			setTimeout(() => {
+				startTransition(roundWinner, internalRound);
+			}, 1500);
+		}
+	}, [
+		validPlayers,
+		addCombatMessage,
+		combatState.roundEnded,
+		combatActions,
+		internalRound,
+		startTransition,
+		updateMatchScore
+	]);
+	useEffect(() => {
+		checkGameEnd();
+	}, [
+		player1Health,
+		player2Health,
+		checkGameEnd
+	]);
+	useEffect(() => {
+		const handleCombatInput = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				if (showPauseMenu) handleResume();
+				else handlePause();
+				return;
+			}
+			if (isPaused || showPauseMenu) return;
+			if (!matchCountdownComplete || showRoundStart) return;
+			if (!combatState.roundStarted || combatState.roundEnded || combatState.isExecutingTechnique) return;
+			const key = event.key.toLowerCase();
+			if (key >= "1" && key <= "8") {
+				const stanceIndex = parseInt(key) - 1;
+				handleStanceSwitch([
+					TrigramStance.GEON,
+					TrigramStance.TAE,
+					TrigramStance.LI,
+					TrigramStance.JIN,
+					TrigramStance.SON,
+					TrigramStance.GAM,
+					TrigramStance.GAN,
+					TrigramStance.GON
+				][stanceIndex]);
+				event.preventDefault();
+			}
+			if (key === " ") {
+				handleAttackWithFeedback();
+				event.preventDefault();
+			}
+			if (event.key === "Shift") {
+				handleDefendWithFeedback();
+				event.preventDefault();
+			}
+			if (event.key === "f" || event.key === "F") {
+				handleStanceSideSwitch(0);
+				event.preventDefault();
+			}
+		};
+		window.addEventListener("keydown", handleCombatInput);
+		return () => window.removeEventListener("keydown", handleCombatInput);
+	}, [
+		combatState.roundStarted,
+		combatState.roundEnded,
+		combatState.isExecutingTechnique,
+		matchCountdownComplete,
+		showRoundStart,
+		isPaused,
+		showPauseMenu,
+		handleStanceSwitch,
+		handleStanceSideSwitch,
+		handleAttackWithFeedback,
+		handleDefendWithFeedback,
+		handlePause,
+		handleResume
+	]);
+	const player1MovementState = useMemo(() => {
+		if (!validPlayers[0]?.bodyPartHealth) return {
+			statusText: {
+				korean: "정상",
+				english: "Normal"
+			},
+			isLimping: false,
+			isSevereLimp: false
+		};
+		const result = injuryMovementModifier.calculateMovementSpeed(1, validPlayers[0].bodyPartHealth, validPlayers[0].currentStance ?? TrigramStance.GEON, validPlayers[0].pain ?? 0);
+		return {
+			statusText: result.statusText,
+			isLimping: result.isLimping,
+			isSevereLimp: result.isSevereLimp,
+			speedMultiplier: result.speedMultiplier
+		};
+	}, [validPlayers]);
+	const player2MovementState = useMemo(() => {
+		if (!validPlayers[1]?.bodyPartHealth) return {
+			statusText: {
+				korean: "정상",
+				english: "Normal"
+			},
+			isLimping: false,
+			isSevereLimp: false
+		};
+		const result = injuryMovementModifier.calculateMovementSpeed(1, validPlayers[1].bodyPartHealth, validPlayers[1].currentStance ?? TrigramStance.GEON, validPlayers[1].pain ?? 0);
+		return {
+			statusText: result.statusText,
+			isLimping: result.isLimping,
+			isSevereLimp: result.isSevereLimp,
+			speedMultiplier: result.speedMultiplier
+		};
+	}, [validPlayers]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: `${width}px`,
+			height: `${height}px`,
+			position: "relative",
+			backgroundColor: "#0a0a0a",
+			overflow: "hidden"
+		},
+		"data-testid": "combat-screen",
+		children: [
+			/* @__PURE__ */ jsxs(Canvas, {
+				style: {
+					width: `${width}px`,
+					height: `${height}px`
+				},
+				camera: {
+					position: cameraConfig.position,
+					fov: cameraConfig.fov,
+					near: cameraConfig.near,
+					far: cameraConfig.far
+				},
+				gl: {
+					antialias: renderConfig.antialias,
+					alpha: false,
+					powerPreference: "high-performance",
+					failIfMajorPerformanceCaveat: false
+				},
+				dpr: renderConfig.dpr,
+				shadows: false,
+				onCreated: ({ gl }) => {
+					gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);
+				},
+				children: [
+					/* @__PURE__ */ jsx("ambientLight", { intensity: .6 }),
+					/* @__PURE__ */ jsx("directionalLight", {
+						position: [
+							10,
+							10,
+							5
+						],
+						intensity: 1.2
+					}),
+					/* @__PURE__ */ jsxs(AdaptiveQualityWrapper, { children: [
+						showPerformanceOverlay && !showPerformanceMonitor && /* @__PURE__ */ jsx(PerformanceOverlay3D, {}),
+						/* @__PURE__ */ jsx(CombatArena3D, {
+							lighting: "cyberpunk",
+							scale: arenaBounds.scale,
+							worldWidthMeters: arenaBounds.worldWidthMeters,
+							worldDepthMeters: arenaBounds.worldDepthMeters
+						}),
+						/* @__PURE__ */ jsx(AnimationUpdater, {
+							player1Animation,
+							player2Animation
+						}),
+						/* @__PURE__ */ jsx(AccelerationUpdater, {
+							isMoving: player1IsMoving,
+							velocity: player1Velocity,
+							movementTimeRef: player1MovementTimeRef,
+							lastDirectionRef: player1LastDirectionRef,
+							onSpeedUpdate: setPlayer1AccelerationBasedSpeed,
+							walkSpeed: player1WalkRunSpeeds.walkSpeed,
+							runSpeed: player1WalkRunSpeeds.runSpeed
+						}),
+						/* @__PURE__ */ jsx(Player3DWithTransitions, {
+							...convertPlayerStateToProps(validPlayers[0], player1PositionWithAttackMovement, player1Rotation, {
+								isMobile,
+								facing: "right",
+								enableFacialExpressions: true,
+								enableEyeTracking: true,
+								opponentPosition: player2PositionWithAttackMovement
+							}),
+							currentAnimation: animationStateToPlayerAnimation(player1Animation.currentState),
+							attackAnimation: player1AttackAnimation,
+							laterality: combatState.playerLaterality[0],
+							enableTransitionEffects: !isMobile,
+							enableStanceSymbol: !isMobile,
+							enableStanceAudio: true
+						}),
+						/* @__PURE__ */ jsx(Player3DWithTransitions, {
+							...convertPlayerStateToProps(validPlayers[1], player2PositionWithAttackMovement, player2Rotation, {
+								isMobile,
+								facing: "right",
+								enableFacialExpressions: true,
+								enableEyeTracking: true,
+								opponentPosition: player1PositionWithAttackMovement
+							}),
+							currentAnimation: animationStateToPlayerAnimation(player2Animation.currentState),
+							attackAnimation: player2AttackAnimation,
+							laterality: combatState.playerLaterality[1],
+							enableTransitionEffects: !isMobile,
+							enableStanceSymbol: !isMobile,
+							enableStanceAudio: true
+						}),
+						(player1MovementState.isLimping || player1MovementState.isSevereLimp) && /* @__PURE__ */ jsx(Html, {
+							position: [
+								player1Position3D[0],
+								player1Position3D[1] + 2.5,
+								player1Position3D[2]
+							],
+							center: true,
+							"data-testid": "player1-movement-status",
+							children: /* @__PURE__ */ jsxs("div", {
+								style: {
+									fontSize: isMobile ? "12px" : "14px",
+									color: player1MovementState.isSevereLimp ? toHexColor(KOREAN_COLORS.TEXT_ERROR) : toHexColor(KOREAN_COLORS.ACCENT_GOLD),
+									fontFamily: FONT_FAMILY.KOREAN,
+									fontWeight: "bold",
+									textShadow: "0 0 4px rgba(0,0,0,0.8)",
+									background: "rgba(0, 0, 0, 0.6)",
+									padding: "4px 8px",
+									borderRadius: "4px",
+									whiteSpace: "nowrap"
+								},
+								children: [
+									player1MovementState.statusText.korean,
+									" |",
+									" ",
+									player1MovementState.statusText.english
+								]
+							})
+						}),
+						(player2MovementState.isLimping || player2MovementState.isSevereLimp) && /* @__PURE__ */ jsx(Html, {
+							position: [
+								player2Position3D[0],
+								player2Position3D[1] + 2.5,
+								player2Position3D[2]
+							],
+							center: true,
+							"data-testid": "player2-movement-status",
+							children: /* @__PURE__ */ jsxs("div", {
+								style: {
+									fontSize: isMobile ? "12px" : "14px",
+									color: player2MovementState.isSevereLimp ? toHexColor(KOREAN_COLORS.TEXT_ERROR) : toHexColor(KOREAN_COLORS.ACCENT_GOLD),
+									fontFamily: FONT_FAMILY.KOREAN,
+									fontWeight: "bold",
+									textShadow: "0 0 4px rgba(0,0,0,0.8)",
+									background: "rgba(0, 0, 0, 0.6)",
+									padding: "4px 8px",
+									borderRadius: "4px",
+									whiteSpace: "nowrap"
+								},
+								children: [
+									player2MovementState.statusText.korean,
+									" |",
+									" ",
+									player2MovementState.statusText.english
+								]
+							})
+						}),
+						/* @__PURE__ */ jsx(TraumaOverlay3D, {
+							playerId: "player",
+							health: validPlayers[0].health,
+							injuries: player1Injuries,
+							characterPosition: player1Position3D,
+							isMobile,
+							showFractures: true
+						}),
+						/* @__PURE__ */ jsx(TraumaOverlay3D, {
+							playerId: "enemy",
+							health: validPlayers[1].health,
+							injuries: player2Injuries,
+							characterPosition: player2Position3D,
+							isMobile,
+							showFractures: true
+						}),
+						/* @__PURE__ */ jsx(HitEffects3D, {
+							effects: combatState.hitEffects,
+							onEffectComplete: handleEffectComplete,
+							arenaBounds
+						}),
+						/* @__PURE__ */ jsx(CombatParticleEffects3D, {
+							hitEffects: combatState.hitEffects,
+							enabled: true,
+							isMobile
+						}),
+						overlayVisible && /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(VitalPointMarkers3D, {
+								position: player1Position3D,
+								visible: overlayVisible,
+								severityFilter: severityFilters,
+								regionFilter,
+								searchQuery,
+								showLabels,
+								scale,
+								animated,
+								onPointClick: () => {}
+							}),
+							/* @__PURE__ */ jsx(VitalPointMarkers3D, {
+								position: player2Position3D,
+								visible: overlayVisible,
+								severityFilter: severityFilters,
+								regionFilter,
+								searchQuery,
+								showLabels,
+								scale,
+								animated,
+								onPointClick: () => {}
+							}),
+							/* @__PURE__ */ jsx(VitalPointOverlayControlsHtml, {
+								screenPosition: {
+									top: `${layoutConstants.hudHeight + layoutConstants.padding}px`,
+									left: `${layoutConstants.padding}px`
+								},
+								visible: overlayVisible,
+								onVisibleChange: setOverlayVisible,
+								severityFilters,
+								onSeverityFiltersChange: setSeverityFilters,
+								regionFilter,
+								onRegionFilterChange: setRegionFilter,
+								searchQuery,
+								onSearchQueryChange: setSearchQuery,
+								showLabels,
+								onShowLabelsChange: setShowLabels,
+								animated,
+								onAnimatedChange: setAnimated,
+								scale,
+								onScaleChange: setScale,
+								isMobile
+							})
+						] }),
+						/* @__PURE__ */ jsx(DamageNumbers, {
+							damages: feedbackState.damageNumbers,
+							isMobile,
+							arenaBounds
+						}),
+						/* @__PURE__ */ jsx(ActionFeedback, {
+							feedbacks: feedbackState.actionFeedbacks,
+							isMobile,
+							arenaBounds
+						}),
+						/* @__PURE__ */ jsx(ComboCounter, {
+							combo: feedbackState.comboCount,
+							isMobile
+						}),
+						feedbackState.currentTechnique && /* @__PURE__ */ jsx(TechniqueName, {
+							korean: feedbackState.currentTechnique.korean,
+							english: feedbackState.currentTechnique.english,
+							isMobile,
+							onComplete: () => feedbackActions.hideTechnique()
+						}),
+						false,
+						/* @__PURE__ */ jsx(StanceChangeIndicator, {
+							currentStance: currentStanceIndex,
+							previousStance,
+							isMobile
+						}),
+						/* @__PURE__ */ jsx(KeyboardHints, {
+							visible: showHints,
+							currentStance: currentStanceIndex,
+							isMobile
+						}),
+						/* @__PURE__ */ jsx(InputBufferDisplay, {
+							queuedInputs,
+							isMobile
+						}),
+						validPlayers[0] && /* @__PURE__ */ jsx(BalanceIndicatorOverlayHtml, {
+							player: validPlayers[0],
+							currentTime,
+							position: [
+								-2.5,
+								2.5,
+								-1
+							],
+							isMobile
+						}),
+						validPlayers[1] && /* @__PURE__ */ jsx(BalanceIndicatorOverlayHtml, {
+							player: validPlayers[1],
+							currentTime,
+							position: [
+								2.5,
+								2.5,
+								-1
+							],
+							isMobile
+						}),
+						process.env.NODE_ENV === "development" && showPerformanceMonitor && /* @__PURE__ */ jsx(FPSMonitor, {
+							enabled: true,
+							warningThreshold: 50,
+							criticalThreshold: 30
+						})
+					] }),
+					isMobile ? /* @__PURE__ */ jsxs(EffectComposer, {
+						multisampling: 0,
+						children: [
+							/* @__PURE__ */ jsx(Bloom, {
+								luminanceThreshold: .9,
+								luminanceSmoothing: .9,
+								mipmapBlur: true,
+								intensity: .8,
+								radius: .4
+							}),
+							/* @__PURE__ */ jsx(Noise, { opacity: .03 }),
+							/* @__PURE__ */ jsx(Vignette, {
+								eskil: false,
+								offset: .1,
+								darkness: .3
+							})
+						]
+					}) : /* @__PURE__ */ jsxs(EffectComposer, {
+						multisampling: 4,
+						children: [
+							/* @__PURE__ */ jsx(Bloom, {
+								luminanceThreshold: .9,
+								luminanceSmoothing: .9,
+								mipmapBlur: true,
+								intensity: .8,
+								radius: .4
+							}),
+							/* @__PURE__ */ jsx(Noise, { opacity: .03 }),
+							/* @__PURE__ */ jsx(Vignette, {
+								eskil: false,
+								offset: .1,
+								darkness: .3
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					pointerEvents: "none",
+					zIndex: Z_INDEX.HUD,
+					overflow: "clip"
+				},
+				children: [
+					/* @__PURE__ */ jsx(CombatTopHUD, {
+						width,
+						height,
+						isMobile,
+						positionScale,
+						currentRound: internalRound,
+						totalRounds: 3,
+						timerState,
+						showTimer: combatState.roundStarted && !combatState.roundEnded && matchCountdownComplete && !showRoundStart,
+						onReturnToMenu,
+						isPaused: isPaused || showPauseMenu
+					}),
+					/* @__PURE__ */ jsx(CombatLeftHUD, {
+						width,
+						height,
+						isMobile,
+						positionScale,
+						player: validPlayers[0],
+						laterality: combatState.playerLaterality[0],
+						isInGuard: player1Animation.isInStanceGuard(),
+						speedModifiers: player1SpeedModifiers
+					}),
+					/* @__PURE__ */ jsx(CombatRightHUD, {
+						width,
+						height,
+						isMobile,
+						positionScale,
+						player: validPlayers[1],
+						laterality: combatState.playerLaterality[1],
+						speedModifiers: player2SpeedModifiers,
+						difficultyTier: currentDifficultyTier
+					}),
+					/* @__PURE__ */ jsx(CombatBottomHUD, {
+						width,
+						height,
+						isMobile,
+						positionScale,
+						visible: combatState.roundStarted && !combatState.roundEnded && matchCountdownComplete && !showRoundStart,
+						techniques: techniqueSelection.availableTechniques,
+						player: validPlayers[0],
+						selectedIndex: techniqueSelection.selectedIndex,
+						cooldowns: cooldownsMap,
+						onTechniqueSelect: techniqueSelection.selectTechnique,
+						combatMessages: combatState.combatMessages
+					}),
+					/* @__PURE__ */ jsx(PlayerStateOverlayHtml, {
+						pain: validPlayers[0].pain,
+						balanceState: getBalanceState(validPlayers[0].balance),
+						position: "left",
+						consciousness: validPlayers[0].consciousness,
+						bloodLoss: 0,
+						stamina: validPlayers[0].stamina,
+						isMobile
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							position: "absolute",
+							left: isMobile ? "10px" : "20px",
+							top: isMobile ? "120px" : "160px",
+							zIndex: Z_INDEX.HUD + 1,
+							pointerEvents: "none"
+						},
+						"data-testid": "player1-breathing-indicator-container",
+						children: /* @__PURE__ */ jsx(BreathingIndicator, {
+							player: validPlayers[0],
+							isMobile
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							position: "absolute",
+							right: isMobile ? "10px" : "20px",
+							top: isMobile ? "120px" : "160px",
+							zIndex: Z_INDEX.HUD + 1,
+							pointerEvents: "none"
+						},
+						"data-testid": "player2-breathing-indicator-container",
+						children: /* @__PURE__ */ jsx(BreathingIndicator, {
+							player: validPlayers[1],
+							isMobile
+						})
+					}),
+					(isPaused || showPauseMenu) && /* @__PURE__ */ jsx(PauseMenu, {
+						onResume: handleResume,
+						onRestart: handleRestart,
+						onReturnToMenu,
+						isMobile
+					})
+				]
+			}),
+			showAnnouncement && roundWinner && /* @__PURE__ */ jsx(RoundAnnouncement, {
+				roundNumber: transitionRoundNumber,
+				roundWinner,
+				currentScore: matchScore,
+				roundStats: {
+					damageDealt: roundWinner.totalDamageDealt ?? 0,
+					hitsLanded: roundWinner.hitsLanded ?? 0,
+					vitalPointsHit: roundWinner.vitalPointHits ?? 0,
+					accuracy: calculateAccuracy(roundWinner)
+				},
+				onCountdownComplete: () => {
+					if (matchScore.player1 >= 2 || matchScore.player2 >= 2) onGameEnd(matchScore.player1 >= 2 ? 0 : 1);
+					else skipCountdown();
+				},
+				onSkip: () => {
+					if (matchScore.player1 >= 2 || matchScore.player2 >= 2) onGameEnd(matchScore.player1 >= 2 ? 0 : 1);
+					else skipCountdown();
+				},
+				isMobile,
+				totalRounds: 3
+			}),
+			showMatchCountdown && !hasShownMatchCountdown && /* @__PURE__ */ jsx(MatchCountdown, {
+				onComplete: () => {
+					setHasShownMatchCountdown(true);
+					setShowMatchCountdown(false);
+					setMatchCountdownComplete(true);
+					startRound();
+				},
+				isMobile,
+				showSkip: false
+			}),
+			showRoundStart && /* @__PURE__ */ jsx(RoundStartAnnouncement, {
+				roundNumber: internalRound,
+				duration: 2,
+				onComplete: () => {
+					setShowRoundStart(false);
+					startRound();
+				},
+				isMobile
+			}),
+			contentReady && combatState.roundDisplayStatus && /* @__PURE__ */ jsx(RoundDisplayStatus, {
+				status: combatState.roundDisplayStatus,
+				isMobile
+			}),
+			isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(MobileControlsOverlay, {
+					onMove: handleMobileMove,
+					onAttack: handleMobileAttack,
+					onBlock: handleMobileBlock
+				}),
+				/* @__PURE__ */ jsx(StanceWheelPure, {
+					currentStance: currentStanceIndex,
+					onStanceChange: handleMobileStanceChange,
+					expanded: stanceWheelExpanded,
+					onToggle: toggleStanceWheel,
+					disabled: !mobileControlsEnabled,
+					opacity: .8
+				}),
+				/* @__PURE__ */ jsx(GestureRecognizerPure, {
+					onGesture: handleMobileGesture,
+					enabled: mobileControlsEnabled,
+					showFeedback: true,
+					minSwipeDistance: 50
+				})
+			] })
+		]
+	});
+};
+//#endregion
+export { CombatScreen3D as default };
+
+//# sourceMappingURL=CombatScreen3D.js.map