:root {
	--color_primary: rgba(177, 88, 170, 0.808);			/*background-color: var(--color_primary); /* Цвет фона для элементов */
	--color_secondary: rgba(27, 96, 101, 0.5);	/*background-color: var(--color_secondary); /* Цвет фона для элементов */
	--color_tertiary: rgb(27, 96, 101, 0.75);		/*background-color: var(--color_tertiary); /* Цвет фона для элементов */
	--color_font: rgba(255, 255, 255);		/*color: var(--color_font);*/
}

@font-face {/*подключаем нестандартые шрифты*/
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.ttf');
}
@font-face {/*разные иконки, папка*/
    font-family: 'larisa-script_rus';
    src: url('../fonts/larisa-script_rus.ttf');
}

.clear{/* если нужно отделить блоки чистой строкой. Создается класс "clear" это будет пустая строка*/
    clear: both;
}

html {height: 100vh;}
body {
    margin: 0;
    overflow: hidden;
    /* width: 100%;
    height: 100%; */
    background-image:url(../../game_content/img/background_info.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; /* центрируем, так как часть изображения может быть обрезана */
}


#game {
    position: relative;
    user-select: none;
    width: auto;
    height: 80vh;
    border: 1px solid #ddd;
    /* overflow-x: auto;
    overflow-y:hidden; */

    overflow: auto;
    overflow: hidden;
}
canvas {
    position: absolute;
    /*position: relative; /* Убедитесь, что canvas имеет относительное позиционирование */
    top: 0;
    left: 0;
    overflow: hidden;    
    /* background-blend-mode: multiply; */
    /* background: rgba(124, 197, 226, 0.466); */
    /* background-image:url(../../game_content/img/background_1.jpg); */
    display: block;
    margin: 0 auto;

    /* Адаптация экрана */
    width: auto; /* Ширина будет пропорциональной */
    height: 100%; /*Занимает всю высоту экрана */
    /*transform: scaleY(0.5); /* Масштабирование по Высоте */
    /*transform: scale(1); /* Масштабирование по умолчанию */
}


.controls {
    display: flex; /* Используем Flexbox для выстраивания кнопок в ряд */
    justify-content: space-between; /* Распределяем пространство между кнопками */
    align-items: center; /* Выравниваем кнопки по вертикали */
    width: 100%; /* Задаем ширину контейнера */
    max-width: 95%; /* Максимальная ширина контейнера (по желанию) */
    margin: 0 auto; /* Центрируем контейнер */
    position: fixed; /* Фиксируем панель управления */
    bottom: 0px; /* Расположение внизу */
    left: 50%; /* Центрируем по горизонтали */
    transform: translateX(-50%); /* Центрирование */
    z-index: 10; /* Убедитесь, что панель управления выше канваса */
}

.controls.hidden{/*скрываем блок класса*/
    display: none;/*скрыть блок*/
}
button { 
    user-select: none;
    width: 12vh;
    height: 12vh;
    padding: 1%;
    /* margin: 5%;
    margin-top: 1%;
    margin-bottom: 1%; */
    margin: 0; /* Убираем отступы у кнопок */
    border: 1px solid rgba(168, 168, 168, 0.541); /* Цвет и ширина бордера */ 
    background-color: lch(54.16% 2.76 256.24 / 0.438); /* Цвет фона */
    color: white; /* Цвет текста */
    border-radius: 50%; /* Круглая форма */
    cursor: pointer; /* Курсор при наведении */
    font-size: 5vh;
    box-shadow: 0.6vh 0.3vh 0.3vh rgb(77, 104, 161);
}

#jump {
    transition: transform 1s ease; /* Плавный переход для transform */
}


button:active {
    background-color: #5f7294; /* Цвет фона при нажатии */
    box-shadow: 0.3vh 0.15vh 0.15vh rgba(77, 104, 161, 0.568);
    transform: scale(0.95); /* Уменьшение размера кнопки при нажатии */
}


.info{/*скрываем блок класса*/
    display: none;/*скрыть блок*/
}


.pass.active {
    display: block;
    background-color: rgba(255, 223, 255, 0.77); /* Цвет фона при нажатии */
    box-shadow: 0.3vh 0.15vh 0.15vh rgba(77, 104, 161, 0.568);
    transform: scale(0.95); /* Уменьшение размера кнопки при нажатии */

    width: auto; /* Задайте ширину input */
    margin: 0 auto; /* Центрирует по горизонтали */

}

.pass{/*скрываем блок класса*/
    display: none;/*скрыть блок*/
}


.info.active {
    display: block;
    color: rgba(0, 0, 0, 0.705);
    max-height: 80vh; /* высота 50% от высоты экрана */
    width:75vw; /* ширина 50% от ширины экрана */
    position: absolute; /* позиционирование для активного блока */
    top: 5%; /* центрируем блок по вертикали */
    left: 2vw; /* центрируем блок по горизонтали */
    z-index: 1000; /* поднимаем активный блок над другими */
    /*background-color: var(--color_primary); /* Цвет фона для элементов */
    /*filter: brightness(0.5); /* Увеличивает яркость на 20%
    /*border: 1px solid #000;*/
    overflow: auto; /* Добавляет полосу прокрутки при необходимости */
    /* box-shadow: 6px 8px 11px 0px rgb(15, 58, 61), 10px 0px 13px -7px rgb(11, 41, 43), 0px 0px 0px 0px rgba(17, 66, 70, 0); */
    box-shadow: 0px 4px 8px rgba(11, 41, 43, 0.719); /* Тень только*/
    
    padding: 5vh;
    background-image:url(../../game_content/img/background_info.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; /* центрируем, так как часть изображения может быть обрезана */
    opacity: 0.9;                      /* Весь элемент с 50% прозрачностью */

    text-align: center;
    border-radius: 3vh; /*Отменяем: Скругляем углы	 */
    transition: 1s all ease; /* Выполнить Все (all) анимации*/
}

.info{/*скрываем блок класса*/
    display: none;/*скрыть блок*/
}


.info_text {
    font-size: 5vh;
    font-weight: normal;
    font-family: 'larisa-script_rus', sans-serif;		          
}
.info_text.album {
    font-size: 5vw;
   		          
}



/*******************************************    MOBILE    *************************************************************/

@media (max-width: 1000px) {
    .info{/*скрываем блок класса*/
        padding: 2vh;
    }

	p {
        font-size: 4vh;
        font-weight: normal;		          
    }




   
}