/* 全局变量 - 白色主题 */
:root {
    /* 基础颜色 */
    --primary-color: #5b8def;
    --secondary-color: #7ed1e2;
    --accent-color: #ffb6c1;
    --text-color: #333;
    --bg-color: #fff;
    --card-bg: #f9f9f9;
    --header-bg: linear-gradient(135deg, #a0d9f6, #8bc6ec);
    --footer-bg: #f5f5f5;
    --nav-bg: rgba(255, 255, 255, 0.9);
    --border-color: #eaeaea;
    --shadow-color: rgba(0, 0, 0, 0.1);
    
    /* 装饰图案和背景 */
    --pattern-opacity: 0.03;
    --decoration-color: rgba(91, 141, 239, 0.1);
    
    /* 动画持续时间 */
    --transition-speed: 0.3s;
    
    /* Minecraft主题颜色 - 明亮主题 */
    --grass-color: #7de667; /* 更亮更柔和的马卡龙绿色 */
    --dirt-color: #9e7343;
    --stone-color: #888888;
    --wood-color: #a0752d;
    --diamond-color: #4aedd9;
    --creeper-color: #50b73f;
    --steve-color: #a87c6e;
    --xp-orb-color: #94bd36;
    --sky-color: #7cd0f5;
    --cloud-color: rgba(255, 255, 255, 0.9);
    --mountains-color: rgba(128, 167, 157, 0.5);
}

/* 黑色主题 - 更加炫酷科技风 */
.dark-mode {
    --primary-color: #00ddff;
    --secondary-color: #9f4dff;
    --accent-color: #ff4d94;
    --text-color: #e0e0e0;
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --header-bg: linear-gradient(135deg, #0f0f2d, #000428);
    --footer-bg: #0a0a0a;
    --nav-bg: rgba(18, 18, 18, 0.9);
    --border-color: #333;
    --shadow-color: rgba(0, 0, 0, 0.3);
    
    /* 炫酷科技风装饰 */
    --pattern-opacity: 0.06;
    --decoration-color: rgba(0, 221, 255, 0.05);
    
    /* Minecraft主题颜色 - 暗色主题 */
    --grass-color: #66d04c; /* 更亮的暗黑模式马卡龙绿色 */
    --dirt-color: #785a36;
    --stone-color: #666666;
    --wood-color: #7a5824;
    --diamond-color: #38baa9;
    --creeper-color: #3a9d29;
    --steve-color: #7b5c4e;
    --xp-orb-color: #7aa92d;
    --sky-color: #061828;
    --cloud-color: rgba(130, 130, 180, 0.3);
    --mountains-color: rgba(60, 75, 88, 0.7);
}

/* 全局背景图案 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: var(--pattern-opacity);
    background-image: 
        radial-gradient(circle at 25px 25px, var(--primary-color) 2%, transparent 0%),
        radial-gradient(circle at 75px 75px, var(--accent-color) 2%, transparent 0%);
    background-size: 100px 100px;
    background-position: 0 0, 50px 50px;
}

/* 装饰元素样式 */
.section-divider {
    height: 120px;
    position: relative;
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 400% 400%;
}

.section-divider::before,
.section-divider::after {
    content: '';
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    flex: 1;
    opacity: 0.6;
}

.section-divider-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    box-shadow: 0 0 15px var(--shadow-color);
    position: relative;
    z-index: 2;
}

.section-divider-icon i {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.dark-mode .section-divider-icon {
    background: linear-gradient(135deg, rgba(0, 221, 255, 0.1), rgba(159, 77, 255, 0.1));
    box-shadow: 0 0 15px rgba(0, 221, 255, 0.3);
}

.dark-mode .section-divider-icon::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    z-index: -1;
    opacity: 0.7;
    animation: spin 10s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 装饰性背景图案 */
.bg-pattern {
    position: absolute;
    z-index: -1;
    opacity: 0.03;
}

/* 更炫酷的黑色主题特效 */
.dark-mode section {
    position: relative;
    overflow: hidden;
}

.dark-mode section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-color), transparent);
    opacity: 0.3;
    z-index: 1;
}

.dark-mode section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--primary-color), transparent);
    opacity: 0.3;
    z-index: 1;
}

.dark-mode .card-glow {
    box-shadow: 0 0 15px 2px rgba(0, 221, 255, 0.15);
}

.dark-mode .hero {
    position: relative;
    overflow: hidden;
}

.dark-mode .hero::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle at center, rgba(0, 221, 255, 0.15), transparent 70%);
    animation: pulse 15s infinite alternate;
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.3; }
    100% { transform: scale(1.2); opacity: 0.8; }
}

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color var(--transition-speed) ease, 
                color var(--transition-speed) ease;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    text-decoration: none;
    color: var(--accent-color);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 导航栏样式 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: var(--nav-bg);
    z-index: 1000;
    box-shadow: 0 2px 10px var(--shadow-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.logo a {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-menu {
    display: flex;
}

.nav-item {
    position: relative;
    margin: 0 15px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-color);
    font-size: 1rem;
    padding: 0.5rem;
    transition: color var(--transition-speed) ease;
}

.nav-link:hover {
    color: var(--primary-color);
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: var(--card-bg);
    box-shadow: 0 5px 15px var(--shadow-color);
    border-radius: 5px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-speed) ease, 
                transform var(--transition-speed) ease, 
                visibility var(--transition-speed) ease;
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-content a {
    display: block;
    padding: 10px 20px;
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease, 
                color var(--transition-speed) ease;
}

.dropdown-content a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--primary-color);
}

/* 首屏样式增强 */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--header-bg);
    color: #fff;
    text-align: center;
    padding-top: 70px;
    overflow: hidden;
}

/* 白色主题装饰 */
body:not(.dark-mode) .hero::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
    z-index: 0;
}

/* 首屏内容过渡效果 - 只控制透明度的过渡 */
.hero h1, .hero h2, .hero-buttons {
    transition: opacity 0.5s ease;
    will-change: opacity, transform; /* 性能优化 */
}

/* 确保首屏元素在Z轴层级高于其他装饰元素 */
.hero-container {
    position: relative;
    z-index: 5;
    max-width: 800px;
    padding: 0 20px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: fadeInDown 1s ease;
}

.hero h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 1s ease 0.3s both;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    animation: fadeIn 1s ease 0.6s both;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background-color: #fff;
    color: var(--primary-color);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 主题切换按钮 */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    animation: fadeInRight 1s ease;
}

#theme-toggle-btn, #weather-toggle-btn {
    width: 50px;
    height: 50px;
    background-color: var(--card-bg);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 15px var(--shadow-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-speed) ease;
    z-index: 10000;
}

#theme-toggle-btn:hover, #weather-toggle-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--shadow-color);
}

/* 服务器介绍部分增强 */
section {
    padding: 80px 0;
    transition: background-color var(--transition-speed) ease;
    position: relative;
}

.section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    color: var(--primary-color);
}

.section-title:after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    margin: 15px auto;
    border-radius: 2px;
}

/* 交错背景装饰 */
section:nth-child(odd) {
    position: relative;
}

section:nth-child(odd)::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23000000' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: var(--pattern-opacity);
    z-index: 0;
    pointer-events: none;
}

.dark-mode section:nth-child(odd)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2300ddff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.intro-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.intro-card {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
}

.intro-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    opacity: 0.8;
}

.dark-mode .intro-card::before {
    animation: glow 2s infinite alternate;
}

@keyframes glow {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.intro-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px var(--shadow-color);
}

body:not(.dark-mode) .intro-card:hover {
    background: linear-gradient(to bottom right, var(--card-bg), white);
}

.intro-card h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.features-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.features-list i {
    color: var(--accent-color);
    font-size: 1.1rem;
}

/* 关于MC服务器 */
.about {
    background-color: var(--bg-color);
    padding: 60px 0;
    text-align: center;
}

.about p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
}

/* 核心玩法 */
.gameplay {
    background-color: var(--card-bg);
    position: relative;
}

.gameplay-card {
    display: flex;
    gap: 25px;
    background-color: var(--bg-color);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-speed) ease;
}

.gameplay-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px var(--shadow-color);
}

.gameplay-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gameplay-content h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

/* 管理团队 */
.team {
    text-align: center;
}

/* 规则及告知 */
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.rule-item {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
}

.rule-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    opacity: 0.8;
}

.dark-mode .rule-item::before {
    animation: glow 2s infinite alternate;
}

.rule-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px var(--shadow-color);
}

body:not(.dark-mode) .rule-item:hover {
    background: linear-gradient(to bottom right, var(--card-bg), white);
}

.rule-item h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.rule-item i {
    color: var(--accent-color);
}

/* 技术与性能保障 */
.tech {
    background-color: var(--card-bg);
}

.tech-section {
    background-color: var(--bg-color);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px var(--shadow-color);
}

.tech-section h3 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.tech-section ul, .tech-section ol {
    padding-left: 20px;
}

.tech-section li {
    margin-bottom: 10px;
}

.tech-section ol li {
    list-style-type: decimal;
}

/* 登入方式 */
.join-methods {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
}

.join-method {
    text-align: center;
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    min-width: 200px;
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-speed) ease;
}

.join-method:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px var(--shadow-color);
}

.join-method i {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.join-method h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.join-note {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 20px;
}

/* 常见问题 */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--card-bg);
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 3px 10px var(--shadow-color);
    transition: background-color var(--transition-speed) ease;
}

.faq-question {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question h3 {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
}

.faq-item.active .faq-answer {
    padding: 0 20px 20px;
    max-height: 500px;
}

/* 总结与展望 */
.summary {
    text-align: center;
}

.summary p {
    max-width: 700px;
    margin: 0 auto 30px;
    font-size: 1.1rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.summary-item {
    background-color: var(--card-bg);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
}

.summary-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    opacity: 0.8;
}

.dark-mode .summary-item::before {
    animation: glow 2s infinite alternate;
}

.summary-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px var(--shadow-color);
}

body:not(.dark-mode) .summary-item:hover {
    background: linear-gradient(to bottom right, var(--card-bg), white);
}

.summary-item i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.summary-item h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.conclusion {
    margin-top: 50px;
}

.conclusion p {
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
}

/* 页脚 */
.footer-topmost {
    background-color: var(--footer-bg);
    padding: 60px 0 20px;
    transition: background-color var(--transition-speed) ease;
    margin-bottom: 45px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.footer-logo h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.footer-links h4, .footer-contact h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
}

.footer-bottom p {
    color: #fff;
}

.footer-bottommost {
    position: relative;
    width: 100%;
    background: #3586ff;
    min-height: 100px;
    padding: 20px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

footer .social-icon {

    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

footer .social-icon li {
    position: relative;
    background: #fff;
    width: 50px;
    height: 50px;
    list-style: none;
    box-shadow: inset 5px 5px 10px rgba(245, 241, 241, 0.1),
        10px 15px 10px rgb(247, 240, 240, 0.2);
    border-radius: 15px;
    transition: 0.5s;
}

footer .social-icon li::before {
    content: '';
    position: absolute;
    inset: 4;
    box-shadow: inset 4px 4px 0 #fff;
    z-index: 1;
    border-radius: 20px;
    filter: blur(2px);
    pointer-events: none;
}

footer .social-icon li:hover {
    transform: translateY(-20px);
}

footer .social-icon li a {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 2em;
    color: var(--clr);
}


footer .wave {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("src/images/wave.png");
    background-size: 1000px 100px;
    
}

footer .wave#wave1 {
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animateWave 4s linear infinite;
}

footer .wave#wave2 {
    z-index: 999;
    opacity: 0.5;
    bottom: 10px;
    animation: animateWave2 4s linear infinite;
}

footer .wave#wave3 {
    z-index: 1000;
    opacity: 0.2;
    bottom: 15px;
    animation: animateWave 3s linear infinite;
}

footer .wave#wave4 {
    z-index: 999;
    opacity: 0.7;
    bottom: 20px;
    animation: animateWave2 3s linear infinite;
}

/* 波浪动画 */
@keyframes animateWave {
    0% {
        background-position: 1000px;
    }

    100% {
        background-position-x: 0px;
    }
}

@keyframes animateWave2 {
    0% {
        background-position: 0px;
    }

    100% {
        background-position-x: 1000px;
    }

}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .navbar-container {
        padding: 0 20px;
    }
    
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--bg-color);
        flex-direction: column;
        padding: 20px 0;
        transition: left 0.3s ease;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-item {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    
    .nav-link {
        padding: 15px;
        justify-content: center;
    }
    
    .dropdown-content {
        position: static;
        width: 100%;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.05);
        padding: 0;
        border-radius: 0;
        display: none;
    }
    
    .dropdown.active .dropdown-content {
        display: block;
    }
    
    .hamburger {
        display: block;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero h2 {
        font-size: 1.2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .join-methods {
        flex-direction: column;
    }
}

@media screen and (max-width: 480px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .gameplay-card {
        flex-direction: column;
        text-align: center;
    }
    
    .gameplay-icon {
        margin-bottom: 15px;
    }
    
    .rule-item h3 {
        flex-direction: column;
        text-align: center;
    }
    
    .tech-section {
        padding: 15px;
    }
}

/* 汉堡按钮样式 */
.hamburger {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
    .hamburger {
        display: block;
    }
}

/* 黑色主题卡片效果 */
.card-glow {
    position: relative;
    overflow: hidden;
}

.card-glow::after {
    content: '';
    position: absolute;
    top: var(--y, 0);
    left: var(--x, 0);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(0, 221, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;
}

.card-glow:hover::after {
    opacity: 1;
}

/* 粒子效果 */
.card-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.card-particles span {
    position: absolute;
    bottom: 0;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0.3;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100%) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 0.3;
    }
    80% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* 技术部分的网格背景 */
#tech-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    opacity: 0.15;
}

.grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    width: 100%;
    height: 1px;
    animation: gridPulse 3s infinite alternate;
}

.grid-line:nth-child(odd) {
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
}

@keyframes gridPulse {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.7;
    }
}

/* 设置网格线位置 */
.grid-line:nth-child(1) { top: 5%; }
.grid-line:nth-child(2) { top: 10%; }
.grid-line:nth-child(3) { top: 15%; }
.grid-line:nth-child(4) { top: 20%; }
.grid-line:nth-child(5) { top: 25%; }
.grid-line:nth-child(6) { top: 30%; }
.grid-line:nth-child(7) { top: 35%; }
.grid-line:nth-child(8) { top: 40%; }
.grid-line:nth-child(9) { top: 45%; }
.grid-line:nth-child(10) { top: 50%; }
.grid-line:nth-child(11) { top: 55%; }
.grid-line:nth-child(12) { top: 60%; }
.grid-line:nth-child(13) { top: 65%; }
.grid-line:nth-child(14) { top: 70%; }
.grid-line:nth-child(15) { top: 75%; }
.grid-line:nth-child(16) { top: 80%; }
.grid-line:nth-child(17) { top: 85%; }
.grid-line:nth-child(18) { top: 90%; }
.grid-line:nth-child(19) { top: 95%; }
.grid-line:nth-child(20) { top: 100%; }

/* 首屏浮动元素 */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.floating-element {
    position: absolute;
    border: 1px solid rgba(0, 221, 255, 0.2);
    border-radius: 50%;
    background: rgba(0, 221, 255, 0.03);
    animation: float 15s linear infinite;
    opacity: 0;
}

@keyframes float {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 0.5;
    }
    80% {
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5) rotate(360deg);
        opacity: 0;
    }
}

/* 白色主题装饰图案 */
body:not(.dark-mode) section {
    position: relative;
}

body:not(.dark-mode) section:nth-child(even)::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23bde8ff' fill-opacity='0.1'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

/* 增强卡片悬停效果 */
.intro-card:hover, .rule-item:hover, .tech-section:hover, .summary-item:hover, .join-method:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px var(--shadow-color);
}

body:not(.dark-mode) .intro-card:hover, 
body:not(.dark-mode) .rule-item:hover, 
body:not(.dark-mode) .summary-item:hover, 
body:not(.dark-mode) .join-method:hover {
    background: linear-gradient(to bottom right, var(--card-bg), white);
}

/* 首屏装饰元素样式 */
.hero-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* 浮动方块 */
.floating-cube {
    position: absolute;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 8px;
    animation: floatCube 10s infinite ease-in-out;
    opacity: 0.7;
    transform: rotate(15deg);
}

@keyframes floatCube {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(15deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* 圆形装饰 */
.decoration-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    opacity: 0.5;
    animation: rotateSlow 30s linear infinite;
}

@keyframes rotateSlow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 几何线条 */
.decoration-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: pulseLine 6s infinite ease-in-out;
}

@keyframes pulseLine {
    0%, 100% {
        opacity: 0.2;
        transform: scaleX(0.8);
    }
    50% {
        opacity: 0.8;
        transform: scaleX(1);
    }
}

/* 粒子效果 */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    width: var(--size);
    height: var(--size);
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    top: var(--y);
    left: var(--x);
    animation: particlePulse 4s infinite ease-in-out;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes particlePulse {
    0%, 100% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* Minecraft风格图标 */
.mc-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    animation: iconFloat 8s infinite ease-in-out;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

.mc-icon.pickaxe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f9f9f9' d='M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7z'%3E%3C/path%3E%3C/svg%3E");
}

.mc-icon.sword {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f9f9f9' d='M110.1 227.6c-6.25-6.25-16.37-6.25-22.62 0l-18.75 18.75c-6.25 6.25-6.25 16.38 0 22.62l208.1 208.1C283.8 483.2 290.9 485.5 297.1 487.1V281.9L110.1 227.6zM297.9 224H438.3l-160.1-128.1L254.5 160L297.9 224zM373.5 9.5c-10.12-10.12-25.89-11.55-38.5-3.383c-18.75 12.12-34.25 27.62-46.38 46.38c-8.126 12.55-6.75 28.38 3.375 38.5L341.5 140.5l45.25-45.25L373.5 9.5zM424 64c-8.8 0-16 7.2-16 16c0 8.8 7.2 16 16 16s16-7.2 16-16C440 71.2 432.8 64 424 64z'%3E%3C/path%3E%3C/svg%3E");
}

.mc-icon.grass {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f9f9f9' d='M64 96H0c0 123.7 100.3 224 224 224v144c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V320C288 196.3 187.7 96 64 96zm384-64c-84.2 0-157.4 46.5-195.7 115.2 27.7 30.2 48.2 66.9 59 107.6C424 243.1 512 147.9 512 32h-64z'%3E%3C/path%3E%3C/svg%3E");
}

.mc-icon.chest {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f9f9f9' d='M395.5 163.3L256 314.1 116.5 163.3c-39-31.9-53.3-86.6-36.7-134.9C98.1 2.8 118.1 0 145.3 0H366.6c27.3 0 47.2 2.9 65.5 28.4 16.6 48.3 2.3 103-36.6 134.9zm-267 184.5c31.7 25.9 74.4 39.8 121.8 39.8 47.6 0 90.9-14.1 122.8-40.1 23.5-19.1 35.6-45.9 30.4-74.7-6.7-36.7-48-46-108.1-14.6-7.3 3.8-15.8-1.3-15.8-9.4v-32.8c0-3.7-3-6.7-6.7-6.7h-44.6c-3.7 0-6.7 3-6.7 6.7v32c0 8.5-8.8 13.3-16 9.1-54.3-32.2-96.3-23.7-102.7 13.6-5.1 29 7 56.2 30.6 75.5z'%3E%3C/path%3E%3C/svg%3E");
}

@keyframes iconFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* 渐变覆盖层 */
.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, var(--bg-color) 80%);
    opacity: 0.3;
    z-index: 2;
}

/* 黑色主题特定样式 */
.dark-mode .floating-cube {
    background: linear-gradient(135deg, rgba(0, 221, 255, 0.1), rgba(159, 77, 255, 0.05));
    border: 1px solid rgba(0, 221, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 221, 255, 0.1);
}

.dark-mode .decoration-circle {
    border-color: rgba(0, 221, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 221, 255, 0.05);
}

.dark-mode .decoration-line {
    background: linear-gradient(to right, transparent, rgba(0, 221, 255, 0.4), transparent);
}

.dark-mode .particle {
    background-color: rgba(0, 221, 255, 0.6);
    box-shadow: 0 0 5px rgba(0, 221, 255, 0.8);
}

.dark-mode .mc-icon {
    filter: drop-shadow(0 0 5px rgba(0, 221, 255, 0.5));
}

/* 确保装饰性元素在移动端也正确显示 */
@media screen and (max-width: 768px) {
    .floating-cube {
        width: 30px;
        height: 30px;
    }
    
    .decoration-circle {
        width: 150px !important;
        height: 150px !important;
    }
    
    .mc-icon {
        width: 25px;
        height: 25px;
    }
}

/* =========== Minecraft风格装饰元素 =========== */

/* Minecraft方块背景网格 */
.minecraft-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: 0;
}

.dark-mode .minecraft-grid {
    background-image: 
        linear-gradient(rgba(0, 221, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 221, 255, 0.02) 1px, transparent 1px);
}

/* Minecraft方块基础样式 */
.minecraft-block {
    position: absolute;
    width: 64px;
    height: 64px;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    animation: float-block 7s infinite ease-in-out;
    z-index: 2;
    image-rendering: pixelated;
}

/* 各种方块类型 */
.grass-block {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='16' y='0' fill='%235BBF38'/%3E%3Crect width='64' height='48' y='16' fill='%239E7343'/%3E%3Crect width='2' height='16' x='0' y='0' fill='%234CAF29' opacity='0.5'/%3E%3Crect width='2' height='16' x='16' y='0' fill='%234CAF29' opacity='0.5'/%3E%3Crect width='2' height='16' x='32' y='0' fill='%234CAF29' opacity='0.5'/%3E%3Crect width='2' height='16' x='48' y='0' fill='%234CAF29' opacity='0.5'/%3E%3Crect width='16' height='2' x='0' y='0' fill='%234CAF29' opacity='0.5'/%3E%3Crect width='16' height='2' x='0' y='16' fill='%234CAF29' opacity='0.5'/%3E%3Crect width='16' height='2' x='0' y='32' fill='%238B673A' opacity='0.5'/%3E%3Crect width='16' height='2' x='0' y='48' fill='%238B673A' opacity='0.5'/%3E%3C/svg%3E");
}

.stone-block {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23888888'/%3E%3Crect width='16' height='16' x='0' y='0' fill='%23777777'/%3E%3Crect width='16' height='16' x='32' y='0' fill='%23777777'/%3E%3Crect width='16' height='16' x='16' y='16' fill='%23777777'/%3E%3Crect width='16' height='16' x='48' y='16' fill='%23777777'/%3E%3Crect width='16' height='16' x='0' y='32' fill='%23777777'/%3E%3Crect width='16' height='16' x='32' y='32' fill='%23777777'/%3E%3Crect width='16' height='16' x='16' y='48' fill='%23777777'/%3E%3Crect width='16' height='16' x='48' y='48' fill='%23777777'/%3E%3C/svg%3E");
}

.diamond-block {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%234AEDD9'/%3E%3Cpath d='M0 0h16v16H0zm32 0h16v16H32zM16 16h16v16H16zm32 16h16v16H48zM0 32h16v16H0zm32 32h16v16H32zM16 48h16v16H16zm32 0h16v16H48z' fill='%2339D6C5'/%3E%3C/svg%3E");
    box-shadow: 0 0 20px rgba(74, 237, 217, 0.3);
}

.wood-block {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23A0752D'/%3E%3Crect width='16' height='64' x='0' y='0' fill='%23916A29' /%3E%3Crect width='16' height='64' x='32' y='0' fill='%23916A29' /%3E%3Crect width='16' height='4' x='16' y='12' fill='%23805D25' /%3E%3Crect width='16' height='4' x='48' y='12' fill='%23805D25' /%3E%3Crect width='16' height='4' x='16' y='36' fill='%23805D25' /%3E%3Crect width='16' height='4' x='48' y='36' fill='%23805D25' /%3E%3C/svg%3E");
}

/* Minecraft生物 */
.minecraft-mob {
    position: absolute;
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: mob-move 10s infinite alternate ease-in-out;
    z-index: 3;
    image-rendering: pixelated;
}

.creeper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%2350B73F'/%3E%3Crect width='8' height='8' x='8' y='8' fill='%23000'/%3E%3Crect width='8' height='8' x='32' y='8' fill='%23000'/%3E%3Crect width='8' height='16' x='20' y='20' fill='%23000'/%3E%3Crect width='8' height='8' x='12' y='28' fill='%23000'/%3E%3Crect width='8' height='8' x='28' y='28' fill='%23000'/%3E%3C/svg%3E");
}

.steve {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='32' height='32' x='8' y='0' fill='%23A87C6E'/%3E%3Crect width='32' height='8' x='8' y='0' fill='%23513D3A'/%3E%3Crect width='8' height='8' x='16' y='8' fill='%23FFFFFF'/%3E%3Crect width='8' height='8' x='24' y='8' fill='%23FFFFFF'/%3E%3Crect width='4' height='4' x='18' y='10' fill='%234B698E'/%3E%3Crect width='4' height='4' x='26' y='10' fill='%234B698E'/%3E%3Crect width='32' height='16' x='8' y='32' fill='%233630BF'/%3E%3C/svg%3E");
}

/* Minecraft工具和物品 */
.minecraft-item {
    position: absolute;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: item-spin 10s infinite linear;
    z-index: 2;
    image-rendering: pixelated;
}

.diamond-sword {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M15 2h2v2h-2zM15 4h2v2h-2zM15 6h2v2h-2zM15 8h2v2h-2zM15 10h2v2h-2zM15 12h2v2h-2zM13 14h2v2h-2zM11 16h2v2h-2zM9 18h2v2H9zM7 20h2v2H7zM5 22h2v2H5z' fill='%234AEDD9'/%3E%3Cpath d='M15 1h2v1h-2zM15 2h1v10h-1zM16 2h1v10h-1zM13 12h2v2h-2zM11 14h2v2h-2zM9 16h2v2H9zM7 18h2v2H7zM5 20h2v2H5zM3 22h2v2H3z' fill='%23333'/%3E%3C/svg%3E");
    box-shadow: 0 0 10px rgba(74, 237, 217, 0.3);
}

.pickaxe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M19 3h2v2h-2zM17 5h2v2h-2zM15 7h2v2h-2zM13 9h2v2h-2zM11 11h2v2h-2zM9 13h2v2H9zM11 15h2v2h-2zM13 17h2v2h-2zM15 19h2v2h-2zM17 21h2v2h-2zM19 23h2v2h-2z' fill='%234AEDD9'/%3E%3Cpath d='M21 2h2v1h-2zM19 2h2v1h-2zM17 4h2v1h-2zM15 6h2v1h-2zM13 8h2v1h-2zM11 10h2v1H9zM11 14h1v1h-1zM14 16h1v1h-1zM16 18h1v1h-1zM18 20h1v1h-1zM20 22h1v1h-1z' fill='%23333'/%3E%3Cpath d='M19 3h1v18h-1z' fill='%23A0752D'/%3E%3C/svg%3E");
}

.apple {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M13 6h6v6h-6z' fill='%23DE0000'/%3E%3Cpath d='M11 12h10v8H11z' fill='%23DE0000'/%3E%3Cpath d='M13 20h6v2h-6z' fill='%23DE0000'/%3E%3Cpath d='M15 3h2v3h-2z' fill='%23007700'/%3E%3Cpath d='M17 4h3v2h-3z' fill='%23007700'/%3E%3C/svg%3E");
}

.chest {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 10h20v16H6z' fill='%23A0752D'/%3E%3Cpath d='M8 12h16v12H8z' fill='%23805D25'/%3E%3Cpath d='M14 18h4v4h-4z' fill='%23FFD800'/%3E%3Cpath d='M6 10h20v2H6z' fill='%23805D25'/%3E%3Cpath d='M13 6h6v4h-6z' fill='%23A0752D'/%3E%3Cpath d='M13 8h6v2h-6zM13 6h6v1h-6z' fill='%23805D25'/%3E%3C/svg%3E");
}

/* Minecraft粒子效果 */
.minecraft-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.xp-orb {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--xp-orb-color);
    border-radius: 50%;
    top: var(--y);
    left: var(--x);
    box-shadow: 0 0 5px var(--xp-orb-color);
    animation: xp-pulse 3s infinite ease-in-out;
    animation-delay: var(--delay);
}

/* 挖掘特效 */
.mining-effect {
    position: absolute;
    width: 48px;
    height: 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 0h8v8H0zM16 0h8v8h-8zM32 0h8v8h-8zM8 8h8v8H8zM24 8h8v8h-8zM40 8h8v8h-8zM0 16h8v8H0zM16 16h8v8h-8zM32 16h8v8h-8zM8 24h8v8H8zM24 24h8v8h-8zM40 24h8v8h-8zM0 32h8v8H0zM16 32h8v8h-8zM32 32h8v8h-8zM8 40h8v8H8zM24 40h8v8h-8zM40 40h8v8h-8z' fill='white' fill-opacity='0.4'/%3E%3C/svg%3E") no-repeat;
    animation: mine-blocks 2s infinite steps(1);
    opacity: 0.7;
    z-index: 2;
}

/* 浮动文字 */
.floating-minecraft-text {
    position: absolute;
    font-family: 'Minecraft', monospace;
    color: #ffffff;
    font-size: 24px;
    text-shadow: 2px 2px 0 #3f3f3f;
    animation: float-text 5s infinite ease-in-out;
    z-index: 4;
    letter-spacing: 2px;
}

/* 像素云朵 */
.minecraft-cloud {
    position: absolute;
    width: 120px;
    height: 40px;
    /* 移除背景色和圆角，让云由方块组成 */
    background: transparent;
    z-index: 1;
    animation: float-cloud 30s linear infinite;
    opacity: 0; /* 初始透明 */
    transition: opacity 2s ease-in; /* 添加2秒的渐入过渡效果 */
}

/* 云朵方块 */
.cloud-block {
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: var(--cloud-color);
    border: 1px solid rgba(255, 255, 255, 0.5);
    opacity: 0.8;
    /* 移除圆角，使其成为方块 */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    transition: opacity 0.3s;
    image-rendering: pixelated;
}

/* 远景山脉 - 修改为第一层山 */
.minecraft-mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%; /* 从25%增加到35% */
    background: var(--mountains-color);
    clip-path: polygon(
        0% 100%, 
        5% 60%, /* 增加更多的点来提高层次感 */
        10% 70%, 
        15% 40%,
        20% 85%, 
        25% 65%,
        30% 50%, 
        35% 75%,
        40% 65%, 
        45% 80%,
        50% 40%, 
        55% 60%,
        60% 80%, 
        65% 45%,
        70% 50%, 
        75% 70%,
        80% 70%, 
        85% 55%,
        90% 35%, 
        95% 50%,
        100% 60%, 
        100% 100%
    );
    z-index: 0; /* 第一层山保持最低的z-index */
    transform-origin: center bottom; /* 确保变换从底部开始 */
    will-change: transform; /* 优化性能 */
}

/* 修改为独立的第二层山脉元素，不使用伪元素 */
.minecraft-mountains-second {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28%; /* 高度略低于第一层山 */
    background: var(--mountains-color);
    opacity: 0.95; /* 提高不透明度，几乎完全不透明 */
    clip-path: polygon(
        0% 100%,
        7% 80%,
        15% 95%,
        25% 75%,
        35% 90%,
        45% 70%,
        55% 85%,
        65% 65%,
        75% 90%,
        85% 75%,
        95% 85%,
        100% 70%,
        100% 100%
    );
    z-index: 1; /* 确保在第一层山前面 */
    filter: brightness(0.8);
    transform-origin: center bottom; /* 确保变换从底部开始 */
    will-change: transform; /* 优化性能 */
}

/* 添加独立的景观元素容器 */
.minecraft-scenery {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: 3; /* 确保在第二层山和草地前面 */
    pointer-events: none;
    transform-origin: center bottom; /* 确保变换从底部开始 */
    will-change: transform, opacity; /* 优化性能 */
}

/* 添加树木和植被点缀装饰 - 仍然使用伪元素 */
.minecraft-mountains::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: var(--grass-color);
    opacity: 0.5; /* 增加不透明度，让草地更显眼 */
    box-shadow: 0 0 20px rgba(125, 230, 103, 0.3); /* 添加发光效果 */
    clip-path: polygon(
        0% 100%,
        5% 60%,
        8% 80%,
        12% 60%,
        15% 85%,
        18% 65%,
        22% 75%,
        26% 60%,
        30% 80%,
        34% 65%,
        38% 75%,
        42% 60%,
        46% 70%,
        50% 60%,
        54% 75%,
        58% 60%,
        62% 80%,
        66% 65%,
        70% 75%,
        74% 60%,
        78% 70%,
        82% 60%,
        86% 80%,
        90% 65%,
        94% 75%,
        98% 60%,
        100% 80%,
        100% 100%
    );
    z-index: 2; /* 调整z-index，确保在两层山脉前面但在树和石头后面 */
    filter: saturate(1.2) brightness(1.1); /* 增加饱和度和亮度 */
    transform-origin: bottom center; /* 确保从底部开始变换 */
    will-change: inherit; /* 继承父元素的will-change属性 */
}

/* 动画定义 */
@keyframes float-block {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

@keyframes mob-move {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    33% {
        transform: translateX(-20px) translateY(-10px);
    }
    66% {
        transform: translateX(20px) translateY(-5px);
    }
    100% {
        transform: translateX(0px) translateY(0px);
    }
}

@keyframes item-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes xp-pulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.2;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes mine-blocks {
    0%, 100% {
        opacity: 0;
    }
    5%, 95% {
        opacity: 0.7;
    }
}

@keyframes float-text {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes float-cloud {
    0% {
        transform: translateX(-150px) translateY(0);
    }
    50% {
        transform: translateX(calc(50vw - 75px)) translateY(-10px);
    }
    100% {
        transform: translateX(calc(100vw + 150px)) translateY(0);
    }
}

/* 暗色主题特定样式调整 */
.dark-mode .minecraft-block.grass-block {
    filter: brightness(0.9);
}

.dark-mode .minecraft-block.stone-block {
    filter: brightness(0.8);
}

.dark-mode .minecraft-block.diamond-block {
    filter: brightness(1.2);
    box-shadow: 0 0 25px rgba(74, 237, 217, 0.5);
}

.dark-mode .minecraft-block.wood-block {
    filter: brightness(0.85);
}

.dark-mode .minecraft-item.diamond-sword {
    filter: brightness(1.2);
    box-shadow: 0 0 15px rgba(74, 237, 217, 0.5);
}

.dark-mode .xp-orb {
    filter: brightness(1.2);
    box-shadow: 0 0 8px var(--xp-orb-color);
}

.dark-mode .floating-minecraft-text {
    text-shadow: 2px 2px 0 #000, 0 0 10px var(--primary-color);
}

.dark-mode .minecraft-mountains {
    filter: brightness(0.7);
}

/* 媒体查询 - 移动端适配 */
@media screen and (max-width: 768px) {
    .minecraft-block {
        width: 40px;
        height: 40px;
    }
    
    .minecraft-mob {
        width: 32px;
        height: 32px;
    }
    
    .minecraft-item {
        width: 24px;
        height: 24px;
    }
    
    .xp-orb {
        width: 8px;
        height: 8px;
    }
    
    .mining-effect {
        width: 32px;
        height: 32px;
    }
    
    .floating-minecraft-text {
        font-size: 16px;
    }
    
    .minecraft-cloud {
        width: 80px;
        height: 25px;
    }
}

/* 确保正确的渐变覆盖层效果 */
.overlay-gradient {
    background: radial-gradient(circle at center, transparent 30%, var(--header-bg) 100%);
    opacity: 0.5;
}

.dark-mode .overlay-gradient {
    background: radial-gradient(circle at center, transparent 30%, var(--bg-color) 100%);
    opacity: 0.7;
}

/* 自定义Minecraft字体 */
@font-face {
    font-family: 'Minecraft';
    src: url('https://dl.dropboxusercontent.com/s/e1j61j7z04kgh4u/MinecraftRegular-Bmg3.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.floating-minecraft-text {
    font-family: 'Minecraft', monospace;
}

/* 解决可能的移动端字体加载问题 */
@media screen and (max-width: 768px) {
    .floating-minecraft-text {
        font-family: monospace;
    }
}

/* 优化视差滚动性能 */
.minecraft-block, .minecraft-mob, .minecraft-item, 
.minecraft-cloud, .minecraft-mountains, .floating-minecraft-text {
    will-change: transform, opacity;
}

/* Minecraft方块额外样式 */
.minecraft-block {
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* 添加更多Minecraft特色效果 - 挖掘光标特效 */
.hero:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 1h-4v2h4v-2zm-3 3h2v2h-2v-2zm-9 10v2h2v-2h-2zm18 0v2h2v-2h-2zm-13-7h2v2h-2v-2zm8 0h2v2h-2v-2zm-4 4h2v2h-2v-2zm8 0h2v2h-2v-2zm-12 0h2v2h-2v-2zm-4 4h2v2h-2v-2zm8 0h2v2h-2v-2zm8 0h2v2h-2v-2zm-12 4h2v2h-2v-2zm-4 0h2v2h-2v-2zm12 0h2v2h-2v-2zm4 0h2v2h-2v-2z' fill='white' opacity='0.8'/%3E%3C/svg%3E"), auto;
}

/* 确保像素化渲染 */
.minecraft-grid,
.minecraft-block,
.minecraft-mob,
.minecraft-item,
.mining-effect {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* 添加体素风格的阴影效果 */
.minecraft-block::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 5px;
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.2);
    transform: skewX(45deg);
}

.minecraft-block::before {
    content: '';
    position: absolute;
    right: -5px;
    top: 5px;
    width: 5px;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    transform: skewY(45deg);
}

/* 确保渐变覆盖层在适当的位置 */
.overlay-gradient {
    z-index: 3;
}

/* 确保主内容在装饰元素上层 */
.hero-container {
    z-index: 5;
    position: relative;
}

/* 过渡动画优化 */
.hero {
    transition: background 0.5s ease;
}

/* 确保所有像素化元素有正确的渲染方式 */
.minecraft-item img,
.minecraft-mob img,
.minecraft-block img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* 优化移动端显示 */
@media screen and (max-width: 480px) {
    .minecraft-block::after,
    .minecraft-block::before {
        display: none;
    }
}

/* 夜晚模式下额外的像素星星 */
.dark-mode .minecraft-grid::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: radial-gradient(1px 1px at calc(50% + 80px) 20%, #fff 100%, transparent 0),
                      radial-gradient(1px 1px at calc(50% - 120px) 40%, #fff 100%, transparent 0),
                      radial-gradient(1.5px 1.5px at calc(50% + 40px) 60%, #fff 100%, transparent 0),
                      radial-gradient(1px 1px at calc(50% - 90px) 75%, #fff 100%, transparent 0),
                      radial-gradient(2px 2px at calc(50% + 150px) 15%, #fff 100%, transparent 0),
                      radial-gradient(1px 1px at calc(50% - 50px) 85%, #fff 100%, transparent 0);
    background-size: 200px 200px;
    background-repeat: repeat;
    opacity: 0.3;
} 

/* 自定义Minecraft字体 */
@font-face {
    font-family: 'Minecraft';
    src: url('https://dl.dropboxusercontent.com/s/e1j61j7z04kgh4u/MinecraftRegular-Bmg3.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* 首屏中的鼠标样式，确保不隐藏 */
.hero, .hero * {
    cursor: default;
}

/* Minecraft天空元素 */
.minecraft-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* 太阳/月亮 */
#minecraft-celestial {
    position: absolute;
    width: 48px;
    height: 48px;
    z-index: 2;
    image-rendering: pixelated;
    transition: top 0.5s ease, left 0.5s ease, right 0.5s ease;
    will-change: transform, background-image;
}

/* 太阳样式 */
.sun {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23FFFF00'/%3E%3Crect width='8' height='8' x='0' y='0' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='16' y='0' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='32' y='0' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='8' y='8' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='24' y='8' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='40' y='8' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='0' y='16' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='16' y='16' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='32' y='16' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='8' y='24' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='24' y='24' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='40' y='24' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='0' y='32' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='16' y='32' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='32' y='32' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='8' y='40' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='24' y='40' fill='%23FFB700'/%3E%3Crect width='8' height='8' x='40' y='40' fill='%23FFB700'/%3E%3C/svg%3E");
    box-shadow: 0 0 30px rgba(255, 255, 0, 0.6);
}

/* 月亮样式 */
.moon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23DDDDDD'/%3E%3Crect width='8' height='8' x='8' y='8' fill='%23AAAAAA'/%3E%3Crect width='8' height='8' x='24' y='16' fill='%23AAAAAA'/%3E%3Crect width='8' height='8' x='16' y='24' fill='%23AAAAAA'/%3E%3Crect width='8' height='8' x='32' y='32' fill='%23AAAAAA'/%3E%3C/svg%3E");
    box-shadow: 0 0 20px rgba(221, 221, 221, 0.4);
}

/* 天气系统 */
#minecraft-weather {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* 雨天样式 */
.rain-container {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
}

.raining .rain-container {
    opacity: 1;
    visibility: visible;
}

.raindrop {
    position: absolute;
    width: 3px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(200, 200, 255, 0), rgba(200, 200, 255, 0.9));
    opacity: 0.9;
    animation: rain-fall linear infinite;
    transform: rotate(15deg);
    filter: drop-shadow(0 0 2px rgba(200, 200, 255, 0.8));
}

@keyframes rain-fall {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(calc(100vh + 100px));
    }
}

/* 雪天样式 */
.snow-container {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 300px); /* 增加高度，确保雪花有足够的空间完成动画 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    overflow: hidden; /* 确保不会导致页面滚动 */
}

.snowing .snow-container {
    opacity: 1;
    visibility: visible;
}

/* 三种不同的雪花样式 */
.snowflake.small {
    width: 4px;
    height: 4px;
    animation-duration: 7s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Crect width='4' height='4' fill='%23FFFFFF'/%3E%3Cpath d='M2,0 L2,4 M0,2 L4,2' stroke='%23CCCCFF' stroke-width='0.3'/%3E%3C/svg%3E");
}

.snowflake.medium {
    width: 8px;
    height: 8px;
    animation-duration: 10s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Crect width='8' height='8' fill='%23FFFFFF'/%3E%3Cpath d='M4,0 L4,8 M0,4 L8,4 M1.5,1.5 L6.5,6.5 M6.5,1.5 L1.5,6.5' stroke='%23CCCCFF' stroke-width='0.5'/%3E%3C/svg%3E");
}

.snowflake.large {
    width: 12px;
    height: 12px;
    animation-duration: 15s;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect width='12' height='12' fill='%23FFFFFF'/%3E%3Cpath d='M6,0 L6,12 M0,6 L12,6 M2,2 L10,10 M10,2 L2,10 M3,1.5 L9,6 M3,10.5 L9,6 M1.5,3 L6,9 M10.5,3 L6,9' stroke='%23CCCCFF' stroke-width='0.7'/%3E%3C/svg%3E");
}

/* 清除原来的通用雪花样式，使用新的分类样式 */
.snowflake {
    position: absolute;
    image-rendering: pixelated;
    animation: snow-fall linear infinite;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));  /* 添加发光效果 */
    opacity: 0.9;  /* 提高不透明度 */
    will-change: transform; /* 优化动画性能 */
}

@keyframes snow-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0; /* 开始时透明 */
    }
    5% {
        opacity: 1; /* 快速变为不透明 */
    }
    25% {
        transform: translateY(calc(25vh)) rotate(90deg) translateX(10px);
    }
    50% {
        transform: translateY(calc(50vh)) rotate(180deg) translateX(-10px);
    }
    75% {
        transform: translateY(calc(75vh)) rotate(270deg) translateX(10px);
        opacity: 1; /* 保持不透明 */
    }
    95% {
        opacity: 0.7; /* 开始变透明 */
    }
    100% {
        transform: translateY(calc(100vh + 200px)) rotate(360deg) translateX(-10px);
        opacity: 0; /* 结束时完全透明 */
    }
}

/* 雷电样式 */
.thunder-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.thundering .thunder-container {
    opacity: 1;
    visibility: visible;
}

.lightning {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
}

@keyframes lightning-flash {
    0%, 100% {
        opacity: 0;
    }
    10%, 30%, 50% {
        opacity: 0.8;
    }
    20%, 40%, 60% {
        opacity: 0;
    }
}

/* 夜晚时的天空调整 */
.night-sky #minecraft-celestial {
    box-shadow: 0 0 20px rgba(221, 221, 221, 0.4);
}

.night-sky .minecraft-grid::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(1px 1px at 20% 30%, #fff 100%, transparent 0),
                      radial-gradient(1px 1px at 40% 70%, #fff 100%, transparent 0),
                      radial-gradient(1px 1px at 60% 20%, #fff 100%, transparent 0),
                      radial-gradient(2px 2px at 70% 90%, #fff 100%, transparent 0),
                      radial-gradient(1px 1px at 90% 40%, #fff 100%, transparent 0);
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.6;
    z-index: 1;
}

/* 暗色模式调整 */
.dark-mode #minecraft-celestial.sun {
    box-shadow: 0 0 40px rgba(255, 255, 0, 0.4);
}

.dark-mode #minecraft-celestial.moon {
    box-shadow: 0 0 30px rgba(221, 221, 221, 0.3);
}

.dark-mode .raindrop {
    background: linear-gradient(to bottom, rgba(100, 100, 200, 0), rgba(100, 100, 200, 0.6));
}

/* 暗色模式下的雪花效果 */
.dark-mode .snowflake {
    filter: drop-shadow(0 0 3px rgba(150, 150, 255, 0.9));
}

.dark-mode .snowflake.large {
    filter: drop-shadow(0 0 4px rgba(180, 180, 255, 0.95));
}

/* 确保视差滚动的z-index层级合理 */
.minecraft-sky {
    z-index: 1;
}

.minecraft-block, .minecraft-mob, .minecraft-item, 
.minecraft-cloud, .mining-effect {
    z-index: 3;
}

.overlay-gradient {
    z-index: 4;
}

.hero-container {
    z-index: 5;
}

/* 树木样式 */
.minecraft-tree {
    position: absolute;
    width: 30px;
    height: 40px;
    z-index: 3; /* 与景观容器一致 */
}

.minecraft-tree::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 12px;
    background-color: #8B4513; /* 树干 */
}

.minecraft-tree::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 28px;
    background-color: var(--grass-color); /* 树叶 */
    filter: brightness(0.85); /* 单独调低树叶亮度 */
    clip-path: polygon(0% 100%, 25% 50%, 0% 50%, 25% 25%, 0% 25%, 50% 0%, 100% 25%, 75% 25%, 100% 50%, 75% 50%, 100% 100%);
}

/* 岩石样式 */
.minecraft-rock {
    position: absolute;
    width: 15px;
    height: 10px;
    background-color: var(--stone-color);
    border-radius: 3px 5px 2px 4px;
    z-index: 3; /* 与景观容器一致 */
}

.minecraft-rock::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

/* 云朵容器 */
.minecraft-cloud-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    z-index: 0;
    overflow: hidden;
}

/* 云朵动画 */
.minecraft-cloud {
    animation: float-cloud 60s linear infinite;
    animation-delay: var(--delay, 0s);
}

/* 暗色主题样式调整 */
.dark-mode .minecraft-tree::after {
    background-color: var(--grass-color);
    filter: brightness(0.8); /* 暗黑模式下调低亮度 */
    box-shadow: 0 0 10px rgba(102, 208, 76, 0.3);
}

.dark-mode .minecraft-rock {
    background-color: var(--stone-color);
    filter: brightness(0.7);
}

@media screen and (max-width: 768px) {
    .minecraft-tree {
        width: 24px;
        height: 32px;
    }
    
    .minecraft-tree::before {
        width: 4px;
        height: 10px;
    }
    
    .minecraft-tree::after {
        width: 16px;
        height: 22px;
    }
    
    .minecraft-rock {
        width: 12px;
        height: 8px;
    }
}

/* 山脉光照效果 */
/* 已更新为使用独立元素 */

/* 树木摆动动画 */
.minecraft-tree {
    animation: tree-sway 5s infinite alternate ease-in-out;
    transform-origin: bottom center;
}

/* 岩石闪光效果 */
.minecraft-rock::after {
    animation: rock-shine 8s infinite alternate ease-in-out;
}

/* 定义山脉光照动画 */
@keyframes mountain-light {
    0% {
        opacity: var(--start-opacity, 0.7);
    }
    50% {
        opacity: var(--mid-opacity, 0.8);
    }
    100% {
        opacity: var(--end-opacity, 0.7);
    }
}

/* 定义树木摆动动画 */
@keyframes tree-sway {
    0% {
        transform: rotate(-1deg);
    }
    100% {
        transform: rotate(1deg);
    }
}

/* 定义岩石闪光动画 */
@keyframes rock-shine {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.1;
    }
}

/* 星星样式 */
.minecraft-star {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.8);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    z-index: 0;
    animation: star-twinkle 3s infinite alternate ease-in-out;
    transform-origin: center center;
}

/* 萤火虫样式 - 仅在暗黑模式下显示 */
.minecraft-firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: rgba(255, 255, 120, 0.8);
    border-radius: 50%;
    z-index: 2;
    animation: firefly-glow 4s infinite alternate ease-in-out;
    box-shadow: 0 0 5px rgba(255, 255, 120, 0.8);
    /* 默认隐藏萤火虫（白天模式） */
    opacity: 0;
    visibility: hidden;
}

/* 只有在暗黑模式下显示萤火虫 */
.dark-mode .minecraft-firefly {
    opacity: 1;
    visibility: visible;
    background-color: rgba(150, 255, 100, 0.8);
    box-shadow: 0 0 8px rgba(150, 255, 100, 0.6);
}

/* 山脉粒子容器 */
.minecraft-mountain-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* 生成50个粒子 */
.minecraft-mountain-particles::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, transparent 50%);
    background-size: 3px 3px;
    background-repeat: space;
    opacity: 0.3;
    animation: mountain-particles 15s infinite linear;
}

/* 星星闪烁动画 */
@keyframes star-twinkle {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

/* 萤火虫发光动画 */
@keyframes firefly-glow {
    0% {
        opacity: 0.2;
        transform: translate(0, 0);
    }
    25% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.2;
        transform: translate(10px, -5px);
    }
    75% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.2;
        transform: translate(0, 0);
    }
}

/* 山脉粒子动画 */
@keyframes mountain-particles {
    0% {
        background-position: 0 0;
        opacity: 0.2;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        background-position: 100px 100px;
        opacity: 0.2;
    }
}

/* 暗色主题调整 */
.dark-mode .minecraft-star {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.dark-mode .minecraft-firefly {
    background-color: rgba(150, 255, 100, 0.8);
    box-shadow: 0 0 8px rgba(150, 255, 100, 0.6);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .minecraft-star {
        width: 4px;
        height: 4px;
    }
    
    .minecraft-firefly {
        width: 3px;
        height: 3px;
    }
}

.dark-mode .minecraft-mountains {
    filter: brightness(0.7);
}

/* 暗黑模式样式已更新为使用独立元素 */

/* 暗黑模式下第二层山脉样式 */
.dark-mode .minecraft-mountains-second {
    background: var(--mountains-color);
    opacity: 0.95; /* 提高不透明度，与亮色模式保持一致 */
    filter: brightness(0.6);
}

/* 山脉光照效果 */
.minecraft-mountains-second,
.minecraft-mountains::after {
    animation: mountain-light 20s infinite alternate ease-in-out;
}

/* 暗黑模式下草地的发光效果 */
.dark-mode .minecraft-mountains::after {
    box-shadow: 0 0 25px rgba(102, 208, 76, 0.4);
    filter: saturate(1.2) brightness(1.2);
}