/* Imports */
@import url("https://use.typekit.net/pcv6hsd.css");
@font-face {
    font-family: JoyPixelsSVG;
    src: url("./fonts/joypixels-colrv1.woff2") format("woff2");
}
@font-face {
    font-family: JoyPixelsSVG;
    src: url("./fonts/joypixels-colrv1-supplemental.woff2") format("woff2");
}
@font-face {
    font-family: JoyPixelsCBDT;
    src: url("./fonts/joypixels-cbdt.ttf") format("truetype");
}
@font-face {
    font-family: JoyPixelsSBIX;
    src: url("./fonts/joypixels-sbix.ttf") format("truetype");
}
.JoyPixels {
    font-family: JoyPixelsCBDT;
}
.JoyPixels {
    font-family: JoyPixelsSVG;
}
_::-webkit-full-page-media, _:future, :root .JoyPixels {
    font-family: JoyPixelsSBIX;
}
.JoyPixels {
    line-height: 0.97;
}
/* Init */
:root {
    --emojisize: 3rem;
	--purple: #8a21e4;
	--lightpurple: #e5c6ff;
	--darkpurple: #550897;
	--grey: #e0e0e0;
	--darkgrey: #a0a0a0;
	--darkergrey: #707070;
	--lightgrey: #f0f0f0;
	--hover: #f0f0f0;
	--font: #303030;
	--transitionspeed: 0.1s;
	--transitionspeed_delay: 0.11s;
	--resizeduration: 0.5s;
	--resizefrom: auto;
	--resizeto: auto;
	--GameTurnSuccess_expandFrame_to: auto;
	--GameTurnSuccess_expandFrame_duration: 0.5s;
}
body, h1, h2, h3, h4, h5, ul, p {
	margin: 0;
	line-height: 1;
}
body {
    min-width: 320px;
    position: relative;
	user-select: none;
	-webkit-touch-callout: none;
}
ul {
	padding-inline-start: 0;
	list-style-type: none;
}
a {
	text-decoration: none;
}
/* Responsive */
html {
	font-size: 20px;
}
@media only screen and (max-width: 800px) {
	html { font-size: 19px; }
}
@media only screen and (max-width: 700px) {
	html { font-size: 18px; }
}
@media only screen and (max-width: 600px) {
	html { font-size: 17px; }
}
@media only screen and (max-width: 500px) {
	html { font-size: 14px; }
}
@media only screen and (max-width: 440px) {
	html { font-size: 13px; }
}
@media only screen and (max-width: 380px) {
	html { font-size: 11px; }
}
/* Basics */
html {
	font-family: quicksand, sans-serif;
	font-weight: 500;
	color: var(--font);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
body {
	background: var(--lightpurple);
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
input {
	font-family: quicksand, sans-serif;
	color: var(--font);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
button {
	font-family: quicksand, sans-serif;
	cursor: pointer;
	border: 0;
	padding: 0;
	background: transparent;
	text-align: left;
}
button * {
	pointer-events: none;
}

* {
    scrollbar-width: auto;
    scrollbar-color: #8f54a0 rgba(255,255,255,0);
}
*::-webkit-scrollbar {
    width: 0.7rem;
}
*::-webkit-scrollbar-track {
    background: rgba(255,255,255,0);
}
*::-webkit-scrollbar-thumb {
    background-color: #8f54a0;
    border-radius: 0.3rem;
    border: 0;
}

/* Blue effect overlay */

#PageOverlay {
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.PageOverlay--blur {
    animation-name: PageOverlay_blur;
    animation-duration: 0.2s;
    z-index: 900;
}
@keyframes PageOverlay_blur {
	0% { backdrop-filter: blur(0px); }
	50% { backdrop-filter: blur(5px); }
	100% { backdrop-filter: blur(0px); }
}

/* Achievements */

#Achievements {
    position: fixed;
	width: 800px;
	box-sizing: border-box;
	margin:0 1rem 0 1rem;
	pointer-events: none;
}
@media only screen and (max-width: 800px) {
	#Achievements {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		border-radius: 0;
	}
}
.Achievement {
    position: relative;
    top: -10rem;
    width: 25rem;
	box-sizing: border-box;
    margin: 1.5rem auto 0 auto;
    background: var(--lightgrey);
    border: 0.1rem solid var(--darkgrey);
    pointer-events: auto;
    border-radius: 1rem;
    padding: 1rem;
    min-height: 6.5rem;
    animation-name: Achievement_appear;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
	cursor: pointer;
}
@keyframes Achievement_appear {
	0% { top: -10rem; }
	100% { top: 0rem; }
}
.Achievement.Achievement--disappear {
    animation-name: Achievement_disappear;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@keyframes Achievement_disappear {
	0% { top: 0rem; }
	100% { top: -10rem; }
}
.Achievement__Trophy {
    position: absolute;
    top: 0.6rem;
    right: 0.85rem;
    z-index: 800;
	font-size: 5rem;
	opacity: 0.2;
}
.Achievement__Icon {
    position: absolute;
    top: 0.5rem;
    left: 0.4rem;
    z-index: 801;
	font-size: 3rem;
}
.Achievement__Tip {
    position: absolute;
    top: 0.25rem;
    left: 0.3rem;
    right: 0.75rem;
    z-index: 801;
	font-size: 0.55rem;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	color: var(--darkergrey);
}
.Achievement__Content {
    margin-left: 2.75rem;
    z-index: 801;
}
.Achievement__Title {
    font-size: 1rem;
    z-index: 801;
}
.Achievement__Text {
    margin: 0.5rem 0;
    font-size: 0.75rem;
    z-index: 801;
}
.Achievement__Reward {
    font-size: 0.85rem;
    z-index: 801;
}

/* Orientation overlay */

#DeviceOrientationOverlay {
    display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    z-index: 950;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}
#DeviceOrientationOverlay p {
	background: white;
	border-radius: 1rem;
	box-shadow: 0 0 3px 1px rgba(0,0,0,0.5);
	padding: 2rem;
	margin: 0 2rem;
	text-align: center;
	font-size: 1.5rem;
}
@media only screen and (orientation: landscape) {
    #DeviceOrientationOverlay.DeviceOrientationOverlay--enabled {
        display: flex;
    }
}

/* Header */

header {
	background: var(--purple);
	flex-grow: 0;
}
#HeaderInner {
	max-width: 800px;
	box-sizing: border-box;
	display: flex;
	margin:0 1rem 0 1rem;
}
#HeaderInner h1 {
	padding: 0.5rem 0 0.5rem 0;
	font-size: 2rem;
	white-space: nowrap;
}
#HeaderInner h1 span:nth-child(1) {
	vertical-align: middle;
}
#HeaderInner h1 span:nth-child(2) {
	font-family: freude, sans-serif;
	letter-spacing: 1px;
	vertical-align: middle;
	color: white;
	position: relative;
	top: 0.15rem;
}
#HeaderRight {
	flex-grow: 1;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

/* Main */

#Main {
    display: flex;
    flex-direction: column;
    min-height: 0px;
    max-height: 100%;
}
/* Back to lobby */

#GameLeaveButton {
	white-space: nowrap;
	display: inline-block;
	background: var(--darkpurple);
	border-radius: 0.5rem;
	padding-left: 0.5rem;
}
#GameLeaveButton:hover,
#GameLeaveButton:active {
	outline: 2px solid var(--lightpurple);
}
#GameLeaveButton span:nth-child(1) {
	font-size: 2rem;
	line-height: 2rem;
	vertical-align: middle;
}
#GameLeaveButton span:nth-child(2) {
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	vertical-align: middle;
	font-weight: bold;
	font-size: 1rem;
	position: relative;
	top: 1px;
	color: white;
	letter-spacing: 1px;
	font-weight: bold;
}

/* Profile button */

#ProfileTopper {
    display: flex;
}
#ProfileGameStatus {
    flex-grow: 100;
}

#ProfileButton {
	white-space: nowrap;
	display: inline-block;
	height: 3rem;
	width: 3rem;
	background: white;
	border-radius: 0;
	margin-left: 0.5rem;
	position: relative;
	color: white;
	background: var(--darkpurple);
	text-align: center;
}
@media only screen and (max-width: 800px) {
	#ProfileButton {
        left: 0.25rem;
	}
}
#ProfileButton span:nth-child(1) {
	font-size: 2.3rem;
	vertical-align: middle;
	position: relative;
	top: 0.3rem;
	text-shadow: 1px 0 0 rgba(255,255,255,1), 1px 1px 0 rgba(255,255,255,1), 1px -1px 0 rgba(255,255,255,1),
	    0 0 0 rgba(255,255,255,1), 0 1px 0 rgba(255,255,255,1), 0 -1px 0 rgba(255,255,255,1),
	    -1px 0 0 rgba(255,255,255,1), -1px 1px 0 rgba(255,255,255,1), -1px -1px 0 rgba(255,255,255,1);
}
#ProfileButton:hover,
#ProfileButton:active {
	background: var(--lightpurple);
	color: var(--darkpurple);
}
#ProfileButton:hover span:nth-child(1),
#ProfileButton:active span:nth-child(1) {
	text-shadow: 0 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.5), 0 0 3px rgba(0,0,0,0.5);
}
#ProfileButton span:nth-child(2) {
	position: absolute;
	top: 0.15rem;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	font-size: 0.5rem;
}
/* Emoji */

.Emoji {
    font-size: 1.4em;
    line-height: 0 !important;
    position: relative;
    top: 0.11em;
}
@-moz-document url-prefix() {
    .Emoji {
        top: 0em;
	}
}

/* Lobby */

#Loading {
	max-width: 800px;
	box-sizing: border-box;
	background: rgba(255,255,255,0.9);
	border: 0;
	border-radius: 0.5rem;
	margin: 1rem 1rem 0 1rem;
	padding: 1rem;
	font-size: 1.5rem;
	font-weight: bold;
	position: relative;
	text-align: center;
}
@media only screen and (max-width: 800px) {
	#Loading {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		border-radius: 0;
	}
}

/* Connection */

#Connection {
	max-width: 800px;
	box-sizing: border-box;
	background: rgba(255,255,255,0.9);
	border: 0;
	border-radius: 0.5rem;
	margin: 1rem 1rem 0 1rem;
    min-height: 4.6rem;
	padding: 1rem;
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 800px) {
	#Connection {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		border-radius: 0;
	}
}
#ConnectionStatus {
    font-size: 1.5rem;
    width: 90%;
    text-align: center;
}


/* Lobby */

#LobbyGameList {
	margin: 1rem;
	max-width: 800px;
	box-sizing: border-box;
	background: white;
	border-radius: 0.5rem;
	overflow: hidden;
}
@media only screen and (max-width: 800px) {
	#LobbyGameList {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		border-radius: 0;
	}
}
.LobbyGameList__Game button {
	display: block;
	padding: 0.75rem 0.75rem 0.75rem 1rem;
	font-size: 1.25rem;
	color: var(--font);
	position: relative;
	width: 100%;
}
.LobbyGameList__Game button > * {
	pointer-events: none;
}
.LobbyGameList__Game button:hover {
	background: var(--hover);
}
.LobbyGameList__Game__Tag {
    font-size: 0.75rem;
    color: #c0c0c0;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 1rem;
}
.LobbyGameList__Game__Players {
    position: absolute;
	padding: 0.75rem 0 0.75rem 0;
    top: 0;
    right: 0rem;
    width: 5rem;
}
.LobbyGameList__Game__Players > span:nth-child(1) {
	font-size: 1.6rem;
	line-height: 1rem;
}
.LobbyGameList__Game__Players > span:nth-child(2) {
    padding-left: 0.5rem;
}

/* Game */

#Game {
    display: flex;
    flex-direction: column;
    min-height: 0px;
    max-height: 100%;
}

#GameStatus {
	margin: 1rem 1rem 0 1rem;
	padding: 1rem;
	background: rgba(255,255,255,0.9);
	max-width: 800px;
	box-sizing: border-box;
	border-radius: 0.5rem;
	position: relative;
	display: flex;
}
@media only screen and (max-width: 800px) {
	#GameStatus {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		border-radius: 0;
	}
}
#GameStatusLeft {
    flex-grow: 10;
}

#GameTurnTimer {
	margin-top: 0.25rem;
	white-space: nowrap;
}
#GameTurnTimer__Icon {
	font-size: 1.5rem;
	vertical-align: middle;
}
#GameTurnTimer__Time {
	font-size: 1.5rem;
	vertical-align: middle;
}
#GameTurnTimer__Status {
	vertical-align: middle;
	position: relative;
	top: 2px;
	font-size: 0.9rem;
}

#GameTurnStatus {
	width: 79%;
}
#GameTurnMedalContainer {
	position: absolute;
	top: -0.0275em;
	right: 1rem;
	font-size: 2rem;
}
.GamePlayText--Tip {
	color: #a0a0a0;
}
#GameTurnInputControls {
	position: absolute;
	top: -0.5em;
	right: 1rem;
	display: flex;
	gap: 0.4rem;
	z-index: 1;
}
.GameTurnInput__Button {
    background: var(--purple);
	border-radius: 0.5rem;
	height: 2.25rem;
	width: 2.5rem;
	display: flex;
    align-items: center;
    justify-content: center;
}
.GameTurnInput__Button > svg {
	height: 1.75rem;
	height: 1.75rem;
}

#GamePlayContainer {
	max-width: 800px;
	box-sizing: border-box;
	background: rgba(255,255,255,0.9);
	border: 0;
	border-radius: 0.5rem;
	margin: 1rem 1rem 0 1rem;
	position: relative;
}
@media only screen and (max-width: 800px) {
	#GamePlayContainer {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		border-radius: 0;
	}
}
#GamePlayContainer.GamePlayContainer--with-search {
    margin-bottom: 0;
	border-radius: 0.5rem 0.5rem 0 0;
}

#GamePlay {
	box-sizing: border-box;
	padding: 0.75rem 1rem 1rem 1rem;
	min-height: 6.35rem;
}
#GamePlayInputContainer {
	height: 3.1rem;
	position: relative;
}
#GamePlayInputs {
	position: relative;
}
#GamePlayInput {
	border: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	font-size: var(--emojisize);
	height: 3.1rem;
	background: var(--hover);
	outline: none;
	margin-top: 0.5rem;
	border-radius: 0.5rem;
}
#GamePlayInput__Status {
	padding-right: 5.5rem;
}
#GameEmojiFinder {
    display: flex;
    flex-direction: column;
    min-height: 0px;
    max-height: 100%;
}
#GameEmojiSearch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
	border: 0;
	padding: 0;
	width: 100%;
    height: 3.1rem;
	text-align: center;
	font-size: 2rem;
	background: rgba(0,0,0,0.5);
	color: white;
	outline: none;
	margin-top: 0.5rem;
	border-radius: 0.5rem;
}

#GamePlayDisplay {
	border: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	font-size: var(--emojisize);
	height: 3.1rem;
	line-height: 3.1rem;
	outline: none;
	margin-top: 0.5rem;
	white-space: pre;
	overflow: hidden;
}
#GamePlayDisplay span {
	cursor: pointer;
}
#GamePlayDisplay__Status {
	padding-right: 5.5rem;
}

#GameRoomWordList {
	font-size: 1.25rem;
}
#GameRoomRoundCount {
	font-size: 0.75rem;
}

#GameWordChoicesList {
	display: flex;
	gap: 1rem;
	margin-top: 0.5rem;
}
#GameWordChoicesList li {
	flex-grow: 1;
}
#GameWordChoicesList li button {
	display: block;
	background: var(--lightpurple);
	border-radius: 0.5rem;
	padding: 0.5rem;
	text-align: center;
	color: var(--darkpurple);
    box-sizing: border-box;
    height: 100%;
    font-size: 1rem;
    width: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}
#GameWordChoicesList li span {
	pointer-events: none;
}

#GamePlayerList {
	flex-grow: 1;
	text-align: right;
}
#GamePlayerList.GamePlayerList--over8 {
	font-size: 0.9rem;
}
@media only screen and (max-width: 700px) {
    #GamePlayerList.GamePlayerList--over6,
    #GamePlayerList.GamePlayerList--over8 {
        width: 10em;
        margin-top: -0.5em;
        margin-bottom: -1em;
    }
    #GamePlayerList.GamePlayerList--over6 li,
    #GamePlayerList.GamePlayerList--over8 li {
	    margin-bottom: 1.5em;
    }
    #GamePlayerList.GamePlayerList--over8 li {
	    font-size: 0.9rem;
    }
}
#GamePlayerList li {
	display: inline-block;
	height: 2em;
	width: 2em;
	position: relative;
	z-index: 1;
	margin-left: 0.1em;
}
#GamePlayerListCount {
	position: absolute;
	top: -0.5em;
	left: 1em;
	background: var(--purple);
	color: white;
	font-size: 0.6em;
	padding: 0.2em;
	border-radius: 0.25em;
}
.GamePlayerList__Player .GamePlayerList__Player__Icon {
	font-size: 2em;
	height: 1em;
}
.GamePlayerList__Player__You {
	position: absolute;
	left: 0;
	right: 0;
	top: -0.75em;
	font-size: 0.5em;
	text-align: center;
}
/*
.GamePlayerList__Player--Turn .GamePlayerList__Player__You {
	top: -0.8em;
}
*/
.GamePlayerList__Player__Turn {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1em;
	font-size: 1em;
	text-align: center;
	z-index: 3
}
.GamePlayerList__Player__Success {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1em;
	font-size: 1.35em;
	text-align: center;
    animation-name: GamePlayerList__Player__Success_appear;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}
@keyframes GamePlayerList__Player__Success_appear {
	0% { opacity: 0; scale: 2; }
	100% { opacity: 1; scale: 1; }
}

@media only screen and (max-width: 800px) {
	#GamePlayerListCount {
		left: 0.5rem;
	}
}

.GamePlayerList__Player__Guess {
	position: absolute;
	right: 50%;
	transform: translate(50%, 0);
	top: 0;
	font-size: 1rem;
    animation-name: GamePlayerList__Player__Guess_appear, GamePlayerList__Player__Guess_move;
    animation-duration: 1s, 1s;
    animation-timing-function: ease-in-out, cubic-bezier(0, 0.9, 1, 0.1);
    animation-fill-mode: forwards, forwards;
}
@keyframes GamePlayerList__Player__Guess_appear {
	0% {opacity: 0; transform: scale(1) translate(50%, 0);}
	50% {opacity: 1; transform: scale(2) translate(25%, 0);}
	100% {opacity: 0; transform: scale(1) translate(50%, 0);}
}
@keyframes GamePlayerList__Player__Guess_move {
	0% {top: 0rem;}
	100% {top: -2rem;}
}

/* Guess area */

#GameGuess {
	max-width: 800px;
	box-sizing: border-box;
	background: rgba(255,255,255,0.9);
	border: 0;
	border-radius: 0.5rem;
	margin: 1rem 1rem -1rem 1rem;
	padding: 1rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0px;
    max-height: 100%;
}
@media only screen and (max-width: 800px) {
	#GameGuess {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		border-radius: 0;
	}
}

#GameGuesses {
	height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0px;
}
#GameGuesses h4 {
    margin: 0.75rem 0;
}
#GameGuessForm {
	display: flex;
	gap: 0.75rem;
}
#GameGuessInputOuter {
	flex-grow: 1;
}
#GameGuessButtonOuter {
	flex-grow: 0;
}
#GameGuessInput {
	box-sizing: border-box;
	padding: 0.25rem 0.25rem 0.25rem 0.5rem;
	background: #f0f0f0;
	border: 0;
	border-radius: 0.25rem;
	font-size: 1rem;
	height: 2rem;
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}
#GameGuessInput:focus {
	outline: 2px solid var(--purple);
}
#GameGuessButton {
	box-sizing: border-box;
	padding: 0.25rem 1rem 0.25rem 1rem;
	border: 0;
	border-radius: 0.25rem;
	background: var(--purple);
	color: white;
	font-size: 1.2rem;
	line-height: 1.1;
	height: 2rem;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	font-weight: bold;
}
#GameGuessButton span {
	font-size: 1.5rem;
	vertical-align: middle;
}
#GameGuessesList {
	display: flex;
    flex-direction: column-reverse;
    overflow-x: hidden;
	overflow-y: auto;
    max-height: 200px;
}
.GameGuess--Close {
	color: #ffa210;
	font-weight: bold;
}
.GameGuess--Correct {
	color: #09c900;
	font-weight: bold;
}
.GameGuess--Tip {
	color: #a0a0a0;
	font-weight: normal;
}

#GameTurnSuccess {
    max-height: 0;
    animation-name: GameTurnSuccess_expandFrame;
    animation-delay: 0.5s;
    animation-duration: var(--GameTurnSuccess_expandFrame_duration);
    animation-fill-mode: forwards;
}
@keyframes GameTurnSuccess_expandFrame {
	0% { max-height: 0; }
	100% { max-height: var(--GameTurnSuccess_expandFrame_to); }
}

#GameTurnSuccess__MedalContainer {
    position: absolute;
	right: 50%;
    font-size: 5rem;
	top: -0.0275em;
	transform: translate(50%,0);
    animation-name: GameTurnSuccess__Medal_move;
    animation-delay: 1.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes GameTurnSuccess__Medal_move {
	0% { right: 50%; transform: translate(50%,0) }
	100% { right: 0; transform: translate(0,0%) }
}
#GameTurnSuccess__Medal {
    opacity: 0;
    animation-name: GameTurnSuccess__Medal_appear;
    animation-delay: 0.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes GameTurnSuccess__Medal_appear {
	0% { opacity: 0; scale: 5; }
	100% { opacity: 1; scale: 1; }
}
#GameTurnSuccess__Text {
    opacity: 0;
    padding-top: 0.4rem;
    animation-name: GameTurnSuccess__Text_appear;
    animation-delay: 1.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    width: 80%;
}
#GameTurnSuccess__Text p {
    line-height: 1.3;
}
@keyframes GameTurnSuccess__Text_appear {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

#GameRoundComplete {

}
#GameRoundComplete__PlayContainer {
    display: flex;
    margin-top: 0.25rem;
}
.GameRoundComplete__Thumb {
    position: relative;
    animation-name: GameRoundComplete__Thumbs_appear;
    animation-duration: 0.3s;
    animation-delay: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@keyframes GameRoundComplete__Thumbs_appear {
	0% { scale: 0; }
	90% { scale: 1.2; }
	100% { scale: 1; }
}
.GameRoundComplete__Thumb button {
    display: block;
	background: #f0f0f0;
    height: 3rem;
    width: 3rem;
}
.GameRoundComplete__Thumb button span {
    display: block;
    line-height: 3rem;
    text-align: center;
	font-size: 2rem;
    opacity: 0.8;
}
.GameRoundComplete__Thumb:not(.GameRoundComplete__Thumb--active) button:hover span {
    animation-name: GameRoundComplete__Thumb_hover;
    animation-duration: 0.1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes GameRoundComplete__Thumb_hover {
	0% { opacity: 0.8; scale: 1; }
	100% { opacity: 1; scale: 1.15; }
}
.GameRoundComplete__Thumb.GameRoundComplete__Thumb--active button span {
    animation-name: GameRoundComplete__Thumbs_active;
    animation-duration: 0.2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes GameRoundComplete__Thumbs_active {
	0% { scale: 1.15; }
	90% { scale: 1.5; opacity: 1; }
	100% { scale: 1.3; opacity: 1; }
}
.GameRoundComplete__Thumb.GameRoundComplete__Thumb--inactive {
    animation-name: GameRoundComplete__Thumbs_inactive;
    animation-delay: 0s;
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes GameRoundComplete__Thumbs_inactive {
	0% { scale: 1; }
	100% { scale: 0; }
}

#GameRoundComplete__ThumbsDown {
    left: -1rem;
    transform-origin: left center;
}
#GameRoundComplete__ThumbsUp {
    right: -1rem;
    transform-origin: right center;
}
#GameRoundComplete__ThumbsDown button {
	border-radius: 0 0.5rem 0.5rem 0;
}
#GameRoundComplete__ThumbsUp button {
	border-radius: 0.5rem 0 0 0.5rem;
}

#GameRoundComplete__Word {
	text-align: center;
	font-weight: bold;
	font-size: 1.5rem;
    animation-name: GameRoundComplete__Word_appear;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}
@keyframes GameRoundComplete__Word_appear {
	0% { opacity: 0; scale: 3; }
	100% { opacity: 1; scale: 1; }
}
#GameRoundComplete__Play {
	border: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	font-size: var(--emojisize);
	height: 3.1rem;
	line-height: 3.1rem;
	outline: none;
	white-space: pre;
	overflow: hidden;
	cursor: pointer;
    animation-name: GameRoundComplete__Play_appear;
    animation-delay: 0.5s;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes GameRoundComplete__Play_appear {
	0% { opacity: 0; scale: 2; }
	100% { opacity: 1; scale: 1; }
}
#GameRoundComplete__Medals {
    display: flex;
    justify-content: space-evenly;
    margin-top: 1rem;
    border-top: 0.1rem solid var(--grey);
    padding-top: 1rem;
}
.GameRoundComplete__MedalBlock {
    transform-origin: center bottom;
}
.GameRoundComplete__MedalBlock {
    animation-name: GameRoundComplete__MedalBlock_appear;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-delay: var(--medaldelay);
    --medaldelay: 1.75s;
    --playerdelay: 0.2s;
}
@keyframes GameRoundComplete__MedalBlock_appear {
	0% { opacity: 0; scale: 2; }
	100% { opacity: 1; scale: 1; }
}
.GameRoundComplete__MedalBlock--gold {
    transform: scale(1);
    order: 2;
}
.GameRoundComplete__MedalBlock--silver {
    transform: scale(0.85);
    order: 1;
}
.GameRoundComplete__MedalBlock--bronze {
    transform: scale(0.7);
    order: 3;
}
.GameRoundComplete__Medal__Players {
    display: flex;
    justify-content: space-evenly;
}
.GameRoundComplete__Medal__Player {
    position: relative;
    margin: 0.75rem 0;
    animation-name: GameRoundComplete__Medal__Player_appear;
    animation-duration: 0.2s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
@keyframes GameRoundComplete__Medal__Player_appear {
	0% { opacity: 0; scale: 2; }
	100% { opacity: 1; scale: 1; }
}
.GameRoundComplete__Medal__Player:nth-child(1) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 0.1s ); }
.GameRoundComplete__Medal__Player:nth-child(2) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 0.2s ); }
.GameRoundComplete__Medal__Player:nth-child(3) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 0.3s ); }
.GameRoundComplete__Medal__Player:nth-child(4) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 0.4s ); }
.GameRoundComplete__Medal__Player:nth-child(5) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 0.5s ); }
.GameRoundComplete__Medal__Player:nth-child(6) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 0.6s ); }
.GameRoundComplete__Medal__Player:nth-child(7) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 0.7s ); }
.GameRoundComplete__Medal__Player:nth-child(8) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 0.8s ); }
.GameRoundComplete__Medal__Player:nth-child(9) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 0.9s ); }
.GameRoundComplete__Medal__Player:nth-child(10) { animation-delay: calc( var(--medaldelay) + var(--playerdelay) + 1.0s ); }
.GameRoundComplete__Medal__Player__Name {
    position: absolute;
    top: -0.75rem;
    font-size: 0.75rem;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
}
.GameRoundComplete__Medal__Player__Time {
    position: absolute;
    bottom: -0.75rem;
    font-size: 0.75rem;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-weight: bold;
}
.GameRoundComplete__Medal__PlayerEmoji {
	white-space: pre;
	font-size: 3rem;
}
.GameRoundComplete__Medal {
	font-size: 4rem;
	text-align: center;
}

/* Player skipped */

#GameTurnSkipped {
    min-height: 4.6rem;
    padding: 1rem;
	box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
#GameTurnSkipped__Message {
    font-size: 1.5rem;
    width: 90%;
    text-align: center;
}

/* Waiting For Player */

#GameWaitingForPlayer {
    min-height: 4.6rem;
    padding: 1rem;
	box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
#GameWaitingForPlayer__Status {
    font-size: 1.5rem;
    width: 90%;
    text-align: center;
}

/* Waiting for another player */

#GameWaitingForAnotherPlayer {
    min-height: 4.6rem;
    padding: 1rem;
	box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
#GameWaitingForAnotherPlayer__Status {
    font-size: 1.5rem;
    width: 90%;
    text-align: center;
}

/* Game results */

#GameComplete__Leaderboard {
	margin-top: 0.75rem;
}

.GameResults__Players > li {
	display: flex;
	margin-top: 0.25rem;
}
.GameResults__Players__Icon {
	width: 2rem;
	font-size: 2rem;
	text-align: center;
	position: relative;
}
.GameResults__Players__Icon__You {
	position: absolute;
	right: 1.75rem;
	top: 50%;
	font-size: 0.25em;
	transform: translate(0,-50%);
}
.GameResults__Players__Trophy {
	width: 3.5rem;
	font-size: 2rem;
	text-align: center;
}
.GameResults__Players__Medals {
	flex-grow: 1;
	display: flex;
}
.GameResults__Players__Medals > li {
	position: relative;
	max-width: 2rem;
	flex-grow: 1;
}
.GameResults__Players__Medals > li > span {
	font-size: 2rem;
	position: absolute;
	top: 0;
	left: 0
}

/* Emoji picker */

#EmojiPicker {
    display: flex;
    flex-direction: column;
    min-height: 0px;
    max-height: 100%;
}
#EmojiPickerCategory {
	display: flex;
	max-width: 800px;
	box-sizing: border-box;
	display: flex;
	margin: 0 1rem 0 1rem;
	gap: 0.25rem;
	padding-bottom: 0.25rem;
	padding-top: 0.25rem;
}
#EmojiPickerCategory > li {
	flex: 1 1 0;
	display: inline-block;
}
.EmojiPicker__category_toggle,
#EmojiPicker__SearchButton {
	display: inline-block;
	background: rgba(255,255,255,0.3);
	width: 100%;
	color: var(--darkpurple);
	padding: 0.4rem 0;
	border-radius: 0.5rem;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	position: relative;
}
.EmojiPicker__category_toggle span,
#EmojiPicker__SearchButton span {
	pointer-events: none;
	font-size: 2.4rem;
	opacity: 0.85;
	display: block;
}
.EmojiPicker__category_toggle--active,
#EmojiPicker__SearchButton.EmojiPicker__SearchButton--active {
	background: var(--purple);
	color: white;
	background: rgba(255,255,255,0.9);
	border-radius: 0.5rem 0.5rem 0 0;
}
#EmojiPicker__SearchButton.EmojiPicker__SearchButton--active {
	border-radius: 0 0 0.5rem 0.5rem;
}
.EmojiPicker__category_toggle--active::after,
#EmojiPicker__SearchButton.EmojiPicker__SearchButton--active::after {
    position: absolute;
    content: "";
    height: 0.25rem;
    width: 100%;
    right: 0;
    left: 0;
    bottom: -0.25rem;
	background: rgba(255,255,255,0.9);
}
#EmojiPicker__SearchButton.EmojiPicker__SearchButton--active::after {
    bottom: auto;
    top: -0.25rem;
}
.EmojiPicker__category_toggle--active span {
	opacity: 1;
}

#EmojiPickerList {
	max-width: 800px;
	box-sizing: border-box;
	margin:0 1rem 0 1rem;
	min-height: 4rem;
	overflow-y: auto;
	overflow-x: hidden;
	background: rgba(255,255,255,0.9);
	border-radius: 0.5rem 0.5rem 0 0;
}
#EmojiPickerList.EmojiPickerList--last-selected {
	border-radius: 0.5rem 0 0 0;
}
.EmojiPicker__category {
    display: grid;
	justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 3rem);
}
#EmojiSearchResults {
	max-width: 800px;
	box-sizing: border-box;
	margin: 0 1rem 0 1rem;
	min-height: 3rem;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 0 0 0.5rem 0.5rem;
	background: rgba(255,255,255,0.9);
	position: relative;
}
#EmojiSearchResults.EmojiSearchResults--active {
	border-radius: 0 0 0.5rem 0;
}
#EmojiSearchResults::before {
	position: absolute;
	top: 0.5rem;
	left: 50%;
	transform: translate(-50%,0);
	color: #909090;
	font-size: 0.9rem;
}
.EmojiSearchResults--noresults::before {
	content: "no search results";
}
.EmojiSearchResults--empty::before {
	content: "search results will appear here";
}
.EmojiSearchResults--keeptyping::before {
	content: "keep typing...";
}
#EmojiSearchResults.EmojiSearchResults--typeformore::before {
	content: "continue typing for more results";
	left: auto;
	right: 1rem;
	transform: none;
}
#EmojiSearchResultsList {
	display: grid;
	justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 3rem);
}
.EmojiPicker__emoji_button {
	display: inline-block;
	padding: 3px;
	font-size: 2.6rem;
	position: relative;
}
#ProfileEmojiMenu .EmojiPicker__emoji_button--disabled  {
	filter: grayscale(1);
	opacity: 0.55;
}
.EmojiPicker__emoji_button--with_skin_tones:not(.EmojiPicker__emoji_button--disabled)::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 0.5rem 0.5rem;
    border-color: transparent transparent #c0c0c0 transparent;
}
.EmojiPicker__emoji_button:hover {
	background: var(--hover);
}
.EmojiPicker__emoji_button:active {
	background: var(--grey);
}

@media only screen and (max-width: 800px) {
    #EmojiPickerCategory,
    #EmojiPickerList {
	    margin: 0;
	    border-radius: 0 !important;
    }
    #EmojiSearchResults {
	    margin: 0;
	    border-radius: 0;
    }
}

/* Tooltip */

.Tooltip {
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: #f0f0f0;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.5rem;
	pointer-events: none;
	max-width: 10rem;
	min-width: 1.5rem;
	text-align: center;
	whitespace: pre-wrap;
}
.Tooltip--dynamic {
    animation-name: Tooltip_appear;
    animation-duration: 0.2s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    z-index: 700;
}
.Tooltip--tail::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -0.3rem;
    left: calc(50% - 0.3rem - var(--change));
    border-style: solid;
    border-width: 0.3rem 0.3rem 0 0.3rem;
    border-color: rgba(0,0,0,0.8) transparent transparent transparent;
}
@keyframes Tooltip_appear {
	0% { top: calc(var(--top) - 0rem); opacity: 0; }
	100% { top: calc(var(--top) - 0.4rem); opacity: 1; }
}
.Tooltip--disappear {
    animation-name: Tooltip_disappear;
}
@keyframes Tooltip_disappear {
	0% { top: calc(var(--top) - 0.3rem); opacity: 1; }
	100% { top: calc(var(--top) - 0rem); opacity: 0; }
}

/* Skin tone picker */

#EmojiSkinTonePicker {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(224,224,224,0.95);
    border-radius: 0.5rem;
    border: 1px solid rgba(140,140,140,0.95);
    animation-name: EmojiSkinTonePicker_popIn;
    animation-duration: 0.2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    z-index: 205;
}
@keyframes EmojiSkinTonePicker_popIn {
	0% { scale: 0; }
	90% { scale: 1.2; }
	100% { scale: 1; }
}
#EmojiSkinTonePickerList {
    display: grid;
	justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 3rem);
    padding: 0.5rem;
    width: 18rem;
}
#EmojiSkinTonePickerTooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 80%;
    text-align: center;
    transform: translate(0, 0.4rem);
}
#EmojiSkinTonePickerTooltip .Tooltip {
    position: static;
    display: inline-block;
}

/* Button */

.Button {
	white-space: nowrap;
	display: inline-block;
	background: var(--grey);
	border-radius: 0.5rem;
	padding-left: 0.5rem;
	padding: 0.2rem 0.5rem;
	display: flex;
    justify-content: center;
    align-items: center;
}
.Button:hover,
.Button:active {
	outline: 2px solid var(--darkgrey);
}
.Button span:nth-child(1) {
	font-size: 1.75rem;
}
.Button span:nth-child(2) {
	font-weight: bold;
	font-size: 1rem;
	position: relative;
	top: 1px;
	color: var(--darkergrey);
	letter-spacing: 1px;
	margin-left: 0.4rem;
}

/* Profile */

#Profile {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    z-index: 100;
    backdrop-filter: blur(3px);
}
#ProfileInner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 1rem;
    border-radius: 1rem;
	box-shadow: 0 0 3px 1px rgba(0,0,0,0.5);
	background: white;
	max-width: 800px;
    min-width: calc(320px - 2rem);
    box-sizing: border-box;
    padding: 1rem 1rem 0 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0px;
    max-height: 100%;
}

#ProfileMenu {
    margin-top: 1rem;
    border-top: 0.1rem solid var(--grey);
}
#ProfileMenu ul {
    margin: 1rem 0 0.75rem 0;
    display: flex;
    gap: 0.5rem;
}
.ProfileMenu__Button {
    background: var(--grey);
    padding: 0.2rem 0.75rem 0.2rem 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
}
.ProfileMenu__Button--active {
    background: var(--darkergrey);
    color: var(--lightgrey);
}
.ProfileMenu__Button span:nth-child(1) {
    font-size: 1.25rem;
}
.ProfileMenu__Button span:nth-child(2) {
    font-size: 0.75rem;
    margin-left: 0.35rem;
    padding-top: 0.1rem;
}

.ProfilePanel {
    display: flex;
    flex-direction: column;
    min-height: 0px;
    max-height: 100%;
}

/* Profile - Emoji */

#Profile h4 {
    padding-top: 0.75rem;
}

#ProfileCurrentEmojiContainer {
	display: flex;
    align-items: center;
}
#ProfileCurrentEmoji {
	font-size: 4rem;
}
#ProfileCurrentEmoji__Label {
    position: relative;
    top: 0.05rem;
}
#ProfileCurrentEmoji__Label .Emoji {
    margin: 0 0.5rem;
    top: 0.4rem;
}
#ProfileEmojiMenu {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 100%;
	padding: 0 0 1rem 0.25rem;
	margin-left: -0.5rem;
}
.ProfileEmojiSubMenuHeading {
	position: relative;
	left: -0.25rem;
	margin: 0.75rem 0 0.15rem 0;
}
.ProfileEmojiSubMenuHeading h5 {
	background: var(--purple);
	color: white;
	display: inline-block;
	padding: 0.3rem 0.5rem 0.15rem 0.5rem;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	line-height: 0.75rem;
}
.ProfileEmojiSubMenu {
	display: grid;
	justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 3rem);
}

/* Profile - Achievements */

#ProfileAchievements {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 100%;
	padding: 0 0 1rem 0;

}
#ProfileAchievements__List {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, auto));
    column-gap: 0.75rem;
    row-gap: 0.75rem;
}
.ProfileAchievement {
    opacity: 0.6;
}
.ProfileAchievement--earned {
    opacity: 1;
}
.ProfileAchievement__Button {
	box-sizing: border-box;
    background: var(--lightgrey);
    border: 0.1rem solid var(--darkgrey);
    border-radius: 1rem;
    padding: 0.2rem;
    height: 5rem;
    width: 100%;
    position: relative;
    display: block;
}
.ProfileAchievement--earned .ProfileAchievement__Button {
    border-color: #f8bb00;
    border-width: 0.2rem;
}
.ProfileAchievement__Title {
    position: absolute;
    top: 1.1rem;
    left: 3rem;
    font-size: 0.7rem;
}
.ProfileAchievement__Text {
    position: absolute;
    top: 2.7rem;
    left: 0.5rem;
    right: 0.5rem;
    font-size: 0.6rem;
}
.ProfileAchievement__Trophy {
    position: absolute;
    top: 0.5rem;
    right: 0.7rem;
    z-index: 800;
	font-size: 4rem;
	opacity: 0.2;
}
.ProfileAchievement__Icon {
    position: absolute;
    top: 0.4rem;
    left: 0.3rem;
    z-index: 801;
	font-size: 2rem;
}

/* Profile - Settings */

#Profile__Settings__FullscreenToggle {
    margin-top: 0.75rem;
}

/* Show/hide/resize animations */

.hidden:not(.show--delayed, .show--now) {
    display: none !important;
}
.hidden.show--delayed, .hidden.show--now {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.hide {
    animation-name: fadeOut;
    animation-duration: var(--transitionspeed);
    animation-fill-mode: forwards;
}
@keyframes fadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
.show {
    animation-name: fadeIn;
    animation-duration: var(--transitionspeed);
    animation-fill-mode: forwards;
}
.show--delayed {
    animation-delay: var(--transitionspeed_delay);
}
.show--now {
    animation-delay: 0s;
}
@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.resize {
    animation-name: resizeFrame;
    animation-duration: var(--resizeduration);
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes resizeFrame {
	0% { height: var(--resizefrom); }
	100% { height: var(--resizeto); }
}