* {
	margin: 0;
	padding: 0;
}

body.paused #canvas, body.paused #board {
	filter: blur(2px);
}

body {
	background-color: #dbb36b;
	color: #111;
	font-size: 24px;
	user-select: none;
	-webkit-user-select: none;
}

.no-events {
	pointer-events: none !important;
}

#debug {
	display: none;
	position: fixed;
	left: 20px;
	top: 60px;
	color: #111;
	z-index: 99995;
	background: #111;
	color: #eee;
	padding: 8px;
}

#game {
/*	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);*/
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
}
	#game #top-buffer {
		height: 50px;
	}
	#game .padding {
		flex: 1;
	}
	#game #bottom-buffer {
		height: 50px;
	}

#render-targets {
	margin: 0 auto;
	position: relative;
}

	#canvas {
		width: 840px;
		height: 560px;
		position: absolute;
		left: 0;
		top: 0;
		border: 0px #111 solid;
		/*top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);*/
		z-index: -1;
	}

	#board {
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}

#score-display {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translate(-50%, 0);
	background-color: #111e;
	border: 2px #555 solid;
	border-radius: 8px;
	padding: 6px 16px;
	color: #eee;
	z-index: 99999;
}

#editor-menu {
	display: none;
} .editor #editor-menu {
	display: flex;
	align-items: center;
	position: absolute;
	background-color: #111;
	color: #eee;
	width: 100%;
	border-bottom: 2px #e33 solid;
	padding: 4px 8px;
	top: 0;
	left: 0;
}
	#editor-menu > div {
		padding: 0 12px;
		border-right: 2px #eee solid;
	}
	#editor-menu select {
		padding: 4px 8px;
	}
	#editor-menu button {
		padding: 4px 8px;
	}

#game-menu {
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #111;
	color: #eee;
	width: 100%;
	border-bottom: 3px #333 solid;
	padding: 4px 8px;
	box-sizing: border-box;
	z-index: 99999;
} .editor #game-menu {
	display: none;
}
	#game-menu .ui {
		display: flex;
		align-items: center;
		margin: 0 8px;
		background-color: #eee;
		color: #111;
		padding: 4px;
		border: 2px #333 solid;
		border-radius: 4px;
	}
	#game-menu .ui.disabled {
		pointer-events: none;
		opacity: 0.5;
	}
	#game-menu .ui:hover {
		cursor: pointer;
		border-color: orange;
	}
		#game-menu .ui > span {
			padding-right: 4px;
		}
		#game-menu .ui > span.empty {
			padding-right: 0px;
			width: 0;
		}

.lightbox {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #0005;
}
.dialog {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 480px;
	border: 2px #888 solid;
	z-index: 100001;
}
.dialog.wide {
	width: 640px;
}
.dialog.panel.left {
	left: 20px;
	top: 60px;
	bottom: 20px;
	width: 480px;
	transform: translate(0, 0);
	display: flex;
	flex-direction: column;
}
.dialog.panel.right {
	left: auto;
	right: 20px;
	top: 60px;
	bottom: 20px;
	width: 480px;
	transform: translate(0, 0);
	display: flex;
	flex-direction: column;
}
	.dialog .header, .dialog .footer {
		padding: 10px 16px;
		background-color: #555e;
		color: #eee;
		border: 3px #333 solid;
		border-bottom: 3px #555 solid;
		display: flex;
		align-items: center;
		font-weight: bold;
	}
		.dialog .header [rel='close'] {
			cursor: pointer;
		}
	.dialog .body {
		padding: 16px 16px;
		min-height: 80px;
		background-color: #111d;
		color: #eee;
		flex: 1;
	}
		.dialog .body ul, .dialog .body ul li {
			list-style-type: none;
		} .dialog .body ul a {
			font-style: italic;
			color: orange;
			overflow: hidden;
			text-overflow: ellipsis;
		} .dialog .body li {
			margin-bottom: 1.0em;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	.dialog .body strong {
		color: orange;
	}
	.dialog .footer {
		background-color: #111d;
		border-top: 0;
		display: block;
	}
		.dialog .footer button {
			display: block;
			font-size: 20px;
			text-align: center;
			width: 100%;
			padding: 12px 0;
			margin: 18px 0;
			font-weight: bold;
			border-radius: 10px;
			cursor: pointer;
			opacity: 0.8;
		}
		.dialog .footer button:hover {
			border-color: orange;
			opacity: 1;
		}

	.dialog hr {
		opacity: 0.5;
	}

.dialog.panel .body {
	overflow: auto;
}

	.dialog.panel .body table {
		width: 100%;
		color: #eee;
		font-size: 20px;
	}
		.dialog.panel .body thead {
			background-color: #333;
		}

		.dialog.panel .body th, .dialog.panel .body td {
			border: 1px #555 solid;
			padding: 6px;
			text-align: center;
			margin: 0;
		}
		.dialog.panel .body tr:hover {
			color: yellow;
		}

		.dialog.panel .body tbody tr:nth-child(even) {
			background-color: #222;
		}

		.dialog.panel .body tbody {
			background-color: #000;
		}

.dialog.panel .row {
	display: flex;
	align-items: center;
	margin: 4px 0;
	padding: 8px 0;
	border-bottom: 1px #555 solid;
}
	.dialog.panel .row:hover {
		background-color: #333;
	}
	.dialog.panel .row .name {
		flex: 1;
		text-overflow: ellipsis;
	}
	.dialog.panel .row .stars {
		white-space: nowrap;
		padding-right: 12px;
	}
	.dialog.panel .row button {
		font-size: 18px;
		font-size: 20px;
		text-align: center;
		padding: 12px 8px;
		margin: 0 0 0 auto;
		font-weight: bold;
		border-radius: 10px;
		cursor: pointer;
		opacity: 0.8;
	} .dialog.panel .row button:hover {
		border-color: orange;
		opacity: 1;
	}

#outro-dialog .body,
#intro-dialog .body [rel='target-scores'] * {
	text-align: center;
}

#intro-dialog {
	max-height: 60vh;
	display: flex;
	flex-direction: column;
}
	#intro-dialog .body {
		overflow: auto;
	}

#settings-dialog .body label {
	display: flex;
	padding: 16px 0;
	border-bottom: 1px #555 solid;
	align-items: start;
}
#settings-dialog .body label:hover {
	cursor: pointer;
	background-color: #333;
	color: orange;
}
	#settings-dialog .body label input,
	#settings-dialog .body select {
		margin: 0 16px;
		color: orange;
		transform-origin: center;
		transform: translate(0, 50%) scale(1.5);
	}

	#settings-dialog .body select option {
		font-size: 20px;
	}

	#settings-dialog .body select {
		color: #111;
		padding: 4px;
		margin: 8px 16px;
	}

	#settings-dialog .body label > div > div:last-child {
		opacity: 0.75;
		color: #eee !important;
	}

#about-dialog .body [rel='incognito-warning'] a {
	color: orange;
	margin-bottom: 16px;
	display: block;
}

.tile {
	width: 64px;
	height: 64px;
	margin: 3px;
	background-color: #3e3c3c;
	border: 3px #f9d9b6 solid;
	border-radius: 10px;
	box-sizing: border-box;

	/*position: absolute;
	left: 200px;
	top: 200px;*/
}
	.editor .tile:hover {
		border-color: green;
		cursor: pointer;
	}
/* vacant means don't allow movement but also don't draw the canvas fill in the background */
.tile.empty, .tile.vacant {
	background-color: transparent;
	border-color: transparent;
}
.tile.vacant {
	/*border: 2px red solid;*/
}

.letter {
	position: absolute;
	z-index: 5;
	background-color: #e99c5a;
	background: url(./gfx/tile.png);
	background-size: cover;
	/*border: 3px #333 solid;*/
	border: 0px #333 solid;
	border-radius: 10px;
/*	width: 58px;
	height: 58px;*/
	width: 64px;
	height: 64px;
	/*margin: 6px;*/
	margin: 3px;
	box-sizing: border-box;
	cursor: pointer;
	transition: transform 0.125s, filter 1.5s;
} body.paused .letter, .editor .letter {
	z-index: auto !important;
} .letter:hover {
	z-index: 9999;
} .letter .background {
	width: 64px;
	height: 64px;
	border: 3px #111 solid;
	position: absolute;
	background-color: #e99c5a;
	background: url(./gfx/tile.png);
	background-size: cover;
	box-sizing: border-box;
	border-radius: 10px;
	margin: 0px;
	cursor: pointer;
	transition: transform 0.125s, filter 1.5s;
	}
.editor .letter {
	/* important so we can get click events on the underlying tile divs in edit mode */
	pointer-events: none;
}
	.letter.with-bomb {
		background-color: transparent;
		border: 0;
	} .letter.with-bomb .content {
			color: #ccc;
		}
	.letter:hover .background {
		transform: scale(1.5);
		border: 3px #a3733f solid;
		border-radius: 10px;
		z-index: 999;
		background-color: #cb400e;
	}
	/* can't grab Egg (Letter descendant) so don't scale up */
	.letter.egg:hover {
		transform: scale(1.0);
		cursor: default;
	}
	.letter.with-bomb:hover {
		transform: scale(1.5);
		border: 0px #a3733f solid;
		border-radius: 0px;
		z-index: 999;
		background-color: transparent;
	}

	.letter.stone {
		/*background: url(./gfx/stone.jpg);*/
		/*background-size: cover;*/
		width: 64px;
		height: 64px;
		margin: 3px;
		border-radius: 10px;
	} .letter.stone .background {
		border: 3px red solid;
		background-color: #e99c5a;
		filter: grayscale(0.95);
	}

	.letter.durable {
/*		width: 64px;
		height: 64px;
		margin: 3px;
		border-radius: 10px;*/
	} .letter.durable .background {
		border: 3px #eee solid;
		filter: hue-rotate(135deg) invert(1);
	}

	.letter.egg {
		filter: hue-rotate(225deg);
		border-color: #000;
		pointer-events: none;
	}

	.letter.egg:after {
		filter: hue-rotate(-225deg);
		border-color: red;
		opacity: 1.0;
		border: 0;
		width: 40px;
		height: 40px;
		margin: 7px;
		background: url('./gfx/egg.svg');
		background-size: cover;
		content: '';
		display: block;
		transform: translate(5px, 6px) rotate(20deg);
	}

.letter.grabbed .content {
	color: red !important;
}
		
.letter .content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 48px;
	color: #333;
	font-weight: bold;
}
.letter.egg .content {
	display: none;
}

.letter .matches {
	display: none;
	position: absolute;
	left: 0;
	bottom: 100%;
	padding: 0;
	z-index: 99998;
	transform: scale(1);
	transform-origin: bottom;
	transition: transform 1.125s;
} .letter:hover .matches, .letter.faux-hover .matches {
	transform: translate(35px, -10px) scale(1.5);
}
/* invert y position near top of screen */
.letter.invert-matches .matches {
	bottom: inherit;
	top: 100%;
	transform-origin: top;
	transform: translate(35px, 12px) scale(1.5);
}

/*.letter.faux-hover .content {
	color: blue !important;
}*/
	/* TODO: I added `.background` after and it "fixed" the color on word submit preview stuff */
	/* BUT - is that right? */
	.letter.preview-select .background{
		background-color: #eb601e !important;
		border-color: #eee;
		filter: invert(1);
		/*transform: scale(1.1);*/
		transition: transform 0.125s, filter 1.0s;
	}
		.letter.preview-select.chain-reaction {
			/*filter: invert(0);*/
		}
		.letter.preview-select.chain-reaction::before {
			background-color: transparent !important;
			content: '';
			filter: invert(1);
			background-image: url(./gfx/fire.png);
			left: 50%;
			width: 32px;
			height: 32px;
			position: absolute;
			transform: translate(-50%, -50%);
		}
		.letter.preview-select .content {
			color: #111;
		}
		/* don't filter invert the rotating bombs - accomplish this by inverting the invert */
		.letter.preview-select .bomb1, .letter.preview-select .bomb2, .letter.preview-select .bomb3 {
			filter: invert(1);
		}

	.letter.has-matches:hover .matches, .letter.has-matches.faux-hover .matches {
		display: block;
		background-color: #eeed;
		border-radius: 10px;
		border: 2px #111 solid;
		padding: 8px;
		color: #111;
		font-size: 16px;
	}
		/* but don't show the matches on :hover when user is dragging a letter around */
		body.is-grabbing-letter .letter.has-matches:hover .matches,
		body.is-grabbing-letter .letter.has-matches.faux-hover .matches {
			display: none !important;
		}
		/* for ipad */
		body.is-grabbing-letter .thing, body.is-grabbing-letter .letter {
			pointer-events: none;
		}
	.letter.has-matches.grabbed:hover .matches,
	.letter.has-matches.grabbed.faux-hover .matches {
		display: none !important;
	}
	.letter.has-matches:hover .matches::after,
	.letter.has-matches.faux-hover .matches::after {
		width: 0px;
		height: 0px;
		background-color: #eeed;
		content: '';
		position: absolute;
		left: 24px;
		top: 100%;
		border-left: 12px solid #eee;
		border-bottom: 12px solid green;
		clip-path: polygon(0 0, 100% 0, 0 100%);
	}
		.letter.has-matches.invert-matches:hover .matches::after,
		.letter.has-matches.invert-matches.faux-hover .matches::after {
			width: 0px;
			height: 0px;
			background-color: red;
			content: '';
			position: absolute;
			left: 24px;
			top: auto;
			bottom: 100%;
			/* overwrite the original border hacks since we're doing the opposite arrow direction */
			border-left: 12px solid green;
			border-bottom: 12px solid #eee;
			/*clip-path: polygon(0 0, 0 -12px, 12px 0);*/
			clip-path: polygon(0 100%, 100% 0, 100% 100%);
		}

	.match {
		white-space: nowrap;
		display: flex;
		align-items: center;
	}
	.match:hover {
		background-color: #333;
		color: #eee;
		cursor: pointer;
	}

	.match .bonus {
		color: #c12525 !important;
		/*filter: invert(1);*/
		/*transform: scale(1.25);
		transform-origin: center;*/
		font-weight: bold;
		display: inline-block;
	}

	/* color fixes to deal with all the filters i use for stone and durables */
	.letter.stone .match .bonus {
		filter: grayscale(0);
	}

@keyframes rotateBomb1 {
	0% { transform: rotate(0deg) translate(0, -40px); opacity: 1.0; }
	25% { transform: rotate(90deg) translate(0, -40px); opacity: 0.8; }
	50% { transform: rotate(180deg) translate(0, -40px); opacity: 0.4; }
	75% { transform: rotate(270deg) translate(0, -40px); opacity: 0.6; }
	100% { transform: rotate(360deg) translate(0, -40px); opacity: 1.0; }
}

.letter .bomb1 {
	pointer-events: none;
	background: url(./gfx/bomb2.png);
	opacity: 0.75;
	width: 60px;
	height: 60px;
	position: absolute;
	left: calc(50% - 30px);
	top: calc(50% - 30px);
	transform-origin: center;
	animation: rotateBomb1 3s linear infinite;
	z-index: 99995;
}

@keyframes rotateBomb2 {
	0% { transform: rotate(120deg) translate(0, -40px); opacity: 0.8; }
	25% { transform: rotate(210deg) translate(0, -40px); opacity: 1.0; }
	50% { transform: rotate(300deg) translate(0, -40px); opacity: 0.6; }
	75% { transform: rotate(390deg) translate(0, -40px); opacity: 0.4; }
	100% { transform: rotate(480deg) translate(0, -40px); opacity: 0.8; }
}

.letter .bomb2 {
	pointer-events: none;
	background: url(./gfx/bomb2.png);
	width: 60px;
	height: 60px;
	position: absolute;
	left: calc(50% - 30px);
	top: calc(50% - 30px);
	transform-origin: center;
	animation: rotateBomb2 3s linear infinite;
	z-index: 99995;
}

@keyframes rotateBomb3 {
	0% { transform: rotate(240deg) translate(0, -40px); opacity: 0.4; }
	25% { transform: rotate(330deg) translate(0, -40px); opacity: 0.8; }
	50% { transform: rotate(420deg) translate(0, -40px); opacity: 1.0; }
	75% { transform: rotate(510deg) translate(0, -40px); opacity: 0.6; }
	100% { transform: rotate(600deg) translate(0, -40px); opacity: 0.4; }
}

.letter .bomb3 {
	pointer-events: none;
	background: url(./gfx/bomb2.png);
	opacity: 0.5;
	width: 60px;
	height: 60px;
	position: absolute;
	left: calc(50% - 30px);
	top: calc(50% - 30px);
	transform-origin: center;
	animation: rotateBomb3 3s linear infinite;
	z-index: 99995;
}

.tile.slot {
	width: 64px;
	height: 64px;
	border: 3px #c98c4b solid;
	background-color: #ffd49e;

	/*position: absolute;
	left: 197px;
	top: 197px;*/
}

.confetti {
	position: absolute;
	transform-origin: 35px 35px;
	transform: rotate(90deg);
}

@keyframes letter-exit {
	0% {}
	25% { transform: rotate(360deg) scale(1.5); opacity: 0.75; }
	50% { transform: rotate(720deg) scale(2.5); opacity: 0.5; }
	75% { transform: rotate(1080deg) scale(3.5); opacity: 0.25; }
	100% { transform: rotate(1449deg) scale(4.5); opacity: 0; }
}

.letter-exit {
	animation: letter-exit 3s;
}

@keyframes fox-idle {
	to {
		background-position: -160px 0;
	}
}
@keyframes fox-sleeping {
	from {
		background-position: 0 -160px;
	}
	to {
		background-position: -160px -160px;
	}
}
	
.fox {
	pointer-events: none;
	position: absolute;
	background: url(./gfx/fox.png);
	width: 32px;
	height: 32px;
	animation: fox-idle 1s steps(5, end) infinite;
	transform: scale(2.5) translate(8px, -2px);
}

@keyframes chicken-idle {
	to {
		background-position: -128px 0;
	}
}
.chicken {
	pointer-events: none;
	position: absolute;
	background: url(./gfx/chicken.png);
	width: 32px;
	height: 32px;
	animation: chicken-idle 1s steps(4, end) infinite;
	transform: scale(1.5) translate(12px, 14px);
}

.rock {
	pointer-events: none;
	position: absolute;
	background: url(./gfx/rock.png);
	width: 32px;
	height: 32px;
	transform: scale(2.5) translate(8px, 8px);
}

@keyframes fireball {
	0% { background-position: 0px 0px; opacity: 1; }
	12.5% { background-position: -64px 0px; opacity: 0.9; }
	25% { background-position: -128px 0px; opacity: 1; }
	37.5% { background-position: -192px 0px; opacity: 0.9; }
	50% { background-position: -256px 0px;  opacity: 1;}
	62.5% { background-position: -320px 0px; opacity: 0.9; }
	75% { background-position: -384px 0px;  opacity: 1;}
	87.5% { background-position: -448px 0px; opacity: 0.9; }
	100 { background-position: -448px 0px;  opacity: 1;}
}

.fireball {
	pointer-events: none;
	position: absolute;
	background: url(./gfx/fireball.png);
	width: 64px;
	height: 64px;
	animation: fireball 1s steps(1, end) infinite;
	transform-origin: center;
	/*border: 2px red solid;*/
	transform: rotate(0deg) translate(10px, 0px) scale(1.5);
	/*transition: left 0.15s, top 0.15s;*/
}
	.fireball.counterclockwise.up {
		transform: rotate(90deg) translate(10px, -25px) scale(1.5);
	}
	.fireball.counterclockwise.right {
		transform: rotate(180deg) translate(10px, -25px) scale(1.5);
	}
	.fireball.counterclockwise.down {
		transform: rotate(270deg) translate(10px, -25px) scale(1.5);
	}
	.fireball.counterclockwise.left {
		transform: rotate(0deg) translate(10px, -25px) scale(1.5);
	}

	.fireball.clockwise.up {
		transform: rotate(90deg) translate(10px, 25px) scale(1.5);
	}
	.fireball.clockwise.right {
		transform: rotate(180deg) translate(10px, 25px) scale(1.5);
	}
	.fireball.clockwise.down {
		transform: rotate(270deg) translate(10px, 25px) scale(1.5);
	}
	.fireball.clockwise.left {
		transform: rotate(0deg) translate(10px, 25px) scale(1.5);
	}

@keyframes fire {
	0% { background-position: 0px 0px; opacity: 0.75; }
	33.3% { background-position: 0px -32px; opacity: 0.5; }
	66.7% { background-position: 0px -64px;  opacity: 0.75;}
	100 { background-position: 0px -96px;  opacity: 0.5;}
}

.fire {
	pointer-events: none;
	position: absolute;
	background: url(./gfx/fire.png);
	width: 32px;
	height: 32px;
	animation: fireball 1s steps(1, end) infinite;
	transform-origin: center;
	/*border: 2px red solid;*/
	transform: translate(20px, 24px) scale(2.0);
	/*transition: left 0.15s, top 0.15s;*/
}

@keyframes bomb {
	0% { background-position: 0px 0px; }
	6% { background-position: -258px 0px; }
	13% { background-position: 0px -246px; }
	19% { background-position: -258px -246px; }
	25% { background-position: 0px -492px; }
	32% { background-position: -258px -492px; }
	38% { background-position: 0px -738px; }
	44% { background-position: -258px -738px; }
	51% { background-position: 0px -984px; }
	57% { background-position: -258px -984px; }
	63% { background-position: 0px -1230px; }
	71% { background-position: -258px -1230px; }
	78% { background-position: 0px -1476px; }
	85% { background-position: -258px -1476px; }
	100% { background-position: 0px -1722px; }
}

.bomb {
	pointer-events: none;
	position: absolute;
	background: url(./gfx/bomb.png);
	width: 258px;
	height: 246px;
	/*animation: bomb 2.5s steps(1, end) infinite;*/
	transform-origin: center;
	/*border: 2px red solid;*/
	transform: translate(-85px, -90px) scale(0.35);
	/*transition: left 0.15s, top 0.15s;*/
}

/*.stone {
	pointer-events: none;
	position: absolute;
	background: url(./gfx/bomb.png);
	width: 258px;
	height: 246px;
	animation: bomb 2.5s steps(1, end) infinite;
	transform-origin: center;
	transform: translate(-85px, -90px) scale(0.35);
}*/

@keyframes explosion {
	to {
		background-position: -256px 0;
		opacity: 0;
	}
}
.explosion {
	pointer-events: none;
	position: absolute;
	background: url(./gfx/explosion.png);
	width: 32px;
	height: 32px;
	animation: explosion 0.5s steps(8, end);
	transform: scale(2.0) translate(8px, -2px);
}

@keyframes screen-shake {
	10%, 90% {
		transform: translate(-1px, -1px);
	}
	20%, 80% {
		transform: translate(2px, -2px);
	}
	30%, 50%, 70% {
		transform: translate(-3px, 2px);
	}
	40%, 60% {
		transform: translate(3px, -2px);
	}
}

@keyframes screen-shake-gently {
	10%, 90% {
		transform: translate(-0.25px, -0.25px);
	}
	20%, 80% {
		transform: translate(0.5px, -0.5px);
	}
	30%, 50%, 70% {
		transform: translate(-0.75px, 0.5px);
	}
	40%, 60% {
		transform: translate(0.75px, -0.5px);
	}
}

@keyframes floating-text {
	from {
		transform: translate(-50%, -25%) scale(1.5);
		opacity: 1;
	}
	to {
		transform: translate(-50%, -300%) scale(3.5);
		opacity: 0;
	}
}
@keyframes floating-text-random {
	from {
		transform: translate(-50%, -25%) scale(1.5);
		/*-webkit-transform: translate(-50%, -25%) scale(1.5);*/
		opacity: 1;
	}
	to {
		transform: translate(var(--dx), var(--dy)) scale(5.5);
		/*-webkit-transform: translate(var(--dx), var(--dy)) scale(5.5);*/
		/*transform: translate(50%, -300%) scale(5.5);*/
		opacity: 0;
	}
}

.floating-text {
	color: #35bb35;
	position: absolute;
	animation: floating-text 1.25s linear;
	font-weight: bold;
} .floating-text.penalty {
	color: red;
} .floating-text.random {
	color: #111;
	text-shadow: 2px 2px #eee;
	animation: floating-text-random 1.75s linear;
	transform-origin: center;
}

@keyframes spinning-star {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes spinning-star-upscaled {
	from {
		transform: rotate(0deg) scale(2.5);
	}
	to {
		transform: rotate(360deg) scale(2.5);
	}
}

.spinning-star {
	transform-origin: center;
	animation: spinning-star 5.0s linear infinite;
	cursor: pointer;
}
.spinning-star:hover {
	animation: spinning-star-upscaled 5.0s linear infinite;
}