blacktrigram 0.7.2

package/lib/components/shared/three/scene/AtmosphericParticles3D.js

@@ -0,0 +1,84 @@
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+//#region src/components/shared/three/scene/AtmosphericParticles3D.tsx
+/**
+* AtmosphericParticles3D - Three.js 3D atmospheric particle effects
+*
+* Renders rain/mist particles for environmental depth in the combat arena
+* Creates an immersive cyberpunk urban night atmosphere
+*/
+/**
+* Generate particle positions using a deterministic pattern
+* This avoids Math.random() in render functions for React purity
+*/
+function generateParticlePositions(count, spreadX, spreadY, spreadZ) {
+	const pos = new Float32Array(count * 3);
+	for (let i = 0; i < count; i++) {
+		const t = i / count;
+		const offsetX = Math.sin(t * 123.456) * Math.cos(t * 789.012);
+		const offsetY = Math.sin(t * 234.567) * Math.cos(t * 890.123);
+		const offsetZ = Math.sin(t * 345.678) * Math.cos(t * 901.234);
+		pos[i * 3] = offsetX * spreadX * .5;
+		pos[i * 3 + 1] = offsetY * spreadY * .5 + spreadY * .5;
+		pos[i * 3 + 2] = offsetZ * spreadZ * .5;
+	}
+	return pos;
+}
+/**
+* AtmosphericParticles3D Component
+* Creates rain/mist particle effects for atmospheric depth
+*
+* Performance optimized with:
+* - BufferGeometry for efficient rendering
+* - Additive blending for transparent particles
+* - Configurable particle count for mobile optimization
+* - Deterministic position generation (no Math.random in render)
+*/
+var AtmosphericParticles3D = ({ count = 500, scale = 1, speed = 2 }) => {
+	const particlesRef = useRef(null);
+	const [geometry] = useState(() => new THREE.BufferGeometry());
+	const spreadX = 40 * scale;
+	const spreadY = 20;
+	const spreadZ = 40 * scale;
+	useEffect(() => {
+		const positions = generateParticlePositions(count, spreadX, spreadY, spreadZ);
+		geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+		return () => {
+			geometry.dispose();
+		};
+	}, [
+		count,
+		spreadX,
+		spreadY,
+		spreadZ,
+		geometry
+	]);
+	useFrame((_state, delta) => {
+		if (!particlesRef.current) return;
+		const positions = particlesRef.current.geometry.attributes.position.array;
+		for (let i = 0; i < count; i++) {
+			positions[i * 3 + 1] -= delta * speed;
+			if (positions[i * 3 + 1] < 0) positions[i * 3 + 1] = spreadY;
+		}
+		particlesRef.current.geometry.attributes.position.needsUpdate = true;
+	});
+	return /* @__PURE__ */ jsx("points", {
+		ref: particlesRef,
+		geometry,
+		children: /* @__PURE__ */ jsx("pointsMaterial", {
+			size: .05,
+			color: 16777215,
+			transparent: true,
+			opacity: .3,
+			sizeAttenuation: true,
+			blending: THREE.AdditiveBlending,
+			depthWrite: false
+		})
+	});
+};
+//#endregion
+export { AtmosphericParticles3D as default };
+
+//# sourceMappingURL=AtmosphericParticles3D.js.map

package/lib/components/shared/three/scene/AtmosphericParticles3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AtmosphericParticles3D.js","names":[],"sources":["../../../../../src/components/shared/three/scene/AtmosphericParticles3D.tsx"],"sourcesContent":["/**\n * AtmosphericParticles3D - Three.js 3D atmospheric particle effects\n *\n * Renders rain/mist particles for environmental depth in the combat arena\n * Creates an immersive cyberpunk urban night atmosphere\n */\n\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport * as THREE from \"three\";\n\n/**\n * Props for the AtmosphericParticles3D component.\n */\nexport interface AtmosphericParticles3DProps {\n  /** Number of particles to render. Defaults to 500 */\n  readonly count?: number;\n  /** Scale factor for particle spread (1.0 = desktop, <1.0 = mobile). Defaults to 1.0 */\n  readonly scale?: number;\n  /** Particle fall speed. Defaults to 2 */\n  readonly speed?: number;\n}\n\n/**\n * Generate particle positions using a deterministic pattern\n * This avoids Math.random() in render functions for React purity\n */\nfunction generateParticlePositions(\n  count: number,\n  spreadX: number,\n  spreadY: number,\n  spreadZ: number\n): Float32Array {\n  const pos = new Float32Array(count * 3);\n\n  // Use a simple pseudo-random pattern based on index\n  // This creates deterministic but varied positions\n  for (let i = 0; i < count; i++) {\n    const t = i / count; // Normalized index [0, 1]\n\n    // Create pseudo-random offsets using trigonometric functions\n    const offsetX = Math.sin(t * 123.456) * Math.cos(t * 789.012);\n    const offsetY = Math.sin(t * 234.567) * Math.cos(t * 890.123);\n    const offsetZ = Math.sin(t * 345.678) * Math.cos(t * 901.234);\n\n    pos[i * 3] = offsetX * spreadX * 0.5;\n    pos[i * 3 + 1] = offsetY * spreadY * 0.5 + spreadY * 0.5; // Bias upward\n    pos[i * 3 + 2] = offsetZ * spreadZ * 0.5;\n  }\n\n  return pos;\n}\n\n/**\n * AtmosphericParticles3D Component\n * Creates rain/mist particle effects for atmospheric depth\n *\n * Performance optimized with:\n * - BufferGeometry for efficient rendering\n * - Additive blending for transparent particles\n * - Configurable particle count for mobile optimization\n * - Deterministic position generation (no Math.random in render)\n */\nexport const AtmosphericParticles3D: React.FC<\n  AtmosphericParticles3DProps\n> = ({ count = 500, scale = 1.0, speed = 2 }) => {\n  const particlesRef = useRef<THREE.Points>(null);\n  const [geometry] = useState(() => new THREE.BufferGeometry());\n\n  // Scale-aware spread dimensions\n  const spreadX = 40 * scale;\n  const spreadY = 20;\n  const spreadZ = 40 * scale;\n\n  // Initialize particle positions once on mount\n  useEffect(() => {\n    const positions = generateParticlePositions(\n      count,\n      spreadX,\n      spreadY,\n      spreadZ\n    );\n    \n    // Note: BufferAttribute doesn't have a dispose method in Three.js\n    // The geometry cleanup on unmount will handle attribute cleanup\n    geometry.setAttribute(\"position\", new THREE.BufferAttribute(positions, 3));\n\n    return () => {\n      // Clean up geometry on unmount (this also cleans up attributes)\n      geometry.dispose();\n    };\n  }, [count, spreadX, spreadY, spreadZ, geometry]);\n\n  // Animate particles (rain/mist effect)\n  // Performance note: Current implementation modifies geometry buffer every frame.\n  // This is acceptable for up to ~500 particles but may impact performance beyond 1000.\n  // For larger particle counts, consider using shader-based vertex displacement or instancing.\n  useFrame((_state, delta) => {\n    if (!particlesRef.current) return;\n\n    const positions =\n      particlesRef.current.geometry.attributes.position.array as Float32Array;\n    for (let i = 0; i < count; i++) {\n      positions[i * 3 + 1] -= delta * speed; // Fall down\n      if (positions[i * 3 + 1] < 0) {\n        positions[i * 3 + 1] = spreadY; // Reset to top\n      }\n    }\n    particlesRef.current.geometry.attributes.position.needsUpdate = true;\n  });\n\n  return (\n    <points ref={particlesRef} geometry={geometry}>\n      <pointsMaterial\n        size={0.05}\n        color={0xffffff}\n        transparent\n        opacity={0.3}\n        sizeAttenuation\n        blending={THREE.AdditiveBlending}\n        depthWrite={false}\n      />\n    </points>\n  );\n};\n\nexport default AtmosphericParticles3D;\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,SAAS,0BACP,OACA,SACA,SACA,SACc;CACd,MAAM,MAAM,IAAI,aAAa,QAAQ,EAAE;AAIvC,MAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;EAC9B,MAAM,IAAI,IAAI;EAGd,MAAM,UAAU,KAAK,IAAI,IAAI,QAAQ,GAAG,KAAK,IAAI,IAAI,QAAQ;EAC7D,MAAM,UAAU,KAAK,IAAI,IAAI,QAAQ,GAAG,KAAK,IAAI,IAAI,QAAQ;EAC7D,MAAM,UAAU,KAAK,IAAI,IAAI,QAAQ,GAAG,KAAK,IAAI,IAAI,QAAQ;AAE7D,MAAI,IAAI,KAAK,UAAU,UAAU;AACjC,MAAI,IAAI,IAAI,KAAK,UAAU,UAAU,KAAM,UAAU;AACrD,MAAI,IAAI,IAAI,KAAK,UAAU,UAAU;;AAGvC,QAAO;;;;;;;;;;;;AAaT,IAAa,0BAER,EAAE,QAAQ,KAAK,QAAQ,GAAK,QAAQ,QAAQ;CAC/C,MAAM,eAAe,OAAqB,KAAK;CAC/C,MAAM,CAAC,YAAY,eAAe,IAAI,MAAM,gBAAgB,CAAC;CAG7D,MAAM,UAAU,KAAK;CACrB,MAAM,UAAU;CAChB,MAAM,UAAU,KAAK;AAGrB,iBAAgB;EACd,MAAM,YAAY,0BAChB,OACA,SACA,SACA,QACD;AAID,WAAS,aAAa,YAAY,IAAI,MAAM,gBAAgB,WAAW,EAAE,CAAC;AAE1E,eAAa;AAEX,YAAS,SAAS;;IAEnB;EAAC;EAAO;EAAS;EAAS;EAAS;EAAS,CAAC;AAMhD,WAAU,QAAQ,UAAU;AAC1B,MAAI,CAAC,aAAa,QAAS;EAE3B,MAAM,YACJ,aAAa,QAAQ,SAAS,WAAW,SAAS;AACpD,OAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,aAAU,IAAI,IAAI,MAAM,QAAQ;AAChC,OAAI,UAAU,IAAI,IAAI,KAAK,EACzB,WAAU,IAAI,IAAI,KAAK;;AAG3B,eAAa,QAAQ,SAAS,WAAW,SAAS,cAAc;GAChE;AAEF,QACE,oBAAC,UAAD;EAAQ,KAAK;EAAwB;YACnC,oBAAC,kBAAD;GACE,MAAM;GACN,OAAO;GACP,aAAA;GACA,SAAS;GACT,iBAAA;GACA,UAAU,MAAM;GAChB,YAAY;GACZ,CAAA;EACK,CAAA"}

package/lib/components/shared/three/scene/BackgroundScene3D.d.ts

@@ -0,0 +1,76 @@
+/**
+ * BackgroundScene3D - Shared cyberpunk Korean-themed 3D background scene
+ *
+ * @korean 배경씬3D - 공유 사이버펑크 한국 테마 3D 배경 씬
+ *
+ * Eliminates duplication across IntroScreen, ControlsScreen, and PhilosophyScreen
+ */
+import React from "react";
+/**
+ * Color theme variants for background scenes
+ */
+export type BackgroundTheme = "intro" | "controls" | "philosophy" | "default";
+export interface BackgroundScene3DProps {
+    /**
+     * Color theme for the background
+     * @default "default"
+     */
+    readonly theme?: BackgroundTheme;
+    /**
+     * Grid rotation speed (radians per frame)
+     * @default 0.0005
+     */
+    readonly gridRotationSpeed?: number;
+    /**
+     * Grid position Y offset
+     * @default -8
+     */
+    readonly gridPositionY?: number;
+    /**
+     * Grid size
+     * @default 80
+     */
+    readonly gridSize?: number;
+    /**
+     * Grid divisions
+     * @default 40
+     */
+    readonly gridDivisions?: number;
+    /**
+     * Fog near distance
+     * @default 5
+     */
+    readonly fogNear?: number;
+    /**
+     * Fog far distance
+     * @default 40
+     */
+    readonly fogFar?: number;
+    /**
+     * Ambient light intensity
+     * @default 0.4
+     */
+    readonly ambientIntensity?: number;
+    /**
+     * Directional light intensity
+     * @default 1
+     */
+    readonly directionalIntensity?: number;
+    /**
+     * Point light intensity
+     * @default 0.5
+     */
+    readonly pointIntensity?: number;
+}
+/**
+ * Shared 3D Background Scene Component
+ *
+ * Renders cyberpunk Korean-themed 3D background with rotating grid,
+ * atmospheric lighting, and fog effects.
+ *
+ * @korean 사이버펑크 한국 테마의 3D 배경을 렌더링합니다.
+ * 회전하는 그리드, 분위기 있는 조명, 안개 효과를 포함합니다.
+ */
+export declare const BackgroundScene3D: React.FC<BackgroundScene3DProps>;
+export default BackgroundScene3D;
+//# sourceMappingURL=BackgroundScene3D.d.ts.map

package/lib/components/shared/three/scene/BackgroundScene3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundScene3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/scene/BackgroundScene3D.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,CAAC;AAE9E,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;IAEjC;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEnC;;;OAGG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;CAClC;AAkDD;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuE9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/shared/three/scene/BackgroundScene3D.js

@@ -0,0 +1,124 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import { useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+//#region src/components/shared/three/scene/BackgroundScene3D.tsx
+/**
+* BackgroundScene3D - Shared cyberpunk Korean-themed 3D background scene
+*
+* @korean 배경씬3D - 공유 사이버펑크 한국 테마 3D 배경 씬
+*
+* Eliminates duplication across IntroScreen, ControlsScreen, and PhilosophyScreen
+*/
+/**
+* Theme color configurations
+*/
+var THEME_COLORS = {
+	intro: {
+		ambient: KOREAN_COLORS.PRIMARY_CYAN,
+		grid: KOREAN_COLORS.PRIMARY_CYAN,
+		point: KOREAN_COLORS.ACCENT_BLUE,
+		ambientIntensity: .4,
+		directionalIntensity: 1,
+		pointIntensity: .5
+	},
+	controls: {
+		ambient: KOREAN_COLORS.PRIMARY_CYAN,
+		grid: KOREAN_COLORS.PRIMARY_CYAN,
+		point: KOREAN_COLORS.ACCENT_BLUE,
+		ambientIntensity: .3,
+		directionalIntensity: .8,
+		pointIntensity: .4
+	},
+	philosophy: {
+		ambient: KOREAN_COLORS.ACCENT_GOLD,
+		grid: KOREAN_COLORS.ACCENT_GOLD,
+		point: KOREAN_COLORS.PRIMARY_CYAN,
+		ambientIntensity: .3,
+		directionalIntensity: .8,
+		pointIntensity: .4
+	},
+	default: {
+		ambient: KOREAN_COLORS.PRIMARY_CYAN,
+		grid: KOREAN_COLORS.PRIMARY_CYAN,
+		point: KOREAN_COLORS.ACCENT_BLUE,
+		ambientIntensity: .4,
+		directionalIntensity: 1,
+		pointIntensity: .5
+	}
+};
+/**
+* Shared 3D Background Scene Component
+*
+* Renders cyberpunk Korean-themed 3D background with rotating grid,
+* atmospheric lighting, and fog effects.
+*
+* @korean 사이버펑크 한국 테마의 3D 배경을 렌더링합니다.
+* 회전하는 그리드, 분위기 있는 조명, 안개 효과를 포함합니다.
+*/
+var BackgroundScene3D = ({ theme = "default", gridRotationSpeed = 5e-4, gridPositionY = -8, gridSize = 80, gridDivisions = 40, fogNear = 5, fogFar = 40, ambientIntensity, directionalIntensity, pointIntensity }) => {
+	const gridRef = useRef(null);
+	const themeColors = THEME_COLORS[theme];
+	const finalAmbientIntensity = ambientIntensity ?? themeColors.ambientIntensity;
+	const finalDirectionalIntensity = directionalIntensity ?? themeColors.directionalIntensity;
+	const finalPointIntensity = pointIntensity ?? themeColors.pointIntensity;
+	useFrame(() => {
+		if (gridRef.current) gridRef.current.rotation.y += gridRotationSpeed;
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("ambientLight", {
+			intensity: finalAmbientIntensity,
+			color: themeColors.ambient
+		}),
+		/* @__PURE__ */ jsx("directionalLight", {
+			position: [
+				10,
+				10,
+				5
+			],
+			intensity: finalDirectionalIntensity,
+			color: KOREAN_COLORS.ACCENT_GOLD
+		}),
+		/* @__PURE__ */ jsx("pointLight", {
+			position: [
+				-10,
+				5,
+				-5
+			],
+			intensity: finalPointIntensity,
+			color: themeColors.point
+		}),
+		/* @__PURE__ */ jsx("gridHelper", {
+			ref: gridRef,
+			args: [
+				gridSize,
+				gridDivisions,
+				themeColors.grid,
+				KOREAN_COLORS.UI_BACKGROUND_MEDIUM
+			],
+			position: [
+				0,
+				gridPositionY,
+				0
+			],
+			rotation: [
+				0,
+				0,
+				0
+			]
+		}),
+		/* @__PURE__ */ jsx("fog", {
+			attach: "fog",
+			args: [
+				KOREAN_COLORS.UI_BACKGROUND_DARK,
+				fogNear,
+				fogFar
+			]
+		})
+	] });
+};
+//#endregion
+export { BackgroundScene3D as default };
+
+//# sourceMappingURL=BackgroundScene3D.js.map

package/lib/components/shared/three/scene/BackgroundScene3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundScene3D.js","names":[],"sources":["../../../../../src/components/shared/three/scene/BackgroundScene3D.tsx"],"sourcesContent":["/**\n * BackgroundScene3D - Shared cyberpunk Korean-themed 3D background scene\n *\n * @korean 배경씬3D - 공유 사이버펑크 한국 테마 3D 배경 씬\n *\n * Eliminates duplication across IntroScreen, ControlsScreen, and PhilosophyScreen\n */\n\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useRef } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\n\n/**\n * Color theme variants for background scenes\n */\nexport type BackgroundTheme = \"intro\" | \"controls\" | \"philosophy\" | \"default\";\n\nexport interface BackgroundScene3DProps {\n  /**\n   * Color theme for the background\n   * @default \"default\"\n   */\n  readonly theme?: BackgroundTheme;\n\n  /**\n   * Grid rotation speed (radians per frame)\n   * @default 0.0005\n   */\n  readonly gridRotationSpeed?: number;\n\n  /**\n   * Grid position Y offset\n   * @default -8\n   */\n  readonly gridPositionY?: number;\n\n  /**\n   * Grid size\n   * @default 80\n   */\n  readonly gridSize?: number;\n\n  /**\n   * Grid divisions\n   * @default 40\n   */\n  readonly gridDivisions?: number;\n\n  /**\n   * Fog near distance\n   * @default 5\n   */\n  readonly fogNear?: number;\n\n  /**\n   * Fog far distance\n   * @default 40\n   */\n  readonly fogFar?: number;\n\n  /**\n   * Ambient light intensity\n   * @default 0.4\n   */\n  readonly ambientIntensity?: number;\n\n  /**\n   * Directional light intensity\n   * @default 1\n   */\n  readonly directionalIntensity?: number;\n\n  /**\n   * Point light intensity\n   * @default 0.5\n   */\n  readonly pointIntensity?: number;\n}\n\n/**\n * Theme color configurations\n */\nconst THEME_COLORS: Record<\n  BackgroundTheme,\n  {\n    ambient: number;\n    grid: number;\n    point: number;\n    ambientIntensity: number;\n    directionalIntensity: number;\n    pointIntensity: number;\n  }\n> = {\n  intro: {\n    ambient: KOREAN_COLORS.PRIMARY_CYAN,\n    grid: KOREAN_COLORS.PRIMARY_CYAN,\n    point: KOREAN_COLORS.ACCENT_BLUE,\n    ambientIntensity: 0.4,\n    directionalIntensity: 1,\n    pointIntensity: 0.5,\n  },\n  controls: {\n    ambient: KOREAN_COLORS.PRIMARY_CYAN,\n    grid: KOREAN_COLORS.PRIMARY_CYAN,\n    point: KOREAN_COLORS.ACCENT_BLUE,\n    ambientIntensity: 0.3,\n    directionalIntensity: 0.8,\n    pointIntensity: 0.4,\n  },\n  philosophy: {\n    ambient: KOREAN_COLORS.ACCENT_GOLD,\n    grid: KOREAN_COLORS.ACCENT_GOLD,\n    point: KOREAN_COLORS.PRIMARY_CYAN,\n    ambientIntensity: 0.3,\n    directionalIntensity: 0.8,\n    pointIntensity: 0.4,\n  },\n  default: {\n    ambient: KOREAN_COLORS.PRIMARY_CYAN,\n    grid: KOREAN_COLORS.PRIMARY_CYAN,\n    point: KOREAN_COLORS.ACCENT_BLUE,\n    ambientIntensity: 0.4,\n    directionalIntensity: 1,\n    pointIntensity: 0.5,\n  },\n};\n\n/**\n * Shared 3D Background Scene Component\n *\n * Renders cyberpunk Korean-themed 3D background with rotating grid,\n * atmospheric lighting, and fog effects.\n *\n * @korean 사이버펑크 한국 테마의 3D 배경을 렌더링합니다.\n * 회전하는 그리드, 분위기 있는 조명, 안개 효과를 포함합니다.\n */\nexport const BackgroundScene3D: React.FC<BackgroundScene3DProps> = ({\n  theme = \"default\",\n  gridRotationSpeed = 0.0005,\n  gridPositionY = -8,\n  gridSize = 80,\n  gridDivisions = 40,\n  fogNear = 5,\n  fogFar = 40,\n  ambientIntensity,\n  directionalIntensity,\n  pointIntensity,\n}) => {\n  const gridRef = useRef<THREE.GridHelper>(null);\n\n  // Get theme colors\n  const themeColors = THEME_COLORS[theme];\n\n  // Use props or theme defaults\n  const finalAmbientIntensity =\n    ambientIntensity ?? themeColors.ambientIntensity;\n  const finalDirectionalIntensity =\n    directionalIntensity ?? themeColors.directionalIntensity;\n  const finalPointIntensity = pointIntensity ?? themeColors.pointIntensity;\n\n  // Animate grid using useFrame for proper sync with render loop\n  useFrame(() => {\n    if (gridRef.current) {\n      gridRef.current.rotation.y += gridRotationSpeed;\n    }\n  });\n\n  return (\n    <>\n      {/* Ambient lighting */}\n      <ambientLight\n        intensity={finalAmbientIntensity}\n        color={themeColors.ambient}\n      />\n\n      {/* Directional lights for Korean aesthetic */}\n      <directionalLight\n        position={[10, 10, 5]}\n        intensity={finalDirectionalIntensity}\n        color={KOREAN_COLORS.ACCENT_GOLD}\n      />\n      <pointLight\n        position={[-10, 5, -5]}\n        intensity={finalPointIntensity}\n        color={themeColors.point}\n      />\n\n      {/* Cyberpunk grid plane - positioned lower with fog to hide edges */}\n      <gridHelper\n        ref={gridRef}\n        args={[\n          gridSize,\n          gridDivisions,\n          themeColors.grid,\n          KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n        ]}\n        position={[0, gridPositionY, 0]}\n        rotation={[0, 0, 0]}\n      />\n\n      {/* Fog for depth - starts closer to hide grid edges */}\n      <fog\n        attach=\"fog\"\n        args={[KOREAN_COLORS.UI_BACKGROUND_DARK, fogNear, fogFar]}\n      />\n    </>\n  );\n};\n\nexport default BackgroundScene3D;\n"],"mappings":";;;;;;;;;;;;;;;;AAmFA,IAAM,eAUF;CACF,OAAO;EACL,SAAS,cAAc;EACvB,MAAM,cAAc;EACpB,OAAO,cAAc;EACrB,kBAAkB;EAClB,sBAAsB;EACtB,gBAAgB;EACjB;CACD,UAAU;EACR,SAAS,cAAc;EACvB,MAAM,cAAc;EACpB,OAAO,cAAc;EACrB,kBAAkB;EAClB,sBAAsB;EACtB,gBAAgB;EACjB;CACD,YAAY;EACV,SAAS,cAAc;EACvB,MAAM,cAAc;EACpB,OAAO,cAAc;EACrB,kBAAkB;EAClB,sBAAsB;EACtB,gBAAgB;EACjB;CACD,SAAS;EACP,SAAS,cAAc;EACvB,MAAM,cAAc;EACpB,OAAO,cAAc;EACrB,kBAAkB;EAClB,sBAAsB;EACtB,gBAAgB;EACjB;CACF;;;;;;;;;;AAWD,IAAa,qBAAuD,EAClE,QAAQ,WACR,oBAAoB,MACpB,gBAAgB,IAChB,WAAW,IACX,gBAAgB,IAChB,UAAU,GACV,SAAS,IACT,kBACA,sBACA,qBACI;CACJ,MAAM,UAAU,OAAyB,KAAK;CAG9C,MAAM,cAAc,aAAa;CAGjC,MAAM,wBACJ,oBAAoB,YAAY;CAClC,MAAM,4BACJ,wBAAwB,YAAY;CACtC,MAAM,sBAAsB,kBAAkB,YAAY;AAG1D,gBAAe;AACb,MAAI,QAAQ,QACV,SAAQ,QAAQ,SAAS,KAAK;GAEhC;AAEF,QACE,qBAAA,UAAA,EAAA,UAAA;EAEE,oBAAC,gBAAD;GACE,WAAW;GACX,OAAO,YAAY;GACnB,CAAA;EAGF,oBAAC,oBAAD;GACE,UAAU;IAAC;IAAI;IAAI;IAAE;GACrB,WAAW;GACX,OAAO,cAAc;GACrB,CAAA;EACF,oBAAC,cAAD;GACE,UAAU;IAAC;IAAK;IAAG;IAAG;GACtB,WAAW;GACX,OAAO,YAAY;GACnB,CAAA;EAGF,oBAAC,cAAD;GACE,KAAK;GACL,MAAM;IACJ;IACA;IACA,YAAY;IACZ,cAAc;IACf;GACD,UAAU;IAAC;IAAG;IAAe;IAAE;GAC/B,UAAU;IAAC;IAAG;IAAG;IAAE;GACnB,CAAA;EAGF,oBAAC,OAAD;GACE,QAAO;GACP,MAAM;IAAC,cAAc;IAAoB;IAAS;IAAO;GACzD,CAAA;EACD,EAAA,CAAA"}

package/lib/components/shared/three/scene/CombatArena3D.d.ts

@@ -0,0 +1,38 @@
+/**
+ * CombatArena3D - Three.js 3D arena environment
+ *
+ * Renders the 3D combat arena with Korean dojang aesthetic
+ * Includes floor, lighting, and atmospheric effects
+ *
+ * Enhanced features:
+ * - Korean cyberpunk lighting with neon point lights (cyan, gold, blue)
+ * - Reflective wet concrete floor with clearcoat and emissive glow
+ * - Upgraded shadow quality (2048x2048 shadow maps)
+ * - Atmospheric fog with Korean color gradient
+ * - Korean signage with emissive neon glow (전투, 흑괘, 급소격)
+ * - Optional atmospheric particles (rain/mist)
+ */
+import React from "react";
+/**
+ * Props for the CombatArena3D component.
+ * Configures the lighting and atmosphere of the 3D arena.
+ */
+export interface CombatArena3DProps {
+    /** Lighting theme affecting ambiance and colors. Defaults to "cyberpunk" */
+    readonly lighting?: "cyberpunk" | "traditional" | "neutral";
+    /** Scale factor for arena size (1.0 = desktop, <1.0 = mobile). Defaults to 1.0 */
+    readonly scale?: number;
+    /** Physical arena width in meters. Defaults to 10m (desktop standard) */
+    readonly worldWidthMeters?: number;
+    /** Physical arena depth in meters. Defaults to worldWidthMeters for square arena */
+    readonly worldDepthMeters?: number;
+    /** Enable atmospheric particles (rain/mist). Defaults to true on desktop, false on mobile */
+    readonly enableParticles?: boolean;
+}
+/**
+ * CombatArena3D Component
+ * Creates a Korean-themed 3D arena environment with cyberpunk aesthetic
+ */
+export declare const CombatArena3D: React.FC<CombatArena3DProps>;
+export default CombatArena3D;
+//# sourceMappingURL=CombatArena3D.d.ts.map

package/lib/components/shared/three/scene/CombatArena3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombatArena3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/scene/CombatArena3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAQ1D;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,QAAQ,CAAC,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,SAAS,CAAC;IAC5D,kFAAkF;IAClF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,oFAAoF;IACpF,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,6FAA6F;IAC7F,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CACpC;AAUD;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyNtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/shared/three/scene/CombatArena3D.js

@@ -0,0 +1,256 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import { ThreeObjectPools } from "../../../../utils/threeObjectPool.js";
+import AtmosphericParticles3D from "./AtmosphericParticles3D.js";
+import KoreanSignage3D from "./KoreanSignage3D.js";
+import { useEffect, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+//#region src/components/shared/three/scene/CombatArena3D.tsx
+/**
+* CombatArena3D - Three.js 3D arena environment
+*
+* Renders the 3D combat arena with Korean dojang aesthetic
+* Includes floor, lighting, and atmospheric effects
+*
+* Enhanced features:
+* - Korean cyberpunk lighting with neon point lights (cyan, gold, blue)
+* - Reflective wet concrete floor with clearcoat and emissive glow
+* - Upgraded shadow quality (2048x2048 shadow maps)
+* - Atmospheric fog with Korean color gradient
+* - Korean signage with emissive neon glow (전투, 흑괘, 급소격)
+* - Optional atmospheric particles (rain/mist)
+*/
+var FLOOR_SCALE_FACTOR = 1.5;
+var SHADOW_MAP_SIZE_MOBILE = [1024, 1024];
+var SHADOW_MAP_SIZE_DESKTOP = [2048, 2048];
+/**
+* CombatArena3D Component
+* Creates a Korean-themed 3D arena environment with cyberpunk aesthetic
+*/
+var CombatArena3D = ({ lighting = "cyberpunk", scale = 1, worldWidthMeters = 10, worldDepthMeters, enableParticles = scale >= 1 }) => {
+	const gridRef = useRef(null);
+	useFrame(() => {
+		if (gridRef.current) gridRef.current.rotation.y += 2e-4;
+	});
+	const effectiveDepth = worldDepthMeters ?? worldWidthMeters;
+	const floorWidth = worldWidthMeters * FLOOR_SCALE_FACTOR;
+	const floorDepth = effectiveDepth * FLOOR_SCALE_FACTOR;
+	const gridSize = worldWidthMeters * FLOOR_SCALE_FACTOR;
+	const markerDistance = worldWidthMeters * .8;
+	const markerDepth = effectiveDepth * .4;
+	const floorMaterial = useMemo(() => {
+		const pooledBaseColor = ThreeObjectPools.color.acquire();
+		const pooledEmissiveColor = ThreeObjectPools.color.acquire();
+		try {
+			pooledBaseColor.set(2763306);
+			pooledEmissiveColor.set(KOREAN_COLORS.PRIMARY_CYAN);
+			return new THREE.MeshPhysicalMaterial({
+				color: pooledBaseColor.clone(),
+				roughness: .3,
+				metalness: .1,
+				clearcoat: .3,
+				clearcoatRoughness: .4,
+				envMapIntensity: 1.5,
+				emissive: pooledEmissiveColor.clone(),
+				emissiveIntensity: .05
+			});
+		} finally {
+			ThreeObjectPools.color.release(pooledBaseColor);
+			ThreeObjectPools.color.release(pooledEmissiveColor);
+		}
+	}, []);
+	useEffect(() => {
+		return () => {
+			floorMaterial.dispose();
+		};
+	}, [floorMaterial]);
+	return /* @__PURE__ */ jsxs("group", { children: [
+		lighting === "cyberpunk" && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("ambientLight", {
+				intensity: .5,
+				color: KOREAN_COLORS.PRIMARY_CYAN
+			}),
+			/* @__PURE__ */ jsx("directionalLight", {
+				position: [
+					15,
+					20,
+					10
+				],
+				intensity: 1.5,
+				color: 16777215,
+				castShadow: true,
+				"shadow-mapSize": scale < 1 ? SHADOW_MAP_SIZE_MOBILE : SHADOW_MAP_SIZE_DESKTOP,
+				"shadow-camera-far": 50,
+				"shadow-camera-left": -20,
+				"shadow-camera-right": 20,
+				"shadow-camera-top": 20,
+				"shadow-camera-bottom": -20,
+				"shadow-bias": -1e-4
+			}),
+			/* @__PURE__ */ jsx("pointLight", {
+				position: [
+					-10,
+					3,
+					0
+				],
+				intensity: 4,
+				distance: 25,
+				decay: 2,
+				color: KOREAN_COLORS.PRIMARY_CYAN
+			}),
+			/* @__PURE__ */ jsx("pointLight", {
+				position: [
+					10,
+					3,
+					0
+				],
+				intensity: 4,
+				distance: 25,
+				decay: 2,
+				color: KOREAN_COLORS.ACCENT_GOLD
+			}),
+			/* @__PURE__ */ jsx("pointLight", {
+				position: [
+					0,
+					5,
+					-15
+				],
+				intensity: 3,
+				distance: 30,
+				decay: 2,
+				color: KOREAN_COLORS.ACCENT_BLUE
+			})
+		] }),
+		lighting === "traditional" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ambientLight", {
+			intensity: .6,
+			color: 16777198
+		}), /* @__PURE__ */ jsx("directionalLight", {
+			position: [
+				5,
+				10,
+				5
+			],
+			intensity: .8,
+			castShadow: true,
+			"shadow-mapSize": [2048, 2048]
+		})] }),
+		lighting === "neutral" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("ambientLight", { intensity: .5 }), /* @__PURE__ */ jsx("directionalLight", {
+			position: [
+				10,
+				10,
+				5
+			],
+			intensity: 1,
+			castShadow: true
+		})] }),
+		/* @__PURE__ */ jsxs("mesh", {
+			rotation: [
+				-Math.PI / 2,
+				0,
+				0
+			],
+			position: [
+				0,
+				0,
+				0
+			],
+			receiveShadow: true,
+			children: [/* @__PURE__ */ jsx("planeGeometry", { args: [floorWidth, floorDepth] }), lighting === "cyberpunk" ? /* @__PURE__ */ jsx("primitive", {
+				object: floorMaterial,
+				attach: "material"
+			}) : /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+				color: KOREAN_COLORS.UI_BACKGROUND_MEDIUM,
+				roughness: .7,
+				metalness: .1,
+				clearcoat: 0,
+				clearcoatRoughness: .2
+			})]
+		}),
+		/* @__PURE__ */ jsx("gridHelper", {
+			ref: gridRef,
+			args: [
+				gridSize,
+				20,
+				KOREAN_COLORS.PRIMARY_CYAN,
+				KOREAN_COLORS.UI_BACKGROUND_DARK
+			],
+			position: [
+				0,
+				.01,
+				0
+			]
+		}),
+		[
+			[
+				-markerDistance,
+				0,
+				-markerDepth
+			],
+			[
+				-markerDistance,
+				0,
+				markerDepth
+			],
+			[
+				markerDistance,
+				0,
+				-markerDepth
+			],
+			[
+				markerDistance,
+				0,
+				markerDepth
+			]
+		].map((pos, i) => /* @__PURE__ */ jsxs("mesh", {
+			position: pos,
+			castShadow: true,
+			children: [/* @__PURE__ */ jsx("cylinderGeometry", { args: [
+				.1 * scale,
+				.15 * scale,
+				.8,
+				8
+			] }), /* @__PURE__ */ jsx("meshPhysicalMaterial", {
+				color: KOREAN_COLORS.ACCENT_GOLD,
+				emissive: KOREAN_COLORS.ACCENT_GOLD,
+				emissiveIntensity: .5,
+				metalness: .8,
+				roughness: .2,
+				clearcoat: 1
+			})]
+		}, i)),
+		/* @__PURE__ */ jsxs("mesh", {
+			rotation: [
+				-Math.PI / 2,
+				0,
+				0
+			],
+			position: [
+				0,
+				.02,
+				0
+			],
+			children: [/* @__PURE__ */ jsx("ringGeometry", { args: [
+				.8 * scale,
+				1 * scale,
+				32
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: KOREAN_COLORS.ACCENT_GOLD,
+				transparent: true,
+				opacity: .6,
+				side: THREE.DoubleSide
+			})]
+		}),
+		lighting === "cyberpunk" && /* @__PURE__ */ jsx(KoreanSignage3D, { scale }),
+		lighting === "cyberpunk" && enableParticles && /* @__PURE__ */ jsx(AtmosphericParticles3D, {
+			count: scale >= 1 ? 500 : 250,
+			scale,
+			speed: 2
+		})
+	] });
+};
+//#endregion
+export { CombatArena3D as default };
+
+//# sourceMappingURL=CombatArena3D.js.map

package/lib/components/shared/three/scene/CombatArena3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombatArena3D.js","names":[],"sources":["../../../../../src/components/shared/three/scene/CombatArena3D.tsx"],"sourcesContent":["/**\n * CombatArena3D - Three.js 3D arena environment\n *\n * Renders the 3D combat arena with Korean dojang aesthetic\n * Includes floor, lighting, and atmospheric effects\n *\n * Enhanced features:\n * - Korean cyberpunk lighting with neon point lights (cyan, gold, blue)\n * - Reflective wet concrete floor with clearcoat and emissive glow\n * - Upgraded shadow quality (2048x2048 shadow maps)\n * - Atmospheric fog with Korean color gradient\n * - Korean signage with emissive neon glow (전투, 흑괘, 급소격)\n * - Optional atmospheric particles (rain/mist)\n */\n\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\nimport { ThreeObjectPools } from \"../../../../utils/threeObjectPool\";\n// Re-enabled after fixing KoreanSignage3D font prop issue\nimport AtmosphericParticles3D from \"./AtmosphericParticles3D\";\nimport KoreanSignage3D from \"./KoreanSignage3D\";\n\n/**\n * Props for the CombatArena3D component.\n * Configures the lighting and atmosphere of the 3D arena.\n */\nexport interface CombatArena3DProps {\n  /** Lighting theme affecting ambiance and colors. Defaults to \"cyberpunk\" */\n  readonly lighting?: \"cyberpunk\" | \"traditional\" | \"neutral\";\n  /** Scale factor for arena size (1.0 = desktop, <1.0 = mobile). Defaults to 1.0 */\n  readonly scale?: number;\n  /** Physical arena width in meters. Defaults to 10m (desktop standard) */\n  readonly worldWidthMeters?: number;\n  /** Physical arena depth in meters. Defaults to worldWidthMeters for square arena */\n  readonly worldDepthMeters?: number;\n  /** Enable atmospheric particles (rain/mist). Defaults to true on desktop, false on mobile */\n  readonly enableParticles?: boolean;\n}\n\n// Floor scaling constant for extended arena boundaries\nconst FLOOR_SCALE_FACTOR = 1.5;\n\n// Shadow map size constants for performance optimization\n// Upgraded to 2048x2048 for crisp shadows on desktop\nconst SHADOW_MAP_SIZE_MOBILE: [number, number] = [1024, 1024]; // Upgraded from 512x512\nconst SHADOW_MAP_SIZE_DESKTOP: [number, number] = [2048, 2048]; // Upgraded from 1024x1024\n\n/**\n * CombatArena3D Component\n * Creates a Korean-themed 3D arena environment with cyberpunk aesthetic\n */\nexport const CombatArena3D: React.FC<CombatArena3DProps> = ({\n  lighting = \"cyberpunk\",\n  scale = 1.0,\n  worldWidthMeters = 10, // Default desktop standard\n  worldDepthMeters,\n  enableParticles = scale >= 1.0, // Enable particles on desktop by default\n}) => {\n  const gridRef = useRef<THREE.GridHelper>(null);\n\n  // Animate grid rotation for cyberpunk effect\n  useFrame(() => {\n    if (gridRef.current) {\n      gridRef.current.rotation.y += 0.0002;\n    }\n  });\n\n  // Use physics-based world dimensions for 1:1 meter mapping\n  // Floor extends 50% beyond arena bounds for visual buffer\n  const effectiveDepth = worldDepthMeters ?? worldWidthMeters;\n  const floorWidth = worldWidthMeters * FLOOR_SCALE_FACTOR;\n  const floorDepth = effectiveDepth * FLOOR_SCALE_FACTOR;\n  const gridSize = worldWidthMeters * FLOOR_SCALE_FACTOR;\n  // Boundary markers at 80% of arena width, 40% of depth\n  const markerDistance = worldWidthMeters * 0.8;\n  const markerDepth = effectiveDepth * 0.4;\n\n  // Memoized floor material with wet concrete aesthetic and reflections\n  // Performance: Uses ThreeObjectPools for temporary Color objects to reduce GC pressure\n  // Note: Empty dependency array is correct - KOREAN_COLORS is a const object\n  // and doesn't need to be included in dependencies\n  const floorMaterial = useMemo(\n    () => {\n      // Use pooled Color objects for temporary color creation\n      const pooledBaseColor = ThreeObjectPools.color.acquire();\n      const pooledEmissiveColor = ThreeObjectPools.color.acquire();\n      \n      try {\n        pooledBaseColor.set(0x2a2a2a); // Dark concrete\n        pooledEmissiveColor.set(KOREAN_COLORS.PRIMARY_CYAN);\n        \n        // Clone colors for material ownership (materials need their own color instances)\n        const material = new THREE.MeshPhysicalMaterial({\n          color: pooledBaseColor.clone(), // Material takes ownership of cloned color\n          roughness: 0.3, // Wet/reflective surface\n          metalness: 0.1,\n          clearcoat: 0.3, // Wet sheen\n          clearcoatRoughness: 0.4,\n          envMapIntensity: 1.5, // Enhanced reflections from Environment preset\n          // Subtle emissive for neon reflection glow\n          emissive: pooledEmissiveColor.clone(), // Material takes ownership of cloned color\n          emissiveIntensity: 0.05,\n        });\n        \n        return material;\n      } finally {\n        // Release pooled colors back to pool after cloning\n        ThreeObjectPools.color.release(pooledBaseColor);\n        ThreeObjectPools.color.release(pooledEmissiveColor);\n      }\n    },\n    [],\n  );\n\n  // Cleanup floor material on unmount\n  useEffect(() => {\n    return () => {\n      floorMaterial.dispose();\n    };\n  }, [floorMaterial]);\n\n  return (\n    <group>\n      {/* Lighting based on theme */}\n      {lighting === \"cyberpunk\" && (\n        <>\n          {/* Base ambient light with Korean cyan tint */}\n          <ambientLight intensity={0.5} color={KOREAN_COLORS.PRIMARY_CYAN} />\n\n          {/* Primary directional light (moonlight) with upgraded shadows */}\n          <directionalLight\n            position={[15, 20, 10]}\n            intensity={1.5}\n            color={0xffffff}\n            castShadow\n            shadow-mapSize={\n              scale < 1.0 ? SHADOW_MAP_SIZE_MOBILE : SHADOW_MAP_SIZE_DESKTOP\n            }\n            shadow-camera-far={50}\n            shadow-camera-left={-20}\n            shadow-camera-right={20}\n            shadow-camera-top={20}\n            shadow-camera-bottom={-20}\n            shadow-bias={-0.0001}\n          />\n\n          {/* Korean neon accent lights */}\n          {/* Cyan neon light (left side) */}\n          <pointLight\n            position={[-10, 3, 0]}\n            intensity={4}\n            distance={25}\n            decay={2}\n            color={KOREAN_COLORS.PRIMARY_CYAN}\n          />\n\n          {/* Gold neon light (right side) */}\n          <pointLight\n            position={[10, 3, 0]}\n            intensity={4}\n            distance={25}\n            decay={2}\n            color={KOREAN_COLORS.ACCENT_GOLD}\n          />\n\n          {/* Blue accent light (behind) */}\n          <pointLight\n            position={[0, 5, -15]}\n            intensity={3}\n            distance={30}\n            decay={2}\n            color={KOREAN_COLORS.ACCENT_BLUE}\n          />\n        </>\n      )}\n\n      {lighting === \"traditional\" && (\n        <>\n          <ambientLight intensity={0.6} color={0xffffee} />\n          <directionalLight\n            position={[5, 10, 5]}\n            intensity={0.8}\n            castShadow\n            shadow-mapSize={[2048, 2048]}\n          />\n        </>\n      )}\n\n      {lighting === \"neutral\" && (\n        <>\n          <ambientLight intensity={0.5} />\n          <directionalLight position={[10, 10, 5]} intensity={1} castShadow />\n        </>\n      )}\n\n      {/* Arena floor - dojang mat with reflective wet concrete aesthetic */}\n      {/* Floor dimensions use pre-calculated floorWidth/floorDepth which already include FLOOR_SCALE_FACTOR */}\n      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]} receiveShadow>\n        <planeGeometry args={[floorWidth, floorDepth]} />\n        {lighting === \"cyberpunk\" ? (\n          <primitive object={floorMaterial} attach=\"material\" />\n        ) : (\n          <meshPhysicalMaterial\n            color={KOREAN_COLORS.UI_BACKGROUND_MEDIUM}\n            roughness={0.7}\n            metalness={0.1}\n            clearcoat={0}\n            clearcoatRoughness={0.2}\n          />\n        )}\n      </mesh>\n\n      {/* Cyberpunk grid overlay (scale-aware) */}\n      <gridHelper\n        ref={gridRef}\n        args={[\n          gridSize,\n          20,\n          KOREAN_COLORS.PRIMARY_CYAN,\n          KOREAN_COLORS.UI_BACKGROUND_DARK,\n        ]}\n        position={[0, 0.01, 0]}\n      />\n\n      {/* Korean traditional boundary markers (scale-aware) */}\n      {[\n        [-markerDistance, 0, -markerDepth],\n        [-markerDistance, 0, markerDepth],\n        [markerDistance, 0, -markerDepth],\n        [markerDistance, 0, markerDepth],\n      ].map((pos, i) => (\n        <mesh key={i} position={pos as [number, number, number]} castShadow>\n          <cylinderGeometry args={[0.1 * scale, 0.15 * scale, 0.8, 8]} />\n          <meshPhysicalMaterial\n            color={KOREAN_COLORS.ACCENT_GOLD}\n            emissive={KOREAN_COLORS.ACCENT_GOLD}\n            emissiveIntensity={0.5}\n            metalness={0.8}\n            roughness={0.2}\n            clearcoat={1.0}\n          />\n        </mesh>\n      ))}\n\n      {/* Center marker - Yin Yang inspired (scale-aware) */}\n      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.02, 0]}>\n        <ringGeometry args={[0.8 * scale, 1.0 * scale, 32]} />\n        <meshBasicMaterial\n          color={KOREAN_COLORS.ACCENT_GOLD}\n          transparent\n          opacity={0.6}\n          side={THREE.DoubleSide}\n        />\n      </mesh>\n\n      {/* Korean Signage with neon glow */}\n      {lighting === \"cyberpunk\" && <KoreanSignage3D scale={scale} />}\n\n      {/* Atmospheric Particles (rain/mist) */}\n      {lighting === \"cyberpunk\" && enableParticles && (\n        <AtmosphericParticles3D\n          count={scale >= 1.0 ? 500 : 250}\n          scale={scale}\n          speed={2}\n        />\n      )}\n    </group>\n  );\n};\n\nexport default CombatArena3D;\n"],"mappings":"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"}