// LESS Functions & Vars

	@color:#00ff95;
	@color_hover:darken(#00ff95, 12%);

	@black:#000;
	@grey:#888;
	@white:#fff;

	.font(@s:1rem,@c:#000,@w:normal){
		font-family: 'Bangers', cursive;
		font-size: @s;
		font-weight: @w;
		color: @c;
		letter-spacing: 1px;
	}

	.transition(@t:0.5s){
		transition: all @t;
	}

// INIT

	*, ::after, ::before {
		margin:0;
		padding:0;
		box-sizing: border-box;
	}

	body{
		font:14px/1.3 'Segoe UI',Arial, sans-serif;
		color:#444;

		background:url("img/bg.png") left top repeat;
	}


	#main{
		position:relative;
		z-index: 100;
		width: 100%;
		height: 100%;
		height: 100vh;
	}

	#overlay{
		position:fixed;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0;
		padding:0;
		z-index: 0;
		background:#1e5799;
		opacity: 0.35;
		-webkit-animation: filter-animation 15s infinite;
		animation: filter-animation 15s infinite;
	}

	input{
		padding: 15px;
    	font-size: 1.125rem;
    	border:solid 1px @grey;

    	&:active, &:focus{
    		outline: none;
    	}
	}

	button{
		display: inline-block;
		font-weight: 400;
		background:@color;
		color: #212529;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		padding: .375rem .75rem;
		font-size: 1.125rem;
		line-height: 1.5;
		border-radius: .25rem;
		border:none;

		&:hover{
			outline:none;
			background:@color_hover;
		}
	}


	.center_block{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.warp{
			width: 100%;
			max-width: 390px;
		}
	}


// BLOCKS GAME

	#screenHome{

		.logo{
			display: block;
			text-align: center;
			margin-bottom: 50px;
		}

		input#pseudo{
			display: block;
			width: 100%;
			margin-bottom: 10px;
			text-align: center;
		}

		#valid_home{
			display: block;
			width: 100%;
		}
		
	}

	#screenLobby{
		h2{
			font-size: 1.75rem;
			color: #222;
			margin-bottom: 2rem;
		}

		ul.lobby_players{
			list-style: none;
			margin-bottom: 20px;
			li{
				.font(1.75rem,#000);
				text-shadow: -1px -1px 0px #e2e2e2, 1px 2px 2px @color;
				margin-bottom: 8px;
				text-align: center;
			}
		}

		#start_game{
			margin-top: 15px;
		}

	}

	#gameTimer{
		text-align: center;
		position: fixed;
		top: 30px;
		right: 30px;
		.time{
			display: inline-block;
			padding:10px;
			height: 45px;
			width: 45px;
			text-align: center;
			line-height: 1;
			background:fade(@white, 75%);
			border-radius:100%;
			.font(1.75rem,@black);
		}
	}

	#screenGame{

		#player_list{
			position: fixed;
			top: 10px;
			left: 50%;
			transform: translateX(-50%);
			span{
				.font(1.25rem,@black);
				text-shadow: 1px 2px 1px @color;

				& + span:before{
					content: '\203A';
					margin:0 10px;
					color: @color;
					text-shadow:none;
				}
			}
		}

		.sgWaiting{
			h3{
				.font(2rem, @black);
				text-shadow: 0px 0px 1px @color;
			}
		}

		.sgDrawing{

			.word_to_draw{
				margin-bottom: 15px;
				text-align: center;
				font-size: 1rem;

				#game_wordToDraw{
					font-weight: bold;
					color: @black;
					padding-left: 8px;
				}
			}

			.canvas_warp{
				position:relative;

				canvas#canvas_drawing{
					background:#fff;
					box-shadow:0 0 0 4px @color;
					cursor: url('/assets/img/cursor.png'), none;
				}

				#canvas_tools{
					position:absolute;
					top: 20px;
					right: -20px;
					padding:5px;
					background:@white;
					box-shadow:0 0 0 4px @color;

					div{
						width: 20px;
						height: 20px;
						margin-bottom: 10px;
						cursor: pointer;

						opacity: 0.5;

						&.active_color, &:hover{
							opacity: 1;
						}

						&#white, &#clean{
							img{
								width: 100%;
								height: auto;
								user-select:none;
								pointer-events:none;
							}
						}

						&#clean{
							margin-bottom: 0;
						}
					}
				}

			}
		}


		.sgGuessword{
			p{
				font-size: 1.125rem;
				font-weight: bold;
				text-align: center;
				margin:12px 0;
			}

			#drawToGuess{
				padding:20px;
				background:@white;
				text-align: center;

				img{
					max-width: 100%;
					height: auto;
					pointer-events: none;
					user-select: none;
				}
			}
			.wordGuess{
				margin-top: 15px;
				display: flex;

				input{
					display: block;
					flex:1 auto;
					border: none;
					box-shadow:inset 0 0 3px @color;
					text-align: center;
					font-weight: bold;					
				}

				button{
					border-radius: 0;
					padding: 0 40px;
				}

				&.validate input{
					background:@color;
					box-shadow:inset 0px 2px 0 0px fade(@color,50%);
					text-shadow: 0 1px 2px @white;
				}

			}

		}
	}

	#screenResult{

		h1{
			text-align: center;
			.font(2.5rem,@color);
			margin-top: 20px;
			&:after{
				content: '';
				display: block;
				width: 120px;
				height: 2px;
				background:@black;
				margin: 30px auto;
			}
		}

		#results_content{

			.player_line{
				display: block;
				margin-bottom: 15px;
				border-bottom:solid 2px @color;


				h2{
					font-size: 1.5rem;
					margin-bottom: 20px;
					text-align: center;
					color: @black;

					strong{
						background: @black;
						padding: 2px 8px;
						color: @color;
					}
				}

				.rounds{
					
					display: flex;
					justify-content: center;
					background: darken(@white, 2%);
					padding: 15px;

					.pl_round{
						max-width: 30%;
						margin-top: 30px;
						display: flex;
						flex-direction: column;

						.player{
							text-align: center;
							font-size: 1.25rem;
							font-weight: bold;							
						    font-style: italic;
						    color: @color;
							border-bottom: solid 1px #e2e2e2;
							padding: 0 0 15px;
							margin: 0 20px;
						}

						img{
							max-width: 100%;
							height: auto;
							background: @white;
							cursor: zoom-in;
						}

						.word_wrap{
							display: flex;
							align-items: center;
							height: 100%;

							strong{
								display: block;
								.font(1.75rem,@black);
								text-align: center;
								margin: 0 20px;
							}
						}
					}
					
				}
			}

			.zoomed{
				position: fixed;
				z-index: 9999;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: center 20%;
				object-fit: scale-down;
				cursor: zoom-out;
			}

		}

		.btn_warp{
			text-align: center;

			#back_to_lobby{
				margin: 50px 0;
			}
		}


	}
		

// FUNCTIONS

	@keyframes filter-animation {
		0% {
			filter: hue-rotate(0deg);
		}
		50% {
			filter: hue-rotate(100deg);
		}
		100% {
			filter: hue-rotate(0deg);
		}
	}