/* =========================================
   0. 全局变量定义 (新增：修复底部变量未定义报错)
   ========================================= */
   :root {
    --clr-bg: #16213e;            /* 卡片背景深蓝 */
    --clr-primary: #a855f7;       /* 主题亮紫 (输入框聚焦) */
    --clr-primary-light: #6a0dad; /* 主题深紫 (输入框悬停/边框) */
    --clr-gray300: #6a0dad;       /* 默认边框色 */
    --clr-text: #ffffff;          /* 文本白 */
    --clr-error: #ff6b6b;         /* 错误提示红 */
}

/* =========================================
   1. 基础样式重置
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", sans-serif;
    scroll-behavior: smooth; /* 全局平滑滚动 */
}

/* 移除底部重复的 ::before, ::after 重置，统一在此处处理 */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: #1a1a2e;
    color: #e6e6e6;
    line-height: 1.6;
    position: relative; /* 为返回顶部按钮定位 */
}

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

/* =========================================
   2. 头部样式 (Header)
   ========================================= */
header {
    background-color: #0f0f1b;
    padding: 15px 0;
    border-bottom: 2px solid #6a0dad;
}

.header-content {
    display: flex;
    align-items: center; /* 确保垂直居中 */
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 60px;
    width: auto;
    display: block; /* 防止图片底部留白 */
}

.logo-text {
    margin-left: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #a855f7;
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
}

/* 头部搜索框 */
.search-box {
    display: flex;
}

.search-box form {
    display: flex; /* 支持 form 标签布局 */
}

.search-box input {
    padding: 8px 12px;
    border: 1px solid #6a0dad;
    border-radius: 4px 0 0 4px;
    background-color: #1a1a2e;
    color: #e6e6e6;
    width: 250px;
}

.search-box button {
    padding: 8px 15px;
    background-color: #6a0dad;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.search-box button:hover {
    background-color: #7b1fa2;
}

/* 右上角登录按钮 */
.top-login-btn {
    display: inline-block;
    background-color: #ff6b6b;
    color: white;
    padding: 8px 20px;
    margin-left: 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
    border: 1px solid #ff4757;
}

.top-login-btn:hover {
    background-color: #ff4757;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    transform: translateY(-2px);
}

/* =========================================
   3. 导航栏样式 (Nav)
   ========================================= */
nav {
    background-color: #16213e;
    padding: 10px 0;
    position: sticky; /* 导航栏吸顶 */
    top: 0;
    z-index: 99;
}

nav ul {
    display: flex;
    list-style: none;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #e6e6e6;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    transition: all 0.3s;
}

nav ul li a:hover, nav ul li a.active {
    background-color: #6a0dad;
    color: white;
}

/* =========================================
   4. 主内容区域布局 (Layout)
   ========================================= */
.main-content {
    display: flex;
    margin: 20px 0;
    gap: 20px;
    align-items: flex-start; /* 防止侧边栏被拉伸，使其能 sticky */
}

/* 侧边栏 (支持悬浮与滚动条美化) */
.sidebar {
    flex: 1;
    background-color: #0f0f1b;
    padding: 20px;
    border-radius: 5px;
    min-width: 250px;
    position: sticky; /* 侧边栏悬浮 */
    top: 80px; 
    max-height: 90vh;
    overflow-y: auto;
    
    /* Firefox 滚动条 */
    scrollbar-width: thin; 
    scrollbar-color: #6a0dad #0f0f1b; 
}

/* Webkit 滚动条美化 (Chrome, Edge, Safari) */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: #0f0f1b; border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb { background-color: #6a0dad; border-radius: 3px; border: 1px solid #0f0f1b; }
.sidebar::-webkit-scrollbar-thumb:hover { background-color: #a855f7; }

.sidebar h2 {
    color: #a855f7;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #6a0dad;
}
.sidebar ul { list-style: none; margin-bottom: 20px; }
.sidebar ul li { margin-bottom: 10px; }
.sidebar ul li a { color: #e6e6e6; text-decoration: none; padding: 5px 0; display: block; transition: color 0.3s; }
.sidebar ul li a:hover { color: #a855f7; }
.sidebar p { margin-bottom: 10px; }

/* 右侧主要内容区 */
.content {
    flex: 3;
    background-color: #0f0f1b;
    padding: 20px;
    border-radius: 5px;
    min-height: 600px;
}
.content ul { margin-left: 20px; margin-bottom: 20px; }
.content ul li { margin-bottom: 8px; }

/* =========================================
   5. 全局通用组件样式
   ========================================= */
h1, h2, h3, h4 { color: #a855f7; }
p { margin-bottom: 15px; }

/* 全局滚动条美化 */
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: #1a1a2e; }
html::-webkit-scrollbar-thumb { background-color: #4c1d95; border-radius: 6px; border: 3px solid #1a1a2e; }
html::-webkit-scrollbar-thumb:hover { background-color: #6a0dad; }
html { scrollbar-width: thin; scrollbar-color: #4c1d95 #1a1a2e; }

/* 返回顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #6a0dad;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border: 2px solid #a855f7;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    font-size: 24px;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background-color: #a855f7; transform: translateY(-5px); }

/* 广告横幅 */
.ad-banner {
    margin: 20px 0;
    text-align: center;
    border: 3px dashed #6a0dad;
    padding: 10px;
    background-color: #1a1a2e;
}
.ad-banner h2 { color: #ff6b6b; margin-bottom: 10px; font-size: 24px; }
.ad-banner img { max-width: 100%; height: auto; border: 2px solid #a855f7; }

/* =========================================
   6. 特定页面样式：世界观 / 百科条目
   ========================================= */
.entries-container { margin-bottom: 40px; }
.entries-section { margin-top: 40px; scroll-margin-top: 80px; }
.entries-section h2 { border-bottom: 2px solid #6a0dad; padding-bottom: 10px; margin-bottom: 20px; color: #a855f7; }

.entries-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.entry-card {
    background-color: #16213e;
    border-radius: 5px;
    padding: 15px;
    border-left: 4px solid #6a0dad;
    transition: transform 0.3s, box-shadow 0.3s;
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 20px;
    align-items: start;
    text-align: left;
}
.entry-card:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); background-color: #1f2a48; }
.entry-card img { width: 100%; height: 140px; object-fit: cover; margin: 0; display: block; border-radius: 3px; grid-column: 1 / 2; grid-row: 1 / 3; }
.entry-card h3 { color: #ff6b6b; margin-bottom: 10px; font-size: 18px; grid-column: 2 / 3; grid-row: 1 / 2; }
.entry-card p { font-size: 14px; color: #e6e6e6; grid-column: 2 / 3; grid-row: 2 / 3; }
.count { color: #a0a0a0; font-size: 0.9em; }

/* =========================================
   7. 特定页面样式：搜索结果页
   ========================================= */
.search-page-header { background-color: #16213e; padding: 30px; border-radius: 5px; margin-bottom: 30px; text-align: center; }
.search-page-header input { width: 70%; padding: 15px; font-size: 18px; border: 2px solid #6a0dad; border-radius: 5px; background-color: #0f0f1b; color: white; }
.search-results-list { display: flex; flex-direction: column; gap: 20px; }
.search-result-item { background-color: #16213e; padding: 20px; border-radius: 5px; border-left: 4px solid #ff6b6b; transition: background-color 0.2s; }
.search-result-item:hover { background-color: #232342; }
.search-result-item a { display: block; text-decoration: none; }
.search-result-category { font-size: 12px; color: #a855f7; text-transform: uppercase; margin-bottom: 5px; font-weight: bold; }
.search-result-item h3 { color: #ff6b6b; margin-bottom: 10px; font-size: 20px; }
.search-result-item p { color: #ccc; font-size: 14px; }
.highlight-text { background-color: rgba(168, 85, 247, 0.4); color: white; font-weight: bold; padding: 0 2px; border-radius: 2px; }
.no-results { text-align: center; padding: 50px; color: #888; font-size: 18px; }

/* =========================================
   8. 特定页面样式：游戏介绍/首页
   ========================================= */
.game-intro { margin-bottom: 30px; }
.game-intro h1 { color: #a855f7; border-bottom: 2px solid #6a0dad; padding-bottom: 10px; margin-bottom: 15px; font-size: 28px; }
.game-intro h2 { color: #a855f7; border-bottom: 2px solid #6a0dad; padding-bottom: 10px; margin-bottom: 15px; margin-top: 30px; }
.game-highlights { display: flex; justify-content: space-between; margin: 20px 0; }
.highlight-item { background-color: #16213e; padding: 15px; border-radius: 5px; text-align: center; flex: 1; margin: 0 10px; }
.highlight-item h3 { color: #ff6b6b; margin-bottom: 10px; }
.news-list { margin: 20px 0; }
.news-item { background-color: #16213e; padding: 15px; border-radius: 5px; margin-bottom: 15px; border-left: 4px solid #6a0dad; }
.news-item h3 { color: #ff6b6b; margin-bottom: 5px; }
.news-date { color: #a0a0a0; font-size: 14px; margin-bottom: 10px; }
.read-more { color: #a855f7; text-decoration: none; font-weight: bold; }
.read-more:hover { text-decoration: underline; }
.game-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.feature-card { background-color: #16213e; padding: 15px; border-radius: 5px; border-left: 4px solid #6a0dad; }
.feature-card h3 { color: #ff6b6b; margin-bottom: 10px; }
.attributes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; }
.attribute { background-color: #16213e; padding: 15px; border-radius: 5px; text-align: center; }
.attribute h4 { color: #ff6b6b; margin-bottom: 10px; }
.faq-list { margin-top: 15px; }
.faq-item { background-color: #16213e; padding: 15px; border-radius: 5px; margin-bottom: 15px; }
.faq-item h3 { color: #ff6b6b; margin-bottom: 10px; }

/* 其他介绍页组件 */
.intro-highlight { background-color: #16213e; padding: 20px; border-radius: 5px; margin: 20px 0; border-left: 4px solid #ff6b6b; text-align: center; }
.intro-highlight p { font-style: italic; font-size: 18px; }
.concept-grid, .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0; }
.concept-item { background-color: #16213e; padding: 15px; border-radius: 5px; text-align: center; }
.concept-item h3, .feature-item h3 { color: #ff6b6b; margin-bottom: 10px; }
.feature-item { background-color: #16213e; padding: 15px; border-radius: 5px; border-left: 4px solid #6a0dad; }
.mechanics-section { margin: 20px 0; }
.attribute-detail { background-color: #16213e; padding: 15px; border-radius: 5px; margin-bottom: 15px; }
.attribute-detail h4 { color: #ff6b6b; margin-bottom: 10px; }
.timeline { margin: 20px 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background-color: #6a0dad; }
.timeline-item { background-color: #16213e; padding: 15px; border-radius: 5px; margin-bottom: 15px; position: relative; margin-left: 50px; }
.timeline-item::before { content: ''; position: absolute; left: -40px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background-color: #6a0dad; }
.timeline-item h3 { color: #ff6b6b; margin-bottom: 10px; }
.reception-section { margin: 20px 0; }
.review-summary { background-color: #16213e; padding: 20px; border-radius: 5px; margin-bottom: 20px; text-align: center; }
.rating { margin-bottom: 15px; }
.score { font-size: 24px; font-weight: bold; color: #ff6b6b; }
.platform { background-color: #6a0dad; color: white; padding: 5px 10px; border-radius: 4px; margin-left: 10px; font-size: 14px; }
.review-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.highlight { background-color: #16213e; padding: 15px; border-radius: 5px; }
.highlight h4 { color: #ff6b6b; margin-bottom: 10px; }
.conclusion { background-color: #16213e; padding: 20px; border-radius: 5px; margin-top: 30px; border-left: 4px solid #ff6b6b; }
.basic-info { margin-top: 15px; }
.basic-info p { margin-bottom: 8px; font-size: 14px; }

/* =========================================
   9. 特定页面样式：角色展示 (包含列表与卡片)
   ========================================= */
.character-list-view { display: flex; flex-direction: column; gap: 30px; margin: 20px 0; }
.character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; margin: 20px 0; }

/* 角色卡片 (旧版网格) */
.character-card { background-color: #16213e; border-radius: 10px; border-left: 5px solid #6a0dad; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.3s; display: flex; flex-direction: row; align-items: center; padding: 20px; overflow: visible; /* 修正：允许边框溢出 */ }
.character-card:hover { transform: translateX(10px); background-color: #1f2a48; }

.character-image { flex: 1; background-color: #0f0f1b; display: flex; align-items: center; justify-content: center; padding: 10px; }
.character-image img { max-width: 100%; height: auto; border-radius: 3px; }

/* 角色卡片 (新版视觉容器) */
.card-visual { position: relative; flex-shrink: 0; width: 160px; height: 293px; margin-right: 30px; background: transparent; }
.inner-mask { 
    position: absolute; 
    top: 2px;                 /* 顶部下移 2px */
    left: 2px;                /* 左侧右移 2px */
    width: calc(100% - 4px);  /* 宽度减小 4px */
    height: calc(100% - 4px); /* 高度减小 4px */
    overflow: hidden; 
    border-radius: 8px; 
    background-color: #000; 
    z-index: 1; 
}
.card-visual img { position: absolute; display: block; pointer-events: none; }
.layer-bg { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; z-index: 1; }
.layer-portrait { z-index: 2; width: 90%; height: 90%; object-fit: contain; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 10px; }
.wide-portrait { z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: 35% 20%; top: 0; left: 0; transform: none; margin-top: 0; }
.layer-frame { z-index: 10; width: 100%; height: 105%; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -5px; }

/* 角色信息 */
.character-info { flex: 2; padding: 15px; } /* 修正：合并了 padding */
.character-info h3 { color: #ff6b6b; margin-bottom: 15px; border-bottom: 1px solid #6a0dad; padding-bottom: 10px; font-size: 24px; }
.character-info p { margin-bottom: 8px; font-size: 14px; }
.character-details p { margin-bottom: 8px; font-size: 15px; color: #ccc; line-height: 1.8; }
/* 右下角装饰图层 */
.layer-deco {
    position: absolute; 
    z-index: 20;        
    

    bottom: 0;
    right: 0;
    

    width: 25px;       
    height: auto;
    

    bottom: 7px; 
     right: 5px; 
    
    pointer-events: none; 
}

/* =========================================
   10. 特定页面样式：下载/工具/历史
   ========================================= */
.download-notice { background-color: #16213e; padding: 15px; border-radius: 5px; margin-bottom: 20px; border-left: 4px solid #ff6b6b; }
.download-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0; }
.download-option { background-color: #16213e; padding: 20px; border-radius: 5px; text-align: center; border: 1px solid #6a0dad; }
.download-option h3 { color: #ff6b6b; margin-bottom: 10px; }
.download-info { margin: 15px 0; text-align: left; }
.download-info p { margin-bottom: 5px; }
.download-btn { display: inline-block; background-color: #6a0dad; color: white; padding: 10px 20px; border-radius: 4px; text-decoration: none; font-weight: bold; transition: background-color 0.3s; }
.download-btn:hover { background-color: #7b1fa2; }
.download-btn-small { display: inline-block; background-color: #6a0dad; color: white; padding: 6px 12px; border-radius: 4px; text-decoration: none; font-size: 14px; transition: background-color 0.3s; }
.download-btn-small:hover { background-color: #7b1fa2; }

.patch-list, .tool-list, .resource-list { margin: 20px 0; }
.patch-item, .tool-item, .resource-item { background-color: #16213e; padding: 15px; border-radius: 5px; margin-bottom: 15px; border-left: 4px solid #6a0dad; }
.patch-item h3, .tool-item h3, .resource-item h3 { color: #ff6b6b; margin-bottom: 10px; }

.system-requirements { margin-top: 15px; }
.system-requirements h3 { color: #a855f7; margin: 15px 0 10px; font-size: 16px; }
.system-requirements ul { margin-left: 20px; margin-bottom: 15px; }
.installation-guide ol { margin-left: 20px; margin-bottom: 20px; }
.installation-guide li { margin-bottom: 10px; }

/* 攻略与事件 */
.guide-section { margin-bottom: 30px; }
.guide-section h3 { color: #ff6b6b; margin: 20px 0 10px; border-bottom: 1px solid #6a0dad; padding-bottom: 5px; }
.guide-section h4 { color: #a855f7; margin: 15px 0 10px; }
.guide-section ol, .guide-section ul { margin-left: 20px; margin-bottom: 15px; }
.guide-section li { margin-bottom: 8px; }
.hidden-event, .ending-card, .outfit-card { background-color: #16213e; padding: 15px; border-radius: 5px; margin-bottom: 15px; border-left: 4px solid #6a0dad; }
.hidden-event h4, .ending-card h4, .outfit-card h4 { color: #ff6b6b; margin-bottom: 10px; }
.pro-tips { margin-top: 30px; }
.tip-item { background-color: #16213e; padding: 15px; border-radius: 5px; margin-bottom: 15px; border-left: 4px solid #ff6b6b; }
.tip-item h3 { color: #ff6b6b; margin-bottom: 10px; }

/* 世界观列表与详情 */
.worldview-overview, .historical-intro, .worldview-conclusion, .historical-conclusion { background-color: #16213e; padding: 20px; border-radius: 5px; margin: 20px 0; border-left: 4px solid #6a0dad; }
.worldview-section { margin: 30px 0; }
.worldview-section h3 { color: #ff6b6b; margin: 20px 0 10px; border-bottom: 1px solid #6a0dad; padding-bottom: 5px; }
.tower-levels, .death-hierarchy, .soul-types, .death-god-types, .event-examples, .reward-types, .risk-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin: 15px 0; }
.level, .rank, .soul-type, .death-god-type, .event-example, .reward-type, .risk-type { background-color: #16213e; padding: 15px; border-radius: 5px; }
.level h4, .rank h4, .soul-type h4, .death-god-type h4, .event-example h4, .reward-type h4, .risk-type h4 { color: #ff6b6b; margin-bottom: 10px; }
.reward-type, .risk-type { text-align: center; }
.balance-mechanism { margin: 15px 0; }
.balance-mechanism h4 { color: #a855f7; margin: 15px 0 10px; }

/* 历史事件 */
.event-category { margin: 30px 0; }
.historical-event { background-color: #16213e; padding: 20px; border-radius: 5px; margin-bottom: 20px; border-left: 4px solid #ff6b6b; }
.historical-event h3 { color: #ff6b6b; margin-bottom: 10px; }
.event-meta { margin-bottom: 15px; }
.event-period, .event-type { background-color: #6a0dad; color: white; padding: 5px 10px; border-radius: 4px; margin-right: 10px; font-size: 14px; }
.event-content p { margin-bottom: 15px; }
.event-details { background-color: #0f0f1b; padding: 15px; border-radius: 5px; margin-top: 15px; }
.event-details h4 { color: #a855f7; margin-bottom: 10px; }
.event-details ul { margin-left: 20px; }
.event-details li { margin-bottom: 8px; }
.event-type-section, .participation-guide, .rewards-section, .risks-section { margin: 30px 0; }

/* =========================================
   11. 登录注册页 (Auth)
   ========================================= */
.auth-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin: 50px 0;
    display: none; /* 初始隐藏，用于jQuery动画 */
}

.auth-box {
    background-color: #16213e;
    padding: 30px;
    border-radius: 10px;
    border-left: 5px solid #6a0dad;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.auth-box h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #ff6b6b;
    border-bottom: 1px solid #6a0dad;
    padding-bottom: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #a855f7;
    font-weight: bold;
}

/* 旧版输入框 (兼容旧代码) */
.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #6a0dad;
    border-radius: 4px;
    background-color: #0f0f1b;
    color: white;
    font-size: 16px;
}

.form-group input:focus {
    outline: none;
    border-color: #ff6b6b;
    box-shadow: 0 0 5px rgba(255, 107, 107, 0.3);
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background-color: #6a0dad;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.submit-btn:hover {
    background-color: #7b1fa2;
}

/* =========================================
   12. CSS 输入框浮动标签动画 (Floating Label)
   ========================================= */
.form {
    position: relative;
    width: 100%; /* 【修复】原代码为 width: 100; 缺少单位 */
    max-width: 20rem;
}

.form__input {
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    padding: 0.8em;
    background: none;
    color: white;
    border: 2px solid var(--clr-gray300);
    border-radius: 0.5rem;
    outline: none;
}

.form__input:hover {
    border-color: var(--clr-primary-light);
}

.form__input:focus {
    border-color: var(--clr-primary);
}

.form__label {
    color: white;
    position: absolute;
    top: 0.8em;
    left: 1em;
    cursor: text;
    user-select: none;
    background-color: var(--clr-bg);
    transition: top 200ms ease-in, font-size 200ms ease-in;
}

.form__input:focus ~ .form__label,
.form__input:not(:placeholder-shown) ~ .form__label {
    top: -0.5em;
    font-size: 0.8em;
}

/* =========================================
   13. 底部与版权
   ========================================= */
footer {
    background-color: #0f0f1b;
    padding: 30px 0 20px;
    text-align: center;
    border-top: 2px solid #6a0dad;
    margin-top: 30px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    text-align: left;
}

.footer-section { flex: 1; padding: 0 15px; }
.footer-section h3 { color: #a855f7; margin-bottom: 15px; }
.footer-section ul { list-style: none; }
.footer-section ul li { margin-bottom: 8px; }
.footer-section ul li a { color: #e6e6e6; text-decoration: none; }
.footer-section ul li a:hover { color: #a855f7; }
.copyright { color: #a0a0a0; font-size: 14px; margin-top: 10px; }

/* =========================================
   14. 媒体查询 (Responsive Design) - 统一管理
   ========================================= */
@media (max-width: 768px) {
    /* 头部与导航 */
    .header-content { flex-direction: column; }
    .logo { margin-bottom: 15px; }
    .search-box { width: 100%; }
    .search-box input { width: 100%; }
    nav ul { flex-wrap: wrap; }
    nav ul li { margin: 5px; }
    .top-login-btn { margin: 15px 0 0 0; }

    /* 主内容区 */
    .main-content { flex-direction: column; }
    .sidebar { position: static; width: 100%; max-height: none; }
    
    /* 游戏介绍与页脚 */
    .game-highlights { flex-direction: column; }
    .highlight-item { margin: 10px 0; }
    .footer-content { flex-direction: column; }
    .footer-section { margin-bottom: 20px; }

    /* 网格布局转单列 */
    .character-grid, .download-options, .features-grid, .concept-grid,
    .tower-levels, .death-hierarchy, .soul-types, .death-god-types,
    .event-examples, .reward-types, .risk-types, .review-highlights {
        grid-template-columns: 1fr;
    }
    
    /* 角色卡片 */
    .character-card { flex-direction: column; text-align: center; }
    .card-visual { margin-right: 0; margin-bottom: 20px; }
    .character-info h3 { border-bottom: none; }

    /* 百科条目 */
    .entry-card { grid-template-columns: 100px 1fr; }
    .entry-card img { height: 100px; }
}

/* =========================================
   15. 打印样式
   ========================================= */
@media print {
    header, nav, .sidebar, .ad-banner, footer { display: none; }
    body { background-color: white; color: black; }
    .container { width: 100%; max-width: none; }
    .content { background-color: white; padding: 0; }
}