blacktrigram 0.7.45 → 0.7.48

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"}

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

@@ -1 +1 @@
-{"version":3,"file":"GamepadVisualization3D.js","names":[],"sources":["../../../../../src/components/screens/controls/components/GamepadVisualization3D.tsx"],"sourcesContent":["/**\n * GamepadVisualization3D - 3D gamepad visualization with button labels\n *\n * Renders a simplified 3D gamepad shape with colored buttons and\n * bilingual Korean-English labels for each button.\n *\n * @module components/screens/controls/components\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { GAMEPAD_BUTTONS } from \"../constants/ControlsConstants\";\n\n/**\n * Props for GamepadVisualization3D component\n */\nexport interface GamepadVisualization3DProps {\n  /** Whether on mobile device (affects sizing) */\n  readonly isMobile: boolean;\n}\n\n/**\n * GamepadVisualization3D Component\n *\n * 3D visualization of a gamepad with labeled buttons.\n * Displays simplified gamepad shape with colored circles for buttons.\n *\n * @example\n * ```tsx\n * <Canvas>\n *   <GamepadVisualization3D isMobile={false} />\n * </Canvas>\n * ```\n */\nexport const GamepadVisualization3D: React.FC<GamepadVisualization3DProps> = ({\n  isMobile,\n}) => {\n  const bodyMaterial = useMemo(\n    () =>\n      new THREE.MeshStandardMaterial({\n        color: KOREAN_COLORS.UI_STEEL_GRAY_DARK,\n        metalness: 0.7,\n        roughness: 0.3,\n        transparent: true,\n        opacity: 0.95,\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    return () => {\n      bodyMaterial.dispose();\n    };\n  }, [bodyMaterial]);\n\n  const buttonPositions = useMemo(\n    () => ({\n      0: { x: 1.5, y: 0.5, z: 0.15 }, // A\n      1: { x: 2.0, y: 0.0, z: 0.15 }, // B\n      2: { x: 1.0, y: 0.0, z: 0.15 }, // X\n      3: { x: 1.5, y: -0.5, z: 0.15 }, // Y\n      4: { x: -2.0, y: 1.0, z: 0.2 }, // LB\n      5: { x: 2.0, y: 1.0, z: 0.2 }, // RB\n      6: { x: -2.0, y: 1.4, z: 0.2 }, // LT\n      7: { x: 2.0, y: 1.4, z: 0.2 }, // RT\n      8: { x: -0.6, y: 0.0, z: 0.15 }, // Back\n      9: { x: 0.6, y: 0.0, z: 0.15 }, // Start\n      10: { x: -1.5, y: -0.8, z: 0.15 }, // L3\n      11: { x: 1.5, y: -0.8, z: 0.15 }, // R3\n    }),\n    [],\n  );\n\n  return (\n    <group position={[0, 0, 0]} data-testid=\"gamepad-visualization\">\n      {/* Ambient light */}\n      <ambientLight intensity={0.5} />\n\n      {/* Directional lights */}\n      <directionalLight position={[3, 3, 3]} intensity={0.8} />\n      <directionalLight position={[-3, 2, 2]} intensity={0.4} />\n\n      {/* Left body section (rounded rectangle) */}\n      <mesh position={[-1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Right body section (rounded rectangle) */}\n      <mesh position={[1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Center connector */}\n      <mesh position={[0, 0, 0]}>\n        <boxGeometry args={[1.5, 1.5, 0.35]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Render all buttons */}\n      {GAMEPAD_BUTTONS.map((button) => {\n        const pos =\n          buttonPositions[button.index as keyof typeof buttonPositions];\n        if (!pos) return null;\n\n        return (\n          <group key={button.index} position={[pos.x, pos.y, pos.z]}>\n            {/* Button sphere */}\n            <mesh>\n              <sphereGeometry args={[0.15, 16, 16]} />\n              <meshStandardMaterial\n                color={button.color}\n                emissive={button.color}\n                emissiveIntensity={1.5}\n                metalness={0.5}\n                roughness={0.3}\n              />\n            </mesh>\n\n            {/* Button label overlay */}\n            <Html\n              position={[0, 0.3, 0]}\n              center\n              distanceFactor={isMobile ? 3 : 2.5}\n              style={{ pointerEvents: \"none\" }}\n            >\n              <div\n                style={{\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  fontSize: isMobile ? \"10px\" : \"11px\",\n                  fontWeight: \"bold\",\n                  color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n                  textAlign: \"center\",\n                  whiteSpace: \"nowrap\",\n                  background: hexToRgbaString(\n                    KOREAN_COLORS.UI_BACKGROUND_DARK,\n                    0.8,\n                  ),\n                  padding: \"4px 6px\",\n                  borderRadius: \"4px\",\n                  border: `1px solid ${hexToRgbaString(button.color, 0.6)}`,\n                  boxShadow: `0 0 8px ${hexToRgbaString(button.color, 0.4)}`,\n                }}\n              >\n                {/* Button name */}\n                <div\n                  style={{\n                    color: hexToRgbaString(button.color),\n                    marginBottom: \"2px\",\n                  }}\n                >\n                  {button.korean} | {button.english}\n                </div>\n                {/* Action */}\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY),\n                  }}\n                >\n                  {button.actionKorean} | {button.action}\n                </div>\n              </div>\n            </Html>\n          </group>\n        );\n      })}\n    </group>\n  );\n};\n\nexport default GamepadVisualization3D;\n"],"mappings":"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"}
+{"version":3,"file":"GamepadVisualization3D.js","names":[],"sources":["../../../../../src/components/screens/controls/components/GamepadVisualization3D.tsx"],"sourcesContent":["/**\n * GamepadVisualization3D - 3D gamepad visualization with button labels\n *\n * Renders a simplified 3D gamepad shape with colored buttons and\n * bilingual Korean-English labels for each button.\n *\n * @module components/screens/controls/components\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { GAMEPAD_BUTTONS } from \"../constants/ControlsConstants\";\n\n/**\n * Props for GamepadVisualization3D component\n */\nexport interface GamepadVisualization3DProps {\n  /** Whether on mobile device (affects sizing) */\n  readonly isMobile: boolean;\n}\n\n/**\n * GamepadVisualization3D Component\n *\n * 3D visualization of a gamepad with labeled buttons.\n * Displays simplified gamepad shape with colored circles for buttons.\n *\n * @example\n * ```tsx\n * <Canvas>\n *   <GamepadVisualization3D isMobile={false} />\n * </Canvas>\n * ```\n */\nexport const GamepadVisualization3D: React.FC<GamepadVisualization3DProps> = ({\n  isMobile,\n}) => {\n  const bodyMaterial = useMemo(\n    () =>\n      new THREE.MeshStandardMaterial({\n        color: KOREAN_COLORS.UI_STEEL_GRAY_DARK,\n        metalness: 0.7,\n        roughness: 0.3,\n        transparent: true,\n        opacity: 0.95,\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    return () => {\n      bodyMaterial.dispose();\n    };\n  }, [bodyMaterial]);\n\n  const buttonPositions = useMemo(\n    () => ({\n      0: { x: 1.5, y: 0.5, z: 0.15 }, // A\n      1: { x: 2.0, y: 0.0, z: 0.15 }, // B\n      2: { x: 1.0, y: 0.0, z: 0.15 }, // X\n      3: { x: 1.5, y: -0.5, z: 0.15 }, // Y\n      4: { x: -2.0, y: 1.0, z: 0.2 }, // LB\n      5: { x: 2.0, y: 1.0, z: 0.2 }, // RB\n      6: { x: -2.0, y: 1.4, z: 0.2 }, // LT\n      7: { x: 2.0, y: 1.4, z: 0.2 }, // RT\n      8: { x: -0.6, y: 0.0, z: 0.15 }, // Back\n      9: { x: 0.6, y: 0.0, z: 0.15 }, // Start\n      10: { x: -1.5, y: -0.8, z: 0.15 }, // L3\n      11: { x: 1.5, y: -0.8, z: 0.15 }, // R3\n    }),\n    [],\n  );\n\n  return (\n    <group position={[0, 0, 0]} data-testid=\"gamepad-visualization\">\n      {/* Ambient light */}\n      <ambientLight intensity={0.5} />\n\n      {/* Directional lights */}\n      <directionalLight position={[3, 3, 3]} intensity={0.8} />\n      <directionalLight position={[-3, 2, 2]} intensity={0.4} />\n\n      {/* Left body section (rounded rectangle) */}\n      <mesh position={[-1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Right body section (rounded rectangle) */}\n      <mesh position={[1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Center connector */}\n      <mesh position={[0, 0, 0]}>\n        <boxGeometry args={[1.5, 1.5, 0.35]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Render all buttons */}\n      {GAMEPAD_BUTTONS.map((button) => {\n        const pos =\n          buttonPositions[button.index as keyof typeof buttonPositions];\n        if (!pos) return null;\n\n        return (\n          <group key={button.index} position={[pos.x, pos.y, pos.z]}>\n            {/* Button sphere */}\n            <mesh>\n              <sphereGeometry args={[0.15, 16, 16]} />\n              <meshStandardMaterial\n                color={button.color}\n                emissive={button.color}\n                emissiveIntensity={1.5}\n                metalness={0.5}\n                roughness={0.3}\n              />\n            </mesh>\n\n            {/* Button label overlay */}\n            <Html\n              position={[0, 0.3, 0]}\n              center\n              distanceFactor={isMobile ? 3 : 2.5}\n              style={{ pointerEvents: \"none\" }}\n            >\n              <div\n                style={{\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  fontSize: isMobile ? \"10px\" : \"11px\",\n                  fontWeight: \"bold\",\n                  color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n                  textAlign: \"center\",\n                  whiteSpace: \"nowrap\",\n                  background: hexToRgbaString(\n                    KOREAN_COLORS.UI_BACKGROUND_DARK,\n                    0.8,\n                  ),\n                  padding: \"4px 6px\",\n                  borderRadius: \"4px\",\n                  border: `1px solid ${hexToRgbaString(button.color, 0.6)}`,\n                  boxShadow: `0 0 8px ${hexToRgbaString(button.color, 0.4)}`,\n                }}\n              >\n                {/* Button name */}\n                <div\n                  style={{\n                    color: hexToRgbaString(button.color),\n                    marginBottom: \"2px\",\n                  }}\n                >\n                  {button.korean} | {button.english}\n                </div>\n                {/* Action */}\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY),\n                  }}\n                >\n                  {button.actionKorean} | {button.action}\n                </div>\n              </div>\n            </Html>\n          </group>\n        );\n      })}\n    </group>\n  );\n};\n\nexport default GamepadVisualization3D;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"InteractiveControlDemoOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/InteractiveControlDemoOverlayHtml.tsx"],"sourcesContent":["/**\n * InteractiveControlDemo - Display recently pressed keys and their actions\n * \n * Shows the last 5 pressed keys with their descriptions in a bottom overlay.\n * Keys auto-fade after 2 seconds for a clean, non-intrusive display.\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { getKeyCategoryColor, KEYBOARD_LAYOUT, type KeyData } from \"../constants/ControlsConstants\";\n\n/**\n * Props for InteractiveControlDemo component\n */\nexport interface InteractiveControlDemoProps {\n  /** Set of currently pressed key codes */\n  readonly pressedKeys: Set<string>;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * Key press entry with timestamp\n */\ninterface KeyPressEntry {\n  readonly keyData: KeyData;\n  readonly timestamp: number;\n  readonly id: string;\n}\n\n/**\n * Props for KeyPressEntryDisplay component\n */\ninterface KeyPressEntryDisplayProps {\n  readonly entry: KeyPressEntry;\n  readonly opacity: number;\n  readonly categoryColor: number;\n  readonly isMobile: boolean;\n  readonly theme: ReturnType<typeof useKoreanTheme>;\n}\n\n/**\n * Memoized KeyPressEntryDisplay Component\n * \n * Displays a single key press entry with optimized inline styles.\n */\nconst KeyPressEntryDisplay = React.memo<KeyPressEntryDisplayProps>(({\n  entry,\n  opacity,\n  categoryColor,\n  isMobile,\n  theme,\n}) => {\n  const containerStyle = useMemo(() => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: isMobile ? '8px' : '12px',\n    padding: isMobile ? '8px' : '10px',\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, opacity * 0.9),\n    borderRadius: '8px',\n    border: `2px solid ${hexToRgbaString(categoryColor, opacity * 0.7)}`,\n    transition: 'opacity 0.3s ease',\n    opacity,\n  }), [isMobile, theme.colors.UI_BACKGROUND_MEDIUM, opacity, categoryColor]);\n\n  const keyLabelStyle = useMemo(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '16px' : '18px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(categoryColor),\n    padding: '6px 12px',\n    background: hexToRgbaString(categoryColor, 0.2),\n    borderRadius: '6px',\n    minWidth: isMobile ? '50px' : '60px',\n    textAlign: 'center' as const,\n    boxShadow: `0 0 10px ${hexToRgbaString(categoryColor, opacity * 0.5)}`,\n  }), [isMobile, categoryColor, opacity]);\n\n  const koreanLabelStyle = useMemo(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '13px' : '14px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(theme.colors.ACCENT_GOLD, opacity),\n    marginBottom: '2px',\n  }), [isMobile, theme.colors.ACCENT_GOLD, opacity]);\n\n  const descriptionStyle = useMemo(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '11px' : '12px',\n    color: hexToRgbaString(theme.colors.TEXT_SECONDARY, opacity),\n    lineHeight: 1.3,\n  }), [isMobile, theme.colors.TEXT_SECONDARY, opacity]);\n\n  return (\n    <div\n      style={containerStyle}\n      data-testid={`key-press-${entry.keyData.code}`}\n    >\n      {/* Key label */}\n      <div style={keyLabelStyle}>\n        {entry.keyData.label}\n      </div>\n\n      {/* Key description */}\n      <div style={{ flex: 1 }}>\n        {/* Korean label */}\n        {entry.keyData.labelKorean && (\n          <div style={koreanLabelStyle}>\n            {entry.keyData.labelKorean}\n          </div>\n        )}\n\n        {/* Description (Korean | English) */}\n        {entry.keyData.descriptionKorean && entry.keyData.description && (\n          <div style={descriptionStyle}>\n            {entry.keyData.descriptionKorean} | {entry.keyData.description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nKeyPressEntryDisplay.displayName = 'KeyPressEntryDisplay';\n\n/**\n * InteractiveControlDemo Component\n * \n * Displays recently pressed keys with their actions.\n * Auto-fades entries after 2 seconds and maintains last 5 keys.\n * \n * @example\n * ```tsx\n * <InteractiveControlDemo\n *   pressedKeys={new Set(['Space', 'KeyW'])}\n *   isMobile={false}\n * />\n * ```\n */\nexport const InteractiveControlDemo: React.FC<InteractiveControlDemoProps> = ({\n  pressedKeys,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n  const [keyPresses, setKeyPresses] = useState<KeyPressEntry[]>([]);\n  const [currentTime, setCurrentTime] = useState(() => Date.now());\n\n  useEffect(() => {\n    let frameId: number;\n\n    const updateTime = () => {\n      setCurrentTime(Date.now());\n      frameId = window.requestAnimationFrame(updateTime);\n    };\n\n    frameId = window.requestAnimationFrame(updateTime);\n\n    return () => {\n      window.cancelAnimationFrame(frameId);\n    };\n  }, []);\n\n  useEffect(() => {\n    const currentCodes = Array.from(pressedKeys);\n\n    if (currentCodes.length === 0) {\n      return;\n    }\n\n    const now = Date.now();\n\n    setKeyPresses((prev) => {\n      let updated = prev;\n\n      currentCodes.forEach((code) => {\n        const alreadyRecorded = updated.some(\n          (entry) => entry.keyData.code === code && now - entry.timestamp < 100\n        );\n\n        if (!alreadyRecorded) {\n          const keyData = KEYBOARD_LAYOUT.find((k) => k.code === code);\n          if (keyData) {\n            const newEntry: KeyPressEntry = {\n              keyData,\n              timestamp: now,\n              id: `${code}-${now}`,\n            };\n            updated = [newEntry, ...updated];\n          }\n        }\n      });\n\n      if (updated.length > 5) {\n        updated = updated.slice(0, 5);\n      }\n\n      return updated === prev ? prev : updated;\n    });\n  }, [pressedKeys]);\n\n  useEffect(() => {\n    setKeyPresses((prev) =>\n      prev.filter((entry) => currentTime - entry.timestamp < 2000)\n    );\n  }, [currentTime]);\n\n  const getOpacity = (timestamp: number): number => {\n    const age = currentTime - timestamp;\n    const maxAge = 2000;\n    return Math.max(0, 1 - age / maxAge);\n  };\n\n  const containerStyle = useMemo(() => ({\n    position: 'fixed' as const,\n    bottom: isMobile ? '15px' : '20px',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: isMobile ? '8px' : '10px',\n    maxWidth: isMobile ? '90%' : '600px',\n    width: '100%',\n    padding: isMobile ? '12px' : '15px',\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n    borderRadius: '12px',\n    border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n    boxShadow: `\n      0 4px 20px ${hexToRgbaString(theme.colors.BLACK_SOLID, 0.5)},\n      0 0 15px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}\n    `,\n    pointerEvents: 'none' as const,\n    zIndex: 1000,\n  }), [isMobile, theme]);\n\n  const titleStyle = useMemo(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '12px' : '13px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(theme.colors.ACCENT_GOLD),\n    textAlign: 'center' as const,\n    marginBottom: '4px',\n    textShadow: `0 0 8px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.5)}`,\n  }), [isMobile, theme]);\n\n  return (\n    <div style={containerStyle} data-testid=\"interactive-demo\">\n      {/* Title */}\n      <div style={titleStyle}>\n        최근 입력 | Recent Input\n      </div>\n\n      {/* Key press entries */}\n      {keyPresses.map((entry) => {\n        const opacity = getOpacity(entry.timestamp);\n        const categoryColor = getKeyCategoryColor(entry.keyData.category);\n\n        return (\n          <KeyPressEntryDisplay\n            key={entry.id}\n            entry={entry}\n            opacity={opacity}\n            categoryColor={categoryColor}\n            isMobile={isMobile}\n            theme={theme}\n          />\n        );\n      })}\n\n      {/* Empty state */}\n      {keyPresses.length === 0 && (\n        <div\n          style={{\n            fontFamily: FONT_FAMILY.KOREAN,\n            fontSize: isMobile ? '12px' : '13px',\n            color: hexToRgbaString(theme.colors.TEXT_TERTIARY),\n            textAlign: 'center' as const,\n            padding: '15px',\n          }}\n        >\n          키를 눌러서 액션을 확인하세요 | Press keys to see actions\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default InteractiveControlDemo;\n"],"mappings":"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"}
+{"version":3,"file":"InteractiveControlDemoOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/InteractiveControlDemoOverlayHtml.tsx"],"sourcesContent":["/**\n * InteractiveControlDemo - Display recently pressed keys and their actions\n * \n * Shows the last 5 pressed keys with their descriptions in a bottom overlay.\n * Keys auto-fade after 2 seconds for a clean, non-intrusive display.\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { getKeyCategoryColor, KEYBOARD_LAYOUT, type KeyData } from \"../constants/ControlsConstants\";\n\n/**\n * Props for InteractiveControlDemo component\n */\nexport interface InteractiveControlDemoProps {\n  /** Set of currently pressed key codes */\n  readonly pressedKeys: Set<string>;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * Key press entry with timestamp\n */\ninterface KeyPressEntry {\n  readonly keyData: KeyData;\n  readonly timestamp: number;\n  readonly id: string;\n}\n\n/**\n * Props for KeyPressEntryDisplay component\n */\ninterface KeyPressEntryDisplayProps {\n  readonly entry: KeyPressEntry;\n  readonly opacity: number;\n  readonly categoryColor: number;\n  readonly isMobile: boolean;\n  readonly theme: ReturnType<typeof useKoreanTheme>;\n}\n\n/**\n * Memoized KeyPressEntryDisplay Component\n * \n * Displays a single key press entry with optimized inline styles.\n */\nconst KeyPressEntryDisplay = React.memo<KeyPressEntryDisplayProps>(({\n  entry,\n  opacity,\n  categoryColor,\n  isMobile,\n  theme,\n}) => {\n  const containerStyle = useMemo(() => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap: isMobile ? '8px' : '12px',\n    padding: isMobile ? '8px' : '10px',\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, opacity * 0.9),\n    borderRadius: '8px',\n    border: `2px solid ${hexToRgbaString(categoryColor, opacity * 0.7)}`,\n    transition: 'opacity 0.3s ease',\n    opacity,\n  }), [isMobile, theme.colors.UI_BACKGROUND_MEDIUM, opacity, categoryColor]);\n\n  const keyLabelStyle = useMemo(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '16px' : '18px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(categoryColor),\n    padding: '6px 12px',\n    background: hexToRgbaString(categoryColor, 0.2),\n    borderRadius: '6px',\n    minWidth: isMobile ? '50px' : '60px',\n    textAlign: 'center' as const,\n    boxShadow: `0 0 10px ${hexToRgbaString(categoryColor, opacity * 0.5)}`,\n  }), [isMobile, categoryColor, opacity]);\n\n  const koreanLabelStyle = useMemo(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '13px' : '14px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(theme.colors.ACCENT_GOLD, opacity),\n    marginBottom: '2px',\n  }), [isMobile, theme.colors.ACCENT_GOLD, opacity]);\n\n  const descriptionStyle = useMemo(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '11px' : '12px',\n    color: hexToRgbaString(theme.colors.TEXT_SECONDARY, opacity),\n    lineHeight: 1.3,\n  }), [isMobile, theme.colors.TEXT_SECONDARY, opacity]);\n\n  return (\n    <div\n      style={containerStyle}\n      data-testid={`key-press-${entry.keyData.code}`}\n    >\n      {/* Key label */}\n      <div style={keyLabelStyle}>\n        {entry.keyData.label}\n      </div>\n\n      {/* Key description */}\n      <div style={{ flex: 1 }}>\n        {/* Korean label */}\n        {entry.keyData.labelKorean && (\n          <div style={koreanLabelStyle}>\n            {entry.keyData.labelKorean}\n          </div>\n        )}\n\n        {/* Description (Korean | English) */}\n        {entry.keyData.descriptionKorean && entry.keyData.description && (\n          <div style={descriptionStyle}>\n            {entry.keyData.descriptionKorean} | {entry.keyData.description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nKeyPressEntryDisplay.displayName = 'KeyPressEntryDisplay';\n\n/**\n * InteractiveControlDemo Component\n * \n * Displays recently pressed keys with their actions.\n * Auto-fades entries after 2 seconds and maintains last 5 keys.\n * \n * @example\n * ```tsx\n * <InteractiveControlDemo\n *   pressedKeys={new Set(['Space', 'KeyW'])}\n *   isMobile={false}\n * />\n * ```\n */\nexport const InteractiveControlDemo: React.FC<InteractiveControlDemoProps> = ({\n  pressedKeys,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n  const [keyPresses, setKeyPresses] = useState<KeyPressEntry[]>([]);\n  const [currentTime, setCurrentTime] = useState(() => Date.now());\n\n  useEffect(() => {\n    let frameId: number;\n\n    const updateTime = () => {\n      setCurrentTime(Date.now());\n      frameId = window.requestAnimationFrame(updateTime);\n    };\n\n    frameId = window.requestAnimationFrame(updateTime);\n\n    return () => {\n      window.cancelAnimationFrame(frameId);\n    };\n  }, []);\n\n  useEffect(() => {\n    const currentCodes = Array.from(pressedKeys);\n\n    if (currentCodes.length === 0) {\n      return;\n    }\n\n    const now = Date.now();\n\n    setKeyPresses((prev) => {\n      let updated = prev;\n\n      currentCodes.forEach((code) => {\n        const alreadyRecorded = updated.some(\n          (entry) => entry.keyData.code === code && now - entry.timestamp < 100\n        );\n\n        if (!alreadyRecorded) {\n          const keyData = KEYBOARD_LAYOUT.find((k) => k.code === code);\n          if (keyData) {\n            const newEntry: KeyPressEntry = {\n              keyData,\n              timestamp: now,\n              id: `${code}-${now}`,\n            };\n            updated = [newEntry, ...updated];\n          }\n        }\n      });\n\n      if (updated.length > 5) {\n        updated = updated.slice(0, 5);\n      }\n\n      return updated === prev ? prev : updated;\n    });\n  }, [pressedKeys]);\n\n  useEffect(() => {\n    setKeyPresses((prev) =>\n      prev.filter((entry) => currentTime - entry.timestamp < 2000)\n    );\n  }, [currentTime]);\n\n  const getOpacity = (timestamp: number): number => {\n    const age = currentTime - timestamp;\n    const maxAge = 2000;\n    return Math.max(0, 1 - age / maxAge);\n  };\n\n  const containerStyle = useMemo(() => ({\n    position: 'fixed' as const,\n    bottom: isMobile ? '15px' : '20px',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: isMobile ? '8px' : '10px',\n    maxWidth: isMobile ? '90%' : '600px',\n    width: '100%',\n    padding: isMobile ? '12px' : '15px',\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n    borderRadius: '12px',\n    border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n    boxShadow: `\n      0 4px 20px ${hexToRgbaString(theme.colors.BLACK_SOLID, 0.5)},\n      0 0 15px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}\n    `,\n    pointerEvents: 'none' as const,\n    zIndex: 1000,\n  }), [isMobile, theme]);\n\n  const titleStyle = useMemo(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: isMobile ? '12px' : '13px',\n    fontWeight: 'bold' as const,\n    color: hexToRgbaString(theme.colors.ACCENT_GOLD),\n    textAlign: 'center' as const,\n    marginBottom: '4px',\n    textShadow: `0 0 8px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.5)}`,\n  }), [isMobile, theme]);\n\n  return (\n    <div style={containerStyle} data-testid=\"interactive-demo\">\n      {/* Title */}\n      <div style={titleStyle}>\n        최근 입력 | Recent Input\n      </div>\n\n      {/* Key press entries */}\n      {keyPresses.map((entry) => {\n        const opacity = getOpacity(entry.timestamp);\n        const categoryColor = getKeyCategoryColor(entry.keyData.category);\n\n        return (\n          <KeyPressEntryDisplay\n            key={entry.id}\n            entry={entry}\n            opacity={opacity}\n            categoryColor={categoryColor}\n            isMobile={isMobile}\n            theme={theme}\n          />\n        );\n      })}\n\n      {/* Empty state */}\n      {keyPresses.length === 0 && (\n        <div\n          style={{\n            fontFamily: FONT_FAMILY.KOREAN,\n            fontSize: isMobile ? '12px' : '13px',\n            color: hexToRgbaString(theme.colors.TEXT_TERTIARY),\n            textAlign: 'center' as const,\n            padding: '15px',\n          }}\n        >\n          키를 눌러서 액션을 확인하세요 | Press keys to see actions\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default InteractiveControlDemo;\n"],"mappings":"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"}