/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                                                          */
/*                                                          */
/*     STYLE VARIABLES                                      */
/*                                                          */
/*                                                          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
:root {
	/* ~~~~~~~~~~~~~~~~~~~~~~~ */
	/*         Colors          */
	/* ~~~~~~~~~~~~~~~~~~~~~~~ */
	--c1-hue: 180;
	--c1-sat: 15%;
	--c1-light: 85%;
	--c1-med: 65%;
	--c1-dark: 30%;
	--c1-darker: 20%;

	--c2-hue: 220;
	--c2-sat: 20%;
	--c2-light: 85%;
	--c2-med: 65%;
	--c2-dark: 32%;
	--c2-darker: 20%;

	--c3-hue: 270;
	--c3-sat: 15%;
	--c3-light: 85%;
	--c3-med: 67%;
	--c3-dark: 32%;
	--c3-darker: 20%;

	--c4-hue: 36;
	--c4-sat: 40%;
	--c4-light: 88%;
	--c4-med: 67%;
	--c4-dark: 28%;
	--c4-darker: 20%;

	/* ~~~~~~~~~~~~~~~~~~~~~~~ */
	/*         Heights         */
	/* ~~~~~~~~~~~~~~~~~~~~~~~ */
	--header-height: 115px;
	--frame-height: 100vh;
	--frame-height: 100dvh;
	--game-margin-block: 1.5rem;
	--game-height: calc(
		var(--frame-height) - var(--header-height) - var(--keyboard-height) - 2 *
			var(--game-margin-block)
	);
	--level-height: calc(var(--game-height) / 3);
	--length-height: 3.5rem;
	--input-height: max(
		var(--length-height),
		calc(2 * var(--level-height) / 3)
	);
	--letter-border-bottom: 2px;
	--keyboard-height: 200px;

	/* ~~~~~~~~~~~~~~~~~~~~~~~ */
	/*   Widths & Font Sizes   */
	/* ~~~~~~~~~~~~~~~~~~~~~~~ */
	--frame-width: 100vw;
	--frame-padding-inline: 6vw;
	--keyboard-padding-inline: 2vw;
	--keyboard-key-border-radius: 4px;

	--message-fs: 1rem;
	--length-fs: 6vw;
	--length-width: 12vw;
	--padding-length-word: 4vw;

	--word-border-width: 2px;
	--word-padding-inline: 2vw;

	/* ~~~~~~~~~~~~~~~~~~~~~~~ */
	/*   Layers                */
	/* ~~~~~~~~~~~~~~~~~~~~~~~ */
	--z-titleScreen: 5; /*Title Screen*/
	--z-noLandscape: 4; /*Rotate Device CTA*/
	--z-modalScreen: 3; /*Help or Stats*/
	--z-overlay: 2; /*Trigram Reveal or You Win*/
	--z-messageContainer: 1; /*Round Title or Error Alert*/
}

/* Desktop style adjustments */
@media (min-width: 520px) {
	:root {
		/* ~~~~~~~~~~~~~~~~~~~~~~~ */
		/*         Heights         */
		/* ~~~~~~~~~~~~~~~~~~~~~~~ */
		--frame-height: 100%;
		--game-height: calc(3 * (var(--level-height)));
		--level-height: clamp(
			8rem,
			calc(
				(
						100vh - var(--header-height) - var(--keyboard-height) -
							2 * var(--game-margin-block)
					) / 3
			),
			16rem
		);
		--input-height: 5.5rem;

		/* ~~~~~~~~~~~~~~~~~~~~~~~ */
		/*   Widths & Font Sizes   */
		/* ~~~~~~~~~~~~~~~~~~~~~~~ */
		--frame-width: calc(30rem + 2 * var(--frame-padding-inline));
		--frame-padding-inline: 1.25rem;
		--keyboard-padding-inline: var(--frame-padding-inline);
		--keyboard-key-border-radius: 6px;

		--message-fs: 1.125rem;
		--length-fs: 2rem;
		--length-width: 3.25rem;
		--padding-length-word: 1.5rem;

		--word-border-width: 2px;
		--word-padding-inline: 0.5rem;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                                                          */
/*                                                          */
/*     ROUND VARIATIONS                                     */
/*                                                          */
/*                                                          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.round-transition,
.round-transition * {
	transition: width 1s ease-out, color 1s ease-out,
		background-color 1s ease-out, border-color 1s ease-out,
		margin 1s ease-out, transform 1s ease-out, font-size 1s ease-out,
		fill 1s ease-out;
}
.round-1 {
	--round-index: 0;
	--num-letters-max: 6;
	--letter-margin-x: 2vw;
	--color-light: hsl(var(--c1-hue), var(--c1-sat), var(--c1-light));
	--color-med: hsl(var(--c1-hue), var(--c1-sat), var(--c1-med));
	--color-dark: hsl(var(--c1-hue), var(--c1-sat), var(--c1-dark));
	--color-darker: hsl(var(--c1-hue), var(--c1-sat), var(--c1-darker));
	--color-translucent: hsla(
		var(--c1-hue),
		var(--c1-sat),
		var(--c1-darker),
		0.9
	);
}

.round-2 {
	--round-index: 1;
	--num-letters-max: 9;
	--letter-margin-x: 1vw;
	--color-light: hsl(var(--c2-hue), var(--c2-sat), var(--c2-light));
	--color-med: hsl(var(--c2-hue), var(--c2-sat), var(--c2-med));
	--color-dark: hsl(var(--c2-hue), var(--c2-sat), var(--c2-dark));
	--color-darker: hsl(var(--c2-hue), var(--c2-sat), var(--c2-darker));
	--color-translucent: hsla(
		var(--c2-hue),
		var(--c2-sat),
		var(--c2-darker),
		0.9
	);
}

.round-3 {
	--round-index: 2;
	--num-letters-max: 12;
	--letter-margin-x: 0.5vw;
	--color-light: hsl(var(--c3-hue), var(--c3-sat), var(--c3-light));
	--color-med: hsl(var(--c3-hue), var(--c3-sat), var(--c3-med));
	--color-dark: hsl(var(--c3-hue), var(--c3-sat), var(--c3-dark));
	--color-darker: hsl(var(--c3-hue), var(--c3-sat), var(--c3-darker));
	--color-translucent: hsla(
		var(--c3-hue),
		var(--c3-sat),
		var(--c3-darker),
		0.9
	);
}

.round-4 {
	--round-index: 3;
	--num-letters-max: 15;
	--letter-margin-x: 0.5vw;
	--color-light: hsl(var(--c4-hue), var(--c4-sat), var(--c4-light));
	--color-med: hsl(var(--c4-hue), var(--c4-sat), var(--c4-med));
	--color-dark: hsl(var(--c4-hue), var(--c4-sat), var(--c4-dark));
	--color-darker: hsl(var(--c4-hue), var(--c4-sat), var(--c4-darker));
	--color-translucent: hsla(
		var(--c4-hue),
		var(--c4-sat),
		var(--c4-darker),
		0.9
	);
}

/* Desktop style adjustments */
@media (min-width: 520px) {
	.round-1 {
		--letter-margin-x: 0.5rem;
	}
	.round-2 {
		--letter-margin-x: 0.5rem;
	}
	.round-3 {
		--letter-margin-x: 0.25rem;
	}
	.round-4 {
		--letter-margin-x: 0.25rem;
	}
	/* .keyboard-key:hover,
	.header-button:hover {
		background-color: var(--color-light);
		color: var(--color-dark);
	}
	.keyboard-key:active,
	.header-button:active {
		background-color: var(--color-dark);
		color: var(--color-light);
		border-color: var(--color-dark);
	} */
}

/* Mobile style adjustments */
@media (max-width: 519px) {
	.round-4 {
		--letter-border-bottom: 1px;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                                                          */
/*                                                          */
/*     APP CONTAINER                                               */
/*                                                          */
/*                                                          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
}

#app {
	display: flex;
	flex-flow: column;
	align-items: center;

	background-color: var(--color-med);
	color: var(--color-dark);
}

#frame {
	width: calc(var(--frame-width));
	height: var(--frame-height);

	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                                                          */
/*                                                          */
/*     HEADER                                               */
/*                                                          */
/*                                                          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.header {
	width: 100%;
	height: var(--header-height);
	padding-inline: var(--frame-padding-inline);

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	position: relative;

	padding-block: 1rem;
	border-bottom: 3px double;
	color: var(--color-dark);
	/* ^Needed for transitioning of header bottom border color*/

	font-size: 1rem;
}

.header-element {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;

	font-weight: bold;
}

.header-title {
	padding-bottom: 3px;
	font-weight: bold;
	color: var(--color-dark);
	/* ^Needed for transitioning of header element titles*/
}

.header-button {
	width: 3.25rem;
	aspect-ratio: 1/1;
	border: 2px solid;
	border-bottom: 4px solid;
	border-radius: 50%;

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

	font-size: 1.75rem;
	color: var(--color-dark);
	/* ^Needed for transitioning of header button border color*/

	background-color: transparent;

	cursor: pointer;
}

.header #trigram {
	width: 7.25rem;
	height: 3.25rem;
	padding: 1.625rem 0.5rem;
	border: 3px solid;
	border-radius: 8px;

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

	background-color: white;
	color: var(--color-dark);
	/* ^Needed for transitioning of trigram color*/

	font-size: 2em;
}

/* .header #trigram span {
	width: 1.875rem;
	text-align: center;
} */

.header-button i {
	color: var(--color-dark);
	/* ^Needed for transitioning of bottom fontawesome icons*/
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                                                          */
/*                                                          */
/*     ALERTS                                               */
/*                                                          */
/*                                                          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#messageContainer {
	position: absolute;
	top: calc(100% + var(--game-margin-block) / 2);
	left: 0;

	width: 100%;

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

	font-size: var(--message-fs);
	font-weight: bold;

	z-index: var(--z-messageContainer);
}

#message {
	display: none;
	width: fit-content;
	padding: 0.25rem 2ch;
	background-color: white;
	border-radius: 6px;
}

#message.shown {
	display: block;
}

#message.roundTitle {
	display: block;
	opacity: 0;
	animation: show-temporarily 3.5s ease-in-out;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                                                          */
/*                                                          */
/*     GAME                                                 */
/*                                                          */
/*                                                          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#game {
	width: 100%;
	height: var(--game-height);
	padding-inline: var(--frame-padding-inline);
	margin-block: var(--game-margin-block);

	display: flex;
	flex-flow: column nowrap;
	position: relative;

	overflow: hidden;
}

.round {
	display: flex;
	flex-flow: column nowrap;

	transform: translateY(calc(-1 * var(--round-index) * var(--game-height)));

	background-color: var(--color-med);
	color: var(--color-dark);
}

.level {
	width: fit-content;
	height: var(--level-height);

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: var(--padding-length-word);
}

.level.shake {
	animation: shake 300ms ease-in-out;
}

.length {
	width: fit-content;
	min-width: var(--length-width);
	height: var(--length-height);
	border: 2px solid;
	border-radius: 8px;

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

	font-size: var(--length-fs);
}

.word {
	padding-inline: var(--word-padding-inline);
	height: var(--input-height);

	border: var(--word-border-width) solid;
	border-radius: 8px;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.letter {
	--word-width-max: calc(
		var(--frame-width) - 2 * var(--frame-padding-inline) -
			var(--length-width) - var(--padding-length-word) - 2 *
			var(--word-border-width) - 2 * var(--word-padding-inline)
	);
	--letter-width: var(--word-width-max) / var(--num-letters-max);
	width: calc(var(--letter-width) - 2 * var(--letter-margin-x));
	margin-inline: var(--letter-margin-x);
	border-bottom: var(--letter-border-bottom) solid;
	font-size: calc(var(--letter-width) - 2 * var(--letter-margin-x));
	text-align: center;
}

.letter.empty {
	border-color: var(--color-dark);
	color: transparent;
}

/* Replacing nested rules since they seem unsupported in some environements */
/* .complete {
	.letter {
		border: none;
	}
} */
.complete .letter {
	border: none;
}

/* Replacing nested rules since they seem unsupported in some environements */
/* .active {
	.length,
	.word {
		border-width: 3px;
		box-shadow: 0px 0px 18px white;
		font-weight: bold;
		background-color: var(--color-light);
	}
	.letter {
		border-width: 3px;
	}
} */
.active .length,
.active .word {
	border-width: 3px;
	box-shadow: 0px 0px 18px white;
	font-weight: bold;
	background-color: var(--color-light);
}
.active .letter {
	border-width: 3px;
}

/* Replacing nested rules since they seem unsupported in some environements */
/* .locked {
	.letter {
		border: none;
	}
	.word {
		border-color: var(--color-dark);
		color: transparent;
	}
} */
.locked .letter {
	border: none;
}
.locked .word {
	border-color: var(--color-dark);
	color: transparent;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                                                          */
/*                                                          */
/*     KEYBOARD                                             */
/*                                                          */
/*                                                          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#keyboard {
	width: min(100%, 100vw);
	height: var(--keyboard-height);
	padding-inline: var(--keyboard-padding-inline);
	padding-block: 1rem;
	border-top: 3px double;

	display: flex;
	flex-direction: column;
	gap: 8px;

	touch-action: manipulation;
	/* ^Disables double-tap-to-zoom on mobile */

	--num-keys: 10;
	--num-keyGaps: 9;
	--key-width: 9%;
	--key-gap: calc(
		(100% - (var(--num-keys) * var(--key-width))) / (var(--num-keyGaps))
	);
}

.keyboard-row {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	gap: var(--key-gap);
}

.keyboard-key {
	width: var(--key-width);
	height: 3.25rem;

	border: 2px solid;
	border-radius: var(--keyboard-key-border-radius);

	font-size: 1.375rem;

	cursor: pointer;

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

	background-color: var(--color-dark);
	color: var(--color-light);
	border-color: var(--color-dark);
	fill: var(--color-light);
}

.keyboard-key#backspaceKey,
.keyboard-key#enterKey {
	width: calc(1.5 * var(--key-width) + var(--key-gap));
}

.keyboard-key#enterKey {
	font-size: 0.75em;
}

.keyboard-key svg {
	pointer-events: none;
	width: 1.0625em;
	height: 1.0625em;
}

/* Replacing nested rules since they seem unsupported in some environements */
/* #keyboard.disabled {
	.keyboard-key {
		cursor: default;
	}
	.keyboard-key:hover {
		background-color: hsl(var(--c4-hue), var(--c4-sat), var(--c4-dark));
		color: hsl(var(--c4-hue), var(--c4-sat), var(--c4-light));
		border-color: hsl(var(--c4-hue), var(--c4-sat), var(--c4-dark));
		fill: hsl(var(--c4-hue), var(--c4-sat), var(--c4-light));
	}
} */
#keyboard.disabled .keyboard-key {
	cursor: default;
}
#keyboard.disabled .keyboard-key:hover {
	background-color: hsl(var(--c4-hue), var(--c4-sat), var(--c4-dark));
	color: hsl(var(--c4-hue), var(--c4-sat), var(--c4-light));
	border-color: hsl(var(--c4-hue), var(--c4-sat), var(--c4-dark));
	fill: hsl(var(--c4-hue), var(--c4-sat), var(--c4-light));
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                        MODALS                            */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.modal-screen {
	display: none;
	position: fixed;
	z-index: var(--z-modalScreen);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	cursor: pointer;
	background-color: var(--color-translucent);
}

.modal-content {
	width: min(500px, 94vw);
	height: fit-content;
	border: 3px solid;
	margin: 4rem auto;
	padding: 1.5rem;
	cursor: default;
	background-color: var(--color-light);
	color: var(--color-darker);
	border-color: var(--color-darker);
}

.modal-content h1 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.modal-content h2 {
	font-size: 1.125rem;
	margin-block: 1.25rem 0.75rem;
	border-bottom: 2px solid var(--color-dark);
}

.closeRow {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: end;
}

.closeButton {
	background-color: transparent;
	border: none;
	cursor: pointer;
}

.fa-xmark {
	font-size: 1.25rem;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                     TITLE SCREEN                         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#titleScreen {
	position: fixed;
	z-index: var(--z-titleScreen);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	background-color: hsl(var(--c1-hue), var(--c1-sat), var(--c1-med));
	color: hsl(var(--c1-hue), var(--c1-sat), var(--c1-dark));

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 3rem;
}

#titleScreenTitle {
	display: flex;
	flex-flow: column nowrap;
	align-items: end;
}

#titleScreenButtons {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.875rem;
}

#titleScreenButtons button {
	background-color: hsl(var(--c1-hue), var(--c1-sat), var(--c1-light));
	color: hsl(var(--c1-hue), var(--c1-sat), var(--c1-dark));
	padding: 10px 20px;
	border: 3px solid;
	border-bottom: 6px solid;
	height: 3.5rem;
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 8px;
	cursor: pointer;
}

button#howToButton {
	background-color: transparent;
}

#titleScreenButtons button:active {
	border: 3px solid;
	border-bottom: 4px solid;
	transform: translateY(2px);
}

#titleScreenDetails {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.1875rem;
	/* text-align: center; */
}

#titleScreenDetails #date {
	font-weight: bold;
}

#titleScreen h1 {
	font-size: 8rem;
	margin-bottom: 0.125em;
}

#links {
	font-size: 1.5em;
	margin-top: 0.25em;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

#titleScreen a {
	color: var(--color-dark);
}

@media (max-width: 519px) {
	#titleScreen h1 {
		font-size: 6rem;
		margin-bottom: 0.125em;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                      HELP SCREEN                         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.help-trigram {
	padding-inline: 0.5ch;
	background-color: white;
	border: 1px solid black;
	border-radius: 4px;
	text-transform: capitalize;
	font-weight: bold;
}

.help-trigram-subtle {
	font-weight: bold;
	text-decoration: underline;
}

ul {
	margin-block: 0.75rem 1.5rem;
}

li {
	margin-left: 2ch;
	margin-bottom: 0.625rem;
	/* font-size: 1.125rem; */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                     STATS SCREEN                         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#nextGameCountdownDiv {
	display: none;
	text-align: center;
}

#wordListValue {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.5rem;
}

.stat-wordList-level {
	display: flex;
	flex-flow: row nowrap;
	gap: 0.5rem;
	align-items: center;
}

.stat-wordList-length {
	width: 3ch;
	text-align: right;
}

.stat-wordList-word {
	letter-spacing: 0.25rem;
}

.stat-wordList-trigram {
	border: 1px solid;
	border-radius: 4px;
	padding-left: 0.25rem;
	margin-right: 0.125rem;
	background-color: white;
	letter-spacing: 0.25rem;
}

#statListValue {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
}

.stat-statList-item {
	width: 7ch;
	display: flex;
	flex-flow: column nowrap;
	text-align: center;
}

.stat-statList-itemValue {
	font-size: 2rem;
}

#statDistributionValue {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.25rem;
}

.stat-statDistribution-item {
	display: flex;
	flex-flow: row nowrap;
	gap: 0.5rem;
	align-items: center;
}

.stat-statDistribution-itemLength {
	width: 3ch;
	text-align: right;
}

.stat-statDistribution-itemCount {
	padding-inline: 0.5ch;
	background-color: var(--color-dark);
	color: white;
	text-align: right;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                OVERLAYS                                  */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.overlay {
	position: fixed;
	z-index: var(--z-overlay);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: center;
}

.overlayContent {
	width: var(--frame-width);
	height: calc(var(--header-height) + var(--game-height) + 2*var(--game-margin-block));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                TODAY'S TRIGRAM IS...                     */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#trigramRevealScreen {
	background-color: hsla(var(--c1-hue), var(--c1-sat), var(--c1-med), 0.7);
	color: hsl(var(--c1-hue), var(--c1-sat), var(--c1-dark));
}

#trigramRevealScreen.showTemporarily {
	animation: show-temporarily 5s ease;
}

#trigramRevealScreenContent {
	background-color: hsl(var(--c1-hue), var(--c1-sat), var(--c1-med));
}

#trigramRevealScreen h3 {
	font-size: 1.5rem;
	padding-bottom: 1rem;
}

#trigramRevealScreen h4 {
	font-size: 1.125rem;
	padding-top: 0.75rem;
}

#trigramReveal {
	width: 14.75rem;
	padding: 1.5rem 1rem;
	border: 6px solid;
	border-radius: 24px;

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

	background-color: white;

	font-size: 4rem;
	font-weight: bold;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                YOU WIN OVERLAY                           */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#youWinScreen {
	display: none;
	opacity: 0;
	background-color: hsla(var(--c3-hue), var(--c3-sat), var(--c3-med), 0.7);
	color: hsl(var(--c3-hue), var(--c3-sat), var(--c3-dark));
}

#youWinScreen.fade-in {
	opacity: 1;
	animation: fade-in 2s ease;
}

#youWinScreen.fade-out {
	animation: fade-out 1s ease;
}

#youWinScreenContent {
	background-color: hsl(var(--c3-hue), var(--c3-sat), var(--c3-med));
}

#youWinScreenContent h3 {
	font-size: 4rem;
	padding-bottom: 1em;
}

#youWinScreenButtons {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.875rem;
}

#youWinScreenButtons button {
	background-color: hsl(var(--c3-hue), var(--c3-sat), var(--c3-light));
	color: hsl(var(--c3-hue), var(--c3-sat), var(--c3-dark));
	padding: 10px 20px;
	border: 3px solid;
	border-bottom: 6px solid;
	height: 3.5rem;
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 8px;
	cursor: pointer;
	position: relative;
}

button#viewStatsButton {
	background-color: transparent;
}

#youWinScreenButtons button:active {
	border: 3px solid;
	border-bottom: 4px solid;
	transform: translateY(2px);
}

#youWinScreenButtons i {
	padding-right: 0.375rem;
	/* font-size: 0.875em; */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                NO LANDSCAPE SCREEN                       */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#noLandscapeScreen {
	display: none;
	z-index: var(--z-noLandscape);
	width: 100%;
	height: 100%;
	background-color: black;

	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}

#noLandscapeMessage {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.25rem;
}

#noLandscapeMessage img {
	max-width: 25%;
	height: auto;
	margin-bottom: 1.5rem;
}

#noLandscapeMessage p:last-child {
	font-weight: bold;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                ANIMATIONS                                */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fade-out {
	15% {
		opacity: 1;
	}
	85% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes show-temporarily {
	10% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes shake {
	10% {
		transform: translateX(-1.5%);
	}
	30% {
		transform: translateX(1.5%);
	}
	50% {
		transform: translateX(-2.5%);
	}
	70% {
		transform: translateX(2.5%);
	}
	90% {
		transform: translateX(-1.5%);
	}
	100% {
		transform: translateX(0%);
	}
}