blacktrigram 0.7.2

package/lib/components/screens/combat/components/controls/ControlsGuide.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ControlsGuide Component - In-game controls reference
+ *
+ * Features:
+ * - Complete combat controls listing
+ * - Korean/English bilingual labels
+ * - Cyberpunk Korean theming via useKoreanTheme
+ * - Organized by action type
+ *
+ * Refactored to use useKoreanTheme for consistent theming.
+ */
+import React from "react";
+export interface ControlsGuideProps {
+    readonly onClose: () => void;
+    readonly isMobile: boolean;
+}
+/**
+ * ControlsGuide - In-game controls reference overlay
+ * Uses useKoreanTheme for consistent styling.
+ */
+export declare const ControlsGuide: React.FC<ControlsGuideProps>;
+export default ControlsGuide;
+//# sourceMappingURL=ControlsGuide.d.ts.map

package/lib/components/screens/combat/components/controls/ControlsGuide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsGuide.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/controls/ControlsGuide.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAkBD;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2LtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/screens/combat/components/controls/ControlsGuide.js

@@ -0,0 +1,214 @@
+import { useAudio } from "../../../../../audio/AudioProvider.js";
+import { hexToRgbaString } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/controls/ControlsGuide.tsx
+var CONTROL_MAPPINGS = [
+	{
+		key: "WASD / ←↑↓→",
+		actionKorean: "이동",
+		actionEnglish: "Movement"
+	},
+	{
+		key: "1-8",
+		actionKorean: "팔괘 자세",
+		actionEnglish: "Trigram Stances"
+	},
+	{
+		key: "Space",
+		actionKorean: "공격",
+		actionEnglish: "Attack"
+	},
+	{
+		key: "Shift",
+		actionKorean: "방어",
+		actionEnglish: "Defend"
+	},
+	{
+		key: "Tab",
+		actionKorean: "원형 전환",
+		actionEnglish: "Switch Archetype"
+	},
+	{
+		key: "ESC",
+		actionKorean: "일시정지",
+		actionEnglish: "Pause"
+	},
+	{
+		key: "M",
+		actionKorean: "음소거",
+		actionEnglish: "Mute"
+	}
+];
+/**
+* ControlsGuide - In-game controls reference overlay
+* Uses useKoreanTheme for consistent styling.
+*/
+var ControlsGuide = ({ onClose, isMobile }) => {
+	const audio = useAudio();
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "controls-guide",
+		style: {
+			position: "absolute",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			padding: isMobile ? "24px" : "32px",
+			backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .95),
+			border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .8)}`,
+			borderRadius: "12px",
+			minWidth: isMobile ? "280px" : "400px",
+			maxHeight: isMobile ? "70vh" : "80vh",
+			overflow: "auto",
+			boxShadow: `0 0 30px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .3)}`,
+			zIndex: 1e3
+		},
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				"data-testid": "controls-title",
+				style: {
+					fontSize: isMobile ? "20px" : "24px",
+					color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+					fontFamily: theme.fontFamily.KOREAN,
+					fontWeight: "bold",
+					margin: "0 0 24px 0",
+					textAlign: "center",
+					textShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, .4)}`
+				},
+				children: "조작법 | Controls"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: isMobile ? "12px" : "16px"
+				},
+				children: CONTROL_MAPPINGS.map((control, index) => /* @__PURE__ */ jsxs("div", {
+					"data-testid": `control-item-${index}`,
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						padding: isMobile ? "10px" : "12px",
+						backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .5),
+						border: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .3)}`,
+						borderRadius: "6px"
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							flex: 1,
+							fontSize: isMobile ? "12px" : "14px",
+							color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+							fontFamily: theme.fontFamily.KOREAN,
+							fontWeight: "bold"
+						},
+						children: [
+							control.actionKorean,
+							/* @__PURE__ */ jsx("br", {}),
+							/* @__PURE__ */ jsx("span", {
+								style: {
+									fontSize: isMobile ? "11px" : "13px",
+									color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),
+									fontWeight: "normal"
+								},
+								children: control.actionEnglish
+							})
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							padding: isMobile ? "6px 12px" : "8px 16px",
+							fontSize: isMobile ? "12px" : "14px",
+							color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),
+							backgroundColor: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+							fontFamily: theme.fontFamily.MONO,
+							fontWeight: "bold",
+							borderRadius: "4px",
+							textAlign: "center",
+							minWidth: isMobile ? "80px" : "100px"
+						},
+						children: control.key
+					})]
+				}, index))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-testid": "controls-tips",
+				style: {
+					marginTop: isMobile ? "20px" : "24px",
+					padding: isMobile ? "12px" : "16px",
+					backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .3),
+					border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_GOLD, .3)}`,
+					borderRadius: "6px"
+				},
+				children: [/* @__PURE__ */ jsx("h3", {
+					style: {
+						fontSize: isMobile ? "14px" : "16px",
+						color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+						fontFamily: theme.fontFamily.KOREAN,
+						fontWeight: "bold",
+						margin: "0 0 8px 0"
+					},
+					children: "💡 팁 | Tips"
+				}), /* @__PURE__ */ jsxs("p", {
+					style: {
+						fontSize: isMobile ? "12px" : "14px",
+						color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),
+						fontFamily: theme.fontFamily.KOREAN,
+						margin: 0,
+						lineHeight: "1.6"
+					},
+					children: [
+						"• 각 팔괘 자세는 고유한 기술과 장점이 있습니다",
+						/* @__PURE__ */ jsx("br", {}),
+						"• Each trigram stance has unique techniques and advantages",
+						/* @__PURE__ */ jsx("br", {}),
+						/* @__PURE__ */ jsx("br", {}),
+						"• 적절한 타이밍에 방어하면 반격 기회를 얻습니다",
+						/* @__PURE__ */ jsx("br", {}),
+						"• Perfect timing on defense creates counter opportunities"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: () => {
+					audio.playSFX("menu_back");
+					onClose();
+				},
+				onMouseEnter: () => audio.playSFX("menu_hover"),
+				"data-testid": "controls-close-button",
+				style: {
+					marginTop: isMobile ? "20px" : "24px",
+					width: "100%",
+					padding: isMobile ? "10px" : "12px",
+					fontSize: isMobile ? "14px" : "16px",
+					backgroundColor: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+					color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),
+					border: "none",
+					borderRadius: "6px",
+					fontFamily: theme.fontFamily.KOREAN,
+					fontWeight: "bold",
+					cursor: "pointer",
+					transition: "all 0.2s ease"
+				},
+				onMouseOver: (e) => {
+					e.currentTarget.style.backgroundColor = hexToRgbaString(theme.colors.ACCENT_GOLD, 1);
+					e.currentTarget.style.transform = "scale(1.05)";
+				},
+				onMouseOut: (e) => {
+					e.currentTarget.style.backgroundColor = hexToRgbaString(theme.colors.PRIMARY_CYAN, 1);
+					e.currentTarget.style.transform = "scale(1)";
+				},
+				children: "닫기 | Close"
+			})
+		]
+	});
+};
+//#endregion
+export { ControlsGuide as default };
+
+//# sourceMappingURL=ControlsGuide.js.map

package/lib/components/screens/combat/components/controls/ControlsGuide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsGuide.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/ControlsGuide.tsx"],"sourcesContent":["/**\n * ControlsGuide Component - In-game controls reference\n * \n * Features:\n * - Complete combat controls listing\n * - Korean/English bilingual labels\n * - Cyberpunk Korean theming via useKoreanTheme\n * - Organized by action type\n * \n * Refactored to use useKoreanTheme for consistent theming.\n */\n\nimport React from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\n\nexport interface ControlsGuideProps {\n  readonly onClose: () => void;\n  readonly isMobile: boolean;\n}\n\ninterface ControlMapping {\n  readonly key: string;\n  readonly actionKorean: string;\n  readonly actionEnglish: string;\n}\n\nconst CONTROL_MAPPINGS: ControlMapping[] = [\n  { key: \"WASD / ←↑↓→\", actionKorean: \"이동\", actionEnglish: \"Movement\" },\n  { key: \"1-8\", actionKorean: \"팔괘 자세\", actionEnglish: \"Trigram Stances\" },\n  { key: \"Space\", actionKorean: \"공격\", actionEnglish: \"Attack\" },\n  { key: \"Shift\", actionKorean: \"방어\", actionEnglish: \"Defend\" },\n  { key: \"Tab\", actionKorean: \"원형 전환\", actionEnglish: \"Switch Archetype\" },\n  { key: \"ESC\", actionKorean: \"일시정지\", actionEnglish: \"Pause\" },\n  { key: \"M\", actionKorean: \"음소거\", actionEnglish: \"Mute\" },\n];\n\n/**\n * ControlsGuide - In-game controls reference overlay\n * Uses useKoreanTheme for consistent styling.\n */\nexport const ControlsGuide: React.FC<ControlsGuideProps> = ({\n  onClose,\n  isMobile,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n\n  return (\n    <div\n      data-testid=\"controls-guide\"\n      style={{\n        position: \"absolute\",\n        top: \"50%\",\n        left: \"50%\",\n        transform: \"translate(-50%, -50%)\",\n        padding: isMobile ? \"24px\" : \"32px\",\n        backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n        border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n        borderRadius: \"12px\",\n        minWidth: isMobile ? \"280px\" : \"400px\",\n        maxHeight: isMobile ? \"70vh\" : \"80vh\",\n        overflow: \"auto\",\n        boxShadow: `0 0 30px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n        zIndex: 1000,\n      }}\n    >\n      {/* Title */}\n      <h2\n        data-testid=\"controls-title\"\n        style={{\n          fontSize: isMobile ? \"20px\" : \"24px\",\n          color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          margin: \"0 0 24px 0\",\n          textAlign: \"center\",\n          textShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.4)}`,\n        }}\n      >\n        조작법 | Controls\n      </h2>\n\n      {/* Controls List */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isMobile ? \"12px\" : \"16px\",\n        }}\n      >\n        {CONTROL_MAPPINGS.map((control, index) => (\n          <div\n            key={index}\n            data-testid={`control-item-${index}`}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: isMobile ? \"10px\" : \"12px\",\n              backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.5),\n              border: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n              borderRadius: \"6px\",\n            }}\n          >\n            <div\n              style={{\n                flex: 1,\n                fontSize: isMobile ? \"12px\" : \"14px\",\n                color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n                fontFamily: theme.fontFamily.KOREAN,\n                fontWeight: \"bold\",\n              }}\n            >\n              {control.actionKorean}\n              <br />\n              <span\n                style={{\n                  fontSize: isMobile ? \"11px\" : \"13px\",\n                  color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n                  fontWeight: \"normal\",\n                }}\n              >\n                {control.actionEnglish}\n              </span>\n            </div>\n            <div\n              style={{\n                padding: isMobile ? \"6px 12px\" : \"8px 16px\",\n                fontSize: isMobile ? \"12px\" : \"14px\",\n                color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),\n                backgroundColor: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                fontFamily: theme.fontFamily.MONO,\n                fontWeight: \"bold\",\n                borderRadius: \"4px\",\n                textAlign: \"center\",\n                minWidth: isMobile ? \"80px\" : \"100px\",\n              }}\n            >\n              {control.key}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Additional Tips */}\n      <div\n        data-testid=\"controls-tips\"\n        style={{\n          marginTop: isMobile ? \"20px\" : \"24px\",\n          padding: isMobile ? \"12px\" : \"16px\",\n          backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.3),\n          border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.3)}`,\n          borderRadius: \"6px\",\n        }}\n      >\n        <h3\n          style={{\n            fontSize: isMobile ? \"14px\" : \"16px\",\n            color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n            fontFamily: theme.fontFamily.KOREAN,\n            fontWeight: \"bold\",\n            margin: \"0 0 8px 0\",\n          }}\n        >\n          💡 팁 | Tips\n        </h3>\n        <p\n          style={{\n            fontSize: isMobile ? \"12px\" : \"14px\",\n            color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n            fontFamily: theme.fontFamily.KOREAN,\n            margin: 0,\n            lineHeight: \"1.6\",\n          }}\n        >\n          • 각 팔괘 자세는 고유한 기술과 장점이 있습니다\n          <br />\n          • Each trigram stance has unique techniques and advantages\n          <br />\n          <br />\n          • 적절한 타이밍에 방어하면 반격 기회를 얻습니다\n          <br />\n          • Perfect timing on defense creates counter opportunities\n        </p>\n      </div>\n\n      {/* Close Button */}\n      <button\n        onClick={() => {\n          audio.playSFX(\"menu_back\");\n          onClose();\n        }}\n        onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n        data-testid=\"controls-close-button\"\n        style={{\n          marginTop: isMobile ? \"20px\" : \"24px\",\n          width: \"100%\",\n          padding: isMobile ? \"10px\" : \"12px\",\n          fontSize: isMobile ? \"14px\" : \"16px\",\n          backgroundColor: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),\n          border: \"none\",\n          borderRadius: \"6px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          cursor: \"pointer\",\n          transition: \"all 0.2s ease\",\n        }}\n        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.ACCENT_GOLD,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1.05)\";\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1)\";\n        }}\n      >\n        닫기 | Close\n      </button>\n    </div>\n  );\n};\n\nexport default ControlsGuide;\n"],"mappings":"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"}

package/lib/components/screens/combat/components/controls/KeyboardHints.d.ts

@@ -0,0 +1,54 @@
+/**
+ * KeyboardHints - On-screen control overlay
+ * Displays keyboard bindings for trigram stances and combat actions
+ *
+ * Refactored to use useKoreanTheme for consistent theming
+ *
+ * @module components/combat/components/KeyboardHints
+ * @category Combat UI
+ * @korean 키보드힌트
+ */
+import React from "react";
+import { ControlBinding } from "../../../../../utils/controlMapping";
+/**
+ * Props for KeyboardHints component
+ */
+export interface KeyboardHintsProps {
+    /** Whether hints are visible */
+    readonly visible: boolean;
+    /** Current stance index (0-7) for highlighting */
+    readonly currentStance: number;
+    /** Mobile layout flag */
+    readonly isMobile?: boolean;
+    /** Custom key bindings */
+    readonly customBindings?: ControlBinding;
+}
+/**
+ * KeyboardHints Component
+ *
+ * Displays an overlay of keyboard controls for stance switching and combat actions.
+ * Highlights the currently active stance and adapts layout for mobile devices.
+ *
+ * Features:
+ * - 8 trigram stance keys displayed in a grid
+ * - Current stance highlighted in gold
+ * - Combat action keys (attack, block, movement)
+ * - Responsive mobile layout
+ * - Korean cyberpunk styling
+ * - Toggle with F1 key
+ *
+ * @example
+ * ```tsx
+ * <KeyboardHints
+ *   visible={showHints}
+ *   currentStance={player.stance}
+ *   isMobile={isMobile}
+ *   customBindings={controlMapper.getBindings()}
+ * />
+ * ```
+ *
+ * @public
+ * @korean 키보드힌트
+ */
+export declare const KeyboardHints: React.FC<KeyboardHintsProps>;
+//# sourceMappingURL=KeyboardHints.d.ts.map

package/lib/components/screens/combat/components/controls/KeyboardHints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardHints.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/controls/KeyboardHints.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,gCAAgC;IAChC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiVtD,CAAC"}

package/lib/components/screens/combat/components/controls/KeyboardHints.js

@@ -0,0 +1,357 @@
+import { hexToRgbaString } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/screens/combat/components/controls/KeyboardHints.tsx
+/**
+* KeyboardHints - On-screen control overlay
+* Displays keyboard bindings for trigram stances and combat actions
+* 
+* Refactored to use useKoreanTheme for consistent theming
+* 
+* @module components/combat/components/KeyboardHints
+* @category Combat UI
+* @korean 키보드힌트
+*/
+/**
+* KeyboardHints Component
+* 
+* Displays an overlay of keyboard controls for stance switching and combat actions.
+* Highlights the currently active stance and adapts layout for mobile devices.
+* 
+* Features:
+* - 8 trigram stance keys displayed in a grid
+* - Current stance highlighted in gold
+* - Combat action keys (attack, block, movement)
+* - Responsive mobile layout
+* - Korean cyberpunk styling
+* - Toggle with F1 key
+* 
+* @example
+* ```tsx
+* <KeyboardHints
+*   visible={showHints}
+*   currentStance={player.stance}
+*   isMobile={isMobile}
+*   customBindings={controlMapper.getBindings()}
+* />
+* ```
+* 
+* @public
+* @korean 키보드힌트
+*/
+var KeyboardHints = ({ visible, currentStance, isMobile = false, customBindings }) => {
+	const theme = useKoreanTheme({
+		variant: "bordered",
+		size: "md",
+		isMobile
+	});
+	const stanceKeys = useMemo(() => {
+		if (customBindings?.stances) return customBindings.stances;
+		return [
+			"1",
+			"2",
+			"3",
+			"4",
+			"5",
+			"6",
+			"7",
+			"8"
+		];
+	}, [customBindings]);
+	const layout = useMemo(() => {
+		return {
+			keySize: isMobile ? 32 : 48,
+			gap: isMobile ? 4 : 8,
+			fontSize: isMobile ? 12 : 16,
+			labelFontSize: isMobile ? 10 : 12,
+			padding: isMobile ? 8 : 12
+		};
+	}, [isMobile]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx(Html, {
+		fullscreen: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-testid": "keyboard-hints",
+			role: "dialog",
+			"aria-label": "Keyboard control hints",
+			"aria-describedby": "hints-description",
+			style: {
+				position: "absolute",
+				bottom: isMobile ? "20px" : "40px",
+				left: "50%",
+				transform: "translateX(-50%)",
+				pointerEvents: "none",
+				zIndex: 999
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				id: "hints-description",
+				style: {
+					position: "absolute",
+					left: "-9999px",
+					width: "1px",
+					height: "1px",
+					overflow: "hidden"
+				},
+				children: "Keyboard controls for combat. Press F1 to toggle this overlay."
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .9),
+					border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .8)}`,
+					borderRadius: "8px",
+					padding: `${layout.padding}px`,
+					boxShadow: `0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .3)}`
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+							fontFamily: theme.fontFamily.KOREAN,
+							fontSize: `${layout.labelFontSize}px`,
+							textAlign: "center",
+							marginBottom: "8px",
+							fontWeight: "bold"
+						},
+						children: "Trigram Stances (1-8)"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							gap: `${layout.gap}px`,
+							marginBottom: "12px"
+						},
+						children: stanceKeys.map((key, index) => {
+							const isActive = index === currentStance;
+							const keyColor = isActive ? theme.colors.ACCENT_GOLD : theme.colors.UI_STEEL_GRAY;
+							const bgColor = isActive ? hexToRgbaString(theme.colors.ACCENT_GOLD, .2) : "transparent";
+							return /* @__PURE__ */ jsx("div", {
+								"data-testid": `stance-key-${index}`,
+								style: {
+									width: `${layout.keySize}px`,
+									height: `${layout.keySize}px`,
+									border: `2px solid ${hexToRgbaString(keyColor, isActive ? 1 : .6)}`,
+									borderRadius: "4px",
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									fontSize: `${layout.fontSize}px`,
+									color: hexToRgbaString(keyColor, 1),
+									background: bgColor,
+									fontFamily: theme.fontFamily.KOREAN,
+									fontWeight: isActive ? "bold" : "normal",
+									boxShadow: isActive ? `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, .5)}` : "none",
+									transition: "all 0.2s ease"
+								},
+								children: key.toUpperCase()
+							}, index);
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .3)}`,
+							paddingTop: "8px",
+							marginBottom: "8px",
+							display: "grid",
+							gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
+							gap: "4px",
+							fontSize: `${layout.labelFontSize}px`,
+							color: hexToRgbaString(theme.colors.TEXT_SECONDARY, .9),
+							fontFamily: theme.fontFamily.KOREAN
+						},
+						children: [
+							/* @__PURE__ */ jsxs("div", { children: [
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+										fontWeight: "bold"
+									},
+									children: "Space"
+								}),
+								" ",
+								"- Attack"
+							] }),
+							/* @__PURE__ */ jsxs("div", { children: [
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+										fontWeight: "bold"
+									},
+									children: "B"
+								}),
+								" ",
+								"- Block"
+							] }),
+							/* @__PURE__ */ jsxs("div", { children: [
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+										fontWeight: "bold"
+									},
+									children: "V"
+								}),
+								" ",
+								"- Toggle vital points overlay"
+							] }),
+							/* @__PURE__ */ jsxs("div", { children: [
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+										fontWeight: "bold"
+									},
+									children: "WASD/Arrows"
+								}),
+								" ",
+								"- Move"
+							] })
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .3)}`,
+							paddingTop: "8px",
+							marginBottom: "8px"
+						},
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+								fontFamily: theme.fontFamily.KOREAN,
+								fontSize: `${layout.labelFontSize}px`,
+								textAlign: "center",
+								marginBottom: "6px",
+								fontWeight: "bold"
+							},
+							children: "Techniques (기술)"
+						}), /* @__PURE__ */ jsxs("div", {
+							style: {
+								fontSize: `${layout.labelFontSize}px`,
+								color: hexToRgbaString(theme.colors.TEXT_SECONDARY, .9),
+								fontFamily: theme.fontFamily.KOREAN,
+								textAlign: "center"
+							},
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+										fontWeight: "bold"
+									},
+									children: "Q-E-R-T-Y-F-G-Z-X-C"
+								}),
+								" ",
+								"- Execute techniques"
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .3)}`,
+							paddingTop: "8px"
+						},
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+								fontFamily: theme.fontFamily.KOREAN,
+								fontSize: `${layout.labelFontSize}px`,
+								textAlign: "center",
+								marginBottom: "6px",
+								fontWeight: "bold"
+							},
+							children: "Advanced Footwork (보법)"
+						}), /* @__PURE__ */ jsxs("div", {
+							style: {
+								fontSize: `${layout.labelFontSize - 1}px`,
+								color: hexToRgbaString(theme.colors.TEXT_SECONDARY, .9),
+								fontFamily: theme.fontFamily.KOREAN,
+								textAlign: "center",
+								lineHeight: 1.4
+							},
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									style: { marginBottom: "4px" },
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											style: {
+												color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+												fontWeight: "bold"
+											},
+											children: "Shift+WASD"
+										}),
+										" ",
+										"- Tactical steps (30cm)"
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: { marginBottom: "4px" },
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											style: {
+												color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+												fontWeight: "bold"
+											},
+											children: "Ctrl+WASD"
+										}),
+										" ",
+										"- Footwork patterns"
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: { marginBottom: "4px" },
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											style: {
+												color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+												fontWeight: "bold"
+											},
+											children: "Shift+Ctrl+A/D"
+										}),
+										" ",
+										"- Pivot rotation"
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: { marginBottom: "4px" },
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											style: {
+												color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+												fontWeight: "bold"
+											},
+											children: "Shift+Ctrl+W/S"
+										}),
+										" ",
+										"- Shuffle step"
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", { children: [
+									/* @__PURE__ */ jsx("span", {
+										style: {
+											color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+											fontWeight: "bold"
+										},
+										children: "H"
+									}),
+									" ",
+									"- Switch front foot"
+								] })
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							marginTop: "8px",
+							textAlign: "center",
+							fontSize: `${layout.labelFontSize - 2}px`,
+							color: hexToRgbaString(theme.colors.TEXT_SECONDARY, .7),
+							fontStyle: "italic"
+						},
+						children: "Press F1 to toggle • ESC/M for pause"
+					})
+				]
+			})]
+		})
+	});
+};
+//#endregion
+export { KeyboardHints };
+
+//# sourceMappingURL=KeyboardHints.js.map