/* PC 28/11/2025 11.32 */
/* 07.05.2026 22:10 Works according to Milestone 1 */

/* ===================================== CLASS =============================================*/
/* General Section Styling */
.section {
	padding-top: 3rem;
	padding-bottom: 3rem;
	/*border: 1px solid white;*/
}

.section-dark {
	background-color: rgb(16, 22, 29);
	padding-top: 5rem;
	padding-bottom: 5rem;
}
.section-title {
	font-size: 2.25rem;
	text-align: center;
	margin-bottom: 0.625rem;
}
.section-title span { 
	color: rgb(227, 46, 237); 
}


/* ===================================== HEADER =============================================*/
header {
  font-family: 'Orbitron', sans-serif;
	position: fixed;
	padding: 0 1rem;
	width: 100%;
	height: 8rem;
	max-height: 8rem;
	display: flex;
	justify-content: space-between;
	/*align-items: flex-start;*/
	align-items: center;
	/*background-color: rgb(13, 17, 23);*/
	backdrop-filter: blur(8px);  /* сила розмиття */
	-webkit-backdrop-filter: blur(8px); /* для Safari */
	z-index: 10;
	/*border: 1px solid red;*/
}
	#logo{
		height: 100%;
		cursor: pointer;
	}
	#header_nav {
		position: relative;
		padding-bottom: 0.5rem;
		flex:1;
		align-self: stretch;
		display: flex;
		justify-content: space-between;
    flex-wrap: wrap;

		/*flex-direction: column;*/
		gap: 0.75rem;
		/*border: 1px solid red;*/
	}


@media (orientation: landscape) {
  #div_timer_count{
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
    width: 8rem;
    position: absolute; 
    padding: 0.25rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 1px ridge rgba(100,100,100,0.5);

    /* Рамка з невеликим розмиттям для кращого вигляду */
    /*border: 1px ridge rgba(255, 255, 255, 0.2);*/
    border-radius: 0.5rem;
    /*
        color: rgb(255, 255, 255);
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
        background: linear-gradient(-45deg, rgb(81, 230, 250), rgb(60, 200, 150), rgb(35, 165, 215), rgb(35, 215, 170));
    */
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    /* Градієнтний фон */
    background: linear-gradient(-45deg, rgba(81, 230, 250, 0.2), rgba(81, 230, 250, 0.5), rgba(81, 230, 250, 0.8), rgba(81, 230, 250, 1.0));

    background-size: 400% 400%;
   
    /* Анімація переливу */
    /*animation: gradientAnimation 10s ease infinite;*/
    
    /* Ефект скляної поверхні (опціонально) */
    backdrop-filter: blur(5px);
    box-shadow: 0.1rem 0.1rem 1.3rem rgba(200, 200, 200, 0.5);
  }

  #head_counter_time{
    text-align: center;
  }
}

@media (orientation: portrait) {
  #div_timer_count{
    flex:0 0 100%;
    /*padding-left: 0.5rem;*/
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    letter-spacing: 0.05em;
    font-size: 1.0rem;
    border: 1px ridge rgba(100,100,100,0.5);


    /* Рамка з невеликим розмиттям для кращого вигляду */
    /*border: 1px ridge rgba(255, 255, 255, 0.2);*/
    border-radius: 0.5rem;
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    /* Градієнтний фон */
    background: linear-gradient(-45deg, rgba(50, 200, 100, 0.4), rgba(60, 200, 150, 0.4), rgba(35, 165, 215, 0.4), rgba(35, 215, 170, 0.4));
    background-size: 400% 400%;
    
    /* Анімація переливу */
    /*animation: gradientAnimation 10s ease infinite;*/
    
    /* Ефект скляної поверхні (опціонально) */
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(200, 200, 200, 0.5);
	}


	#div_timer_count p{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /*border: 1px solid red;*/
	}
	#div_timer_count p span{
    padding: 0.25rem;
    /*border: 1px solid blue;*/
  }
    
  #head_counter_time{
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
  /*  width: 8.4rem;*/
  }

  #visitors_count{
    flex: 1;
    /*width: 5.7rem;*/
    
  }
  #players_count{
    flex: 1;
    /*width: 5.7rem;*/
    
  } 

}



  /* Опис анімації переливу */
  @keyframes gradientAnimation {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }
/*  
	#div_timer_count p{
		flex: 1;
		border: 1px solid gold;
	}
*/





	#subnav1{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		/*border: 1px solid gold;*/
	}

		#div_lobby{
			--r-base: 255;
      --g-base: 255;
      --b-base: 255;

      --r-sub: 150;
      --g-sub: 200;
      --b-sub: 150;

			flex:1;
			display: flex;
			flex-direction: column;

			font-family: 'Orbitron', sans-serif;
			font-size: 1.75rem;
			font-weight: 700;
			color: rgb(150, 200, 150);
			/* 105, 55, 105 */
			text-shadow: 3px 3px 1rem rgba(165, 42, 42, 0.5),
									-3px -3px 1rem rgba(255,255,255, 0.5);

			/*
						text-shadow: 2px 2px 3px rgb(
								calc(var(--r-base) - var(--r-sub)), 
								calc(var(--g-base) - var(--g-sub)), 
								calc(var(--b-base) - var(--b-sub))
						);
			*/
		}
			#div_lobby span{
				/*font-size: 3.5rem;*/
        letter-spacing: 0.05em;
				font-weight: bolder;
				color: rgb(165, 42, 42);
				text-shadow: 3px 3px 1rem rgba(90, 213, 213, 0.5);
			}

		#div2_subnav1{
			display: none;
			flex:1;
			width: 100%;
			justify-content: space-around;
			/*			justify-content: center;*/
			align-items: center;
		}
			#div2_subnav1_rating{
				width: 20%;
				font-family: 'Orbitron', sans-serif;
				font-size: 1em;
				font-weight: 700;
				color: rgb(250, 250, 250);
				/*border: 1px solid white;*/
			}

			#div2_subnav1_rating_span{
				font-size: 1.25em;
				color: rgb(200, 50, 50);
			}

			#div2_subnav1_qc{
				width: 20%;
				text-align: right;
				font-family: 'Orbitron', sans-serif;
				font-size: 1em;
				font-weight: 700;
				color: rgb(250, 250, 250);
				/*border: 1px solid white;*/

			}

			#div2_subnav1_qc_span{
				font-size: 1.5em;
				color: rgb(50, 200, 50);
			}

			#id_my_profile{

				/*display: none;*/

				/*justify-self: center;*/

				padding: 0.5rem 1.5rem;
				font-weight: 700;
				text-decoration: none;
				text-align: center;
				font-size: 0.9rem;
				color: rgb(255, 255, 255);
				/*background-color: transparent;*/
				background-color: rgba(138, 43, 226, 0.4);
				transition: all 0.3s ease;
				border: 2px solid rgba(30, 170, 150, 0.4 );
				border-radius: 0.5rem;
				/*138, 43, 226*/
			}
			#id_my_profile:hover{
				background-color: rgba(138, 43, 226, 0.74);
				cursor: pointer;
			}	

	#subnav2{
		width: 7rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/*gap: 1rem;*/
		/*border: 1px solid gold;*/
	}

	#my_avatar{
		display: none;

		width: 60%;
		cursor: pointer;
		border-radius: 100%;

		box-shadow: 
			-3px -3px 15px rgba(220,220,220,0.9),
			3px 3px 15px rgba(220,220,150,0.75)
		;

	}
	#id_logout{
		margin-top: 0.2rem;
		display: none;
	}


	/* Sign in — прозора кнопка */
	#id_login,
	#id_reg,
	#id_logout {
		padding: 0.25rem 0.75rem;
		font-weight: 700;
		text-decoration: none;
		text-align: center;
		font-size: 0.9rem;
		justify-content: center;
		
		color: rgb(255, 255, 255);
		/*background-color: transparent;*/
		background-color: rgba(227, 46, 237, 0.4 );
		transition: all 0.3s ease;
		border: 2px solid rgb(138, 43, 226);
		border-radius: 0.5rem;
	}


	#id_login
	#id_reg{	
		display: flex;
	}

		#id_login:hover,
		#id_reg:hover,
		#id_logout:hover {
			background-color: rgb(227, 47, 237 );
			cursor: pointer;
		}


/* ===================================== MAIN =============================================*/
main{
 /*margin-top: clamp(12dvh, 15dvh, 100px);*/
 	margin-top: 7rem;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	/*align-items: center;*/
}

	#announcements{
		padding-top: 3rem;
		/*padding-bottom: 3rem;*/
	}
		/* Announcement Section */
		#announcement_box {
			margin: 0 0.75rem;
			padding: 1rem;
			text-align: center;
			border: 2px dashed rgb(81, 230, 250);
			border-radius: 0.5rem;
		}
			#head_admin_anons {
				margin-bottom: 0.5rem;
				font-size: 1.5rem;
				color: rgb(81, 230, 250);
			}
			#text_admin_anons {
				font-size: 1.125rem;
				color: rgb(201, 209, 217);
			}
	/*  --------------------------------- Global Chat ------------------------------------------------ */
	#global_chat{
		height: 25rem;
		display: flex;
		flex-direction: column;
		row-gap: 0.625rem;
		padding: 0.625rem;
		/*border: 1px solid red;*/
	}

		#global_chat_h2{
			font-size: 2.25rem;
			text-align: center;
		}
		#global_chat_h2_span{
			color: rgb(227, 46, 237); 
		}

		#chat_container{
			flex: 1;
			padding: 1rem;
			/*height: 50vh;*/
			/*max-height: 500px;*/
			display: flex;
			flex-direction: column;

			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; /* rounded-xl */
		}

			#chat_messages{
				flex: 1;
				display: flex;
				flex-direction: column;
				/*justify-content: space-evenly;*/
			}

			#chat_input_group{
				display: flex;
			}
				#chat_input {
				width: 100%;
				background-color: rgb(13, 17, 23);
				border: 1px solid rgb(74, 85, 104);
				border-top-left-radius: 0.5rem;
				border-bottom-left-radius: 0.5rem;
				padding: 0.75rem;
				color: white;
				}
				#chat_input:focus {
					outline: none;
					border-color: rgb(138, 43, 226);
				}
				#chat_send_button {
					background-color: rgb(138, 43, 226);
					color: white;
					font-weight: 700;
					padding: 0 1.5rem;
					border-top-right-radius: 0.5rem;
					border-bottom-right-radius: 0.5rem;
					border: none;
					cursor: pointer;
					transition: background-color 0.3s ease;
				}
				#chat_send_button:hover { 
					background-color: rgb(106, 30, 174); 
				}

/* ---------------------------------- COMMUNITY -------------------------------------------------  */

/* Community Section */
#community{
	padding: 0.625rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	/*border: 1px solid gold;*/
}

	#community_container{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: space-between;
		/*border: 1px solid red;*/
	}

		#leaderboard_column{
			flex:1;
			display: flex; 
			flex-direction: column;
			align-items: center;
			row-gap: 1rem;
		}

			#community_subtitle{
				margin-bottom: 0.3rem;
				color: rgb(0,229,255);
				font-weight: 700;
				font-size: 1.5rem;
				line-height: 2rem;
				text-align: center;
			}

			#leaderboard{
				width: 100%;
				display: flex;
				flex-direction: column;
				row-gap: 1rem;
				cursor: pointer;
			}
				.mystyle {
					transition: all 0.5s cubic-bezier(0.1, 0, 0.1, 1);
				}

				.mystyle:hover {
					border: 1px solid rgba(0, 230, 255, 0.99);
					transform: translateY(-5px) scale(1.025);
					box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
				}

		#live_games_column{
			flex: 2;
			display: flex;
			flex-direction: column;

			align-items: center;
		}
			#live-games{
				display: flex;
				flex-wrap: wrap;
				gap: 1rem;
			}
				.mycard{
					width: 15rem !important;
				}







/* ---------------------------------- FEATURES -----------------------------------  */
	#features{
		/*width: 100%;*/
		/*background-color: rgb(16, 22, 29);*/
		padding: 5rem 0.625rem;
		/*-border: 1px solid gold;*/
	}

		#features_container{
			padding: 0.625rem;
			display: flex;
			flex-wrap: wrap;
			row-gap: 0.625rem;/*10px*/
			justify-content: space-evenly;
			/*align-items: center;*/
			/*border: 1px solid red;*/
		}

			#feature_item1,
			#feature_item2,
			#feature_item3,
			#feature_item4 {
				padding: 2rem;
				width: 18rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				text-align: 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;
				cursor: pointer;

				transition: all 0.5s cubic-bezier(0.1, 0, 0.1, 1);
			}
	
			[id^="feature_item"]:hover {
				transform: translateY(-5px) scale(1.025);
				box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
				border: 1px solid rgba(0, 230, 255, 0.99) !important;
			}


				#icon_container1,
				#icon_container2,
				#icon_container3,
				#icon_container4 {
					width: 4rem;
					height: 4rem;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background-color: rgba(138, 43, 226, 0.1);
					border: 2px solid rgb(138, 43, 226);
					color: #00E5FF;
					font-size: 2rem;
					margin-bottom: 1rem;	
				}

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


/* How it Works Section */
.how-it-works-container {
	position: relative;
	display: flex;
	/*flex-direction: column;*/
	flex-wrap: wrap;
	/*justify-content: center;*/
	justify-content: space-evenly;
	align-items: center;
}
.steps-divider {
	display: none; /* hidden by default */
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #4A5568;
	transform: translateY(-50%);
}
.steps-divider-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(90deg, #4A5568, #4A5568 10px, transparent 10px, transparent 20px);
}
.step-item {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem;
	margin-top: 2rem;

	cursor: pointer;
transition: all 0.5s cubic-bezier(0.1, 0, 0.1, 1);	

}
.step-item:hover {
	transform: translateY(-5px) scale(1.025);
	box-shadow: 0 4px 8px rgba(255, 255, 255, 0.3);
	/*border: 1px solid rgba(0, 230, 255, 0.99) !important;*/
}



.step-item:first-child {
	margin-top: 0;
}
.step-item .icon-container { font-size: 1.875rem; }
.step-item h3 { font-size: 1.25rem; margin-top: 1rem; }
.step-item p { color: #9CA3AF; margin-top: 0.5rem; }


/* Footer ==============================================================================================*/
/*footer{	flex: 1;}*/

.site-footer {
	padding: 2rem 1rem;
	background-color: #10161d;
	text-align: center;
	color: #9CA3AF;
}
.footer-links {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 1rem;
}
.footer-links a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}
.footer-links a:hover {
	color: #8A2BE2;
}
/*  ======================================= MEDIA ================================================= */


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

.community-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
.community-subtitle {
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	color: #00E5FF;
}
.leaderboard-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.live-games-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	justify-items: center;
}
.mini-board {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	width: 120px;
	height: 120px;
	border: 2px solid #4A5568;
	margin-bottom: 0.75rem;
}
.mini-board .cell { width: 15px; height: 15px; }
.mini-board .cell.light { background-color: #A0AEC0; }
.mini-board .cell.dark { background-color: #4A5568; }
.mini-board .cell span { font-size: 10px; line-height: 15px; text-align: center; display: block; color: #0D1117; }


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




/* Card & Icon Base Styles */
.card-bg {
	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);
}

.icon-container {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(138, 43, 226, 0.1);
	border: 2px solid #8A2BE2;
	color: rgb(0, 229, 255);
	font-size: 2rem;
	margin-bottom: 1rem;
}

/* Features Section */
.features-grid {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-evenly;
	/*align-items: center;*/
	/*border: 1px solid red;*/

/*
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	*/
}
.feature-item {
	/*flex:1;*/
	width: 23%;
	min-width: 200px;

	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	border-radius: 0.75rem;
}

.feature-item h3 {
	font-size: 1.5rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}
.feature-item p { color: #9CA3AF; /* text-gray-400 */ }


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





/* Hero Section (from comments) */
.hero-bg {
	background-image: url('https://placehold.co/1920x1080/0d1117/1f2937?text=Chess+Commander');
	background-size: cover;
	background-position: center;
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	color: #ffffff;
}
.hero-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(13, 17, 23, 0.7);
	z-index: 1;
}
.hero-content {
	position: relative;
	z-index: 2;
}
.neon-glow-button {
	display: inline-block;
	margin-top: 2.5rem;
	background-color: #8A2BE2;
	color: white;
	font-family: 'Orbitron', sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	padding: 1rem 3rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 5px #8A2BE2, 0 0 15px #8A2BE2, 0 0 25px #8A2BE2;
	transition: all 0.3s ease-in-out;
	text-transform: uppercase;
	text-decoration: none;
}
.neon-glow-button:hover {
	box-shadow: 0 0 10px #8A2BE2, 0 0 25px #8A2BE2, 0 0 50px #8A2BE2;
	transform: scale(1.05);
}


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





/* Layout */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	/*border: 1px solid red;*/
}



	#global-chat .section-title span { 
		color: #00E5FF; 
	}

	.chat-wrapper {
		max-width: 90%; /* max-w-4xl */
		margin: 0 auto;
	}
	.chat-container {
		border-radius: 0.75rem; /* rounded-xl */
		padding: 1rem;
		/*height: 50vh;*/
		max-height: 500px;
		display: flex;
		flex-direction: column;
	}
	#chat-messages {
		flex-grow: 1;
		overflow-y: auto;
		padding-right: 1rem;
		display: flex;
		flex-direction: column;
		gap: 1rem; /* space-y-4 */
	}
	.chat-input-group {
		margin-top: 1rem;
		display: flex;
	}
	.chat-input {
		width: 100%;
		background-color: #0D1117;
		border: 1px solid #4A5568;
		border-top-left-radius: 0.5rem;
		border-bottom-left-radius: 0.5rem;
		padding: 0.75rem;
		color: white;
	}
	.chat-input:focus {
		outline: none;
		border-color: #8A2BE2;
	}
	.chat-send-button {
		background-color: #8A2BE2;
		color: white;
		font-weight: 700;
		padding: 0 1.5rem;
		border-top-right-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
		border: none;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}
	.chat-send-button:hover { background-color: #6a1eae; }

	/* Custom scrollbar for chat */
	.chat-messages::-webkit-scrollbar { width: 8px; }
	.chat-messages::-webkit-scrollbar-track { background: #1f2937; border-radius: 10px; }
	.chat-messages::-webkit-scrollbar-thumb { background: #4a00e0; border-radius: 10px; }
	.chat-messages::-webkit-scrollbar-thumb:hover { background: #8A2BE2; }

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