/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: >0.3%,last 4 version,not dead
*/

/* #region Variables */
:root {
	--margin: .5em;
	--padding: .5em;
	--spacer-md: 1em;
	--blue: rgba(63, 193, 248, .95);
	--green: rgba(76, 158, 8, .95);
	--red: rgba(158, 8, 76, .95);
	--orange: rgba(248, 168, 63, .95);
	--black: rgba(0, 0, 0, .95);
	--black-rgb: (0, 0, 0);
	--white: rgba(255, 255, 255, .95);
	--theme-light: rgb(232, 214, 203);
	--theme-dark: rgb(93, 46, 70);
	--theme-dark-gradient:
		rgba(var(--theme-dark), 0.75),
		var(--theme-dark),
		rgba(var(--theme-dark), 0.75);
	--font-family-sans-serif:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial, sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol";
	--font-family-monospace:
		SFMono-Regular,
		Menlo,
		Monaco,
		Consolas,
		"Liberation Mono",
		"Courier New",
		monospace;
	--box-shadow:
		0 .5em .5em 0 rgba(0, 0, 0, 0.75),
		0 .75em 10em 0 rgba(0, 0, 0, 0.25);
}

/* #endregion Variables */

/* #region Base */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

html {
	font-size: calc(15px + .390625vw);
	background: url("./../images/castle.svg") no-repeat;
	background-size: cover;
	-webkit-tap-highlight-color: transparent;
}

body {
	font-family: var(--font-family-sans-serif);
	line-height: 1.5em;
}

button {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	overflow: visible;
	text-transform: none;
	-webkit-appearance: inherit;
	-moz-appearance: inherit;
	appearance: inherit;
	border-radius: 0;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

button:focus {
	outline: 1px dotted #fff;
	/* outline: 5px auto -webkit-focus-ring-color; */
}

/* #endregion Base */

/*========== Components ==========*/

/* #region Header/Footer */
.footer {
	display: flex;
	align-items: center;
	flex: 1 auto;
	background-color: var(--green);
	color: var(--white);
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size: 1em;
}

.copyright {
	flex: 1 1 auto;
	margin-left: var(--margin);
	font-size: .5em;
}

.open-instructions {
	opacity: .5;
	transition: 500ms;
}

.open-instructions:hover {
	opacity: 1;
	transition: 500ms;
}

/* #endregion Header/Footer */

/* #region Modal */
.modal {
	position: fixed;
	inset: 0;
	display: none;
	background-color: rgba(0, 0, 0, 0.75);
	overflow: auto;
	z-index: 100;
}

.modal-content {
	position: relative;
	color: var(--white);
	margin: auto;
	width: 75%;
	padding: var(--spacer-md);
	-webkit-animation-name: modalOpen;
	animation-name: modalOpen;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	background-color: var(--blue);
	border-radius: 10px;
	box-shadow: var(--box-shadow);
}

@-webkit-keyframes modalOpen {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes modalOpen {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.modal-footer {
	padding: 0;
	display: flex;
}

.close-modal {
	position: relative;
	float: right;
	font-size: 1.5em;
	color: rgba(255, 255, 255, .5);
	background: transparent;
	border: none;
	transition: 500ms;
}

.open-modal:hover,
.open-modal:focus,
.close-modal:hover,
.close-modal:focus {
	cursor: pointer;
	color: var(--white);
	transition: 500ms;
}

.open-modal {
	display: flex;
	font-weight: 600;
}

.open-modal a {
	text-decoration: none;
	color: var(--red);
	margin-right: var(--margin);
}

.emoji,
.winLossMessage,
.message {
	text-align: center;
	-webkit-transform: perspective(1px) translateY(-50%);
	transform: perspective(1px) translateY(-50%);
}

.emoji {
	font-size: 5em;
	margin: 1em 0;
}

.message {
	/* margin-top: 0em; */
}

/* #endregion Modal */

/* #region Scoreboard */

.scoreboard {
	display: flex;
	justify-content: center;
}

.score-label {
	margin-right: .25em;
	font-weight: 600;
	font-size: .9em;
}

.score {
	margin-right: 1em;
	font-weight: 800;
}

#wins {
	color: var(--green);
}

#losses {
	color: var(--red);
}

/* #endregion Scoreboard */

/* #region Game */

.game {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	margin: calc(var(--margin)/2);
}

.game-box {
	width: 50%;
	max-width: 400px;
	text-align: center;
	flex-grow: 1;
}

.targetNumber,
.currentTotal {
	font-size: 5em;
	font-weight: bolder;
	color: white;
	margin: calc(var(--margin)*1);
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

@media screen and (max-width: 450px) {

	.targetNumber,
	.currentTotal {
		font-size: 4em;
	}
}

.game-box__label {
	margin: calc(var(--margin)*2);
	font-size: 1em;
	color: var(--black);
	font-weight: bold;
}

/* #endregion Game */

/* #region Crystals */

.crystals {
	position: relative;
	top: 10%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.crystal__btn {
	margin: var(--margin);
	background-color: transparent;
	border: none;
	border-radius: 100em;
	cursor: pointer;
	overflow: hidden;
}

.crystal__btn:active,
.crystal__btn:focus {
	/* box-shadow: 0 0 0 0; */
}

.crystal__btn:hover,
.crystal__btn:focus {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.crystal__btn img {
	width: 100px;
	height: 100px;
	-webkit-filter: drop-shadow(0 10px 5px rgba(0 0 0 /.8));
	filter: drop-shadow(0 10px 5px rgba(0 0 0 /.8))
}

@media screen and (min-width: 363px) {
	.crystal__btn img {
		height: 150px;
		width: 150px;
	}
}

@media screen and (min-width: 465px) {
	.crystal__btn img {
		height: 200px;
		width: 200px;
	}
}

.gemClickEffect {
	-webkit-animation-name: gemClickEffect;
	animation-name: gemClickEffect;
	-webkit-animation-duration: 200ms;
	animation-duration: 200ms;
}

@-webkit-keyframes gemClickEffect {

	0%,
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(.75);
		transform: scale(.75);
	}
}

@keyframes gemClickEffect {

	0%,
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(.75);
		transform: scale(.75);
	}
}

/* #endregion Crystals */

/* #region Logo */
.logo {
	position: absolute;
	inset: 0;
	top: 33vh;
	color: var(--red);
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-size: calc(2.5em + 0.5vw);
	font-weight: bolder;
	line-height: 2.5em;
	-webkit-animation-name: logo-scale-out;
	animation-name: logo-scale-out;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	z-index: 2;
}

@media (prefers-reduced-motion) {
	.logo {
		-webkit-animation-name: logo-fade;
		animation-name: logo-fade;
	}
}


@media screen and (min-width: 600px) {
	.logo {
		font-size: calc(3.5em + 0.5vw)
	}
}

@-webkit-keyframes logo-scale-out {
	0% {
		-webkit-transform: translate(0, -1000px);
		transform: translate(0, -1000px);
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		opacity: 0;
	}

	25% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		opacity: 1;
	}

	50% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		opacity: 1;
	}

	75% {
		opacity: 0;
	}

	100% {
		-webkit-transform: translate(0, -1000px);
		transform: translate(0, -1000px);
	}
}

@keyframes logo-scale-out {
	0% {
		-webkit-transform: translate(0, -1000px);
		transform: translate(0, -1000px);
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		opacity: 0;
	}

	25% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		opacity: 1;
	}

	50% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		opacity: 1;
	}

	75% {
		opacity: 0;
	}

	100% {
		-webkit-transform: translate(0, -1000px);
		transform: translate(0, -1000px);
	}
}

@-webkit-keyframes logo-fade {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes logo-fade {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.crystal,
.collector {
	display: block;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .15em;
	text-shadow: .025em .025em 1px var(--red), -.025em -.025em 1px var(--red), .075em .075em 1px rgba(0, 0, 0, .5);
}

/* #endregion Logo */