:root {
			--primary: #ff1f1f;
			--primary-hover: #ff4d4d;
			--bg-body: #0a0a0a;
			--bg-card: #161616;
			--bg-navbar: rgba(10, 10, 10, 0.9);
			--text-main: #e0e0e0;
			--text-muted: #888888;
			--border-color: #2a2a2a;
			--radius-lg: 16px;
			--radius-md: 10px;
			--shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.5);
			--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
			--font-family: 'Barlow', -apple-system, sans-serif;
		}

		[v-cloak] {
			display: none;
		}

		body {
			margin: 0;
			background-color: var(--bg-body);
			font-family: var(--font-family);
			color: var(--text-main);
			overflow-x: hidden;
			-webkit-tap-highlight-color: transparent;
		}

		a {
			text-decoration: none;
			color: inherit;
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		/* --- 1. 导航栏 --- */
		.navbar {
			position: sticky;
			top: 0;
			z-index: 1000;
			background: var(--bg-navbar);
			backdrop-filter: blur(15px);
			-webkit-backdrop-filter: blur(15px);
			border-bottom: 1px solid var(--border-color);
			padding: 10px 0;
		}

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

		.logo-image {
			height: 30px;
			filter: brightness(0) invert(1);
		}

		.search-container {
			display: flex;
			background: #222;
			border-radius: 20px;
			padding: 5px 12px;
			align-items: center;
			border: 1px solid transparent;
			transition: var(--transition);
		}

		.search-container:focus-within {
			background: #000;
			border-color: var(--primary);
		}

		.search-input {
			border: none;
			background: transparent;
			outline: none;
			padding: 0 5px;
			color: var(--text-main);
			width: 120px;
			font-size: 13px;
			transition: width 0.3s;
		}

		.search-input:focus {
			width: 180px;
		}

		/* --- 2. 公告栏 --- */
		.announcement-bar {
			background: #111;
			border-bottom: 1px solid var(--border-color);
			padding: 6px 15px;
			font-size: 12px;
			color: var(--primary);
			text-align: center;
			font-weight: 600;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* --- 3. Hero Banner --- */
		.hero-banner {
			max-width: 1400px;
			margin: 15px auto;
			padding: 0 15px;
			padding-bottom: 20px;
		}

		.banner-wrapper {
			width: 100%;
			height: 280px;
			background: var(--bg-card) url('../img/images/promotionaPoster.png') center/cover no-repeat;
			border-radius: var(--radius-lg);
			position: relative;
			overflow: hidden;
			display: flex;
			align-items: flex-end;
		}

		.banner-content {
			padding: 30px;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
			width: 100%;
		}

		.banner-title {
			font-size: 24px;
			font-weight: 700;
			margin: 0;
			color: #fff;
		}

		.banner-subtitle {
			font-size: 14px;
			color: #ccc;
			margin: 8px 0 15px;
			max-width: 500px;
		}

		.play-btn {
			display: inline-block;
			padding: 8px 20px;
			background: var(--primary);
			color: #fff;
			border-radius: 20px;
			font-weight: 700;
			font-size: 13px;
			text-transform: uppercase;
		}

		/* --- 4. 主体布局 --- */
		.main-layout {
			max-width: 1400px;
			margin: 20px auto;
			padding: 0 15px;
			display: flex;
			gap: 20px;
		}

		.sidebar {
			width: 200px;
			flex-shrink: 0;
			position: sticky;
			top: 80px;
			align-self: flex-start;
		}

		.sidebar-inner {
			background: var(--bg-card);
			border-radius: var(--radius-lg);
			padding: 15px;
			border: 1px solid var(--border-color);
		}

		.sidebar-title {
			font-size: 11px;
			color: var(--text-muted);
			text-transform: uppercase;
			margin-bottom: 12px;
			padding-left: 8px;
		}

		.menu-list li {
			padding: 10px 12px;
			border-radius: var(--radius-md);
			cursor: pointer;
			transition: var(--transition);
			margin-bottom: 4px;
			display: flex;
			align-items: center;
			gap: 10px;
			font-weight: 600;
			color: #aaa;
			font-size: 14px;
		}

		.menu-list li:hover {
			background: rgba(255, 255, 255, 0.05);
			color: #fff;
		}

		.menu-list li.active {
			background: var(--primary);
			color: #fff;
		}

		.content-area {
			flex-grow: 1;
			min-width: 0;
		}

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
		}

		.section-title {
			font-size: 18px;
			font-weight: 700;
			color: #fff;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.section-title::before {
			content: '';
			width: 4px;
			height: 18px;
			background: var(--primary);
			border-radius: 2px;
		}

		/* --- 5. 响应式游戏网格 --- */
		.games-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
			gap: 12px;
		}

		.ibox {
			background: var(--bg-card);
			border-radius: var(--radius-md);
			overflow: hidden;
			transition: var(--transition);
			border: 1px solid var(--border-color);
			display: flex;
			flex-direction: column;
		}

		.ibox:active {
			transform: scale(0.96);
		}

		.phone_info {
			position: relative;
			width: 100%;
			aspect-ratio: 1/1;
		}

		.phone_info img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.card-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			transition: var(--transition);
		}

		@media (hover: hover) {
			.ibox:hover {
				transform: translateY(-4px);
				border-color: #444;
			}

			.ibox:hover .card-overlay {
				opacity: 1;
			}
		}

		.phone_ganame {
			padding: 8px 8px 2px;
			font-size: 12px;
			font-weight: 600;
			color: #fff;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.card-meta {
			padding: 0 8px 8px;
			display: flex;
			justify-content: space-between;
			font-size: 10px;
			color: var(--text-muted);
		}

		/* --- 6. 排行榜 --- */
		.ranking-panel {
			width: 260px;
			flex-shrink: 0;
			background: var(--bg-card);
			border-radius: var(--radius-lg);
			padding: 15px;
			border: 1px solid var(--border-color);
			position: sticky;
			top: 80px;
			height: fit-content;
		}

		.ranking-list li {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 8px 0;
			border-bottom: 1px solid #222;
		}

		.rank-num {
			font-size: 16px;
			font-weight: 800;
			color: #444;
			width: 20px;
		}

		.rank-num.top3 {
			color: var(--primary);
		}

		.rank-icon {
			width: 32px;
			height: 32px;
			border-radius: 6px;
		}

		.rank-name {
			font-size: 12px;
			color: #eee;
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* 在 <style> 中添加 */
		.ranking-list a:hover .rank-name {
			color: var(--primary);
			transition: var(--transition);
		}

		/* --- 页脚与工具 --- */
		.footer {
			margin-top: 40px;
			padding: 30px 15px;
			background: #050505;
			border-top: 1px solid var(--border-color);
			text-align: center;
			color: var(--text-muted);
			font-size: 12px;
		}

		.footer-links {
			margin-bottom: 10px;
			display: flex;
			justify-content: center;
			gap: 15px;
		}

		.loading-overlay {
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.8);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2000;
		}

		.spinner {
			width: 30px;
			height: 30px;
			border: 3px solid #222;
			border-top-color: var(--primary);
			border-radius: 50%;
			animation: spin 0.8s linear infinite;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}

		/* --- 响应式核心修改 --- */
		@media (max-width: 1100px) {
			.ranking-panel {
				display: none;
			}
		}

		@media (max-width: 900px) {
			.main-layout {
				flex-direction: column;
			}

			.sidebar {
				width: 100%;
				position: sticky;
				top: 55px;
				z-index: 999;
				background: var(--bg-body);
				margin: -10px 0 10px;
				padding: 10px 0;
			}

			.sidebar-inner {
				border: none;
				background: transparent;
				padding: 0;
			}

			.sidebar-title {
				display: none;
			}

			.menu-list {
				display: flex;
				overflow-x: auto;
				gap: 8px;
				padding: 0 15px;
				scrollbar-width: none;
			}

			.menu-list::-webkit-scrollbar {
				display: none;
			}

			.menu-list li {
				flex-shrink: 0;
				padding: 6px 15px;
				background: var(--bg-card);
				border: 1px solid var(--border-color);
				margin-bottom: 0;
			}

			.menu-list li.active {
				border-color: var(--primary);
			}

			.hero-banner {
				margin-top: 5px;
			}

			.banner-wrapper {
				height: 180px;
			}

			.banner-content {
				padding: 15px;
			}

			.banner-title {
				font-size: 18px;
			}

			.banner-subtitle {
				font-size: 12px;
				margin-bottom: 10px;
			}
		}

		@media (max-width: 480px) {
			.games-grid {
				grid-template-columns: repeat(3, 1fr);
				gap: 8px;
			}

			.phone_ganame {
				font-size: 11px;
				padding: 6px 6px 0;
			}

			.card-meta {
				display: none;
			}
		}