:root {
    --height-header: 60px;
    --width-sidebar: 260px;
    --width-userMenu: 260px;
    --radius-block: 12px;


    /* background */
    --background-main: #3a8ce4; --background-main-DT: #1d538b; 
    --background-mainShade: #347ecd; --background-mainShade-DT: #2d5f93; 
    --background-body: #dfdfdf; --background-body-DT: #242424;

    --background-sidebar: #b5c2cf; --background-sidebar-DT: #1a1a1a;
    --background-sidebarShade: #98b5d4; --background-sidebarShade-DT: #272727;

    --background-success: #0080004d; --background-success-DT: #0080004d;
    --background-error: #ff00003d; --background-error-DT: #ff00003d;

    /* color */
    --color-main: #333;
    --color-link: #2e70b6; --color-link-DT: #99c0eb;
    
    --color-orange: #ffa500; --color-orange-DD: #b87700; --color-orange-D: #da8d00; --color-orange-L: #ffaf1b; --color-orange-LL: #ffb429;
    --color-green: #00b300; --color-green-DD: #005f00; --color-green-D: #009200; --color-green-L: #00d300; --color-green-LL: #00ff00;
    --color-red: #ff0101; --color-red-DD: #aa0000; --color-red-D: #d80000; --color-red-L: #ff1b1b; --color-red-LL: #ff3737;
    --color-gray: #808080; --color-gray-DD: #535353; --color-gray-D: #686868; --color-gray-L: #999999; --color-gray-LL: #b8b8b8; 
    --color-white: #fff;
    --color-black: #000000;
}


/* ТЕГИ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
BODY {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    background: var(--background-body);
    color: var(--color-main);
}
FIELDSET, HR {
    border: none;
    border-top: 1px solid var(--background-blockBorder);
}
LEGEND {
  margin: 0 auto;
  padding: 0 10px;
  color: var(--color-grayLight);
  font-size: 14px;
}

/* Ссылки */
A {
    text-decoration: none;
}
.link {
    color: var(--color-link);
    text-decoration: underline;
}
.link:hover {
    text-decoration: none;
}

/* header */
.header {
    height: var(--height-header);
    background: var(--background-main);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--background-body);
    gap: 6px;
}



/* main-content */
.main-content {
    margin: var(--height-header) 0 0 var(--width-sidebar);
    padding-bottom: 90px;
    min-height: calc(100vh - 60px);
    box-sizing: border-box;
    position: relative;
}


/* footer */
.footer {
    margin-left: var(--width-sidebar);
    background: #131313;
    color: white;
    padding: 50px;
}


/* sidebar */
.sidebar {
    background-color: var(--background-sidebar);
    width: var(--width-sidebar);
    margin-top: var(--height-header);
    height: calc(100% - var(--height-header));
    position: fixed;
    top: 0;
    transition: left 0.5s;
    z-index: 10;
    overflow: auto;
    scrollbar-width: thin;
    
}
.sidebar a:hover {background-color:var(--background-sidebarShade);}


/* wrapListMenu */
.wrapListMenu {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    padding: 0 4px 0 12px;
}
.listMenu {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    background-image: url('/public/img/menu.png');
    background-position: center top;
    filter: brightness(135%);
}
.listMenu:hover {
    background-position: center bottom;
}


/* Переключатель языков */
.wrapLangList {
    font-size: 18px; 
    padding: 4px 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    cursor: pointer; 
    color: white;
}
.langList {
    padding: 6px 0;
    background-color: var(--background-main);
    border-radius: 3px;
    position: absolute;
    width: 80px;
    margin-top: 6px;
  }
  .langList > a {
    padding: 8px 0;
    display: block;
    text-decoration: none;
    color: #fff;
    text-align: center;
  }
  .langList > a:hover {
    background-color: var(--background-mainShade);
  }


/* theme-switch */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 74px;
    height: 32px;
}
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background-main-DT);
    transition: 0.4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 3px;
    bottom: 3px;
    background-color: var(--background-main);
    transition: 0.4s;
    border-radius: 50%;
}
input:checked + .slider:before {
    transform: translateX(42px);
}


/* userMenu */
.userMenu {
    background-color: var(--background-block);
    width: var(--width-userMenu);
    margin-top: var(--height-header);
    height: calc(100% - var(--height-header));
    position: fixed;
    top: 0;
    transition: right 0.5s;
    z-index: 9;
    right: calc(-1 * var(--width-userMenu));
    overflow: auto;
    scrollbar-width: thin;
}



/* blockLogo */
.blockLogo {
    display: flex;
    height: 100%;
    flex: 0 0 var(--width-sidebar);
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 26px;
    color: var(--color-white);
}
.blockLogo:hover {
    background: var(--background-mainShade);
}



/* wrapLinkHeader */
.wrapLinkHeader {
    display: flex;
    height: 100%;
}

.wrapLinkHeader > * {
    display: flex;
    transition: 0.3s;
    cursor: pointer;
}
.wrapLinkHeader > *:hover {
    background: var(--background-mainShade);
}






/* popup */
#popup {
    background: #00000021;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 5;
    top: var(--height-header);
}
#popupFull {
    background: #0000004d;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    backdrop-filter: blur(10px);
}
#popupFull > div:nth-child(2) {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -100;
}





/* ACTIVE CLASSES */
.noActiveGame {
    opacity: 0.6; 
    filter: grayscale(85%);
}
.activeGame {
    background-color: var(--background-sidebarShade);
}
.activeUserMenu {right: 0 !important;}
.activeSidebar {left: 0 !important;}



/*/////////////////////////////////*/
/*////////// ТЁМНАЯ ТЕМА //////////*/
/*/////////////////////////////////*/
body.dark-theme {background: var(--background-body-DT); color: var(--color-white);}
body.dark-theme .link {color: var(--color-link-DT);}
body.dark-theme .header {background-color: var(--background-main-DT); border-bottom: 2px solid var(--background-body-DT);}
body.dark-theme .sidebar {background-color: var(--background-sidebar-DT);}
body.dark-theme .sidebar a:hover {background-color:var(--background-sidebarShade-DT);}
body.dark-theme .slider {background-color: var(--background-main);}
body.dark-theme .slider:before {background-color: var(--background-main-DT);}
body.dark-theme .userMenu {background-color: var(--background-block-DT);}
body.dark-theme .userMenu ul a:hover {background: var(--background-innerBlock-DT);}
body.dark-theme .listMenu {filter: none;}
body.dark-theme .blockLogo:hover {background: var(--background-mainShade-DT);}
body.dark-theme .langList {background-color: var(--background-main-DT);}
body.dark-theme .langList > a:hover {background: var(--background-mainShade-DT);}
body.dark-theme .activeGame {background-color: var(--background-sidebarShade-DT);}
body.dark-theme FIELDSET {border-top-color: var(--background-body-DT);}




/*/////////////////////////////////*/
/*////////// АДАПТИВНОСТЬ //////////*/
/*/////////////////////////////////*/
@media screen and (max-width: 1024px) {
    :root {
        --width-userMenu: 245px;
    }
    .wrapListMenu {display: flex;}
    .main-content {margin: var(--height-header) 0 0 0;} 
    .sidebar {left: calc(-1 * var(--width-sidebar));}
    .footer {margin-left: 0;}
    .blockLogo {flex: 0;}
}

@media screen and (max-width: 640px) {
    :root {
        --height-header: 50px;
        --width-sidebar: 225px;
        --width-userMenu: 230px;
    }
    .main-content {min-height: calc(100vh - 50px);}
    .blockLogo > div:nth-child(2) {display: none;}
    .blockLogo {gap: 2px; padding: 0 4px; font-size: 18px;}
    .blockLogo img {width: 38px !important;}
    .wrapLangList {font-size: 16px; padding: 4px 10px;}
    .langList {padding: 4px 0; width: 72px;}
    .langList > a {padding: 6px 0; font-size: 14px;}
    .theme-switch {width: 60px; height: 28px;}
    .slider::before {height: 22px; width: 22px;}
    input:checked + .slider:before {transform: translateX(32px);}
}

@media screen and (max-width: 480px) {
    :root {
        --width-sidebar: 200px;
        --width-userMenu: 220px;
    }
    .main-content {padding-bottom: 70px;}
    .wrapListMenu {flex: 0 0 26px; padding: 0 0px 0 4px;}
    .listMenu { background-size: 26px; width: 26px; height: 26px;}
    .wrapLangList {font-size: 14px; padding: 4px 10px;}
    .langList {padding: 3px 0; width: 66px;}
    .langList > a {padding: 6px 0; font-size: 14px;}
    .theme-switch {width: 56px; height: 26px;}
    .slider::before {height: 20px; width: 20px;}
    input:checked + .slider:before {transform: translateX(30px);}
}