/* PC 28/11/2025 11.32 */
/* Ноут 16/02/2026 20:57 */
/* Ноут 20/02/2026 14:00 */
/* ПК 10.03.2026 21:10 ЗАПРАЦЮВАЛА ШАХОВА ГРА !!!*/
/* ПК 28.03.2026 23:00 Налагоджені ходи, рокіровка, взяття на проході, заміна пішака на фігуру, шах, мат, пат */
/* 27.04.2026 12:27 */
/* 07.05.2026 22:10 Works according to Milestone 1 */

#id_window_rooms {
  align-self: center;
	margin: 1rem 0.75rem 0 0.75rem;
	width: 98%;
	/*aspect-ratio: 2.25 / 1;*/
	/*//height: 80vh;*/
	display: flex;
	flex-direction: column;
  /*flex-wrap: wrap;*/
	/*gap: 0.1vmax;*/
	gap: 0.25rem;

  /*border: 1px solid red;*/
  font-size: 2rem;
  /*height: 100rem;*/
}

#id_head_rooms {
  padding: 1rem;
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  background-color: rgba(31, 41, 55, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(138, 43, 226, 0.3);
  border-radius: 0.75rem;
}

#chess_style_radio,
#table_style_radio,
#time_style_radio
{
  /* 09.05.2026 width: 12rem;*/
  width: 35rem;
  height: 11rem;

  margin: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: rgb(10, 50, 55);
  border: 1px solid rgb(74, 85, 104);
  border-radius: 0.5rem;
  box-shadow: 2px 2px 3px 0px azure;
  transition: background-color 0.12s;
}

#chess_style_radio{
  /* 09.05.2026 */
  display: none;
  box-shadow: -2px 2px 3px 0px azure;
}

#table_style_radio{
  /* 09.05.2026 */

  align-items: stretch;
  justify-content: space-around;
}

#time_style_radio{
  /* 09.05.2026 box-shadow: 0px 2px 3px 0px azure;*/
  box-shadow: -2px 2px 3px 0px azure;

}



#time_style_radio
{
  width: 35rem;
}




#chess_style_title,
#table_style_title,
#time_style_title
{
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0px 2px 2px rgb(130, 140, 10);
}

#chess_style_radio:hover,
#table_style_radio:hover,
#time_style_radio:hover
{
  background-color: rgb(14, 70, 80);
}

#chess_style_radio:hover #chess_style_title,
#table_style_radio:hover #table_style_title,
#time_style_radio:hover #time_style_title
{
  color: rgb(190, 230, 30);
}

.radio-label {
  width: 100%;
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
  /*gap:0.15rem;*/
  cursor: pointer;
  font-size: 1rem;
  color: rgb(250, 220, 240);
  transition: color 0.2s;
}

.radio-label:hover {
  color: rgb(64, 224, 208);
  /*font-weight: bold;*/
  /*text-shadow: 0 0 8px rgba(64, 224, 208, 0.6);*/
  /*text-shadow: 0 0 5px #40E0D0, 0 0 15px rgba(64, 224, 208, 0.3);*/
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

 .radio-chess-room {
  margin-right: 0.5rem;
}

.block-time-style
{
  display: flex;
}

.block-table-style
{
  display: flex;
}


#block_time_style{
  justify-content: center;
}

#block_table_style{
  justify-content: right;
}


.radio-label-center{
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.0rem;
  color: rgb(250, 220, 240);
  transition: color 0.2s;
}

.radio-label-right{
  width: 50%;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.0rem;
  color: rgb(250, 220, 240);
  transition: color 0.2s;
}

.radio-label-center:hover,
.radio-label-right:hover
{
  color: rgb(64, 224, 208);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}













#id_main_rooms{
  height: 22rem;

  padding: 1rem;
	display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  gap: 1rem; 


  background-color: rgba(31, 41, 55, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(138, 43, 226, 0.3);
  border-radius: 0.75rem;

  overflow-x: hidden;
  overflow-y: auto;

}

/* Контейнер, який ми стилізуємо */
#id_main_rooms {
    overflow-y: auto;
    scrollbar-width: thin; /* Для Firefox */
    scrollbar-color: #769656 #2c2e31; /* Для Firefox (повзунок / фон) */

scroll-snap-type: x mandatory; /* Активуємо скрол-снап по осі X */    

}

/* Налаштування для Chrome, Safari, Edge, Opera та мобільних WebKit браузерів */
#id_main_rooms::-webkit-scrollbar {
    width: 8px; /* Ширина вертикального скролу */
}

#id_main_rooms::-webkit-scrollbar-track {
    background: #1b1c1e; /* Темний фон доріжки */
    border-radius: 10px;
}

#id_main_rooms::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #769656 0%, #4a5f36 100%); /* Зелений ігровий градієнт */
    border-radius: 10px;
    border: 1px solid #1b1c1e; /* Невеликий відступ */
}

#id_main_rooms::-webkit-scrollbar-thumb:hover {
    background: #95bb71; /* Ефект при наведенні */
}

/* --------------------------------------------------------- */

.dynamic-table{
  width: 19rem;
  aspect-ratio: 1152 / 896; 

  font-size: 1.25rem;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between; 

  /*background-image: linear-gradient(to bottom, rgb(224, 234, 252), rgb(160, 181, 209), var(--img) );*/

  /*background-image: var(--img), linear-gradient( to bottom, rgb(224, 234, 252), rgb(160, 181, 209) );*/

  /*background-size: cover;*/

  /*background-size: 100% 100%, cover;*/
  /*background-size: 100% 100%;*/

  /*background-size: contain, cover;*/
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /*background-position: center bottom; /* стіл "стоятиме" на підлозі */

  background-clip: content-box; /*Це встановлення фону з урахуванням до початку padding */

  border: 1px outset rgb(76, 118, 76);
  border-radius: 1rem;

  color: rgb(50, 80, 80);

  /*background-image: url('your-image.png'), linear-gradient(to bottom, rgb(224, 234, 252), rgb(207, 222, 243));*/

  /*background-image: linear-gradient(to bottom, rgb(224, 234, 252), rgb(160, 181, 209));*/
  /*background-color: linear-gradient(to bottom, rgb(224, 234, 252), rgb(160, 181, 209));*/


}


/*[id^="stil"] {}*/


.header-stil{
  flex: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

  .nomer_stola{
    font-weight: bold;
    text-shadow: 0 2px 2px rgb(0, 0, 100);
    color: rgb(200, 20, 20);
    /*color: rgb(80, 115, 255);*/
  }

  .name-stil{
    margin-top: 0.5rem;
    color: rgb(100, 190, 0);
    font-weight: 700;
    text-shadow: 
        0px 2px 4px rgba(0, 0, 0, 0.3),  /* М'яка тінь знизу */
        0px 4px 10px rgba(0, 0, 0, 0.1), /* Глибока розсіяна тінь */
        0px -1px 1px rgba(0, 0, 150, 0.9);  /* Тонкий контур для чіткості */

  }
  .time-stil{
    color: rgb(140, 0, 140);
    font-weight: bold;
    /*text-shadow: 1px 1px 2px rgb(15,255,175);*/

    text-shadow: 
        0px 2px 4px rgba(0, 0, 0, 0.3),  /* М'яка тінь знизу */
        0px 4px 10px rgba(0, 0, 0, 0.1), /* Глибока розсіяна тінь */
        0px -1px 1px rgba(0, 0, 150, 0.9);  /* Тонкий контур для чіткості */
  }

.main-stil{
  flex: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: flex-start;*/
  justify-content: center;
  /*border: 1px solid red;*/
}
  .join-stil,
  .waiting-stil,
  .leave-stil,
  .watch-stil
  {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 5rem;
    aspect-ratio: 5 / 3;
    font-size: 1.2rem;
    font-weight: 800;
    color: rgb(255, 255, 50);
    text-shadow: 0px 1px 1px navy;

    /*background-color: rgb(255, 100, 70);*/

    background-color: rgb(60, 124, 241);

    border: 1px solid purple;
    border-radius: 1rem;
  }
  .join-stil:hover,
  .waiting-stil:hover,
  .leave-stil:hover,
  .watch-stil:hover
  {
    color: rgb(255, 255, 50);
    background-color: rgb(255, 50, 100);
    box-shadow: 
        0px 2px 4px rgba(0, 0, 0, 0.3),  /* М'яка тінь знизу */
        0px 4px 10px rgba(0, 0, 0, 0.1), /* Глибока розсіяна тінь */
        0px -1px 1px rgba(0, 0, 150, 0.9);  /* Тонкий контур для чіткості */

  }

  .waiting-stil,
  .leave-stil,
  .watch-stil
  {
    display: none;
    background-color: rgb(17, 143, 126);
    border: 1px solid rgb(2, 0, 128);
  }

  .waiting-stil{
    color:white;
  }



.footer-stil{
  flex: 0.5;
  padding: 0.5rem 2rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  
}
  .p1name-stil{
    /*138 43 226*/
    /*text-shadow: 0px -1px 4px rgb(125,125,150);*/
    font-weight: 500;
    text-shadow: 
        0px 2px 4px rgba(0, 0, 0, 0.3),  /* М'яка тінь знизу */
        0px 4px 10px rgba(0, 0, 0, 0.1), /* Глибока розсіяна тінь */
        0px -1px 1px rgba(0, 0, 150, 0.9);  /* Тонкий контур для чіткості */

  }
  .p2name-stil{
    /*text-shadow: 0px -1px 4px rgb(125,125,150);*/
    color: rgb(0, 0, 150);
    font-weight: 500;
    text-shadow: 
        0px 2px 4px rgba(0, 0, 0, 0.3),  /* М'яка тінь знизу */
        0px 4px 10px rgba(0, 0, 0, 0.1), /* Глибока розсіяна тінь */
        0px -1px 1px rgba(0, 0, 150, 0.9);  /* Тонкий контур для чіткості */
   
  }


/*  ---------------------- MODAL WINDOW DOUBLE PLAYER ------------------------------------ */


/*  ---------------------------------------------------------------------------------------- */















/*
.white_stilec{
  padding: 0.25rem;
  flex:1;
  display: flex;
  flex-direction: column;
  color: rgb(100, 100, 100);
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.99);
  
}



.stolyk{
  flex:3;
  border: 1px solid red;

}

.black_stilec{
  flex:1;
  display: flex;
  flex-direction: column;
   border: 1px solid red;
}

.napys_white{
  display: flex;
  justify-content: left;
}
.napys_black{
  display: flex;
  justify-content: right;
}
*/






/* ---------------------------------------------------------------------------------------- */
#id_window_board {
	align-self: center;
	margin: 1rem 0.75rem 0 0.75rem;
	width: 98%;
	/*aspect-ratio: 2.25 / 1;*/
	/*//height: 80vh;*/
	display: flex;
	flex-direction: column;
	/*gap: 0.1vmax;*/
	gap: 0.1rem;
}

.window-board {
	color: white;
	border: 1px solid red;
}


.sub-wb {
	flex: auto;
}

#sub_wb1 {
	position: relative;
	/*height: 3vmax;*/
	width: 100%;
	height: 2rem;
	
	flex: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	/*border: 1px solid rgb(100, 100, 100);	*/
	border-radius: 3px 3px 0 0;
}

#sub_wb2 {
	position: relative;
	flex: auto;
	display: flex;
	justify-content: center;
	overflow: hidden;
	/*gap: 0.1vmax;*/
	gap: 0.1rem;

}

	#sub_wb_rivals{
		position: absolute;
		left: 0;
	}
	#sub_wb_rivals p span{
		font-weight: bold;
		color: brown;
	}

#chess_set_div{/* Налаштування виду шахової дошки та фігур  */
	position: absolute;

	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;

	/*background-color: rgb(30, 30, 30);*/
	/*border: 1px solid red;*/
	z-index: 100;
}



	#chess_set_block{
		padding: 1rem;
		display: flex;
		flex-direction: column;

		background-color: rgba(30, 60, 30, 0.5);
		backdrop-filter: blur(15px);
	  -webkit-backdrop-filter: blur(15px);

		border: 1px solid rgb(0, 50, 100);
	
	}

	#chess_set_p{
		margin-bottom: 2rem;
		font-size: 2rem;
		letter-spacing: 1px;
		text-shadow: 2px 2px 4px #000;
	}

	#chess_set_galery{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: space-evenly;
		gap: 1rem;
	}

	.gallery {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
	}


	/* коли img у контейнері наведено */
	.gallery:hover p {
		/*color: rgb(180, 30, 0); */
		color: rgb(0, 229, 255); /* змінюємо колір <p> */
		
	}

	.gallery img {
		width: 100%;
		height: 20rem;
		object-fit: cover;
		border-radius: 12px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.4);
		/*opacity: 0;*/
		transform: scale(0.97);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.3s ease;
		cursor: pointer;
	}

	.gallery img.loaded {
		/*opacity: 1;*/
		transform: scale(1);
	}

	.gallery img:hover {
		transform: scale(1.05);
		box-shadow: 0 6px 15px rgba(0,0,0,0.6);
	}

	.gallery p{
		margin-bottom: 2rem;
		font-size: 1.5rem;
		letter-spacing: 1px;
		text-shadow: 2px 2px 4px #000;
	}


#sub_wb2_1 {/* Блок з юзерами і налаштуваннями */
	padding: 0.5rem;
	max-height: 35rem;
	gap: 0.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	/*justify-content: space-between;*/
	/*justify-content: flex-start;*/
	align-items: flex-start;
	border: 1px solid rgb(100, 100, 100);	
}

	#id_list_players{
/*	max-height: 5rem;*/

		padding: 0.25rem;
		flex: 1;
		display: flex;
		/*flex-direction: column;*/
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: flex-start;
		/**gap: 0.5rem;*/


/*
		justify-content: left;
		align-items: flex-start;
*/
		/*justify-content: space-around;*/
/*
		gap: 0.50rem;
		row-gap: 0.5rem;
	*/	

		
		/*border: 1px solid red;*/
		overflow-y: auto;
		overflow-x: hidden;
	}
		.list-players{
			margin-right: 1rem;
			margin-bottom: 1rem;

			padding: 0.25rem;
			width: 6rem;
			height: 2rem;
			font-size: 1.0rem;
			text-align: center;
			word-break: break-all;

				display: flex;
				justify-content: center;
				align-items: center;
			
			border-radius: 0.5rem;
			cursor: pointer;
			box-shadow: 0 0 5px rgba(255, 255, 255, 1.0);
		}
		.list-players:hover{
			color: coral;
			background-color: rgb(0, 100, 100);
		}
		/* Білий колір фігур у гравця*/
		.w-p{
			color: black; 
			/*text-shadow: 1px 1px 2px white, -1px -1px 2px white;*/

			background-color: rgb(240, 217, 181);
			border: 1px solid rgb(0, 50, 100);
		}

		/* Чорний колір фігур у гравця*/
		.b-p{
			/*color: black; text-shadow: 1px 1px 2px white, -1px -1px 2px white;*/
			text-shadow: 1px 1px 2px black, -1px -1px 2px black;
			background-color: rgb(0, 50, 100);
			border: 1px solid gold;

		}

		/* Випадковий (рандомний) колір фігур у гравця*/
		.r-p{
			position: relative; /* обов’язково для ::after */
			/*font-weight: bold;*/
			background: linear-gradient(
			to right,
			rgb(0, 50, 100) 45%,
			rgb(120, 130, 150) 50%,
			rgb(240, 217, 181) 55%
			);
			color: white;
			text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
			text-align: center;
			/*border-radius: 8px;*/
			overflow: hidden; /* щоб псевдоелемент не виходив */
		}

			/* накладання правої частини тексту з темним кольором */
			.r-p::after {
				content: attr(data-text);
				position: absolute;
				inset: 0;
				display: flex;
				justify-content: center;
				align-items: center;

				color: rgb(0, 50, 100);
				clip-path: inset(0 0 0 50%);
				pointer-events: none; /* щоб не заважав клікам */
			}

			/* Гравець в режимі спостереження*/
			.o-p{

				color: rgb(179, 19, 21); 
				text-shadow: 1px 1px 2px rgba(243, 214, 85, 0.99);
				/*text-shadow: 1px 1px 2px white, -1px -1px 2px white;*/

				background-color: rgb(215, 217, 223);
				border: 1px solid rgb(0, 0, 100);

			}

			/* Гравець в режимі очікування відповіді суперника на запрошення на гру*/
			.h-p{

				color: white; 
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.99);
				/*text-shadow: 1px 1px 2px white, -1px -1px 2px white;*/

				background:linear-gradient(to right, rgba(200, 0, 0, 1.0), rgba(200, 200, 0, 1.0), rgba(0, 200, 0, 1.0));
				border: 1px solid rgb(0, 0, 200);

			}



			/* Гравець в режимі гри в шахи */
			.p-p{
				color: black; 
				text-shadow: 1px 1px 2px rgba(250,250,250,0.99);
				/*text-shadow: 1px 1px 2px white, -1px -1px 2px white;*/
				background-color: rgb(120, 130, 150);
				border: 1px solid rgb(0, 50, 10);
			}

			/*Установка вибраної дошки і фігур */
			.cs-p{
				color: rgb(255, 228, 196);
    		background-color: rgb(34, 114, 139);				
				text-shadow: 1px 1px 2px rgba(50,0,0,0.99);
				border: 1px solid rgb(200, 150, 0);
			}


			/* Гравець натиснув кнопку New Game */
			.ng-p{
				color: rgb(112, 9, 52);
    		background-color: rgb(200, 200, 100);
				text-shadow: 1px 1px 2px rgba(250,250,250,0.99);
				/*text-shadow: 1px 1px 2px white, -1px -1px 2px white;*/
				border: 1px solid rgb(0, 0, 100);
			}
/* ----------------------------------------------------------------------------------------------------  */
/* Контейнер, який закриває все. Робить фон трохи затемненим і дозволяє клік поза меню. */
.dynamic-menu-container {
    position: fixed; /* Фіксоване положення, щоб покрити весь екран */
		display: flex;
		justify-content: center;
		align-items: center;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.5);  /*Можна додати легку напівпрозору заливку*/
		background-color: rgba(30, 30, 30, 0.3);
		backdrop-filter: blur(2px);
	  -webkit-backdrop-filter: blur(2px);


    z-index: 1000; /* Гарантуємо, що меню буде поверх інших елементів */
}

/* Вікно самого меню */
.dynamic-menu-window {
    position: absolute; /* Позиціонування відносно контейнера (або body, якщо ви приберете контейнер) */
    /*top: 50px; /* Приклад: можна змінити, щоб меню з'явилося під кнопкою */
    /*left: 20px;*/
    padding: 0.5rem;
    min-width: 10rem;
    display: flex;
    flex-direction: column; /* Вертикальне розташування */

    background-color: rgba(30,30,30,0.9);
    border: 1px solid #ccc;

    box-shadow: 0 4px 8px rgba(0, 0, 100, 0.91);
    border-radius: 4px;
}

/* Заголовок у випадаючому вікні*/
.dynamic-menu-header{
	padding: 0.5rem;
	color: rgb(255,50,0);
	text-shadow: 0 1px 1px wheat;
	font-size: 1.5rem;
}

/* Окремий пункт меню */
.dynamic-menu-item {
    padding: 0.75rem 0.75rem;
    cursor: pointer;
    text-align: left;
		font-size: 1.75rem;
		color: rgb(200, 200, 0);

    transition: background-color 0.125s;
}

/* Ефект при наведенні */
.dynamic-menu-item:hover {
	color: rgb(250, 50, 50);
	text-shadow: 0 1px 1px navy;
  background-color: rgb(0, 229, 255)

}

/* -----------------------------------------------------------------------------------------------------  */

	#id_setup_board{ /* Налаштування гри */
		padding: 1.0rem 0.5rem;
		position: absolute;

		/*justify-self: anchor-center;*/
		align-self: center;

		display: none;
		flex-direction: column;
		/*font-size: 1.5rem;*/

		background-color: rgba(10,10,50,0.99);
		border: 1px solid rgb(100, 100, 100);	
		border-radius: 0.5rem;
		box-shadow: 0.2rem 0.2rem 0.2rem rgba(138, 43, 226, 0.3),
		-0.2rem -0.2rem 0.2rem rgba(200,200,200, 0.75);
		z-index: 100;
	}

	.input-chess-radiobutton{
		font-size: 1rem;
		width: 1rem;
		height: 1rem;
	}

		#id_setup_board label{
			font-size: 1.25rem;
		}



	#div_start_setup{
		display: flex;
		width: 100%;
		justify-content: space-evenly;
	}

	#setup_game_btn,
	#cancel_game_btn,
	#start_game_btn,
	/*#chess_set_btn,*/
	#game_set_btn,
	#back_start_setup_btn,
	#ok_start_setup_btn
	{
		width: 7.5rem;
		align-self: center;
		margin: 0 0.25rem 0.25rem 0;
		padding: 0.25rem 0.5rem;
		font-size: 1.125rem;
		color: rgb(255, 228, 196);
		background-color: rgb(34, 114, 139);
		/*border-radius: 1rem;*/
		cursor: pointer;
	}

  /*#chess_set_btn{    display: flex;  }*/




.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    /*backdrop-filter: blur(10px);*/
    backdrop-filter: none;
    
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    
    /* Початковий стан для анімації */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Клас, який ми будемо додавати через JS */
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content-chess-set {
  /*width: 80vw;  height: 80vh;*/
  width: auto;  height: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /*background: rgba(240, 217, 181, 0.5);*/
  background: rgba(100, 100, 100, 1);
  padding: 2rem;
  border-radius: 2rem;
  /*border: 3px solid rgba(181, 136, 99, 0.5);*/
  border: 3px solid rgba(50, 50, 50, 1);
  /*box-shadow: 0 1rem 2rem rgba(255, 255, 25, 0.5);*/
  transform: translateY(1rem);
  transition: transform 0.2s ease;
}
/*
Вміст трохи піднімається при появі
.modal-overlay.active .modal-content-chess-set {
    transform: translateY(1rem);   
}
*/

#chess_set_btn,
#change_avatar_btn {
/*  
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 12px;
    background: rgb(5, 6, 104);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.5s ease;
*/

  width: auto;
	align-self: center;
	margin: 1rem;
	padding: 0.5rem 0.5rem;
	font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
	color: rgb(255, 228, 196);
	background-color: rgb(34, 114, 139);
  border: none;
	border-radius: 0.5rem;
	cursor: pointer;
  transition:  translateY(-2px) 0.15s ease-out;
}

#chess_set_btn:hover,
#change_avatar_btn:hover {
  background-color: rgb(70, 180, 200);
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.5);
}


#chess_set_btn_exit {
	padding: 0.5rem 0.5rem;
	font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
	border-radius: 3px;
  color:yellow;
  background: rgb(40, 50, 255);
  cursor: pointer;
  box-shadow: 0 0.5rem 1rem rgba(100,50,70,0.5);
  transition: all 0.2s ease;
}

#change_avatar_btn {
	/*color: rgb(16, 28, 255);*/
 background: rgb(100, 50, 100);
}












































	#back_start_setup_btn{
		background-color: rgb(9, 52, 112);
		width: 5rem;
	}
	#ok_start_setup_btn{
		width: 5rem;
		background-color: rgb(34, 139, 34);
	}

	/*#setup_game_btn{background-color: rgb(112, 9, 52);	}*/

	#cancel_game_btn{background-color: rgb(9, 52, 112);}
	#start_game_btn{
		background-color: rgb(34, 139, 34);
	}

		

	#game_set_btn{
		color: rgb(112, 9, 52);
		background-color: rgb(200, 200, 100);
	}




#game_modes,
#choose_color,
#chess_style,
#game_invitation,
#time_control{
  position: relative;
  margin: 1.0rem;
  padding: 0.3rem;
	font-size: 1.1rem;


  display: flex;
  background-color: rgba(230, 230, 230, 0.1);
  border: 1px ridge gray;
  box-shadow: 1px 1px 2px rgba(100,100,100,0.5);
  border-radius: 0.3rem;
}               

#game_modes,
#chess_style{
	flex-direction: column;
}

	
	#p_game_modes,
  #p_chess_style,
	#p_choose_color,
	#p_game_invitation,
	#p_time_control{
    position: absolute;
		width: fit-content;

		font-size: 1rem;

    color: rgb(250,250,150);
    text-shadow: 1px 1px 1px black;
    background-color: rgba(230, 230, 230, 0.0001);
    transform: translate(5%, -1.5rem);
  }

	#game_invitation{
		width: 50%;
	}

	#levelGI,
	#levelTC{
		font-size: 1.25rem;
		width: 100%;
	}

	.gm,
	.chs,
	.cc{
    padding: 3px;
  }

	.gm label,
  .chs label,
	.cc label{
		cursor: pointer;
	}

	/*#chs1,  #cc1,	#cc2{    padding-top:10px;  }*/

	#chs3{/* ТИМЧАСОВО ЩОБ НЕ ВІДВОЛІКАЛО*/
		display: none;
	}


	#levelAI{
		font-size: 1.25rem;
		width: auto;
		height: 2rem;
	}	


#sub_wb2_2 {/* Дошка*/
	/*flex: 2;*/
	/*width: 46vmax;*/
	width: 40rem;
	/*aspect-ratio: 3 / 1;*/
	display: flex;
	flex-direction: column;
	align-items: center;

	/*border: 1px solid rgba(100, 70, 50, 1.0);*/
	border: 1px solid rgba(100, 100, 100, 1.0);

		user-select: none;      /* Забороняє виділення */
		-webkit-user-select: none; /* Для Safari */
		-moz-user-select: none;    /* Для Firefox */
		-ms-user-select: none;     /* Для старих IE */		

	font-family: var(--font-family);
	background-color: var(--dark-side-board);
}
 .hovanka{
	opacity: 0;
  transition: opacity 0.2s ease;
 }

	#sub_wb2_2_1{
		width: fit-content;
		display: flex;
		justify-content: center;

		/*
		gap: 3.4rem;
		font-size: 1.0rem;
		*/
/*
gap: 3.25rem;
font-size: 1.3rem;
*/

gap: var(--cell-litera-gap);
font-size: var(--cell-litera-font-size);

		/*background-color: rgba(100, 70, 50, 0.5);*/

		/*background-color: var(--dark-side-board);*/


	}

	#sub_wb2_2_2{/* Блок дошки*/
		width: 100%;
		display: flex;
		justify-content: center;
		/*background-color: rgba(100, 70, 50, 0.5);*/
		/*background-color: var(--dark-side-board);*/

	}

		#sub_wb2_2_2_1{
			flex: 1;
			display: flex;
		}
			#sub_wb2_2_2_1_1{
				flex: 1.5;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				
			}

			#b_zapas{
				flex: 1.5;
				display: none;/* Приховані фігури на боковій панелі*/
				/*flex-direction: column-reverse;*/
				flex-direction: column;
				justify-content: start;
				/*gap: 0.5rem;*/
			}

			#w_zapas{
				flex: 1.5;
				display: none;/* Приховані фігури на боковій панелі*/
				flex-direction: column;
				justify-content: end;
				/*gap: 0.5rem;*/
			}


			#w_king_queen,
			#w_rook_pawn,
			#w_knight_bishop,
			#b_king_queen,
			#b_rook_pawn,
			#b_knight_bishop{
				/**margin: 0.25rem 0;*/
				display: flex;
/*
				justify-content: space-between;
				align-items: center;
*/
				flex-direction: column;
				justify-content: space-evenly;

				cursor: pointer;
			}

				.king-queen,
				.knight-bishop,
				.rook-pawn{
					/*position: relative;*/
					display: flex;
					height: 2.6rem;
					flex-direction: column;
					/*justify-content: space-evenly;*/
					/*
					justify-content: center;
					align-items: center;
					*/
				}

				.w-new-figure{
					width: 2.5rem;
					/*background-color: rgb(181, 136, 99);*/
				}


				#span_b_king,
				#span_b_queen,
				#span_b_knight,
				#span_b_bishop,
				#span_b_rook,
				#span_b_pawn,
				#span_w_king,
				#span_w_queen,
				#span_w_knight,
				#span_w_bishop,
				#span_w_rook,
				#span_w_pawn{
					display: none;
					color: red;
					text-shadow: 1px 1px 1px black, -1px -1px 1px black;
					font-weight: bold;
					font-size: 1.0rem;
				}

				#w_pawn,
				#b_pawn{
					visibility: hidden;
				}

			

			#sub_wb2_2_2_1_2{
				/*flex: 1;*/
				display: flex;
				flex-direction: column;
				align-items: end;
				justify-content: center;
/*
gap: 2.7rem;
font-size: 1.3rem;
*/

gap: var(--cell-number-gap);
font-size: var(--cell-number-font-size);

				/*border: 1px solid gold;*/

			}

		#sub_wb2_2_2_2{/* Бордер дошки*/
			flex: 8;
			/*padding: 0.35vmax;*/

			display: flex;
			justify-content: center;
			align-items: center;
			/*flex: auto;*/
			/*width: 40vmax;*/
			aspect-ratio: 1 / 1;

			/*border: 1.0vmax double rgb(200, 180, 140);		*/
			border: 1.0rem double rgb(200, 180, 140);		
			/*background-color: rgb(6, 65, 104);*/

				
		}
			#main_doshka{/* Тіло дошка*/
				position: relative;
				width: 100%;
				aspect-ratio: 1 / 1;

				display: grid;
				grid-template-columns: repeat(8, 12.5%);
				grid-template-rows: repeat(8, 12.5%);
				border: 1px solid rgba(181, 136, 99, 0.5);

			}

		#sub_wb2_2_2_3{
			flex: 1;
			display: flex;
		}

			#sub_wb2_2_2_3_1{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: start;
				justify-content: center;
				/*gap: 2.5rem;
				font-size: 1.0rem;*/
/*
gap: 2.7rem;
font-size: 1.3rem;
*/

gap: var(--cell-number-gap);
font-size: var(--cell-number-font-size);

			}
				.b-new-figure{
					width: 2.5rem;
					/*width: 1.3rem;*/
					/*background-color: rgb(181, 136, 99);*/
				}


			#sub_wb2_2_2_3_2{
				flex: 1.25;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

        color: bisque;
				font-weight: bolder;

				/*
				font-weight: bolder;
				text-shadow: 1px 1px 2px rgb(100, 0, 0), -1px -1px 2px rgb(100, 0, 0);
        */

				/*gap: 0.5vmax;*/
				/*font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/

			  /*font-family: 'Newsreader', -apple-system, BlinkMacSystemFont, 'Segoe UI', Georgia, serif;*/
/* 09.05.2026 */
        font-family: var(--font-family);

			}



	#sub_wb2_2_3{
		display: flex;
		justify-content: center;
		/*gap: 3.4rem;
		font-size: 1.0rem;*/

/*
gap: 3.25rem;
font-size: 1.3rem;
*/
gap: var(--cell-litera-gap);
font-size: var(--cell-litera-font-size);



		/*background-color: rgba(100, 70, 50, 0.5);*/
		/*background-color: var(--dark-side-board);*/

	}

#sub_wb2_3 {
	padding: 0.1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(100, 100, 100);	
}

	#id_game_header{
		padding: 0.25rem;
		min-height: 2rem;
		display: flex;
		/*flex-direction: column;*/
    flex-direction: row;
		/*justify-content: center;*/
    align-items: center;

		border: 1px solid rgb(100, 100, 100);	
		line-height: 1.5; /* Висота рядка в 1.5 рази більша за розмір шрифту */
	}
  #id_game_header p{
    font-size: 1.25rem;
  }



/*
		#id_span_challenger{
			color: rgba(0, 200, 0, 1.0);
			font-weight: bold;
		}

		#id_span_invitation{
			color: rgba(200, 50, 0, 1.0);
			font-weight: bold;
		}
		.span-ch-in{
			color: rgba(200, 50, 0, 1.0);
			font-weight: bold;
		}

		#time_response{
			font-weight: bold;
			color: red;
		}

*/    

	#id_game_protokol{
		flex: 1;
    display: flex;
    flex-direction: column;

		border: 1px solid rgb(100, 100, 100);	
	}

  .class_nm{
    display: flex; 
    /*justify-content: space-between; */
    gap: 0.5rem;
  }
  .class_nms{
    /*flex:1;*/

    width: 2rem;
    display: flex; 
    align-items: center;
    justify-content:flex-end;
    font-size: 1rem; 
    color: rgb(255,255,255);
    text-shadow: 1px 1px 2px rgb(100, 100, 100);
    font-style: italic;
    /*border: 1px solid rgb(100, 100, 100);*/

/*
     style="color: rgb(150, 255, 255); font-weight: 600;"
      style="color: rgb(200, 255, 255);"
       style="color: rgb(200, 255, 255);"
*/       
  }


  .class_nms:nth-child(2){
    width: 5rem;
    justify-content:flex-start;

  }
  .class_nms:nth-child(3){
    width: 5rem;
    justify-content:flex-start;
  }








	#id_game_comments{
		height: 3rem;
    display: flex;
    /*flex-wrap: wrap;*/
    justify-content: center;
    gap: 1rem;

		border: 1px solid rgb(100, 100, 100);	
	}


/* --------------------------------------- 11.04.2026 -------------------------------------------------------------  */
/*
#id_game_comments {
  display: flex;
  gap: 12px;
  padding: 20px;
}
*/

.btn-comments {
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 0.5rem;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1.0);
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0.25rem 0.5rem rgba(255, 255, 255, 0.5);
}

/* Кнопка НІЧИЯ (Синьо-блакитна) */
#btn_draw {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

/* Кнопка ЗДАТИСЯ (Червоно-рожева) */
#btn_resign {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
}

/* Кнопка ЗАКРИТИ (Темно-сіра) */
#btn_close {
  display: none;
  background: linear-gradient(135deg, rgb(60, 230, 120) 0%, rgb(0, 80, 50) 100%);
  box-shadow: 0 4px 15px rgba(0, 200, 0, 0.3);
}

/* Ефекти наведення */
.btn-comments:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.1);
}

.btn-comments:active {
  transform: translateY(0) scale(1);
}

/* Стиль іконок */
/*
.btn-comments i {
  font-size: 1.1em;
}
*/

/* Колір іконки автоматично підлаштується під колір тексту (white) */
/*.btn-comments svg {
  fill: currentColor; 
  flex-shrink: 0;
}
*/





























#sub_wb3 {
	/*height: 3vmax;*/
	height: 3rem;
	flex: auto;
	display: flex;
	border: 1px solid rgb(100, 100, 100);	
	border-radius: 0 0 3px 3px;
}

.light { 
	background-color:	 var(--white-cell);

	/*
	background-color: rgb(240, 217, 181); /* Autor Serhiy S. 

	background-color: rgb(255, 255, 255); /* Autor Pieter D.
	*/
}
.dark { 
	background-color:	 var(--dark-cell);
	/*background-color: rgb(181, 136, 99);  /* Autor Serhiy S. 
	background-color: rgb(252, 191, 250); /* Autor Pieter D. */
}

/* ========================================================================= */
/*.cell {
	display: flex;
	align-items: center;
	justify-content: center;
}
*/
/*
.cell {
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cell-figure { 
	
	height:auto; 
	pointer-events:none; 
}

*/

/*
.cell img {
  width: 48px;
  height: 48px;
  pointer-events: none;
}
*/


/* Клітинка */
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-size: cover;
	border: 1px solid var(--color-border-cell);
}

/* Фігура */
.figure-img {
  display: block;

	/* масштаб відносно клітинки */
	/*
  height: 80%; 
  width: auto;
*/

	height: 100%;
	aspect-ratio: 1 / 1;
	/*aspect-ratio: 1 / 1.5;*/

	/*height: 80%;*/
	/* зберігає пропорції */
  /*object-fit: contain; */
  /*object-fit: fill; */
  /*object-fit: cover; */

  /*pointer-events: none;*/
pointer-events: auto;/* Автоматичне виділення елемента дозволяє робити драг*/

  /*transition: transform 0.951s ease;*/
}

/* Ефект при виборі фігури (опціонально) 
.figure-img.selected {
  transform: scale(0.991);
}
  */



/*
.highlight-drop {
  outline: 2px dashed rgb(170, 0, 113);
  outline-offset: -4px;
}
*/


.highlight-drop {
  /*outline: 3px solid rgba(0, 255, 100, 0.97);*/
  /*outline: 2px dashed rgb(170, 0, 113);*/
  /*outline: 3px ridge rgb(170, 0, 113);*/
  outline: 3px solid rgba(170, 0, 113, 0.75);

  outline-offset: -3px;
  transition: outline 0.15s ease;
}


/*
.highlight-drop { 
	outline: 3px dashed gold; 
	outline-offset: -3px; 
}
*/

/* ========================================================== */


/* ----------- 12 березня 2026 року ---------------------- */
.modal-overlay-winner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content-winner {
    /*background: rgb(74, 117, 134);*/
    background: rgb(240, 217, 181);
    padding: 2rem 0;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    min-width: 10rem;
}

.modal-content-winner h2 {
    margin-top: 0;
    /*color: #333;*/
    color: rgb(69, 52, 31);

    font-size: 1.5rem;

}

.modal-content-winner p {
  padding: 1rem 0;
  width: 100%;
  margin-top: 1rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  /*color: rgb(90, 15, 240);*/
  color: rgb(240,217,181);
  background-color: rgb(69,52,31);
  font-weight: bold;
}


.modal-button-winner {
    margin-top: 1rem;
    padding: 1.0rem 2.0rem;
    font-family: 'Orbitron', sans-serif;
    /*background-color: #4CAF50;*/

    /*background-color:rgb(31, 69, 50);    */
    background-color: rgb(186,125,32);

    color: white;

    /*color: rgb(240, 217, 181);*/

    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1.5rem;
    transition: background 0.3s;
}

.modal-button-winner:hover {
    background-color: #45a049;
}

/* ----------------------------------------------------------- */


@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.75); }
    70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.05); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.00); }
}

.timer-active {
    /*color: rgb(55, 255, 240);*/
    /*font-size: 0.75rem;*/
    color: rgb(0,0,0);
  	font-weight: bold;

/*
        color: bisque;
				font-weight: bolder;
				text-shadow: 1px 1px 2px rgb(100, 0, 0), -1px -1px 2px rgb(100, 0, 0);
*/




    border: 2px solid red;
    border-radius: 0.5rem;
    animation: pulse-border 1s infinite; /* Пульсуючий червоний бордюр */
    background-color: rgba(255, 55, 0, 0.4);
    background-color: rgba(255, 255, 255, 0.8);
}




/*  ------------------------------------------------------- */


























/* ================================================================================================================  */
@media (orientation: portrait) {
	html {
    font-size: 1.2vmax;
  }

	#sub_wb2 {
		flex-wrap: wrap;
	}
		#sub_wb2_2 {
			flex: auto;
			width: 95vw;
			/*background-color: rgb(6, 104, 65);*/
		}

}


.piece {
  touch-action: none; /* Дозволяє браузеру передати керування жестами вашому скрипту */
  user-select: none;  /* Запобігає виділенню тексту/картинки при довгому натисканні */
}


/*   ========================================================== */
/*
.board{
  position:relative;
  width:360px;
  height:360px;
}

.squares{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
}

.square{
  width:100%;
  height:100%;
}

.pieces{
  position:absolute;
  inset:0;
}

.piece{
  position:absolute;
  width:10.5%;
  height:10.5%;
  will-change:transform;
  pointer-events:auto;
}

.highlights{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hl{
  position:absolute;
  width:12.5%;
  height:12.5%;
  background:rgba(0,150,0,.9);
}
  */



  /*
  .board {
  width: 400px; / Можна змінити розмір /
  height: 400px;
  position: relative;
  border: 2px solid #333;
  user-select: none;
  background-color: #eee;
}

.squares {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
}

/ Кольори клітинок /
.square {
  width: 100%;
  height: 100%;
}

/ Світлі клітинки /
.square.light {
  background-color: #ebecd0;
}

/ Темні клітинки /
.square.dark {
  background-color: #779556;
}

.piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px; / Буде автоматично змінено через JS (this.size) /
  height: 50px;
  cursor: grab;
  z-index: 10;
  transition: transform 150ms ease-out;
}

.piece:active {
  cursor: grabbing;
}

.highlights {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
*/

/*
.promotion-modal img:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transform: scale(1.1);
}
*/