blacktrigram 0.7.47 → 0.7.49

package/lib/components/screens/combat/hooks/useCombatState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombatState.js","names":[],"sources":["../../../../../src/components/screens/combat/hooks/useCombatState.ts"],"sourcesContent":["/**\n * useCombatState Hook - Consolidated Combat State Management\n * \n * Custom hook for managing complex combat state using useReducer.\n * Consolidates multiple useState calls into a single reducer for better\n * performance and maintainability.\n *\n * Performance:\n * - Uses useReducer to batch state updates\n * - Reduces number of re-renders\n * - Provides clear action-based state updates\n *\n * @returns Combat state and dispatch actions\n * \n * @example\n * ```typescript\n * const { state, actions } = useCombatState();\n * actions.setHitEffects([effect1, effect2]);\n * actions.incrementCombo();\n * ```\n */\n\nimport { HitEffect } from \"@/systems\";\nimport type { StanceLaterality } from \"@/systems/trigram/types\";\nimport { useCallback, useReducer } from \"react\";\n\n/**\n * Combat screen state managed by the reducer\n * Note: Renamed from CombatState to avoid conflict with CombatState enum in types/common.ts\n */\nexport interface CombatScreenState {\n  readonly hitEffects: HitEffect[];\n  readonly isExecutingTechnique: boolean;\n  readonly combatMessages: string[];\n  readonly roundStarted: boolean;\n  readonly roundEnded: boolean;\n  readonly roundDisplayStatus: \"start\" | \"fight\" | \"ko\" | \"end\" | null;\n  readonly comboCount: number;\n  readonly lastHitTime: number;\n  readonly screenShake: { x: number; y: number };\n  readonly playerLaterality: readonly [StanceLaterality, StanceLaterality];\n}\n\n/**\n * Combat state actions\n */\ntype CombatAction =\n  | { type: \"SET_HIT_EFFECTS\"; payload: HitEffect[] }\n  | { type: \"ADD_HIT_EFFECT\"; payload: HitEffect }\n  | { type: \"REMOVE_HIT_EFFECT\"; payload: string }\n  | { type: \"SET_EXECUTING_TECHNIQUE\"; payload: boolean }\n  | { type: \"ADD_COMBAT_MESSAGE\"; payload: string }\n  | { type: \"SET_ROUND_STARTED\"; payload: boolean }\n  | { type: \"SET_ROUND_ENDED\"; payload: boolean }\n  | { type: \"SET_ROUND_DISPLAY_STATUS\"; payload: \"start\" | \"fight\" | \"ko\" | \"end\" | null }\n  | { type: \"SET_COMBO_COUNT\"; payload: number }\n  | { type: \"INCREMENT_COMBO\" }\n  | { type: \"RESET_COMBO\" }\n  | { type: \"SET_LAST_HIT_TIME\"; payload: number }\n  | { type: \"SET_SCREEN_SHAKE\"; payload: { x: number; y: number } }\n  | { type: \"RESET_SCREEN_SHAKE\" }\n  | { type: \"RESET_ROUND_STATE\" }\n  | { type: \"SET_PLAYER_LATERALITY\"; payload: readonly [StanceLaterality, StanceLaterality] }\n  | { type: \"SET_PLAYER_LATERALITY_INDEX\"; payload: { index: 0 | 1; laterality: StanceLaterality } };\n\n/**\n * Initial combat state\n */\nconst initialState: CombatScreenState = {\n  hitEffects: [],\n  isExecutingTechnique: false,\n  combatMessages: [],\n  roundStarted: false,\n  roundEnded: false,\n  roundDisplayStatus: null,\n  comboCount: 0,\n  lastHitTime: 0,\n  screenShake: { x: 0, y: 0 },\n  playerLaterality: [\"right\", \"right\"],\n};\n\n/**\n * Combat state reducer\n * Handles all combat state updates in a centralized, performant way\n */\nfunction combatReducer(state: CombatScreenState, action: CombatAction): CombatScreenState {\n  switch (action.type) {\n    case \"SET_HIT_EFFECTS\":\n      return { ...state, hitEffects: action.payload };\n\n    case \"ADD_HIT_EFFECT\":\n      return { ...state, hitEffects: [...state.hitEffects, action.payload] };\n\n    case \"REMOVE_HIT_EFFECT\":\n      return {\n        ...state,\n        hitEffects: state.hitEffects.filter((effect) => effect.id !== action.payload),\n      };\n\n    case \"SET_EXECUTING_TECHNIQUE\":\n      return { ...state, isExecutingTechnique: action.payload };\n\n    case \"ADD_COMBAT_MESSAGE\":\n      return {\n        ...state,\n        combatMessages: [action.payload, ...state.combatMessages.slice(0, 4)],\n      };\n\n    case \"SET_ROUND_STARTED\":\n      return { ...state, roundStarted: action.payload };\n\n    case \"SET_ROUND_ENDED\":\n      return { ...state, roundEnded: action.payload };\n\n    case \"SET_ROUND_DISPLAY_STATUS\":\n      return { ...state, roundDisplayStatus: action.payload };\n\n    case \"SET_COMBO_COUNT\":\n      return { ...state, comboCount: action.payload };\n\n    case \"INCREMENT_COMBO\":\n      return { ...state, comboCount: state.comboCount + 1 };\n\n    case \"RESET_COMBO\":\n      return { ...state, comboCount: 0 };\n\n    case \"SET_LAST_HIT_TIME\":\n      return { ...state, lastHitTime: action.payload };\n\n    case \"SET_SCREEN_SHAKE\":\n      return { ...state, screenShake: action.payload };\n\n    case \"RESET_SCREEN_SHAKE\":\n      return { ...state, screenShake: { x: 0, y: 0 } };\n\n    case \"RESET_ROUND_STATE\":\n      return {\n        ...state,\n        roundStarted: false,\n        roundEnded: false,\n        roundDisplayStatus: null,\n        comboCount: 0,\n        hitEffects: [],\n        combatMessages: [],\n      };\n\n    case \"SET_PLAYER_LATERALITY\":\n      return { ...state, playerLaterality: action.payload };\n\n    case \"SET_PLAYER_LATERALITY_INDEX\":\n      const newLaterality: [StanceLaterality, StanceLaterality] = [...state.playerLaterality] as [StanceLaterality, StanceLaterality];\n      newLaterality[action.payload.index] = action.payload.laterality;\n      return { ...state, playerLaterality: newLaterality };\n\n    default:\n      return state;\n  }\n}\n\n/**\n * Combat state action creators\n */\nexport interface CombatActions {\n  readonly setHitEffects: (effects: HitEffect[]) => void;\n  readonly addHitEffect: (effect: HitEffect) => void;\n  readonly removeHitEffect: (effectId: string) => void;\n  readonly setExecutingTechnique: (executing: boolean) => void;\n  readonly addCombatMessage: (message: string) => void;\n  readonly setRoundStarted: (started: boolean) => void;\n  readonly setRoundEnded: (ended: boolean) => void;\n  readonly setRoundDisplayStatus: (status: \"start\" | \"fight\" | \"ko\" | \"end\" | null) => void;\n  readonly setComboCount: (count: number) => void;\n  readonly incrementCombo: () => void;\n  readonly resetCombo: () => void;\n  readonly setLastHitTime: (time: number) => void;\n  readonly setScreenShake: (shake: { x: number; y: number }) => void;\n  readonly resetScreenShake: () => void;\n  readonly resetRoundState: () => void;\n  readonly setPlayerLaterality: (laterality: readonly [StanceLaterality, StanceLaterality]) => void;\n  readonly setPlayerLateralityIndex: (index: 0 | 1, laterality: StanceLaterality) => void;\n}\n\n/**\n * Custom hook for combat state management\n */\nexport function useCombatState() {\n  const [state, dispatch] = useReducer(combatReducer, initialState);\n\n  const actions: CombatActions = {\n    setHitEffects: useCallback(\n      (effects: HitEffect[]) => dispatch({ type: \"SET_HIT_EFFECTS\", payload: effects }),\n      []\n    ),\n    addHitEffect: useCallback(\n      (effect: HitEffect) => dispatch({ type: \"ADD_HIT_EFFECT\", payload: effect }),\n      []\n    ),\n    removeHitEffect: useCallback(\n      (effectId: string) => dispatch({ type: \"REMOVE_HIT_EFFECT\", payload: effectId }),\n      []\n    ),\n    setExecutingTechnique: useCallback(\n      (executing: boolean) =>\n        dispatch({ type: \"SET_EXECUTING_TECHNIQUE\", payload: executing }),\n      []\n    ),\n    addCombatMessage: useCallback(\n      (message: string) => dispatch({ type: \"ADD_COMBAT_MESSAGE\", payload: message }),\n      []\n    ),\n    setRoundStarted: useCallback(\n      (started: boolean) => dispatch({ type: \"SET_ROUND_STARTED\", payload: started }),\n      []\n    ),\n    setRoundEnded: useCallback(\n      (ended: boolean) => dispatch({ type: \"SET_ROUND_ENDED\", payload: ended }),\n      []\n    ),\n    setRoundDisplayStatus: useCallback(\n      (status: \"start\" | \"fight\" | \"ko\" | \"end\" | null) =>\n        dispatch({ type: \"SET_ROUND_DISPLAY_STATUS\", payload: status }),\n      []\n    ),\n    setComboCount: useCallback(\n      (count: number) => dispatch({ type: \"SET_COMBO_COUNT\", payload: count }),\n      []\n    ),\n    incrementCombo: useCallback(() => dispatch({ type: \"INCREMENT_COMBO\" }), []),\n    resetCombo: useCallback(() => dispatch({ type: \"RESET_COMBO\" }), []),\n    setLastHitTime: useCallback(\n      (time: number) => dispatch({ type: \"SET_LAST_HIT_TIME\", payload: time }),\n      []\n    ),\n    setScreenShake: useCallback(\n      (shake: { x: number; y: number }) =>\n        dispatch({ type: \"SET_SCREEN_SHAKE\", payload: shake }),\n      []\n    ),\n    resetScreenShake: useCallback(() => dispatch({ type: \"RESET_SCREEN_SHAKE\" }), []),\n    resetRoundState: useCallback(() => dispatch({ type: \"RESET_ROUND_STATE\" }), []),\n    setPlayerLaterality: useCallback(\n      (laterality: readonly [StanceLaterality, StanceLaterality]) =>\n        dispatch({ type: \"SET_PLAYER_LATERALITY\", payload: laterality }),\n      []\n    ),\n    setPlayerLateralityIndex: useCallback(\n      (index: 0 | 1, laterality: StanceLaterality) =>\n        dispatch({ type: \"SET_PLAYER_LATERALITY_INDEX\", payload: { index, laterality } }),\n      []\n    ),\n  };\n\n  return { state, actions };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useCombatState.js","names":[],"sources":["../../../../../src/components/screens/combat/hooks/useCombatState.ts"],"sourcesContent":["/**\n * useCombatState Hook - Consolidated Combat State Management\n * \n * Custom hook for managing complex combat state using useReducer.\n * Consolidates multiple useState calls into a single reducer for better\n * performance and maintainability.\n *\n * Performance:\n * - Uses useReducer to batch state updates\n * - Reduces number of re-renders\n * - Provides clear action-based state updates\n *\n * @returns Combat state and dispatch actions\n * \n * @example\n * ```typescript\n * const { state, actions } = useCombatState();\n * actions.setHitEffects([effect1, effect2]);\n * actions.incrementCombo();\n * ```\n */\n\nimport { HitEffect } from \"@/systems\";\nimport type { StanceLaterality } from \"@/systems/trigram/types\";\nimport { useCallback, useReducer } from \"react\";\n\n/**\n * Combat screen state managed by the reducer\n * Note: Renamed from CombatState to avoid conflict with CombatState enum in types/common.ts\n */\nexport interface CombatScreenState {\n  readonly hitEffects: HitEffect[];\n  readonly isExecutingTechnique: boolean;\n  readonly combatMessages: string[];\n  readonly roundStarted: boolean;\n  readonly roundEnded: boolean;\n  readonly roundDisplayStatus: \"start\" | \"fight\" | \"ko\" | \"end\" | null;\n  readonly comboCount: number;\n  readonly lastHitTime: number;\n  readonly screenShake: { x: number; y: number };\n  readonly playerLaterality: readonly [StanceLaterality, StanceLaterality];\n}\n\n/**\n * Combat state actions\n */\ntype CombatAction =\n  | { type: \"SET_HIT_EFFECTS\"; payload: HitEffect[] }\n  | { type: \"ADD_HIT_EFFECT\"; payload: HitEffect }\n  | { type: \"REMOVE_HIT_EFFECT\"; payload: string }\n  | { type: \"SET_EXECUTING_TECHNIQUE\"; payload: boolean }\n  | { type: \"ADD_COMBAT_MESSAGE\"; payload: string }\n  | { type: \"SET_ROUND_STARTED\"; payload: boolean }\n  | { type: \"SET_ROUND_ENDED\"; payload: boolean }\n  | { type: \"SET_ROUND_DISPLAY_STATUS\"; payload: \"start\" | \"fight\" | \"ko\" | \"end\" | null }\n  | { type: \"SET_COMBO_COUNT\"; payload: number }\n  | { type: \"INCREMENT_COMBO\" }\n  | { type: \"RESET_COMBO\" }\n  | { type: \"SET_LAST_HIT_TIME\"; payload: number }\n  | { type: \"SET_SCREEN_SHAKE\"; payload: { x: number; y: number } }\n  | { type: \"RESET_SCREEN_SHAKE\" }\n  | { type: \"RESET_ROUND_STATE\" }\n  | { type: \"SET_PLAYER_LATERALITY\"; payload: readonly [StanceLaterality, StanceLaterality] }\n  | { type: \"SET_PLAYER_LATERALITY_INDEX\"; payload: { index: 0 | 1; laterality: StanceLaterality } };\n\n/**\n * Initial combat state\n */\nconst initialState: CombatScreenState = {\n  hitEffects: [],\n  isExecutingTechnique: false,\n  combatMessages: [],\n  roundStarted: false,\n  roundEnded: false,\n  roundDisplayStatus: null,\n  comboCount: 0,\n  lastHitTime: 0,\n  screenShake: { x: 0, y: 0 },\n  playerLaterality: [\"right\", \"right\"],\n};\n\n/**\n * Combat state reducer\n * Handles all combat state updates in a centralized, performant way\n */\nfunction combatReducer(state: CombatScreenState, action: CombatAction): CombatScreenState {\n  switch (action.type) {\n    case \"SET_HIT_EFFECTS\":\n      return { ...state, hitEffects: action.payload };\n\n    case \"ADD_HIT_EFFECT\":\n      return { ...state, hitEffects: [...state.hitEffects, action.payload] };\n\n    case \"REMOVE_HIT_EFFECT\":\n      return {\n        ...state,\n        hitEffects: state.hitEffects.filter((effect) => effect.id !== action.payload),\n      };\n\n    case \"SET_EXECUTING_TECHNIQUE\":\n      return { ...state, isExecutingTechnique: action.payload };\n\n    case \"ADD_COMBAT_MESSAGE\":\n      return {\n        ...state,\n        combatMessages: [action.payload, ...state.combatMessages.slice(0, 4)],\n      };\n\n    case \"SET_ROUND_STARTED\":\n      return { ...state, roundStarted: action.payload };\n\n    case \"SET_ROUND_ENDED\":\n      return { ...state, roundEnded: action.payload };\n\n    case \"SET_ROUND_DISPLAY_STATUS\":\n      return { ...state, roundDisplayStatus: action.payload };\n\n    case \"SET_COMBO_COUNT\":\n      return { ...state, comboCount: action.payload };\n\n    case \"INCREMENT_COMBO\":\n      return { ...state, comboCount: state.comboCount + 1 };\n\n    case \"RESET_COMBO\":\n      return { ...state, comboCount: 0 };\n\n    case \"SET_LAST_HIT_TIME\":\n      return { ...state, lastHitTime: action.payload };\n\n    case \"SET_SCREEN_SHAKE\":\n      return { ...state, screenShake: action.payload };\n\n    case \"RESET_SCREEN_SHAKE\":\n      return { ...state, screenShake: { x: 0, y: 0 } };\n\n    case \"RESET_ROUND_STATE\":\n      return {\n        ...state,\n        roundStarted: false,\n        roundEnded: false,\n        roundDisplayStatus: null,\n        comboCount: 0,\n        hitEffects: [],\n        combatMessages: [],\n      };\n\n    case \"SET_PLAYER_LATERALITY\":\n      return { ...state, playerLaterality: action.payload };\n\n    case \"SET_PLAYER_LATERALITY_INDEX\":\n      const newLaterality: [StanceLaterality, StanceLaterality] = [...state.playerLaterality] as [StanceLaterality, StanceLaterality];\n      newLaterality[action.payload.index] = action.payload.laterality;\n      return { ...state, playerLaterality: newLaterality };\n\n    default:\n      return state;\n  }\n}\n\n/**\n * Combat state action creators\n */\nexport interface CombatActions {\n  readonly setHitEffects: (effects: HitEffect[]) => void;\n  readonly addHitEffect: (effect: HitEffect) => void;\n  readonly removeHitEffect: (effectId: string) => void;\n  readonly setExecutingTechnique: (executing: boolean) => void;\n  readonly addCombatMessage: (message: string) => void;\n  readonly setRoundStarted: (started: boolean) => void;\n  readonly setRoundEnded: (ended: boolean) => void;\n  readonly setRoundDisplayStatus: (status: \"start\" | \"fight\" | \"ko\" | \"end\" | null) => void;\n  readonly setComboCount: (count: number) => void;\n  readonly incrementCombo: () => void;\n  readonly resetCombo: () => void;\n  readonly setLastHitTime: (time: number) => void;\n  readonly setScreenShake: (shake: { x: number; y: number }) => void;\n  readonly resetScreenShake: () => void;\n  readonly resetRoundState: () => void;\n  readonly setPlayerLaterality: (laterality: readonly [StanceLaterality, StanceLaterality]) => void;\n  readonly setPlayerLateralityIndex: (index: 0 | 1, laterality: StanceLaterality) => void;\n}\n\n/**\n * Custom hook for combat state management\n */\nexport function useCombatState() {\n  const [state, dispatch] = useReducer(combatReducer, initialState);\n\n  const actions: CombatActions = {\n    setHitEffects: useCallback(\n      (effects: HitEffect[]) => dispatch({ type: \"SET_HIT_EFFECTS\", payload: effects }),\n      []\n    ),\n    addHitEffect: useCallback(\n      (effect: HitEffect) => dispatch({ type: \"ADD_HIT_EFFECT\", payload: effect }),\n      []\n    ),\n    removeHitEffect: useCallback(\n      (effectId: string) => dispatch({ type: \"REMOVE_HIT_EFFECT\", payload: effectId }),\n      []\n    ),\n    setExecutingTechnique: useCallback(\n      (executing: boolean) =>\n        dispatch({ type: \"SET_EXECUTING_TECHNIQUE\", payload: executing }),\n      []\n    ),\n    addCombatMessage: useCallback(\n      (message: string) => dispatch({ type: \"ADD_COMBAT_MESSAGE\", payload: message }),\n      []\n    ),\n    setRoundStarted: useCallback(\n      (started: boolean) => dispatch({ type: \"SET_ROUND_STARTED\", payload: started }),\n      []\n    ),\n    setRoundEnded: useCallback(\n      (ended: boolean) => dispatch({ type: \"SET_ROUND_ENDED\", payload: ended }),\n      []\n    ),\n    setRoundDisplayStatus: useCallback(\n      (status: \"start\" | \"fight\" | \"ko\" | \"end\" | null) =>\n        dispatch({ type: \"SET_ROUND_DISPLAY_STATUS\", payload: status }),\n      []\n    ),\n    setComboCount: useCallback(\n      (count: number) => dispatch({ type: \"SET_COMBO_COUNT\", payload: count }),\n      []\n    ),\n    incrementCombo: useCallback(() => dispatch({ type: \"INCREMENT_COMBO\" }), []),\n    resetCombo: useCallback(() => dispatch({ type: \"RESET_COMBO\" }), []),\n    setLastHitTime: useCallback(\n      (time: number) => dispatch({ type: \"SET_LAST_HIT_TIME\", payload: time }),\n      []\n    ),\n    setScreenShake: useCallback(\n      (shake: { x: number; y: number }) =>\n        dispatch({ type: \"SET_SCREEN_SHAKE\", payload: shake }),\n      []\n    ),\n    resetScreenShake: useCallback(() => dispatch({ type: \"RESET_SCREEN_SHAKE\" }), []),\n    resetRoundState: useCallback(() => dispatch({ type: \"RESET_ROUND_STATE\" }), []),\n    setPlayerLaterality: useCallback(\n      (laterality: readonly [StanceLaterality, StanceLaterality]) =>\n        dispatch({ type: \"SET_PLAYER_LATERALITY\", payload: laterality }),\n      []\n    ),\n    setPlayerLateralityIndex: useCallback(\n      (index: 0 | 1, laterality: StanceLaterality) =>\n        dispatch({ type: \"SET_PLAYER_LATERALITY_INDEX\", payload: { index, laterality } }),\n      []\n    ),\n  };\n\n  return { state, actions };\n}\n"],"mappings":"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"}

package/lib/components/screens/controls/ControlsScreen3D.js

@@ -3,11 +3,11 @@ import { FONT_FAMILY } from "../../../types/constants/typography.js";
 import { Z_INDEX } from "../../../types/LayoutTypes.js";
 import { COMBAT_CONTROLS } from "../../../systems/types.js";
 import { useWebGLContextLossHandler } from "../../../hooks/useWebGLContextLossHandler.js";
+import { getLayoutConstants } from "../../../utils/responsiveLayoutHelpers.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 useWindowSize from "../../../hooks/useWindowSize.js";
 import { BackButton } from "../../shared/ui/BackButton.js";

package/lib/components/screens/controls/ControlsScreen3D.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlsScreen3D.js","names":[],"sources":["../../../../src/components/screens/controls/ControlsScreen3D.tsx"],"sourcesContent":["import { 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 { COMBAT_CONTROLS } from \"../../../systems\";\nimport { FONT_FAMILY } from \"@/types/constants\";\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 } from \"../../shared/ui/BackButton\";\nimport { VolumeControl } from \"../../shared/ui/VolumeControl\";\nimport { ControlBindingsOverlayHtml } from \"./components/ControlBindingsOverlayHtml\";\nimport { ControlCategoryTabs } from \"./components/ControlCategoryTabsOverlayHtml\";\nimport { GamepadVisualization3D } from \"./components/GamepadVisualization3D\";\nimport { InteractiveControlDemo } from \"./components/InteractiveControlDemoOverlayHtml\";\nimport { VisualKeyboard3D } from \"./components/VisualKeyboard3D\";\nimport { useControlsState } from \"./hooks/useControlsState\";\n\nexport interface ControlsScreen3DProps {\n  readonly onReturnToMenu: () => void;\n  readonly width?: number;\n  readonly height?: number;\n}\n\n/**\n * Three.js-based ControlsScreen Component\n */\nexport const ControlsScreen3D: React.FC<ControlsScreen3DProps> = ({\n  onReturnToMenu,\n  width: propWidth,\n  height: propHeight,\n}) => {\n\n  const { pressedKeys, category, selectedTab, setCategory, setSelectedTab } =\n    useControlsState();\n\n  useWebGLContextLossHandler({\n    onContextLost: () => {\n      console.warn(\"⚠️ WebGL context lost in ControlsScreen\");\n    },\n    onContextRestored: () => {\n      console.log(\"✓ WebGL context restored in ControlsScreen\");\n    },\n    autoRestore: true,\n  });\n\n  const audio = useAudio();\n  const { width, height } = useWindowSize();\n\n  const screenWidth = propWidth ?? width;\n  const screenHeight = propHeight ?? height;\n\n  const isMobile = shouldUseMobileControls();\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  const layoutConstants = useMemo(\n    () => getLayoutConstants(screenWidth),\n    [screenWidth],\n  );\n\n  const theme = useKoreanTheme({\n    variant: \"primary\",\n    size: \"md\",\n    isMobile,\n  });\n\n  const scrollbarStyle = useMemo(\n    () => ({\n      __html: `\n      .korean-scrollbar::-webkit-scrollbar {\n        width: 12px !important;\n        display: block !important;\n      }\n      .korean-scrollbar::-webkit-scrollbar-track {\n        background: ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n        border-radius: 6px;\n      }\n      .korean-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      .korean-scrollbar::-webkit-scrollbar-thumb:hover {\n        background: ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)};\n      }\n    `,\n    }),\n    [theme],\n  );\n\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_DARK, 0.8),\n      borderGold: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.6),\n      borderCyan: hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5),\n      borderRed: hexToRgbaString(theme.colors.KOREAN_RED, 0.8),\n      textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, \"0\")}`,\n      textSecondary: `#${theme.colors.TEXT_SECONDARY.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      koreanBlack: `#${theme.colors.KOREAN_BLACK.toString(16).padStart(6, \"0\")}`,\n    }),\n    [theme],\n  );\n\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  const handleBackClick = useCallback(() => {\n    audio.playSFX(\"menu_back\");\n    onReturnToMenu();\n  }, [audio, onReturnToMenu]);\n\n  const handleModeButtonEnter = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n      if (!isActive) {\n        e.currentTarget.style.background = hexToRgbaString(\n          theme.colors.PRIMARY_CYAN,\n          0.1,\n        );\n        e.currentTarget.style.borderColor = hexToRgbaString(\n          theme.colors.PRIMARY_CYAN,\n          0.8,\n        );\n      }\n    },\n    [theme],\n  );\n\n  const handleModeButtonLeave = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n      if (!isActive) {\n        e.currentTarget.style.background = hexToRgbaString(\n          theme.colors.UI_BACKGROUND_DARK,\n          0.8,\n        );\n        e.currentTarget.style.borderColor = hexToRgbaString(\n          theme.colors.ACCENT_GOLD,\n          0.6,\n        );\n      }\n    },\n    [theme],\n  );\n\n  const stanceControls = useMemo(\n    () => Object.entries(COMBAT_CONTROLS.stanceControls),\n    [],\n  );\n\n  const combatControls = useMemo(\n    () => Object.entries(COMBAT_CONTROLS.combat),\n    [],\n  );\n\n  const buttonsPerRow = isMobile ? 2 : isTablet ? 3 : isLargeDesktop ? 5 : 4;\n  const buttonHeight = isMobile\n    ? 120\n    : isTablet\n      ? 130\n      : isLargeDesktop\n        ? 120\n        : 140;\n\n  return (\n    <div\n      style={{\n        width: screenWidth,\n        height: screenHeight,\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"controls-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 and visualization */}\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=\"controls\" />\n\n        {/* Conditional 3D Visualization based on category */}\n        {category === \"keyboard\" ? (\n          <VisualKeyboard3D\n            pressedKeys={pressedKeys}\n            selectedTab={selectedTab}\n          />\n        ) : (\n          <GamepadVisualization3D isMobile={isMobile} />\n        )}\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=\"controls-hud-overlay\"\n      >\n        {/* WebKit Scrollbar Styling - Using !important to override global hide */}\n        <style dangerouslySetInnerHTML={scrollbarStyle} />\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.borderRed}`,\n              padding: `${layoutConstants.padding}px`,\n            }}\n            data-testid=\"controls-header\"\n          >\n            <h1\n              style={{\n                fontSize: isMobile ? \"20px\" : \"24px\",\n                fontWeight: \"bold\",\n                color: colors.accentGold,\n                margin: 0,\n                textShadow: `0 0 10px ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.5,\n                )}`,\n              }}\n            >\n              조작법 안내 - Controls Guide\n            </h1>\n            <p\n              style={{\n                fontSize: isMobile ? \"12px\" : \"16px\",\n                color: colors.accentCyan,\n                margin: \"8px 0 0 0\",\n                fontStyle: \"italic\",\n              }}\n            >\n              ☯ 팔괘 철학과 급소술의 융합 | Eight Trigrams Philosophy & Vital\n              Point Arts ☯\n            </p>\n          </div>\n\n          {/* Mode Toggle (Keyboard/Gamepad) */}\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              gap: isMobile ? \"10px\" : \"15px\",\n              padding: `${layoutConstants.padding}px`,\n              background: colors.headerBg,\n              borderBottom: `2px solid ${colors.borderGold}`,\n            }}\n            data-testid=\"mode-toggle\"\n          >\n            <button\n              onClick={() => {\n                audio.playSFX(\"menu_select\");\n                setCategory(\"keyboard\");\n              }}\n              style={{\n                padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n                borderRadius: \"8px\",\n                border: `2px solid ${category === \"keyboard\" ? colors.accentCyan : colors.borderGold}`,\n                background:\n                  category === \"keyboard\"\n                    ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n                    : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n                color:\n                  category === \"keyboard\"\n                    ? colors.accentCyan\n                    : colors.textSecondary,\n                fontFamily: FONT_FAMILY.KOREAN,\n                fontSize: isMobile ? \"14px\" : \"16px\",\n                fontWeight: \"bold\",\n                cursor: \"pointer\",\n                transition: \"all 0.2s ease\",\n              }}\n              data-testid=\"keyboard-mode-button\"\n              onMouseEnter={(e) =>\n                handleModeButtonEnter(e, category === \"keyboard\")\n              }\n              onMouseLeave={(e) =>\n                handleModeButtonLeave(e, category === \"keyboard\")\n              }\n            >\n              ⌨️ 키보드 | Keyboard\n            </button>\n            <button\n              onClick={() => {\n                audio.playSFX(\"menu_select\");\n                setCategory(\"gamepad\");\n              }}\n              style={{\n                padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n                borderRadius: \"8px\",\n                border: `2px solid ${category === \"gamepad\" ? colors.accentCyan : colors.borderGold}`,\n                background:\n                  category === \"gamepad\"\n                    ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n                    : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n                color:\n                  category === \"gamepad\"\n                    ? colors.accentCyan\n                    : colors.textSecondary,\n                fontFamily: FONT_FAMILY.KOREAN,\n                fontSize: isMobile ? \"14px\" : \"16px\",\n                fontWeight: \"bold\",\n                cursor: \"pointer\",\n                transition: \"all 0.2s ease\",\n              }}\n              data-testid=\"gamepad-mode-button\"\n              onMouseEnter={(e) =>\n                handleModeButtonEnter(e, category === \"gamepad\")\n              }\n              onMouseLeave={(e) =>\n                handleModeButtonLeave(e, category === \"gamepad\")\n              }\n            >\n              🎮 게임패드 | Gamepad\n            </button>\n          </div>\n\n          {/* Control Category Tabs */}\n          <div\n            style={{\n              background: colors.headerBg,\n              borderBottom: `2px solid ${colors.borderCyan}`,\n            }}\n          >\n            <ControlCategoryTabs\n              selectedTab={selectedTab}\n              onTabChange={(tab) => {\n                audio.playSFX(\"menu_select\");\n                setSelectedTab(tab);\n              }}\n              isMobile={isMobile}\n            />\n          </div>\n\n          {/* Content Area - Scrollable */}\n          <div\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            className=\"korean-scrollbar\"\n            data-testid=\"controls-content\"\n          >\n            {/* Control Bindings Display */}\n            <ControlBindingsOverlayHtml\n              selectedTab={selectedTab}\n              isMobile={isMobile}\n            />\n\n            {/* Legacy Content - Keeping for backward compatibility and additional info */}\n            {/* Trigram Stances Section - Additional context beyond key bindings */}\n            <div\n              style={{\n                marginTop: `${layoutConstants.sectionSpacing}px`,\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderGold}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"trigram-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                팔괘 무술 자세 - Eight Trigram Combat Stances\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"11px\" : \"14px\",\n                  color: colors.accentCyan,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                🗡️ 전통 한국 무예의 8가지 핵심 자세 | 8 Core Stances of\n                Traditional Korean Martial Arts 🗡️\n              </p>\n\n              {/* Stance Controls Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: `repeat(${buttonsPerRow}, 1fr)`,\n                  gap: \"15px\",\n                }}\n                data-testid=\"stance-controls-grid\"\n              >\n                {stanceControls.map(([key, value]) => (\n                  <div\n                    key={key}\n                    style={{\n                      background: `linear-gradient(135deg, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_MEDIUM,\n                        0.9,\n                      )}, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.9,\n                      )})`,\n                      borderRadius: \"10px\",\n                      border: `2px solid ${colors.borderGold}`,\n                      padding: \"12px\",\n                      position: \"relative\",\n                      minHeight: `${buttonHeight}px`,\n                    }}\n                    data-testid={`stance-control-${key}`}\n                  >\n                    {/* Key Badge */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        top: \"8px\",\n                        left: \"8px\",\n                        background: colors.accentGold,\n                        borderRadius: \"6px\",\n                        width: \"25px\",\n                        height: \"25px\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: isMobile ? \"14px\" : \"16px\",\n                        fontWeight: \"bold\",\n                        color: colors.koreanBlack,\n                      }}\n                    >\n                      {key}\n                    </div>\n\n                    {/* Trigram Symbol */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        top: \"8px\",\n                        right: \"8px\",\n                        fontSize: isMobile ? \"18px\" : \"22px\",\n                        color: colors.accentGold,\n                        fontWeight: \"bold\",\n                      }}\n                    >\n                      {value.symbol}\n                    </div>\n\n                    {/* Stance Name */}\n                    <div style={{ marginTop: \"35px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"12px\" : \"14px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {value.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.english}\n                      </div>\n                    </div>\n\n                    {/* Technique */}\n                    <div style={{ marginTop: \"8px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentCyan,\n                        }}\n                      >\n                        🥋 {value.technique.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          color: colors.accentCyan,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.technique.english}\n                      </div>\n                    </div>\n\n                    {/* Combat Focus */}\n                    <div style={{ marginTop: \"6px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          fontWeight: \"bold\",\n                          color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                            16,\n                          ).padStart(6, \"0\")}`,\n                        }}\n                      >\n                        ⚔️ {value.combatFocus.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                            16,\n                          ).padStart(6, \"0\")}`,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.combatFocus.english}\n                      </div>\n                    </div>\n\n                    {/* Combat Effects */}\n                    <div\n                      style={{\n                        marginTop: \"6px\",\n                        fontSize: isMobile ? \"7px\" : \"8px\",\n                        fontWeight: \"bold\",\n                        color: `#${theme.colors.NEGATIVE_RED.toString(\n                          16,\n                        ).padStart(6, \"0\")}`,\n                      }}\n                    >\n                      💥 {value.combatEffects.korean}\n                    </div>\n\n                    {/* Effectiveness Indicator */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        bottom: \"8px\",\n                        right: \"8px\",\n                        fontSize: isMobile ? \"7px\" : \"8px\",\n                        fontWeight: \"bold\",\n                        color: `#${theme.colors.KOREAN_RED.toString(\n                          16,\n                        ).padStart(6, \"0\")}`,\n                      }}\n                    >\n                      급소술\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Combat Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderCyan}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"combat-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentCyan,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                실전 격투 조작 - Combat Actions\n              </h2>\n\n              {/* Combat Controls List */}\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"10px\",\n                }}\n                data-testid=\"combat-controls-list\"\n              >\n                {combatControls.map(([key, description]) => (\n                  <div\n                    key={key}\n                    style={{\n                      background: `linear-gradient(90deg, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.9,\n                      )}, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_MEDIUM,\n                        0.9,\n                      )})`,\n                      borderRadius: \"8px\",\n                      border: `1px solid ${colors.borderCyan}`,\n                      padding: \"12px\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"15px\",\n                    }}\n                    data-testid={`combat-control-${key}`}\n                  >\n                    {/* Key Badge */}\n                    <div\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.ACCENT_CYAN,\n                          0.3,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"4px 12px\",\n                        fontSize: isMobile ? \"14px\" : \"16px\",\n                        fontWeight: \"bold\",\n                        color: colors.accentGold,\n                        minWidth: \"60px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      {key}\n                    </div>\n\n                    {/* Description */}\n                    <div style={{ flex: 1 }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"11px\" : \"13px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {description.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"11px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {description.english}\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Movement Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.SECONDARY_MAGENTA,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"movement-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                    16,\n                  ).padStart(6, \"0\")}`,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                이동 조작 - Movement Controls\n              </h2>\n\n              {/* Movement Keys */}\n              <div style={{ marginBottom: \"15px\" }}>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"12px\" : \"14px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  WASD 또는 방향키 | WASD or Arrow Keys\n                </div>\n                <div\n                  style={{\n                    display: \"grid\",\n                    gridTemplateColumns: isMobile\n                      ? \"1fr 1fr\"\n                      : \"1fr 1fr 1fr 1fr\",\n                    gap: \"8px\",\n                  }}\n                >\n                  {[\n                    { key: \"W/↑\", korean: \"전진\", english: \"Forward\" },\n                    { key: \"S/↓\", korean: \"후퇴\", english: \"Backward\" },\n                    { key: \"A/←\", korean: \"좌\", english: \"Left\" },\n                    { key: \"D/→\", korean: \"우\", english: \"Right\" },\n                  ].map((move) => (\n                    <div\n                      key={move.key}\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.UI_BACKGROUND_LIGHT,\n                          0.8,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"8px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"11px\" : \"13px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentCyan,\n                        }}\n                      >\n                        {move.key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          color: colors.textSecondary,\n                        }}\n                      >\n                        {move.korean} | {move.english}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n\n            {/* Advanced Footwork Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.PRIMARY_CYAN,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"advanced-footwork\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentCyan,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                고급 보법 - Advanced Footwork\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                🥋 전통 한국 무예 발놀림 기법 | Traditional Korean martial arts\n                footwork techniques\n              </p>\n\n              {/* Tactical Steps */}\n              <div style={{ marginBottom: \"20px\" }}>\n                <h3\n                  style={{\n                    fontSize: isMobile ? \"14px\" : \"16px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  ✅ 전술보법 (Shift + WASD) | Tactical Steps - IMPLEMENTED\n                </h3>\n                <p\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: colors.textSecondary,\n                    marginBottom: \"10px\",\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Precise 30cm repositioning • 300ms duration •\n                  Non-interruptible • 5 stamina cost\n                </p>\n                <div\n                  style={{\n                    display: \"grid\",\n                    gridTemplateColumns: isMobile\n                      ? \"1fr 1fr\"\n                      : \"repeat(4, 1fr)\",\n                    gap: \"8px\",\n                  }}\n                >\n                  {[\n                    {\n                      key: \"Shift+W\",\n                      korean: \"전진보법\",\n                      english: \"Forward Step\",\n                    },\n                    {\n                      key: \"Shift+S\",\n                      korean: \"후퇴보법\",\n                      english: \"Retreat Step\",\n                    },\n                    {\n                      key: \"Shift+A\",\n                      korean: \"좌측면보법\",\n                      english: \"Left Step\",\n                    },\n                    {\n                      key: \"Shift+D\",\n                      korean: \"우측면보법\",\n                      english: \"Right Step\",\n                    },\n                    {\n                      key: \"Shift+W+A\",\n                      korean: \"전좌측보법\",\n                      english: \"Forward-Left\",\n                    },\n                    {\n                      key: \"Shift+W+D\",\n                      korean: \"전우측보법\",\n                      english: \"Forward-Right\",\n                    },\n                    {\n                      key: \"Shift+S+A\",\n                      korean: \"후좌측보법\",\n                      english: \"Back-Left\",\n                    },\n                    {\n                      key: \"Shift+S+D\",\n                      korean: \"후우측보법\",\n                      english: \"Back-Right\",\n                    },\n                  ].map((step) => (\n                    <div\n                      key={step.key}\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.UI_BACKGROUND_LIGHT,\n                          0.8,\n                        ),\n                        borderRadius: \"6px\",\n                        border: `1px solid ${colors.borderCyan}`,\n                        padding: \"8px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentGold,\n                          marginBottom: \"4px\",\n                        }}\n                      >\n                        {step.key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {step.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"6px\" : \"7px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {step.english}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n\n              {/* Footwork Patterns */}\n              <div>\n                <h3\n                  style={{\n                    fontSize: isMobile ? \"14px\" : \"16px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  보법 패턴 (Ctrl + WASD) | Footwork Patterns\n                </h3>\n\n                {/* Circular Steps */}\n                <div style={{ marginBottom: \"12px\" }}>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      fontWeight: \"bold\",\n                      color: colors.textPrimary,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 원형보 (Wonhyeongbo) | Circular Step - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textSecondary,\n                      marginBottom: \"8px\",\n                      fontStyle: \"italic\",\n                    }}\n                  >\n                    Lateral movement while maintaining guard • 30cm distance •\n                    300ms\n                  </p>\n                  <div style={{ display: \"flex\", gap: \"8px\" }}>\n                    {[\n                      {\n                        key: \"Ctrl+A\",\n                        korean: \"원형보 좌\",\n                        english: \"Circular Left\",\n                      },\n                      {\n                        key: \"Ctrl+D\",\n                        korean: \"원형보 우\",\n                        english: \"Circular Right\",\n                      },\n                    ].map((move) => (\n                      <div\n                        key={move.key}\n                        style={{\n                          flex: 1,\n                          background: hexToRgbaString(\n                            theme.colors.ACCENT_CYAN,\n                            0.2,\n                          ),\n                          borderRadius: \"6px\",\n                          border: `1px solid ${colors.borderCyan}`,\n                          padding: \"8px\",\n                          textAlign: \"center\",\n                        }}\n                      >\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"10px\" : \"11px\",\n                            fontWeight: \"bold\",\n                            color: colors.accentGold,\n                          }}\n                        >\n                          {move.key}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"8px\" : \"9px\",\n                            color: colors.textPrimary,\n                          }}\n                        >\n                          {move.korean}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"7px\" : \"8px\",\n                            color: colors.textSecondary,\n                            fontStyle: \"italic\",\n                          }}\n                        >\n                          {move.english}\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Slide Steps */}\n                <div style={{ marginBottom: \"12px\" }}>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      fontWeight: \"bold\",\n                      color: colors.textPrimary,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 미끄럼보 (Mikkeureombo) | Slide Step - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textSecondary,\n                      marginBottom: \"8px\",\n                      fontStyle: \"italic\",\n                    }}\n                  >\n                    Both feet move together • 30cm distance • 200ms (faster!)\n                  </p>\n                  <div style={{ display: \"flex\", gap: \"8px\" }}>\n                    {[\n                      {\n                        key: \"Ctrl+W\",\n                        korean: \"미끄럼보 전\",\n                        english: \"Slide Forward\",\n                      },\n                      {\n                        key: \"Ctrl+S\",\n                        korean: \"미끄럼보 후\",\n                        english: \"Slide Back\",\n                      },\n                    ].map((move) => (\n                      <div\n                        key={move.key}\n                        style={{\n                          flex: 1,\n                          background: hexToRgbaString(\n                            theme.colors.ACCENT_CYAN,\n                            0.2,\n                          ),\n                          borderRadius: \"6px\",\n                          border: `1px solid ${colors.borderCyan}`,\n                          padding: \"8px\",\n                          textAlign: \"center\",\n                        }}\n                      >\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"10px\" : \"11px\",\n                            fontWeight: \"bold\",\n                            color: colors.accentGold,\n                          }}\n                        >\n                          {move.key}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"8px\" : \"9px\",\n                            color: colors.textPrimary,\n                          }}\n                        >\n                          {move.korean}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"7px\" : \"8px\",\n                            color: colors.textSecondary,\n                            fontStyle: \"italic\",\n                          }}\n                        >\n                          {move.english}\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Pending Footwork */}\n                <div\n                  style={{\n                    marginTop: \"15px\",\n                    padding: \"10px\",\n                    background: hexToRgbaString(theme.colors.ACCENT_CYAN, 0.2),\n                    borderRadius: \"6px\",\n                    border: `1px solid ${colors.borderCyan}`,\n                  }}\n                >\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"10px\" : \"11px\",\n                      fontWeight: \"bold\",\n                      color: colors.accentGold,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 추가 보법 (Advanced Patterns) - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textPrimary,\n                      margin: \"0 0 6px 0\",\n                    }}\n                  >\n                    <strong>축족회전 (Chukjok Hoejeon) | Pivot</strong>:\n                    Shift+Ctrl+A (left) / Shift+Ctrl+D (right) • 90° rotation on\n                    planted foot • 250ms\n                  </p>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textPrimary,\n                      margin: 0,\n                    }}\n                  >\n                    <strong>섞음보 (Seokkeumbo) | Shuffle</strong>: Shift+Ctrl+W\n                    or Shift+Ctrl+S • 15cm micro-adjustment • 100ms\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            {/* Stance Side Switch Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"stance-side-switch\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                자세 발 바꿈 - Stance Side Switch\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                ✅ 전방 발 전환 | Switch front foot position - IMPLEMENTED\n              </p>\n\n              <div\n                style={{\n                  background: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.2),\n                  borderRadius: \"6px\",\n                  border: `1px solid ${colors.borderGold}`,\n                  padding: \"12px\",\n                  textAlign: \"center\",\n                }}\n              >\n                <div\n                  style={{\n                    fontSize: isMobile ? \"16px\" : \"18px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"8px\",\n                  }}\n                >\n                  H\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"10px\" : \"11px\",\n                    color: colors.textPrimary,\n                    marginBottom: \"4px\",\n                  }}\n                >\n                  발 바꿈 (Bal Bakkum)\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: colors.textSecondary,\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Switch Front Foot\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"7px\" : \"8px\",\n                    color: colors.textSecondary,\n                    marginTop: \"6px\",\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Mirrors your stance (left ↔ right) • 400ms duration\n                </div>\n              </div>\n            </div>\n\n            {/* Technique Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.6,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"technique-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                기술 실행 - Technique Execution\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                ⚡ 원형별 고유 기술 (최대 10개) | Archetype-specific techniques\n                (up to 10)\n              </p>\n\n              {/* Technique Keys Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: isMobile\n                    ? \"repeat(5, 1fr)\"\n                    : \"repeat(10, 1fr)\",\n                  gap: isMobile ? \"6px\" : \"8px\",\n                }}\n              >\n                {[\"Q\", \"E\", \"R\", \"T\", \"Y\", \"F\", \"G\", \"Z\", \"X\", \"C\"].map(\n                  (key, index) => (\n                    <div\n                      key={key}\n                      style={{\n                        background: `linear-gradient(135deg, ${hexToRgbaString(\n                          theme.colors.ACCENT_GOLD,\n                          0.3,\n                        )}, ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.1)})`,\n                        borderRadius: \"6px\",\n                        border: `2px solid ${colors.borderGold}`,\n                        padding: isMobile ? \"8px 4px\" : \"10px 6px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"14px\" : \"16px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentGold,\n                        }}\n                      >\n                        {key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: colors.textSecondary,\n                          marginTop: \"2px\",\n                        }}\n                      >\n                        기술 {index + 1}\n                      </div>\n                    </div>\n                  ),\n                )}\n              </div>\n\n              {/* Technique Notes */}\n              <div\n                style={{\n                  marginTop: \"15px\",\n                  padding: \"10px\",\n                  background: hexToRgbaString(\n                    theme.colors.UI_BACKGROUND_DARK,\n                    0.6,\n                  ),\n                  borderRadius: \"6px\",\n                  fontSize: isMobile ? \"9px\" : \"10px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                }}\n              >\n                💡 <strong>Tip</strong>: Keys positioned around WASD for easy\n                access without interfering with movement. Each archetype has\n                unique techniques.\n              </div>\n            </div>\n\n            {/* Special Features Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderRed}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"special-features\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: `#${theme.colors.KOREAN_RED.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                특수 기능 - Special Features\n              </h2>\n\n              {/* Special Keys List */}\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"10px\",\n                }}\n              >\n                {[\n                  {\n                    key: \"V\",\n                    korean: \"급소 표시 전환\",\n                    english: \"Toggle vital points overlay (70 points)\",\n                  },\n                  {\n                    key: \"B\",\n                    korean: \"방어 자세\",\n                    english: \"Defensive guard position\",\n                  },\n                  {\n                    key: \"F1\",\n                    korean: \"조작법 힌트\",\n                    english: \"Show control hints\",\n                  },\n                  {\n                    key: \"ESC / M\",\n                    korean: \"일시정지 / 메뉴\",\n                    english: \"Pause menu / Return to menu\",\n                  },\n                ].map((special) => (\n                  <div\n                    key={special.key}\n                    style={{\n                      background: hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.8,\n                      ),\n                      borderRadius: \"8px\",\n                      border: `1px solid ${colors.borderRed}`,\n                      padding: \"10px\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"12px\",\n                    }}\n                  >\n                    <div\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.KOREAN_RED,\n                          0.3,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"4px 10px\",\n                        fontSize: isMobile ? \"12px\" : \"14px\",\n                        fontWeight: \"bold\",\n                        color: colors.accentGold,\n                        minWidth: \"50px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      {special.key}\n                    </div>\n                    <div style={{ flex: 1 }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"10px\" : \"12px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {special.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"10px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {special.english}\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Interactive Control Demo - Shows recently pressed keys */}\n          <InteractiveControlDemo\n            pressedKeys={pressedKeys}\n            isMobile={isMobile}\n          />\n\n          {/* Footer */}\n          <div\n            style={{\n              height: `${layoutConstants.footerHeight}px`,\n              background: colors.headerBg,\n              borderTop: `3px solid ${colors.borderRed}`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: `0 ${layoutConstants.padding}px`,\n            }}\n            data-testid=\"controls-footer\"\n          >\n            {/* Philosophy Text */}\n            <div\n              style={{\n                fontSize: isMobile ? \"10px\" : \"12px\",\n                color: colors.accentGold,\n                fontStyle: \"italic\",\n              }}\n            >\n              🥋 흑괘의 길을 걸어라 | Walk the Path of the Black Trigram 🥋\n            </div>\n\n            {/* Back Button */}\n            <BackButton\n              onClick={handleBackClick}\n              korean=\"무도장 복귀\"\n              english=\"Return to Dojang\"\n              isMobile={isMobile}\n              testId=\"controls-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(16).padStart(\n                  6,\n                  \"0\",\n                )}`,\n                border: `1px solid ${colors.borderGold}`,\n              }}\n              data-testid=\"keyboard-shortcuts\"\n            >\n              ESC | M\n            </div>\n          </div>\n\n          {/* Footer Instruction */}\n          <div\n            style={{\n              textAlign: \"center\",\n              padding: \"10px\",\n              fontSize: isMobile ? \"10px\" : \"12px\",\n              color: colors.textSecondary,\n              fontStyle: \"italic\",\n              background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.7),\n            }}\n          >\n            ESC 또는 M 키로 메뉴로 돌아가기 - Press ESC or M to return to menu\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ControlsScreen3D;\n"],"mappings":"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"}
+{"version":3,"file":"ControlsScreen3D.js","names":[],"sources":["../../../../src/components/screens/controls/ControlsScreen3D.tsx"],"sourcesContent":["import { 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 { COMBAT_CONTROLS } from \"../../../systems\";\nimport { FONT_FAMILY } from \"@/types/constants\";\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 } from \"../../shared/ui/BackButton\";\nimport { VolumeControl } from \"../../shared/ui/VolumeControl\";\nimport { ControlBindingsOverlayHtml } from \"./components/ControlBindingsOverlayHtml\";\nimport { ControlCategoryTabs } from \"./components/ControlCategoryTabsOverlayHtml\";\nimport { GamepadVisualization3D } from \"./components/GamepadVisualization3D\";\nimport { InteractiveControlDemo } from \"./components/InteractiveControlDemoOverlayHtml\";\nimport { VisualKeyboard3D } from \"./components/VisualKeyboard3D\";\nimport { useControlsState } from \"./hooks/useControlsState\";\n\nexport interface ControlsScreen3DProps {\n  readonly onReturnToMenu: () => void;\n  readonly width?: number;\n  readonly height?: number;\n}\n\n/**\n * Three.js-based ControlsScreen Component\n */\nexport const ControlsScreen3D: React.FC<ControlsScreen3DProps> = ({\n  onReturnToMenu,\n  width: propWidth,\n  height: propHeight,\n}) => {\n\n  const { pressedKeys, category, selectedTab, setCategory, setSelectedTab } =\n    useControlsState();\n\n  useWebGLContextLossHandler({\n    onContextLost: () => {\n      console.warn(\"⚠️ WebGL context lost in ControlsScreen\");\n    },\n    onContextRestored: () => {\n      console.log(\"✓ WebGL context restored in ControlsScreen\");\n    },\n    autoRestore: true,\n  });\n\n  const audio = useAudio();\n  const { width, height } = useWindowSize();\n\n  const screenWidth = propWidth ?? width;\n  const screenHeight = propHeight ?? height;\n\n  const isMobile = shouldUseMobileControls();\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  const layoutConstants = useMemo(\n    () => getLayoutConstants(screenWidth),\n    [screenWidth],\n  );\n\n  const theme = useKoreanTheme({\n    variant: \"primary\",\n    size: \"md\",\n    isMobile,\n  });\n\n  const scrollbarStyle = useMemo(\n    () => ({\n      __html: `\n      .korean-scrollbar::-webkit-scrollbar {\n        width: 12px !important;\n        display: block !important;\n      }\n      .korean-scrollbar::-webkit-scrollbar-track {\n        background: ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n        border-radius: 6px;\n      }\n      .korean-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      .korean-scrollbar::-webkit-scrollbar-thumb:hover {\n        background: ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)};\n      }\n    `,\n    }),\n    [theme],\n  );\n\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_DARK, 0.8),\n      borderGold: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.6),\n      borderCyan: hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5),\n      borderRed: hexToRgbaString(theme.colors.KOREAN_RED, 0.8),\n      textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, \"0\")}`,\n      textSecondary: `#${theme.colors.TEXT_SECONDARY.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      koreanBlack: `#${theme.colors.KOREAN_BLACK.toString(16).padStart(6, \"0\")}`,\n    }),\n    [theme],\n  );\n\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  const handleBackClick = useCallback(() => {\n    audio.playSFX(\"menu_back\");\n    onReturnToMenu();\n  }, [audio, onReturnToMenu]);\n\n  const handleModeButtonEnter = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n      if (!isActive) {\n        e.currentTarget.style.background = hexToRgbaString(\n          theme.colors.PRIMARY_CYAN,\n          0.1,\n        );\n        e.currentTarget.style.borderColor = hexToRgbaString(\n          theme.colors.PRIMARY_CYAN,\n          0.8,\n        );\n      }\n    },\n    [theme],\n  );\n\n  const handleModeButtonLeave = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n      if (!isActive) {\n        e.currentTarget.style.background = hexToRgbaString(\n          theme.colors.UI_BACKGROUND_DARK,\n          0.8,\n        );\n        e.currentTarget.style.borderColor = hexToRgbaString(\n          theme.colors.ACCENT_GOLD,\n          0.6,\n        );\n      }\n    },\n    [theme],\n  );\n\n  const stanceControls = useMemo(\n    () => Object.entries(COMBAT_CONTROLS.stanceControls),\n    [],\n  );\n\n  const combatControls = useMemo(\n    () => Object.entries(COMBAT_CONTROLS.combat),\n    [],\n  );\n\n  const buttonsPerRow = isMobile ? 2 : isTablet ? 3 : isLargeDesktop ? 5 : 4;\n  const buttonHeight = isMobile\n    ? 120\n    : isTablet\n      ? 130\n      : isLargeDesktop\n        ? 120\n        : 140;\n\n  return (\n    <div\n      style={{\n        width: screenWidth,\n        height: screenHeight,\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"controls-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 and visualization */}\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=\"controls\" />\n\n        {/* Conditional 3D Visualization based on category */}\n        {category === \"keyboard\" ? (\n          <VisualKeyboard3D\n            pressedKeys={pressedKeys}\n            selectedTab={selectedTab}\n          />\n        ) : (\n          <GamepadVisualization3D isMobile={isMobile} />\n        )}\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=\"controls-hud-overlay\"\n      >\n        {/* WebKit Scrollbar Styling - Using !important to override global hide */}\n        <style dangerouslySetInnerHTML={scrollbarStyle} />\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.borderRed}`,\n              padding: `${layoutConstants.padding}px`,\n            }}\n            data-testid=\"controls-header\"\n          >\n            <h1\n              style={{\n                fontSize: isMobile ? \"20px\" : \"24px\",\n                fontWeight: \"bold\",\n                color: colors.accentGold,\n                margin: 0,\n                textShadow: `0 0 10px ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.5,\n                )}`,\n              }}\n            >\n              조작법 안내 - Controls Guide\n            </h1>\n            <p\n              style={{\n                fontSize: isMobile ? \"12px\" : \"16px\",\n                color: colors.accentCyan,\n                margin: \"8px 0 0 0\",\n                fontStyle: \"italic\",\n              }}\n            >\n              ☯ 팔괘 철학과 급소술의 융합 | Eight Trigrams Philosophy & Vital\n              Point Arts ☯\n            </p>\n          </div>\n\n          {/* Mode Toggle (Keyboard/Gamepad) */}\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              gap: isMobile ? \"10px\" : \"15px\",\n              padding: `${layoutConstants.padding}px`,\n              background: colors.headerBg,\n              borderBottom: `2px solid ${colors.borderGold}`,\n            }}\n            data-testid=\"mode-toggle\"\n          >\n            <button\n              onClick={() => {\n                audio.playSFX(\"menu_select\");\n                setCategory(\"keyboard\");\n              }}\n              style={{\n                padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n                borderRadius: \"8px\",\n                border: `2px solid ${category === \"keyboard\" ? colors.accentCyan : colors.borderGold}`,\n                background:\n                  category === \"keyboard\"\n                    ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n                    : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n                color:\n                  category === \"keyboard\"\n                    ? colors.accentCyan\n                    : colors.textSecondary,\n                fontFamily: FONT_FAMILY.KOREAN,\n                fontSize: isMobile ? \"14px\" : \"16px\",\n                fontWeight: \"bold\",\n                cursor: \"pointer\",\n                transition: \"all 0.2s ease\",\n              }}\n              data-testid=\"keyboard-mode-button\"\n              onMouseEnter={(e) =>\n                handleModeButtonEnter(e, category === \"keyboard\")\n              }\n              onMouseLeave={(e) =>\n                handleModeButtonLeave(e, category === \"keyboard\")\n              }\n            >\n              ⌨️ 키보드 | Keyboard\n            </button>\n            <button\n              onClick={() => {\n                audio.playSFX(\"menu_select\");\n                setCategory(\"gamepad\");\n              }}\n              style={{\n                padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n                borderRadius: \"8px\",\n                border: `2px solid ${category === \"gamepad\" ? colors.accentCyan : colors.borderGold}`,\n                background:\n                  category === \"gamepad\"\n                    ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n                    : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n                color:\n                  category === \"gamepad\"\n                    ? colors.accentCyan\n                    : colors.textSecondary,\n                fontFamily: FONT_FAMILY.KOREAN,\n                fontSize: isMobile ? \"14px\" : \"16px\",\n                fontWeight: \"bold\",\n                cursor: \"pointer\",\n                transition: \"all 0.2s ease\",\n              }}\n              data-testid=\"gamepad-mode-button\"\n              onMouseEnter={(e) =>\n                handleModeButtonEnter(e, category === \"gamepad\")\n              }\n              onMouseLeave={(e) =>\n                handleModeButtonLeave(e, category === \"gamepad\")\n              }\n            >\n              🎮 게임패드 | Gamepad\n            </button>\n          </div>\n\n          {/* Control Category Tabs */}\n          <div\n            style={{\n              background: colors.headerBg,\n              borderBottom: `2px solid ${colors.borderCyan}`,\n            }}\n          >\n            <ControlCategoryTabs\n              selectedTab={selectedTab}\n              onTabChange={(tab) => {\n                audio.playSFX(\"menu_select\");\n                setSelectedTab(tab);\n              }}\n              isMobile={isMobile}\n            />\n          </div>\n\n          {/* Content Area - Scrollable */}\n          <div\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            className=\"korean-scrollbar\"\n            data-testid=\"controls-content\"\n          >\n            {/* Control Bindings Display */}\n            <ControlBindingsOverlayHtml\n              selectedTab={selectedTab}\n              isMobile={isMobile}\n            />\n\n            {/* Legacy Content - Keeping for backward compatibility and additional info */}\n            {/* Trigram Stances Section - Additional context beyond key bindings */}\n            <div\n              style={{\n                marginTop: `${layoutConstants.sectionSpacing}px`,\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderGold}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"trigram-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                팔괘 무술 자세 - Eight Trigram Combat Stances\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"11px\" : \"14px\",\n                  color: colors.accentCyan,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                🗡️ 전통 한국 무예의 8가지 핵심 자세 | 8 Core Stances of\n                Traditional Korean Martial Arts 🗡️\n              </p>\n\n              {/* Stance Controls Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: `repeat(${buttonsPerRow}, 1fr)`,\n                  gap: \"15px\",\n                }}\n                data-testid=\"stance-controls-grid\"\n              >\n                {stanceControls.map(([key, value]) => (\n                  <div\n                    key={key}\n                    style={{\n                      background: `linear-gradient(135deg, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_MEDIUM,\n                        0.9,\n                      )}, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.9,\n                      )})`,\n                      borderRadius: \"10px\",\n                      border: `2px solid ${colors.borderGold}`,\n                      padding: \"12px\",\n                      position: \"relative\",\n                      minHeight: `${buttonHeight}px`,\n                    }}\n                    data-testid={`stance-control-${key}`}\n                  >\n                    {/* Key Badge */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        top: \"8px\",\n                        left: \"8px\",\n                        background: colors.accentGold,\n                        borderRadius: \"6px\",\n                        width: \"25px\",\n                        height: \"25px\",\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        fontSize: isMobile ? \"14px\" : \"16px\",\n                        fontWeight: \"bold\",\n                        color: colors.koreanBlack,\n                      }}\n                    >\n                      {key}\n                    </div>\n\n                    {/* Trigram Symbol */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        top: \"8px\",\n                        right: \"8px\",\n                        fontSize: isMobile ? \"18px\" : \"22px\",\n                        color: colors.accentGold,\n                        fontWeight: \"bold\",\n                      }}\n                    >\n                      {value.symbol}\n                    </div>\n\n                    {/* Stance Name */}\n                    <div style={{ marginTop: \"35px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"12px\" : \"14px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {value.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.english}\n                      </div>\n                    </div>\n\n                    {/* Technique */}\n                    <div style={{ marginTop: \"8px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentCyan,\n                        }}\n                      >\n                        🥋 {value.technique.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          color: colors.accentCyan,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.technique.english}\n                      </div>\n                    </div>\n\n                    {/* Combat Focus */}\n                    <div style={{ marginTop: \"6px\" }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          fontWeight: \"bold\",\n                          color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                            16,\n                          ).padStart(6, \"0\")}`,\n                        }}\n                      >\n                        ⚔️ {value.combatFocus.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                            16,\n                          ).padStart(6, \"0\")}`,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {value.combatFocus.english}\n                      </div>\n                    </div>\n\n                    {/* Combat Effects */}\n                    <div\n                      style={{\n                        marginTop: \"6px\",\n                        fontSize: isMobile ? \"7px\" : \"8px\",\n                        fontWeight: \"bold\",\n                        color: `#${theme.colors.NEGATIVE_RED.toString(\n                          16,\n                        ).padStart(6, \"0\")}`,\n                      }}\n                    >\n                      💥 {value.combatEffects.korean}\n                    </div>\n\n                    {/* Effectiveness Indicator */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        bottom: \"8px\",\n                        right: \"8px\",\n                        fontSize: isMobile ? \"7px\" : \"8px\",\n                        fontWeight: \"bold\",\n                        color: `#${theme.colors.KOREAN_RED.toString(\n                          16,\n                        ).padStart(6, \"0\")}`,\n                      }}\n                    >\n                      급소술\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Combat Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderCyan}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"combat-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentCyan,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                실전 격투 조작 - Combat Actions\n              </h2>\n\n              {/* Combat Controls List */}\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"10px\",\n                }}\n                data-testid=\"combat-controls-list\"\n              >\n                {combatControls.map(([key, description]) => (\n                  <div\n                    key={key}\n                    style={{\n                      background: `linear-gradient(90deg, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.9,\n                      )}, ${hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_MEDIUM,\n                        0.9,\n                      )})`,\n                      borderRadius: \"8px\",\n                      border: `1px solid ${colors.borderCyan}`,\n                      padding: \"12px\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"15px\",\n                    }}\n                    data-testid={`combat-control-${key}`}\n                  >\n                    {/* Key Badge */}\n                    <div\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.ACCENT_CYAN,\n                          0.3,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"4px 12px\",\n                        fontSize: isMobile ? \"14px\" : \"16px\",\n                        fontWeight: \"bold\",\n                        color: colors.accentGold,\n                        minWidth: \"60px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      {key}\n                    </div>\n\n                    {/* Description */}\n                    <div style={{ flex: 1 }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"11px\" : \"13px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {description.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"11px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {description.english}\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            {/* Movement Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.SECONDARY_MAGENTA,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"movement-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n                    16,\n                  ).padStart(6, \"0\")}`,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                이동 조작 - Movement Controls\n              </h2>\n\n              {/* Movement Keys */}\n              <div style={{ marginBottom: \"15px\" }}>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"12px\" : \"14px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  WASD 또는 방향키 | WASD or Arrow Keys\n                </div>\n                <div\n                  style={{\n                    display: \"grid\",\n                    gridTemplateColumns: isMobile\n                      ? \"1fr 1fr\"\n                      : \"1fr 1fr 1fr 1fr\",\n                    gap: \"8px\",\n                  }}\n                >\n                  {[\n                    { key: \"W/↑\", korean: \"전진\", english: \"Forward\" },\n                    { key: \"S/↓\", korean: \"후퇴\", english: \"Backward\" },\n                    { key: \"A/←\", korean: \"좌\", english: \"Left\" },\n                    { key: \"D/→\", korean: \"우\", english: \"Right\" },\n                  ].map((move) => (\n                    <div\n                      key={move.key}\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.UI_BACKGROUND_LIGHT,\n                          0.8,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"8px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"11px\" : \"13px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentCyan,\n                        }}\n                      >\n                        {move.key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"9px\",\n                          color: colors.textSecondary,\n                        }}\n                      >\n                        {move.korean} | {move.english}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n\n            {/* Advanced Footwork Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.PRIMARY_CYAN,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"advanced-footwork\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentCyan,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                고급 보법 - Advanced Footwork\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                🥋 전통 한국 무예 발놀림 기법 | Traditional Korean martial arts\n                footwork techniques\n              </p>\n\n              {/* Tactical Steps */}\n              <div style={{ marginBottom: \"20px\" }}>\n                <h3\n                  style={{\n                    fontSize: isMobile ? \"14px\" : \"16px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  ✅ 전술보법 (Shift + WASD) | Tactical Steps - IMPLEMENTED\n                </h3>\n                <p\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: colors.textSecondary,\n                    marginBottom: \"10px\",\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Precise 30cm repositioning • 300ms duration •\n                  Non-interruptible • 5 stamina cost\n                </p>\n                <div\n                  style={{\n                    display: \"grid\",\n                    gridTemplateColumns: isMobile\n                      ? \"1fr 1fr\"\n                      : \"repeat(4, 1fr)\",\n                    gap: \"8px\",\n                  }}\n                >\n                  {[\n                    {\n                      key: \"Shift+W\",\n                      korean: \"전진보법\",\n                      english: \"Forward Step\",\n                    },\n                    {\n                      key: \"Shift+S\",\n                      korean: \"후퇴보법\",\n                      english: \"Retreat Step\",\n                    },\n                    {\n                      key: \"Shift+A\",\n                      korean: \"좌측면보법\",\n                      english: \"Left Step\",\n                    },\n                    {\n                      key: \"Shift+D\",\n                      korean: \"우측면보법\",\n                      english: \"Right Step\",\n                    },\n                    {\n                      key: \"Shift+W+A\",\n                      korean: \"전좌측보법\",\n                      english: \"Forward-Left\",\n                    },\n                    {\n                      key: \"Shift+W+D\",\n                      korean: \"전우측보법\",\n                      english: \"Forward-Right\",\n                    },\n                    {\n                      key: \"Shift+S+A\",\n                      korean: \"후좌측보법\",\n                      english: \"Back-Left\",\n                    },\n                    {\n                      key: \"Shift+S+D\",\n                      korean: \"후우측보법\",\n                      english: \"Back-Right\",\n                    },\n                  ].map((step) => (\n                    <div\n                      key={step.key}\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.UI_BACKGROUND_LIGHT,\n                          0.8,\n                        ),\n                        borderRadius: \"6px\",\n                        border: `1px solid ${colors.borderCyan}`,\n                        padding: \"8px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"9px\" : \"10px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentGold,\n                          marginBottom: \"4px\",\n                        }}\n                      >\n                        {step.key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {step.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"6px\" : \"7px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {step.english}\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n\n              {/* Footwork Patterns */}\n              <div>\n                <h3\n                  style={{\n                    fontSize: isMobile ? \"14px\" : \"16px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"10px\",\n                  }}\n                >\n                  보법 패턴 (Ctrl + WASD) | Footwork Patterns\n                </h3>\n\n                {/* Circular Steps */}\n                <div style={{ marginBottom: \"12px\" }}>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      fontWeight: \"bold\",\n                      color: colors.textPrimary,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 원형보 (Wonhyeongbo) | Circular Step - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textSecondary,\n                      marginBottom: \"8px\",\n                      fontStyle: \"italic\",\n                    }}\n                  >\n                    Lateral movement while maintaining guard • 30cm distance •\n                    300ms\n                  </p>\n                  <div style={{ display: \"flex\", gap: \"8px\" }}>\n                    {[\n                      {\n                        key: \"Ctrl+A\",\n                        korean: \"원형보 좌\",\n                        english: \"Circular Left\",\n                      },\n                      {\n                        key: \"Ctrl+D\",\n                        korean: \"원형보 우\",\n                        english: \"Circular Right\",\n                      },\n                    ].map((move) => (\n                      <div\n                        key={move.key}\n                        style={{\n                          flex: 1,\n                          background: hexToRgbaString(\n                            theme.colors.ACCENT_CYAN,\n                            0.2,\n                          ),\n                          borderRadius: \"6px\",\n                          border: `1px solid ${colors.borderCyan}`,\n                          padding: \"8px\",\n                          textAlign: \"center\",\n                        }}\n                      >\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"10px\" : \"11px\",\n                            fontWeight: \"bold\",\n                            color: colors.accentGold,\n                          }}\n                        >\n                          {move.key}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"8px\" : \"9px\",\n                            color: colors.textPrimary,\n                          }}\n                        >\n                          {move.korean}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"7px\" : \"8px\",\n                            color: colors.textSecondary,\n                            fontStyle: \"italic\",\n                          }}\n                        >\n                          {move.english}\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Slide Steps */}\n                <div style={{ marginBottom: \"12px\" }}>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      fontWeight: \"bold\",\n                      color: colors.textPrimary,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 미끄럼보 (Mikkeureombo) | Slide Step - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textSecondary,\n                      marginBottom: \"8px\",\n                      fontStyle: \"italic\",\n                    }}\n                  >\n                    Both feet move together • 30cm distance • 200ms (faster!)\n                  </p>\n                  <div style={{ display: \"flex\", gap: \"8px\" }}>\n                    {[\n                      {\n                        key: \"Ctrl+W\",\n                        korean: \"미끄럼보 전\",\n                        english: \"Slide Forward\",\n                      },\n                      {\n                        key: \"Ctrl+S\",\n                        korean: \"미끄럼보 후\",\n                        english: \"Slide Back\",\n                      },\n                    ].map((move) => (\n                      <div\n                        key={move.key}\n                        style={{\n                          flex: 1,\n                          background: hexToRgbaString(\n                            theme.colors.ACCENT_CYAN,\n                            0.2,\n                          ),\n                          borderRadius: \"6px\",\n                          border: `1px solid ${colors.borderCyan}`,\n                          padding: \"8px\",\n                          textAlign: \"center\",\n                        }}\n                      >\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"10px\" : \"11px\",\n                            fontWeight: \"bold\",\n                            color: colors.accentGold,\n                          }}\n                        >\n                          {move.key}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"8px\" : \"9px\",\n                            color: colors.textPrimary,\n                          }}\n                        >\n                          {move.korean}\n                        </div>\n                        <div\n                          style={{\n                            fontSize: isMobile ? \"7px\" : \"8px\",\n                            color: colors.textSecondary,\n                            fontStyle: \"italic\",\n                          }}\n                        >\n                          {move.english}\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Pending Footwork */}\n                <div\n                  style={{\n                    marginTop: \"15px\",\n                    padding: \"10px\",\n                    background: hexToRgbaString(theme.colors.ACCENT_CYAN, 0.2),\n                    borderRadius: \"6px\",\n                    border: `1px solid ${colors.borderCyan}`,\n                  }}\n                >\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"10px\" : \"11px\",\n                      fontWeight: \"bold\",\n                      color: colors.accentGold,\n                      marginBottom: \"6px\",\n                    }}\n                  >\n                    ✅ 추가 보법 (Advanced Patterns) - IMPLEMENTED\n                  </div>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textPrimary,\n                      margin: \"0 0 6px 0\",\n                    }}\n                  >\n                    <strong>축족회전 (Chukjok Hoejeon) | Pivot</strong>:\n                    Shift+Ctrl+A (left) / Shift+Ctrl+D (right) • 90° rotation on\n                    planted foot • 250ms\n                  </p>\n                  <p\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: colors.textPrimary,\n                      margin: 0,\n                    }}\n                  >\n                    <strong>섞음보 (Seokkeumbo) | Shuffle</strong>: Shift+Ctrl+W\n                    or Shift+Ctrl+S • 15cm micro-adjustment • 100ms\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            {/* Stance Side Switch Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.5,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"stance-side-switch\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                자세 발 바꿈 - Stance Side Switch\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                ✅ 전방 발 전환 | Switch front foot position - IMPLEMENTED\n              </p>\n\n              <div\n                style={{\n                  background: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.2),\n                  borderRadius: \"6px\",\n                  border: `1px solid ${colors.borderGold}`,\n                  padding: \"12px\",\n                  textAlign: \"center\",\n                }}\n              >\n                <div\n                  style={{\n                    fontSize: isMobile ? \"16px\" : \"18px\",\n                    fontWeight: \"bold\",\n                    color: colors.accentGold,\n                    marginBottom: \"8px\",\n                  }}\n                >\n                  H\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"10px\" : \"11px\",\n                    color: colors.textPrimary,\n                    marginBottom: \"4px\",\n                  }}\n                >\n                  발 바꿈 (Bal Bakkum)\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: colors.textSecondary,\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Switch Front Foot\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"7px\" : \"8px\",\n                    color: colors.textSecondary,\n                    marginTop: \"6px\",\n                    fontStyle: \"italic\",\n                  }}\n                >\n                  Mirrors your stance (left ↔ right) • 400ms duration\n                </div>\n              </div>\n            </div>\n\n            {/* Technique Controls Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${hexToRgbaString(\n                  theme.colors.ACCENT_GOLD,\n                  0.6,\n                )}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"technique-controls\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: colors.accentGold,\n                  margin: \"0 0 10px 0\",\n                }}\n              >\n                기술 실행 - Technique Execution\n              </h2>\n              <p\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"12px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                  margin: \"0 0 15px 0\",\n                }}\n              >\n                ⚡ 원형별 고유 기술 (최대 10개) | Archetype-specific techniques\n                (up to 10)\n              </p>\n\n              {/* Technique Keys Grid */}\n              <div\n                style={{\n                  display: \"grid\",\n                  gridTemplateColumns: isMobile\n                    ? \"repeat(5, 1fr)\"\n                    : \"repeat(10, 1fr)\",\n                  gap: isMobile ? \"6px\" : \"8px\",\n                }}\n              >\n                {[\"Q\", \"E\", \"R\", \"T\", \"Y\", \"F\", \"G\", \"Z\", \"X\", \"C\"].map(\n                  (key, index) => (\n                    <div\n                      key={key}\n                      style={{\n                        background: `linear-gradient(135deg, ${hexToRgbaString(\n                          theme.colors.ACCENT_GOLD,\n                          0.3,\n                        )}, ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.1)})`,\n                        borderRadius: \"6px\",\n                        border: `2px solid ${colors.borderGold}`,\n                        padding: isMobile ? \"8px 4px\" : \"10px 6px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"14px\" : \"16px\",\n                          fontWeight: \"bold\",\n                          color: colors.accentGold,\n                        }}\n                      >\n                        {key}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"7px\" : \"8px\",\n                          color: colors.textSecondary,\n                          marginTop: \"2px\",\n                        }}\n                      >\n                        기술 {index + 1}\n                      </div>\n                    </div>\n                  ),\n                )}\n              </div>\n\n              {/* Technique Notes */}\n              <div\n                style={{\n                  marginTop: \"15px\",\n                  padding: \"10px\",\n                  background: hexToRgbaString(\n                    theme.colors.UI_BACKGROUND_DARK,\n                    0.6,\n                  ),\n                  borderRadius: \"6px\",\n                  fontSize: isMobile ? \"9px\" : \"10px\",\n                  color: colors.textSecondary,\n                  fontStyle: \"italic\",\n                }}\n              >\n                💡 <strong>Tip</strong>: Keys positioned around WASD for easy\n                access without interfering with movement. Each archetype has\n                unique techniques.\n              </div>\n            </div>\n\n            {/* Special Features Section */}\n            <div\n              style={{\n                marginBottom: `${layoutConstants.sectionSpacing}px`,\n                background: colors.sectionBg,\n                borderRadius: \"12px\",\n                border: `2px solid ${colors.borderRed}`,\n                padding: \"20px\",\n              }}\n              data-testid=\"special-features\"\n            >\n              <h2\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"22px\",\n                  fontWeight: \"bold\",\n                  color: `#${theme.colors.KOREAN_RED.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  margin: \"0 0 20px 0\",\n                }}\n              >\n                특수 기능 - Special Features\n              </h2>\n\n              {/* Special Keys List */}\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"10px\",\n                }}\n              >\n                {[\n                  {\n                    key: \"V\",\n                    korean: \"급소 표시 전환\",\n                    english: \"Toggle vital points overlay (70 points)\",\n                  },\n                  {\n                    key: \"B\",\n                    korean: \"방어 자세\",\n                    english: \"Defensive guard position\",\n                  },\n                  {\n                    key: \"F1\",\n                    korean: \"조작법 힌트\",\n                    english: \"Show control hints\",\n                  },\n                  {\n                    key: \"ESC / M\",\n                    korean: \"일시정지 / 메뉴\",\n                    english: \"Pause menu / Return to menu\",\n                  },\n                ].map((special) => (\n                  <div\n                    key={special.key}\n                    style={{\n                      background: hexToRgbaString(\n                        theme.colors.UI_BACKGROUND_LIGHT,\n                        0.8,\n                      ),\n                      borderRadius: \"8px\",\n                      border: `1px solid ${colors.borderRed}`,\n                      padding: \"10px\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"12px\",\n                    }}\n                  >\n                    <div\n                      style={{\n                        background: hexToRgbaString(\n                          theme.colors.KOREAN_RED,\n                          0.3,\n                        ),\n                        borderRadius: \"6px\",\n                        padding: \"4px 10px\",\n                        fontSize: isMobile ? \"12px\" : \"14px\",\n                        fontWeight: \"bold\",\n                        color: colors.accentGold,\n                        minWidth: \"50px\",\n                        textAlign: \"center\",\n                      }}\n                    >\n                      {special.key}\n                    </div>\n                    <div style={{ flex: 1 }}>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"10px\" : \"12px\",\n                          fontWeight: \"bold\",\n                          color: colors.textPrimary,\n                        }}\n                      >\n                        {special.korean}\n                      </div>\n                      <div\n                        style={{\n                          fontSize: isMobile ? \"8px\" : \"10px\",\n                          color: colors.textSecondary,\n                          fontStyle: \"italic\",\n                        }}\n                      >\n                        {special.english}\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Interactive Control Demo - Shows recently pressed keys */}\n          <InteractiveControlDemo\n            pressedKeys={pressedKeys}\n            isMobile={isMobile}\n          />\n\n          {/* Footer */}\n          <div\n            style={{\n              height: `${layoutConstants.footerHeight}px`,\n              background: colors.headerBg,\n              borderTop: `3px solid ${colors.borderRed}`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: `0 ${layoutConstants.padding}px`,\n            }}\n            data-testid=\"controls-footer\"\n          >\n            {/* Philosophy Text */}\n            <div\n              style={{\n                fontSize: isMobile ? \"10px\" : \"12px\",\n                color: colors.accentGold,\n                fontStyle: \"italic\",\n              }}\n            >\n              🥋 흑괘의 길을 걸어라 | Walk the Path of the Black Trigram 🥋\n            </div>\n\n            {/* Back Button */}\n            <BackButton\n              onClick={handleBackClick}\n              korean=\"무도장 복귀\"\n              english=\"Return to Dojang\"\n              isMobile={isMobile}\n              testId=\"controls-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(16).padStart(\n                  6,\n                  \"0\",\n                )}`,\n                border: `1px solid ${colors.borderGold}`,\n              }}\n              data-testid=\"keyboard-shortcuts\"\n            >\n              ESC | M\n            </div>\n          </div>\n\n          {/* Footer Instruction */}\n          <div\n            style={{\n              textAlign: \"center\",\n              padding: \"10px\",\n              fontSize: isMobile ? \"10px\" : \"12px\",\n              color: colors.textSecondary,\n              fontStyle: \"italic\",\n              background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.7),\n            }}\n          >\n            ESC 또는 M 키로 메뉴로 돌아가기 - Press ESC or M to return to menu\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ControlsScreen3D;\n"],"mappings":"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"}

package/lib/components/screens/controls/components/ControlBindingsOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlBindingsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlBindingsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlBindingsOverlayHtml - Display control bindings filtered by selected category\n * \n * Shows key bindings in a clean, organized list with Korean-English bilingual labels.\n * Uses responsive grid/list layout based on device type.\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport {\n  filterKeysByCategory,\n  getKeyCategoryColor,\n  KEYBOARD_LAYOUT,\n  type KeyData,\n} from \"../constants/ControlsConstants\";\n\n/**\n * Props for ControlBindingsOverlayHtml component\n */\nexport interface ControlBindingsOverlayHtmlProps {\n  /** Selected control category to filter and display */\n  readonly selectedTab: 'combat' | 'movement' | 'system';\n  /** Whether on mobile device (list layout vs grid) */\n  readonly isMobile: boolean;\n}\n\n/**\n * ControlBindingsOverlayHtml Component\n * \n * Displays control bindings filtered by selected category.\n * Uses grid layout on desktop and list layout on mobile.\n * \n * @example\n * ```tsx\n * <ControlBindingsOverlayHtml\n *   selectedTab=\"combat\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const ControlBindingsOverlayHtml: React.FC<ControlBindingsOverlayHtmlProps> = ({\n  selectedTab,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n  const filteredKeys = useMemo<readonly KeyData[]>(() => {\n    return filterKeysByCategory(KEYBOARD_LAYOUT, selectedTab);\n  }, [selectedTab]);\n\n  const containerStyle = useMemo(() => ({\n    display: 'grid',\n    gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(280px, 1fr))',\n    gap: isMobile ? '12px' : '16px',\n    padding: isMobile ? '15px' : '20px',\n    maxHeight: isMobile ? '60vh' : '70vh',\n    overflowY: 'auto' as const,\n    overflowX: 'hidden' as const,\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n    borderRadius: '12px',\n    border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n    boxShadow: `0 4px 15px ${hexToRgbaString(theme.colors.BLACK_SOLID, 0.5)}`,\n  }), [isMobile, theme]);\n\n  const getBindingCardStyle = (keyData: KeyData) => ({\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: '8px',\n    padding: isMobile ? '12px' : '14px',\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8),\n    border: `2px solid ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6)}`,\n    borderRadius: '8px',\n    transition: 'all 0.2s ease',\n    cursor: 'default',\n  });\n\n  const keyLabelStyle = (keyData: KeyData) => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '16px' : '18px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(getKeyCategoryColor(keyData.category)),\n    textShadow: `0 0 10px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.5)}`,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  });\n\n  const koreanLabelStyle = {\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '13px' : '14px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(theme.colors.ACCENT_GOLD),\n  };\n\n  const descriptionStyle = {\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '11px' : '12px',\n    color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n    lineHeight: 1.4,\n  };\n\n  return (\n    <div style={containerStyle} data-testid=\"control-bindings\">\n      {filteredKeys.map((keyData) => (\n        <div\n          key={keyData.code}\n          style={getBindingCardStyle(keyData)}\n          data-testid={`binding-${keyData.code}`}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1);\n            e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 1);\n            e.currentTarget.style.transform = 'translateY(-2px)';\n            e.currentTarget.style.boxShadow = `0 4px 15px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.4)}`;\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8);\n            e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6);\n            e.currentTarget.style.transform = 'translateY(0)';\n            e.currentTarget.style.boxShadow = 'none';\n          }}\n        >\n          {/* Key label */}\n          <div style={keyLabelStyle(keyData)}>\n            <span style={{ \n              padding: '4px 8px', \n              background: hexToRgbaString(getKeyCategoryColor(keyData.category), 0.2),\n              borderRadius: '4px',\n              minWidth: isMobile ? '40px' : '50px',\n              textAlign: 'center' as const,\n            }}>\n              {keyData.label}\n            </span>\n            {keyData.labelKorean && (\n              <span style={koreanLabelStyle}>\n                {keyData.labelKorean}\n              </span>\n            )}\n          </div>\n\n          {/* Description (Korean | English) */}\n          {keyData.description && keyData.descriptionKorean && (\n            <div style={descriptionStyle}>\n              {keyData.descriptionKorean} | {keyData.description}\n            </div>\n          )}\n\n          {/* Category badge */}\n          <div style={{\n            fontSize: isMobile ? '9px' : '10px',\n            color: hexToRgbaString(theme.colors.TEXT_TERTIARY),\n            textTransform: 'uppercase' as const,\n            letterSpacing: '0.5px',\n          }}>\n            {keyData.category}\n          </div>\n        </div>\n      ))}\n\n      {filteredKeys.length === 0 && (\n        <div style={{\n          gridColumn: '1 / -1',\n          textAlign: 'center' as const,\n          padding: '40px 20px',\n          fontFamily: FONT_FAMILY.KOREAN,\n          fontSize: isMobile ? '14px' : '16px',\n          color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n        }}>\n          선택한 카테고리에 컨트롤이 없습니다 | No controls in selected category\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ControlBindingsOverlayHtml;\n"],"mappings":"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"}
+{"version":3,"file":"ControlBindingsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlBindingsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlBindingsOverlayHtml - Display control bindings filtered by selected category\n * \n * Shows key bindings in a clean, organized list with Korean-English bilingual labels.\n * Uses responsive grid/list layout based on device type.\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport {\n  filterKeysByCategory,\n  getKeyCategoryColor,\n  KEYBOARD_LAYOUT,\n  type KeyData,\n} from \"../constants/ControlsConstants\";\n\n/**\n * Props for ControlBindingsOverlayHtml component\n */\nexport interface ControlBindingsOverlayHtmlProps {\n  /** Selected control category to filter and display */\n  readonly selectedTab: 'combat' | 'movement' | 'system';\n  /** Whether on mobile device (list layout vs grid) */\n  readonly isMobile: boolean;\n}\n\n/**\n * ControlBindingsOverlayHtml Component\n * \n * Displays control bindings filtered by selected category.\n * Uses grid layout on desktop and list layout on mobile.\n * \n * @example\n * ```tsx\n * <ControlBindingsOverlayHtml\n *   selectedTab=\"combat\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const ControlBindingsOverlayHtml: React.FC<ControlBindingsOverlayHtmlProps> = ({\n  selectedTab,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n  const filteredKeys = useMemo<readonly KeyData[]>(() => {\n    return filterKeysByCategory(KEYBOARD_LAYOUT, selectedTab);\n  }, [selectedTab]);\n\n  const containerStyle = useMemo(() => ({\n    display: 'grid',\n    gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(280px, 1fr))',\n    gap: isMobile ? '12px' : '16px',\n    padding: isMobile ? '15px' : '20px',\n    maxHeight: isMobile ? '60vh' : '70vh',\n    overflowY: 'auto' as const,\n    overflowX: 'hidden' as const,\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n    borderRadius: '12px',\n    border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n    boxShadow: `0 4px 15px ${hexToRgbaString(theme.colors.BLACK_SOLID, 0.5)}`,\n  }), [isMobile, theme]);\n\n  const getBindingCardStyle = (keyData: KeyData) => ({\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: '8px',\n    padding: isMobile ? '12px' : '14px',\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8),\n    border: `2px solid ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6)}`,\n    borderRadius: '8px',\n    transition: 'all 0.2s ease',\n    cursor: 'default',\n  });\n\n  const keyLabelStyle = (keyData: KeyData) => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '16px' : '18px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(getKeyCategoryColor(keyData.category)),\n    textShadow: `0 0 10px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.5)}`,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  });\n\n  const koreanLabelStyle = {\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '13px' : '14px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(theme.colors.ACCENT_GOLD),\n  };\n\n  const descriptionStyle = {\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '11px' : '12px',\n    color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n    lineHeight: 1.4,\n  };\n\n  return (\n    <div style={containerStyle} data-testid=\"control-bindings\">\n      {filteredKeys.map((keyData) => (\n        <div\n          key={keyData.code}\n          style={getBindingCardStyle(keyData)}\n          data-testid={`binding-${keyData.code}`}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1);\n            e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 1);\n            e.currentTarget.style.transform = 'translateY(-2px)';\n            e.currentTarget.style.boxShadow = `0 4px 15px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.4)}`;\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8);\n            e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6);\n            e.currentTarget.style.transform = 'translateY(0)';\n            e.currentTarget.style.boxShadow = 'none';\n          }}\n        >\n          {/* Key label */}\n          <div style={keyLabelStyle(keyData)}>\n            <span style={{ \n              padding: '4px 8px', \n              background: hexToRgbaString(getKeyCategoryColor(keyData.category), 0.2),\n              borderRadius: '4px',\n              minWidth: isMobile ? '40px' : '50px',\n              textAlign: 'center' as const,\n            }}>\n              {keyData.label}\n            </span>\n            {keyData.labelKorean && (\n              <span style={koreanLabelStyle}>\n                {keyData.labelKorean}\n              </span>\n            )}\n          </div>\n\n          {/* Description (Korean | English) */}\n          {keyData.description && keyData.descriptionKorean && (\n            <div style={descriptionStyle}>\n              {keyData.descriptionKorean} | {keyData.description}\n            </div>\n          )}\n\n          {/* Category badge */}\n          <div style={{\n            fontSize: isMobile ? '9px' : '10px',\n            color: hexToRgbaString(theme.colors.TEXT_TERTIARY),\n            textTransform: 'uppercase' as const,\n            letterSpacing: '0.5px',\n          }}>\n            {keyData.category}\n          </div>\n        </div>\n      ))}\n\n      {filteredKeys.length === 0 && (\n        <div style={{\n          gridColumn: '1 / -1',\n          textAlign: 'center' as const,\n          padding: '40px 20px',\n          fontFamily: FONT_FAMILY.KOREAN,\n          fontSize: isMobile ? '14px' : '16px',\n          color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n        }}>\n          선택한 카테고리에 컨트롤이 없습니다 | No controls in selected category\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ControlBindingsOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/controls/components/ControlCategoryTabsOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlCategoryTabsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlCategoryTabsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlCategoryTabs - Tab navigation for control categories\n * \n * Allows switching between Combat, Movement, and System control views\n * Uses BaseButtonOverlayHtml for consistent styling\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { CONTROL_CATEGORIES } from \"../constants/ControlsConstants\";\n\nexport interface ControlCategoryTabsProps {\n  readonly selectedTab: 'combat' | 'movement' | 'system';\n  readonly onTabChange: (tab: 'combat' | 'movement' | 'system') => void;\n  readonly isMobile: boolean;\n}\n\n/**\n * ControlCategoryTabs Component\n * \n * Displays tabs for switching between control categories.\n * Uses Korean theming and responsive sizing.\n * \n * @example\n * ```tsx\n * <ControlCategoryTabs\n *   selectedTab=\"combat\"\n *   onTabChange={(tab) => setSelectedTab(tab)}\n *   isMobile={false}\n * />\n * ```\n */\nexport const ControlCategoryTabs: React.FC<ControlCategoryTabsProps> = ({\n  selectedTab,\n  onTabChange,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n  const tabStyle = useMemo(() => ({\n    display: 'flex',\n    flexDirection: 'row' as const,\n    gap: isMobile ? '8px' : '12px',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: isMobile ? '10px' : '15px',\n    flexWrap: 'wrap' as const,\n  }), [isMobile]);\n\n  const buttonBaseStyle = useMemo(() => ({\n    padding: isMobile ? '8px 16px' : '12px 24px',\n    borderRadius: '8px',\n    border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n    cursor: 'pointer',\n    transition: 'all 0.2s ease',\n    fontFamily: 'inherit',\n    fontSize: isMobile ? '14px' : '16px',\n    fontWeight: 'bold' as const,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  }), [isMobile, theme]);\n\n  return (\n    <div style={tabStyle} data-testid=\"control-category-tabs\">\n      {CONTROL_CATEGORIES.map((category) => {\n        const isSelected = selectedTab === category.id;\n        \n        const buttonStyle = {\n          ...buttonBaseStyle,\n          background: isSelected\n            ? hexToRgbaString(category.color, 0.3)\n            : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n          borderColor: isSelected\n            ? hexToRgbaString(category.color, 1)\n            : hexToRgbaString(theme.colors.UI_BORDER, 0.6),\n          color: isSelected\n            ? `#${category.color.toString(16).padStart(6, '0')}`\n            : `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, '0')}`,\n        };\n\n        return (\n          <button\n            key={category.id}\n            style={buttonStyle}\n            onClick={() => onTabChange(category.id as 'combat' | 'movement' | 'system')}\n            data-testid={`tab-${category.id}`}\n            onMouseEnter={(e) => {\n              if (!isSelected) {\n                e.currentTarget.style.background = hexToRgbaString(category.color, 0.1);\n                e.currentTarget.style.borderColor = hexToRgbaString(category.color, 0.8);\n              }\n            }}\n            onMouseLeave={(e) => {\n              if (!isSelected) {\n                e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8);\n                e.currentTarget.style.borderColor = hexToRgbaString(theme.colors.UI_BORDER, 0.6);\n              }\n            }}\n          >\n            <span role=\"img\" aria-label={category.english}>{category.icon}</span>\n            <span>{category.korean} | {category.english}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,uBAA2D,EACtE,aACA,aACA,eACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAE1E,MAAM,WAAW,eAAe;EAC9B,SAAS;EACT,eAAe;EACf,KAAK,WAAW,QAAQ;EACxB,gBAAgB;EAChB,YAAY;EACZ,SAAS,WAAW,SAAS;EAC7B,UAAU;EACX,GAAG,CAAC,SAAS,CAAC;CAEf,MAAM,kBAAkB,eAAe;EACrC,SAAS,WAAW,aAAa;EACjC,cAAc;EACd,QAAQ,aAAa,gBAAgB,MAAM,OAAO,WAAW,GAAI;EACjE,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,UAAU,WAAW,SAAS;EAC9B,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,KAAK;EACN,GAAG,CAAC,UAAU,MAAM,CAAC;CAEtB,OACE,oBAAC,OAAD;EAAK,OAAO;EAAU,eAAY;YAC/B,mBAAmB,KAAK,aAAa;GACpC,MAAM,aAAa,gBAAgB,SAAS;GAe5C,OACE,qBAAC,UAAD;IAEE,OAAO;KAfT,GAAG;KACH,YAAY,aACR,gBAAgB,SAAS,OAAO,GAAI,GACpC,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;KACzD,aAAa,aACT,gBAAgB,SAAS,OAAO,EAAE,GAClC,gBAAgB,MAAM,OAAO,WAAW,GAAI;KAChD,OAAO,aACH,IAAI,SAAS,MAAM,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI,KAChD,IAAI,MAAM,OAAO,eAAe,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;KAMxD;IACP,eAAe,YAAY,SAAS,GAAuC;IAC3E,eAAa,OAAO,SAAS;IAC7B,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY;MACf,EAAE,cAAc,MAAM,aAAa,gBAAgB,SAAS,OAAO,GAAI;MACvE,EAAE,cAAc,MAAM,cAAc,gBAAgB,SAAS,OAAO,GAAI;;;IAG5E,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY;MACf,EAAE,cAAc,MAAM,aAAa,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;MACxF,EAAE,cAAc,MAAM,cAAc,gBAAgB,MAAM,OAAO,WAAW,GAAI;;;cAdtF,CAkBE,oBAAC,QAAD;KAAM,MAAK;KAAM,cAAY,SAAS;eAAU,SAAS;KAAY,CAAA,EACrE,qBAAC,QAAD,EAAA,UAAA;KAAO,SAAS;KAAO;KAAI,SAAS;KAAe,EAAA,CAAA,CAC5C;MAnBF,SAAS,GAmBP;IAEX;EACE,CAAA"}
+{"version":3,"file":"ControlCategoryTabsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlCategoryTabsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlCategoryTabs - Tab navigation for control categories\n * \n * Allows switching between Combat, Movement, and System control views\n * Uses BaseButtonOverlayHtml for consistent styling\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { CONTROL_CATEGORIES } from \"../constants/ControlsConstants\";\n\nexport interface ControlCategoryTabsProps {\n  readonly selectedTab: 'combat' | 'movement' | 'system';\n  readonly onTabChange: (tab: 'combat' | 'movement' | 'system') => void;\n  readonly isMobile: boolean;\n}\n\n/**\n * ControlCategoryTabs Component\n * \n * Displays tabs for switching between control categories.\n * Uses Korean theming and responsive sizing.\n * \n * @example\n * ```tsx\n * <ControlCategoryTabs\n *   selectedTab=\"combat\"\n *   onTabChange={(tab) => setSelectedTab(tab)}\n *   isMobile={false}\n * />\n * ```\n */\nexport const ControlCategoryTabs: React.FC<ControlCategoryTabsProps> = ({\n  selectedTab,\n  onTabChange,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n  const tabStyle = useMemo(() => ({\n    display: 'flex',\n    flexDirection: 'row' as const,\n    gap: isMobile ? '8px' : '12px',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: isMobile ? '10px' : '15px',\n    flexWrap: 'wrap' as const,\n  }), [isMobile]);\n\n  const buttonBaseStyle = useMemo(() => ({\n    padding: isMobile ? '8px 16px' : '12px 24px',\n    borderRadius: '8px',\n    border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n    cursor: 'pointer',\n    transition: 'all 0.2s ease',\n    fontFamily: 'inherit',\n    fontSize: isMobile ? '14px' : '16px',\n    fontWeight: 'bold' as const,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  }), [isMobile, theme]);\n\n  return (\n    <div style={tabStyle} data-testid=\"control-category-tabs\">\n      {CONTROL_CATEGORIES.map((category) => {\n        const isSelected = selectedTab === category.id;\n        \n        const buttonStyle = {\n          ...buttonBaseStyle,\n          background: isSelected\n            ? hexToRgbaString(category.color, 0.3)\n            : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n          borderColor: isSelected\n            ? hexToRgbaString(category.color, 1)\n            : hexToRgbaString(theme.colors.UI_BORDER, 0.6),\n          color: isSelected\n            ? `#${category.color.toString(16).padStart(6, '0')}`\n            : `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, '0')}`,\n        };\n\n        return (\n          <button\n            key={category.id}\n            style={buttonStyle}\n            onClick={() => onTabChange(category.id as 'combat' | 'movement' | 'system')}\n            data-testid={`tab-${category.id}`}\n            onMouseEnter={(e) => {\n              if (!isSelected) {\n                e.currentTarget.style.background = hexToRgbaString(category.color, 0.1);\n                e.currentTarget.style.borderColor = hexToRgbaString(category.color, 0.8);\n              }\n            }}\n            onMouseLeave={(e) => {\n              if (!isSelected) {\n                e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8);\n                e.currentTarget.style.borderColor = hexToRgbaString(theme.colors.UI_BORDER, 0.6);\n              }\n            }}\n          >\n            <span role=\"img\" aria-label={category.english}>{category.icon}</span>\n            <span>{category.korean} | {category.english}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,uBAA2D,EACtE,aACA,aACA,eACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;CAAS,CAAC;CAEzE,MAAM,WAAW,eAAe;EAC9B,SAAS;EACT,eAAe;EACf,KAAK,WAAW,QAAQ;EACxB,gBAAgB;EAChB,YAAY;EACZ,SAAS,WAAW,SAAS;EAC7B,UAAU;CACZ,IAAI,CAAC,QAAQ,CAAC;CAEd,MAAM,kBAAkB,eAAe;EACrC,SAAS,WAAW,aAAa;EACjC,cAAc;EACd,QAAQ,aAAa,gBAAgB,MAAM,OAAO,WAAW,EAAG;EAChE,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,UAAU,WAAW,SAAS;EAC9B,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,KAAK;CACP,IAAI,CAAC,UAAU,KAAK,CAAC;CAErB,OACE,oBAAC,OAAD;EAAK,OAAO;EAAU,eAAY;YAC/B,mBAAmB,KAAK,aAAa;GACpC,MAAM,aAAa,gBAAgB,SAAS;GAe5C,OACE,qBAAC,UAAD;IAEE,OAAO;KAfT,GAAG;KACH,YAAY,aACR,gBAAgB,SAAS,OAAO,EAAG,IACnC,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;KACxD,aAAa,aACT,gBAAgB,SAAS,OAAO,CAAC,IACjC,gBAAgB,MAAM,OAAO,WAAW,EAAG;KAC/C,OAAO,aACH,IAAI,SAAS,MAAM,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,MAC/C,IAAI,MAAM,OAAO,eAAe,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;IAMvD;IACP,eAAe,YAAY,SAAS,EAAsC;IAC1E,eAAa,OAAO,SAAS;IAC7B,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY;MACf,EAAE,cAAc,MAAM,aAAa,gBAAgB,SAAS,OAAO,EAAG;MACtE,EAAE,cAAc,MAAM,cAAc,gBAAgB,SAAS,OAAO,EAAG;KACzE;IACF;IACA,eAAe,MAAM;KACnB,IAAI,CAAC,YAAY;MACf,EAAE,cAAc,MAAM,aAAa,gBAAgB,MAAM,OAAO,oBAAoB,EAAG;MACvF,EAAE,cAAc,MAAM,cAAc,gBAAgB,MAAM,OAAO,WAAW,EAAG;KACjF;IACF;cAhBF,CAkBE,oBAAC,QAAD;KAAM,MAAK;KAAM,cAAY,SAAS;eAAU,SAAS;IAAW,CAAA,GACpE,qBAAC,QAAD,EAAA,UAAA;KAAO,SAAS;KAAO;KAAI,SAAS;IAAc,EAAA,CAAA,CAC5C;MAnBD,SAAS,EAmBR;EAEZ,CAAC;CACE,CAAA;AAET"}