* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	/* Space Background Colors */
	--space-dark: #080836;
	--space-mid: #0A0A24;
	--space-light: #0C1036;

	/* Neon Colors */
	--neon-yellow: #FFE644;
	--neon-pink: #FF6B9E;
	--neon-cyan: #64F0F0;
	--neon-purple: #8A64F0;
	--neon-c-blue: #6ff2f2;

	/* UI Colors */
	--ui-dark: #0A0A20;
	--ui-darker: #000011;

	/* Pixel Game Font */
	--pixel-font: 'Press Start 2P', monospace;
}

body {
	font-family: Arial, sans-serif;
	background: linear-gradient(135deg, var(--space-dark) 0%, var(--space-mid) 50%, var(--space-light) 100%);
	color: white;
	overflow-x: hidden;
	min-height: 100vh;
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20"><rect x="4" y="0" width="2" height="2" fill="black"/><rect x="2" y="2" width="2" height="2" fill="black"/><rect x="4" y="2" width="2" height="2" fill="white"/><rect x="6" y="2" width="2" height="2" fill="black"/><rect x="2" y="4" width="2" height="2" fill="black"/><rect x="4" y="4" width="2" height="2" fill="white"/><rect x="6" y="4" width="2" height="2" fill="white"/><rect x="8" y="4" width="2" height="2" fill="black"/><rect x="2" y="6" width="2" height="2" fill="black"/><rect x="4" y="6" width="2" height="2" fill="white"/><rect x="6" y="6" width="2" height="2" fill="white"/><rect x="8" y="6" width="2" height="2" fill="white"/><rect x="10" y="6" width="2" height="2" fill="black"/><rect x="2" y="8" width="2" height="2" fill="black"/><rect x="4" y="8" width="2" height="2" fill="white"/><rect x="6" y="8" width="2" height="2" fill="white"/><rect x="8" y="8" width="2" height="2" fill="white"/><rect x="10" y="8" width="2" height="2" fill="black"/><rect x="2" y="10" width="2" height="2" fill="black"/><rect x="4" y="10" width="2" height="2" fill="white"/><rect x="6" y="10" width="2" height="2" fill="white"/><rect x="8" y="10" width="2" height="2" fill="white"/><rect x="10" y="10" width="2" height="2" fill="black"/><rect x="2" y="12" width="2" height="2" fill="black"/><rect x="4" y="12" width="2" height="2" fill="white"/><rect x="6" y="12" width="2" height="2" fill="white"/><rect x="8" y="12" width="2" height="2" fill="black"/><rect x="0" y="14" width="2" height="2" fill="black"/><rect x="2" y="14" width="2" height="2" fill="white"/><rect x="4" y="14" width="2" height="2" fill="white"/><rect x="6" y="14" width="2" height="2" fill="black"/><rect x="0" y="16" width="2" height="2" fill="black"/><rect x="2" y="16" width="2" height="2" fill="white"/><rect x="4" y="16" width="2" height="2" fill="black"/><rect x="0" y="18" width="2" height="2" fill="black"/><rect x="2" y="18" width="2" height="2" fill="black"/></svg>') 8 0, auto;
}

#pixel-modalText {
	font-family: var(--pixel-font);
}

#pixel-modalText * {
	font-family: var(--pixel-font);
}

/* Space Stars Background */
.stars-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

.star {
	position: absolute;
	background: white;
	animation: twinkle 2s infinite alternate;
}

.star.small {
	width: 3px;
	height: 3px;
}

.star.medium {
	width: 4px;
	height: 4px;
}

.star.large {
	width: 5px;
	height: 5px;
}

@keyframes twinkle {
	0% {
		opacity: 0.3;
	}

	100% {
		opacity: 1;
	}
}

/* Background Decoration Elements */
.bg-decorations {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.bg-toy {
	position: absolute;
	opacity: 0.3;
}

/* Pixel Blind Box */
.pixel-box {
	width: 24px;
	height: 24px;
	position: relative;
}

.box-border {
	width: 100%;
	height: 100%;
	background: var(--ui-dark);
	border: 1px solid;
}

.box-dog {
	border-color: var(--neon-purple);
}

.box-cat {
	border-color: var(--neon-cyan);
}

.box-rabbit {
	border-color: var(--neon-yellow);
}

.box-robot {
	border-color: var(--neon-cyan);
}

/* Dog Character */
.dog-char {
	position: absolute;
	top: 4px;
	left: 5px;
	width: 12px;
	height: 9px;
	background: var(--neon-purple);
}

.dog-char::before,
.dog-char::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 4px;
	background: var(--neon-purple);
	top: -5px;
}

.dog-char::before {
	left: -1px;
}

.dog-char::after {
	right: -1px;
}

/* Cat Character */
.cat-char {
	position: absolute;
	top: 6px;
	left: 5px;
	width: 12px;
	height: 9px;
	background: var(--neon-cyan);
}

.cat-char::before,
.cat-char::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 5px;
	background: var(--neon-cyan);
	top: -6px;
}

.cat-char::before {
	left: 2px;
}

.cat-char::after {
	right: 2px;
}

/* Rabbit Character */
.rabbit-char {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 10px;
	height: 8px;
	background: var(--neon-yellow);
}

.rabbit-char::before,
.rabbit-char::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 8px;
	background: var(--neon-yellow);
	top: -10px;
}

.rabbit-char::before {
	left: 1px;
}

.rabbit-char::after {
	right: 1px;
}

/* Robot Character */
.robot-char {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 12px;
	height: 11px;
	background: var(--neon-cyan);
}

.robot-char::before {
	content: '';
	position: absolute;
	width: 1px;
	height: 3px;
	background: var(--neon-cyan);
	top: -4px;
	left: 5px;
}

.robot-char::after {
	content: '';
	position: absolute;
	width: 5px;
	height: 1px;
	background: var(--neon-yellow);
	top: -5px;
	left: 3px;
}

/* Small Toys */
.small-toy {
	width: 16px;
	height: 16px;
	position: relative;
}

/* Dino */
.dino-toy {
	background: #64F064;
	position: relative;
}

.dino-toy::before {
	content: '';
	position: absolute;
	width: 5px;
	height: 8px;
	background: #64F064;
	left: -4px;
	top: 1px;
}

.dino-toy::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 3px;
	background: #64F064;
	top: -4px;
	left: 3px;
}

/* Ghost */
.ghost-toy {
	background: white;
	border-radius: 50% 50% 0 0;
	position: relative;
}

.ghost-toy::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, white 0%, white 25%, transparent 25%, transparent 50%, white 50%, white 75%, transparent 75%);
}

/* Mushroom */
.mushroom-toy {
	background: var(--neon-pink);
	border-radius: 50% 50% 20% 20%;
	position: relative;
}

.mushroom-toy::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 5px;
	width: 6px;
	height: 8px;
	background: var(--neon-yellow);
}

/* Rocket */
.rocket-toy {
	background: #64A0F0;
	position: relative;
	clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);
	border: 1px solid var(--neon-cyan);
	box-shadow: 0 0 8px var(--neon-cyan);
}

/* Mystery Box */
.mystery-box {
	width: 20px;
	height: 20px;
	background: var(--ui-dark);
	border: 1px solid var(--neon-yellow);
	position: relative;
}

.mystery-box::before {
	content: '?';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--neon-yellow);
	font-family: var(--pixel-font);
	font-size: 10px;
}

/* Flying Decorations */
.flying-decor {
	width: 14px;
	height: 8px;
	position: relative;
}

/* Bird */
.bird-toy {
	background: var(--neon-yellow);
	position: relative;
}

.bird-toy::before,
.bird-toy::after {
	content: '';
	position: absolute;
	width: 5px;
	height: 3px;
	background: var(--neon-yellow);
	top: 1px;
}

.bird-toy::before {
	left: -4px;
}

.bird-toy::after {
	right: -4px;
}

/* Heart */
.heart-toy {
	width: 12px;
	height: 12px;
	background: var(--neon-pink);
	position: relative;
}

.heart-toy::before,
.heart-toy::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	background: var(--neon-pink);
	border-radius: 50% 50% 0 0;
	top: -3px;
}

.heart-toy::before {
	left: -1px;
}

.heart-toy::after {
	right: -1px;
}

/* Diamond */
.diamond-toy {
	width: 12px;
	height: 12px;
	background: var(--neon-purple);
	transform: rotate(45deg);
	position: relative;
}

/* Animation Effects */
.float-anim {
	animation: float-gentle 4s ease-in-out infinite;
}

.bounce-anim {
	animation: bounce-gentle 3s ease-in-out infinite;
}

.rotate-anim {
	animation: rotate-slow 6s linear infinite;
}

.pulse-anim {
	animation: pulse-gentle 2s ease-in-out infinite;
}

@keyframes float-gentle {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}
}

@keyframes bounce-gentle {

	0%,
	100% {
		transform: translateY(0px) scale(1);
	}

	50% {
		transform: translateY(-8px) scale(1.05);
	}
}

@keyframes rotate-slow {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes pulse-gentle {

	0%,
	100% {
		opacity: 0.3;
	}

	50% {
		opacity: 0.6;
	}
}

/* Mouse Trail Effect */
.cursor-trail {
	position: fixed;
	width: 16px;
	height: 16px;
	pointer-events: none;
	z-index: 9999;
	opacity: 0.8;
	transition: opacity 0.2s ease-out;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform, opacity;
}

/* Pixel Squares */
.trail-pixel {
	width: 8px;
	height: 8px;
	background: var(--trail-color);
}

/* Pixel Stars */
.trail-star {
	position: relative;
	width: 12px;
	height: 12px;
}

.trail-star::before {
	content: '';
	position: absolute;
	top: 4px;
	left: 0;
	width: 12px;
	height: 4px;
	background: var(--trail-color);
}

.trail-star::after {
	content: '';
	position: absolute;
	top: 0;
	left: 4px;
	width: 4px;
	height: 12px;
	background: var(--trail-color);
}

/* Pixel Diamonds */
.trail-diamond {
	width: 10px;
	height: 10px;
	background: var(--trail-color);
	transform: rotate(45deg);
}

/* Pixel Hearts */
.trail-heart {
	position: relative;
	width: 10px;
	height: 8px;
	background: var(--trail-color);
}

.trail-heart::before,
.trail-heart::after {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	background: var(--trail-color);
	top: -3px;
}

.trail-heart::before {
	left: -1px;
}

.trail-heart::after {
	right: -1px;
}

/* Pixel Lightning */
.trail-lightning {
	position: relative;
	width: 8px;
	height: 12px;
}

.trail-lightning::before {
	content: '';
	position: absolute;
	width: 4px;
	height: 6px;
	background: var(--trail-color);
	top: 0;
	right: 0;
}

.trail-lightning::after {
	content: '';
	position: absolute;
	width: 4px;
	height: 6px;
	background: var(--trail-color);
	bottom: 0;
	left: 0;
}

/* Emoji Trails */
.trail-emoji {
	font-size: 14px;
}

/* Click Confetti Effect */
.confetti {
	position: fixed;
	width: 8px;
	height: 8px;
	pointer-events: none;
	z-index: 10000;
}

.confetti-piece {
	position: absolute;
	width: 6px;
	height: 6px;
	animation: confetti-fall 1.5s ease-out forwards;
}

@keyframes confetti-fall {
	0% {
		transform: translateY(0) translateX(0) rotate(0deg);
		opacity: 1;
	}

	100% {
		transform: translateY(var(--dy, 100px)) translateX(var(--dx, 0px)) rotate(720deg);
		opacity: 0;
	}
}

/* Top Navigation */
.top-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(10, 10, 32, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 2px solid var(--neon-cyan);
	padding: 15px 30px;
	transition: all 0.3s ease;
}

.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
}

.logo {
	font-family: var(--pixel-font);
	font-size: 18px;
	color: var(--neon-yellow);
	text-shadow: 0 0 10px var(--neon-yellow);
	min-height: 25px;
	min-width: 200px;
}

.nav-links {
	display: flex;
	gap: 30px;
	list-style: none;
}

.nav-links a {
	color: white;
	text-decoration: none;
	font-size: 14px;
	padding: 8px 16px;
	border: 2px solid transparent;
	transition: all 0.3s ease;
}

.nav-links a:hover {
	border-color: var(--neon-cyan);
	color: var(--neon-cyan);
	box-shadow: 0 0 15px var(--neon-cyan);
	ba
}

.cta-buttons {
	display: flex;
	gap: 15px;
}

.btn-wallet,
.btn-enter {
	padding: 10px 20px;
	font-family: var(--pixel-font);
	font-size: 12px;
	border: 3px solid;
	background: var(--ui-dark);
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-wallet {
	display: flex;
	align-items: center;
	border-color: var(--neon-purple);
	color: var(--neon-purple);
}

.btn-wallet-text-1 {
	margin-right: 10px;
	font-size: 12px;
}

.btn-enter {
	display: flex;
	align-items: center;
	border-color: var(--neon-yellow);
	color: var(--neon-yellow);
	animation: pulse 2s infinite;
}

.btn-wallet:hover,
.btn-enter:hover {
	transform: scale(1.05);
	box-shadow: 0 0 20px currentColor;
}

@keyframes pulse {

	0%,
	100% {
		box-shadow: 0 0 5px var(--neon-yellow);
	}

	50% {
		box-shadow: 0 0 25px var(--neon-yellow);
	}
}

/* Main Content Area */
.main-content {
	margin-top: 80px;
	min-height: calc(100vh - 80px);
}

/* Level Progress Bar */
.level-progress {
	position: sticky;
	top: 80px;
	z-index: 999;
	background: rgba(10, 10, 32, 0.9);
	padding: 20px;
	text-align: center;
	border-bottom: 2px solid var(--neon-purple);
}

.progress-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	max-width: 1000px;
	margin: 0 auto;
}

.level-dot {
	width: 40px;
	height: 40px;
	border: 3px solid #333;
	background: var(--ui-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pixel-font);
	font-size: 12px;
	color: #666;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.level-dot.active {
	border-color: var(--neon-yellow);
	color: var(--neon-yellow);
	box-shadow: 0 0 20px var(--neon-yellow);
}

.level-dot.active2 {
	border-color: var(--neon-c-blue);
	color: var(--neon-c-blue);
	box-shadow: 0 0 20px var(--neon-c-blue);
}


.level-dot.completed {
	border-color: var(--neon-cyan);
	color: var(--neon-cyan);
	background: rgba(100, 240, 240, 0.2);
}

/* Path Selector Styles */
.path-selector {
	width: 50px;
	height: 50px;
	border: 3px solid var(--neon-purple);
	background: var(--ui-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--neon-purple);
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	border-radius: 8px;
}

.path-selector:hover {
	transform: scale(1.1);
	box-shadow: 0 0 25px var(--neon-purple);
	border-color: var(--neon-pink);
	color: var(--neon-pink);
}

/* Path Selection Cards */
.path-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(138, 100, 240, 0.3);
}

.path-card[data-path="player"]:hover {
	box-shadow: 0 10px 30px rgba(100, 240, 240, 0.3);
}

.path-card[data-path="investor"]:hover {
	box-shadow: 0 10px 30px rgba(255, 230, 68, 0.3);
}

.path-card[data-path="team"]:hover {
	box-shadow: 0 10px 30px rgba(255, 107, 158, 0.3);
}

/* Path Content Areas */
.path-content {
	display: none;
	margin-top: 40px;
}

.path-content.active {
	display: block;
	animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.progress-line {
	width: 50px;
	height: 3px;
	background: #333;
	position: relative;
}

.progress-line.active {
	background: var(--neon-cyan);
	box-shadow: 0 0 10px var(--neon-cyan);
}

/* Level Container */
.level-container {
	min-height: 100vh;
	padding: 60px 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.level-content {
	max-width: 1200px;
	width: 100%;
	text-align: center;
}

/* Level Titles */
.level-title {
	font-family: var(--pixel-font);
	font-size: 48px;
	margin-bottom: 30px;
	background: linear-gradient(45deg, var(--neon-yellow), var(--neon-pink), var(--neon-cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: glow-text 3s ease-in-out infinite alternate;
}

@keyframes glow-text {
	0% {
		filter: drop-shadow(0 0 5px var(--neon-yellow));
	}

	100% {
		filter: drop-shadow(0 0 25px var(--neon-pink));
	}
}

.level-subtitle {
	font-size: 24px;
	color: var(--neon-cyan);
	margin-bottom: 50px;
}

/* Feature Cards */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 30px;
	margin: 60px 0;
}

.feature-card {
	background: var(--ui-dark);
	border: 4px solid var(--neon-purple);
	padding: 40px 30px;
	position: relative;
	transition: all 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(138, 100, 240, 0.3);
}

.feature-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 30px;
	background: var(--neon-purple);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-card h3 {
	font-family: var(--pixel-font);
	font-size: 20px;
	color: var(--neon-purple);
	margin-bottom: 20px;
}

.feature-card p {
	line-height: 1.6;
	color: #ccc;
}

/* Pixel Characters */
.pixel-character {
	width: 120px;
	height: 120px;
	margin: 0 auto 30px;
	position: relative;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-20px);
	}
}

.char-body {
	width: 80px;
	height: 80px;
	background: var(--neon-pink);
	position: absolute;
	top: 20px;
	left: 20px;
}

.char-eyes {
	position: absolute;
	top: 35px;
	left: 35px;
}

.char-eye {
	width: 12px;
	height: 12px;
	background: white;
	display: inline-block;
	margin-right: 6px;
}

.char-mouth {
	width: 30px;
	height: 8px;
	background: var(--neon-yellow);
	position: absolute;
	top: 55px;
	left: 45px;
}

/* Game Interface Demo */
.game-demo {
	background: var(--ui-darker);
	padding: 30px;
	margin: 40px 0;
	position: relative;
}

/* .game-screen {
            background: linear-gradient(135deg, #001122, #002244);
            height: 400px;
            position: relative;
            border: 2px solid var(--neon-cyan);
            overflow: hidden;
        } */

.game-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background-image: url("../statics/2.png");
	background-repeat: no-repeat;
	background-size: contain;
	height: 640px;
	position: relative;
	overflow: hidden;
}

.game-screen .game-dogs {
	display: grid;
	grid-template-columns: 33% 33% 33%;
}

.game-screen .game-dogs img {
	height: 360px;
	margin: 120px 12px 20px 12px;
}

.game-screen .game-dogs img:hover {
	transform: scale(1.1);
}

.game-screen .game-button {
	margin-top: 54px;
	width: 100%;
}

.game-screen .game-button .game-button-text {
	font-family: var(--pixel-font);
	font-size: 12px;
	letter-spacing: 2px;
	color: #cbcb54;
	/* 设置文字颜色为白色 */
	text-shadow: 0 0 5px #cbcb54,
		0 0 10px #cbcb54,
		0 0 15px #cbcb54,
		0 0 20px #cbcb54,
		0 0 35px #cbcb54,
		0 0 40px #cbcb54,
		0 0 50px #cbcb54;
	animation: neonGlow 2s infinite alternate;
	/* 呼吸动画 */
}

@keyframes neonGlow {
	0% {
		text-shadow:
			0 0 5px #cbcb54,
			0 0 10px #cbcb54,
			0 0 20px #cbcb54,
			0 0 30px #cbcb54,
			0 0 40px #cbcb54,
			0 0 50px #cbcb54;
		opacity: 1;
	}

	100% {
		text-shadow:
			0 0 2.5px #fff,
			0 0 5px #fff,
			0 0 10px #cbcb54,
			0 0 15px #cbcb54,
			0 0 20px #cbcb54,
			0 0 25px #cbcb54,
			0 0 30px #cbcb54;
		opacity: 0.8;
	}
}


.game-ui {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	display: flex;
	justify-content: space-between;
	font-family: var(--pixel-font);
	font-size: 14px;
}

/* Team Member Cards */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin: 60px 0;
}

.team-card {
	background: var(--ui-dark);
	border: 4px solid var(--neon-yellow);
	padding: 30px;
	text-align: center;
	transition: all 0.3s ease;
}

.team-card:hover {
	border-color: var(--neon-pink);
	transform: translateY(-5px);
}

/* 
        ========================================
        📸 Team Avatar Replacement Guide
        ========================================
        
        🔄 How to Replace Avatars:
        
        1️⃣ Prepare pixel images (recommended 100x100 pixels)
        2️⃣ Place images in appropriate directory, e.g.: images/avatars/
        3️⃣ Modify the CSS below, uncomment and add image paths:
        
        .avatar-lumi {
            background-image: url('images/avatars/lumi-avatar.png');
            background-color: transparent; ← Optional: remove solid background
        }
        
        .avatar-michael {
            background-image: url('images/avatars/michael-avatar.png');
            background-color: transparent;
        }
        
        .avatar-lynn {
            background-image: url('images/avatars/lynn-avatar.png');
            background-color: transparent;
        }
        
        4️⃣ Remove placeholder icons (::before pseudo-elements)
        5️⃣ If needed, adjust border-color to match avatar colors
        
        ✨ Pixel images will automatically maintain sharp effects without browser smoothing
        ========================================
        */

.team-avatar {
	width: 160px;
	height: 160px;
	margin: 0 auto 1px auto;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	/* Keep pixel images sharp without smoothing */
}

.team-avatar img {
	width: 100%;
}

/* Default placeholder avatars - replace with real images later */
.avatar-lumi {
	/* background-color: var(--neon-purple); */
	border-color: var(--neon-purple);
	/* Replace later with: background-image: url('path/to/lumi-avatar.png'); */
}

.avatar-michael {
	/* background-color: var(--neon-cyan); */
	border-color: var(--neon-cyan);
	/* Replace later with: background-image: url('path/to/michael-avatar.png'); */
}

.avatar-lynn {
	/* background-color: var(--neon-yellow); */
	border-color: var(--neon-yellow);
	/* Replace later with: background-image: url('path/to/lynn-avatar.png'); */
}

/* Placeholder icons - delete these styles later */
.avatar-lumi::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	opacity: 0.6;
}

.avatar-michael::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	opacity: 0.6;
}

.avatar-lynn::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	opacity: 0.6;
}

/* Footer style */
.optimized-footer {
	background: var(--ui-darker);
	padding: 60px 30px 30px;
	border-top: 2px solid var(--neon-purple);
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -10px 30px rgba(138, 100, 240, 0.2);
}

.footer-content {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 50px;
}

.footer-section {
	background: var(--ui-dark);
	padding: 30px 25px;
	border-radius: 15px;
	border: 2px solid transparent;
	transition: all 0.3s ease;
	position: relative;
}

.footer-section:nth-child(1) {
	border-color: var(--neon-cyan);
}

.footer-section:nth-child(2) {
	border-color: var(--neon-pink);
}

.footer-section:nth-child(3) {
	border-color: var(--neon-yellow);
}

.footer-section:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(100, 240, 240, 0.3);
}

.footer-section:nth-child(1):hover {
	box-shadow: 0 10px 25px rgba(100, 240, 240, 0.3);
}

.footer-section:nth-child(2):hover {
	box-shadow: 0 10px 25px rgba(255, 107, 158, 0.3);
}

.footer-section:nth-child(3):hover {
	box-shadow: 0 10px 25px rgba(255, 230, 68, 0.3);
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
	gap: 15px;
}

.section-icon {
	font-size: 24px;
	padding: 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	animation: float-icon 3s ease-in-out infinite;
}

.footer-section:nth-child(1) .section-icon {
	background: rgba(100, 240, 240, 0.2);
}

.footer-section:nth-child(2) .section-icon {
	background: rgba(255, 107, 158, 0.2);
}

.footer-section:nth-child(3) .section-icon {
	background: rgba(255, 230, 68, 0.2);
}

.footer-section h3 {
	font-family: var(--pixel-font);
	font-size: 14px;
	margin: 0;
}

.footer-section:nth-child(1) h3 {
	color: var(--neon-cyan);
}

.footer-section:nth-child(2) h3 {
	color: var(--neon-pink);
}

.footer-section:nth-child(3) h3 {
	color: var(--neon-yellow);
}

.footer-section ul {
	list-style: none;
}

.footer-section li {
	margin-bottom: 15px;
}

.footer-section a {
	color: #ccc;
	text-decoration: none;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
}

.footer-section a:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateX(5px);
	color: white;
}

.footer-section:nth-child(1) a:hover {
	color: var(--neon-cyan);
	background: rgba(100, 240, 240, 0.1);
}

.footer-section:nth-child(2) a:hover {
	color: var(--neon-pink);
	background: rgba(255, 107, 158, 0.1);
}

.footer-section:nth-child(3) a:hover {
	color: var(--neon-yellow);
	background: rgba(255, 230, 68, 0.1);
}

.link-icon {
	display: flex;
	align-items: center;
	font-size: 16px;
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.link-icon img {
	width: 20px;
}

/* 优化后的版权信息 */
.copyright {
	text-align: center;
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid #333;
	color: #666;
	position: relative;
}

.copyright::before {
	/* content: '✨'; */
	position: absolute;
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 20px;
	color: var(--neon-purple);
}

.copyright p {
	margin-bottom: 8px;
}

.copyright-links {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 15px;
	flex-wrap: wrap;
}

.copyright-links a {
	color: #888;
	text-decoration: none;
	font-size: 12px;
	transition: color 0.3s ease;
}

.copyright-links a:hover {
	color: var(--neon-cyan);
}

@keyframes float-icon {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-3px);
	}
}

.footer-section:nth-child(2) .section-icon {
	animation-delay: 1s;
}

.footer-section:nth-child(3) .section-icon {
	animation-delay: 2s;
}

/* Responsive Design */
@media (max-width: 768px) {
	.nav-links {
		display: none;
	}

	.level-title {
		font-size: 32px;
	}

	.footer-content {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.section-header {
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}

	.footer-section a {
		justify-content: center;
	}

	.copyright-links {
		flex-direction: column;
		gap: 10px;
	}
}

/* Particle Effects */
.particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: var(--neon-cyan);
	animation: particle-float 6s infinite linear;
}

@keyframes particle-float {
	0% {
		transform: translateY(100vh) rotate(0deg);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		transform: translateY(-100px) rotate(360deg);
		opacity: 0;
	}
}

/* Audio Control */
.audio-control {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 1000;
	width: 50px;
	height: 50px;
	background: var(--ui-dark);
	border: 3px solid var(--neon-cyan);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.audio-control:hover {
	transform: scale(1.1);
	box-shadow: 0 0 20px var(--neon-cyan);
}

.hidden {
	display: none;
}

/* Easter Egg - Konami Code Effect */
.easter-egg-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.9);
	z-index: 99999;
	display: none;
	overflow: hidden;
}

.easter-egg-active {
	display: block !important;
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Emoji Explosion Effect */
.emoji-explosion {
	position: absolute;
	font-size: 30px;
	pointer-events: none;
	user-select: none;
	animation: emojiBlast 3s ease-out forwards;
}

@keyframes emojiBlast {
	0% {
		transform: scale(0) rotate(0deg);
		opacity: 1;
	}

	50% {
		transform: scale(1.2) rotate(180deg);
		opacity: 1;
	}

	100% {
		transform: scale(0.8) rotate(360deg) translateY(100vh);
		opacity: 0;
	}
}

/* Team Tribute Message */
.tribute-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: white;
	z-index: 100000;
	opacity: 0;
	animation: tributeAppear 1s ease-in-out 0.5s forwards;
}

.tribute-title {
	font-family: var(--pixel-font);
	font-size: 48px;
	background: linear-gradient(45deg, var(--neon-yellow), var(--neon-pink), var(--neon-cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 30px;
	text-shadow: 0 0 20px rgba(255, 230, 68, 0.5);
}

.tribute-content {
	font-size: 18px;
	line-height: 1.8;
	max-width: 800px;
	margin: 0 auto;
	color: #ccc;
}

.tribute-team {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.tribute-member {
	padding: 20px;
	background: rgba(138, 100, 240, 0.1);
	border: 2px solid var(--neon-purple);
	border-radius: 10px;
}

.tribute-member h3 {
	font-family: var(--pixel-font);
	font-size: 14px;
	margin-bottom: 10px;
}

.tribute-member.lumi {
	border-color: var(--neon-purple);
}

.tribute-member.lumi h3 {
	color: var(--neon-purple);
}

.tribute-member.michael {
	border-color: var(--neon-cyan);
}

.tribute-member.michael h3 {
	color: var(--neon-cyan);
}

.tribute-member.lynn {
	border-color: var(--neon-yellow);
}

.tribute-member.lynn h3 {
	color: var(--neon-yellow);
}

.tribute-close {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--pixel-font);
	font-size: 14px;
	color: var(--neon-cyan);
	padding: 15px 30px;
	border: 3px solid var(--neon-cyan);
	background: var(--ui-dark);
	cursor: pointer;
	transition: all 0.3s ease;
	animation: pulse 2s infinite;
}

.tribute-close:hover {
	background: var(--neon-cyan);
	color: var(--ui-dark);
	transform: translateX(-50%) scale(1.1);
}

@keyframes tributeAppear {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.8);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Konami Code Hint */
.konami-hint {
	position: fixed;
	bottom: 100px;
	right: 30px;
	font-family: var(--pixel-font);
	font-size: 10px;
	color: rgba(100, 240, 240, 0.3);
	text-align: center;
	z-index: 1001;
	transition: all 0.3s ease;
	animation: hintPulse 3s ease-in-out infinite;
}

.konami-hint:hover {
	color: var(--neon-cyan);
	transform: scale(1.2);
	animation: none;
}

@keyframes hintPulse {

	0%,
	100% {
		opacity: 0.3;
		transform: scale(1);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.05);
	}
}

/* Additional Easter Egg Effects */
.tribute-message::before {
	content: '';
	position: absolute;
	top: -20px;
	left: -20px;
	right: -20px;
	bottom: -20px;
	background: linear-gradient(45deg,
			var(--neon-purple),
			var(--neon-cyan),
			var(--neon-yellow),
			var(--neon-pink));
	background-size: 400% 400%;
	animation: rainbowBorder 3s ease-in-out infinite;
	border-radius: 20px;
	z-index: -1;
	opacity: 0.3;
}

@keyframes rainbowBorder {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* Special emoji effects */
.emoji-explosion.special {
	animation: specialEmojiBlast 4s ease-out forwards;
	text-shadow: 0 0 20px currentColor;
}

@keyframes specialEmojiBlast {
	0% {
		transform: scale(0) rotate(0deg);
		opacity: 1;
		filter: hue-rotate(0deg);
	}

	25% {
		transform: scale(1.5) rotate(90deg);
		opacity: 1;
		filter: hue-rotate(90deg);
	}

	50% {
		transform: scale(1.2) rotate(180deg);
		opacity: 1;
		filter: hue-rotate(180deg);
	}

	75% {
		transform: scale(1) rotate(270deg);
		opacity: 0.8;
		filter: hue-rotate(270deg);
	}

	100% {
		transform: scale(0.8) rotate(360deg) translateY(150vh);
		opacity: 0;
		filter: hue-rotate(360deg);
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.tribute-title {
		font-size: 32px;
	}

	.tribute-content {
		font-size: 16px;
		padding: 0 20px;
	}

	.tribute-team {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* popup */
.modal {
	display: none;
	/* 默认隐藏 */
	position: fixed;
	/* 固定位置 */
	z-index: 99999;
	/* 位于顶层 */
	left: 0;
	top: 0;
	width: 100%;
	/* 全宽 */
	height: 100%;
	/* 全高 */
	overflow: auto;
	/* 启用滚动 */
	background-color: rgb(0, 0, 0);
	/* 背景颜色 */
	background-color: rgba(0, 0, 0, 0.4);
	/* 背景颜色带透明度 */
}

.modal-content {
	background-color: #fefefe;
	margin: 2% auto;
	/* 15% 从顶部和自动水平居中 */
	padding: 5px 10px;
	border: 1px solid #888;
	max-width: 50%;
	/* 可根据需要调整宽度 */
	color: #333333;
	border-radius: 7px;
	min-height: 20px;
}

.modal-content p {
	padding: 30px 0;
	display: flex;
	justify-content: center;
	text-align: center;
	line-height: 30px;
}

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/* login panel */
.login-panel-background {
	visibility: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 99999;
	left: 0;
	top: 0;
	background-color: rgba(0.4, 0.4, 0.4, 0.3);
}

.login-panel-background .login-panel-background-panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-top: 30px;
}

.login-panel-background .login-panel-background-panel .login-panel-top {
	display: flex;
	flex-direction: column;
}

.login-panel-background .login-panel-background-panel .login-panel-top span {
	color: #000;
	font-size: 20px;
	font-weight: 800;
}

.login-panel-background .login-panel-background-panel .login-panel-top .input-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30px;
}

.login-panel-background .login-panel-background-panel .login-panel-top .input-box input {
	width: 100%;
	border: 1px solid #cecece;
	outline: none;
	border-radius: 10px;
	padding: 10px 15px;
	margin: 10px 0;
}

.login-panel-background .login-panel-background-panel .login-panel-top .input-box input:focus {
	box-shadow: 0 0 5px #00aeff, 0 0 10px #00aeff;
	border-color: #00aeff;
}

.login-panel-background .login-panel-background-panel .login-panel-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30px;
}

.login-panel-background .login-panel-background-panel .login-panel-bottom span {
	display: flex;
	flex-direction: row-reverse;
	width: 100%;
	margin: 0px 0 8px 0;
	cursor: pointer;
	color: #007bff;
	font-weight: bolder;
	font-size: 12px;
}

.login-panel-background .login-panel-background-panel .login-panel-bottom button {
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	margin: 5px;
}

.login-panel-background .login-panel-background-panel .login-panel-bottom button:focus {
	box-shadow: 0 0 12px #00f0ff, 0 0 20px #00f0ff;
	border-color: #00f0ff;
}