:root {
	--gameboard-height: calc(var(--dynamicvh, 1vh) * 98);
	--max-width: 700px;

	--smallletter: calc(min(var(--max-width), 100vw) / 16.2);
	--oofnavtoggleheight: 4vh;
	--oofnavtogglebordersize: 2px;
	--oofnavtogglebordercolor: #ffffff;
	--oofnavtoggletextcolor: #222222;
	--oofnavtoggleselectedtextcolor: #ffffff;

	--background: #eaeaed;
	--background2: #f6f6f6;
	--background3: rgba(0, 0, 0, 0.35);
	--green: #27ae60;
	--greeny: rgba(39, 174, 96, 0.3);
	--greenz: rgba(39, 174, 96, 0.5);
	--red: #e74c3c;
	--redy: rgba(231, 76, 60, 0.3);
	--dark-red: #aa3333;
	--blue: #3498db;
	--bluey: rgba(52, 152, 219, 0.3);
	--very-light-gray: #e6e6e6;
	--light-gray: #d9d9d9;
	--gray: #a7adad;
	--med-gray: #777777;
	--dark-gray: #2c3e50;
	--dark-grayy: rgba(44, 62, 80, 0.85);
	--orange: #e67e22;
	--orangey: rgb(230, 126, 34, 0.5);
	--purple: #9b59b6;
	--purpley: rgba(155, 89, 182, 0.5);
	--black: #222222;
	--white: #ffffff;
	--lightshadow: #bebebe;
	--mediumshadow: #999999;
	--darkshadow: #222222;
	--yellow: #ffc300;
	--yellowy: #ffc4005e;
	--lettertilecolor: #d9d9d9;
	--buttontextcolor: #ffffff;
	--outsetcolora: #ffffff;
	--outsetcolorb: #777777;
	--insetcolora: #777777;
	--insetcolorb: #ffffff;

	--insetshallowboxshadow : 	inset 
								calc(var(--dynamicvh, 1vh) * 0.1)
								calc(var(--dynamicvh, 1vh) * 0.1) 
								calc(var(--dynamicvh, 1vh) * 0.3) 
								#777777,
								inset 
								calc(var(--dynamicvh, 1vh) * -0.2) 
								calc(var(--dynamicvh, 1vh) * -0.2)
								calc(var(--dynamicvh, 1vh) * 0.2) 
								#ffffff;
	--outsetshallowboxshadow : calc(var(--dynamicvh, 1vh) * -0.2)
							calc(var(--dynamicvh, 1vh) * -0.2) 
							calc(var(--dynamicvh, 1vh) * 0.5)
							#bebebe,
							calc(var(--dynamicvh, 1vh) * 0.1) 
							calc(var(--dynamicvh, 1vh) * 0.1)
							calc(var(--dynamicvh, 1vh) * 0.3) 
							#222222;
	
	--insetdeepboxshadow : 	inset
							calc(var(--dynamicvh, 1vh) * 0.2)
							calc(var(--dynamicvh, 1vh) * 0.2) 
							calc(var(--dynamicvh, 1vh) * 0.8)
							#222222,
							inset
							calc(var(--dynamicvh, 1vh) * -0.2) 
							calc(var(--dynamicvh, 1vh) * -0.2)
							calc(var(--dynamicvh, 1vh) * 0.8) 
							#bebebe;
	--outsetdeepboxshadow : calc(var(--dynamicvh, 1vh) * -0.2)
							calc(var(--dynamicvh, 1vh) * -0.2) 
							calc(var(--dynamicvh, 1vh) * 0.8)
							#bebebe,
							calc(var(--dynamicvh, 1vh) * 0.2) 
							calc(var(--dynamicvh, 1vh) * 0.2)
							calc(var(--dynamicvh, 1vh) * 0.8) 
							#222222;

	--insetdeeperboxshadow : 	inset
								calc(var(--dynamicvh, 1vh) * 0.5)
								calc(var(--dynamicvh, 1vh) * 0.5) 
								calc(var(--dynamicvh, 1vh) * 0.8)
								#222222,
								inset
								calc(var(--dynamicvh, 1vh) * -0.4) 
								calc(var(--dynamicvh, 1vh) * -0.4)
								calc(var(--dynamicvh, 1vh) * 1.5) 
								#bebebe;
	--outsetdeeperboxshadow : 	calc(var(--dynamicvh, 1vh) * -0.4)
								calc(var(--dynamicvh, 1vh) * -0.4) 
								calc(var(--dynamicvh, 1vh) * 0.8)
								#bebebe,
								calc(var(--dynamicvh, 1vh) * 0.4) 
								calc(var(--dynamicvh, 1vh) * 0.4)
								calc(var(--dynamicvh, 1vh) * 0.8) 
								#222222;
}
:root.dark {
	--background: #1e1e1e;
	--background2: #2a2a2a;
	--background3: rgba(255, 255, 255, 0.15);
  
	/* Accent colors can remain mostly the same, or be slightly adjusted for visibility */
	--green: #27ae60;
	--greeny: rgba(39, 174, 96, 0.6);
	--greenz: rgba(39, 174, 96, 0.5);
  
	--red: #e74c3c;
	--redy: rgba(231, 76, 60, 0.3);
	--dark-red: #aa3333;
  
	--blue: #3498db;
	--bluey: rgba(52, 152, 219, 0.6);
  
	/* Grays shift toward lighter values for contrast against dark backgrounds */
	--very-light-gray: #888888;
	--light-gray: #999999;
	--gray: #777777;
	--med-gray: #888888;
	--dark-gray: #BBBBBB;
	--dark-grayy: rgba(85, 85, 85, 0.85);
  
	/* Other colors can remain, but may be tweaked for contrast if needed */
	--orange: #e67e22;
	--orangey: rgba(230, 126, 34, 0.7);
	--purple: #9b59b6;
	--black: #dddddd; /* In dark mode, “black” variables become lighter for text */
	--white: #222222; /* And “white” variables become darker for backgrounds */
	--lightshadow: #bebebe;
	--mediumshadow: #999999;
	--darkshadow: #000000;
	--yellow: #ffc300;
	--yellowy: #ffc4005e;

	/* --lettertilecolor:  rgba(255, 255, 255, 0.15); */
	--lettertilecolor: #ffffff44;
	--outsetcolora: #999999;
	--outsetcolorb: #555555;
	--insetcolora: #222222;
	--insetcolorb: #888888;

	--insetshallowboxshadow : 	inset 
								calc(var(--dynamicvh, 1vh) * 0.1)
								calc(var(--dynamicvh, 1vh) * 0.1) 
								calc(var(--dynamicvh, 1vh) * 0.3) 
								#0c0c0c,
								inset 
								calc(var(--dynamicvh, 1vh) * -0.2) 
								calc(var(--dynamicvh, 1vh) * -0.2)
								calc(var(--dynamicvh, 1vh) * 0.2) 
								#353535;
	--outsetshallowboxshadow : calc(var(--dynamicvh, 1vh) * -0.2)
							calc(var(--dynamicvh, 1vh) * -0.2) 
							calc(var(--dynamicvh, 1vh) * 0.3)
							#353535,
							calc(var(--dynamicvh, 1vh) * 0.1) 
							calc(var(--dynamicvh, 1vh) * 0.1)
							calc(var(--dynamicvh, 1vh) * 0.5) 
							#000000;
	--outsetdeepboxshadow : calc(var(--dynamicvh, 1vh) * -0.2)
							calc(var(--dynamicvh, 1vh) * -0.2) 
							calc(var(--dynamicvh, 1vh) * 0.8)
							#353535,
							calc(var(--dynamicvh, 1vh) * 0.2) 
							calc(var(--dynamicvh, 1vh) * 0.2)
							calc(var(--dynamicvh, 1vh) * 0.8) 
							#000000;
	--outsetdeeperboxshadow : 	calc(var(--dynamicvh, 1vh) * -0.4)
								calc(var(--dynamicvh, 1vh) * -0.4) 
								calc(var(--dynamicvh, 1vh) * 0.8)
								#aaaaaa,
								calc(var(--dynamicvh, 1vh) * 0.4) 
								calc(var(--dynamicvh, 1vh) * 0.4)
								calc(var(--dynamicvh, 1vh) * 0.8) 
								#353535;
	
  }
body {
	background-color: var(--background);
	color: var(--black);
	margin: 0px;
	display: grid;
	align-items: center;
	justify-content: center;
	font-family: sans-serif;
	user-select: none;
	overflow: hidden;
}
gamebackground {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;

	z-index: -1;
	opacity: 0.05;

	overflow: hidden;
}
#loadingword {
	margin: auto;
}
titleword {
	display: flex;
	width: 100%;

	flex-wrap: nowrap;
	flex-direction: row;
	place-content: center;
}
#titleword{
	/* display: flex; */
	/* width: 100%; */
	width: min((var(--max-width) * 0.7), 90dvw);

	/* flex-wrap: nowrap;
	flex-direction: row; */
	place-content: center;
}
titleletter {
	width: calc(var(--dynamicvh, 1vh) * 3);
	height: calc(var(--dynamicvh, 1vh) * 3);
	padding: calc(var(--dynamicvh, 1vh) * 0.5);
	margin: calc(var(--dynamicvh, 1vh) * 0.5);
	text-align: center;
	background-color: var(--very-light-gray);
	display: grid;
	align-items: center;
	border-radius: calc(var(--dynamicvh, 1vh) * 1);

	color: var(--black);
	font-size: calc(var(--dynamicvh, 1vh) * 2.5);
	font-weight: 900;
	line-height: calc(var(--dynamicvh, 1vh) * 3);

	transition: all 40ms ease-in;
}

loadingscreen {
	display: grid;
	position: relative;
	width: min(var(--max-width), 100vw);
	height: calc(var(--dynamicvh, 1vh) * 98);
	align-items: center;
	z-index: 1;
}
#loadingmessage {
	height: 3vh;
	font-size: 3vh;
	margin: auto min((var(--max-width) * 0.1), 10vw);
	text-align: center;
}
selectionscreen {
	display: none;
	position: relative;
	height: calc(var(--dynamicvh, 1vh) * 98);
	align-items: center;
	justify-content: center;
	z-index: 1;

	grid-template-rows: auto;

	perspective: 800px;

	width: min(var(--max-width), 100vw);
}
selectionscreen button {
	border-radius: 1vh;
	text-align: center;
	height: 6vh;
	font-size: 3vh;
	margin: 0.2vh;
	cursor: pointer;
	color: var(--buttontextcolor);
	width: 100%;
	margin-bottom: 2vh;
	border: 0;

	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow); */
	box-shadow: var(--outsetdeepboxshadow);
	background-color: var(--blue);
}

selectionscreen #puzzlegame {
	height: 16vh;
	font-size: 6vh;
}

selectionscreen #resumepuzzlegame {
	height: 16vh;
	font-size: 6vh;
}

.buttonsection {
	position: relative;
}
installsection {
	border: 0.7vh solid var(--purple);
	padding: 2vh 2vh 5vh 2vh;
	position: relative;
	background-color: var(--white);
	color: var(--black);
	display: none;
	border-radius: 2vh;

	margin: auto;
	width: min((var(--max-width) * 0.51), 51vw);
}
installheader {
	position: absolute;
	top: 0.5vh;
	left: 2vh;
	font-size: 3vh;
	font-weight: 700;
	display: none;
}

installmessage {
	font-size: 2vh;
}

installbutton {
	border: 0.3vh solid var(--med-gray);
	background-color: var(--black);
	border-radius: 0.4vh;
	text-align: center;
	justify-content: center;
	align-content: center;
	display: block;
	height: 3vh;
	font-size: 2vh;
	margin: 0.2vh;
	cursor: pointer;
	color: var(--white);
	position: absolute;
	bottom: 0.5vh;
	/* right: 1.25vh; */
	left: 50%;
	transform: translateX(-50%);
	padding-left: 3vh;
	padding-right: 1vw;
	background-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='install2' version='1.1' viewBox='0 0 100 100' height='100' width='100'%3E%3Cg transform='translate(0,-128.82936)' id='layer1'%3E%3Cpath id='path1974' d='m 35,128.82936 h 30 v 45 h 30 l -45,40 -45,-40 h 30 z' style='fill:%23ffffff;' /%3E%3Crect y='218.82936' x='5' height='10' width='90' id='rect1978' style='fill:%23ffffff;' /%3E%3C/g%3E%3C/svg%3E%0A");
	background-position-x: 0.2vw;
	background-position-y: center;
	background-size: 2.2vh;
	background-repeat: no-repeat;
}
iosinstallsection {
	border: 0.7vh solid var(--purple);
	background-color: var(--white);
	display: none;
	position: relative;
	color: var(--black);
	padding: 2vh;
	text-align: center;
	border-radius: 2vh;
	font-size: 2vh;
	margin: auto;
	width: min((var(--max-width) * 0.51), 51vw);
}
#browserinfo {
	font-size: 1vh;
	font-weight: 100;
	position: relative;

	text-align: left;
	color: var(--dark-gray);
	margin-top: 2vh;
}
#askstartgame {
	position: absolute;
	top: 6vh;
	left: 5vw;
	right: 5vw;
	bottom: 11vh;
	background-color: var(--white);
	z-index: 500;
	display: none;
	border: 0.5vh solid var(--white);
	border-radius: 2vh;
	grid-template-rows: auto min-content;
	column-gap: 40vh;
	padding-bottom: 1vh;
}
.greenbutton {
	background-color: var(--green);
}
gameboard {
	top: 0px;
	position: relative;

	height: var(--gameboard-height);

	margin-top: 0.1vh;
	margin-bottom: 1vh;
	display: none;

	grid-template:
		"boardheader" calc(var(--dynamicvh, 1vh) * 6)
		"thewords" minmax(
			auto,
			calc(
				var(--gameboard-height) - calc(var(--dynamicvh, 1vh) * 17.6) -
					((min(var(--max-width), 100vw) / 6) * 2)
			)
		)
		"controls" auto;

	width: min(var(--max-width), 100vw);
	z-index: 1;
	/* background-color: var(--background3); */
	overflow: hidden;
}
boardheader {
	position: relative;
	display: grid;
	grid-template: "roundscoretext progresstext elapsedtimetext" "roundscore gameprogress elapsedtime";
	grid-template-columns: 25% 50% 25%;

	grid-area: boardheader;

	padding: 0.3vh 1vh 0.3vh 1vh;
	border-radius: 0.5vh;
	color: var(--black);
}
thewords {
	grid-area: thewords;

	position: relative;

	overflow: hidden;
	background-color: unset;
	box-shadow: inset calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.4)
			var(--lightshadow),
		inset calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.4) var(--darkshadow);
	border-radius: 2vh;
	background-color: var(--background2);

	width: auto;
	margin-left: min((var(--max-width) * 0.02), 1vw);
	margin-right: min((var(--max-width) * 0.02), 1vw);
}
controls {
	grid-area: controls;
	grid-template-rows: auto calc(var(--dynamicvh, 1vh) * 7.6);
	align-items: center;
	width: 100%;
}
letters {
	grid-area: letters;
	display: grid;
	position: relative;
	align-items: center;
}
actions {
	grid-area: actions;
	display: grid;
	grid-template-columns: repeat(3, 33.3%);
	width: 100%;
	padding-top: 1vh;
}
pausescreen {
	display: none;
	position: relative;
	height: calc(var(--dynamicvh, 1vh) * 98);
	align-items: center;
	grid-template-rows: calc(var(--dynamicvh, 1vh) * 20) calc(
			var(--dynamicvh, 1vh) * 40
		) repeat(3, calc(var(--dynamicvh, 1vh) * 8));
	z-index: 1;
	max-width: min(var(--max-width), 100vw);
}
pausescreen button {
	border-radius: 1vh;
	text-align: center;
	height: 6vh;
	font-size: 3vh;
	margin: 0.2vh;
	cursor: pointer;
	color: var(--buttontextcolor);

	width: min(calc(var(--max-width) * 0.7), 70vw);
	margin-top: 2vh;
	border: 0;
	box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.4)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.4) var(--darkshadow);
	background-color: var(--blue);
}
#pausedquitgame {
	background-color: var(--orange);
}
#pausedcontinue {
	background-color: var(--green);
}
resultsscreen {
	display: none;
	position: relative;

	height: 100vh;

	width: min(var(--max-width), 100vw);

	z-index: 1;
}
resultsheader {
	position: absolute;
	display: grid;

	width: 100%;
	grid-area: resultsheader;

	left: 0px;
	top: 0px;

	height: calc(var(--dynamicvh, 1vh) * 42);
	overflow: hidden;
	right: 0px;

	grid-template:
		"resultsleveltitle" calc(var(--dynamicvh, 1vh) * 11)
		/* "resultsstatresult" calc(var(--dynamicvh, 1vh) * 3) */
		"resultsprogresscontainer" calc(var(--dynamicvh, 1vh) * 14)
		"resultsstatssection" calc(var(--dynamicvh, 1vh) * 15) / 1fr;
}

.resultssolution{
	padding-bottom: calc(var(--dynamicvh, 1dvh) * 4);
}

.resultsleveltitle {
	grid-area: resultsleveltitle;
	display: grid;
	justify-content: center;
	align-items: center;
	element {
		margin-top: calc(var(--dynamicvh, 1vh) * 1);
	}
	font-size: calc(var(--dynamicvh, 1vh) * 6);
	font-weight: 900;
	line-height: calc(var(--dynamicvh, 1vh) * 6);
}

.resultsleveltitle wordletterword {
	/* width: 60%; */
	/* width:100%; */
	display: flex;
}
.resultsleveltitle wordletterword wordlettertile {
	aspect-ratio: 1/1;
	width: calc(var(--dynamicvh, 1dvh) * 4);
}

statsresult {
	grid-area: resultsstatresult;
	font-size: 3vh;
	font-weight: 700;
	text-align: center;
	columns: #fff;
	margin: auto;
	display: none;
}
#resultsprogresscontainer {
	grid-area: resultsprogresscontainer;
	margin: 2vh 2vh 0 2vh;
}
roundscoretext {
	grid-area: roundscoretext;
	color: var(--black);

	font-size: 1.5vh;
	display: block;
}
elapsedtimetext {
	grid-area: elapsedtimetext;
	color: var(--black);

	font-size: 1.5vh;
	display: block;
	text-align: right;
}
progresstext {
	grid-area: progresstext;
	color: var(--black);

	top: 0px;
	font-size: 1.5vh;
	display: block;
	width: 100%;
	text-align: center;
}
.progressText {
	font-size: 3vh;
	font-weight: 700;
}
roundscore {
	grid-area: roundscore;

	font-size: 3vh;

	text-align: left;
	overflow: hidden;
	display: block;
	transition: transform, font-weight, color;
	transition-timing-function: ease-in-out;
	transition-duration: 400ms;
	transform-origin: left center;
}
.rolling {
	transform: scale(1.2);
	font-weight: bold;
	color: var(--black);
}
gameprogresscontainer {
	grid-area: gameprogress;
}
.progressworking {
	background-color: var(--blue);
}
.progresspassed {
	background-color: var(--green);
}
elapsedtime {
	grid-area: elapsedtime;

	text-align: right;
	font-size: 3vh;
	overflow: hidden;

	display: block;
}
gameprogress {
	grid-area: gameprogress;
	width: 100%;
	border: 0.05vh solid var(--mediumshadow);
	background-color: var(--light-gray);
	height: 1.5vh;
	position: relative;
	display: block;
	border-radius: 1vh;

	margin-bottom: 0.5vh;
	margin-top: 1vh;
}
progressvalue {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: var(--blue);

	display: block;
	height: 100%;
	border-radius: 0.75vh;

	transition: all 500ms ease-in-out;
}
.roundpassed {
	color: var(--green);
}
.roundfailed {
	color: var(--red);
}
availablewords {
	display: grid;
	grid-template: "threes fours fivessixes" auto;
	width: 100%;
	margin-top: 0.5vh;
	overflow-y: auto;
	height: calc(100% - 0.5vh);
	-ms-overflow-style: none;

	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-top: 1vh;
	padding-bottom: 1vh;
	box-sizing: border-box;
}
threes {
	grid-area: threes;
	padding-right: var(--smallletter);
	margin-bottom: 0.5vh;
	text-align: right;
}
fours {
	grid-area: fours;
	margin-bottom: 0.5vh;
	text-align: center;
}
fivessixes {
	padding-left: var(--smallletter);
	grid-area: fivessixes;
	text-align: left;
}
fives {
	margin-bottom: var(--smallletter);
	height: auto;
}
sixes {
	display: block;
}
.bonusword {
	transition: height 500ms ease-in-out;
}
.bonuswordhidden {
	height: 0px;
	visibility: hidden;
}
.bonusword > lettertile {
	background-color: var(--purpley);
	border: 1px solid rgba(2, 2, 2, 0.06);
}
.lettertile-in {
	/* box-shadow: inset calc(var(--dynamicvh, 1vh) * 0.1)
			calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.3) var(--med-gray),
		inset calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * 0.2) var(--white); */
	box-shadow: var(--insetshallowboxshadow);
}
.lettertile-out {
	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.5)
			var(--white),
		calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.1)
			calc(var(--dynamicvh, 1vh) * 0.3) var(--med-gray); */
	box-shadow: var(--outsetshallowboxshadow);
	background-color: var(--light-gray);
}
.hinted {
	background-color: var(--orangey);
}
.definitiongiven{
	opacity: 1.0;
}
.worddefinitiongiven lettertile {
	background-color: var(--yellow);
}
/* .definitiongiven::before {
	content: "?";
	color: var(--black);
	position:absolute;
	font-size: 2.5dvw;
	font-weight: 900;
	top: -0.1vh;
	left: .8dvh;
} */
wordletterword {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 0.7vh;
	margin-bottom: 0.7vh;
}
.achievementwordtiles {
	display: grid;

	grid-template-columns: 50% 50%;
	margin-bottom: 4dvh;
	align-items: center;
}
#achievementslist .achievementtitle wordletterword {
	display: flex;

	justify-content: right;
	gap: 0.3vh;
	margin-bottom: 0.3vh;
}
#achievementslist .achievementvalue wordletterword {
	display: flex;

	justify-content: left;

	margin-bottom: 0.3vh;
}
#achievementslist .achievementvalue {
	margin-left: 0.3vh;
}
#achievementsscreen {
	will-change: transform;
}
#achievementsscreen .utilityscreencontent {
	padding: calc(var(--dynamicvh, 1vh) * 2) calc(var(--dynamicvh, 1vh) * 2);
	margin: 0 calc(var(--dynamicvh, 1vh) * 0.5);
}
wordlettertile {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	border-radius: 20%;
	justify-content: center;

	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow); */
	box-shadow: var(--outsetdeepboxshadow);
	background-size: contain;
	background-color: var(--light-gray);
}
#achievementslist .achievementtitle wordlettertile {
	width: 1.7dvh;
}
#achievementslist .achievementvalue wordlettertile {
	width: 3.8dvh;
	background-color: var(--orangey);
}
.basescore {
	position: absolute;
	display: block;

	font-size: 5vh;
	font-weight: 600;
	color: var(--dark-gray);
	animation-name: scorepop;
	animation-duration: 2000ms;
	transform-origin: center;
	transition-property: top, left;
	transition-duration: 400ms;
}
@keyframes scorepop {
	0% {
		opacity: 0;
        transform: scale(0.1);
	}

	10% {
		opacity: 1;
	}

    40%{
        transform: scale(2.0);
    }

	80% {
        transform: scale(1.0);
		opacity: 1;
	}

	100% {
		opacity: .5;
	}
}
.bonuswordfloat {
	position: absolute;
	display: block;

	font-size: 4vw;
	font-weight: 900;
	animation-name: bonuspop;
	animation-duration: 1000ms;
	animation-timing-function: ease-in-out;
	color: var(--purple);
	transform-origin: center;
	transition-property: top, left;
	transition-duration: 400ms;
}
@keyframes bonuspop {
	0% {
		opacity: 0;
        transform: scaley(0.1) scalex(.9) rotate(-180deg);
	}

	10% {
		opacity: 1;

	}

    30%{
        transform: scaleY(2.0) scalex(2) rotate(0deg);
    }

	40%,60% {
        transform: scaley(3.0) scalex(2.5) rotate(0deg) ;
		opacity: 1;
	}

	100% {
        transform: scale(.1) scalex(.5) rotate(0deg) ;
		opacity: .2;
	}
}
.bonusscore {
	position: absolute;
	display: block;
	font-size: 6vh;
	font-weight: 600;
	animation-name: scorepop;
	animation-duration: 2000ms;
	transition-property: top, left;
	transition-duration: 400ms;
}
.bonusscore0 {
	color: var(--black);
}
.bonusscore1 {
	transform: scale(1.4);
	color: var(--orange);
}
.bonusscore2 {
	transform: scale(1.6);
	color: var(--green);
}
.bonusscore3 {
	transform: scale(1.8);
	color: var(--blue);
}
.shakescreen {
	animation-name: shake;
	animation-duration: 500ms;
}
@keyframes shake {
	0%,
	100% {
		transform: rotate(0deg);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: rotate(1deg);
	}
	20%,
	40%,
	60%,
	80% {
		transform: rotate(-1deg);
	}
}
bonusprogresscontainer {
	width: 96%;
	height: 2vh;
	background-color: #e0e0e0;
	border-radius: 1vh;

	position: relative;

	margin: 1vh auto;

	transition: box-shadow 0.2s linear, background-color 0.2s linear;
}
.bonusprogressshow {
	box-shadow: inset calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.4)
			var(--lightshadow),
		inset calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.2) var(--darkshadow);
	background-color: #e0e0e0;
}
.bonusprogresshide {
	box-shadow: inset calc(var(--dynamicvh, 1vh) * -0)
			calc(var(--dynamicvh, 1vh) * -0) calc(var(--dynamicvh, 1vh) * 0)
			var(--lightshadow),
		inset calc(var(--dynamicvh, 1vh) * 0) calc(var(--dynamicvh, 1vh) * 0)
			calc(var(--dynamicvh, 1vh) * 0) var(--darkshadow);
	background-color: var(--background);
}
bonusprogress {
	position: absolute;
	left: 0.3vh;
	top: 0.3vh;
	right: 0.9vh;
	bottom: 0.2vh;
}
bonusprogressvalue {
	color: #ffffff;
	display: block;
	font-size: 1.4vh;
	line-height: 1.5vh;
	font-weight: 700;
	text-align: right;
	padding-right: 0.5vh;
	position: relative;
	background-color: #0084ff;
	border-radius: 1vh;
	display: none;

	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-direction: forwards;
	box-shadow: calc(var(--dynamicvh, 1vh) * -0) calc(var(--dynamicvh, 1vh) * -0)
			calc(var(--dynamicvh, 1vh) * 0) var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.1)
			calc(var(--dynamicvh, 1vh) * 0.1) var(--darkshadow);

	height: 100%;
}
.bonusprogressvalue3x {
	width: 66%;
	background-color: var(--blue);
	display: block;
}
.bonusprogressvalue2x {
	width: 33%;
	background-color: var(--green);
	display: block;
}
.bonusprogressvalue1x {
	width: 0%;
	background-color: var(--orange);
	opacity: 0;
	display: block;
}
.bonusprogressvalue0x {
	width: 0%;
	background-color: var(--background);
	display: none;
}
bonusprogresstext {
	position: absolute;
	right: 0.5vh;
	top: 0px;
}@keyframes bonus3x {
    0% {
        width:100%;
        background-color: var(--background);
    }
    2% {
        background-color: var(--blue);
    }

    100% {
        width:66%;
    }
    
}

@keyframes bonus2x {
    0% {
        width:66%;
        background-color: var(--background);
    }
    4% {
        background-color: var(--green);
    }

    100% {
        width:33%;
    }
    
}

@keyframes bonus2xlower {
    0% {
        width:66%;
    }

    100% {
        width:33%;
    }
    
}

@keyframes bonus1x {
    0% {
        opacity: 1.0;
        width:33%;
        background-color: var(--background);
    }
    4% {
        background-color: var(--orange);
    }
    50% {
        color: #ffffff;
        background-color: var(--orange);
        box-shadow: calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--lightshadow), calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.1) var(--darkshadow);
    }   
    80%{
        opacity: 1.0;
        color:transparent;
    }
    90%{
        opacity: 0;
        box-shadow: calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--lightshadow), calc(var(--dynamicvh, 1vh) * 0.0) calc(var(--dynamicvh, 1vh) * 0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--background);
    }
    100% {
        width:0%;
        background-color: var(--background);
        opacity: 0;
        color:transparent;
        box-shadow: calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--lightshadow), calc(var(--dynamicvh, 1vh) * 0.0) calc(var(--dynamicvh, 1vh) * 0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--background);
    }
    
}

@keyframes bonus1xlower {
    0% {
        opacity: 1.0;
        width:33%;
    }
    50% {
        color: #ffffff;
        box-shadow: calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--lightshadow), calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.1) var(--darkshadow);
    }   
    80%{
        opacity: 1.0;
        color:transparent;
    }
    90%{
        opacity: 0;
        box-shadow: calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--lightshadow), calc(var(--dynamicvh, 1vh) * 0.0) calc(var(--dynamicvh, 1vh) * 0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--background);
    }
    100% {
        width:0%;
        opacity: 0;
        color:transparent;
        box-shadow: calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * -0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--lightshadow), calc(var(--dynamicvh, 1vh) * 0.0) calc(var(--dynamicvh, 1vh) * 0.0) calc(var(--dynamicvh, 1vh) * 0.0) var(--background);
    }
    
}
@keyframes bonusprogresstextchange{
    0% {
        transform: scale(0.1) rotate(40deg) skew(40deg);
        top: -2vh;
        color: var(--background);
    }
    10% {
        transform: scale(5.0) rotate(-10deg) skew(-10deg);
        top: -2vh;
        color: var(--blue);
    }
    20% {
        transform: scale(3.0) rotate(-5deg) skew(-5deg);
        top: -2vh;
    }

    100% {
        top: 0px;
        transform: scale(1.0) rotate(0deg) skew(0deg);
    }
}
selectedletters {
	display: flex;
	justify-content: space-between;
	grid-template-columns: repeat(6, 1fr);
	width: 100%;
	margin-bottom: 0.5vh;
	padding-left: 0vh;
	padding-right: 0.2vh;
}
selectedletter {
	margin-right: 0.5vh;
	margin-left: 0.5vh;
	flex: 1;
	position: relative;
}
selectedletter:before {
	content: "";
	float: left;
	padding-top: 100%;
}
availableletters {
	display: flex;
	justify-content: space-between;
	grid-template-columns: repeat(6, 1fr);
	width: 100%;
	padding-left: 0vh;
	padding-right: 0.2vh;
}
availableletter {
	margin-right: 0.5vh;
	margin-left: 0.5vh;
	flex: 1;
	position: relative;
}
availableletter:before {
	content: "";
	float: left;
	padding-top: 100%;
}
actions * {
	background-color: var(--blue);
	color: var(--light-gray);
	border-radius: 1vh;
	text-align: center;

	height: 8vh;
	line-height: 8vh;
	font-size: 3vh;
	margin: 0.5vh;

	cursor: pointer;
	display: none;

	font-weight: 900;
	touch-action: manipulation;

	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.4)
			calc(var(--dynamicvh, 1vh) * -0.4) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.4) calc(var(--dynamicvh, 1vh) * 0.4)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow); */
	box-shadow: var(--outsetdeeperboxshadow);
}
buttonx {
	color: var(--background2);
}
#try {
	background-color: var(--green);
}
#shuffle {
	background-color: var(--purple);
}
#last {
	background-color: var(--blue);
}
#stop {
	background-color: var(--orange);
}
#clear {
	display: none;
	background-color: var(--red);
}
placeholderaction {
	border-color: transparent;
	background-color: transparent;
	border: 0;
	visibility: hidden;
}
resultsactions button {
	/* display: none; */
	/* flex: 1; */
	width: min(calc(var(--max-width) * 0.70), 70vw);
	grid-column: span 1;
	/* width:100%; */
	border-radius: 1vh;
	text-align: center;
	height: 6vh;
	font-size: 3vh;
	margin: 2vh auto 0vh auto;
	cursor: pointer;
	color: #fff;

	/* width: min(calc(var(--max-width) * 0.7), 70vw); */
	box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.4)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.4) var(--darkshadow);
	border-radius: 1vh;

	background-color: var(--blue);
	border: 0;
}
resultsscreen #resultsnextround {
	display: block;
	width: min(calc(var(--max-width) * 0.7), 70vw);
	grid-column: span 2;
	background-color: var(--green);
}
resultsscreen #resultsquitgame {
	display: block;
}
.popper div {
	display: inline-block;
	width: 2vh;
	height: 2vh;
	border-radius: 0.3vh;
	background-color: #fff;
	margin: 0.1vh;

	animation-name: dopopper;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 1s;
}
.popper div:nth-child(2) {
	animation-delay: 0.1s;
}
.popper div:nth-child(3) {
	animation-delay: 0.2s;
}
.popper div:nth-child(4) {
	animation-delay: 0.3s;
}
.popper div:nth-child(5) {
	animation-delay: 0.4s;
}
.popper div:nth-child(6) {
	animation-delay: 0.5s;
}
@keyframes dopopper{
    0%,50%{

            box-shadow: inset calc(var(--dynamicvh, 1vh) * 0.1)
                    calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.3) #777,
                inset calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * -0.2)
                    calc(var(--dynamicvh, 1vh) * 0.2) #fff;
        
    }
    51%,100%{
        
        
            box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
                    calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.5)
                    var(--white),
                calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.1)
                    calc(var(--dynamicvh, 1vh) * 0.3) #777;
            background-color: var(--light-gray);
        
        
    }
}
loadingstats {
	position: absolute;

	display: none;
	align-items: center;
	opacity: 0.7;
	z-index: 9999;
	width: 70vh;
	height: 70vh;
	align-content: center;
	margin: calc(50% - 35vh);
}
.resultssection {
	position: absolute;
	display: grid;

	top: calc(var(--dynamicvh, 1vh) * 1);
	grid-template-rows: calc(var(--dynamicvh, 1vh) * 3) auto;
	background-color: var(--light-gray);
	left: 1vh;
	right: 1vh;
}
.statssection {
	grid-area: resultsstatssection;
	position: absolute;
	display: grid;

	left: 1vh;
	right: 1vh;
}
statssection {
	grid-template-areas:
		"scores time"
		"comment comment";
	grid-template-rows: calc(var(--dynamicvh, 1vh) * 10) calc(
			var(--dynamicvh, 1vh) * 6
		);
	align-items: center;
	justify-content: center;

	height: calc(var(--dynamicvh, 1vh) * 21);
}
statssection div {
	font-size: 5vh;
	text-align: center;
	font-weight: 600;
}
scoresection {
	grid-area: scores;

	width: min(calc(var(--max-width) * 0.48), 48vw);

	margin: auto;
}
timesection {
	grid-area: time;

	width: min(calc(var(--max-width) * 0.48), 48vw);
	margin: auto;
}
gamescoresection {
	grid-area: time;
	display: none;
}
#resultscomments {
	display: grid;
	grid-area: comment;
	font-size: 2vh;
	padding-left: 5vw;
	padding-right: 5vw;
	text-align: center;

	height: calc(var(--dynamicvh, 1vh) * 6);

	align-content: center;
	color: var(--orange);
	font-style: italic;
}
.resultsheader {
	margin-top: 1vh;
	text-align: center;
	font-size: 1.5vh;
}
.screenarrow {
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 7vh;
	width: 12vw;

	top: calc(var(--dynamicvh, 1vh) * 75);
	cursor: pointer;

	z-index: 999;
	display: none;
}
nextscreen {
	right: 0vw;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg8' version='1.1' viewBox='0 0 10.628181 25.280146' height='95.547005' width='40.169502'%3E%3Cg transform='translate(-7.9150762,-271.11584)' id='layer1'%3E%3Cpath id='path4530' d='m 9.0158094,295.66216 v 0 L 16.953309,283.75591 9.0158094,271.84966 v 0' style='fill:none;stroke:%23dddddd;stroke-width:2.64583325;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3C/g%3E%3C/svg%3E%0A");
}
prevscreen {
	left: 0vw;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg8' version='1.1' viewBox='0 0 10.628181 25.280146' height='95.547005' width='40.169502'%3E%3Cg transform='translate(-7.9150762,-271.11584)' id='layer1'%3E%3Cpath id='path4530' d='m 17.442524,271.84966 v 0 l -7.9374999,11.90625 7.9374999,11.90625 v 0' style='fill:none;stroke:%23dddddd;stroke-width:2.64583325;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3C/g%3E%3C/svg%3E%0A");
}
resultspanels {
	display: grid;

	position: absolute;

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

	width: min(var(--max-width), 100vw);

	height: calc(var(--dynamicvh, 1vh) * 41);
	overflow: hidden;
	top: calc(var(--dynamicvh, 1vh) * 41);
}
#resultsprogresscontainer {
	margin: 2vh 2vh 0 2vh;
}
.panelheader {
	font-size: calc(var(--dynamicvh, 1vh) * 2);
	line-height: calc(var(--dynamicvh, 1vh) * 4);
	font-weight: 600;

	height: calc(var(--dynamicvh, 1vh) * 3);
	text-align: center;
	color: var(--dark-gray);
}
.paneltitle {
	font-size: calc(var(--dynamicvh, 1vh) * 5.5);
	position: absolute;

	line-height: calc(var(--dynamicvh, 1vh) * 9);

	text-align: center;
	font-weight: 600;
	left: 12vw;
	width: 76vw;
	bottom: calc(var(--dynamicvh, 1vh) * -9);
	display: none;
}
solutionsection {
	height: calc(var(--dynamicvh, 1vh) * 39);
	box-shadow: inset calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.4)
			var(--lightshadow),
		inset calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.4) var(--darkshadow);
	border-radius: 2vh;
	padding-bottom: 0.5vh;
	box-sizing: content-box;
	overflow: hidden;
}
resultsactions {
	position: absolute;
	display: none;
	grid-template-columns: 1fr;
	/* column-gap: calc(var(--dynamicvh, 1vh) * 0); */
	grid-template-rows: auto auto;
	width: 100%;
	max-height: calc(var(--dynamicvh, 1vh) * 20);

	top: calc(var(--dynamicvh, 1vh) * 81.5);
	padding-bottom: 2vh;
	/* padding: 0 calc(var(--dynamicvh, 1vh) * 4) 2 calc(var(--dynamicvh, 1vh) * 4); */
}
worddefinitioncontainer {
	position: absolute;
	top: calc(var(--dynamicvh, 1vh) * 2.5);

	left: calc(var(--dynamicvh, 1vh) * 3.1);
	right: calc(var(--dynamicvh, 1vh) * 3.1);

	height: calc(var(--dynamicvh, 1vh) * 30);
	background-color: var(--background2);
	grid-template:
		"wdheading wdheading" 2vh
		"wdword wdword"
		"wddefinition wddefinition"
		"wddisputebutton wdclose";
	display: none;
	border-radius: 1vh;

	box-shadow: calc(var(--dynamicvh, 1vh) * -0.4)
			calc(var(--dynamicvh, 1vh) * -0.4) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.4) calc(var(--dynamicvh, 1vh) * 0.4)
			calc(var(--dynamicvh, 1vh) * 0.4) var(--darkshadow);

	z-index: 1001;
	transition: transform 0.5s;
}
#wdheading {
	grid-area: wdheading;
	font-size: calc(var(--dynamicvh, 1vh) * 2);
	font-weight: 600;
	margin: .5vh 2vw;
	color: var(--dark-gray);
	text-align: center;
}

#wdword {
	grid-area: wdword;
	font-size: 3vh;
	font-weight: 700;
	margin: auto 2vw;
	color: var(--black);
	font-family: 'Courier New', Courier, monospace;
}

#wddefinition {
	grid-area: wddefinition;
	font-size: 2.5vh;
	font-weight: 400;
	margin: 0 2vw;
	color: var(--black);
	max-height: 11vh;
	overflow-y: scroll;
	font-family: 'Courier New', Courier, monospace;
}

#wddisputebutton {
	grid-area: wddisputebutton;
	/* border: 0.4vw solid #333; */
	background-color: var(--red);
	color: var(--white);
	height: 4vh;
	line-height: 4vh;
	text-align: center;
	width: 80%;
	border-radius: 1vw;
	font-size: 2vh;
	margin: auto auto;
	cursor: pointer;
    box-shadow: calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.2) var(--lightshadow), calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2) var(--darkshadow);
}

#wdclose {
	grid-area: wdclose;

	/* border: 0.4vw solid #333; */
	background-color: var(--gray);
	color: var(--black);
	height: 4vh;
	line-height: 4vh;
	text-align: center;
	width: 80%;
	border-radius: 1vw;
	font-size: 2vh;
	margin: auto auto;
	cursor: pointer;
    box-shadow: calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.2) var(--lightshadow), calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2) var(--darkshadow);
}

#wdXclose {
	position: absolute;
	top: 10px;
	right: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 16.094l-4.157-4.104 4.1-4.141-1.849-1.849-4.105 4.159-4.156-4.102-1.833 1.834 4.161 4.12-4.104 4.157 1.834 1.832 4.118-4.159 4.143 4.102 1.848-1.849z'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
    cursor: pointer;
	display: none;
}
word {
	display: grid;
	width: auto;
	height: var(--smallletter);
}
threes word {
	grid-template-columns: repeat(3, var(--smallletter));
	justify-content: end;
}
fours word {
	grid-template-columns: repeat(4, var(--smallletter));
	justify-content: center;
}
fives word {
	grid-template-columns: repeat(5, var(--smallletter));
	justify-content: left;
}
sixes word {
	grid-template-columns: repeat(6, var(--smallletter));
	justify-content: left;
}
messagecontainer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	overflow: visible;

	z-index: 1114;
}
/* #roundpickerscreen {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	overflow: hidden;
	z-index: 1113;
	display: none;
	background-color: #000;
	line-height: 40px;
	font-size: 140%;
	padding-left: 20px;
	border-radius: 8px;
	border: 4px solid #ffffff;
} */
achievementcontainer {
	position: absolute;
	top: 0px;
	left: 0px;

	right: 0px;
	height: 0px;

	overflow: visible;

	z-index: 1511;
}
.achievement {
	will-change: transform, opacity;

	transition: transform 0.3s, opacity 0.1s;
	transition-timing-function: ease-in-out;
	display: grid;
	position: absolute;
	top: 0vh;
	background-color: var(--orange);

	color: var(--white);

	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: calc(var(--dynamicvh, 1vh) * 2.1);
	font-size: calc(var(--dynamicvh, 1vh) * 2);
	min-height: calc(var(--dynamicvh, 1vh) * 5.5);
	font-weight: 600;

	z-index: 2400;
	padding: 0 calc(var(--dynamicvh, 1vh) * 1);

	overflow: hidden;
	left: 20dvw;
	width: 60dvw;

	transform: translateY(-100vh);
	border-bottom: 1px solid var(--black);
	border-left: 1px solid var(--black);
	border-right: 1px solid var(--black);
	border-bottom-left-radius: calc(var(--dynamicvh, 1vh) * 1);
	border-bottom-right-radius: calc(var(--dynamicvh, 1vh) * 1);
}
.achievement span {
	will-change: transform;

	display: inline-block;
}
lettertile {
	margin: calc(var(--dynamicvh, 1vh) * 0.2);
	touch-action: manipulation;
	display: block;

	border-radius: calc(var(--dynamicvh, 1vh) * 0.4);
	border: 1 solid var(--med-gray);
	/* background-color: var(--background3); */
	/* background-color: var(--lettertilecolor); */
	background-color: var(--background);
}
.resultssection .lettertilebackground-missing{
	background-color: var(--lettertilecolor);
}
.lettertilebackground-found {
	box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.5)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.1)
			calc(var(--dynamicvh, 1vh) * 0.3) var(--darkshadow);
	/* background-color: var(--light-gray); */
	background-color: var(--greeny);
}
.lettertilebackground-bonus {
	box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.5)
			var(--outsetcolora),
		calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.1)
			calc(var(--dynamicvh, 1vh) * 0.3) var(--outsetcolorb);
	/* background-color: var(--light-gray); */
	background-color: var(--bluey);
}
.lettertilebackground-missing {
	box-shadow: inset calc(var(--dynamicvh, 1vh) * 0.1)
			calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.3) var(--darkshadow),
		inset calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * 0.2) var(--lightshadow);
}
biglettertile {
	margin: calc(var(--dynamicvh, 1vh) * 0.5);

	touch-action: manipulation;
	border-radius: calc(var(--dynamicvh, 1vh) * 1);
	display: block;

	box-sizing: border-box;
	background-color: var(--light-gray);
}
.biglettertile {
	/* background-color: var(--light-gray); */
	/* background-color: var(--background3); */
	background-color: var(--lettertilecolor);
	touch-action: manipulation;
	border-radius: calc(var(--dynamicvh, 1vh) * 1);
	display: block;
	box-sizing: border-box;
}
.bigletter-out {
	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--white),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--black); */
	box-shadow : var(--outsetdeepboxshadow);
	animation-timing-function: ease-in-out;
	animation-direction: forwards;
	animation-name: bigletter-intoout;
	animation-iteration-count: 1;
	animation-duration: 160ms;
}
@keyframes bigletter-intoout {
    0%{
        box-shadow: inset calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		inset calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow);
    }
    20%{
        box-shadow: none;
        /* background:linear-gradient(145deg, var(--darkcolor), var(--lightcolor));  */
        background-color: var(--light-gray);
    }

    50%{
        box-shadow: calc(var(--dynamicvh, 1vh) * -0.3)
			calc(var(--dynamicvh, 1vh) * -0.3) calc(var(--dynamicvh, 1vh) * 0.9)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.3) calc(var(--dynamicvh, 1vh) * 0.3)
			calc(var(--dynamicvh, 1vh) * 0.9) var(--darkshadow);
        transform: scale(1.2);
        background-color: var(--background);
    }

    80%,100%{
        box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow);
        transform: scale(1.0);
        background-color: var(--light-gray);
    }    
}
.bigletter-out letter {
	animation-name: letter-intoout;
	animation-iteration-count: 1;
	animation-duration: 240ms;
	animation-timing-function: ease-in-out;
	animation-direction: forwards;
}
@keyframes letter-intoout {
    
    0%, 20%,100%{
        transform: scale(1.0);
    }

    

    40%,60%{
        transform: scale(1.2);
    }   
}
.bigletter-in {
	box-shadow: inset calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--white),
		inset calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) rgba(0, 0, 0, 0.35);
	animation-timing-function: ease-out;
	animation-direction: forwards;
}
letter {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.show {
	display: block;
}
.letter- {
	/* opacity: 0.5; */
	visibility: hidden;
	/* aspect-ratio: unset; */
	/* transform: scaleX(.5); */
	/* width: 90% !important; */
}
.letter-a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EA%3C/text%3E%3C/svg%3E ");
}
.letter-b {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E ");
}
.letter-c {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EC%3C/text%3E%3C/svg%3E ");
}
.letter-d {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3ED%3C/text%3E%3C/svg%3E ");
}
.letter-e {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EE%3C/text%3E%3C/svg%3E ");
}
.letter-f {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EF%3C/text%3E%3C/svg%3E ");
}
.letter-g {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EG%3C/text%3E%3C/svg%3E ");
}
.letter-h {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EH%3C/text%3E%3C/svg%3E ");
}
.letter-i {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EI%3C/text%3E%3C/svg%3E ");
}
.letter-j {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EJ%3C/text%3E%3C/svg%3E ");
}
.letter-k {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EK%3C/text%3E%3C/svg%3E ");
}
.letter-l {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EL%3C/text%3E%3C/svg%3E ");
}
.letter-m {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EM%3C/text%3E%3C/svg%3E ");
}
.letter-n {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EN%3C/text%3E%3C/svg%3E ");
}
.letter-o {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EO%3C/text%3E%3C/svg%3E ");
}
.letter-p {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EP%3C/text%3E%3C/svg%3E ");
}
.letter-q {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EQ%3C/text%3E%3C/svg%3E ");
}
.letter-r {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3ER%3C/text%3E%3C/svg%3E ");
}
.letter-s {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3ES%3C/text%3E%3C/svg%3E ");
}
.letter-t {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3ET%3C/text%3E%3C/svg%3E ");
}
.letter-u {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EU%3C/text%3E%3C/svg%3E ");
}
.letter-v {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EV%3C/text%3E%3C/svg%3E ");
}
.letter-w {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EW%3C/text%3E%3C/svg%3E ");
}
.letter-x {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EX%3C/text%3E%3C/svg%3E ");
}
.letter-y {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EY%3C/text%3E%3C/svg%3E ");
}
.letter-z {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3EZ%3C/text%3E%3C/svg%3E ");
}
.letter-0 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E0%3C/text%3E%3C/svg%3E ");
}
.letter-1 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E1%3C/text%3E%3C/svg%3E ");
}
.letter-2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E2%3C/text%3E%3C/svg%3E ");
}
.letter-3 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E3%3C/text%3E%3C/svg%3E ");
}
.letter-4 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E4%3C/text%3E%3C/svg%3E ");
}
.letter-5 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E5%3C/text%3E%3C/svg%3E ");
}
.letter-6 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E6%3C/text%3E%3C/svg%3E ");
}
.letter-7 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E7%3C/text%3E%3C/svg%3E ");
}
.letter-8 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E8%3C/text%3E%3C/svg%3E ");
}
.letter-9 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='50%25' y='58' font-family='sans-serif' fill='%23000000' font-weight='800' font-size='70px' dominant-baseline='middle' text-anchor='middle'%3E9%3C/text%3E%3C/svg%3E ");
}
.star {
	position: absolute;

	width: 1.6vh;
	height: 1.6vh;
	top: -0.15vh;
	border-radius: 50%;
	background-position: 50% 30%;
	background-repeat: no-repeat;
	background-size: 86%;

	transition-property: left;
	transition-duration: 100ms;
	transition-timing-function: ease-in;
}
#pausedprogresscontainer {
	position: relative;

	height: 20vh;
}
.pausedstarscores {
	display: flex;
	justify-content: center;
	width: 100%;
	justify-content: space-evenly;
	flex-flow: nowrap;
}
.pausedstar {
	grid-area: "star";
	position: relative;

	width: 6vh;
	height: 6vh;

	border-radius: 50%;
	background-position: 50% 30%;
	background-repeat: no-repeat;
	background-size: 86%;

	transition-property: left;
	transition-duration: 100ms;
	transition-timing-function: ease-in;
}
.pausedgameprogress, #pausedprogresscontainer .levelstatsprogressbar, #resultsprogresscontainer .levelstatsprogressbar {
	margin-top: 3vh;
}
.emptystar {
	border: 0.1vh solid var(--med-gray);
	background-color: rgba(255, 255, 255, 0.3);
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z' id='path1' style='fill:%23555555;fill-opacity:1' /%3E%3C/svg%3E");
}
.earnedstar {
	background-color: var(--white);
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z' id='path1' style='fill:%23ffc300;fill-opacity:1' /%3E%3C/svg%3E");

	animation-name: star-intoout;
	animation-iteration-count: 1;
	animation-duration: 1000ms;
	animation-timing-function: ease-in-out;
	animation-direction: forwards;
}
@keyframes star-intoout {
    0%{
		transform: scale(1.0);
    }
    20%{
        box-shadow: none;
    }

    50%{
        transform: scale(2.0);
    }

    80%,100%{
        transform: scale(1.0);
    }    
}
.hidestar {
	background-image: none;

	border: 0.1vh solid transparent;
}
#progresstext {
	position: relative;
}
.scrollbar {
	scrollbar-color: var(--med-gray) var(--black);
	scrollbar-width: thin;
}
settingsscreen {
	display: grid;
	position: absolute;

	top: 0vh;
	left: 50%;

	width: min(var(--max-width), 100dvw);

	transform: translateX(-50%);
	height: 100dvh;

	place-items: center;

	z-index: 1112;
	background-color: var(--background);

	transition: all 200ms ease-out;
}
.settingsgear {
	position: absolute;

	cursor: pointer;
	height: 5vh;
	width: 5vh;
	top: 1.5vh;
	right: 1.5vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 1111;
}
#settingsscreen .label {
	text-align: left;

	font-size: 2.5vh;
	margin-top: 2vh;
}
.textcontainer *,
.textcontainer::before,
textcontainer::after {
	box-sizing: border-box;
}
#settingsscreen .textcontainer {
	height: auto;
	border-radius: 2vh;
	overflow: hidden;
	padding: calc(var(--dynamicvh, 1vh) * 0.6);
	display: grid;
}
.textboxfocused {
	border: 2px solid var(--light-gray);
	background-color: var(--white);
}
.textboxblurred {
	border: 2px solid var(--white);
	background-color: var(--light-gray);
}
.textinput {
	background-color: var(--light-gray);
	user-select: all;
}
.textinput:focus {
	background-color: var(--white);
	color: var(--black);
}
#settingsscreen .textcontainer .textinput {
	width: 100%;
	border: none;

	height: auto;
	font-size: 2vh;

	border: 0px hidden;
	outline: none;
}
#resetgame {
	border-radius: 2.2vh;
	text-align: center;
	height: 4.4vh;
	font-size: 3vh;
	margin: 3vh 0 0 0;
	cursor: pointer;
	color: var(--black);

	width: 100%;
	padding: 0 2vh;

	border: 0;

	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow); */
	box-shadow: var(--outsetdeepboxshadow);
	background-color: var(--dark-red);
}
#refreshprogress,
#updateapplication {
	border-radius: 2.2vh;
	text-align: center;
	height: 4.4vh;
	font-size: 3vh;
	margin: 3vh 0 0 0;
	cursor: pointer;
	color: var(--black);

	width: 100%;
	padding: 0 2vh;

	border: 0;

	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow); */
	box-shadow: var(--outsetdeepboxshadow);
	background-color: var(--gray);
}
.selectionsactionsection {
	display: grid;
	grid-template-columns: repeat(4, 25%);
	justify-items: center;
}
.selectionsactionstile {
	width: 8vh;
	height: 8vh;
	align-items: center;
	cursor: pointer;
	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow); */
	box-shadow: var(--outsetdeepboxshadow);
	border-radius: 1vh;
	background-size: 110%;
	background-position: center;
}
#sharetile {
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' viewBox='0 0 100 100' version='1.1' id='svg9' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs13' /%3E%3CradialGradient id='grad1' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff; stop-opacity:1' id='stop2' /%3E%3Cstop offset='100%25' style='stop-color:%23bbbbbb;stop-opacity:1' id='stop4' /%3E%3C/radialGradient%3E%3Crect width='88' height='88' fill='url(%23grad1)' rx='12' ry='12' x='6' y='6' style='stroke:%23ffffff;stroke-width:6' id='rect7' /%3E%3Crect width='76.724838' height='76.724838' fill='%23ffffff' fill-opacity='0.01' id='rect2' x='13.046976' y='10.228189' style='stroke-width:0.999996' /%3E%3Cg id='layer4' style='display:inline'%3E%3Cpath d='m 32.057606,37.184005 c 7.076993,0 12.815996,5.739002 12.815996,12.815995 0,7.076993 -5.739003,12.815996 -12.815996,12.815996 -7.076993,0 -12.815995,-5.739003 -12.815995,-12.815996 0,-7.076993 5.739002,-12.815995 12.815995,-12.815995 z m 28.507901,30.924997 c -0.187114,0.771523 -0.312711,1.566114 -0.312711,2.396591 0,5.662107 4.59069,10.252796 10.252797,10.252796 5.662106,0 10.252796,-4.590689 10.252796,-10.252796 0,-5.662107 -4.59069,-10.252796 -10.252796,-10.252796 -2.986127,0 -5.649291,1.296978 -7.52299,3.334722 L 48.915767,56.085035 c -0.589536,1.630194 -1.407197,3.150172 -2.417097,4.521483 z M 80.758389,29.494407 c 0,-5.662106 -4.59069,-10.252796 -10.252796,-10.252796 -5.662107,0 -10.252797,4.59069 -10.252797,10.252796 0,0.830477 0.125597,1.625069 0.312711,2.396592 L 46.49867,39.393482 c 1.012463,1.371312 1.827561,2.888726 2.417097,4.521484 l 14.066836,-7.502484 c 1.873699,2.037743 4.536863,3.334722 7.52299,3.334722 5.662106,0 10.252796,-4.59069 10.252796,-10.252797 z' id='path2-1' style='stroke-width:0.999999' /%3E%3C/g%3E%3C/svg%3E");
}
#rankingtile {
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' viewBox='0 0 100 100' version='1.1' id='svg9' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs13' /%3E%3CradialGradient id='grad1' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff; stop-opacity:1' id='stop2' /%3E%3Cstop offset='100%25' style='stop-color:%23bbbbbb;stop-opacity:1' id='stop4' /%3E%3C/radialGradient%3E%3Crect width='88' height='88' fill='url(%23grad1)' rx='12' ry='12' x='6' y='6' style='stroke:%23ffffff;stroke-width:6' id='rect7' /%3E%3Crect width='76.724838' height='76.724838' fill='%23ffffff' fill-opacity='0.01' id='rect2' x='13.046976' y='10.228189' style='stroke-width:0.999996' /%3E%3Cg id='layer1' style='display:inline'%3E%3Crect x='18.83054' y='40.409393' width='20.779642' height='38.362419' stroke='%23000000' stroke-width='3.99999' stroke-linecap='round' stroke-linejoin='round' id='rect4' style='fill:none' /%3E%3Crect x='39.610188' y='21.228186' width='20.779642' height='57.543625' stroke='%23000000' stroke-width='3.99999' stroke-linejoin='round' id='rect6' style='fill:none' /%3E%3Crect x='60.38982' y='53.196869' width='20.779642' height='25.574945' stroke='%23000000' stroke-width='3.99999' stroke-linecap='round' stroke-linejoin='round' id='rect8' style='fill:none' /%3E%3C/g%3E%3C/svg%3E");
}
#achievementstile {
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' viewBox='0 0 100 100' version='1.1' id='svg9' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs13' /%3E%3CradialGradient id='grad1' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff; stop-opacity:1' id='stop2' /%3E%3Cstop offset='100%25' style='stop-color:%23bbbbbb;stop-opacity:1' id='stop4' /%3E%3C/radialGradient%3E%3Crect width='88' height='88' fill='url(%23grad1)' rx='12' ry='12' x='6' y='6' style='stroke:%23ffffff;stroke-width:6' id='rect7' /%3E%3Crect width='76.724838' height='76.724838' fill='%23ffffff' fill-opacity='0.01' id='rect2' x='13.046976' y='10.228189' style='stroke-width:0.999996' /%3E%3Cg id='layer2' style='display:inline'%3E%3Cpath d='m 65.198548,48.500553 c 2.287906,-0.195597 4.296244,-1.158064 5.978766,-2.872052 5.782786,-5.890826 5.607084,-19.019505 5.596849,-19.575418 -0.01895,-1.032411 -0.861068,-1.859367 -1.893857,-1.860126 l -9.527853,-0.0066 v -4.010238 c 0,-0.523494 -0.424375,-0.947681 -0.947688,-0.947681 H 35.595087 c -0.523312,0 -0.947687,0.424187 -0.947687,0.947681 v 4.009852 l -9.527664,0.0066 c -1.0326,7.58e-4 -1.874714,0.827715 -1.893857,1.860126 -0.01045,0.5561 -0.185937,13.684592 5.596848,19.575418 1.682523,1.713977 3.69105,2.676454 5.978767,2.872052 0.875093,6.126423 5.464551,11.068038 11.407875,12.468146 v 11.928163 h -4.801551 c -0.309893,0 -0.600075,0.15144 -0.777292,0.405607 l -4.169823,5.979714 c -0.202046,0.289612 -0.226117,0.667551 -0.06274,0.980662 0.163192,0.312934 0.487111,0.509104 0.840219,0.509104 0,0 25.526513,-1.87e-4 25.528029,0 0.523313,0 0.947686,-0.424189 0.947686,-0.947693 0,-0.229338 -0.09609,-0.416036 -0.21702,-0.603482 L 59.369893,73.301895 C 59.192675,73.047718 58.902494,72.896278 58.5926,72.896278 H 53.79105 V 60.968512 c 5.942945,-1.400306 10.532401,-6.341734 11.407496,-12.468157 z m 7.755679,-20.518357 c -0.182904,4.195021 -1.173804,11.620717 -4.48199,14.990697 -0.913949,0.930816 -1.942189,1.487676 -3.119595,1.688774 V 27.977069 Z m -45.906707,0 7.59988,-0.0044 v 16.6844 C 33.470941,44.461097 32.443839,43.905755 31.530648,42.976446 28.228906,39.616521 27.233835,32.182113 27.04752,27.982724 Z m 15.099304,7.064434 5.426455,-0.788475 2.426837,-4.917171 2.426836,4.917171 5.426455,0.788475 -3.926646,3.827511 0.927027,5.404658 -4.853482,-2.551736 -4.853484,2.551736 0.927028,-5.404658 z' id='path2' style='stroke-width:1' /%3E%3Cg id='g4' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g6' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g8' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g10' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g12' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g14' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g16' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g18' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g20' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g22' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g24' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g26' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g28' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g30' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3Cg id='g32' transform='matrix(0.18953736,0,0,0.18953736,19.228536,19.22879)' style='stroke-width:5.276' /%3E%3C/g%3E%3C/svg%3E");
}
.settingstile {
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' viewBox='0 0 100 100' version='1.1' id='svg9' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs13' /%3E%3CradialGradient id='grad1' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff; stop-opacity:1' id='stop2' /%3E%3Cstop offset='100%25' style='stop-color:%23bbbbbb;stop-opacity:1' id='stop4' /%3E%3C/radialGradient%3E%3Crect width='88' height='88' fill='url(%23grad1)' rx='12' ry='12' x='6' y='6' style='stroke:%23ffffff;stroke-width:6' id='rect7' /%3E%3Crect width='76.724838' height='76.724838' fill='%23ffffff' fill-opacity='0.01' id='rect2' x='13.046976' y='10.228189' style='stroke-width:0.999996' /%3E%3Cg id='layer3' style='display:inline'%3E%3Cpath d='m 80.74545,54.140387 v -8.280774 l -7.350728,-2.613364 c -0.507301,-1.760176 -1.209321,-3.438366 -2.077879,-5.008945 l 3.351253,-7.048394 -5.854446,-5.854446 -7.048394,3.348692 c -1.57058,-0.86856 -3.251331,-1.57058 -5.008946,-2.07788 l -2.615925,-7.350724 h -8.280774 l -2.615924,7.350724 c -1.757615,0.5073 -3.438367,1.206759 -5.008947,2.07788 l -7.048394,-3.351255 -5.854446,5.854446 3.351254,7.050957 c -0.868559,1.570579 -1.573141,3.248769 -2.07788,5.008945 l -7.350724,2.613364 v 8.280774 l 7.350724,2.613363 c 0.504739,1.760177 1.209321,3.438365 2.07788,5.008945 l -3.351254,7.048395 5.854446,5.857007 7.048394,-3.351253 c 1.57058,0.868558 3.251332,1.570579 5.008947,2.07788 l 2.615924,7.350724 h 8.280774 l 2.615925,-7.350724 c 1.760178,-0.507301 3.438366,-1.209322 5.008946,-2.07788 l 7.048394,3.351253 5.854446,-5.857007 -3.351253,-7.048395 c 0.868559,-1.57058 1.570578,-3.248768 2.077879,-5.008945 z m -30.745452,6.108095 c -5.659724,0 -10.248483,-4.588758 -10.248483,-10.248482 0,-5.659725 4.588759,-10.248483 10.248483,-10.248483 5.659725,0 10.248482,4.588758 10.248482,10.248483 0,5.659724 -4.588757,10.248482 -10.248482,10.248482 z' id='path2-8' style='stroke-width:1' /%3E%3C/g%3E%3C/svg%3E");
}
rankingsscreen {
	display: none;
	position: relative;

	height: 100vh;
	grid-template-rows: 12dvh 19dvh 19dvh 19dvh 19dvh 12dvh;
	margin: 0vh 5vw 0vh 5vw;
	z-index: 1;
}
rankingsscreen DIV {
	justify-content: center;
}
.loadingranking {
	height: 20vh;
	width: 100%;
	position: relative;

	margin: 10dvh auto;
	display: grid;
}
.rankingssectionheader {
	font-size: 2vh;

	background-color: var(--background3);
	color: var(--white);
	border-top-left-radius: 0.5vh;
	border-top-right-radius: 0.5vh;
	text-align: center;
}

#rankingsscreenutilityscreen .rankingsscreensection:nth-child(1) .rankingssectionheader,
#rankingsscreenutilityscreen .rankingsscreensection:nth-child(2) .rankingssectionheader {
    background-color: var(--orange);
}

#rankingsscreenutilityscreen .rankingsscreensection:nth-child(3) .rankingssectionheader,
#rankingsscreenutilityscreen .rankingsscreensection:nth-child(4) .rankingssectionheader {
    background-color: var(--purple);
}

#rankingsscreenutilityscreen .rankingsscreensection:nth-child(5) .rankingssectionheader,
#rankingsscreenutilityscreen .rankingsscreensection:nth-child(6) .rankingssectionheader {
    background-color: var(--green);
}

/* #rankingsscreenutilityscreencontent .rankingssectionheader{
	background-color: var(--purple);
	color: var(--white);
} */
.rankingscontainer {
	max-height: 17vh;

	border-bottom-left-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
	background-color: var(--background);
}
.rankingsscreensection {
	display: block;
	width: 100%;

	margin-bottom: 3dvh;
	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow); */
	box-shadow: var(--outsetdeepboxshadow);
	border-radius: 0.5vh;
}
.rankingsectioncontent {
	max-width: 90vw;
	display: grid;
	grid-template-columns: 15% 63% 20%;
	row-gap: 0.1vh;

	column-gap: 1%;
	width: 100%;
	background-color: var(--background2);
	border-bottom-left-radius: 0.5vh;
	border-bottom-right-radius: 0.5vh;
}
.rankingsectioncontent div:nth-child(3n + 1) {
	padding-left: 6%;
}
.rankingcell {
	font-size: 1.5vh;
	height: 2vh;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.highlightcell {
	color: var(--green);
}
.headercell {
	font-size:1.2vh;
	font-weight: 600;
	border-bottom: 1px dotted var(--med-gray);
	line-height: 2.2vh;
	color: var(--black);
	overflow: hidden;

}
rankingsscreen button {
	border-radius: 1vh;
	text-align: center;
	height: 6vh;
	font-size: 3vh;
	margin: 0.2vh;
	cursor: pointer;
	color: var(--white);
	width: 100%;
	margin-bottom: 2vh;
	border: 0;

	box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow);
	background-color: var(--blue);
}
achievementsscreen {
	display: none;
	position: relative;

	height: 100dvh;

	z-index: 1;

	width: min(var(--max-width), 96vw);
}
.completedLevelBlocker {
	position: absolute;
	display: grid;

	padding-top: calc(var(--dynamicvh, 1vh) * 0.5);
	font-size: 2.5rem;
	font-weight: 600;
	color: var(--green);

	text-align: center;
	z-index: 800;
	background-color: var(--background);
	opacity: 0.7;
}
.completedLevelMessage {
	will-change: top, opacity;
	position: absolute;
	display: grid;

	top: -100%;
	transform: translate(0, -50%);
	left: 0px;
	right: 0px;
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
	padding: calc(var(--dynamicvh, 1vh) * 3) 0;
	font-size: 2.5rem;
	font-weight: 600;
	color: var(--white);
	text-align: center;
	z-index: 800;
	background-color: var(--dark-gray);

	animation: springIn 0.7s ease-out forwards;
}
@keyframes springIn {
	0% {
	  top: -100%; /* Start completely off the top of the screen */
	  opacity: 0;
	}
	50%{
		top: 70%; /* Overshoot further down */
		opacity: 1;
	}
	70%{
		top: 45%; /* Bounce back up much higher */
	}

	100%{
		top: 50%; /* Settle in the middle */
	}
  }
.levelsplash {
	position: absolute;

	top: 0;
	bottom: 0;
	background-color: var(--background);
	display: grid;
	place-items: center;
	z-index: 1111;
	width: min(var(--max-width), 100vw);
	left: 50%;
	transform: translateX(-50%);
}
.levelsplashcontent {
	display: grid;
	place-items: center;
	width: 90%;
	height: 90%;
	color: var(--black);
	border-radius: calc(var(--dynamicvh, 1vh) * 2);
	border: 1px solid var(--black);

	background-color: var(--background2);
	font-size: calc(var(--dynamicvh, 1vh) * 5);
}
.levelsplashcontent wordletterword {
	/* width: 60%; */
	/* width:100%; */
	display: flex;
}
.levelsplashcontent wordletterword wordlettertile {
	aspect-ratio: 1/1;
	width: calc(var(--dynamicvh, 1dvh) * 3.75);
}
@keyframes popwordletterword {
	0% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(1.4);
	}
	100% {
	  transform: scale(1);
	}
}
.pop-n-lock wordletterword wordlettertile {
	animation: popwordletterword 0.2s ease-in-out forwards;
}
.pop-n-lock wordletterword wordlettertile:nth-child(1) {
	animation-delay: 0s;
}
.pop-n-lock wordletterword wordlettertile:nth-child(2) {
	animation-delay: 0.05s;
}
.pop-n-lock wordletterword wordlettertile:nth-child(3) {
	animation-delay: 0.1s;
}
.pop-n-lock wordletterword wordlettertile:nth-child(4) {
	animation-delay: 0.15s;
}
.pop-n-lock wordletterword wordlettertile:nth-child(5) {
	animation-delay: 0.2s;
}
.pop-n-lock wordletterword wordlettertile:nth-child(6) {
	animation-delay: 0.25s;
}
.pop-n-lock wordletterword wordlettertile:nth-child(7) {
	animation-delay: 0.3s;
}
.pop-n-lock wordletterword wordlettertile:nth-child(8) {
	animation-delay: 0.35s;
  }

  .pop-n-lock wordletterword wordlettertile:nth-child(9) {
	animation-delay: 0.4s;
  }

  .pop-n-lock wordletterword wordlettertile:nth-child(10) {
	animation-delay: 0.45s;
  }

  .pop-n-lock wordletterword wordlettertile:nth-child(11) {
	animation-delay: 0.5s;
  }

  .pop-n-lock wordletterword wordlettertile:nth-child(12) {
	animation-delay: 0.55s;
  }
  /* @keyframes popwordletterword {
	0% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(1.4);
	}
	100% {
	  transform: scale(1);
	}
  } */
#levelprogressscreen {
	display: none;
	position: relative;

	height: 100vh;
	grid-template-rows: 8vh 80vh 12vh;
	margin: 0vh 5vw 0vh 5vw;
	z-index: 1;
	width: min(var(--max-width), 100vw);
}
#levelprogresslist {
	margin: 0 calc(var(--dynamicvh, 1vh) * 1);
}
.threetogglecontainer *,
.threetogglecontainer::before,
threetogglecontainer::after {
	box-sizing: border-box;
}
.oofthreetoggle {
	border: var(--oofnavtogglebordersize) solid var(--oofnavtogglebordercolor);
	width: calc(100% - (var(--oofnavtogglebordersize) * 2));
	height: var(--oofnavtoggleheight);
	border-radius: calc(var(--oofnavtoggleheight) / 2);
	position: relative;
	background-color: var(--light-gray);
}
.oofthreetoggle_options {
	height: 100%;
	text-align: center;
	width: 33%;
	position: absolute;
	line-height: var(--oofnavtoggleheight);
	cursor: pointer;
	font-size: calc(var(--oofnavtoggleheight) / 3);
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--oofnavtoggletextcolor);
}
.oofthreetoggle_selected {
	border: var(--oofnavtogglebordersize) solid transparent;

	border-radius: calc(var(--oofnavtoggleheight) / 2);

	line-height: calc(
		var(--oofnavtoggleheight) - (var(--oofnavtogglebordersize) * 2)
	);
	width: 33%;
	opacity: 1;
	transition: all 200ms linear;
	color: var(--oofnavtoggleselectedtextcolor);
}
.oofthreetoggle_selectedleft {
	background-color: #008000;
}
.oofthreetoggle_selectedmiddle {
	background-color: #c3b700;
}
.oofthreetoggle_selectedright {
	background-color: #800000;
}
.oofthreetoggle_optionleft {
	left: 0px;

	width: 33%;
}
.oofthreetoggle_optionmiddle {
	left: 34%;

	width: 33%;
	transition: all 200ms linear;
}
.oofthreetoggle_optionright {
	left: 67%;

	width: 33%;
	transition: all 200ms linear;
}
.oofthreetoggle_opacityOn {
	opacity: 0.9;
}
#passedMessage {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	display: none;
	font-size: 1.5vh;
	font-weight: 900;
	color: var(--green);
	z-index: 3000;
	text-align: center;
}
.progresspassedtext {
	font-size: 1.5vh;
	font-weight: 700;
	color: var(--green);
	text-align: center;
}
.pop-in {
	animation: popIn 2000ms forwards;
	animation-timing-function: ease-in;
	transform: translate(0%, 0%);
	display: block;
}
@keyframes popIn {
    0% {
		font-size: 10vh;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
	15%{transform: translate(-50%, -50%) scale(2.0);
        opacity: 1;}
	23%{
		transform: translate(-50%, -50%) scale(.7);
        opacity: 1;
	}
	27%{
		transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
	}
    30% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
		font-size: 10vh;
    }
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;	
		font-size: 13vh;
	}
}
.swoop-up {
	animation: swoopUp 200ms forwards;
	transition-property: transform, opacity, top, left;
	transition-duration: 200ms;
	animation-timing-function: ease-in-out;
	display: block;
}
@keyframes swoopUp {
    0% {
		transform: translate(-50%, -50%);
        font-size: 10vh;
    }
    100% {
		transform: translate(0%, 0%);
        font-size: 1.5vh;
    }
}
.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.levelprogressstage {
	box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow);
	border-radius: calc(var(--dynamicvh, 1vh) * 1);
	padding: calc(var(--dynamicvh, 1vh) * 1);
	margin: calc(var(--dynamicvh, 1vh) * 2) auto;
	cursor: pointer;
	display: grid;

	grid-template:
		"leveltitle leveltitle" 5vh
		"levelscompletion levelscompletion" 4vh
		/ 1fr 1fr;
}
.levelprogresstitle {
	grid-area: leveltitle;
	text-align: center;
	font-size: 3vh;
	font-weight: 700;
	color: var(--dark-gray);
}
.levelprogressstars {
	grid-area: progressstars;
	display: none;
}
.levelprogresswords {
	grid-area: progresswords;
	display: none;
}
.levelprogressstage .pausedstar {
	height: 4vh;
	width: 4vh;
}
.levelscompletion {
	grid-area: levelscompletion;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	column-gap: calc(var(--dynamicvh, 1vh) * 0.5);
	width: 100%;
	align-items: end;
}
.levelcompletion {
	background-color: var(--very-light-gray);
	height: 100%;
	display: grid;
	align-items: end;
	position: relative;
}
.levelcompletionvalue {
	background-color: var(--yellow);
}
.levelfailed {
	box-sizing: border-box;
	background-color: var(--red);
	border-bottom: calc(var(--dynamicvh, 1vh) * 0.3) solid var(--red);
}
.levelpassed {
	box-sizing: border-box;
	background-color: var(--green);
	border-bottom: calc(var(--dynamicvh, 1vh) * 0.3) solid var(--green);
}
.levelunplayed {
	box-sizing: border-box;

	border-bottom: calc(var(--dynamicvh, 1vh) * 0.3) solid var(--gray);
}
.levelcompletionstars {
	position: absolute;

	top: calc(var(--dynamicvh, 1vh) * -1);
	width: 100%;
	box-sizing: border-box;
	background-color: transparent;
	padding: 0 calc(var(--dynamicvh, 1vh) * 0.3);
}
.levelcompletionstars .pausedstar {
	height: calc(var(--dynamicvh, 1vh) * 0.7);
	width: calc(var(--dynamicvh, 1vh) * 0.7);
	animation: none;
}
.levelcompletiontitle {
	font-size: 1vh;
	font-weight: 700;
	color: var(--black);
	position: absolute;
	bottom: calc(var(--dynamicvh, 1vh) * 0.1);
	text-align: center;
	width: 100%;
}
.hintcontainer {
	position: absolute;
	bottom: calc(var(--dynamicvh, 1vh) * 2);
	padding: calc(var(--dynamicvh, 1vh) * 2);
	right: 0;
	width: auto;

	color: #fff;

	font-weight: 700;
	display: none;
	background-color: var(--blue);
	border-top-left-radius: calc(var(--dynamicvh, 1vh) * 1);
	border-bottom-left-radius: calc(var(--dynamicvh, 1vh) * 1);
	grid-template:
		"hinttitle1 hinttitle3" 2vh
		"hinttitle2 hinttitle3" 4vh
		/ 1fr 1fr;
}
.showhint {
	display: grid;
	animation: slideoutfromtheright 12s ease-in-out forwards;
	animation-iteration-count: 1;
}
@keyframes slideoutfromtheright {
	0%, 100% {
		right: -100%;
	}

	8.3%, 91.7% {
		right: 0;
	}
}
.hintcontainer hinttitle1 {
	grid-area: hinttitle1;
	font-size: calc(var(--dynamicvh, 1vh) * 2);
	line-height: calc(var(--dynamicvh, 1vh) * 2);
	display: block;
	text-align: right;
	font-weight: 500;
}
.hintcontainer hinttitle2 {
	grid-area: hinttitle2;
	font-size: calc(var(--dynamicvh, 1vh) * 4);
	line-height: calc(var(--dynamicvh, 1vh) * 4);
	display: block;
	text-align: right;
	font-weight: 500;
}
.hintcontainer hinttitle3 {
	grid-area: hinttitle3;
	font-size: calc(var(--dynamicvh, 1vh) * 7.4);
	line-height: calc(var(--dynamicvh, 1vh) * 5);
	display: block;
	text-align: left;
	font-weight: 800;
	padding-left: calc(var(--dynamicvh, 1vh) * 0.3);
}
#customNameContainer {
	position: absolute;
	display: none;

	left: 50%;
	top: 20vh;
	transform: translateX(-50%);

	width: min(var(--max-width), 100vw);
	bottom: 0px;
	background-color: var(--background);
	grid-template:
		"customNameInstructions customNameInstructions" 5vh
		"customNameInputContainer customNameInputContainer" 15vh
		"customNameSave customNameSave " 5vh
		/ 1fr 1fr;
	place-items: center;
	justify-content: center;
	align-items: center;
}
.slider-container {
	margin: calc(var(--dynamicvh, 1vh) * 1) auto calc(var(--dynamicvh, 1vh) * 4.5)
		auto;
	position: relative;
	width: 100%;
}
.slider-container::before {
	content: "Mute";
	font-size: calc(var(--dynamicvh, 1vh) * 2);
	color: var(--dark-gray);
	font-weight: 600;
	position: absolute;
	bottom: calc(var(--dynamicvh, 1vh) * -2.3);
	left: 0;
}
.slider-container::after {
	content: "Max";
	font-size: calc(var(--dynamicvh, 1vh) * 2);
	color: var(--dark-gray);
	font-weight: 600;
	position: absolute;
	bottom: calc(var(--dynamicvh, 1vh) * -2.3);
	right: 0;
}
/* Neumorphic Style Track */
#volumeSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: calc(var(--dynamicvh, 1vh) * 3);
    background: #e0e0e0;
    border-radius: 20px;
    box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
    outline: none;
}

/* Neumorphic Thumb */
#volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: calc(var(--dynamicvh, 1vh) * 4);
    height: calc(var(--dynamicvh, 1vh) * 4);
    background: #e0e0e0;
    border-radius: 50%;
    box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#volumeSlider::-webkit-slider-thumb:hover {
    transform: scale(1.1); /* Enlarge the thumb on hover */
}

#volumeSlider::-moz-range-thumb {
    width: calc(var(--dynamicvh, 1vh) * 4);;
    height: calc(var(--dynamicvh, 1vh) * 4);;
    background: var(--dark-gray);
    border-radius: 50%;
    box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#volumeSlider::-moz-range-thumb:hover {
    transform: scale(1.1);
}
.utilityscreen {
	display: grid;
	position: relative;

	height: 100dvh;
	grid-template-rows: 8dvh 80dvh 12dvh;

	z-index: 1100;
}
.utilityscreenheader {
	width: min(var(--max-width), 100dvw);

	height: 8vh;
	align-items: center;
	justify-content: center;
	display: grid;
}
.utilityscreenheader wordletterword {
	display: flex;
}
.utilityscreenheader wordletterword wordlettertile {
	width: calc(var(--dynamicvh, 1vh) * 3);
	height: calc(var(--dynamicvh, 1vh) * 3);

	font-size: calc(var(--dynamicvh, 1vh) * 3);
	line-height: calc(var(--dynamicvh, 1vh) * 3);
}
/* .utilityscreenheader wordletterword wordlettertile.letter- {
	aspect-ratio: unset;
	width: calc(var(--dynamicvh, 1vh) * 1);
} */
.utilityscreencontent {
	overflow-y: scroll;
	padding: calc(var(--dynamicvh, 1vh) * 2) calc(var(--dynamicvh, 1vh) * 5);

	margin: 0 calc(var(--dynamicvh, 1vh) * 1);
}
.utilityscreenfooter {
	align-items: center;
	justify-content: center;
	display: grid;
	border-top: 1px solid var(--light-gray);
}
.utilityscreenfooter button {
	border-radius: 1vh;
	text-align: center;
	height: 6vh;
	font-size: 3vh;
	width: min(calc(var(--max-width) * 0.6), 60dvw);
	cursor: pointer;
	color: #fff;

	border: 0;

	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow); */
	box-shadow: var(--outsetdeepboxshadow);
	background-color: var(--blue);
}
@keyframes slideDown {
	0% {
		transform: translate(0, -100%) rotate(90deg);
	}
	80% {
		transform: rotate(0deg);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes backUp {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(0, -100%);
	}
}

@keyframes slideLeft {
	0% {
		transform: translate(100%, 0) rotate(90deg);
	}
	80% {
		transform: rotate(0deg);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes slideRight {
	0% {
		transform: translate(-100%, 0) rotate(-90deg);
	}
	80% {
		transform: rotate(0deg);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes slideUp {
	0% {
		transform: translate(0, 100%) rotate(90deg);
	}
	80% {
		transform: rotate(0deg);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes enterUp{
	0% {
		transform: translate(0, 100%);
		background-color: var(--blue);
		border-radius: 50%;
		/* opacity: 0; */
	}
	60% {
		transform: translate(0, 0);
		background-color: var(--blue);
	}
	100% {
		
		background-color: var(--background2);
		border-radius: 0%;
		/* opacity: 1; */
	}
}

@keyframes exitDown {
	0% {
		transform: translate(0, 0);
		border-radius: 0%;
		background-color: var(--background2);
		/* opacity: 1; */
	}
	100% {
		transform: translate(0, 100%);
		border-radius: 50%;
		background-color: var(--blue);
		/* opacity: 0; */
	}
}


#customNameContainer {
	position: absolute;
	display: none;
	left: 50%;
	top: 20vh;
	transform: translateX(-50%);
	width: min(var(--max-width), 100vw);
	bottom:0px;
	background-color: var(--background);
	grid-template: 	"customNameInstructions customNameInstructions" 5vh 
					"customNameInputContainer customNameInputContainer" 15vh
					"customNameSave customNameSave " 5vh
					/ 1fr 1fr;
	place-items: center;
	justify-content: center;
	align-items: center;

}

#customNameInstructions{
	grid-area: customNameInstructions;
	font-size: 2vh;
	margin-bottom: 1vh;
	text-align: center;
	padding-top: 5vh;
}

#customNameTitle{
	grid-area: customNameTitle;
	font-size: 3vh;
	margin-bottom: 1vh;
	text-align: left;
	display: none;
}

#customNameInputContainer{
	grid-area: customNameInputContainer;
	display: grid;
	place-items: center;
}

#customNameInput{
	font-size: 2vh;
	width: 80%;
	text-align: center;
	height: auto;
	border-radius: 2vh;
	overflow: hidden;
	padding: 0px 2vw 0px 2vw;
	display: grid;
	background-color: #ffffff;
}

#customNameSave{
	grid-area: customNameSave;
	width: 60%;
	margin-top: 1vh;
}

#customNameClose{
	grid-area: customNameClose;
	width:60%;
	margin-top: 1vh;
}

.letter-out {
	/* box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.8)
			var(--lightshadow),
		calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.8) var(--darkshadow); */
	box-shadow: var(--outsetdeepboxshadow);
}
.letter-in {
	/* box-shadow: inset 5px 5px 8px var(--darkshadow),
		inset -4px -4px 15px var(--lightshadow); */
	box-shadow: var(--insetdeeperboxshadow);

	font-size: calc(var(--dynamicvh, 1vh) * 2.6);
}
@keyframes fullletterpopup {
	0% {
		transform: scale(0.8);
		box-shadow: inset calc(var(--dynamicvh, 1vh) * 0.4)
				calc(var(--dynamicvh, 1vh) * 0.4) calc(var(--dynamicvh, 1vh) * 0.3)
				var(--darkshadow),
			inset calc(var(--dynamicvh, 1vh) * -0.4)
				calc(var(--dynamicvh, 1vh) * -0.4) calc(var(--dynamicvh, 1vh) * 0.3)
				var(--lightshadow);
		background-color: #ebebeb;
	}
	20% {
		background-color: #ebebeb;
	}
	60% {
		transform: scale(1.75);
		background-color: none;
		box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
				calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.5)
				var(--white),
			calc(var(--dynamicvh, 1vh) * 0.3) calc(var(--dynamicvh, 1vh) * 0.3)
				calc(var(--dynamicvh, 1vh) * 0.4) rgba(0, 0, 0, 0.15);
	}
	80% {
	}
	100% {
		background-color: #ebebeb;
		transform: scale(1);
		box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
				calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.5)
				var(--white),
			calc(var(--dynamicvh, 1vh) * 0.3) calc(var(--dynamicvh, 1vh) * 0.3)
				calc(var(--dynamicvh, 1vh) * 0.4) rgba(0, 0, 0, 0.15);
	}
}

@keyframes letterpopup {
	0% {
		transform: scale(0.8);
		box-shadow: none;
	}
	60% {
		transform: scale(1.1);
		box-shadow: calc(var(--dynamicvh, 1vh) * -0.1)
				calc(var(--dynamicvh, 1vh) * -0.1) calc(var(--dynamicvh, 1vh) * 0.25)
				rgba(255, 255, 255, 0.5),
			calc(var(--dynamicvh, 1vh) * 0.15) calc(var(--dynamicvh, 1vh) * 0.15)
				calc(var(--dynamicvh, 1vh) * 0.2) rgba(0, 0, 0, 0.075);
	}
	100% {
		transform: scale(1);
		box-shadow: calc(var(--dynamicvh, 1vh) * -0.2)
				calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.5)
				var(--white),
			calc(var(--dynamicvh, 1vh) * 0.3) calc(var(--dynamicvh, 1vh) * 0.3)
				calc(var(--dynamicvh, 1vh) * 0.4) rgba(0, 0, 0, 0.15);
	}
}

.fullletterpopup {
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-direction: forwards;
}

.letterpopup {
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-direction: forwards;
}

.juicy__titlesweep {
	will-change: transform, opacity;	
	animation: 1s sweepin forwards;
	display: block;
}

@keyframes sweepin {
	0% {
		opacity: 0;
		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}

	60% {
		opacity: 1;
		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
	}
}

.navtogglecontainer *,
.navtogglecontainer::before,
navtogglecontainer::after {
	box-sizing: border-box;
}

.oofnavtoggle {
	border: var(--oofnavtogglebordersize) solid var(--oofnavtogglebordercolor);
	width: calc(100% - (var(--oofnavtogglebordersize) * 2));
	height: var(--oofnavtoggleheight);
	border-radius: calc(var(--oofnavtoggleheight) / 2);
	position: relative;
	background-color: var(--light-gray);
}

.oofnavtoggle_options {
	height: 100%;
	text-align: center;
	width: 50%;
	position: absolute;
	line-height: var(--oofnavtoggleheight);
	cursor: pointer;
	font-size: calc(var(--oofnavtoggleheight) / 3);
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--oofnavtoggletextcolor);
}

.oofnavtoggle_selected {
	border: var(--oofnavtogglebordersize) solid transparent;

	border-radius: calc(var(--oofnavtoggleheight) / 2);

	line-height: calc(
		var(--oofnavtoggleheight) - (var(--oofnavtogglebordersize) * 2)
	);
	width: 50%;
	opacity: 1;
	transition: all 200ms linear;
	color: var(--oofnavtoggleselectedtextcolor);
}

.oofnavtoggle_selectedleft {
	background-color: #800000;
}

.oofnavtoggle_selectedright {
	background-color: #008000;
}
.oofnavtoggle_optionleft {
	left: 0px;

	width: 50%;
}

.oofnavtoggle_optionright {
	left: 50%;

	width: 50%;
	transition: all 200ms linear;
}
.oofnavtoggle_opacityOn {
	opacity: 0.9;
}

.oofnavtoggle_opacityOff {
	opacity: 1;
}  

.completedmessage {
	font-size: 3dvh;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.popshuffle {
	animation: popAndHide 5s forwards;
	animation-timing-function: ease-out;
}


@keyframes popAndHide {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	2% {
		transform: scale(1.2);
		opacity: 1;
	}
	4%, 100% {
		transform: scale(0);
		opacity: 0;
	}
}

.popshufflerestore {
	animation: popAndShow 5s forwards;
	animation-timing-function: ease-out;
}

@keyframes popAndShow {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	2% {
		transform: scale(1.2);
		opacity: 1;
	}
	4%, 100% {
		transform: scale(1);
		opacity: 1;
	}
}

#achievementslist #poppertest{
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

levelstatsscreen {
	display: none;
	position: absolute;

	/* top: 0vh;
	left: 50%; */
	left: calc(50% - (min(var(--max-width), 100dvw)/2));


	/* left: 50%; */

	width: min(var(--max-width), 100dvw);

	/* transform: translateX(-50%); */
	height: 100dvh;

	place-items: center;

	z-index: 1112;
	background-color: var(--background2);

	transition: all 200ms ease-out;
}

levelstatsscreen .utilityscreenfooter {
	display: flex;
	/* grid-template-columns: auto; */
	column-gap: calc(var(--dynamicvh, 1vh) * 1);
	padding: 0 calc(var(--dynamicvh, 1vh) * 1);
}

levelstatsscreen .utilityscreenfooter button {
	width: min(calc(var(--max-width) * 0.4), 40vw);
}

.utilityscreenfooter .utilityscreensecondbutton{
	background-color: var(--green);
}

#levelstatslist {
	text-align: center;
	font-size: calc(var(--dynamicvh, 1vh) * 2);
}

#levelstatslist .popper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.levelstatsperformancelabel {
	font-size: 2vh;
	font-weight: 700;
	color: var(--black);
	text-align: center;
}

.levelstatsprogressbar{
	position: relative;
	background-color: var(--light-gray);
	/* overflow: hidden; */
	border-radius: calc(var(--dynamicvh, 1vh) * 1.5);
	height: calc(var(--dynamicvh, 1vh) * 3);
	margin-bottom: calc(var(--dynamicvh, 1vh) * 7.6);
	/* box-shadow: var(--insetdeepboxshadow); */
	/* padding: calc(var(--dynamicvh, 1vh) * 0.1) calc(var(--dynamicvh, 1vh) * 0.4); */
	
}

.levelstatsprogressvalue{
	position: relative;
	/* top: calc(var(--dynamicvh, 1vh) * 0.3); */
	/* margin-top: calc(var(--dynamicvh, 1vh) * 0.3); */
	/* height: calc(100% - (var(--dynamicvh, 1vh) * 0.6)); */
	height: 100%;
	border-radius: calc(var(--dynamicvh, 1vh) * 1.5);
	transition: width 500ms;
	margin-top: calc(var(--dynamicvh, 1vh) * .3);
	/* left: calc(var(--dynamicvh, 1vh) * 0.3); */
	/* border-right: solid 10px transparent;
	box-sizing: content-box; */
	box-shadow: var(--outsetshallowboxshadow);
}

.levelstatsprogressbar .highperformance {
	background-color: var(--green);
}

.levelstatsprogressbar .midperformance {
	background-color: var(--yellow);
}

.levelstatsprogressbar .lowperformance {
	background-color: var(--red);
}

.levelstatsprogressbar .levelstatsprogresslabel{
	font-size:3vh;
	font-weight: 700;
	color: var(--white);
	text-align: center;
	position: absolute;
	line-height: calc(var(--dynamicvh, 1vh) * 3);
	/* bottom: -2px; */
	white-space: nowrap;
	transition: opacity 400ms ease-out;
}

.levelstatsprogresslabel.left{
	right: calc(var(--dynamicvh, 1vh) * .9);
}

.levelstatsprogresslabel.right{
	left: calc(100% + (var(--dynamicvh, 1vh) * .5));
	color: var(--dark-gray);
}

.levelstatsavgindicator {
	position: absolute;
	top: 0;
	height: calc(var(--dynamicvh, 1vh) * 6.4);
	background-color: transparent;
	border-right: 3px dotted var(--med-gray);
	/* width: 2px; */
	transition: left 200ms ease-out;
	z-index: 300;
}

.levelstatsavglabel {
	font-size: 1.5vh;
	font-weight: 700;
	color: var(--med-gray);
	text-align: center;
	position: absolute;
	bottom: -2px;
	white-space: nowrap;
	transition: opacity 700ms ease-out;
}

.levelstatsavglabel.left{
	left: calc(var(--dynamicvh, 1vh) * .7);
	/* text-align: left; */
}

.levelstatsavglabel.right{
	right: calc(var(--dynamicvh, 1vh) * .3);
	/* text-align: right; */
}

.levelstatsmaxindicator {
	position: absolute;
	top: 50%;
	height: calc(var(--dynamicvh, 1vh) * 2.5);
	background-color: transparent;
	/* border-right: 2px dotted var(--dark-gray); */
	width: 2px;
	right:0px;
	
}

.levelstatsmaxlabel{
	font-size: 1.5vh;
	font-weight: 700;
	color: var(--green);
	text-align: center;
	position: absolute;
	bottom: calc(var(--dynamicvh, 1vh) * -1);
	white-space: nowrap;
	transition: opacity 700ms ease-out;
	right: calc(var(--dynamicvh, 1vh) * .3);
}

.levelstatsminindicator {
	position: absolute;
	top: 50%;
	height: calc(var(--dynamicvh, 1vh) * 2.5);
	background-color: transparent;
	/* border-left: 2px dotted var(--dark-gray); */
	width: 2px;
	left:0px;
	
}

.levelstatsminlabel{
	font-size: 1.5vh;
	font-weight: 700;
	color: var(--med-gray);
	text-align: center;
	position: absolute;
	bottom: calc(var(--dynamicvh, 1vh) * -1);
	white-space: nowrap;
	transition: opacity 700ms ease-out;
	left: calc(var(--dynamicvh, 1vh) * .3);
}

.wordnextlettertilespace {
	/* aspect-ratio: 1/5; */
	/* width:50%; */
	/* width: 500% !important; */
	/* aspect-ratio: unset; */
	margin-right: calc(var(--dynamicvh, 1vh) * 1.9);
}

.statsbutton{
	position: absolute;
	/* bottom: calc(var(--dynamicvh, 1vh) * .0); */
	/* bottom: 0; */
	height: calc(var(--dynamicvh, 1vh) * 4);
	line-height: calc(var(--dynamicvh, 1vh) * 4);
	/* border-top-left-radius: calc(var(--dynamicvh, 1vh) * 2);
	border-top-right-radius: calc(var(--dynamicvh, 1vh) * 2); */
	font-size: calc(var(--dynamicvh, 1vh) * 2.6);
	color: var(--white);
	padding: 0 calc(var(--dynamicvh, 1vh) * 2);
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--orange);
	border: 0;
	z-index: 1109;
	bottom: calc(var(--dynamicvh, 1vh) * -4);
	/* transition: all 500ms ease-out; */
}

.statsbutton-bottom{
	bottom: calc(var(--dynamicvh, 1vh) * -4);
	border-top-left-radius: calc(var(--dynamicvh, 1vh) * 2);
	border-top-right-radius: calc(var(--dynamicvh, 1vh) * 2);

	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.statsbutton-bottom.hide{
	top: calc(var(--dynamicvh, 1vh) * -4);
	/* animation: slideOutBottom 300ms ease-in forwards; */
	animation: slideOutTop 300ms linear forwards;
}

.statsbutton-bottom.show{
	bottom: 0;
	animation: slideInBottom 300ms ease-in forwards;
}

@keyframes slideOutBottom {
	0% {
		bottom: 0;
	}
	100% {
		bottom: calc(var(--dynamicvh, 1vh) * -4);
	}
}

@keyframes slideInBottom {
	100% {
		bottom: 0;
	}
	0% {
		bottom: calc(var(--dynamicvh, 1vh) * -4);
	}
}

.statsbutton-top{
	bottom: calc(var(--dynamicvh, 1vh) * -4);
	border-top-left-radius: calc(var(--dynamicvh, 1vh) * 2);
	border-top-right-radius: calc(var(--dynamicvh, 1vh) * 2);

	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.statsbutton-top.hide{
	top: calc(var(--dynamicvh, 1vh) * -4);
	animation: slideOutTop 300ms ease-in forwards;
}

.statsbutton-top.show{
	/* top: 0; */
	animation: slideInBottom 300ms ease-in forwards;
}

@keyframes slideOutTop {
	0% {
		bottom: 0;
		opacity: 1;
		background-color: var(--black);
	}
	80% {
		opacity: .6;
		background-color: var(--light-gray);
	}
	100% {
		bottom: calc(var(--dynamicvh, 1vh) * 38.5);
		opacity: 1;
		background-color: var(--light-gray);
	}
}

@keyframes slideInTop {
	100% {
		top: 0;
	}
	0% {
		top: calc(var(--dynamicvh, 1vh) * -4);
	}
}

.statsarea{
	position:absolute;
	/* background-color: #a80bc7; */
	/* margin: calc(var(--dynamicvh, 1vh) * .2); */
	background-color: var(--background2);
	/* width: 100%; */
	height: calc(var(--dynamicvh, 1vh) * 38.5);
	bottom: -110%;
	transition: bottom 400ms ease-out;
	display: grid;
	overflow-y: scroll;
	scroll-behavior: smooth;
	box-sizing: border-box;
	padding: 10px;
	left: calc(var(--dynamicvh, 1vh) * .5);
	right: calc(var(--dynamicvh, 1vh) * .5);
	border-radius: 2vh;
}

.statsarea .statslist:has(.popper) {
	margin: auto auto;
}

.statsarea-hide{
	bottom: calc(var(--dynamicvh, 1vh) * .5);
	animation: statsBackgroundTransition 600ms ease-in forwards;
}

@keyframes statsBackgroundTransition {
	100% {
		/* background-color: var(--background2); */
		/* border-top: 2px solid transparent; */
	}
	0%,75% {
		/* background-color: var(--med-gray); */
		/* border-top: 2px solid var(--black); */
	}
}

.statslist{
	.scrollbar {
		scrollbar-color: var(--med-gray) var(--black);
		scrollbar-width: thin;
	}
}

#resultsstats {
	display: none;
}

.wordsarea {
	/* height: calc(var(--dynamicvh, 1vh) * 39); */
	/* box-shadow: inset calc(var(--dynamicvh, 1vh) * -0.2)
			calc(var(--dynamicvh, 1vh) * -0.2) calc(var(--dynamicvh, 1vh) * 0.4)
			var(--lightshadow),
		inset calc(var(--dynamicvh, 1vh) * 0.2) calc(var(--dynamicvh, 1vh) * 0.2)
			calc(var(--dynamicvh, 1vh) * 0.4) var(--darkshadow); */
	border-radius: 2vh;
	padding-bottom: 0.5vh;
	box-sizing: content-box;
	overflow: hidden;
	position: absolute;
	display: grid;

	/* top: calc(var(--dynamicvh, 1vh) * 1); */
	grid-template-rows: calc(var(--dynamicvh, 1vh) * 3) auto;
	background-color: var(--background2);
	/* left: 1vh;
	right: 1vh; */

	position:absolute;
	/* background-color: #a80bc7; */
	/* margin: calc(var(--dynamicvh, 1vh) * .2); */
	background-color: var(--background2);
	/* width: 100%; */
	height: calc(var(--dynamicvh, 1vh) * 38.5);
	bottom: -110%;
	transition: bottom 400ms ease-out;
	display: grid;
	/* overflow-y: scroll; */
	scroll-behavior: smooth;
	box-sizing: border-box;
	/* padding: 10px; */
	left: calc(var(--dynamicvh, 1vh) * .5);
	right: calc(var(--dynamicvh, 1vh) * .5);
	border-radius: 2vh;
}

.wordsarea-hide{
	bottom: calc(var(--dynamicvh, 1vh) * .5);
	animation: statsBackgroundTransition 600ms ease-in forwards;
}


#playerIdLabel.hide, #playerIdContainer.hide{
	display: none;
}


.foundwordbonus1 {
	animation: foundbonusX1 5000ms;
	
}

.foundwordbonus2 {

	animation: foundbonusX2 5000ms;
}

.foundwordbonus3 {
	animation: foundbonusX3 5000ms;
}

@keyframes foundbonusX1 {
	0%,80% {
		background-color: var(--orangey);

	}
	100% {
		background-color: var(--light-gray);
	}
}

@keyframes foundbonusX2 {
	0%,80% {
		background-color: var(--greeny);
	}
	100% {
		background-color: var(--light-gray);
	}
}

@keyframes foundbonusX3 {
	0%,80% {
		background-color: var(--bluey);
	}
	100% {
		background-color: var(--light-gray);
	}
}

.hintmessage {
	will-change: transform, opacity;

	transition: transform 0.3s, opacity 0.1s;
	transition-timing-function: ease-in-out;
	display: grid;
	position: absolute;
	top: 0vh;
	background-color: var(--yellow);

	color: var(--black);

	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: calc(var(--dynamicvh, 1vh) * 2.1);
	font-size: calc(var(--dynamicvh, 1vh) * 2);
	min-height: calc(var(--dynamicvh, 1vh) * 5.5);
	font-weight: 600;

	z-index: 2400;
	padding: 0 calc(var(--dynamicvh, 1vh) * 1);

	overflow: hidden;
	left: 20dvw;
	width: 60dvw;

	transform: translateY(-100vh);
	border-bottom: 1px solid var(--black);
	border-left: 1px solid var(--black);
	border-right: 1px solid var(--black);
	border-bottom-left-radius: calc(var(--dynamicvh, 1vh) * 1);
	border-bottom-right-radius: calc(var(--dynamicvh, 1vh) * 1);
}