@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@900&display=swap");

:root {
	--nory-clr-red: #e82425;
	--nory-clr-blue: #1a52f5;
	--nory-clr-purple: #6200b3;
	--nory-clr-green: #39c66c;
	--nory-clr-yellow: #ffae0e;
	--nory-clr-black: #0f0f0f;
	--nory-clr-white: #ffffff;
	--nory-palette: red.blue.green.purple.yellow.white;

	--nory-logo-offset-top: -3px;

	--nory-fs-base: 16px;
	--nory-fs-score: 32px;
	--nory-fs-score-small: 24px;
	--nory-ff-primary: "Inconsolata", sans-serif;

	--nory-game-strata-default: 10000;
	--nory-game-strata-board: 10100;
	--nory-game-strata-overlay: 10200;
	--nory-game-strata-tooltip: 10300;

	--nory-game-control-button-width: 38px;
	--nory-game-control-button-height: 38px;
}

body {
	overflow: hidden;
	color: #ffffff;
	background-color: var(--nory-clr-black, #000000);
	font-size: var(--nory-fs-base, 16px);
	font-family: var(--nory-ff-primary, sans-serif);
	margin: 0;
	padding: 0;

	& img {
		max-width: 100%;
		max-height: 320px;
	}

	& nory-screen,
	& nory-game {
		align-items: center;
		position: absolute;
		inset: 0;
	}

	& nory-screen {
		display: grid;
		opacity: 1;
		transition: opacity 1s ease-in-out;

		&[off] {
			opacity: 0;
			pointer-events: none;
			user-select: none;
		}

		& nory-overlay {
			position: relative;
			margin-inline: auto;
			max-width: 200px;
			overflow: visible;

			& nory-heading {
				display: block;

				& nory-hidden {
					opacity: 0;
					position: absolute;
					z-index: -1;
				}

				& #nory-logo {
					overflow: visible;
					color: var(--nory-clr-red);
					width: 100%;

					& * {
						transform-box: fill-box;
					}

					& .are {
						transform-origin: bottom left;
					}

					& .box {
						transform-origin: bottom left;

						&.center {
							transform-origin: center;
						}
					}

					& .dot {
						display: none;
						transform-origin: center;
					}

					& .ele {
						transform-origin: bottom left;
					}

					& .eye {
						transform-origin: center;
					}

					& .liT {
						transform-origin: bottom center;
					}

					& .liB {
						transform-origin: top center;
					}

					& .why {
						transition: color 250ms ease-in-out;
					}
				}
			}

			& nory-tagline {
				color: var(--nory-clr-red, #e82425);
				font-size: 20px;
				font-style: normal;
				font-weight: 800;
				line-height: 24px;
				letter-spacing: -4px;
				text-transform: uppercase;

				writing-mode: vertical-rl;
				text-orientation: upright;
				position: absolute;
				left: 100%;
				top: var(--nory-logo-offset-top, 0);
			}
		}
	}

	& nory-game {
		& game-header {
			display: flex;
			justify-content: space-between;

			position: absolute;
			top: 1rem;
			left: 2rem;
			right: 2rem;

			font-size: 0;
			z-index: var(--nory-game-strata-overlay);

			& controls,
			& score {
				display: grid;
				align-items: center;
				position: relative;
				z-index: var(--nory-game-strata-overlay);
			}

			& controls {
				grid-template-columns: repeat(4, max-content);

				& play,
				& pause,
				& reset,
				& share {
					width: var(--nory-game-control-button-width, 0);
					height: var(--nory-game-control-button-height, 0);
					display: block;
					font-size: var(--nory-fs-base, inherit);
					background-color: var(--nory-clr-green, transparent);
					background-position: center;
					background-repeat: no-repeat;
					border-radius: 0;
					background-size: 60%;
					cursor: pointer;

					transition: max-width 1s ease-in-out,
						margin-left 1s ease-in-out,
						border-radius 250ms ease-in-out,
						background-size 250ms ease-in-out;

					max-width: var(--nory-game-control-button-width, 0);

					&[off] {
						background-size: 0%;
						border-radius: 0%;
						max-width: 0px;
					}
				}

				& pause,
				& reset,
				& share {
					&:not([off]) {
						margin-left: 10px;
					}
				}

				& play {
					background-image: url("/assets/play.svg");
				}

				& pause {
					background-image: url("/assets/pause.svg");
				}

				& reset {
					background-image: url("/assets/reset.svg");
				}

				& share {
					background-position-x: 40%;
					background-image: url("/assets/share.svg");
				}
			}

			& score {
				grid-template-columns: 1fr max-content 1fr max-content 1fr;
				gap: 10px;

				& current,
				& target,
				& total,
				& separator {
					display: block;
					font-size: var(--nory-fs-score, inherit);
				}
			}

			& alert {
				position: absolute;
				inset: 0;
				z-index: var(--nory-game-strata-default);

				display: grid;
				grid-template-rows: 100% max-content;
				gap: 10px;
				align-items: center;
				text-align: center;
				margin-inline: auto;

				font-size: var(--nory-fs-score, inherit);

				opacity: 1;
				transition: opacity 1s ease-in-out;

				&[empty] {
					opacity: 0;
				}

				& upper,
				& lower {
					display: block;
				}
			}
		}

		& board {
			display: block;
			position: absolute;
			inset: 0;
			margin: 2rem;
			margin-top: calc(2rem + var(--nory-game-control-button-height, 0));
			z-index: var(--nory-game-strata-board);

			& dot {
				display: block;
				position: absolute;
				top: 100px;
				left: 100px;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: var(--nory-clr-purple, transparent);
				cursor: pointer;
			}
		}

		& scoreboard {
			position: absolute;
			inset: calc(2em + var(--nory-game-control-button-height)) 0 2em auto;
			z-index: var(--nory-game-strata-tooltip);

			display: grid;
			grid-template-columns: max-content 1fr;

			& input {
				display: none;
			}

			& input:checked ~ label {
				scale: -1 1;
			}

			& input:checked ~ scoreboard-box {
				padding: 1rem;
				padding-top: 0.7rem;
				max-width: 100vw;
				opacity: 1;
			}

			& label {
				width: calc(var(--nory-game-control-button-width, 0) - 14px);
				height: var(--nory-game-control-button-height, 0);
				display: block;
				font-size: var(--nory-fs-base, inherit);
				background-color: var(--nory-clr-purple, transparent);
				background-position: center;
				background-repeat: no-repeat;
				border-radius: 0;
				background-size: 60%;
				cursor: pointer;
				background-image: url("/assets/open.svg");
			}

			& scoreboard-box {
				box-sizing: border-box;

				font-size: 0;
				opacity: 0;
				max-width: 0;
				background-color: var(--nory-clr-purple, transparent);

				display: grid;
				grid-template-rows: max-content 1fr max-content;

				max-height: calc(
					100vh - calc(4rem + var(--nory-game-control-button-height))
				);

				& * {
					display: block;
				}

				& scoreboard-header,
				& level,
				& time,
				& score,
				& average {
					font-size: var(--nory-fs-base);
				}

				& scoreboard-detail,
				& scoreboard-footer {
					display: grid;
				}

				& scoreboard-detail {
					grid-auto-rows: max-content;
					row-gap: 4px;

					margin-block: 1rem;
					margin-right: -1rem;
					padding-right: 8px;

					overflow-y: scroll;
					scrollbar-width: thin;

					& stage {
						display: flex;
						justify-content: space-between;

						& level,
						& time {
							/* flex: 0 1 0; */
						}
					}
				}

				& scoreboard-footer {
					& total {
						display: flex;
						justify-content: space-between;

						& score,
						& average {
							/* flex: 0 1 0; */
						}
					}
				}
			}
		}

		& game-header score,
		& board,
		& scoreboard {
			opacity: 0;

			&[on] {
				opacity: 1;
			}

			&:not([on]) {
				user-select: none;
				-webkit-user-select: none;
				pointer-events: none;
			}
		}

		&[disabled] {
			& controls,
			& score,
			& board {
				display: none;
			}
		}

		@media screen and (max-width: 767px) {
			& game-header {
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 1fr;
				row-gap: 10px;
				grid-template-areas:
					"score controls"
					"alert alert";

				& alert,
				& score {
					font-size: var(--nory-fs-score-small);

					& current,
					& target,
					& total,
					& separator {
						font-size: var(--nory-fs-score-small);
					}
				}

				& alert {
					position: static;
					grid-area: alert;
					grid-template-rows: 1fr;
					gap: 0;
				}

				& score {
					grid-area: score;
					grid-template-columns: repeat(5, 1fr);
					text-align: center;
				}

				& controls {
					grid-area: controls;
					text-align: right;
					margin-left: auto;
				}
			}

			& board {
				margin-top: 7em;
			}
		}
	}

	& #site-tagline {
		opacity: 0;
	}

	& kitsune-letter,
	& kitsune-separator {
		display: inline-block;
		box-sizing: border-box;
	}

	& kitsune-letter {
		opacity: 0;
	}

	& kitsune-separator {
		width: 1em;
		height: 1em;
	}
}