.bg_abs{position:absolute;margin:0}
#c2canvasdiv{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;margin:0;padding:0}
#c2canvasdiv.bg_canvas_abs_center{top:50%;left:50%;transform:translate(-50%,-50%)}
.bg_progression_bar{transform-origin:top;width:100%;height:12px;left:0;top:0;z-index:5}
.bg_progression_bar .frame{position:absolute;width:100%;height:100%;margin:0;background-color:rgba(0,0,0,0.75)}
.bg_progression_bar .bar{position:absolute;width:0;height:100%;left:0;transform:translateX(00%);background-color:rgba(255,216,2,1)}
.bg_progress_bar_text{position:absolute;font-size:20px;color:#fff;top:2px;margin:0;font-family:var(--default-font);font-weight:normal;text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black}
.bg_progress_bar_text.left{left:4px;text-align:left;transform-origin:top left}
.bg_progress_bar_text.right{right:4px;text-align:right;transform-origin:top right}
.it{width:80px;height:60px;background-position:-2px -2px}
.ko{width:80px;height:60px;background-position:-86px -2px}
.pt{width:80px;height:60px;background-position:-2px -66px}
.ru{width:80px;height:60px;background-position:-86px -66px}
.tr{width:80px;height:60px;background-position:-170px -2px}
.vi{width:80px;height:60px;background-position:-170px -66px}
.zh{width:80px;height:60px;background-position:-2px -130px}
.de{width:80px;height:60px;background-position:-86px -130px}
.en{width:80px;height:60px;background-position:-170px -130px}
.es{width:80px;height:60px;background-position:-254px -2px}
.fr{width:80px;height:60px;background-position:-254px -66px}
.hi{width:80px;height:60px;background-position:-254px -130px}
.bg_lang_dropdown{position:absolute;right:0;top:0;width:250px;transform-origin:top right;height:auto;display:none;z-index:7}
.bg_lang_dropdown .lang_container{position:absolute;display:inline-block;width:200px}
.bg_lang_dropdown .lang_name{pointer-events:none;font-family:var(--default-font);font-weight:normal;font-size:24px;user-select:none;text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black}
.bg_lang_dropdown .lang_selection{padding:8px 8px 8px 50px;border:1px solid #010102;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:rgba(42,44,50,1);color:#fff;max-height:22px}
.bg_lang_dropdown .lang_options{position:absolute;top:calc(100% + 10px);border:1px solid #010102;border-radius:8px;background:rgba(0,0,0,0.75);display:none;max-height:350px;overflow-y:auto;z-index:7;padding:0}
.bg_lang_dropdown .lang_options.two_col{grid-template-columns:1fr 1fr;width:200%}
.bg_lang_dropdown .lang_options.bg_aleft{left:0}
.bg_lang_dropdown .lang_options.bg_aright{right:0}
.lang_options .lang_option{background:rgba(64,51,53,1);padding:8px;cursor:pointer;display:flex;align-items:center;user-select:none;border-radius:4px;gap:8px;margin:6px 6px 6px 50px;position:relative;min-width:126px;max-height:22px}
.lang_options .lang_option:hover{background:rgba(0,0,0,0.75)}
.lang_selection .lang_flag{color:#fff}
.lang_options .lang_option .lang_flag,.lang_selection .lang_flag{position:absolute;transform:scale(0.4);transform-origin:left;left:10px;pointer-events:none;border-radius:0}
.lang_options .lang_option .lang_flag{color:#fff;left:-40px}
.bg_lang_dropdown .arrow{position:absolute;pointer-events:none;border:solid white;border-width:0 4px 4px 0;display:inline-block;padding:5px;z-index:7;right:15px;transform-origin:center}
.bg_lang_dropdown .up{transform:rotate(-135deg);top:calc(50% - 5px)}
.bg_lang_dropdown .down{transform:rotate(45deg);top:calc(50% - 10px)}
.bg_loading_bar{display:block;transform-origin:bottom;width:100%;height:20px;left:0;bottom:0;z-index:9}
.bg_loading_bar .bg_frame{position:absolute;width:100%;height:100%;margin:0;background-color:rgba(0,0,0,0.9);border-top:4px black #fff}
.bg_loading_bar .bg_bar{position:absolute;width:0;height:80%;top:10%;margin:0}
.bg_loading_bar .bg_bar .bg_text{position:absolute;right:5px;text-align:right;font-family:var(--default-font);font-weight:normal;color:#fff;top:2px;text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black}
.bg_loading_spinner{position:absolute;left:50%;top:50%;transform-origin:center;z-index:9}
.bg_loading_spinner .bg_avarater_character{left:calc(50% - 100px);top:calc(50% - 150px)}
.bg_loading_linear_endless{height:10px;width:100%;--c:no-repeat linear-gradient(#fff 0 0);background:var(--c),var(--c),rgba(0,0,0,0.9);background-size:60% 100%;animation:l16 3s infinite;position:absolute;bottom:80px}
.bg_loading_spinner .bg_spinner_logo{background-image:url(icon-128.png);position:absolute;left:calc(50% - 64px);top:calc(50% - 150px);transform-origin:center;width:128px;height:128px;border-radius:25px}
.bg_default_spinner{color:#fff}
.bg_default_spinner,.bg_default_spinner div,.bg_default_spinner div:after{box-sizing:border-box}
.bg_default_spinner{display:inline-block;position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% + 10px);transform-origin:center;transform:scale(1.5);z-index:9}
.bg_default_spinner div{animation:bg_default_spinner 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:40px 40px}
.bg_default_spinner div:after{content:" ";display:block;position:absolute;width:7.2px;height:7.2px;border-radius:50%;background:currentColor;margin:-3.6px 0 0 -3.6px}
.bg_default_spinner div:nth-child(1){animation-delay:-.036s}
.bg_default_spinner div:nth-child(1):after{top:62.62742px;left:62.62742px}
.bg_default_spinner div:nth-child(2){animation-delay:-.072s}
.bg_default_spinner div:nth-child(2):after{top:67.71281px;left:56px}
.bg_default_spinner div:nth-child(3){animation-delay:-.108s}
.bg_default_spinner div:nth-child(3):after{top:70.90963px;left:48.28221px}
.bg_default_spinner div:nth-child(4){animation-delay:-.144s}
.bg_default_spinner div:nth-child(4):after{top:72px;left:40px}
.bg_default_spinner div:nth-child(5){animation-delay:-.18s}
.bg_default_spinner div:nth-child(5):after{top:70.90963px;left:31.71779px}
.bg_default_spinner div:nth-child(6){animation-delay:-.216s}
.bg_default_spinner div:nth-child(6):after{top:67.71281px;left:24px}
.bg_default_spinner div:nth-child(7){animation-delay:-.252s}
.bg_default_spinner div:nth-child(7):after{top:62.62742px;left:17.37258px}
.bg_default_spinner div:nth-child(8){animation-delay:-.288s}
.bg_default_spinner div:nth-child(8):after{top:56px;left:12.28719px}
@keyframes bg_default_spinner {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.bg_avarater_character{position:absolute;width:200px;height:300px;margin:0;padding:0;z-index:5}
.bg_tutoial{position:absolute;left:0;top:0;z-index:5}
.bg_tutoial .bg_avarater_character{top:calc(50% + 110px);left:calc(50% - 300px);transform-origin:center;transform:scale(0.7)}
.bg_tutoial .text_container{position:absolute;width:350px;height:200px;top:90px;left:-110px;margin:0;padding:0;transform-origin:left}
.bg_tutoial .text_container .tuto_text{position:absolute;font-family:var(--default-font);font-weight:normal;z-index:9;font-size:clamp(20px,10vmin,30px);line-height:clamp(20px,10vmin,30px);min-height:100px;text-align:center;top:50%;left:0;transform:translate(0%,-50%);display:flex;justify-content:center;align-items:center;height:auto;width:100%;padding:1rem;border-radius:10px;background-color:rgba(0,0,0,0.75);transform-origin:center;text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black}
.bg_tutoial .text_container .tuto_text::after{content:"";position:absolute;top:50%;left:-30px;transform:translateY(-50%);border-width:15px;border-style:solid;border-color:transparent rgba(0,0,0,0.75) transparent transparent}
.bg_fixed_full_screen{position:fixed;width:100%;height:100%;left:0;top:0;margin:0;overflow:hidden!important}
.screen_rotate{background-image:linear-gradient(to bottom,#38249a,#38249a,#38249a);display:none;justify-content:center;align-items:center;flex-direction:column;z-index:10}
.screen_rotate .container{position:absolute;left:50%;top:50%;transform-origin:center}
.screen_rotate .container.portrait{transform:rotate(90deg)}
.screen_rotate .container.landscape{transform:rotate(0deg) scale(0.75)}
.screen_rotate .center{position:absolute;left:50%;top:50%}
.screen_rotate .phone{position:absolute;width:118px;height:228px;background-image:url(rotate_phone.png);left:-59px;top:-114px;transform-origin:center;animation:BG_PhoneRotate_Portrait 2.5s ease-in-out infinite forwards}
.screen_rotate .arrows{position:absolute;width:245px;height:353px;background-image:url(rotate_arrow.png);left:-122.5px;top:-176.5px;transform-origin:center;animation:BG_ArrowsRotate_Portait 2.5s ease-in-out infinite forwards}
@keyframes BG_PhoneRotate_Portrait {
0%{opacity:0;transform:rotate(0deg)}
25%{opacity:1;transform:rotate(0deg)}
55%{opacity:1;transform:rotate(-90deg)}
80%{opacity:0;transform:rotate(-90deg)}
100%{opacity:0;transform:rotate(-90deg)}
}
@keyframes BG_PhoneRotate_Landscape {
0%{transform:rotate(-90deg)}
50%{transform:rotate(0deg)}
100%{transform:rotate(-90deg)}
}
@keyframes BG_ArrowsRotate_Portait {
0%{opacity:0;transform:rotate(45deg)}
15%{opacity:0;transform:rotate(45deg)}
20%{opacity:1;transform:rotate(45deg)}
50%{opacity:1}
60%{opacity:0;transform:rotate(-270deg)}
75%{opacity:0;transform:rotate(-270deg)}
100%{opacity:0;transform:rotate(-270deg)}
}
