:root {
	--primaryColor: rgb(32, 104, 175);
	--primaryDarkColor: rgb(21, 80, 138);
	--primaryLightColor: rgb(164, 192, 221);

	/* Delete */
	--redColor: rgb(147, 17, 17);
	--redLightColor: rgb(221, 164, 164);

	--blackTextColor: #2f2f2f;
	--borderColor: #aaa;
	--borderLightColor: #ccc;

	--crownColor: #ffc900;
}

* {
	box-sizing: border-box;
}
body {
	font-family: 'Poppins', sans-serif;
	margin: 0;
}

.drawitout-bold {
	font-weight: 600;
}

/* Overall Layout */
body {
	display: flex;
}
#main {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 960px;
	/* height: 100vh; Does not work on mobile. Setting to window.innerHeight in js instead */
	margin: 0 auto;
	padding: 0 10px 10px;
}

.game-header {
	font-size: 24px;
	font-weight: 600;
	margin: 0;
	padding: 5px 10px;
	height: 45px; /* Prevents layout jumping when loading font */
}

/* Hide Game Header if screen is too small */
@media (max-width: 750px), (max-height: 500px) {
	#main {
		padding: 0;
	}
	.game-header {
		display: none;
	}
	#game-wrap {
		height: 100%;
	}
}

#game-wrap {
	display: flex;
	flex-grow: 1;
	max-height: 700px;
}

#sidebar {
	display: flex;
	flex-direction: column;
	width: 230px;
	border: 1px solid var(--borderColor);
	border-radius: 4px;
	margin-right: 5px;
}

/* 	Drawer or keyboard is out: Hide users and overlay chat
	@media (max-width: 600px) and (max-height: 500px) */
#game-wrap.fullscreen #sidebar {
	height: auto;
	border-top: none;
	flex-shrink: 0;
	min-height: auto;
}
#game-wrap.fullscreen #game-info {
	display: none;
}
/* To account for #messages-wrap's absolute position */
#game-wrap.fullscreen #chat {
	position: relative;
}
#game-wrap.fullscreen #messages-wrap {
	position: absolute;
	height: 200px;
	width: 50%;
	bottom: 40px;
	z-index: 1;
	pointer-events: none;
	opacity: 0.9;
	overflow: hidden;
	mask-image: linear-gradient(transparent, rgba(0, 0, 0, 1) 30%);
	-webkit-mask-image: linear-gradient(transparent, rgba(0, 0, 0, 1) 30%);
}
#game-wrap.fullscreen #messages {
	position: absolute;
	bottom: 0;
}
#game-wrap.fullscreen #draw-toolbar {
	width: auto;
	left: auto;
	right: 0;
	flex-direction: column-reverse;
	height: 100%;
}
#game-wrap.fullscreen #color-picker {
	min-height: 0;
	flex-direction: column-reverse;
}

/* Mobile layout: user and chat at the bottom */
@media (max-width: 750px) {
	#canvas-wrap #game-canvas,
	#canvas-wrap .drawitout-modal {
		border: none;
		border-radius: 0;
	}
	#game-wrap {
		max-height: none;
		flex-direction: column-reverse;
	}
	#sidebar {
		width: 100%;
		height: 50%;
		max-height: 300px;
		flex-direction: row;
		border: none;
		border-top: 1px solid var(--borderColor);
		border-radius: 0;
	}
	#sidebar #game-info {
		max-width: 50%;
		border-right: 1px solid var(--borderLightColor);
		border-bottom: none;
		max-height: 100%;
	}
	#users .user:last-child {
		border-bottom: 1px solid var(--borderLightColor);
	}
	#sidebar #chat {
		height: 100%;
	}
	#canvas-wrap #round-end-banner {
		border-radius: 0;
	}
}

#canvas-wrap {
	position: relative;
	flex-grow: 1;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	touch-action: none; /* prevent pull to refresh when drawing */
}

#game-canvas {
	/* Detach canvas from layout, since the width and height of the canvas is dynamic
	 and percentage based, but the width and height needs to be set as px on the canvas for rendering.
	 If canvas is part of the layout, then it's going to affect the width and height of canvas-wrap
	 and miscalculate the resized width and height; */
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	/* Need to draw background otherwise some weird browser rendering may happen e.g. random gray boxes appear */
	background: white;

	border-radius: 4px;
	border: 1px solid var(--borderColor);
}

/* Tool bar */
#draw-toolbar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 5px;
	display: flex;
	align-items: flex-end;
}

.edit-btn {
	margin: 5px;
	width: 50px;
	height: 50px;
	padding: 10px;
	border-radius: 4px;
	border: 2px solid transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.edit-btn:hover {
	border-color: currentColor;
}

.icon {
	fill: currentColor;
}

#undo-btn {
	color: var(--primaryDarkColor);
	background-color: var(--primaryLightColor);
}

#clear-btn {
	color: var(--redColor);
	background-color: var(--redLightColor);
}

#color-picker {
	margin: 5px;
	text-align: left;
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap-reverse;
}

.cp-btn {
	margin-top: 4px;
	margin-right: 4px;

	width: 30px;
	height: 30px;
	border-radius: 4px;
	cursor: pointer;
}

.cp-btn.selected,
.cp-btn:hover {
	border: 4px solid rgba(255, 255, 255, 0.5);
}

#timer {
	position: absolute;
	left: 0;
	top: 0;
	margin: 10px;

	width: 50px;
	height: 50px;
	border-radius: 25px;
	font-size: 16px;
	line-height: 50px;
	text-align: center;

	font-family: 'Varela Round', sans-serif;
	background-color: #ddd;
}

/* Word Prompt */
#word-prompt {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	/* 70px accounts for width of timer */
	margin: 10px 70px 0;

	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.prompt-text {
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	text-transform: capitalize;

	/* In case user draws over the text */
	background: rgba(255, 255, 255, 0.8);
	padding: 0 10px;
	border-radius: 4px;
}

.prompt-word-sm,
.prompt-word {
	display: flex;
	padding: 5px 8px;
	min-height: 40px;

	/* In case user draws over the text */
	background: rgba(255, 255, 255, 0.8);
	border-radius: 4px;
}

.prompt-letter-blank {
	width: 15px;
	margin: 0 4px;
	border-bottom: 3px solid var(--primaryColor);
}

@media (max-width: 800px) {
	.prompt-word-sm .prompt-letter-blank {
		width: 12px;
		margin: 0 2px;
		border-bottom: 2px solid var(--primaryColor);
	}
	#word-prompt .prompt-word-sm {
		min-height: 30px;
	}
}
@media (max-width: 400px) {
	.prompt-word-sm .prompt-letter-blank {
		width: 8px;
		margin: 0 2px;
		border-bottom: 2px solid var(--primaryColor);
	}
	#word-prompt .prompt-word-sm {
		min-height: 20px;
	}
}

/* Word Picker */
/* Similar style as lobby popup */
.drawitout-modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);

	/* matching #game-canvas */
	border-radius: 4px;
	border: 1px solid var(--borderColor);

	display: flex;
	align-items: center;
	justify-content: center;

	transition: opacity 0.3s;
	opacity: 0;
	pointer-events: none;
}
.drawitout-modal.visible {
	opacity: 1;
	pointer-events: all;
}

.drawitout-modal-body {
	z-index: 2; /* above #messages-wrap's z-index of 1 */
	background: white;
	box-shadow: rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 4px 10px -4px;
	border-radius: 3px;
	width: 400px;
	max-width: 100%;
	border: 1px solid #ddd;
	text-align: center;

	padding: 20px;
}

.word-picker-header {
	font-size: 20px;
	margin-bottom: 10px;
}
.word-picker-words {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.word-picker-word {
	padding: 8px 20px;
	color: white;
	background: var(--primaryColor);
	border-radius: 4px;
	margin: 5px;
	cursor: pointer;
	text-transform: capitalize;
}
.word-picker-word:hover {
	background: var(--primaryDarkColor);
}

/* Round End Banner */
#round-end-banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--primaryColor);
	text-align: center;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding: 5px 0 10px;
	color: white;
}
#round-end-word-prompt {
	font-size: 24px;
}
#round-end-timer {
	font-size: 14px;
}
.round-end-word {
	font-weight: 600;
	padding-left: 8px;
	text-transform: capitalize;
}

/* Game Info */
#game-info {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--borderColor);
	flex-shrink: 0;
	max-height: 50%;
}

#round-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px;
	color: white;
	background: var(--primaryColor);
	border-bottom: 2px solid var(--primaryDarkColor);
}

#round-display {
	font-weight: 600;
	padding: 0 5px;
}
.round-num {
	font-family: 'Varela Round', sans-serif;
	white-space: nowrap;
}
.round-info-btns {
	display: inherit;
}
.round-info-btn {
	width: 30px;
	height: 30px;
	padding: 5px;
	border-radius: 4px;
	cursor: pointer;
}
.round-info-btn:hover {
	background: rgba(0, 0, 0, 0.3);
}

/* User List */
#users {
	overflow-y: auto;
}
.user {
	display: flex;
	padding: 5px 10px;
	border-bottom: 1px solid #ddd;
	color: var(--blackTextColor);
	font-weight: 400;
	font-size: 14px;
	align-items: center;
}
.user:last-child {
	border: none;
}
.user-name {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.user-score {
	text-align: right;
	flex-shrink: 0;
	flex-grow: 1;
	font-family: 'Varela Round', sans-serif;
	font-weight: 400;
	margin-left: 10px;
}
.drawer-icon {
	width: 20px;
	height: 20px;
	margin-left: 5px;
	color: var(--primaryColor);
	flex-shrink: 0;
}
.user-guessed-word {
	background: var(--primaryLightColor);
	border-color: var(--primaryLightColor);
}
.user-is-me {
	font-weight: 600;
	color: var(--primaryColor);
}
.user-disconnected {
	color: var(--text-muted);
	text-decoration: line-through;
}

/* Chat */
#chat {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 0;
	flex-grow: 1;
}
/* Firefox doesn't support scrolling for flex-direction: column-reverse */
#messages-wrap {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}
#messages {
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-end;
	padding: 5px 0;
}
.message {
	width: 100%;
	padding: 2px 10px;
	color: var(--blackTextColor);
	font-size: 12px;
	word-break: break-word;
}
#game-wrap.fullscreen .message {
	animation-name: message-fade;
	animation-delay: 5s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}
@keyframes message-fade {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
.msg-correct-guess {
	color: var(--primaryColor);
	font-weight: 600;
}
.msg-correct-guess-me {
	background: var(--primaryColor);
	color: white;
	font-weight: 600;
}
.msg-notice {
	color: #888;
}
#chat-input {
	width: 100%;
	font-size: 16px; /* avoid zoom on ios */
	border: none;
	border-top: 1px solid var(--borderColor);
	background: transparent;
	padding: 10px;
}