blacktrigram 0.7.2

package/lib/components/screens/philosophy/PhilosophyScreen3D.js

@@ -0,0 +1,561 @@
+import { useAudio } from "../../../audio/AudioProvider.js";
+import { Z_INDEX } from "../../../types/LayoutTypes.js";
+import { TRIGRAM_DATA } from "../../../systems/trigram/types.js";
+import { PLAYER_ARCHETYPES_DATA } from "../../../systems/types.js";
+import { useWebGLContextLossHandler } from "../../../hooks/useWebGLContextLossHandler.js";
+import { KoreanCulture } from "../../../systems/trigram/KoreanCulture.js";
+import "../../../systems/index.js";
+import { hexToRgbaString } from "../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../shared/base/useKoreanTheme.js";
+import { VolumeControl } from "../../shared/ui/VolumeControl.js";
+import { shouldUseMobileControls } from "../../../utils/deviceDetection.js";
+import { getLayoutConstants } from "../../../utils/responsiveLayoutHelpers.js";
+import BackgroundScene3D from "../../shared/three/scene/BackgroundScene3D.js";
+import "../../shared/three/index.js";
+import useWindowSize from "../../../hooks/useWindowSize.js";
+import { BackButton, LinkButton } from "../../shared/ui/BackButton.js";
+import { useCallback, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Canvas } from "@react-three/fiber";
+//#region src/components/screens/philosophy/PhilosophyScreen3D.tsx
+/**
+* Three.js-based PhilosophyScreen Component
+*/
+var PhilosophyScreen3D = ({ onReturnToMenu, width: propWidth, height: propHeight }) => {
+	useWebGLContextLossHandler({
+		onContextLost: () => {
+			console.warn("⚠️ WebGL context lost in PhilosophyScreen");
+		},
+		onContextRestored: () => {
+			console.log("✓ WebGL context restored in PhilosophyScreen");
+		},
+		autoRestore: true
+	});
+	const audio = useAudio();
+	const { width, height } = useWindowSize();
+	const screenWidth = propWidth ?? width;
+	const screenHeight = propHeight ?? height;
+	const isMobile = shouldUseMobileControls();
+	const isTablet = useMemo(() => !isMobile && screenWidth >= 768 && screenWidth < 1024, [isMobile, screenWidth]);
+	const isLargeDesktop = useMemo(() => !isMobile && screenWidth >= 1920, [isMobile, screenWidth]);
+	const layoutConstants = useMemo(() => getLayoutConstants(screenWidth), [screenWidth]);
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	const scrollbarStyle = useMemo(() => ({ __html: `
+      .philosophy-scrollbar::-webkit-scrollbar {
+        width: 12px !important;
+        display: block !important;
+      }
+      .philosophy-scrollbar::-webkit-scrollbar-track {
+        background: ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8)};
+        border-radius: 6px;
+      }
+      .philosophy-scrollbar::-webkit-scrollbar-thumb {
+        background: ${hexToRgbaString(theme.colors.ACCENT_GOLD, 1)};
+        border-radius: 6px;
+        border: 2px solid ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8)};
+      }
+      .philosophy-scrollbar::-webkit-scrollbar-thumb:hover {
+        background: ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)};
+      }
+    ` }), [theme]);
+	const colors = useMemo(() => ({
+		background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .95),
+		headerBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .9),
+		sectionBg: hexToRgbaString(theme.colors.UI_BACKGROUND_LIGHT, .8),
+		borderGold: hexToRgbaString(theme.colors.ACCENT_GOLD, .8),
+		borderCyan: hexToRgbaString(theme.colors.PRIMARY_CYAN, .6),
+		borderMagenta: hexToRgbaString(theme.colors.SECONDARY_MAGENTA, .6),
+		borderRed: hexToRgbaString(theme.colors.KOREAN_RED, .6),
+		textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, "0")}`,
+		textSecondary: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, "0")}`,
+		textTertiary: `#${theme.colors.TEXT_TERTIARY.toString(16).padStart(6, "0")}`,
+		accentGold: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, "0")}`,
+		accentCyan: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, "0")}`
+	}), [theme]);
+	useEffect(() => {
+		const startMusic = async () => {
+			await audio.fadeIn("underground_theme", 2e3);
+		};
+		startMusic().catch((err) => console.warn("Failed to start philosophy music:", err));
+		return () => {
+			audio.fadeOut(2e3).then(() => audio.stopMusic()).catch((err) => console.warn("Failed to stop philosophy music:", err));
+		};
+	}, [audio]);
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape" || event.key.toLowerCase() === "m") {
+				event.preventDefault();
+				audio.playSFX("menu_back");
+				onReturnToMenu();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown, { passive: false });
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [onReturnToMenu, audio]);
+	const handleBackClick = useCallback(() => {
+		audio.playSFX("menu_back");
+		onReturnToMenu();
+	}, [audio, onReturnToMenu]);
+	const handleISMSClick = useCallback(() => {
+		audio.playSFX("menu_select");
+		window.open("https://github.com/Hack23/ISMS-PUBLIC", "_blank");
+	}, [audio]);
+	const martialValues = useMemo(() => Object.entries(KoreanCulture.MARTIAL_VALUES), []);
+	const trigramPhilosophies = useMemo(() => Object.entries(TRIGRAM_DATA).map(([stance, data]) => ({
+		stance,
+		...data
+	})), []);
+	const archetypes = useMemo(() => Object.entries(PLAYER_ARCHETYPES_DATA), []);
+	const valuesPerRow = isMobile ? 3 : isTablet ? 4 : isLargeDesktop ? 8 : 6;
+	const trigramsPerRow = isMobile ? 2 : isTablet ? 3 : isLargeDesktop ? 5 : 4;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: screenWidth,
+			height: screenHeight,
+			position: "relative",
+			overflow: "hidden"
+		},
+		"data-testid": "philosophy-screen",
+		children: [
+			/* @__PURE__ */ jsx(VolumeControl, {
+				position: "top-right",
+				compact: isMobile
+			}),
+			/* @__PURE__ */ jsx(Canvas, {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					zIndex: Z_INDEX.ARENA
+				},
+				gl: {
+					antialias: true,
+					alpha: false,
+					powerPreference: "high-performance"
+				},
+				dpr: [1, 2],
+				camera: {
+					position: [
+						0,
+						5,
+						10
+					],
+					fov: 75
+				},
+				onCreated: ({ gl }) => {
+					gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);
+				},
+				children: /* @__PURE__ */ jsx(BackgroundScene3D, { theme: "philosophy" })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					pointerEvents: "none",
+					zIndex: Z_INDEX.HUD
+				},
+				"data-testid": "philosophy-hud-overlay",
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						width: "100%",
+						height: "100%",
+						display: "flex",
+						flexDirection: "column",
+						color: colors.textPrimary,
+						fontFamily: theme.koreanTypography.fontFamily,
+						lineHeight: theme.koreanTypography.lineHeight,
+						pointerEvents: "auto"
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								height: `${layoutConstants.headerHeight}px`,
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								justifyContent: "center",
+								background: colors.headerBg,
+								borderBottom: `3px solid ${colors.borderGold}`,
+								padding: `${layoutConstants.padding}px`,
+								position: "relative"
+							},
+							"data-testid": "philosophy-header",
+							children: [
+								/* @__PURE__ */ jsx("h1", {
+									style: {
+										fontSize: isMobile ? "28px" : "36px",
+										fontWeight: "bold",
+										color: colors.accentGold,
+										margin: 0,
+										textShadow: `0 0 15px ${hexToRgbaString(theme.colors.ACCENT_GOLD, .6)}`
+									},
+									children: "흑괘 무도 철학"
+								}),
+								/* @__PURE__ */ jsx("p", {
+									style: {
+										fontSize: isMobile ? "14px" : "18px",
+										color: colors.textSecondary,
+										margin: "8px 0 0 0"
+									},
+									children: "Black Trigram Martial Philosophy"
+								}),
+								/* @__PURE__ */ jsx("div", { style: {
+									width: "80%",
+									height: "2px",
+									background: `linear-gradient(90deg, transparent, ${colors.borderGold}, transparent)`,
+									marginTop: "10px"
+								} })
+							]
+						}),
+						/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: scrollbarStyle }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "philosophy-scrollbar",
+							style: {
+								flex: 1,
+								overflowY: "auto",
+								overflowX: "hidden",
+								padding: `${layoutConstants.padding}px`,
+								scrollbarWidth: "thin",
+								scrollbarColor: `${colors.accentGold} ${colors.sectionBg}`
+							},
+							"data-testid": "philosophy-content",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "10px",
+										border: `2px solid ${colors.borderRed}`,
+										padding: "20px"
+									},
+									"data-testid": "martial-values",
+									children: [/* @__PURE__ */ jsx("h2", {
+										style: {
+											fontSize: isMobile ? "18px" : "22px",
+											fontWeight: "bold",
+											color: colors.accentGold,
+											margin: "0 0 20px 0"
+										},
+										children: "무도 가치관 (Martial Values)"
+									}), /* @__PURE__ */ jsx("div", {
+										style: {
+											display: "grid",
+											gridTemplateColumns: `repeat(${valuesPerRow}, 1fr)`,
+											gap: "10px"
+										},
+										children: martialValues.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+											style: {
+												background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .7),
+												borderRadius: "6px",
+												border: `1px solid ${colors.borderGold}`,
+												padding: "12px",
+												textAlign: "center"
+											},
+											"data-testid": `martial-value-${key}`,
+											children: [/* @__PURE__ */ jsx("div", {
+												style: {
+													fontSize: isMobile ? "16px" : "18px",
+													fontWeight: "bold",
+													color: colors.textPrimary,
+													marginBottom: "4px"
+												},
+												children: value.korean
+											}), /* @__PURE__ */ jsx("div", {
+												style: {
+													fontSize: isMobile ? "11px" : "13px",
+													color: colors.textSecondary
+												},
+												children: value.english
+											})]
+										}, key))
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "10px",
+										border: `2px solid ${colors.borderCyan}`,
+										padding: "20px"
+									},
+									"data-testid": "trigram-philosophy",
+									children: [/* @__PURE__ */ jsx("h2", {
+										style: {
+											fontSize: isMobile ? "18px" : "22px",
+											fontWeight: "bold",
+											color: colors.accentGold,
+											margin: "0 0 20px 0"
+										},
+										children: "팔괘 철학 (Eight Trigrams Philosophy)"
+									}), /* @__PURE__ */ jsx("div", {
+										style: {
+											display: "grid",
+											gridTemplateColumns: `repeat(${trigramsPerRow}, 1fr)`,
+											gap: "15px"
+										},
+										children: trigramPhilosophies.map((trigram) => /* @__PURE__ */ jsxs("div", {
+											style: {
+												background: hexToRgbaString(trigram.theme.primary, .25),
+												borderRadius: "8px",
+												border: `2px solid #${trigram.theme.primary.toString(16).padStart(6, "0")}`,
+												padding: "15px"
+											},
+											"data-testid": `trigram-${trigram.stance}`,
+											children: [
+												/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "32px" : "40px",
+														color: `#${trigram.theme.primary.toString(16).padStart(6, "0")}`,
+														textAlign: "center",
+														marginBottom: "10px"
+													},
+													children: trigram.symbol
+												}),
+												/* @__PURE__ */ jsxs("div", {
+													style: {
+														fontSize: isMobile ? "12px" : "14px",
+														fontWeight: "bold",
+														color: colors.textPrimary,
+														textAlign: "center",
+														marginBottom: "4px"
+													},
+													children: [
+														trigram.name.korean,
+														" (",
+														trigram.name.english,
+														")"
+													]
+												}),
+												/* @__PURE__ */ jsxs("div", {
+													style: {
+														fontSize: isMobile ? "11px" : "13px",
+														color: colors.accentGold,
+														textAlign: "center",
+														marginBottom: "8px",
+														fontWeight: "bold"
+													},
+													children: [
+														trigram.chinese,
+														" - ",
+														trigram.attribute.chinese,
+														",",
+														" ",
+														trigram.attribute.korean
+													]
+												}),
+												/* @__PURE__ */ jsxs("div", {
+													style: {
+														fontSize: isMobile ? "10px" : "11px",
+														color: colors.accentCyan,
+														textAlign: "center",
+														marginBottom: "8px"
+													},
+													children: [
+														trigram.meaning.korean,
+														" | ",
+														trigram.meaning.english
+													]
+												}),
+												/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "10px" : "11px",
+														color: colors.textSecondary,
+														textAlign: "center",
+														marginBottom: "6px"
+													},
+													children: trigram.philosophy.korean
+												}),
+												/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "9px" : "10px",
+														color: colors.textTertiary,
+														textAlign: "center",
+														fontStyle: "italic"
+													},
+													children: trigram.combat.english
+												})
+											]
+										}, trigram.stance))
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "10px",
+										border: `2px solid ${colors.borderMagenta}`,
+										padding: "20px"
+									},
+									"data-testid": "archetype-philosophy",
+									children: [/* @__PURE__ */ jsx("h2", {
+										style: {
+											fontSize: isMobile ? "18px" : "22px",
+											fontWeight: "bold",
+											color: colors.accentGold,
+											margin: "0 0 20px 0"
+										},
+										children: "무사 유형 철학 (Warrior Archetype Philosophy)"
+									}), /* @__PURE__ */ jsx("div", {
+										style: {
+											display: "flex",
+											flexDirection: "column",
+											gap: "12px"
+										},
+										children: archetypes.map(([archetype, data]) => /* @__PURE__ */ jsxs("div", {
+											style: {
+												background: hexToRgbaString(data.colors.primary, .2),
+												borderRadius: "6px",
+												border: `1px solid #${data.colors.primary.toString(16).padStart(6, "0")}`,
+												padding: "15px"
+											},
+											"data-testid": `archetype-${archetype}`,
+											children: [
+												/* @__PURE__ */ jsxs("div", {
+													style: {
+														fontSize: isMobile ? "16px" : "18px",
+														fontWeight: "bold",
+														color: `#${data.colors.primary.toString(16).padStart(6, "0")}`,
+														marginBottom: "8px"
+													},
+													children: [
+														data.name.korean,
+														" (",
+														data.name.english,
+														")"
+													]
+												}),
+												/* @__PURE__ */ jsxs("div", {
+													style: {
+														display: "grid",
+														gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
+														gap: "10px"
+													},
+													children: [/* @__PURE__ */ jsx("div", {
+														style: {
+															fontSize: isMobile ? "11px" : "13px",
+															color: colors.textPrimary
+														},
+														children: data.description.korean
+													}), /* @__PURE__ */ jsx("div", {
+														style: {
+															fontSize: isMobile ? "10px" : "12px",
+															color: colors.textSecondary
+														},
+														children: data.description.english
+													})]
+												}),
+												/* @__PURE__ */ jsx("div", {
+													style: {
+														marginTop: "8px",
+														fontSize: isMobile ? "9px" : "11px",
+														color: colors.textTertiary
+													},
+													children: "전통 무예 전문가"
+												})
+											]
+										}, archetype))
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								minHeight: `${layoutConstants.footerHeight}px`,
+								background: colors.headerBg,
+								borderTop: `3px solid ${colors.borderGold}`,
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								justifyContent: "center",
+								padding: `${layoutConstants.padding}px`,
+								gap: "15px"
+							},
+							"data-testid": "philosophy-footer",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										background: hexToRgbaString(theme.colors.ACCENT_GOLD, .15),
+										borderRadius: "8px",
+										border: `1px solid ${colors.borderGold}`,
+										padding: "15px",
+										textAlign: "center",
+										maxWidth: "90%"
+									},
+									children: [/* @__PURE__ */ jsx("div", {
+										style: {
+											fontSize: isMobile ? "12px" : "14px",
+											color: colors.accentGold,
+											fontStyle: "italic",
+											marginBottom: "4px"
+										},
+										children: "무술은 단순한 격투가 아닌, 자신을 수양하고 상대를 존중하는 도(道)입니다"
+									}), /* @__PURE__ */ jsx("div", {
+										style: {
+											fontSize: isMobile ? "10px" : "12px",
+											color: colors.textSecondary,
+											fontStyle: "italic"
+										},
+										children: "Martial arts is not mere combat, but the Way (道) of self-cultivation and respect for others"
+									})]
+								}),
+								/* @__PURE__ */ jsx(LinkButton, {
+									onClick: handleISMSClick,
+									korean: "공개 보안 정책",
+									english: "View Security Policies",
+									icon: "🔐",
+									isMobile,
+									testId: "isms-public-link"
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "space-between",
+										width: "100%",
+										gap: "15px"
+									},
+									children: [/* @__PURE__ */ jsx(BackButton, {
+										onClick: handleBackClick,
+										korean: "돌아가기",
+										english: "Return",
+										isMobile,
+										testId: "philosophy-back-button"
+									}), /* @__PURE__ */ jsxs("div", {
+										style: {
+											background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .9),
+											borderRadius: "6px",
+											padding: "8px 12px",
+											fontSize: isMobile ? "11px" : "12px",
+											fontWeight: "bold",
+											color: `#${theme.colors.SECONDARY_MAGENTA.toString(16).padStart(6, "0")}`,
+											border: `1px solid ${colors.borderGold}`,
+											display: "flex",
+											flexDirection: "column",
+											alignItems: "center",
+											gap: "2px"
+										},
+										"data-testid": "keyboard-shortcuts",
+										children: [/* @__PURE__ */ jsx("span", { children: "ESC" }), /* @__PURE__ */ jsx("span", { children: "M" })]
+									})]
+								})
+							]
+						})
+					]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { PhilosophyScreen3D as default };
+
+//# sourceMappingURL=PhilosophyScreen3D.js.map

package/lib/components/screens/philosophy/PhilosophyScreen3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhilosophyScreen3D.js","names":[],"sources":["../../../../src/components/screens/philosophy/PhilosophyScreen3D.tsx"],"sourcesContent":["// UI renders outside Canvas in absolute-positioned div - no Html needed\nimport { Canvas } from \"@react-three/fiber\";\nimport React, { useCallback, useEffect, useMemo } from \"react\";\nimport { useAudio } from \"../../../audio/AudioProvider\";\nimport { useWebGLContextLossHandler } from \"../../../hooks/useWebGLContextLossHandler\";\nimport { useWindowSize } from \"../../../hooks/useWindowSize\";\nimport { PLAYER_ARCHETYPES_DATA } from \"../../../systems\";\nimport { KoreanCulture } from \"../../../systems/trigram/KoreanCulture\";\nimport { TRIGRAM_DATA } from \"../../../systems/trigram/types\";\nimport { TrigramStance } from \"../../../types\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport { shouldUseMobileControls } from \"../../../utils/deviceDetection\";\nimport { getLayoutConstants } from \"../../../utils/responsiveLayoutHelpers\";\nimport { useKoreanTheme } from \"../../shared/base/useKoreanTheme\";\nimport { BackgroundScene3D } from \"../../shared/three\";\nimport { BackButton, LinkButton } from \"../../shared/ui/BackButton\";\nimport { VolumeControl } from \"../../shared/ui/VolumeControl\";\n\nexport interface PhilosophyScreen3DProps {\n  readonly onReturnToMenu: () => void;\n  readonly width?: number;\n  readonly height?: number;\n}\n\n/**\n * Three.js-based PhilosophyScreen Component\n */\nexport const PhilosophyScreen3D: React.FC<PhilosophyScreen3DProps> = ({\n  onReturnToMenu,\n  width: propWidth,\n  height: propHeight,\n}) => {\n  // UI now renders outside Canvas - no mount state needed\n\n  // Handle WebGL context loss and restoration (for 3D background only)\n  useWebGLContextLossHandler({\n    onContextLost: () => {\n      console.warn(\"⚠️ WebGL context lost in PhilosophyScreen\");\n    },\n    onContextRestored: () => {\n      console.log(\"✓ WebGL context restored in PhilosophyScreen\");\n    },\n    autoRestore: true,\n  });\n\n  const audio = useAudio();\n  const { width, height } = useWindowSize();\n\n  // Use prop dimensions if provided, otherwise use window size\n  const screenWidth = propWidth ?? width;\n  const screenHeight = propHeight ?? height;\n\n  // Responsive layout calculations with large desktop support\n  // Use device detection instead of width-only breakpoint to correctly identify high-res mobile devices\n  const isMobile = shouldUseMobileControls();\n  // Only use width for tablet/desktop distinction when NOT mobile\n  const isTablet = useMemo(\n    () => !isMobile && screenWidth >= 768 && screenWidth < 1024,\n    [isMobile, screenWidth],\n  );\n  const isLargeDesktop = useMemo(\n    () => !isMobile && screenWidth >= 1920,\n    [isMobile, screenWidth],\n  ); // 4K/2K displays\n\n  // Use centralized responsive layout helper for consistent scaling\n  const layoutConstants = useMemo(\n    () => getLayoutConstants(screenWidth),\n    [screenWidth],\n  );\n\n  // Use Korean theme hook for consistent theming\n  const theme = useKoreanTheme({\n    variant: \"primary\",\n    size: \"md\",\n    isMobile,\n  });\n\n  // Memoize scrollbar style to prevent re-creating style tag on every render\n  const scrollbarStyle = useMemo(\n    () => ({\n      __html: `\n      .philosophy-scrollbar::-webkit-scrollbar {\n        width: 12px !important;\n        display: block !important;\n      }\n      .philosophy-scrollbar::-webkit-scrollbar-track {\n        background: ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n        border-radius: 6px;\n      }\n      .philosophy-scrollbar::-webkit-scrollbar-thumb {\n        background: ${hexToRgbaString(theme.colors.ACCENT_GOLD, 1)};\n        border-radius: 6px;\n        border: 2px solid ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n      }\n      .philosophy-scrollbar::-webkit-scrollbar-thumb:hover {\n        background: ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)};\n      }\n    `,\n    }),\n    [theme],\n  );\n\n  // Memoize colors from theme for performance\n  const colors = useMemo(\n    () => ({\n      background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n      headerBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n      sectionBg: hexToRgbaString(theme.colors.UI_BACKGROUND_LIGHT, 0.8),\n      borderGold: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.8),\n      borderCyan: hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6),\n      borderMagenta: hexToRgbaString(theme.colors.SECONDARY_MAGENTA, 0.6),\n      borderRed: hexToRgbaString(theme.colors.KOREAN_RED, 0.6),\n      textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, \"0\")}`,\n      textSecondary: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, \"0\")}`,\n      textTertiary: `#${theme.colors.TEXT_TERTIARY.toString(16).padStart(6, \"0\")}`,\n      accentGold: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n      accentCyan: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, \"0\")}`,\n    }),\n    [theme],\n  );\n\n  // Audio lifecycle management for philosophy screen\n  useEffect(() => {\n    const startMusic = async () => {\n      await audio.fadeIn(\"underground_theme\", 2000);\n    };\n    void startMusic().catch((err) =>\n      console.warn(\"Failed to start philosophy music:\", err),\n    );\n\n    return () => {\n      void audio\n        .fadeOut(2000)\n        .then(() => audio.stopMusic())\n        .catch((err) => console.warn(\"Failed to stop philosophy music:\", err));\n    };\n  }, [audio]);\n\n  // Enhanced keyboard handling for screen-level navigation\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" || event.key.toLowerCase() === \"m\") {\n        event.preventDefault();\n        audio.playSFX(\"menu_back\");\n        onReturnToMenu();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown, { passive: false });\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [onReturnToMenu, audio]);\n\n  // Handle back button click\n  const handleBackClick = useCallback(() => {\n    audio.playSFX(\"menu_back\");\n    onReturnToMenu();\n  }, [audio, onReturnToMenu]);\n\n  // Handle ISMS link click\n  const handleISMSClick = useCallback(() => {\n    audio.playSFX(\"menu_select\");\n    window.open(\"https://github.com/Hack23/ISMS-PUBLIC\", \"_blank\");\n  }, [audio]);\n\n  // Get philosophy data\n  const martialValues = useMemo(\n    () => Object.entries(KoreanCulture.MARTIAL_VALUES),\n    [],\n  );\n\n  const trigramPhilosophies = useMemo(\n    () =>\n      Object.entries(TRIGRAM_DATA).map(([stance, data]) => ({\n        stance: stance as TrigramStance,\n        ...data,\n      })),\n    [],\n  );\n\n  const archetypes = useMemo(() => Object.entries(PLAYER_ARCHETYPES_DATA), []);\n\n  // Grid layout calculations\n  const valuesPerRow = isMobile ? 3 : isTablet ? 4 : isLargeDesktop ? 8 : 6;\n  const trigramsPerRow = isMobile ? 2 : isTablet ? 3 : isLargeDesktop ? 5 : 4;\n\n  return (\n    <div\n      style={{\n        width: screenWidth,\n        height: screenHeight,\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"philosophy-screen\"\n    >\n      {/* Volume Control - outside Canvas to maintain AudioProvider context */}\n      <VolumeControl position=\"top-right\" compact={isMobile} />\n\n      {/* Three.js Canvas for 3D background */}\n      <Canvas\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          zIndex: Z_INDEX.ARENA,\n        }}\n        gl={{\n          antialias: true,\n          alpha: false,\n          powerPreference: \"high-performance\",\n        }}\n        dpr={[1, 2]}\n        camera={{ position: [0, 5, 10], fov: 75 }}\n        onCreated={({ gl }) => {\n          gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);\n        }}\n      >\n        {/* 3D Background Scene */}\n        <BackgroundScene3D theme=\"philosophy\" />\n      </Canvas>\n\n      {/* UI Overlay (positioned absolutely over Canvas) - matches CombatScreen pattern */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          pointerEvents: \"none\",\n          zIndex: Z_INDEX.HUD,\n        }}\n        data-testid=\"philosophy-hud-overlay\"\n      >\n        <div\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            color: colors.textPrimary,\n            fontFamily: theme.koreanTypography.fontFamily,\n            lineHeight: theme.koreanTypography.lineHeight,\n            pointerEvents: \"auto\",\n          }}\n        >\n          {/* Header */}\n          <div\n            style={{\n              height: `${layoutConstants.headerHeight}px`,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              background: colors.headerBg,\n              borderBottom: `3px solid ${colors.borderGold}`,\n              padding: `${layoutConstants.padding}px`,\n              position: \"relative\",\n            }}\n            data-testid=\"philosophy-header\"\n          >\n            <h1\n              style={{\n                fontSize: isMobile ? \"28px\" : \"36px\",\n                fontWeight: \"bold\",\n                color: colors.accentGold,\n                margin: 0,\n                textShadow: `0 0 15px ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.6,\n                )}`,\n              }}\n            >\n              흑괘 무도 철학\n            </h1>\n            <p\n              style={{\n                fontSize: isMobile ? \"14px\" : \"18px\",\n                color: colors.textSecondary,\n                margin: \"8px 0 0 0\",\n              }}\n            >\n              Black Trigram Martial Philosophy\n            </p>\n\n            {/* Decorative line */}\n            <div\n              style={{\n                width: \"80%\",\n                height: \"2px\",\n                background: `linear-gradient(90deg, transparent, ${colors.borderGold}, transparent)`,\n                marginTop: \"10px\",\n              }}\n            />\n          </div>\n\n          {/* WebKit Scrollbar Styling - Using !important to override global hide */}\n          <style dangerouslySetInnerHTML={scrollbarStyle} />\n\n          {/* Content Area - Scrollable */}\n          <div\n            className=\"philosophy-scrollbar\"\n            style={{\n              flex: 1,\n              overflowY: \"auto\",\n              overflowX: \"hidden\",\n              padding: `${layoutConstants.padding}px`,\n              scrollbarWidth: \"thin\",\n              scrollbarColor: `${colors.accentGold} ${colors.sectionBg}`,\n            }}\n            data-testid=\"philosophy-content\"\n          >\n            {/* Martial Values Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"10px\",\n                border: `2px solid ${colors.borderRed}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"martial-values\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                무도 가치관 (Martial Values)\n              </h2>\n\n              {/* Values Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: `repeat(${valuesPerRow}, 1fr)`,\n                  gap: \"10px\",\n                }}\n              >\n                {martialValues.map(([key, value]) => (\n                  <div\n                    key={key}\n                    style={{\n                      background: hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_DARK,\n                        0.7,\n                      ),\n                      borderRadius: \"6px\",\n                      border: `1px solid ${colors.borderGold}`,\n                      padding: \"12px\",\n                      textAlign: \"center\",\n                    }}\n                    data-testid={`martial-value-${key}`}\n                  >\n                    <div\n                      style={{\n                        fontSize: isMobile ? \"16px\" : \"18px\",\n                        fontWeight: \"bold\",\n                        color: colors.textPrimary,\n                        marginBottom: \"4px\",\n                      }}\n                    >\n                      {value.korean}\n                    </div>\n                    <div\n                      style={{\n                        fontSize: isMobile ? \"11px\" : \"13px\",\n                        color: colors.textSecondary,\n                      }}\n                    >\n                      {value.english}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Trigram Philosophy Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"10px\",\n                border: `2px solid ${colors.borderCyan}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"trigram-philosophy\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                팔괘 철학 (Eight Trigrams Philosophy)\n              </h2>\n\n              {/* Trigrams Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: `repeat(${trigramsPerRow}, 1fr)`,\n                  gap: \"15px\",\n                }}\n              >\n                {trigramPhilosophies.map((trigram) => (\n                  <div\n                    key={trigram.stance}\n                    style={{\n                      background: hexToRgbaString(trigram.theme.primary, 0.25),\n                      borderRadius: \"8px\",\n                      border: `2px solid #${trigram.theme.primary\n                        .toString(16)\n                        .padStart(6, \"0\")}`,\n                      padding: \"15px\",\n                    }}\n                    data-testid={`trigram-${trigram.stance}`}\n                  >\n                    {/* Trigram Symbol */}\n                    <div\n                      style={{\n                        fontSize: isMobile ? \"32px\" : \"40px\",\n                        color: `#${trigram.theme.primary\n                          .toString(16)\n                          .padStart(6, \"0\")}`,\n                        textAlign: \"center\",\n                        marginBottom: \"10px\",\n                      }}\n                    >\n                      {trigram.symbol}\n                    </div>\n\n                    {/* Name with Chinese character */}\n                    <div\n                      style={{\n                        fontSize: isMobile ? \"12px\" : \"14px\",\n                        fontWeight: \"bold\",\n                        color: colors.textPrimary,\n                        textAlign: \"center\",\n                        marginBottom: \"4px\",\n                      }}\n                    >\n                      {trigram.name.korean} ({trigram.name.english})\n                    </div>\n\n                    {/* Chinese character and attribute */}\n                    <div\n                      style={{\n                        fontSize: isMobile ? \"11px\" : \"13px\",\n                        color: colors.accentGold,\n                        textAlign: \"center\",\n                        marginBottom: \"8px\",\n                        fontWeight: \"bold\",\n                      }}\n                    >\n                      {trigram.chinese} - {trigram.attribute.chinese},{\" \"}\n                      {trigram.attribute.korean}\n                    </div>\n\n                    {/* Core meaning */}\n                    <div\n                      style={{\n                        fontSize: isMobile ? \"10px\" : \"11px\",\n                        color: colors.accentCyan,\n                        textAlign: \"center\",\n                        marginBottom: \"8px\",\n                      }}\n                    >\n                      {trigram.meaning.korean} | {trigram.meaning.english}\n                    </div>\n\n                    {/* Philosophy */}\n                    <div\n                      style={{\n                        fontSize: isMobile ? \"10px\" : \"11px\",\n                        color: colors.textSecondary,\n                        textAlign: \"center\",\n                        marginBottom: \"6px\",\n                      }}\n                    >\n                      {trigram.philosophy.korean}\n                    </div>\n\n                    {/* Combat description */}\n                    <div\n                      style={{\n                        fontSize: isMobile ? \"9px\" : \"10px\",\n                        color: colors.textTertiary,\n                        textAlign: \"center\",\n                        fontStyle: \"italic\",\n                      }}\n                    >\n                      {trigram.combat.english}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Archetype Philosophy Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"10px\",\n                border: `2px solid ${colors.borderMagenta}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"archetype-philosophy\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                무사 유형 철학 (Warrior Archetype Philosophy)\n              </h2>\n\n              {/* Archetypes List */}\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"12px\",\n                }}\n              >\n                {archetypes.map(([archetype, data]) => (\n                  <div\n                    key={archetype}\n                    style={{\n                      background: hexToRgbaString(data.colors.primary, 0.2),\n                      borderRadius: \"6px\",\n                      border: `1px solid #${data.colors.primary\n                        .toString(16)\n                        .padStart(6, \"0\")}`,\n                      padding: \"15px\",\n                    }}\n                    data-testid={`archetype-${archetype}`}\n                  >\n                    {/* Name */}\n                    <div\n                      style={{\n                        fontSize: isMobile ? \"16px\" : \"18px\",\n                        fontWeight: \"bold\",\n                        color: `#${data.colors.primary\n                          .toString(16)\n                          .padStart(6, \"0\")}`,\n                        marginBottom: \"8px\",\n                      }}\n                    >\n                      {data.name.korean} ({data.name.english})\n                    </div>\n\n                    {/* Description */}\n                    <div\n                      style={{\n                        display: \"grid\",\n                        gridTemplateColumns: isMobile ? \"1fr\" : \"1fr 1fr\",\n                        gap: \"10px\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"11px\" : \"13px\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {data.description.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"10px\" : \"12px\",\n                          color: colors.textSecondary,\n                        }}\n                      >\n                        {data.description.english}\n                      </div>\n                    </div>\n\n                    {/* Specialist tag */}\n                    <div\n                      style={{\n                        marginTop: \"8px\",\n                        fontSize: isMobile ? \"9px\" : \"11px\",\n                        color: colors.textTertiary,\n                      }}\n                    >\n                      전통 무예 전문가\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Footer */}\n          <div\n            style={{\n              minHeight: `${layoutConstants.footerHeight}px`,\n              background: colors.headerBg,\n              borderTop: `3px solid ${colors.borderGold}`,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              padding: `${layoutConstants.padding}px`,\n              gap: \"15px\",\n            }}\n            data-testid=\"philosophy-footer\"\n          >\n            {/* Motivation Quote */}\n            <div\n              style={{\n                background: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.15),\n                borderRadius: \"8px\",\n                border: `1px solid ${colors.borderGold}`,\n                padding: \"15px\",\n                textAlign: \"center\",\n                maxWidth: \"90%\",\n              }}\n            >\n              <div\n                style={{\n                  fontSize: isMobile ? \"12px\" : \"14px\",\n                  color: colors.accentGold,\n                  fontStyle: \"italic\",\n                  marginBottom: \"4px\",\n                }}\n              >\n                무술은 단순한 격투가 아닌, 자신을 수양하고 상대를 존중하는\n                도(道)입니다\n              </div>\n              <div\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                }}\n              >\n                Martial arts is not mere combat, but the Way (道) of\n                self-cultivation and respect for others\n              </div>\n            </div>\n\n            {/* ISMS Link */}\n            <LinkButton\n              onClick={handleISMSClick}\n              korean=\"공개 보안 정책\"\n              english=\"View Security Policies\"\n              icon=\"🔐\"\n              isMobile={isMobile}\n              testId=\"isms-public-link\"\n            />\n\n            {/* Action Row */}\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n                width: \"100%\",\n                gap: \"15px\",\n              }}\n            >\n              {/* Back Button */}\n              <BackButton\n                onClick={handleBackClick}\n                korean=\"돌아가기\"\n                english=\"Return\"\n                isMobile={isMobile}\n                testId=\"philosophy-back-button\"\n              />\n\n              {/* Keyboard Hint */}\n              <div\n                style={{\n                  background: hexToRgbaString(\n                    theme.colors.UI_BACKGROUND_MEDIUM,\n                    0.9,\n                  ),\n                  borderRadius: \"6px\",\n                  padding: \"8px 12px\",\n                  fontSize: isMobile ? \"11px\" : \"12px\",\n                  fontWeight: \"bold\",\n                  color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                    16,\n                  ).padStart(6, \"0\")}`,\n                  border: `1px solid ${colors.borderGold}`,\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  alignItems: \"center\",\n                  gap: \"2px\",\n                }}\n                data-testid=\"keyboard-shortcuts\"\n              >\n                <span>ESC</span>\n                <span>M</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default PhilosophyScreen3D;\n"],"mappings":"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"}