:root {
    
    --height-header: 50px;
    --width-sidebar: 170px;
    --width-userMenu: 200px;


    /* background */
    --background-main: #DF6D61; --background-main-DT: color-mix(in srgb, var(--background-main) 50%, rgb(0, 25, 50)); 
    --background-mainShade: color-mix(in srgb, var(--background-main) 90%, rgb(0, 0, 0));  --background-mainShade-DT: color-mix(in srgb, var(--background-main-DT) 93%, rgb(255, 255, 255)); 

    --background-mainLight: color-mix(in srgb, var(--background-main) 5%, rgb(203, 203, 203));  --background-mainLight-DT: var(--background-main-DT);
    --background-mainLightShade: var(--background-main); --background-mainLightShade-DT: color-mix(in srgb, var(--background-main) 80%, rgb(0, 25, 50));

    --background-body: #FFE27F; --background-body-DT: #684E26;
    --background-bodyShade: #FFD37F; --background-bodyShade-DT: #643F22;

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

    --background-blue: #6ebdc7; --background-blue-DT: #00e2ff78;
    --background-pink: #c56dc5; --background-pink-DT: #b339a2;

    /* color */
    --color-main: color-mix(in srgb, var(--background-main) 35%, rgb(0, 0, 0));
    --color-link: color-mix(in srgb, var(--background-main) 80%, rgb(0, 0, 0)); --color-link-DT: color-mix(in srgb, var(--background-main) 50%, rgb(255, 255, 255));

    --color-white: #fff;
    --color-black: #000000;
    --color-gray: #808080;
    --color-grayDark: #5b5b5b;
    --color-grayLight: #a5a5a5;

    --color-green: #008000; --color-green-DT: #14f714;
    --color-red: #f00; --color-red-DT: #ff3131;

    --color-blue: #008495; --color-blue-DT: #32daf0;
    --color-pink: #c022c0; --color-pink-DT: #f177dd;
    --color-heart: #ff4f4f; --color-heart-DT: #ff8b8b;
    --color-system: #b97900; --color-system-DT: #FFC80F;

    --color-access: #008000; --color-access-DT: #72e872;
    --color-error: #f00; --color-error-DT: #f07171;
    
}





/* ТЕГИ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
BODY {
    font-family: Arial, sans-serif;
    font-size: 16px;
    background-image: repeating-linear-gradient( 90deg, var(--background-body) 0px 40px, var(--background-bodyShade) 40px 80px );
    color: var(--color-main);
}
FIELDSET {
    border: none;
    border-top: 1px solid var(--background-body);
}
LEGEND {
  margin: 0 auto;
  padding: 0 10px;
  color: var(--color-grayLight);
  font-size: 14px;
}
IMG {display: block;}

/* Ссылки */
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); */
    display: flex;
    gap: 6px;
    box-shadow: 0 2px 4px gray;
}


/* main-content */
.main-content {
    padding-top: var(--height-header);
    min-height: auto;
}


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



/* blockListMenu */
.blockListMenu {
    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/site/menu.png');
    background-position: center top;
    filter: brightness(135%);
}
.listMenu:hover {
    background-position: center bottom;
}


/* Переключатель языков */
.wrapLangBlock {
    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 {
    height: 30px;
    width: 30px;
    display: block;
    background: var(--background-main);
    border: 4px solid var(--background-main-DT);
    border-radius: 50%;
    cursor: pointer;
    margin: 0 auto;
}
.theme-switch:hover {
    background: var(--background-mainShade);
}
.theme-switch input {
    display: none;
}



/* userMenu */
.userMenu {
    background-color: var(--background-main);
    width: 200px;
    margin: var(--height-header) 0 0 0;
    position: fixed;
    top: 0;
    transition: right 0.5s;
    z-index: 9;
    right: -200px;
}
.userMenu ul {
    list-style-type: none;
}
.userMenu ul a {
    padding: 16px;
    text-align: center;
    color: var(--color-white);
    text-decoration: none;
    display: block;
}
.userMenu ul a:hover {
    background-color: var(--background-mainShade);
}



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

.blockLogin > * {
    display: flex;
    transition: 0.3s;
    cursor: pointer;
}

.blockLogin img[data-type="notification"]  {
    margin: 10px;
}
.blockLogin > *:hover {
    background: var(--background-mainShade);
}





/* noteCircle */
.noteCircle {
    position: absolute;
    border-radius: 20px;
    padding: 6px;
    border: 2px solid #fff;
}
.nc-24-6 {top: 24px; left: 6px;}
.nc-30-5 {top: 30px; left: 5px;}
.nc-34-34, .nc-34-34_ {top: 34px; left: 34px;}




/* 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%);
}

.activeUserMenu {right: 0 !important;}
.activeSidebar {left: 0 !important;}






/*/////////////////////////////////*/
/*////////// ТЁМНАЯ ТЕМА //////////*/
/*/////////////////////////////////*/
body.dark-theme {background-image: repeating-linear-gradient( 90deg, var(--background-body-DT) 0px 40px, var(--background-bodyShade-DT) 40px 80px ); 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 .userMenu {background-color: var(--background-main-DT);}
body.dark-theme .userMenu ul a:hover {background: var(--background-mainShade-DT);}
body.dark-theme .listMenu {filter: none;}
body.dark-theme .blockLogin > *: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 FIELDSET {border-top-color: var(--background-body-DT);}
body.dark-theme .c-blue {color: var(--color-blue-DT);}
body.dark-theme .c-pink {color: var(--color-pink-DT);}
body.dark-theme .c-heart {color: var(--color-heart-DT);}
body.dark-theme .c-system {color: var(--color-system-DT);}
body.dark-theme .b-blue {background-color: var(--background-blue-DT);}
body.dark-theme .b-pink {background-color: var(--background-pink-DT);}
body.dark-theme .theme-switch {background: var(--background-main-DT); border: 4px solid var(--background-main);}
body.dark-theme .theme-switch:hover {background: var(--background-mainShade-DT);}




/*/////////////////////////////////*/
/*////////// АДАПТИВНОСТЬ //////////*/
/*/////////////////////////////////*/
@media screen and (max-width: 1024px) {
    .blockListMenu {display: flex;}
}

@media screen and (max-width: 640px) {

}

@media screen and (max-width: 480px) {
    .header {gap: 4px;}
    .blockListMenu {flex: 0 0 26px; padding: 0 0px 0 4px;}
    .listMenu { background-size: 26px; width: 26px; height: 26px;}
}