blacktrigram 0.7.18 → 0.7.20

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

@@ -11,10 +11,11 @@ import { Z_INDEX } from "../../../types/LayoutTypes.js";
 import { InjuryType } from "../../../types/injury.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 { getAnimation, resolveTechniqueAnimation } from "../../../systems/animation/core/AnimationRegistry.js";
 import { determineRecoveryType, getRecoveryAnimationState } from "../../../systems/animation/catalogs/RecoveryAnimations.js";
 import { usePlayerAnimation } from "../../../hooks/usePlayerAnimation.js";
 import useRoundTransition from "../../../hooks/useRoundTransition.js";
+import { TRIGRAM_TECHNIQUES } from "../../../systems/trigram/techniques/index.js";
 import useTechniqueSelection from "../../../hooks/useTechniqueSelection.js";
 import { useWebGLContextLossHandler } from "../../../hooks/useWebGLContextLossHandler.js";
 import { injuryMovementModifier } from "../../../systems/movement/InjuryMovementModifier.js";
@@ -24,6 +25,7 @@ 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 { getMobileControlsBottom } from "../../../types/constants/layout.js";
 import { getAnimationTypeForTechnique } from "../../../data/techniqueMappings.js";
 import { toHexColor } from "../../../utils/colorHelpers.js";
 import { usePlayerMovement } from "../../../utils/inputSystem.js";
@@ -59,6 +61,7 @@ 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 CombatPortraitStatusStrip from "./components/hud/CombatPortraitStatusStrip.js";
 import FPSMonitor from "./components/hud/FPSMonitor.js";
 import { PlayerStateOverlayHtml } from "./components/hud/PlayerStateOverlayHtml.js";
 import { BalanceIndicatorOverlayHtml } from "../../ui/combat/BalanceIndicatorOverlayHtml.js";
@@ -87,6 +90,18 @@ import { Bloom, EffectComposer, Noise, Vignette } from "@react-three/postprocess
 * CombatScreen3D Component
 * Three.js-based combat screen with 3D characters and effects
 */
+/**
+* AdaptiveQualityWrapper - Internal component to use adaptive quality hook
+* Must be inside Canvas to use useFrame from @react-three/fiber
+*
+* Hoisted outside CombatScreen3D to avoid "Cannot create components during render"
+* warnings from react-hooks/component-creation. Keeps the component type stable
+* across renders of the parent.
+*/
+var AdaptiveQualityWrapper = ({ enabled, isMobile, children }) => {
+	useAdaptiveQuality(enabled, isMobile, (newQuality) => {});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+};
 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);
@@ -107,7 +122,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 	}, []);
 	const audio = useAudio();
 	useEffect(() => {}, []);
-	const { arenaBounds, isMobile, screenSize, layoutConstants } = useCombatLayout(width, height);
+	const { arenaBounds, isMobile, isPortrait, screenSize, layoutConstants } = useCombatLayout(width, height);
 	const theme = useKoreanTheme({
 		variant: "primary",
 		size: "md",
@@ -123,7 +138,19 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 			default: return 1;
 		}
 	}, [screenSize]);
-	const cameraConfig = useMemo(() => createCameraConfig(isMobile), [isMobile]);
+	const cameraConfig = useMemo(() => {
+		const base = createCameraConfig(isMobile);
+		if (!isPortrait) return base;
+		return {
+			...base,
+			fov: Math.min(80, base.fov + 15),
+			position: [
+				base.position[0],
+				base.position[1],
+				base.position[2] + 4
+			]
+		};
+	}, [isMobile, isPortrait]);
 	const renderConfig = useMemo(() => {
 		const performanceSettings = getPerformanceSettings(width, isMobile);
 		return {
@@ -135,22 +162,6 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		};
 	}, [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([]);
@@ -195,7 +206,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		setTimeout(() => setMatchScore(newScore), 0);
 	}, []);
 	const [internalRound, setInternalRound] = useState(currentRound);
-	const [currentTime, setCurrentTime] = useState(Date.now());
+	const [currentTime, setCurrentTime] = useState(() => Date.now());
 	const [hasShownMatchCountdown, setHasShownMatchCountdown] = useState(true);
 	const [showMatchCountdown, setShowMatchCountdown] = useState(false);
 	const [showRoundStart, setShowRoundStart] = useState(false);
@@ -346,7 +357,6 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 			playerPositions[1].y
 		];
 	}, [playerPositions]);
-	const player1LastRotationRef = useRef(0);
 	const player2Rotation = useMemo(() => {
 		const dx = player1Position3D[0] - player2Position3D[0];
 		const dz = player1Position3D[2] - player2Position3D[2];
@@ -468,16 +478,11 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		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 {
+		if (player1IsMoving && player1Velocity && (player1Velocity.x !== 0 || player1Velocity.y !== 0)) return Math.atan2(player1Velocity.x, player1Velocity.y);
+		else {
 			const dx = player2Position3D[0] - player1Position3D[0];
 			const dz = player2Position3D[2] - player1Position3D[2];
-			const targetRotation = Math.atan2(dx, dz);
-			player1LastRotationRef.current = targetRotation;
-			return targetRotation;
+			return Math.atan2(dx, dz);
 		}
 	}, [
 		player1IsMoving,
@@ -490,8 +495,8 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 	const validPlayersRefForAnimation = useRef(null);
 	const player1HitTriggerFrameRef = useRef(6);
 	const player1AttackHitFiredRef = useRef(false);
-	const player1AttackDurationRef = useRef(.55);
-	const player2AttackDurationRef = useRef(.55);
+	const [player1AttackDuration, setPlayer1AttackDuration] = useState(.55);
+	const [player2AttackDuration, setPlayer2AttackDuration] = useState(.55);
 	const clearPlayer1AttackAnimation = useRef(() => {
 		setPlayer1AttackAnimation(void 0);
 		setPlayer1TechniqueId(void 0);
@@ -601,12 +606,12 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		player1AnimationType: getTechniqueAnimationType(player1TechniqueId),
 		player1Stance: player1Data.currentStance,
 		player1BasePosition: player1Position3D,
-		player1AnimationDuration: player1AttackDurationRef.current,
+		player1AnimationDuration: player1AttackDuration,
 		player2Attacking: player2Animation.currentState === AnimationState.ATTACK,
 		player2AnimationType: getTechniqueAnimationType(player2TechniqueId),
 		player2Stance: validPlayers[1].currentStance,
 		player2BasePosition: player2Position3D,
-		player2AnimationDuration: player2AttackDurationRef.current
+		player2AnimationDuration: player2AttackDuration
 	});
 	const [player1LocalStance, setPlayer1LocalStance] = useState(validPlayers[0].currentStance);
 	useEffect(() => {
@@ -796,14 +801,14 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		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);
+			const animationName = resolveTechniqueAnimation(technique);
 			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;
+			setPlayer1AttackDuration(attackDuration);
 			player1Animation.transitionToAttack(attackDuration);
 			combatActions.setExecutingTechnique(true);
 			onPlayerUpdate(0, {
@@ -892,7 +897,9 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		combatState.roundEnded
 	]);
 	const handleAttackWithFeedback = useCallback(() => {
-		setPlayer1AttackAnimation("jab");
+		const basicTechnique = techniqueSelection.availableTechniques[0];
+		setPlayer1AttackAnimation(basicTechnique ? resolveTechniqueAnimation(basicTechnique) : "jab");
+		if (basicTechnique?.id) setPlayer1TechniqueId(basicTechnique.id);
 		if (player1Animation.transitionTo(AnimationState.ATTACK)) combatActions.setExecutingTechnique(true);
 		else {
 			console.warn("Attack animation transition failed; executing attack logic directly.");
@@ -901,7 +908,8 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 	}, [
 		player1Animation,
 		combatActions,
-		handleAttack
+		handleAttack,
+		techniqueSelection.availableTechniques
 	]);
 	const handleDefendWithFeedback = useCallback(() => {
 		const defenderPos = playerPositions[0];
@@ -1166,19 +1174,23 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		updateDifficultyTarget
 	]);
 	const executeAIActionCallback = useCallback((action, targetPos, selectedTechnique, targetVitalPoint) => {
+		const aiFallbackTechnique = TRIGRAM_TECHNIQUES[validPlayers[1]?.currentStance ?? TrigramStance.GEON]?.[0];
+		const aiFallbackAnim = aiFallbackTechnique ? resolveTechniqueAnimation(aiFallbackTechnique) : "jab";
 		switch (action) {
 			case "attack":
-				if (selectedTechnique?.name?.english || selectedTechnique?.englishName) {
-					const p2AttackAnimName = getAnimationForTechnique(selectedTechnique.name?.english ?? selectedTechnique.englishName ?? "jab");
+				if (selectedTechnique) {
+					const p2AttackAnimName = resolveTechniqueAnimation(selectedTechnique);
 					setPlayer2AttackAnimation(p2AttackAnimName);
-					if (selectedTechnique?.id) setPlayer2TechniqueId(selectedTechnique.id);
+					if (selectedTechnique.id) setPlayer2TechniqueId(selectedTechnique.id);
 					const p2AttackDur = getAnimation(p2AttackAnimName)?.duration ?? .55;
-					player2AttackDurationRef.current = p2AttackDur;
+					setPlayer2AttackDuration(p2AttackDur);
 					player2Animation.transitionToAttack(p2AttackDur);
 				} else {
-					setPlayer2AttackAnimation("jab");
-					player2AttackDurationRef.current = .55;
-					player2Animation.transitionToAttack(.55);
+					setPlayer2AttackAnimation(aiFallbackAnim);
+					if (aiFallbackTechnique?.id) setPlayer2TechniqueId(aiFallbackTechnique.id);
+					const p2FallbackDur = getAnimation(aiFallbackAnim)?.duration ?? .55;
+					setPlayer2AttackDuration(p2FallbackDur);
+					player2Animation.transitionToAttack(p2FallbackDur);
 				}
 				handleAIAttack(selectedTechnique, targetVitalPoint);
 				break;
@@ -1188,17 +1200,19 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 				break;
 			case "technique":
 			case "combo":
-				if (selectedTechnique?.name?.english || selectedTechnique?.englishName) {
-					const p2TechAnimName = getAnimationForTechnique(selectedTechnique.name?.english ?? selectedTechnique.englishName ?? "cross");
+				if (selectedTechnique) {
+					const p2TechAnimName = resolveTechniqueAnimation(selectedTechnique);
 					setPlayer2AttackAnimation(p2TechAnimName);
-					if (selectedTechnique?.id) setPlayer2TechniqueId(selectedTechnique.id);
+					if (selectedTechnique.id) setPlayer2TechniqueId(selectedTechnique.id);
 					const p2TechDur = getAnimation(p2TechAnimName)?.duration ?? .6;
-					player2AttackDurationRef.current = p2TechDur;
+					setPlayer2AttackDuration(p2TechDur);
 					player2Animation.transitionToAttack(p2TechDur);
 				} else {
-					setPlayer2AttackAnimation("cross");
-					player2AttackDurationRef.current = .6;
-					player2Animation.transitionToAttack(.6);
+					setPlayer2AttackAnimation(aiFallbackAnim);
+					if (aiFallbackTechnique?.id) setPlayer2TechniqueId(aiFallbackTechnique.id);
+					const p2FallbackDur = getAnimation(aiFallbackAnim)?.duration ?? .6;
+					setPlayer2AttackDuration(p2FallbackDur);
+					player2Animation.transitionToAttack(p2FallbackDur);
 				}
 				handleAITechnique(selectedTechnique, targetVitalPoint);
 				break;
@@ -1235,17 +1249,19 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 				}
 				break;
 			case "counter":
-				if (selectedTechnique?.name?.english || selectedTechnique?.englishName) {
-					const p2CounterAnimName = getAnimationForTechnique(selectedTechnique.name?.english ?? selectedTechnique.englishName ?? "cross");
+				if (selectedTechnique) {
+					const p2CounterAnimName = resolveTechniqueAnimation(selectedTechnique);
 					setPlayer2AttackAnimation(p2CounterAnimName);
-					if (selectedTechnique?.id) setPlayer2TechniqueId(selectedTechnique.id);
+					if (selectedTechnique.id) setPlayer2TechniqueId(selectedTechnique.id);
 					const p2CounterDur = getAnimation(p2CounterAnimName)?.duration ?? .6;
-					player2AttackDurationRef.current = p2CounterDur;
+					setPlayer2AttackDuration(p2CounterDur);
 					player2Animation.transitionToAttack(p2CounterDur);
 				} else {
-					setPlayer2AttackAnimation("cross");
-					player2AttackDurationRef.current = .6;
-					player2Animation.transitionToAttack(.6);
+					setPlayer2AttackAnimation(aiFallbackAnim);
+					if (aiFallbackTechnique?.id) setPlayer2TechniqueId(aiFallbackTechnique.id);
+					const p2FallbackDur = getAnimation(aiFallbackAnim)?.duration ?? .6;
+					setPlayer2AttackDuration(p2FallbackDur);
+					player2Animation.transitionToAttack(p2FallbackDur);
 				}
 				handleAIAttack(selectedTechnique, targetVitalPoint);
 				addCombatMessage("AI 반격!", "AI Counter!");
@@ -1452,245 +1468,249 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 						],
 						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, {
+					/* @__PURE__ */ jsxs(AdaptiveQualityWrapper, {
+						enabled: shouldEnableAdaptiveQuality,
+						isMobile,
+						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,
-								facing: "right",
-								enableFacialExpressions: true,
-								enableEyeTracking: true,
-								opponentPosition: player2PositionWithAttackMovement
+								showFractures: true
 							}),
-							currentAnimation: animationStateToPlayerAnimation(player1Animation.currentState),
-							attackAnimation: player1AttackAnimation,
-							laterality: combatState.playerLaterality[0],
-							enableTransitionEffects: !isMobile,
-							enableStanceSymbol: !isMobile,
-							enableStanceAudio: true
-						}),
-						/* @__PURE__ */ jsx(Player3DWithTransitions, {
-							...convertPlayerStateToProps(validPlayers[1], player2PositionWithAttackMovement, player2Rotation, {
+							/* @__PURE__ */ jsx(TraumaOverlay3D, {
+								playerId: "enemy",
+								health: validPlayers[1].health,
+								injuries: player2Injuries,
+								characterPosition: player2Position3D,
 								isMobile,
-								facing: "right",
-								enableFacialExpressions: true,
-								enableEyeTracking: true,
-								opponentPosition: player1PositionWithAttackMovement
+								showFractures: true
 							}),
-							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(HitEffects3D, {
+								effects: combatState.hitEffects,
+								onEffectComplete: handleEffectComplete,
+								arenaBounds
+							}),
+							/* @__PURE__ */ jsx(CombatParticleEffects3D, {
+								hitEffects: combatState.hitEffects,
+								enabled: true,
+								isMobile
 							}),
-							/* @__PURE__ */ jsx(VitalPointMarkers3D, {
-								position: player2Position3D,
-								visible: overlayVisible,
-								severityFilter: severityFilters,
-								regionFilter,
-								searchQuery,
-								showLabels,
-								scale,
-								animated,
-								onPointClick: () => {}
+							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(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,
+							/* @__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
 							})
-						] }),
-						/* @__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: [
@@ -1752,7 +1772,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 						onReturnToMenu,
 						isPaused: isPaused || showPauseMenu
 					}),
-					/* @__PURE__ */ jsx(CombatLeftHUD, {
+					!(isMobile && isPortrait) && /* @__PURE__ */ jsx(CombatLeftHUD, {
 						width,
 						height,
 						isMobile,
@@ -1762,7 +1782,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 						isInGuard: player1Animation.isInStanceGuard(),
 						speedModifiers: player1SpeedModifiers
 					}),
-					/* @__PURE__ */ jsx(CombatRightHUD, {
+					!(isMobile && isPortrait) && /* @__PURE__ */ jsx(CombatRightHUD, {
 						width,
 						height,
 						isMobile,
@@ -1772,6 +1792,14 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 						speedModifiers: player2SpeedModifiers,
 						difficultyTier: currentDifficultyTier
 					}),
+					isMobile && isPortrait && /* @__PURE__ */ jsx(CombatPortraitStatusStrip, {
+						width,
+						height,
+						player1: validPlayers[0],
+						player2: validPlayers[1],
+						positionScale,
+						topOffset: layoutConstants.hudHeight
+					}),
 					/* @__PURE__ */ jsx(CombatBottomHUD, {
 						width,
 						height,
@@ -1792,7 +1820,8 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 						consciousness: validPlayers[0].consciousness,
 						bloodLoss: 0,
 						stamina: validPlayers[0].stamina,
-						isMobile
+						isMobile,
+						intensityScale: isMobile && isPortrait ? .5 : 1
 					}),
 					/* @__PURE__ */ jsx("div", {
 						style: {
@@ -1878,7 +1907,8 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 				/* @__PURE__ */ jsx(MobileControlsOverlay, {
 					onMove: handleMobileMove,
 					onAttack: handleMobileAttack,
-					onBlock: handleMobileBlock
+					onBlock: handleMobileBlock,
+					bottom: getMobileControlsBottom(height)
 				}),
 				/* @__PURE__ */ jsx(StanceWheelPure, {
 					currentStance: currentStanceIndex,