:root {
	--color__body-bg: #161616;
	--color__body-bg-rgb: 12, 12, 12;

	--color__body-bg-accent: #333;

	--color__text: #fff;
	--color__text-rgb: 255, 255, 255;

	--color__text-soft: rgba( var( --color__text-rgb ), 0.5);

	--color__brand-400: #379AD1;
	--color__brand-500: #379AD1;
	--color__brand-600: #1C80B8;

	--color__highlight: var( --color__brand-500 );

	--color__white: #fff;
	--color__correct: #038C00;
	--color__somewhat-correct: #D19E19;
	--color__no-present: #CCC;
	--color__wrong: #A3003B;

	--color__input-background: var( --color__body-bg );
	--color__input-border: #444;
	--color__input-border-focus: #666;

	--color__keyboard-button: #444;
	--color__keyboard-button-hover: #777;

	--font__main: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Arial, sans-serif;
	--font__heading: "Sofia Sans Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Arial, sans-serif;
	--spacing__small: .375em;
	--spacing__default: .75em;
	--spacing__base: 1em;
	--spacing__page: clamp(20px, calc(10px + 2.5vw), 40px);
	--spacing__message: clamp(10px, calc(5px + 1.25vw), 20px);

	--transition__default: 120ms ease-in-out;
	--transition__medium: 200ms ease-in-out;
	--transition__slow: 480ms ease-in-out;
	--transition__out-back: 600ms cubic-bezier( 0.175, 0.885, 0.320, 1.275 );
	--transition__in-back: 600ms cubic-bezier(0.600, -0.280, 0.735, 0.045);

	--radius__default: 4px;
}

.light-mode {
	--color__body-bg: #fff;
	--color__body-bg-rgba: 255, 255, 255;

	--color__body-bg-accent: #f5f5f5;

	--color__text: #161616;
	--color__text-rgb: 22, 22, 22;
	--color__text-soft: rgba( var( --color__text-rgb ), 0.5);

	--color__input-background: var( --color__body-bg );
	--color__input-border: #DDD;
	--color__input-border-focus: #BBB;

	--color__keyboard-button: #999;
	--color__keyboard-button-hover: #666;
}

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

body, input, textarea, select, button {
	font-family: var( --font__main );
	color: var( --color__text );
	font-size: 1em;
	line-height: 1.5;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	margin: 0;
	padding: var( --spacing__page );
	font-size: clamp(16px, calc(14px + 0.5vw), 20px);
	background: var( --color__body-bg );
	transition: all var( --transition__default );
}

button {
	transition: all var( --transition__default );
}

.quiz-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 var( --spacing__page ) 0;
	gap: var( --spacing__message );
}
.quiz-header h1 {
	flex-grow: 1;
	height: 1.25em;
}
.site-title-appendum {
	display: block;
	height: 1.25em;
}

.header-button {
	position: relative;
	padding: 5px;
	background: none;
	border: none;
	cursor: pointer;
}
.header-button svg {
	display: block;
	width: clamp( 20px, calc(10px + 2.5vw), 40px );
	height: clamp( 20px, calc(10px + 2.5vw), 40px );
	transition: all var( --transition__default );
}
.header-button svg path {
	transition: all var( --transition__default );
}

.header-button .header-button-text {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: calc( 100% + 5px );
	left: 50%;
	padding: var( --spacing__default ) var( --spacing__base );
	white-space: nowrap;
	background: var( --color__body-bg-accent );
	border-radius: var( --radius__default );
	transform: translate3d( -50%, -5px, 0 );
	transition: all var( --transition__medium );
}
.header-button .header-button-text::after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: var( --color__body-bg-accent );
	border-width: 6px;
	margin-left: -6px;
}
.header-button:hover svg {
	color: var( --color__brand-500 );
}

.header-button:hover .header-button-text {
	visibility: visible;
	opacity: 1;
	transform: translate3d( -50%, 0, 0 );
}

#show-stats:hover .stats-icon-row-1 {
	d: path( 'M0.75 3.25C0.75 1.86929 1.7698 0.75 3.02778 0.75H14.9722C16.2302 0.75 17.25 1.86929 17.25 3.25C17.25 4.63071 16.2302 5.75 14.9722 5.75H3.02778C1.7698 5.75 0.75 4.63071 0.75 3.25Z' );
}
#show-stats:hover .stats-icon-row-2 {
	d: path( 'M0.75 12C0.75 10.6193 1.86929 9.5 3.25 9.5H20.75C22.1307 9.5 23.25 10.6193 23.25 12C23.25 13.3807 22.1307 14.5 20.75 14.5H3.25C1.86929 14.5 0.75 13.3807 0.75 12Z' );
}
#show-stats:hover .stats-icon-row-3 {
	d: path( 'M0.75 20.75C0.75 19.3693 1.86929 18.25 3.25 18.25H12.75C14.1307 18.25 15.25 19.3693 15.25 20.75C15.25 22.1307 14.1307 23.25 12.75 23.25H3.25C1.86929 23.25 0.75 22.1307 0.75 20.75Z' );
}


#show-settings:hover .settings-icon-bubble-1 {
	d: path( 'M17.75 7.5C18.8546 7.5 19.75 6.60457 19.75 5.5C19.75 4.39543 18.8546 3.5 17.75 3.5C16.6454 3.5 15.75 4.39543 15.75 5.5C15.75 6.60457 16.6454 7.5 17.75 7.5Z' );
}
#show-settings:hover .settings-icon-bubble-2 {
	d: path( 'M6.25 20.5C7.35457 20.5 8.25 19.6046 8.25 18.5C8.25 17.3954 7.35457 16.5 6.25 16.5C5.14543 16.5 4.25 17.3954 4.25 18.5C4.25 19.6046 5.14543 20.5 6.25 20.5Z' );
}


#show-intro:hover .intro-icon-dice-face-1 {
	d: path( 'M16.5 15.5C16.5 16.0523 16.0523 16.5 15.5 16.5C14.9477 16.5 14.5 16.0523 14.5 15.5C14.5 14.9477 14.9477 14.5 15.5 14.5C16.0523 14.5 16.5 14.9477 16.5 15.5Z' );
}
#show-intro:hover .intro-icon-dice-face-2 {
	d: path( 'M16.5 15.5C16.5 16.0523 16.0523 16.5 15.5 16.5C14.9477 16.5 14.5 16.0523 14.5 15.5C14.5 14.9477 14.9477 14.5 15.5 14.5C16.0523 14.5 16.5 14.9477 16.5 15.5Z' );
}
#show-intro:hover .intro-icon-dice-face-3 {
	d: path( 'M19 18C19 18.5523 18.5523 19 18 19C17.4477 19 17 18.5523 17 18C17 17.4477 17.4477 17 18 17C18.5523 17 19 17.4477 19 18Z' );
}
#show-intro:hover .intro-icon-dice-face-4 {
	d: path( 'M21.5 20.5C21.5 21.0523 21.0523 21.5 20.5 21.5C19.9477 21.5 19.5 21.0523 19.5 20.5C19.5 19.9477 19.9477 19.5 20.5 19.5C21.0523 19.5 21.5 19.9477 21.5 20.5Z' );
}


h1 {
	margin: 0;
	font-family: var( --font__heading );
	font-size: clamp(20px, 5vw, 60px);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.03125em;
}

h2 {
	margin: 0 0 1em 0;
	font-family: var( --font__heading );
	font-size: clamp(25px, calc(17.5px + 1.875vw), 40px);
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -0.03125em;
}

h3 {
	margin: 1em 0 .75em 0;
	font-family: var( --font__heading );
	font-size: clamp(24px, calc(20px + 1vw), 32px);
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: -0.03125em;
}

ul {
	margin: 0 0 1em 1em;
	padding: 0;
}

.no-list {
	margin: 0;
	list-style: none;
}
.radio-list {
	display: flex;
	flex-direction: column;
	gap: var( --spacing__small );
}
.radio-list li {
	display: flex;
	gap: var( --spacing__small );
	align-items: flex-start;
}

p {
	margin: 0 0 1em 0;
}

a {
	text-decoration: none;
	color: var( --color__highlight );
}

code {
	padding: calc( var( --spacing__small ) / 2 ) var( --spacing__small );
	font-size: 1rem;
	color: var( --color__text );
	background: var( --color__body-bg-accent );
	border-radius: var( --radius__default );
}

.checkbox-wrap {
	display: flex;
	align-items: flex-start;
	gap: var( --spacing__default );
}

input[type="checkbox"],
input[type="radio"] {
	position: relative;
	width: 1.25em;
	height: 1.25em;
	margin: 2px 0 0 0;
	background: var( --color__input-background );
	border: 2px solid var( --color__input-border );
	transition: all var( --transition__default );
	appearance: none;
	outline: none;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
	border-color: var( --color__input-border-focus );
}

input[type="checkbox"]::before,
input[type="radio"]::before {
	content: " ";
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	visibility: hidden;
	color: var( --color__brand-500 );
	transform: translate3d( -50%, -50%, 0 ) scale( .5 );
	transition: all var( --transition__default );
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	border-color:  var( --color__brand-500 );
}

input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
	opacity: 1;
	visibility: visible;
	transform: translate3d( -50%, -50%, 0 ) scale( 1 );
}

input[type="checkbox"] {
	border-radius: 2px;
}
input[type="checkbox"]::before {
	content: "✓";
	font-size: .75rem;
	color: var( --color__brand-500 );
}

input[type="radio"] {
	border-radius: 50%;
}
input[type="radio"]::before {
	width: .375rem;
	height: .375rem;
	background: var( --color__white );
	border-radius: 50%;
}
input[type="radio"]:checked {
	background: var( --color__brand-500 );
}

input:disabled {
	opacity: 0.5;
	cursor: no-drop;
}

.button {
	width: fit-content;
	padding: calc( var( --spacing__default ) / 3 * 2 ) var( --spacing__base );
	background: var( --color__body-bg-accent );
	cursor: pointer;
	border: 1px solid var( --color__input-border );
	border-radius: var( --radius__default );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) ;
}
.button:hover {
	background: var( --color__body-bg );
}


.quiz-header p {
	font-weight: 400;
	margin: 0;
}

.site-title {
	display: flex;
	gap: clamp(5px, calc(2.5px + 0.625vw), 10px);
	align-items: center;
}

.site-title-type {
	display: flex;
	gap: clamp( 2px, calc(-2px + 1vw), 10px );
	text-transform: uppercase;
	font-size: clamp(15px, calc(7.5px + 1.875vw), 30px);
}

.site-title-type span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.5em;
	padding: .25em;
	aspect-ratio: 1 / 1;
	color: var( --color__white );
	background: var( --color__brand-500 );
	border-radius: var( --radius__default );
}

#keyboard-container {
	--keyboard__gap: clamp( 2px, calc(-2px + 1vw), 10px );
	position: sticky;
	z-index: 3;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: var( --keyboard__gap );
	margin: var( --keyboard__gap );
	backdrop-filter: blur( 5px );
}

.keyboard-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --keyboard__gap );
	width: 600px;
	max-width: 100%;
	margin: auto;
}

#keyboard-container button {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: .75 / 1;
	width: calc( 10% - ( var( --keyboard__gap ) / 10 * 9 ) );
	text-align: center;
	color: var( --color__white );
	cursor: pointer;
	font-weight: 600;
	background: var( --color__keyboard-button );
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.1);
	border: none;
	border-radius: var( --radius__default );
	touch-action: manipulation;
}

#keyboard-container button.backspace {
	width: calc( ( 10% - ( var( --keyboard__gap ) / 10 * 9 ) ) * 1.5 );
	aspect-ratio: 1.125 / 1;
}

#keyboard-container button.backspace svg {
	display: block;
	width: 1.25em;
	height: 1.25em;
}

#keyboard-container button:not([disabled]):hover {
	background-color: var( --color__keyboard-button-hover );
}

#keyboard-container button[disabled],
#keyboard-container button[disabled]:hover {
	opacity: 0.33;
	cursor: no-drop;
}
#keyboard-container.disabled {
	cursor: no-drop;
}

#keyboard-container #check-button {
	width: calc( ( 10% - ( var( --keyboard__gap ) / 10 * 9 ) ) * 1.5 );
	aspect-ratio: 1.125 / 1;
	font-family: var( --font__heading );
	font-size: clamp(16px, calc(12px + 1vw), 24px);
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	color: var( --color__white );
	background-color: var( --color__brand-500 );
	border-radius: var( --radius__default );
}

#keyboard-container #check-button[disabled] {
	cursor: no-drop;
}

#keyboard-container #check-button:not([disabled]):hover {
	background: var( --color__brand-600 );
}

#keyboard-container .game-status {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate3d( -50%, -50%, 0 );
	transition: all var( --transition__default );
}
#keyboard-container:not(.disabled) .game-status {
	visibility: hidden;
	z-index: -1;
	opacity: 0;
	user-select: none;
	transform: translate3d( -50%, 0, 0 );
}
#keyboard-container.disabled .game-status {
	visibility: visible;
	z-index: 3;
	opacity: 1;
	transform: translate3d( -50%, -50%, 0 );
}

.dark-mode #keyboard-container button {
	background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.1 ), rgba( 255, 255, 255, 0 ) );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.1);
}


.tries-left {
	position: relative;
	font-size: 1rem;
}
.tries-left .tries-left-text {
	left: auto;
	right: 0;
	transform: translate3d( 0, -5px, 0 );
}
.tries-left .tries-left-text::after {
	left: auto;
	right: calc( clamp(30px, calc(25px + 1.25vw), 40px) / 2 );
}

.tries-left:hover .tries-left-text {
	transform: translate3d( 0, 0, 0 );
}

.tries-left [class*="tries-left-number-"] {
	display: block;
	width: clamp(30px, calc(25px + 1.25vw), 40px);
	height: clamp(30px, calc(25px + 1.25vw), 40px);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	cursor: help;
	color: var( --color__white );
	font-weight: 600;
	background: var( --color__correct );
	border-radius: var( --radius__default );
}
.tries-left [class*="tries-left-number-4"] {
	background: var( --color__correct );
}
.tries-left [class*="tries-left-number-3"] {
	background: #5F8C00;
}
.tries-left [class*="tries-left-number-2"] {
	background: var( --color__somewhat-correct );
}
.tries-left [class*="tries-left-number-1"] {
	background: #D17119;
}
.tries-left [class*="tries-left-number-0"] {
	background: var( --color__wrong );
}


#message {
	margin-bottom: var( --spacing__page );
	padding: var( --spacing__message );
	text-align: center;
	border-radius: var( --radius__default );
}
#message p {
	margin: 0;
}
#message.wrong-answer {
	background-color: var( --color__body-bg-accent );
	animation: appear_shake 200ms ease-in-out;

}
#message.not-enough {
	background-color: var( --color__body-bg-accent );
	animation: appear_shake 200ms ease-in-out;
}
#message.success {
	color: #FFF;
	background: var( --color__correct );
	animation: appear_bounce 200ms ease-in-out;
}
#message.appear  {
	animation: message_appear 200ms ease-in-out;
}

#guesses-table {
	width: auto;
	margin: 0 auto var( --spacing__page ) auto;
	border-spacing: 5px;
	overflow: hidden;
}

#guesses-table td {
	position: relative;
	perspective: 500px;
	z-index: 1;
	width: clamp(50px, calc(35px + 3.75vw), 80px);
	height: clamp(50px, calc(35px + 3.75vw), 80px);
	line-height: calc( clamp(50px, calc(35px + 3.75vw), 80px) - 2px );
	font-weight: bold;
	text-align: center;
	cursor: default;
	background-color: transparent;
	border-radius: var( --radius__default );
	transition: all var( --transition__default );
}

#guesses-table td::before,
#guesses-table td::after {
	content: attr(data-letter);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var( --color__body-bg );
	border: 2px solid var( --color__input-border );
	backface-visibility: hidden;
	border-radius: var( --radius__default );
	transition: all var( --transition__slow );
}

#guesses-table td::before {
	transform: rotateX(0);
}

#guesses-table td::after {
	backface-visibility: hidden;
	transform: rotateX(-180deg);
}

/* Add the animation effect when one of the classes (correct, somewhat-correct, not-present) is added */
#guesses-table td.correct::before,
#guesses-table td.somewhat-correct::before,
#guesses-table td.not-present::before {
	transform: rotateX(180deg);
}

#guesses-table td.correct::after,
#guesses-table td.somewhat-correct::after,
#guesses-table td.not-present::after {
	transform: rotateX(0);
}

#guesses-table td:not(:empty)::before {
	border-color: var( --color__input-border-focus );
	animation: scale 120ms ease-in-out;
}


#guesses-table td.correct::after {
	color: #FFF;
	background-color: var( --color__correct );
	border-color: var( --color__correct );
}

#guesses-table td.somewhat-correct::after {
	color: #FFF;
	background-color: var( --color__somewhat-correct );
	border-color: var( --color__somewhat-correct );
}

#guesses-table td.not-present::after {
	background-color: var( --color__input-border );
	border-color: var( --color__input-border );
}

.hint-container {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	min-height: 1.5em;
	margin-bottom: var( --spacing__page );
}
.hint-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var( --spacing__base );
	align-items: center;
	justify-content: center;
	margin: 0;
	color: var( --color__text-soft );
}

.hint-container .hint-text {
	flex-basis: 100%;
}

#hint-text {
	margin: 0;
}


#intro .start-game {
	padding: .5em 1em;
	font-family: var( --font__heading );
	font-size: clamp(20px, calc(14px + 1.5vw), 32px);
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	color: #FFF;
	background: #379AD1;
	border-radius: var( --radius__default );
}
#intro .start-game:hover {
	background: #1C80B8;
}

#intro-hide-remember {
	position: relative;
	width: 44px;
	height: 24px;
	margin: 0;
	background: var( --color__body-bg );
	cursor: pointer;
	border-radius: 9999px;
	border: 2px solid var( --color__input-border );
	appearance: none;
	outline: none;
}
#intro-hide-remember::before {
	content: " ";
	opacity: 1;
	visibility: visible;
	position: absolute;
	left: 3px;
	top: 3px;
	width: 14px;
	height: 14px;
	background: var( --color__input-border );
	transform: translate3d( 0, 0, 0 ) scale( 1 );
	border-radius: 50%;
}

#intro-hide-remember:checked {
	background: var( --color__brand-500 );
	border-color: var( --color__brand-500 )
}
#intro-hide-remember:checked::before {
	left: calc( 100% - 18px );
	background: var( --color__body-bg );
}


.intro-examples {
	margin: 0 0 var( --spacing__page ) 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var( --spacing__page );
}

.intro-examples li {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.example-letters {
	display: flex;
	gap: 5px;
}

.intro-examples .example-letter {
	display: block;
	position: relative;
	perspective: 250px;
	z-index: 1;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	font-weight: 600;
	background-color: transparent;
	border-radius: var( --radius__default );
	box-shadow: inset 0 0 0 2px var( --color__input-border );
	transition: all var( --transition__default );
}

.intro-examples .example-letter::before,
.intro-examples .example-letter::after {
	content: attr(data-letter);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var( --color__body-bg );
	border: 2px solid var( --color__input-border );
	backface-visibility: hidden;
	border-radius: var( --radius__default );
	transition: all var( --transition__slow );
}

.intro-examples .example-letter::before {
	transform: rotateX( 0 );
}

.intro-examples .example-letter::after {
	backface-visibility: hidden;
	transform: rotateX( -180deg );
}

.intro-examples .example-letter.green::before,
.intro-examples .example-letter.green::after {
	transition-delay: 800ms;
}
.intro-examples .example-letter.yellow::before,
.intro-examples .example-letter.yellow::after {
	transition-delay: 1200ms;
}
.intro-examples .example-letter.grey::before,
.intro-examples .example-letter.grey::after {
	transition-delay: 1600ms;
}

/* Add the animation effect when one of the classes (correct, somewhat-correct, not-present) is added */
.open .intro-examples .example-letter.green::before,
.open .intro-examples .example-letter.yellow::before,
.open .intro-examples .example-letter.grey::before {
	transform: rotateX( 180deg );
}

.open .intro-examples .example-letter.green::after,
.open .intro-examples .example-letter.yellow::after,
.open .intro-examples .example-letter.grey::after {
	transform: rotateX( 0 );
}

.intro-examples .example-letter.green::after {
	color: #fff;
	background-color: var( --color__correct );
	border-color: var( --color__correct );
}
.intro-examples .example-letter.yellow::after {
	color: #fff;
	background-color: var( --color__somewhat-correct );
	border-color: var( --color__somewhat-correct );
}
.intro-examples .example-letter.grey::after {
	color: var( --color__text );
	background-color: var( --color__input-border );
	border-color: var( --color__input-border );
}

.modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba( 0, 0, 0, 0.75 );
	transform: translate3d(0, 0, 0 );
	transition: all var( --transition__medium );
}

.modal .modal-content {
	position: relative;
	width: 600px;
	max-width: 100%;
	max-height: 90%;
	overflow: auto;
	padding: var( --spacing__page );
	background: var( --color__body-bg );
	border-radius: var( --radius__default ) var( --radius__default ) 0 0;
	transition: all var( --transition__slow );
}

.modal .modal-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: calc( var( --spacing__message ) / 3 * 2 ) var( --spacing__message );
	font-size: clamp( 30px, calc(25px + 1.25vw), 40px );
	line-height: 1;
	cursor: pointer;
	background: none;
	border: none;
}


.modal:not(.open) {
	visibility: hidden;
	opacity: 0;
	z-index: -1;
	user-select: none;
}

.modal.open {
	z-index: 9;
	visibility: visible;
	opacity: 1;
	transform: translate3d(0, 0, 0 );
}

.modal:not(.open) .modal-content {
	opacity: 0;
	transform: translate3d(0, 60px, 0 );
}

.modal.open .modal-content {
	opacity: 1;
	transform: translate3d(0, 0, 0 );
}

@media screen and (min-width: 600px) {
	.modal {
		align-items: center;
	}
	.modal .modal-content {
		max-width: 90%;
		border-radius: var( --radius__default );
	}
	.modal:not(.open) .modal-content {
		transform: translate3d(0, -60px, 0 );
	}
}


.stats-summary {
	display: flex;
	justify-content: space-evenly;
	gap: 20px;
	margin-bottom: var( --spacing__page );
}

.stats-summary div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0px;
}
.stats-summary strong {
	order: 2;
	font-weight: 400;
	font-size: 1rem;
}
.stats-summary .stats-number {
	order: 1;
	font-family: var( --font__heading );
	font-size: clamp(25px, calc(17.5px + 1.875vw), 40px);
}


.guess-distribution-wrap {
	display: flex;
	margin-top: 10px;
	gap: 10px;
	font-size: 1rem;
}

.guess-distribution {
	order: 2;
	display: flex;
	flex-grow: 1;
	gap: 5px;
	flex-direction: column;
}

.guess-distribution-bar {
	position: relative;
}

.guess-distribution-bar-fill {
	background: var( --color__input-border );
	height: clamp(30px, calc(25px + 1.25vw), 40px);
	border-radius: var( --radius__default );
}
.guess-distribution-bar-fill.current {
	background: var( --color__brand-500 );
}

.guess-distribution-bar .guess-count {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

.guess-distribution-legend {
	order: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
}

.guess-distribution-legend span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(30px, calc(25px + 1.25vw), 40px);
	height: clamp(30px, calc(25px + 1.25vw), 40px);
	font-weight: 600;
	color: #fff;
	background: var( --color__input-border );
	border-radius: var( --radius__default );
}
.guess-distribution-legend span:nth-child(1) {
	background: var( --color__correct );
}
.guess-distribution-legend span:nth-child(2) {
	background: #5F8C00;
}
.guess-distribution-legend span:nth-child(3) {
	background: var( --color__somewhat-correct );
}
.guess-distribution-legend span:nth-child(4) {
	background: #D17219;
}
.guess-distribution-legend span:nth-child(5) {
	background: var( --color__wrong );
}


.game-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --spacing__default );
	font-size: 1rem;
	margin: var( --spacing__page ) 0 0 0;
	padding: var( --spacing__message );
	background: var( --color__body-bg-accent );
	border-radius: var( --radius__default );
}
.game-status-countdown {
	font-weight: 700;
	cursor: default;
}

#share-data.copy-success {
    color: var( --color__correct );
    background: #E9FBED;
	border-color: var( --color__correct );
}


.dark-mode-toggle {
	position: relative;
	aspect-ratio: 2 / 1;
	height: 40px;
	overflow: hidden;
	box-shadow: 0 0 0 2px #379AD1;
	border-radius: 9999px;
}

.dark-mode-toggle input[type="checkbox"] {
	position: absolute;
	left: 12.5%;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	background:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C12.7101 0 13.2857 0.575633 13.2857 1.28571V3C13.2857 3.71007 12.7101 4.28571 12 4.28571C11.2899 4.28571 10.7143 3.71007 10.7143 3V1.28571C10.7143 0.575633 11.2899 0 12 0ZM17.5714 12C17.5714 15.077 15.077 17.5714 12 17.5714C8.92297 17.5714 6.42857 15.077 6.42857 12C6.42857 8.92297 8.92297 6.42857 12 6.42857C15.077 6.42857 17.5714 8.92297 17.5714 12ZM13.2857 21C13.2857 20.2899 12.7101 19.7144 12 19.7144C11.2899 19.7144 10.7143 20.2899 10.7143 21V22.7144C10.7143 23.4243 11.2899 24 12 24C12.7101 24 13.2857 23.4243 13.2857 22.7144V21ZM19.7144 12C19.7144 11.2899 20.2899 10.7143 21 10.7143H22.7144C23.4243 10.7143 24 11.2899 24 12C24 12.7101 23.4243 13.2857 22.7144 13.2857H21C20.2899 13.2857 19.7144 12.7101 19.7144 12ZM1.28571 10.7143C0.575633 10.7143 0 11.2899 0 12C0 12.7101 0.575633 13.2857 1.28571 13.2857H3C3.71007 13.2857 4.28571 12.7101 4.28571 12C4.28571 11.2899 3.71007 10.7143 3 10.7143H1.28571ZM3.5147 3.5147C4.01679 3.01259 4.83085 3.01259 5.33296 3.5147L6.80839 4.99011C7.31049 5.4922 7.31049 6.30627 6.80839 6.80839C6.30627 7.31049 5.4922 7.31049 4.99011 6.80839L3.5147 5.33296C3.01259 4.83085 3.01259 4.01679 3.5147 3.5147ZM19.0099 17.1914C18.5077 16.6892 17.6937 16.6892 17.1915 17.1914C16.6895 17.6936 16.6895 18.5075 17.1915 19.0095L18.667 20.4851C19.1691 20.9871 19.9833 20.9871 20.4854 20.4851C20.9876 19.9829 20.9876 19.1688 20.4854 18.6667L19.0099 17.1914ZM20.4854 3.5147C20.9876 4.01679 20.9876 4.83085 20.4854 5.33296L19.0099 6.80839C18.5077 7.31049 17.6937 7.31049 17.1915 6.80839C16.6895 6.30627 16.6895 5.4922 17.1915 4.99011L18.667 3.5147C19.1691 3.01259 19.9833 3.01259 20.4854 3.5147ZM6.80839 19.0095C7.31049 18.5075 7.31049 17.6936 6.80839 17.1914C6.30627 16.6892 5.4922 16.6892 4.99011 17.1914L3.5147 18.6667C3.01259 19.1688 3.01259 19.9829 3.5147 20.4851C4.01679 20.9871 4.83085 20.9871 5.33296 20.4851L6.80839 19.0095Z" fill="%23EDB900"/></svg>');
	cursor: pointer;
	border: none;
	border-radius: 50%;
	appearance: none;
	outline: none;
	transform: translate3d( 150%, -50%, 0 ) rotate( 0 ) scale( 1 );
	transition: all var( --transition__in-back );
}

.dark-mode-toggle input[type="checkbox"]::before {
	content: " ";
}

.dark-mode-toggle input[type="checkbox"]:checked {
	background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.062 3.08837C12.2092 2.84893 12.2023 2.54543 12.0444 2.31294C11.8864 2.08045 11.6068 1.96219 11.33 2.01078C8.86545 2.44344 6.65023 3.77804 5.11584 5.75459C3.58144 7.73114 2.83777 10.2081 3.02968 12.703C3.2216 15.1979 4.33535 17.5319 6.15398 19.2506C7.97263 20.9691 10.3659 21.9492 12.8676 21.9999L12.8803 22C14.5935 22.0044 16.2789 21.566 17.7729 20.7273C19.2669 19.8888 20.5186 18.6781 21.4071 17.2132C21.5519 16.9747 21.5444 16.6739 21.3881 16.4428C21.2316 16.2116 20.9552 16.0926 20.68 16.1381C20.245 16.21 19.8052 16.2497 19.3644 16.2571C17.8342 16.2464 16.3344 15.8296 15.018 15.0494C13.6993 14.2677 12.6123 13.1495 11.8683 11.8093C11.1244 10.469 10.7502 8.95507 10.7843 7.42259C10.8183 5.8901 11.2593 4.39424 12.062 3.08837Z" fill="white"/></svg>');
	transform: translate3d( 0%, -50%, 0 ) rotate( 0 ) scale( 1 );
}

.dark-mode-toggle input[type="checkbox"] + label {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	background: #E5F6FF;
	border-radius: 9999px;
	transition: all linear 1000ms;
}

.dark-mode-toggle input[type="checkbox"]:checked + label {
	background: #002D46;
}

.dark-mode-toggle input[type="checkbox"] + label::before,
.dark-mode-toggle input[type="checkbox"] + label::after {
	content: " ";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.dark-mode-toggle .day-sky,
.dark-mode-toggle .night-sky {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: all ease-in-out 1400ms;
}

.dark-mode-toggle .day-sky path,
.dark-mode-toggle .night-sky path {
	transition: all ease-in-out 1800ms;
}

/* Day Sky */
/* Day Sky: On */
.dark-mode-toggle input[type="checkbox"] + label .day-sky {
	opacity: 1;
	transform: scale(1) translate3d( 0, 0, 0 );
}

/* Day Sky: Off */
.dark-mode-toggle input[type="checkbox"]:checked + label .day-sky {
	opacity: 0;
	transform: scale(1.5) translate3d( -50%, 0, 0 );
	filter: blur( 5px );
}
.dark-mode-toggle input[type="checkbox"]:checked + label .day-sky .cloud-1 {
	d: path("M24.7036 30.9952C23.8052 33.4302 20.6763 34.3102 18.6403 32.4189C17.7143 36.6963 11.8972 37.3659 10.1084 33.2064C8.41549 33.9246 6.36399 32.9183 6.01594 30.9952C2.10002 30.9192 1.90721 25.2402 5.96781 25.0323C5.55554 21.4299 9.41525 19.095 12.2572 21.5811C13.1833 17.3037 19.0003 16.6341 20.7892 20.7936C22.1803 20.1707 23.9572 20.8501 24.5917 22.1617C24.9114 22.0893 25.244 22.0507 25.5856 22.0507C31.7829 22.332 31.5435 31.4939 24.7035 30.9953L24.7036 30.9952Z");
}
.dark-mode-toggle input[type="checkbox"]:checked + label .day-sky .cloud-2 {
	d: path("M30.9352 26.2716C30.9 25.9534 30.8824 25.6335 30.8825 25.3134C30.8929 23.4739 31.5097 21.6892 32.6373 20.2357C33.7649 18.7823 35.3405 17.7413 37.1195 17.2742C38.8987 16.8069 40.7825 16.9396 42.4787 17.6516C44.1749 18.3635 45.5888 19.615 46.5018 21.2121C47.2266 20.7821 48.0546 20.5569 48.8974 20.5605C50.168 20.5605 51.3867 21.0653 52.2852 21.9638C53.1837 22.8624 53.6885 24.081 53.6885 25.3516V25.802C54.8398 25.9845 55.885 26.5804 56.6283 27.4781C57.3719 28.3759 57.7625 29.5139 57.7273 30.6791C57.6921 31.8442 57.2332 32.9565 56.4369 33.8076C55.6404 34.6587 54.561 35.1904 53.4009 35.3029C51.6091 36.769 49.7262 36.8265 47.9342 35.4802C47.2726 36.1657 46.4413 36.6639 45.5249 36.9243C44.6085 37.1847 43.6396 37.1981 42.7164 36.963C41.7932 36.7279 40.9486 36.2527 40.2684 35.5856C39.3299 36.4496 38.0951 36.9196 36.8198 36.8982C35.5443 36.8768 34.326 36.3657 33.4172 35.4706C32.9929 35.5686 32.5623 35.6359 32.1283 35.6718C30.9857 35.6376 29.8931 35.1959 29.0477 34.4267C28.2021 33.6574 27.6596 32.6111 27.5178 31.4768C27.3762 30.3426 27.6447 29.195 28.2749 28.2413C28.9051 27.2877 29.8555 26.5908 30.9546 26.2764L30.9352 26.2716Z");
}
.dark-mode-toggle input[type="checkbox"]:checked + label .day-sky .cloud-3 {
	d: path("M43.7874 14.6533C43.8279 14.2877 43.8481 13.9201 43.848 13.5523C43.8361 11.4387 43.1274 9.38802 41.8317 7.71797C40.536 6.04794 38.7256 4.85183 36.6815 4.31502C34.6371 3.77816 32.4726 3.93057 30.5236 4.74869C28.5746 5.56665 26.9501 7.00467 25.901 8.83985C25.0681 8.34577 24.1167 8.08701 23.1484 8.09115C21.6884 8.09115 20.2881 8.67114 19.2557 9.7036C18.2233 10.736 17.6433 12.1363 17.6433 13.5963V14.1138C16.3204 14.3234 15.1194 15.0081 14.2653 16.0397C13.4109 17.0712 12.962 18.3788 13.0025 19.7177C13.043 21.0564 13.5702 22.3345 14.4853 23.3124C15.4004 24.2904 16.6406 24.9013 17.9736 25.0306C20.0326 26.7152 22.196 26.7813 24.2551 25.2343C25.0153 26.022 25.9705 26.5944 27.0234 26.8937C28.0764 27.1929 29.1897 27.2083 30.2505 26.9381C31.3113 26.668 32.2817 26.1219 33.0633 25.3554C34.1417 26.3482 35.5605 26.8883 37.0259 26.8636C38.4914 26.8391 39.8914 26.2517 40.9356 25.2233C41.4231 25.3359 41.9179 25.4133 42.4165 25.4545C43.7294 25.4152 44.9849 24.9077 45.9563 24.0238C46.9279 23.1399 47.5513 21.9376 47.7142 20.6343C47.8769 19.3311 47.5684 18.0125 46.8442 16.9166C46.1201 15.8209 45.0281 15.0201 43.7651 14.6589L43.7874 14.6533Z");
}

/* Night Sky */
/* Night Sky: On */
.dark-mode-toggle input[type="checkbox"]:checked + label .night-sky {
	opacity: 1;
	filter: blur( 0 );
	transform: scale(1) translate3d( 0, 0, 0 );
}
/* Night Sky: Off */
.dark-mode-toggle input[type="checkbox"] + label .night-sky {
	opacity: 0;
	filter: blur( 10px );
	transform: scale(0.75) translate3d( 0, 50%, 0 );
}
.dark-mode-toggle input[type="checkbox"]:not(:checked) + label .night-sky .star-3 {
	d: path("M11.2343 21.3698C10.8956 21.0747 10.5152 20.7991 10.0826 20.5581C10.077 21.0566 10.1235 21.5204 10.2116 21.9647C10.4321 23.0878 10.1207 24.2393 9.36821 25.1017C9.07307 25.4404 8.80117 25.8187 8.55807 26.2476C9.05104 26.2515 9.51459 26.2052 9.95921 26.1168C11.0823 25.8963 12.2371 26.2058 13.0996 26.9583C13.4404 27.2571 13.8187 27.529 14.2476 27.7721C14.2516 27.2791 14.2052 26.8156 14.119 26.3746C13.8985 25.2515 14.2046 24.0987 14.9569 23.2359C15.2556 22.8955 15.5278 22.5171 15.7721 22.0826C15.277 22.075 14.8097 22.1234 14.3688 22.2097C13.2494 22.4281 12.0946 22.1187 11.2343 21.3698Z");
}
.dark-mode-toggle input[type="checkbox"]:not(:checked) + label .night-sky .star-1 {
	d: path("M49.7422 29.5207C49.5143 29.0721 49.2348 28.6263 48.8867 28.1945C48.6717 28.7098 48.5254 29.211 48.4305 29.7094C48.1883 30.9682 47.3818 32.0333 46.2385 32.6132C45.7898 32.8411 45.3488 33.1199 44.9163 33.4633C45.4266 33.6742 45.9275 33.8206 46.4263 33.9154C47.6851 34.1577 48.7545 34.9636 49.3344 36.1069C49.563 36.5602 49.8418 37.0013 50.1852 37.4337C50.3962 36.9234 50.5425 36.4226 50.638 35.9285C50.8802 34.6696 51.6818 33.6008 52.825 33.0205C53.278 32.7924 53.7195 32.5135 54.1555 32.1648C53.6446 31.9492 53.139 31.8035 52.6449 31.708C51.3908 31.4651 50.3214 30.6593 49.7422 29.5207Z");
}
.dark-mode-toggle input[type="checkbox"]:not(:checked) + label .night-sky .star-2 {
	d: path("M65.9885 8.08272C65.9355 7.74546 65.8487 7.39923 65.7146 7.04765C65.4678 7.33505 65.2683 7.62779 65.1026 7.92947C64.6824 8.69095 63.9387 9.20914 63.0794 9.34359C62.7421 9.3966 62.3991 9.484 62.0481 9.61493C62.3331 9.85802 62.6256 10.0575 62.9276 10.2232C63.6891 10.6435 64.2101 11.3877 64.3446 12.247C64.3971 12.5874 64.4845 12.9305 64.6154 13.2815C64.8585 12.9964 65.058 12.704 65.2231 12.4051C65.6434 11.6437 66.3846 11.1221 67.244 10.9873C67.5841 10.9351 67.9274 10.8477 68.2819 10.7141C67.9974 10.4679 67.7018 10.2679 67.4029 10.1027C66.6446 9.683 66.1236 8.93884 65.9885 8.08272Z");
}




@keyframes message_appear {
	0% {
		transform: translate3d( 0, 5px, 0 );
	}
	100% {
		transform: translate3d( 0, 0, 0 );
	}
}

@keyframes appear_shake {
	from,
	to {
		transform: translate3d(0, 0, 0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translate3d(-10px, 0, 0);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translate3d(10px, 0, 0);
	}
}

@keyframes appear_bounce {
	from,
	20%,
	53%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -30px, 0) scaleY(1.1);
	}

	70% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -15px, 0) scaleY(1.05);
	}

	80% {
		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0) scaleY(0.95);
	}

	90% {
		transform: translate3d(0, -4px, 0) scaleY(1.02);
	}
}

@keyframes scale {
	0% {
		transform: scale( 1 );
	}
	50% {
		transform: scale( 1.1 );
	}
	100% {
		transform: scale( 1 );
	}
}