@mobile: ~"only screen and (max-width: 889px)";
@desktop: ~"only screen and (min-width: 890px)";

* {
	touch-action: manipulation;
	font-smoothing: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: none;
	font-family: 'Pokemon Pixel Font Regular';
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
	pointer-events: none;
}

::selection {
	
}

@primaryColor: #5B6D80;
@secondaryColor: darken(@primaryColor, 30%);

html {
	background: lighten(@primaryColor, 30%);
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}

body {
	background: lighten(@primaryColor, 30%);
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;

	video {
		display: none;
	}

	#container {
		position: absolute;
		font-size: 0;
		touch-action: manipulation;
		user-select: none;
		-webkit-user-select: none;

		@media @mobile {
			width: calc(100vw - 38px - 38px);
			left: 38px;
			top: 38px;
		}

		@media @desktop {
			width: 300px;
			height: 500px;
			top: 50%;
			left: 50%;
			margin-top: calc((550px / -2));
			margin-left: -150px;
		}

		#camera-container {
			border-radius: 10px;
			overflow: hidden;
			box-sizing: border-box;
			position: relative;
			background: @secondaryColor;
		    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
		    margin-left: 2px;
		    margin-top: 2px;

			@media @mobile {
				width: calc(100vw - 38px - 38px);
				height: calc(100vw - 38px - 38px);
				// transform: scaleX(-1); // Flip if user-facing camera
			}

			@media @desktop {
				width: 296px;
				height: 296px;
			}

			#camera-overlay-0,
			#camera-overlay-1 {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				overflow: hidden;
			    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
			}

			#camera-overlay-0 {
				&.type-0 {
					background-color: rgba(0, 0, 100, 0.5);
					mix-blend-mode: overlay;
				}

				&.type-1 {
					@keyframes flicker {
						to {
							transform: translateY(10px);
						}
					}
					animation: flicker 0.5s infinite linear;
					background-image: url('../images/pattern-1.png');
					background-size: 2px 10px;
					mix-blend-mode: overlay;
					opacity: 0.5;

					@media @mobile {
						width: calc(100% + 38px);
						height: calc(100% + 38px);
						top: -38px;
						left: -38px;
					}
				}

				&.type-2 {
					@keyframes rotate {
						from {
							transform: scale(2) rotate(0deg);
						}
						to {
							transform: scale(2) rotate(360deg);
						}
					}
					animation: rotate 12s infinite linear;
					background-image: url('../images/gradient-1.jpg');
					mix-blend-mode: overlay;
					transform-origin: center;
					background-size: cover;

					@media @mobile {
						width: calc(100% + 38px);
						height: calc(100% + 38px);
						top: -38px;
						left: -38px;
					}

					@media @desktop {		
					    width: 360px;
					    height: 360px;
					}
				}
			}

			#camera-overlay-1 {
				&.type-0 {
					background-color: rgba(255, 255, 255, 1);
					mix-blend-mode: overlay;
				}

				&.type-1 {
					background-image: linear-gradient(0deg, rgba(0,255,136,1) 0%, rgba(0,159,255,1) 100%);
					mix-blend-mode: overlay;
				}			

				&.type-2 {
					background-color: rgba(0, 0, 0, 0.5);
					mix-blend-mode: overlay;
				}
			}
		}

		#camera-border {
			position: absolute;
			top: 0px;
			left: 0px;
			box-shadow: 0 0 0 3px @secondaryColor;
			border: 3px solid white;
			box-sizing: border-box;
			border-radius: 10px;

			@media @mobile {
				width: calc(100vw - 38px - 38px);
				height: calc(100vw - 38px - 38px);
			}

			@media @desktop {
				width: 300px;
				height: 300px;
			}
		}

		#options {
			margin-top: 24px;
			margin-bottom: 24px;
			box-sizing: border-box;
			border-radius: 10px;
			box-shadow:
				0 0 0 3px @secondaryColor,
				inset 0 0 0 3px rgba(255, 255, 255, 1),
				inset 0 0 0 5px lighten(@secondaryColor, 65%);
			background: white;
			padding: 24px;

			ul {
			    padding: 0;
			    margin: 0;
			    list-style-type: none;

				li {
					text-transform: uppercase;
					letter-spacing: 0.1em;
					padding: 0;
					font-size: 28px;
					text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
					margin-bottom: 16px;
					margin-left: 24px;
					color: @secondaryColor;

					@media @mobile {
						font-weight: 500;
						-webkit-text-stroke: 0.5px;
					}

					@media @desktop {
						font-weight: 600;
					}

					&:last-child {
						margin-bottom: 0;
					}

					&.selected {
						&:before {
							content: ' ';
							background-image: url('../images/arrow.svg');
							width: 10px;
							height: 18px;
							position: absolute;
							margin-left: -24px;
							margin-top: 3px;
						}
					}
				}
			}
		}

		#buttons {
			margin: -3px;
			margin: -3px;
			touch-action: all;
			pointer-events: all!important;

			button {
				pointer-events: all!important;
				touch-action: all;
				box-sizing: border-box;
				border-radius: 10px;
				background-color: @primaryColor;
				width: calc(50% - 8px);
				height: 48px;
				border: none;
				border: 3px solid rgba(0, 0, 0, 0.4);
				padding: 2px;
				margin-right: 16px;
				vertical-align: top;
				outline: none;

				background-repeat: no-repeat;
				background-position: center;

				&:last-child {
					margin-right: 0;
				}

				box-shadow:
					0 1px 0 0 @secondaryColor,
					0 2px 0 0 @secondaryColor,
					0 3px 0 0 @secondaryColor,
					0 4px 0 0 @secondaryColor,
					0 5px 0 0 @secondaryColor,
					0 6px 0 0 @secondaryColor,
					0 7px 0 0 @secondaryColor;

				&:active {
					margin-top: 4px;
					box-shadow:
						0 1px 0 0 @secondaryColor,
						0 2px 0 0 @secondaryColor,
						0 3px 0 0 @secondaryColor;
				}

				&#down {
					background-image: url('../images/arrow-white-down.svg');
				}

				&#up {
					background-image: url('../images/arrow-white-up.svg');
				}
			}
		}
	}
}