/*
Copyright © 2026 [Tên của bạn]. All rights reserved.
Bạn có thể sử dụng, chỉnh sửa, chia sẻ mã nguồn này cho mục đích cá nhân hoặc học tập.
Không được sử dụng cho mục đích thương mại khi chưa có sự đồng ý của tác giả.
*/

/* 自定义滚动条样式 */
::-webkit-scrollbar {
	/* 选择整体滚动条 */
	width: 0px; /* 设置滚动条的宽度 */
}

::-webkit-scrollbar-track {
	/* 选择滚动条背景 */
	background: #f1f1f1; /* 设置滚动条背景颜色 */
}

::-webkit-scrollbar-thumb {
	/* 选择滚动条手柄 */
	background: #888; /* 设置滚动条手柄的颜色 */
}

::-webkit-scrollbar-thumb:hover {
	/* 鼠标悬停时选择滚动条手柄 */
	background: #555; /* 设置鼠标悬停时滚动条手柄的颜色 */
}

* {
	position: relative;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

html {
	background-color: #000;
}

body {
	overflow: hidden;
	color: rgba(255, 255, 255, 0.5);
	font-family: "Russo One", arial, sans-serif;
	line-height: 1.25;
	letter-spacing: 0.06em;
}

.hide {
	opacity: 0;
	visibility: hidden;
}

.remove {
	display: none !important;
}

.blur {
	filter: blur(12px);
}

.container {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-init {
	width: 100%;
	align-self: center;
	text-align: center;
	text-transform: uppercase;
}
.loading-init__header {
	font-size: 2.2em;
}
.loading-init__status {
	margin-top: 1em;
	font-size: 0.8em;
	opacity: 0.75;
}

.stage-container {
	overflow: hidden;
	box-sizing: initial;
	border: 1px solid #222;
	margin: -1px;
}
@media (max-width: 840px) {
	.stage-container {
		border: none;
		margin: 0;
	}
}

.canvas-container {
	width: 100%;
	height: 100%;
	transition: filter 0.3s;
}
.canvas-container canvas {
	position: absolute;
	mix-blend-mode: lighten;
	transform: translateZ(0);
}

.controls {
	display: none !important; /* Ẩn toàn bộ controls */
}
@media (min-width: 840px) {
	.controls {
		visibility: visible;
	}
	.controls.hide:hover {
		opacity: 1;
	}
}

.menu {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.42);
	transition: opacity 0.3s, visibility 0.3s;
}
.menu__inner-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: opacity 0.3s;
}
.menu__header {
	margin-top: 5px;
	margin-bottom: 8px;
	font-size: 2em;
	text-transform: uppercase;
}
.menu__subheader {
	margin-bottom: 5px;
	font-size: 0.86em;
	opacity: 0.8;
}
.menu form {
	width: 100%;
	max-width: 400px;
	padding: 0 10px;
	margin-right: 80px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.menu .form-option {
	display: flex;
	align-items: center;
	margin: 16px 0;
	transition: opacity 0.3s;
}
.menu .form-option label {
	display: block;
	width: 50%;
	padding-right: 12px;
	text-align: right;
	text-transform: uppercase;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.menu .form-option--select select {
	display: block;
	width: 50%;
	height: 30px;
	font-size: 1rem;
	font-family: "Russo One", arial, sans-serif;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.06em;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.menu .form-option--select select option {
	background-color: black;
}
.menu .form-option--checkbox input {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0;
	opacity: 0.5;
}
@media (max-width: 840px) {
	.menu .form-option select,
	.menu .form-option input {
		outline: none;
	}
}

.close-menu-btn {
	position: absolute;
	top: 0;
	right: 0;
}
/*This project is copyrighted by NianBroken!*/
.btn {
	opacity: 0.16;
	width: 50px;
	height: 50px;
	display: flex;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	transition: opacity 0.3s;
}
.btn--bright {
	opacity: 0.5;
}
@media (min-width: 840px) {
	.btn:hover {
		opacity: 0.32;
	}
	.btn--bright:hover {
		opacity: 0.75;
	}
}
.btn svg {
	display: block;
	margin: auto;
}

.credits {
	margin-top: auto;
	margin-bottom: 10px;
	padding-top: 6px;
	font-size: 0.8em;
	opacity: 0.75;
	text-align: center;
}
.credits a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}
.credits a:hover,
.credits a:active {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: underline;
}

.help-modal {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	visibility: hidden;
	transition-property: visibility;
	transition-duration: 0.25s;
}
.help-modal__overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease-in;
	transition-duration: 0.25s;
}
/*This project is copyrighted by NianBroken!*/
.help-modal__dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 400px;
	max-height: calc(100vh - 100px);
	margin: 10px;
	padding: 20px;
	border-radius: 0.3em;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: scale(0.9, 0.9);
	transition-property: opacity, transform;
	transition-timing-function: ease-in;
	transition-duration: 0.25s;
}
@media (min-width: 840px) {
	.help-modal__dialog {
		font-size: 1.25rem;
		max-width: 500px;
	}
}
.help-modal__header {
	font-size: 1.75em;
	text-transform: uppercase;
	text-align: center;
}
.help-modal__body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1em 0;
	padding: 1em 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}
.help-modal__close-btn {
	flex-shrink: 0;
	outline: none;
	border: none;
	border-radius: 2px;
	padding: 0.25em 0.75em;
	margin-top: 0.36em;
	font-family: "Russo One", arial, sans-serif;
	font-size: 1em;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: rgba(255, 255, 255, 0.25);
	transition: color 0.3s, ound-color 0.3s;
}
.help-modal__close-btn:hover,
.help-modal__close-btn:active,
.help-modal__close-btn:focus {
	color: #fff;
	background-color: #09f;
}
.help-modal.active {
	visibility: visible;
	transition-duration: 0.4s;
}
.help-modal.active .help-modal__overlay {
	opacity: 1;
	transition-timing-function: ease-out;
	transition-duration: 0.4s;
}
.help-modal.active .help-modal__dialog {
	opacity: 1;
	transform: scale(1, 1);
	transition-timing-function: ease-out;
	transition-duration: 0.4s;
}

/* Trang chào mừng */
.welcome-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, black, #222);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 1s ease-out;
}

.welcome-screen.fade-out {
	opacity: 0;
	pointer-events: none;
}

.year-transition {
	margin-bottom: 60px;
}

.year {
	font-size: 12rem;
	font-weight: bold;
	color: #fff;
	text-shadow: 
		0 0 20px #fff,
		0 0 40px #fff,
		0 0 60px #ffd700,
		0 0 80px #ffd700;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.old-year {
	animation: fadeOutYear 3s ease-in-out forwards;
}

.new-year {
	opacity: 0;
	animation: fadeInYear 3s ease-in-out 3s forwards, glow 2s ease-in-out 6s infinite alternate;
}

.start-btn {
	padding: 20px 60px;
	font-size: 1.8rem;
	font-family: "Russo One", arial, sans-serif;
	background: linear-gradient(45deg, #ff00de, #ffd700);
	color: #fff;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
	transition: transform 0.3s, box-shadow 0.3s;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0;
	animation: fadeInBtn 1s ease-in-out 6.5s forwards;
}

.start-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
}

@keyframes fadeOutYear {
	0% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(-50%) scale(0.5);
	}
}

@keyframes fadeInYear {
	0% {
		opacity: 0;
		transform: translateX(-50%) scale(1.5);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}
}

@keyframes glow {
	from {
		text-shadow: 
			0 0 20px #fff,
			0 0 40px #ffd700,
			0 0 60px #ffd700;
	}
	to {
		text-shadow: 
			0 0 30px #fff,
			0 0 60px #ffd700,
			0 0 90px #ffd700,
			0 0 120px #ffd700;
	}
}

@keyframes fadeInBtn {
	to {
		opacity: 1;
	}
}

/* Ảnh nền động */
.background-image {
	position: absolute;
	top: 0; /* Toàn màn hình từ trên xuống */
	left: 0;
	width: 100%;
	height: 100vh; /* Toàn màn hình */
	background-size: cover; /* Tự động scale theo chiều phù hợp nhất */
	background-repeat: no-repeat;
	background-position: center bottom; /* Căn giữa ngang, lấy phần dưới ảnh */
	opacity: 0.15;
	z-index: 1;
	pointer-events: none;
	/* Filter đen trắng và làm mờ */
	filter: grayscale(100%) blur(1px) brightness(0.7);
	transition: background-image 1s ease-in-out;
	/* Nếu ảnh quá rộng thì cắt bớt */
	overflow: hidden;
}

/* Lời chúc */
.greeting-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3rem;
	color: #fff;
	text-shadow: 
		0 0 10px #000,
		0 0 20px #000,
		0 0 30px #ffd700;
	text-align: center;
	z-index: 100;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	pointer-events: none;
	padding: 0 20px;
	font-weight: bold;
}

.greeting-text.show {
	opacity: 1;
}

/* Nút nhạc nền */
.music-btn {
	position: relative;
}

.music-btn::before {
	content: '♫';
	position: absolute;
	top: -5px;
	right: -5px;
	font-size: 12px;
	color: #ffd700;
	animation: musicNote 2s ease-in-out infinite;
}

@keyframes musicNote {
	0%, 100% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(-10px);
		opacity: 0.5;
	}
}

/* Ẩn nút cài đặt mặc định */
.settings-btn {
	display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
	.year {
		font-size: 6rem;
	}
	
	.start-btn {
		padding: 15px 40px;
		font-size: 1.3rem;
	}
	
	.greeting-text {
		font-size: 2rem;
	}
}

@media (max-width: 480px) {
	.year {
		font-size: 4rem;
	}
	
	.start-btn {
		padding: 12px 30px;
		font-size: 1rem;
	}
	
	.greeting-text {
		font-size: 1.3rem;
	}
	
	.canvas-container {
		width: 100vw !important;
		height: 100vh !important;
	}
}