:root {
	--page-background: #ffe1ea;
	--page-background-deep: #f9bfce;
	--surface: rgb(255 255 255 / 78%);
	--surface-border: rgb(255 255 255 / 82%);
	--ink: #692a43;
	--accent: #df4c52;
	--accent-dark: #a92c60;
	--button-background: #78d9d1;
	--button-shadow: #39aaa9;
	--button-text: #b72995;
	--corner-panel: clamp(0.45rem, 1.5vw, 0.75rem);
	--corner-control: 0.65rem;
	--corner-small: 0.35rem;
}

* {
	box-sizing: border-box;
}

html {
	touch-action: manipulation;
}

body {
	min-width: 20rem;
	min-height: 100svh;
	margin: 0;
	padding: 0;
	display: grid;
	align-items: center;
	color: var(--ink);
	background:
		radial-gradient(circle at 18% 12%, rgb(255 255 255 / 70%) 0 0.4rem, transparent 0.45rem),
		radial-gradient(circle at 86% 22%, rgb(255 255 255 / 54%) 0 0.3rem, transparent 0.35rem),
		linear-gradient(145deg, var(--page-background), var(--page-background-deep));
	font-family: "Yusei Magic", "Noto Sans JP", sans-serif;
	text-align: center;
}

.page-shell {
	width: min(100%, 44rem);
	margin: 0 auto;
	padding: clamp(1.5rem, 5vw, 3rem);
	display: grid;
	justify-items: center;
	gap: clamp(1rem, 2.8vw, 1.5rem);
	background: var(--surface);
	border: 1px solid var(--surface-border);
	border-radius: var(--corner-panel);
	box-shadow: 0 1.25rem 3.75rem rgb(120 51 80 / 20%);
	backdrop-filter: blur(0.5rem);
}

.hero {
	display: grid;
	justify-items: center;
	gap: 0.9rem;
}

#icon {
	width: clamp(4.5rem, 14vw, 6.25rem);
	aspect-ratio: 1;
	object-fit: cover;
	border: 0.25rem solid white;
	border-radius: 0.85rem;
	box-shadow: 0 0.5rem 1.1rem rgb(126 46 75 / 23%);
}

#toptext {
	margin: 0;
	color: var(--accent);
	font-family: "Noto Sans JP", "Yusei Magic", sans-serif;
	font-size: clamp(1.25rem, 3.6vw, 1.8rem);
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: 0.03em;
}

.uibiimu {
	font-family: "Yusei Magic", "Noto Sans JP", sans-serif;
}

#button {
	width: min(100%, 31rem);
	min-height: 3.5rem;
	padding: 0.55em 0.9em 0.65em;
	border: 0.2rem solid rgb(255 255 255 / 72%);
	border-radius: var(--corner-control);
	color: var(--button-text);
	background: var(--button-background);
	box-shadow: 0 0.45rem 0 var(--button-shadow), 0 0.8rem 1.5rem rgb(55 145 145 / 24%);
	font-size: clamp(2.1rem, 8vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

#button:hover {
	filter: saturate(1.08) brightness(1.03);
	transform: translateY(-0.12rem);
}

#button:active {
	transform: translateY(0.28rem);
	box-shadow: 0 0.18rem 0 var(--button-shadow), 0 0.45rem 0.9rem rgb(55 145 145 / 20%);
}

#button:focus-visible,
.share-link:focus-visible,
.audio-settings summary:focus-visible,
.audio-settings input:focus-visible,
.site-footer a:focus-visible {
	outline: 0.2rem solid #57235f;
	outline-offset: 0.22rem;
}

#pushcount {
	width: min(100%, 31rem);
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid rgb(223 76 82 / 16%);
	border-radius: var(--corner-small);
	background: rgb(255 255 255 / 64%);
	font-size: clamp(1rem, 3.5vw, 1.3rem);
	line-height: 1.6;
}

#all {
	display: inline-block;
	margin-top: 0.1rem;
	color: var(--accent);
	font-family: "Pacifico", cursive;
	font-size: clamp(2rem, 7vw, 3.2rem);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.share-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.8rem;
	border: 1px solid rgb(105 42 67 / 16%);
	border-radius: var(--corner-small);
	color: inherit;
	background: rgb(255 255 255 / 48%);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 140ms ease, transform 140ms ease;
}

.share-link:hover {
	background: rgb(255 255 255 / 86%);
	transform: translateY(-0.08rem);
}

.share-link img {
	width: 1.25rem;
	height: 1.25rem;
}

.audio-settings {
	width: min(100%, 31rem);
	border: 1px solid rgb(105 42 67 / 16%);
	border-radius: var(--corner-small);
	background: rgb(255 255 255 / 42%);
	overflow: hidden;
}

.audio-settings summary {
	padding: 0.8rem 1rem;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	user-select: none;
}

.audio-settings[open] summary {
	border-bottom: 1px solid rgb(105 42 67 / 14%);
}

.audio-settings-content {
	padding: 0.9rem 1rem 1rem;
}

.audio-settings-list {
	display: grid;
	justify-content: center;
	gap: 0.7rem;
	text-align: left;
}

.audio-settings label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	cursor: pointer;
	font-size: 1rem;
}

.audio-settings input {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--accent-dark);
}

.site-footer {
	color: #7f5570;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.78rem;
	line-height: 1.8;
}

.site-footer small {
	font-size: inherit;
}

.site-footer a {
	color: #8f2c6c;
}

@media (max-width: 30rem) {
	body {
		padding: 0.75rem;
	}

	.page-shell {
		padding: 1.5rem 1rem;
		border-radius: 0.45rem;
	}

	#button {
		font-size: clamp(2rem, 13vw, 3rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}