/* =========================================
   0. 字体定义 (保持不变)
========================================= */
@font-face {
    font-family: 'Cubes11'; 
    src: url('assets/fonts/font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Huiwen';
    src: url('assets/fonts/huiwen.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 2. IPix 像素体 (用于标题/游戏感) */
@font-face {
    font-family: 'IPix';
    src: url('assets/fonts/ipix.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* =========================================
   1. 核心变量 (参考图片提取的柔光圣诞色卡)
========================================= */
:root {
    /* 背景色：图片背景的粉色窗帘 -> 下方的绿色桌布 */
    --bg-top: #EBC8CF;     /* 尘埃粉 */
    --bg-bottom: #557A58;  /* 苔藓绿 */
    
    /* 装饰色 */
    --color-red: #D94545;    /* 苹果红 (柔和版) */
    --color-green: #3A5F42;  /* 圣诞绿 (深色) */
    --color-yellow: #FCE38A; /* 光纤灯黄 (高亮) */
    --color-white: #FFF5F7;  /* 暖白 */
    
    /* 边框色 */
    --border-color: #D94545; 
    
    /* 文字色 */
    --text-main: #2F4F2F;    /* 深墨绿 (替代原来的深蓝) */
    --text-highlight: #8B0000; /* 深红 */
    
    --font-title: 'IPix', 'Courier New', cursive; 
    --font-body: 'Huiwen', 'Courier New', serif
}

/* =========================================
   2. 全局样式 & 背景层
========================================= */
body {
    margin: 0; padding: 0;
    /* 背景渐变：粉 -> 绿 */
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) fixed;
    color: var(--text-main);
    font-family: var(--main-font);
    overflow-x: hidden;
    font-family: var(--font-body);
}

h1, h2, h3, .logo, .glitch, .nav-links a, button, .game-header, .wish-tag {
    font-family: var(--font-title);
    letter-spacing: 2px; /* 像素字稍微分开点更好看 */
}

/* 特殊修正：首页副标题 */
.subtitle {
    font-family: var(--font-body); /* 副标题保持明朝体，显得更像一句诗 */
    font-weight: bold;
}

/* 特殊修正：跑马灯 */
.scrolling-text {
    font-family: var(--font-title);
}
/* --- 噪点滤镜 (保留，增加复古感) --- */
.noise-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 9999;
    mix-blend-mode: overlay; /* 改为叠加模式，更柔和 */
}

/* --- 背景画布 --- */
#bg-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2; opacity: 0.9;
    mix-blend-mode: normal; 
    pointer-events: none;
}
#snow-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; opacity: 1.0; 
    mix-blend-mode: screen; 
    pointer-events: none;
}

/* =========================================
   3. 视频滚动层
========================================= */
#video-intro-container {
    position: relative; width: 100%; height: 100vh;
    background: #2b1b1b; /* 稍微带点红的黑 */
    z-index: 500; overflow: hidden;
}
#hero-video {
    width: 100%; height: 100%; object-fit: cover; opacity: 0.7;
    filter: sepia(0.3) hue-rotate(-20deg); /* 给视频加一点复古暖色滤镜 */
}
.video-overlay {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); text-align: center;
    color: var(--color-yellow); /* 改成淡黄色文字 */
    mix-blend-mode: normal;
    text-shadow: 0 0 10px var(--color-red);
    z-index: 2; width: 100%;
}
.hero-title { font-size: 5rem; letter-spacing: 5px; margin-bottom: 20px; font-weight: bold; }
.hero-subtitle { font-size: 1.5rem; color: var(--color-white); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: 0.5; } }

/* =========================================
   4. 网站主体内容
========================================= */
.main-content { position: relative; z-index: 10; background: transparent; }

/* --- 导航栏：磨砂粉白 --- */
nav {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    width: 90%;
    background: rgba(255, 245, 247, 0.6); /* 淡淡的粉白 */
    border: 3px double var(--color-red);
    padding: 10px 30px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 1000;
    backdrop-filter: blur(8px); /* 毛玻璃 */
    border-radius: 50px; /* 变得圆润一点，像糖果 */
}
.logo { font-size: 1.5rem; color: var(--color-red); font-weight: bold; text-shadow: 1px 1px 0 #FFF;}
.nav-links { display: flex; list-style: none; gap: 30px; padding: 0; margin: 0; }
.nav-links li { list-style: none; }
.nav-links a { text-decoration: none; color: var(--color-green); font-weight: bold; transition: 0.3s;}
.nav-links a:hover { color: var(--color-red); text-shadow: 0 0 5px var(--color-yellow); }

/* --- 通用板块 --- */
.screen {
    min-height: 100vh; padding: 100px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.section-title { margin-bottom: 50px; text-align: center; }
.section-title h2 {
    font-size: 3rem; color: var(--color-red);
    text-shadow: 2px 2px 0 var(--color-white);
    border-bottom: 3px dashed var(--color-green); /* 虚线像缝纫线 */
    display: inline-block; padding: 0 20px;
    background: rgba(255,255,255,0.4); border-radius: 10px;
}

/* --- 首页文字框：柔光效果 --- */
.landing { position: relative; }
.border-box {
    border: 4px solid var(--color-white);
    outline: 4px solid var(--color-red);
    padding: 60px 40px;
    background: rgba(255, 255, 255, 0.25); /* 更通透 */
    backdrop-filter: blur(4px);
    text-align: center; max-width: 800px;
    box-shadow: 0 0 30px rgba(217, 69, 69, 0.3); /* 红色柔光晕 */
    border-radius: 20px;
}
.glitch {
    font-size: 4rem; color: var(--color-white);
    text-shadow: 2px 2px 0 var(--color-red), -2px -2px 0 var(--color-green);
    margin: 0 0 20px 0;
}
.subtitle { 
    font-size: 1.5rem; background: var(--color-red); color: white; 
    display: inline-block; padding: 5px 15px; transform: rotate(-2deg); 
    border-radius: 5px;
}
.scrolling-text {
    position: absolute; bottom: -40px; left: 0; width: 100%;
    background: var(--color-green); color: white; 
    font-size: 1.2rem; padding: 5px 0; border: 2px solid white;
}

/* --- 博物馆卡片 --- */
.gallery { display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; }
.card {
    width: 280px; background: rgba(255, 255, 255, 0.8);
    border: 2px solid var(--color-red); border-radius: 15px;
    padding: 15px; text-align: center; transition: 0.3s;
    box-shadow: 5px 5px 0 rgba(217, 69, 69, 0.2);
}
.card:hover { transform: translateY(-10px) scale(1.02); z-index: 20;}
.card-img {
    width: 100%; height: 200px;
    background-size: cover; background-position: center;
    border-radius: 10px; border: 2px solid #FFF;
    filter: sepia(0.2) contrast(1.1); /* 复古滤镜 */
    margin-bottom: 15px;
}
/* 卡片配色微调 */
.color-pink { border-color: var(--color-red); }
.color-yellow { border-color: var(--color-green); }
.color-blue { border-color: var(--color-yellow); box-shadow: 5px 5px 0 rgba(252, 227, 138, 0.5); }

.card h3 { margin: 10px 0; color: var(--text-highlight); font-size: 1.2rem; }
.card p { font-size: 0.9rem; color: var(--color-green); line-height: 1.5; }

/* --- 游戏盒子 --- */
.game-container { display: flex; gap: 50px; flex-wrap: wrap; justify-content: center; }
.game-box {
    width: 640px; border: 4px solid; background: #FFF5F7;
    padding: 5px; border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
.border-red { border-color: var(--color-red); }
.border-blue { border-color: var(--color-green); }

.game-header {
    background: var(--color-red); color: white; padding: 8px; font-weight: bold;
    text-align: center; font-family: sans-serif;
    display: flex; justify-content: space-between; border-radius: 5px 5px 0 0;
}
.window-controls span { margin-left: 5px; cursor: pointer; color: white; }
iframe { width: 100%; height: 480px; border: none; background: white; display: block; }
.instruction { margin: 10px 0 0 0; font-size: 0.9rem; color: var(--color-green); }

/* --- 祈福坛 --- */
.shrine-box {
    width: 80%; max-width: 800px;
    border: 4px solid var(--color-yellow);
    padding: 20px; 
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(252, 227, 138, 0.4);
}
.wishing-tree {
    height: 400px; position: relative; overflow: hidden;
    border-bottom: 2px solid white; margin-bottom: 20px;
}
.wish-tag {
    position: absolute;
    color: var(--color-white); font-weight: bold; font-size: 1.5rem;
    text-shadow: 0 0 5px var(--color-red), 0 0 10px var(--color-yellow); /* 发光字 */
    animation: floatUp 8s linear infinite;
    white-space: nowrap;
}
@keyframes floatUp { from { transform: translateY(420px); } to { transform: translateY(-50px); } }

.input-area { text-align: center; display: flex; justify-content: center; gap: 10px; }
input { 
    padding: 10px; border: 2px solid var(--color-red); 
    width: 60%; background: rgba(255,255,255,0.8); 
    font-family: var(--main-font); font-size: 1rem; color: var(--color-green);
    border-radius: 50px; text-align: center;
}
button { 
    padding: 10px 30px; background: var(--color-green); 
    color: white; border: none; 
    cursor: pointer; font-weight: bold; font-size: 1rem;
    border-radius: 50px; transition: 0.2s;
}
button:hover { background: var(--color-red); }

/* --- 底部 Footer --- */
footer { 
    padding: 40px; text-align: center; 
    background: var(--color-green); color: white; 
    border-top: 5px solid var(--color-red);
    margin-top: 50px;
}
.sponsors span { margin: 0 10px; font-weight: bold; color: var(--color-yellow); }

/* --- 音乐播放器 --- */
#music-player {
    position: fixed; top: 120px; right: 20px; z-index: 2000;
    cursor: pointer; text-align: center; transition: transform 0.2s;
}
#music-player:hover { transform: scale(1.1); }
#disc {
    width: 60px; height: 60px; border-radius: 50%;
    background: #111; border: 2px solid var(--color-yellow);
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 0 15px var(--color-red);
}
#disc.playing { animation: spin 2s linear infinite; border-color: var(--color-red); }
@keyframes spin { 100% { transform: rotate(360deg); } }
.music-hint { 
    font-size: 12px; color: var(--color-red); 
    font-weight: bold; background: rgba(255,255,255,0.8); 
    margin-top: 5px; padding: 2px 5px; border-radius: 4px;
}