/**
 * Treeo Vote CSS
 * 2025
 */

html, body, h1, h2, h3, h4, h5, h6, p {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	padding: 0;
	margin: 0; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;              /* no scroll */
	overscroll-behavior: none;     /* no rubber-band */
	-webkit-overflow-scrolling: auto; }

/* when scrolling is enabled */
html.scrollable, body.scrollable {
	overflow: auto;                    /* enable scroll */
	overscroll-behavior: auto;
	-webkit-overflow-scrolling: touch; /* momentum on iOS */
	scrollbar-width: none;             /* Firefox */
	-ms-overflow-style: none;          /* IE/old Edge */
}
html.scrollable::-webkit-scrollbar,
body.scrollable::-webkit-scrollbar {
	display: none;                     /* Chrome/Safari */
}

body.scrollable { position: relative; }

body {
	background: url(images/image-web-bigbg.png) top center repeat-y;
	background-size: 4000px 20px; }

html, body {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; }

input, textarea, [contenteditable="true"], .allow-select {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text; }

.ftu {
	opacity: 0;
	position: absolute;
	z-index: 500;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 10px;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.93) 100%); }

	.ftu-inner {
		position: relative;
		width: 100%; 
		max-width: 600px;
		margin: 0 auto; }

		.ftu-inner .name-input-container {
			position: relative;
			margin: 0 auto;
			margin-top: 25px;
			padding-top: 40px;
			width: 75%;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px; }

			.name-input-container .name-input {
				flex: 1 1 auto;
				height: 40px;
				border: none;
				outline: none;
				border-radius: 9999px; /* full pill */
				background: #ddd;
				padding: 0 15px;
				font-size: 16px;
				font-weight: 500;
				color: #292E33;
				font-family: inherit;
				-webkit-appearance: none;
				appearance: none;
				background: #D2D3D6;
				border: 1px solid rgba(255,255,255,.3);
				box-shadow: inset rgba(0,0,0,.25) 0 2px 13px, rgb(21, 123, 235, .8) 0 1px 25px; }

				.name-input-container .name-input::placeholder {
					color: #77828d;
					font-weight: 300;
					font-style: normal; }

			.name-input-container .name-button {
				flex: 0 0 90px; 
				width: 90px;
				height: 40px;
				border: none;
				outline: none;
				border-radius: 9999px;
				background: #ddd;
				font-size: 8px;
				text-indent: -9000px;
				font-family: inherit;
				cursor: pointer;
				-webkit-appearance: none;
				appearance: none;
				background: transparent url(images/image-web-playbtn.png) center left no-repeat;
				background-size: 90px 40px; }

		.ftu-inner .how-to-play-illo {
			display: block;
			position: absolute;
			z-index: 125;
			top: 71.5%;
			left: 4%;
			font-size: 8px;
			text-indent: -9000px;
			height: 98px;
			width: 148px;
			background: transparent url(images/image-web-howtovote.png) top left no-repeat;
			background-size: 148px 98px; }

		.ftu-inner .enter-your-name-illo {
			display: block;
			position: absolute;
			z-index: 125;
			top: 80%;
			right: 4%;
			font-size: 8px;
			text-indent: -9000px;
			height: 74px;
			width: 231px;
			background: transparent url(images/image-web-whatsyourname.png) top left no-repeat;
			background-size: 231px 74px; }

		.ftu-inner .video-container {
			position: relative;
			z-index: 100;
			top: 0;                 /* drop the negative nudge */
			margin: 0 auto;
			width: 80%;            /* or 80% if you prefer a gutter: width: 80%; */
			height: auto;           /* kill the % height */
			aspect-ratio: 1 / 1;    /* keeps it square */
			background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%), #212123;
			box-shadow: inset rgba(255,255,255,.06) 0 3px 8px, inset rgba(255,255,255,.05) 0 1px 4px, inset rgba(255,255,255,.1) 0 1px 1px;
			border-radius: 30px; }

			/* The video itself (or a <div> stand-in) */
			.ftu-inner .video-container .video-itself {
				position: absolute;
				top: 10px; right: 10px; bottom: 10px; left: 10px; /* 10px inset */
				border-radius: 20px; /* 30 - 10 to match the outer curve */
				background: #000; /* fallback if video hasn’t loaded */
				z-index: 0;
				overflow: hidden; }

			/* If you’re using an actual <video> tag inside .video-itself */
			.ftu-inner .video-container .video-itself video {
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover; }

			/* Overlay above the video */
			.ftu-inner .video-container .video-shadow-overlay {
				position: absolute;
				top: 10px; right: 10px; bottom: 10px; left: 10px; /* same inset */
				border-radius: 20px;
				pointer-events: none; /* don’t block controls/taps on the video */
				z-index: 1;

				/* Subtle inner border + vignette + top glow */
				box-shadow:
					inset rgba(0,0,0,.5) 0 2px 6px, 
					rgba(255,255,255,.25) 0 1px 1.5px;
			}

		.ftu-inner .blurry-rainbow {
			position: absolute;
			background: transparent url(images/web-color-blur.png) top center no-repeat;
			background-size: 259px 117px;
			font-size: 8px;
			text-indent: -9000px;
			opacity: 0.8;
			top: -18px;
			left: 0;
			width: 100%;
			height: 117px;
			z-index: 103; }

		.ftu-inner .logo-hero {
			position: relative;
			z-index: 105;
			text-indent: -9000px;
			font-size: 8px;
			background: url(images/image-web-tevg.png) top center no-repeat;
			background-size: 180px 64px;
			height: 64px;
			width: 100%; }



.vote-results {
	display: none;
	position: relative;
	opacity: 0;
	overflow-x: hidden;
	transition: opacity .75s ease-in-out;
	z-index: 3;
	margin-top: -7%;
	background: transparent url(images/web-challenge-results.png) center top no-repeat;
	background-size: 100% auto;
	padding-top: 31.8%;
	/* padding-top: 31.8%; */ }

	.vote-results .floating-reaction-container {
		position: absolute;
		opacity: 0;
		left: 0;
		width: 100%;
		top: calc(100vw * 0.318 * 0.25);   /* 25% of the 31.8% ratio zone */
		height: 23vw; /* 35% of that zone’s height */
		pointer-events: none;
		background: transparent;
		z-index: 20; }

		.floating-reaction {
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			pointer-events: auto;
		}

		.reaction-balloon {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 4px 9px;
			background-color: #007AFF;
			border-radius: 16px;
			overflow: hidden;

			/* you’ll add your own outer box-shadows separately */
			box-shadow:
				inset 0 -4px 12px rgba(0, 96, 201, 0.5),
				rgba(0,57,117,0.1) 0 0 18px,
				rgba(0,57,117,0.14) 0 2px 4px,
				rgba(0,57,117,0.12) 0 8px 8px,
				rgba(0,57,117,0.07) 0 18px 11px,
				rgba(0,57,117,0.02) 0 32px 13px,
				rgba(0,57,117,0.01) 0 50px 14px;
		}

		/* glossy overlay gradient */
		.reaction-balloon::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 50%;
			background: linear-gradient(
				to bottom,
				rgba(255, 255, 255, 1) 0%,
				rgba(255, 255, 255, 0) 100%
			);
			opacity: 0.6; /* overall transparency */
			mix-blend-mode: overlay;
			pointer-events: none;
		}

		/* reaction image */
		.reaction-image {
			position: relative;
			z-index: 1;
			height: 55px;
			width: auto;
		}

		/* text below */
		.reaction-container p {
			margin-top: 6px;
			font-size: 13px;
			font-smoothing: antialiased;
			line-height: 1.2;
			color: #5F6F80;
			font-weight: 500;
			text-align: center;
			text-shadow:
				0 0 2px rgba(255,255,255,0.95),
				0 0 1px rgba(255,255,255,0.95),
				0 0 2px rgba(255,255,255,0.95);
		}

		.reaction-container p strong {
			font-weight: 700;
			color: #415D7B;
		}

		.reaction-container p::after {
			content: "";
			position: absolute;
			top: 65%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 90%;
			background: rgba(255, 255, 255, 0.7);
			filter: blur(17px);
			border-radius: 50%;
			z-index: -1; /* keep behind text */
			pointer-events: none;
		}

	.new-vote-row {
		margin-right: 16px;
		margin-left: 16px;
		height: 165px;
		background: transparent;
		margin-bottom: 17px;
		position: relative; }

		.vote-rule {
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 3px;
			background: #f5f5f5;
			opacity: 0.7;
			box-shadow: inset rgba(0,0,0,.03) 0 1px 3px, inset rgba(0,0,0,.08) 0 0.5px 0;
			border-radius: 5px; }

		.vote-heading {
			position: relative;
			margin-bottom: 10px;
			height: 40px; }

			.vote-heading a.vote-reaction-button {
				display: block;
				font-size: 8px;
				text-indent: -9000px;
				text-decoration: none;
				position: absolute;
				right: -20px;
				top: -20px;
				width: 80px;
				height: 80px;
				background: transparent url(images/image-newreact-on-white.png) center center no-repeat;
				background-size: 80px 80px;

				-webkit-tap-highlight-color: transparent;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				user-select: none;
				touch-action: manipulation;

				transform: translateZ(0);
				-webkit-transform: translateZ(0);
				backface-visibility: hidden;
				will-change: transform;
			}

			.vote-heading a.vote-reaction-button:focus,
			.vote-heading a.vote-reaction-button:active{
				outline: none;
			}

		.vote-content {
			position: relative;
			height: 100px; }

			.vote-content .left-icon, .vote-content .center-icon, .vote-content .right-icon {
				display: block;
				position: absolute;
				z-index: 25;
				top: 0;
				right: 0;
				width: 100%;
				height: 74px;
				background-color: transparent;
				background-size: cover;
				background-position: center center;
				background-repeat: no-repeat; }

				/* Checkmarks */
				.new-vote-row.left-agree .left-icon {
					left: 0;
					width: calc((100% - 10px) / 3);
					background-position: 50% 50%;
					background-size: 60px 60px;
					background-image: url(images/image-green-check-3D@3x.png); }

				.new-vote-row.center-agree .center-icon {
					left: calc((100% - 10px) / 3 + 5px);
					width: calc((100% - 10px) / 3);
					background-position: 50% 50%;
					background-size: 60px 60px;
					background-image: url(images/image-green-check-3D@3x.png); }

				.new-vote-row.right-agree .right-icon {
					right: 0;
					width: calc((100% - 10px) / 3);
					background-position: 50% 50%;
					background-size: 60px 60px;
					background-image: url(images/image-green-check-3D@3x.png); }

				/* Xs */
				.new-vote-row.left-disagree.center-disagree.right-disagree .left-icon {
					left: 0;
					width: calc((100% - 10px) / 3);
					background-position: 50% 50%;
					background-size: 60px 60px;
					background-image: url(images/image-red-x-3D@3x.png); }

				.new-vote-row.left-disagree.center-disagree.right-disagree .center-icon {
					left: calc((100% - 10px) / 3 + 5px);
					width: calc((100% - 10px) / 3);
					background-position: 50% 50%;
					background-size: 60px 60px;
					background-image: url(images/image-red-x-3D@3x.png); }

				.new-vote-row.left-disagree.center-disagree.right-disagree .right-icon {
					right: 0;
					width: calc((100% - 10px) / 3);
					background-position: 50% 50%;
					background-size: 60px 60px;
					background-image: url(images/image-red-x-3D@3x.png); }

				/* Arrows */
				.new-vote-row.left-disagree.center-disagree.right-agree .left-icon {
					background-size: 71px 61px;
					background-position: 30% 60%;
					background-image: url(images/image-small-swap.png); }

				.new-vote-row.left-agree.center-disagree.right-disagree .right-icon {
					background-size: 71px 61px;
					background-position: 69.5% 60%;
					background-image: url(images/image-small-swap.png); }

				.new-vote-row.left-disagree.center-agree.right-disagree .right-icon {
					background-size: 214px 75px;
					background-position: 50% 1px;
					background-image: url(images/image-wide-swap.png); }

			.vote-content .row-target {
				display: block;
				position: absolute;
				top: 0;
				height: 94px;
				overflow: hidden;
				border-radius: 10px;
				text-align: center;
				background-color: transparent;
				background-size: cover;
				background-position: center center;
				background-repeat: no-repeat; }

				.vote-content .row-target .over {
					border-radius: 10px;
					z-index: 20;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 74px;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center; }

					.new-vote-row.left-agree .left .over,
					.new-vote-row.center-agree .center .over,
					.new-vote-row.right-agree .right .over {
						background-image: linear-gradient(
							to bottom right,
							rgba(31, 210, 189, 0.50) 0%,
							rgba(69, 210, 31, 0.50) 100%
						); }

					.new-vote-row.left-disagree .left .over,
					.new-vote-row.center-disagree .center .over,
					.new-vote-row.right-disagree .right .over {
						background-image: linear-gradient(
							to bottom right,
							rgba(222, 24, 119, 0.42) 0%,   /* 84% × 0.5 ≈ 0.42 */
							rgba(221, 27, 27, 0.50) 100%
						); }

				.vote-content .row-target.left {
					left: 0;
					width: calc((100% - 10px) / 3); }

				.vote-content .row-target.center {
					left: calc((100% - 10px) / 3 + 5px);
					width: calc((100% - 10px) / 3); }

				.vote-content .row-target.right {
					right: 0;
					width: calc((100% - 10px) / 3); }

				.vote-content .row-target .full-image {
					background-color: transparent;
					background-size: cover;
					background-position: center center;
					background-repeat: no-repeat;
					height: 74px;
					top: 0;
					left: 0;
					width: 100%;
					border-radius: 10px; }

				.vote-content .row-target h6 {
					color: #2a2f36;
					font-size: 12px;
					line-height: 24px;
					padding: 1px 0 0 0;
					margin: 0; }

					.vote-content .row-target h6 b {
						letter-spacing: -0.2px;
						padding-left: 3px; }

			.vote-heading h5 {
				display: block;
				font-weight: 500;
				font-size: 14px;
				position: absolute;
				left: 47px;
				top: 20.5px;
				padding: 0;
				margin: 0;
				color: #898f95; }

				.vote-heading h5.comparison-agree {
					color: #00971C; }

				.vote-heading h5.comparison-disagree {
					color: #DB6785; }

			.vote-heading h4 {
				padding: 0;
				margin: 0;
				display: block;
				font-weight: 700;
				position: absolute;
				left: 47px;
				top: 0;
				color: #000;
				font-smoothing: antialiased;
				font-size: 16px; }

				.vote-heading h4 b.challenger-creator {
					display: inline-block;
					position: relative;
					left: 5px;
					top: 2px;
					width: 81px;
					height: 15px;
					background: transparent url(images/image-challenger-badge-new.png) center center no-repeat;
					background-size: 81px 15px;
				}

				/* add the creator badge as an overlay to the right */
				.vote-heading h4 b.challenger-creator::after {
					content: "";
					position: absolute;
					top: 0;
					left: calc(100% + 4px); /* small gap between badges */
					width: 58px;
					height: 15px;
					background: transparent url(images/image-creator-badge-new.png) center center no-repeat;
					background-size: 58px 15px;
				}

				.vote-heading h4 b.creator {
					display: inline-block;
					position: relative;
					left: 5px;
					top: 2px;
					width: 58px;
					height: 15px;
					background: transparent url(images/image-creator-badge-new.png) center center no-repeat;
					background-size: 58px 15px; }

				.vote-heading h4 b.challenger {
					display: inline-block;
					position: relative;
					left: 5px;
					top: 2px;
					width: 81px;
					height: 15px;
					background: transparent url(images/image-challenger-badge-new.png) center center no-repeat;
					background-size: 81px 15px; }

				.vote-heading h4 b.challenge-vote {
					display: inline-block;
					position: relative;
					left: 5px;
					top: 2px;
					width: 103px;
					height: 15px;
					background: transparent url(images/image-challenge-vote-badge-new.png) center center no-repeat;
					background-size: 103px 15px; }

				.vote-heading h4.official span {
					display: inline-block;
					position: relative;
					margin-right: 4px;
					left: 5px;
					top: 2px;
					height: 16px;
					width: 16px;
					background: transparent url(images/icon-official.svg) center center no-repeat;
					background-size: 16px 16px; }

				.vote-heading h4.verified span {
					display: inline-block;
					position: relative;
					margin-right: 4px;
					left: 5px;
					top: 2px;
					height: 16px;
					width: 16px;
					background: transparent url(images/icon-verified.svg) center center no-repeat;
					background-size: 16px 16px; }

			.vote-heading .profile-photo {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 40px;
				height: 40px;
				border-radius: 20px;
				background-color: transparent;
				background-size: cover;
				background-position: center center;
				background-repeat: no-repeat;
				overflow: hidden; }


#treeo-description {
	z-index: 40;
	position: absolute; }

	#treeo-description .desc-inner {
		position: relative;
		top: 0;
		left: 0; }

		#treeo-description .desc-inner p {
			display: inline-block;
			font-weight: 500;
			padding: 11px 10px 10px 11px;
			margin: 0;
			background: linear-gradient(
					to bottom,
					#2e9fff 0%,
					#006cff 100%
				);
			border-radius: 15px;
			border-bottom-left-radius: 0;
			color: #fff;
			font-size: 15px;
			line-height: 1.25em; }

		#treeo-description .desc-inner .img-behind {
			position: absolute;
			z-index: 21;
			background: #fff;
			left: 0; }

		#treeo-description .desc-inner .point {
			display: block;
			position: absolute;
			z-index: 20;
			left: 0;
			background: #006cff;
			width: 11px;
			height: 11px; }

		#treeo-description img {
			border: 0;
			z-index: 22;
			position: absolute; }

#top-promo-bar {
	z-index: 15;
	position: relative;
	margin: 0;
	height: 24px;
	background: #000; }

	#top-promo-bar h1 {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 3px;
		width: 3px;
		text-indent: -9000px;
		overflow: hidden;
		font-size: 8px;
		padding: 0;
		margin: 0; }

	#top-promo-bar h2 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
		height: 24px;
		font-size: 12px;
		line-height: 24px;
		color: rgba(255,255,255,.6);
		font-weight: 500;
		padding: 0;
		margin: 0; }

		#top-promo-bar h2 span#vote-stamp {
			padding-left: 3px;
			color: rgba(255,255,255,.3);
			font-size: 10px;
			font-weight: 300; }

		#top-promo-bar h2 strong {
			color: #fff;
			font-weight: 700; }

		#top-promo-bar h2 img {
			position: relative;
			top: -1px;
			width: 16px;
			height: 16px;
			border-radius: 16px;
			padding: 0;
			margin: 0;
			margin-right: 5px; }

#content-container {
	opacity: 0;
	max-width: 500px;
	height: 120vh;
	margin: 0 auto;
	position: relative;
	padding-top: 0; }

	#reaction-menu-picker {
		display: block;
		position: absolute;
		z-index: 99999;
		pointer-events: none;
		top: 200px;
		left: 8px;
		right: 8px;
		width: calc(100% - 16px);
		height: 130px;
		border-radius: 16px;
		background-color: #007AFF;
		opacity: 0;
		overflow: hidden;
		box-shadow:
			inset 0 -4px 12px rgba(0, 96, 201, 0.5),
			rgba(0,0,0,.15) 0 2px 18px,
			rgba(0,57,117,0.1) 0 0 18px,
			rgba(0,57,117,0.14) 0 2px 4px,
			rgba(0,57,117,0.12) 0 8px 8px,
			rgba(0,57,117,0.07) 0 18px 11px,
			rgba(0,57,117,0.02) 0 32px 13px,
			rgba(0,57,117,0.01) 0 50px 14px; }

		#reaction-menu-picker::before {
			content: "";
			border-radius: 16px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 50%;
			background: linear-gradient(
				to bottom,
				rgba(255, 255, 255, 1) 0%,
				rgba(255, 255, 255, 0) 100%
			);
			opacity: 0.25; /* overall transparency */
			mix-blend-mode: overlay;
			pointer-events: none; }

			/* --- scroll container (the one that moves) --- */
			.reaction-menu-container {
			  position: relative;
			  height: 100%;
			  overflow-x: auto;
			  overflow-y: hidden;
			  -webkit-overflow-scrolling: touch;
			  scrollbar-width: none;
			}
			.reaction-menu-container::-webkit-scrollbar { display: none; }

			/* mask that matches your iOS gradient */
			.reaction-menu-container {
			  /* tweak these two stops to taste */
			  --fade-start: 90%;   /* solid until here */
			  --fade-end: 97%;     /* fade ends here */

			  /* WebKit/Safari/iOS */
			  -webkit-mask-image: linear-gradient(
			    to right,
			    black 0%,
			    black var(--fade-start),
			    transparent var(--fade-end),
			    transparent 100%
			  );
			  -webkit-mask-repeat: no-repeat;

			  /* Chromium/Firefox */
			  mask-image: linear-gradient(
			    to right,
			    rgba(0,0,0,1) 0%,
			    rgba(0,0,0,1) var(--fade-start),
			    rgba(0,0,0,0) var(--fade-end),
			    rgba(0,0,0,0) 100%
			  );
			  mask-repeat: no-repeat;
			}

			/* --- rows share the same wide inner track --- */
			.reaction-menu-container .top-row,
			.reaction-menu-container .bottom-row {
				height: 65px;
				align-items: stretch;
				display: flex;
				align-items: center;
				width: max-content; /* ensures the width expands with content */
				margin: 0;
				padding: 0 12px;
			}
			#reaction-menu-picker .top-rule {
				z-index: 100;
				display: block;
				position: absolute;
				top: 64px;
				left: 0;
				right: 0;
				height: 1px;
				background: rgba(0,0,0,.11); }

			#reaction-menu-picker .bottom-rule {
				display: block;
				position: absolute;
				top: 65px;
				left: 0;
				right: 0;
				height: 1px;
				background: rgba(255,255,255,.16); }

			/* --- reaction anchors --- */
			.reaction-row-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 0 0 auto;
				height: 100%;
				margin: 0 7px 0 0;
				padding: 7px 0; /* now respected inside fixed height */
				text-decoration: none;
				position: relative;
				box-sizing: border-box;
			}
			.top-row .reaction-row-item { }

			.reaction-row-item img {
				display: block;
				max-height: 100%;
				width: auto;
				object-fit: contain;
				pointer-events: none;
				user-select: none;
			}

	#reaction-bg-overlay {
		display: block;
		position: absolute;
		pointer-events: none;
		z-index: 6767;
		left: 0;
		right: 0;
		width: 100%;
		height: 700px;
		opacity: 1;
		background: linear-gradient(to bottom,
	     rgba(16,28,50,0) 0%,
	     rgba(16,28,50,1) 40%,
	     rgba(16,28,50,1) 60%,
	     rgba(16,28,50,0) 100%); }

	#reaction-overlay {
		display: block;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 130px;
		background: rgba(255,0,0,0.0);
		z-index: 1000; }

	body.scrollable #content-container {
		height: auto; }

	#content-container .target {
		transition: box-shadow .15s ease-in-out;
		cursor: move;
		background: #fff;
		position: absolute;
		overflow: hidden;
		box-shadow: rgba(0,0,0,.14) 0 4px 25px;
		border-radius: 50%; }

		#content-container .target,
		#content-container .target .inner,
		#content-container .target .asset,
		.emoji-bar .category,
		.emoji-bar .category-target {
			touch-action: none;              /* CRITICAL: stops native pan/zoom on touch */
			-ms-touch-action: none;          /* old Edge */
			-webkit-user-drag: none;
			user-select: none;
			-webkit-user-select: none;
			-webkit-touch-callout: none;
			-webkit-tap-highlight-color: transparent;
		}

		#content-container .target.bottom {
			/* top: calc(((100vh - 240px) / 1.9) - 10px); */
			z-index: 31; }

		#content-container .target.middle {
			/* top: calc(((100vh - 240px) / 1.9) / 2.07);
			left: 46vw; */
			z-index: 32; }

		#content-container .target.top {
			/* top: 2px; */
			z-index: 33; }

		#content-container .target .inner {
			position: absolute;
			overflow: hidden;
			border-radius: 50%;
			background-color: white;
			top: 7px;
			left: 7px;
			right: 7px;
			bottom: 7px; }

		#content-container .target .asset {		
			position: absolute;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			background-color: white;
			top: 0;
			left: 0;
			right: 0;
			z-index: 40;
			bottom: 0;
			height: 100%;
			width: 100%; }

		#content-container .target .circle-label {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 1000; }

		#content-container .inner big {
			display: none;
			background: transparent;
			position: relative;
			z-index: 60;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			font-size: 18px;
			text-transform: uppercase;
			font-weight: 700;
			color: #fff; }

	#content-container .bg-blur {
		opacity: 0.18;
		height: 70%;
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
		-webkit-transform: translate3d(0,0,0);
		-webkit-transform: translateZ(0);
		backface-visibility: hidden;
		perspective: 1000;
		transform: translate3d(0,0,0);
		transform: translateZ(0);
		filter: blur(50px) saturate(170%);
		-webkit-filter: blur(50px) saturate(170%); }

	#content-container .bg-blur-bottom {
		z-index: 10;
		position: absolute;
		bottom: 0;
		left: 0%;
		width: 35%; }

	#content-container .bg-blur-middle {
		z-index: 11;
		position: absolute;
		bottom: 0%;
		left: 34%;
		width: 35%; }

	#content-container .bg-blur-top {
		z-index: 12;
		position: absolute;
		bottom: 0%;
		right: 0%;
		width: 35%; }

	#content-container .bg-blur-overlay {
		z-index: 13;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }

	#content-container .emoji-bar {
		display: block;
		z-index: 100;
		position: relative;
		height: 85px; }

		.emoji-bar .matrix-target {
			transition: opacity .75s ease-in-out;
			opacity: 0;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			position: absolute; }

			.matrix-target.L {
				left: 10px;
				width: calc(33.33% - 10px); }

			.matrix-target.C {
				left: calc(33.3% + 5px);
				width: calc(33.33% - 10px); }

			.matrix-target.R {
				right: 10px;
				width: calc(33.33% - 10px); }

			.matrix-target.corners-all {
				border-radius: 10px; }

			.matrix-target.corners-top {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px; }

			.matrix-target.corners-bottom {
				border-bottom-right-radius: 10px;
				border-bottom-left-radius: 10px; }

		.category-target {
			display: block;
			opacity: 0;
			position: absolute;
			overflow: hidden;
			top: 5px;
			height: 80px;
			border-radius: 10px;
			background-color: #fff;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			transition: border-radius 1.3s linear; }

			.category-target.corners-top {
				border-radius: 0;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px; }

			.category-target.corners-none {
				border-radius: 0; }

			.category-target.corners-bottom {
				border-radius: 0;
				border-bottom-right-radius: 10px;
				border-bottom-left-radius: 10px; }

		.left-category-target {
			left: 10px;
			width: calc(33.33% - 10px); }

		.center-category-target {
			left: calc(33.3% + 5px);
			width: calc(33.33% - 10px); }

		.right-category-target {
			right: 10px;
			width: calc(33.33% - 10px); }

		.category-target .percentage-bar {
			display: block;
			position: absolute;
			bottom: -30px;
			right: 0;
			font-size: 18px;
			font-weight: 800;
			border-top-left-radius: 10px;
			color: #fff;
			padding: 3px 6px 3px 12px; }

			.percentage-bar i {
				font-style: normal;
				padding-left: 1px;
				color: rgba(255,255,255,.8);
				font-weight: 300; }

			.percentage-bar.green {
				padding-left: 24px;
				background: rgba(28, 109, 0, 0.8) url(images/icon-votematrix-check.svg) 7px 50% no-repeat;
				background-size: 14px 14px; }

			.percentage-bar.red {
				padding-left: 25px;
				background: rgba(112, 0, 40, 0.8) url(images/icon-votematrix-x.svg) 8px 53% no-repeat;
				background-size: 14px 14px; }

		.emoji-bar.post-vote {
			height: 70vh; }

		.category {
			display: block;
			position: absolute;
			transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
			-webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
			text-align: center;
			height: 85px; }

			.category.used {
				transform: scale(0.0);
				-webkit-transform: scale(0.0);
				opacity: 0; }

			.category.left {
				left: 5px;
				width: 33.3%; }

			.category.center {
				left: 33.3%;
				width: 33.3%; }

			.category.right {
				right: 5px;
				width: 33.3%; }

			.category big {
				transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
				-webkit-transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
				padding: 5px 0 0 0;
				display: block;
				height: 62px;
				font-size: 50px;
				line-height: 60px; }

			.category small {
				transition: all .10s linear;
				letter-spacing: 0;
				text-transform: uppercase;
				display: block;
				font-size: 13px;
				font-weight: 700; }

				.category.highlighted { }

				.category.highlighted small {
					opacity: 0; }

				.category.highlighted big {
					transform: translateY(19px) scale(1.57) rotate(20deg);
					-webkit-transform: translateY(19px) scale(1.75) rotate(20deg); }

#header-bar-container {
	background: #000;
	position: relative; }

#header-bar {
	z-index: 20;
	position: relative;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	overflow: hidden;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	height: 60px; /* 60px is the visible height, bottom 20px will be overlapped */
	background: #ccc; }

	#header-bar .vote-count {
		position: absolute;
		right: 0;
		height: 60px;
		top: 0;
		background: transparent url(images/web-icon-bolt.png) center left no-repeat;
		background-size: 16px 22px;
		text-align: right;
		padding-right: 15px;
		padding-left: 20px;
		font-size: 26px;
		font-weight: 700;
		line-height: 60px;
		letter-spacing: 0.1px;
		color: #fff; }

		#header-bar .vote-count em {
			font-size: 24px;
			font-weight: 400;
			color: rgba(255,255,255,.5);
			font-style: normal; }

	#header-bar .creator-profile {
		position: absolute;
		height: 40px;
		width: 40px;
		border-radius: 40px;
		top: 10px;
		left: 10px; }

	#header-bar big {
		display: block;
		font-weight: 700;
		position: absolute;
		left: 59px;
		top: 5px;
		padding: 5px 0;
		text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.25);
		color: #fff;
		font-smoothing: antialiased;
		font-size: 16px; }

		#header-bar big.official span {
			display: inline-block;
			position: relative;
			left: 5px;
			top: 3px;
			height: 16px;
			width: 16px;
			background: transparent url(images/icon-official.svg) center center no-repeat;
			background-size: 16px 16px; }

		#header-bar big.verified span {
			display: inline-block;
			position: relative;
			left: 5px;
			top: 3px;
			height: 16px;
			width: 16px;
			background: transparent url(images/icon-verified.svg) center center no-repeat;
			background-size: 16px 16px; }

	#header-bar small {
		display: block;
		font-weight: 500;
		font-size: 14px;
		position: absolute;
		left: 59px;
		top: 31px;
		padding: 0;
		margin: 0;
		text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.25);
		color: rgba(255,255,255,.65); }

	#header-bar .grad-overlay-left {
		position: absolute;
		top: 0;
		left: 0;
		width: 40px;
		height: 80px;
		background: transparent url(images/web-headersheen-left.png) top left no-repeat;
		background-size: 40px 80px; }

	#header-bar .grad-overlay-right {
		position: absolute;
		top: 0;
		right: 0;
		width: 40px;
		height: 80px;
		background: transparent url(images/web-headersheen-right.png) top left no-repeat;
		background-size: 40px 80px; }

	#header-bar .grad-overlay-center {
		position: absolute;
		top: 0;
		right: 40px;
		width: calc(100% - 80px);
		height: 80px;
		background: transparent url(images/web-headersheen-center.png) top left repeat-x;
		background-size: 25px 80px; }

	#header-bar .blurred-blend-overlay {
		position: absolute;
		mix-blend-mode: soft-light;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(23,32,42,.75); }	

	#header-bar .blurred-dark-overlay {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0,0,0,.45); }

	#header-bar .blurred-images {
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
		-webkit-transform: translate3d(0,0,0);
		-webkit-transform: translateZ(0);
		backface-visibility: hidden;
		perspective: 1000;
		transform: translate3d(0,0,0);
		transform: translateZ(0);
		position: relative;
		filter: blur(30px) saturate(150%);
		width: 100%;
		height: 100%; }

		.blurred-images .image-top {
			position: absolute;
			background-color: #082342;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			top: 0;
			left: 0;
			width: 35%;
			height: 100%; }

		.blurred-images .image-middle {
			position: absolute;
			background-color: #6c1808;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			top: 0;
			left: 34%;
			width: 35%;
			height: 100%; }

		.blurred-images .image-bottom {
			position: absolute;
			background-color: #033b05;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			top: 0;
			right: 0;
			width: 33%;
			height: 100%; }