css massive change

Author: CyleAR

main.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Web Script Lain
 // @namespace    http://cyle.xyz
-// @version      1.14
+// @version      1.15
 // @description  Make me sad. Make me mad. Make me feel alright?
 // @author       Cyle
 // @match        https://3d.laingame.net/
@@ -15,7 +15,7 @@ GM_addStyle ( "#subtitle { font-family: Nanum Gothic; font-size: 28px !important
 const vttLink = 'https://raw.githubusercontent.com/CyleAR/web-script-lain/master/Translations/';
 const clareLink = 'https://raw.githubusercontent.com/nvfclaire/translain/master/Translations/'
 const flagLink = 'https://raw.githubusercontent.com/CyleAR/web-script-lain/master/miscs/';
-const languages = new Map([
+const locales = new Map([
     ['Korean', 'ko'],
     ['French', 'fr'],
     ['English', 'en'],
@@ -63,7 +63,7 @@ function waitTrackSrc()
 }
 
 function addButtons(div){
-    languages.forEach((value, key)=>{
+    locales.forEach((value, key)=>{
         let button = document.createElement('button');
         let addButtons = () => {
             button.id = value;
@@ -92,7 +92,7 @@ function currentLangScanner(){ //key : Korean, value : ko
     let target = document.querySelector('#' + currentLang);
     target.style.background = 'white';
     setInterval(()=>{
-        languages.forEach((value,key)=>{
+        locales.forEach((value,key)=>{
             let target = document.querySelector('#' + value);
             if(value !== currentLang){
                 target.style.background = 'none';
@@ -101,20 +101,29 @@ function currentLangScanner(){ //key : Korean, value : ko
     },500)
 }
 
-function createUI(){
+function createUI(){ // Add new UI div for locale buttons
     let langDiv = document.createElement('div');
     let addDiv = () =>{
-        langDiv.className = 'languages';
+        langDiv.className = 'locales';
         langDiv.style.height = '48px';
         langDiv.style.width = '800px'
-        langDiv.style.marginTop = '-48px';
+    }
+    let tweakRootDiv = () =>{
+        let target = document.querySelector('#root');
+        target.style.transform = 'translate(-50%, -50%)';
+        target.style.position = 'absolute';
+        target.style.top = '50%';
+        target.style.left = '50%'
+        target.prepend(langDiv);
     }
     let UIScanner = setInterval(() => {
         let target = document.querySelector('#root > div.game');
         if(target){
-            target.style.overflow = 'clip visible';
             clearInterval(UIScanner);
-            target.prepend(langDiv);
+            target.style.position = 'initial';
+            target.style.webkitTransform = 'translate(0)';
+            target.style.transform = 'translate(0)';
+            tweakRootDiv();
             addDiv();
             addButtons(langDiv);
             currentLangScanner();