/*
Copyright © 2022 Caleb Miller
  CodePen: https://codepen.io/MillerTime/pen/XgpNwb

Modifications Copyright © 2024 NianBroken (https://github.com/NianBroken/Firework_Simulator)
Modifications Copyright © 2025 gamesushi

GitHub: https://github.com/gamesushi

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/


/* 自定义滚动条样式 */
::-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 {
	position: absolute;
	top: 0;
	width: 100%;
	padding-bottom: 50px;
	display: flex;
	justify-content: space-between;
	transition: opacity 0.3s, visibility 0.3s;
}

@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-y: auto;
	overflow-x: hidden;
	-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;
}

.menu .form-option--range input {
	display: block;
	width: 38%;
	height: 30px;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.word-shell-value {
	display: block;
	width: 12%;
	min-width: 44px;
	padding-left: 10px;
	text-align: left;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.7);
}

.word-shell-submenu,
.clock-mode-submenu {
	width: 100%;
	padding: 10px;
	margin-bottom: 16px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.word-shell-submenu.hide,
.clock-mode-submenu.hide {
	display: none;
}

.word-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.word-item {
	display: flex;
	align-items: center;
	padding: 4px 8px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.8);
}

.word-item span {
	margin-right: 8px;
	cursor: pointer;
}

.word-item span:hover {
	color: #fff;
}

.word-item .delete-word {
	cursor: pointer;
	color: rgba(255, 255, 255, 0.4);
	font-size: 1.2rem;
	line-height: 1;
}

.word-item .delete-word:hover {
	color: #ff4d4d;
}

.word-actions {
	text-align: right;
}

.add-word-btn {
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	color: #fff;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s;
}

.add-word-btn:hover {
	background: rgba(255, 255, 255, 0.25);
}

.menu .form-option--range input::-webkit-slider-runnable-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	border: none;
}

.menu .form-option--range input::-webkit-slider-thumb {
	height: 16px;
	width: 16px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -6px;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
	transition: transform 0.2s, background-color 0.2s;
}

.menu .form-option--range input:active::-webkit-slider-thumb {
	transform: scale(1.1);
	background: #fff;
}

.menu .form-option--range input::-moz-range-track {
	width: 100%;
	height: 4px;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
}

.menu .form-option--range input::-moz-range-thumb {
	height: 16px;
	width: 16px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	border: none;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

@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 Caleb Miller!*/
.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: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 1000;
	visibility: hidden;
	transition-property: visibility;
	transition-duration: 0.25s;
}

.help-modal__overlay {
	display: none;
}

/*This project is copyrighted by Caleb Miller!*/
.help-modal__dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: max-content;
	max-width: 280px;
	padding: 12px 16px;
	border-radius: 8px;
	background-color: rgba(20, 20, 20, 0.9);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translateY(10px);
	transition-property: opacity, transform;
	transition-timing-function: ease-out;
	transition-duration: 0.2s;
}

@media (min-width: 840px) {
	.help-modal__dialog {
		font-size: 1.25rem;
		max-width: 500px;
	}
}

.help-modal__header {
	font-size: 1em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
}

.help-modal__body {
	margin: 0.5em 0;
	padding: 0.5em 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.85em;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

.help-modal__close-btn {
	display: none;
}

.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;
}

/* Custom Dialog */
.custom-dialog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
}

.custom-dialog.active {
	display: flex;
}

.custom-dialog__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
}

.custom-dialog__box {
	position: relative;
	background: rgba(20, 20, 20, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	padding: 24px;
	min-width: 320px;
	max-width: 90%;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

.custom-dialog__header {
	font-size: 1.1em;
	color: #fff;
	margin-bottom: 16px;
	text-align: center;
}

.custom-dialog__input {
	width: 100%;
	padding: 8px 12px;
	font-size: 1rem;
	font-family: inherit;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	margin-bottom: 16px;
	outline: none;
}

.custom-dialog__input:focus {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.15);
}

.custom-dialog__buttons {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

.custom-dialog__btn {
	padding: 8px 20px;
	font-family: inherit;
	font-size: 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}

.custom-dialog__btn--cancel {
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
}

.custom-dialog__btn--cancel:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.custom-dialog__btn--confirm {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.custom-dialog__btn--confirm:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Submenu Arrow Indicators */
.word-shell-label::before,
.picture-shell-label::before,
.clock-mode-label::before,
.background-settings-label::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid currentColor;
	margin-right: 8px;
	transition: transform 0.2s ease;
	margin-bottom: 2px;
	/* Visual adjustment to align with text */
}

.submenu-open.word-shell-label::before,
.submenu-open.picture-shell-label::before,
.submenu-open.clock-mode-label::before,
.submenu-open.background-settings-label::before {
	transform: rotate(90deg);
}

.word-shell-submenu.hide,
.picture-shell-submenu.hide,
.clock-mode-submenu.hide,
.background-settings-submenu.hide {
	display: none;
}