html,
body {
	width: 100%;
	height: 100%;
}

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	overscroll-behavior: contain;
	background-color: #222;
	color: #fff;
	font-family: 'Source Code Pro', monospace;
	font-size: 16px;
}

.wrapper {
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
}

a {
	color: inherit;
}

.trim-content > :first-child {
	margin-top: 0;
}

.trim-content > :last-child {
	margin-bottom: 0;
}

/* --- Buttons --- */

a,
button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}

.button,
button {
	display: inline-block;
	padding: 0.8em 1em;
	border: 2px solid;
	border-radius: 3px;
	box-shadow: 0 5px 0 rgba(0,0,0,0.2);
	background-color: transparent;
	text-align: center;
	color: #fff;
	cursor: pointer;
	transition: all 200ms;
}

.has-hover .button:hover,
.has-hover button:hover,
.button:active,
button:active {
	border-color: #fff;
	box-shadow: 0 8px 0 rgba(0,0,0,0.3);
	background-color: #fff;
	color: #222;
}

/* --- Home --- */

.home {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 100%;
}

h1.title {
	margin: 0;
	font-size: 5em;
	font-weight: 300;
	text-align: center;
}

h1.title span {
	font-weight: 400;
}

h1.title span:nth-child(1) {
	color: #c13535;
}

h1.title span:nth-child(2) {
	color: #dcd11b;
}

h1.title span:nth-child(3) {
	color: #5daf52;
}

h1.title span:nth-child(4) {
	color: #4084f7;
}

.by-john,
.credits {
	opacity: 0.25;
	margin-bottom: 2em;
	text-align: center;
	font-size: 0.9em;
	font-weight: 300;
}

.by-john a {
	text-decoration: none;
}

.intro {
	opacity: 0.7;
	margin: 1em 0;
	text-align: center;
}

.intro strong.draw {
	color: #dcd11b;
}

.intro strong.colour {
	color: #4084f7;
}

.intro strong.team {
	color: #5daf52;
}

.intro strong.drawings {
	color: #c13535;
}

.intro p:last-child {
	color: #6d6d6d;
}

.room-code-form {
	margin-top: 2.5em;
	text-align: center;
}

.room-code-form .room-code {
	padding: 0.85em;
	border: none;
	border-radius: 3px;
}

.credits {
	margin-top: auto;
	padding-top: 2em;
}

/* --- Room --- */

.room-state {
	display: none;
	overflow: auto;
	width: 100%;
	height: 100%;
}

/* --- Lobby --- */

.self-player-settings {
	margin: 1em 0 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid #404040;
}

.self-player-settings .self-player-name {
	padding: 0.5em;
	border: none;
	border-radius: 3px;
	background-color: #2d2d2d;
	color: #fff;
}

ul.player-list {
	list-style: none;
	padding: 0;
}

.player-colour-preview {
	display: inline-block;
	position: relative;
	top: 0.15em;
	width: 1em;
	height: 1em;
	border-radius: 3px;
}

.player-you {
	opacity: 0.4;
	font-weight: 300;
}

.player-ready {
	vertical-align: middle;
	font-size: 0.7em;
	line-height: 1;
}

/* --- Game --- */

.game-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.game section .wrapper {
	position: relative;
	height: 100%;
	padding: 3vh 0;
}

/* --- Level Status --- */

.level-status {
	position: relative;
	padding: 0.3em 0;
	background-color: #404040;
	text-align: center;
}

.level-status .level-label {
	position: relative;
}

/* --- Game Sections --- */

.game section {
	overflow: hidden;
}

section.canvas,
section.strokes {
	flex: 1;
	height: 37%;
}

.game-section-title {
	margin: 0 0 0.2em;
	font-size: 1.2em;
}

.game-section-title .icon {
	font-size: 0.8em;
	color: #646464;
}

.game section .canvas-container {
	position: relative;
	z-index: 1;
}

.game section .canvas-container:after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* --- Help --- */

.help-button {
	position: absolute;
	top: 3vh;
	right: 1em;
	z-index: 1;
	width: 2em;
	height: 2em;
	padding-top: 0.5em;
	border-radius: 50%;
	background-color: #383838;
	line-height: 1;
	text-align: center;
	font-size: 1.2em;
	font-weight: 300;
	cursor: help;
}

.help-show {
	display: none;
}

.show-help .help-show {
	display: block;
}

.show-help .help-hide,
.show-help .help-fade {
	transition: opacity 500ms;
}

.show-help .help-hide {
	opacity: 0;
}

.show-help .help-fade {
	opacity: 0.1;
}

.game-section-help {
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 100%;
	margin-top: -1em;
	text-align: center;
}

.game-section-help h4 {
	margin: 0;
	font-size: 1.1em;
}

.game-section-help p {
	margin-top: 0.3em;
}

/* --- Goal --- */

section.goal {
	position: relative;
	flex: 0.6;
	height: 23%;
	background-color: #232323;
}

section.goal .wrapper {
	position: relative;
}

section.goal .game-section-title {
	float: left;
	margin-right: 1em;
}

section.goal .canvas-container {
	float: left;
	margin-right: 1em;
}

.goal-progress {
	float: left;
}

.goal-progress .tick {
	opacity: 0.3;
	vertical-align: middle;
}

.goal-progress.achieved .tick {
	opacity: 1;
}

.goal-time {
	position: absolute;
	right: 0;
	bottom: 3.1vh;
	width: calc(100% - 7em - 17vh);
	height: 1em;
	background-color: #151515;
}

.goal-time div {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: #404040;
	transition: all 500ms linear;
}

/* Goal succeeded animation */

.game.goal-succeeded section.goal .canvas-container:after,
.game.goal-succeeded section.canvas .canvas-container:after {
	animation: canvas-glow 1500ms forwards;
}

@keyframes canvas-glow {
	0% {
		background-color: #fff;
		opacity: 0.25;
		transform: scale(1);
	}

	50%, 100% {
		opacity: 0;
		transform: scale(2);
	}
}

.game.goal-succeeded section.goal canvas {
	animation: goal-succeeded-goal 1500ms forwards;
}

@keyframes goal-succeeded-goal {
	0%, 40% {
		opacity: 1;
	}

	90%, 100% {
		opacity: 0;
	}
}

.game.goal-succeeded section.canvas canvas {
	animation: goal-succeeded-canvas 1500ms forwards;
}

@keyframes goal-succeeded-canvas {
	0%, 40% { transform: translateY(0); }

	60% { transform: translateY(5%); }

	100% { transform: translateY(-200%); }
}

.game.goal-succeeded section.canvas .player-button,
.game.new-goal section.canvas .player-button,
.game.goal-failed section.canvas .player-button {
	opacity: 0;
}

/* New goal animation */

.game.new-goal section.goal canvas {
	animation: new-goal-goal 1000ms forwards;
}

@keyframes new-goal-goal {
	0% { opacity: 0; }

	100% { opacity: 1; }
}

.game.new-goal section.canvas canvas {
	animation: new-goal-canvas 1000ms forwards;
}

@keyframes new-goal-canvas {
	0% { transform: translateY(200%); }

	50% { transform: translateY(-5%); }

	100% { transform: translateY(0); }
}

/* Goal failed animation */

.game.goal-failed section.goal canvas {
	animation: goal-failed-goal 1000ms infinite;
}

@keyframes goal-failed-goal {
	0% { opacity: 1; }

	5%, 15% { transform: rotate(-8deg); }
	10%, 20% { transform: rotate(8deg); }

	25%, 35%, 45% { transform: rotate(-4deg); }
	30%, 40%, 50% { transform: rotate(4deg); }

	45%, 55% { transform: rotate(-2deg); }
	50%, 60% { transform: rotate(2deg); }

	100% { opacity: 0; }
}

.game.goal-failed section.canvas canvas {
	animation: goal-failed-canvas 1000ms infinite;
	transform-origin: 13% 13%;
}

@keyframes goal-failed-canvas {
	0% { transform: translate(0, 0) rotate(0); }

	20% { transform: translate(0, 0) rotate(30deg); }

	40% { transform: translate(0, 0) rotate(10deg); }

	60% { transform: translate(0, 0) rotate(20deg); }

	100% { transform: translate(5%, 200%) rotate(15deg); }
}

/* ---Canvas/Strokes --- */

section.canvas .canvas-container,
section.strokes .canvas-container {
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
}

.player-button {
	position: absolute;
	width: 1.3em;
	height: 1.3em;
	padding: 0;
	border-radius: 50%;
	background-color: transparent;
	color: #fff;
	line-height: 1;
	font-size: 2em;
	cursor: pointer;
	transition: transform 100ms, opacity 300ms;
}

.has-hover .player-button:hover,
.player-button:active {
	border-color: currentColor;
	background-color: transparent;
	transform: scale(1.2);
}

.player-button:focus {
	outline: none;
}

.player-button-self,
.player-button-2 {
	left: 50%;
	margin-left: -0.75em;
}

.player-button-1,
.player-button-3 {
	top: 50%;
	margin-top: -0.75em;
}

.player-button-self {
	top: -1.4em;
}

.player-button-1 {
	right: -1.5em;
}

.player-button-2 {
	bottom: -0.7em;
}

.player-button-3 {
	left: -1.5em;
}

.player-button .player-name {
	opacity: 0.7;
	position: absolute;
	padding: 0.8em;
	font-size: 0.35em;
	white-space: nowrap;
	font-weight: bold;
	text-align: center;
	transition: all 100ms;
}

.has-hover .player-button:hover .player-name,
.player-button:active .player-name {
	opacity: 1;
}

.player-button-self .player-name,
.player-button-2 .player-name {
	top: 50%;
	left: 100%;
	transform-origin: 0 50%;
	transform: translateY(-50%);
}

.has-hover .player-button-self:hover .player-name,
.has-hover .player-button-2:hover .player-name,
.player-button-self:active .player-name,
.player-button-2:active .player-name {
	transform: translateY(-50%) scale(0.8);
}

.player-button-1 .player-name,
.player-button-3 .player-name {
	top: 100%;
	left: 50%;
	transform-origin: 50% 0;
	transform: translateX(-50%);
}

.has-hover .player-button-1:hover .player-name,
.has-hover .player-button-3:hover .player-name,
.player-button-1:active .player-name,
.player-button-3:active .player-name {
	transform: translateX(-50%) scale(0.8);
}

/* --- Canvas --- */

section.canvas {
	background-color: #121212;
}

section.canvas .player-button:after {
	content: '-';
}

section.canvas .player-button-self {
	top: auto;
	bottom: -0.7em;
}

section.canvas .player-button-2 {
	top: -1.4em;
	bottom: auto;
}

section.canvas .player-button .player-name {
	display: none;
}

.colour-receiver,
.colour-sender {
	display: none;
	position: absolute;
	top: 16%;
	left: 16%;
	width: 68%;
	height: 68%;
	border-radius: 50%;
	background-color: #fff;
}

/* Receive stroke animations */

.receive-in-top .colour-receiver {
	display: block;
	animation: receive-in-top 1s forwards;
}

.receive-in-right .colour-receiver {
	display: block;
	animation: receive-in-right 1s forwards;
}

.receive-in-bottom .colour-receiver {
	display: block;
	animation: receive-in-bottom 1s forwards;
}

.receive-in-left .colour-receiver {
	display: block;
	animation: receive-in-left 1s forwards;
}

@keyframes receive-in-top {
	0% { transform: translate(0,-200%) scale(0.25); }
	20% { transform: translate(0,10%) scale(0.25); }
	35% { transform: translate(0,-5%) scale(0.25); }
	50% { transform: translate(0,0) scale(0.25); }
	80% { transform: translate(0,0) scale(1.6); }
	100% { transform: translate(0,0) scale(0); }
}

@keyframes receive-in-right {
	0% { transform: translate(200%,0) scale(0.25); opacity: 0; }
	20% { transform: translate(-10%,0) scale(0.25); opacity: 1; }
	35% { transform: translate(5%,0) scale(0.25); }
	50% { transform: translate(0,0) scale(0.25); }
	80% { transform: translate(0,0) scale(1.6); }
	100% { transform: translate(0,0) scale(0); }
}

@keyframes receive-in-bottom {
	0% { transform: translate(0,200%) scale(0.25); }
	20% { transform: translate(0,-10%) scale(0.25); }
	35% { transform: translate(0,5%) scale(0.25); }
	50% { transform: translate(0,0) scale(0.25); }
	80% { transform: translate(0,0) scale(1.6); }
	100% { transform: translate(0,0) scale(0); }
}

@keyframes receive-in-left {
	0% { transform: translate(-200%,0) scale(0.25); opacity: 0; }
	20% { transform: translate(10%,0) scale(0.25); opacity: 1; }
	35% { transform: translate(-5%,0) scale(0.25); }
	50% { transform: translate(0,0) scale(0.25); }
	80% { transform: translate(0,0) scale(1.6); }
	100% { transform: translate(0,0) scale(0); }
}

/* --- Strokes --- */

section.strokes {
	background-color: #000;
}

section.strokes canvas {
	cursor: crosshair;
	transition: opacity 500ms;
}

section.strokes .player-button:after {
	content: '+';
}

section.strokes.sending-stroke {
	pointer-events: none;
}

section.strokes.sending-stroke canvas {
	opacity: 0;
	animation: send-stroke-canvas 1s ease-in forwards;
}

section.strokes.sending-stroke .player-button {
	opacity: 0;
}

/* Send stroke animations */

.out-top .colour-sender {
	display: block;
	animation: send-out-top 1s forwards;
}

.out-right .colour-sender {
	display: block;
	animation: send-out-right 1s forwards;
}

.out-bottom .colour-sender {
	display: block;
	animation: send-out-bottom 1s forwards;
}

.out-left .colour-sender {
	display: block;
	animation: send-out-left 1s forwards;
}

@keyframes send-stroke-canvas {
	40%, 70% { transform: rotate(90deg) scale(0); }
	71%, 100% { transform: rotate(0) scale(1); }
}

@keyframes send-out-top {
	0%, 20% { transform: translate(0,0) scale(1.1); opacity: 0; }
	50% { transform: translate(0,0) scale(0.23); opacity: 1; }
	55% { transform: translate(0,0) scale(0.27); }
	60%, 75% { transform: translate(0,0) scale(0.25); }
	100% { transform: translate(0,-200%) scale(0.25); }
}

@keyframes send-out-right {
	0%, 20% { transform: translate(0,0) scale(1.1); opacity: 0; }
	50% { transform: translate(0,0) scale(0.23); opacity: 1; }
	55% { transform: translate(0,0) scale(0.27); }
	60%, 75% { transform: translate(0,0) scale(0.25); opacity: 1; }
	100% { transform: translate(200%,0) scale(0.25); opacity: 0; }
}

@keyframes send-out-bottom {
	0%, 20% { transform: translate(0,0) scale(1.1); opacity: 0; }
	50% { transform: translate(0,0) scale(0.23); opacity: 1; }
	55% { transform: translate(0,0) scale(0.27); }
	60%, 75% { transform: translate(0,0) scale(0.25); }
	100% { transform: translate(0,200%) scale(0.25); }
}

@keyframes send-out-left {
	0%, 20% { transform: translate(0,0) scale(1.1); opacity: 0; }
	50% { transform: translate(0,0) scale(0.23); opacity: 1; }
	55% { transform: translate(0,0) scale(0.27); }
	60%, 75% { transform: translate(0,0) scale(0.25); opacity: 1; }
	100% { transform: translate(-200%,0) scale(0.25); opacity: 0; }
}

/* -- Level Complete/End --- */

.between-levels {
	text-align: center;
}

.between-levels h2 {
	font-size: 2em;
}

.between-levels .wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.between-levels .score {
	flex: 1;
}

.between-levels .score .wow {
	display: inline-block;
	position: relative;
	top: -1.5em;
	left: -1.5em;
	border-radius: 20px;
	background-color: #222;
	font-size: 0.8em;
	font-weight: 300;
	color: #999;
	transform: rotate(30deg);
	animation: wobble 2s infinite;
}

@keyframes wobble {
	0%, 100% { transform: rotate(20deg); }
	50% { transform: rotate(-20deg); }
}

.between-levels .level-score {
	display: inline-block;
	padding: 0.5em 0.7em;
	background-color: #000;
}

/* -- Level Complete --- */

.level-complete .level-complete-time {
	position: relative;
	padding: 1em 0;
}

.level-complete .level-complete-time .bar {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	width: 0;
	height: 100%;
	background-color: #333;
	transform: translate(-50%);
	transition: all 500ms linear;
}

/* -- End --- */

.end .play-again {
	margin: 1em 0;
}

/* --- Media Queries --- */

@media only screen and (max-height: 900px) {
	.player-button {
		font-size: 3.5vh;
	}
}

@media only screen and (max-width: 500px) {
	.game-section-title {
		font-size: 1em;
	}
}