/**
* 站点静态页共用样式
* 服务页面：home.html（首页）/ privacy.html（隐私政策）/ terms.html（用户协议）
*
* 设计约束（遵循项目响应式铁律，见项目记忆「移动端 UI 适配铁律」）：
* - 仅服务静态文档页，不参与游戏内场景渲染；
* - 断点判定统一走 js/utils/responsive.js 挂到 的
* .mobile / .small / .desktop 类（与游戏内同一权威来源，改断点只改 responsive.js 一处）；
* - 尺寸/间距/字号以 vw / vh / clamp 响应式为主，避免跨设备共享单值 px；
* 文档正文用 clamp 设最小可读字号（类似边框用 px 的合理例外）。
*/
/* 色彩主题：与游戏 UI（深蓝黑 #1a1a2e + 青 #48dbfb）同一视觉语言，集中定义于此 */
:root {
--home-bg: #1a1a2e;
--home-bg-deep: #14142a;
--home-card: #16233a;
--home-border: rgba(255, 255, 255, 0.1);
--home-accent: #48dbfb;
--home-accent-deep: #0f9fc9;
--home-warn: #e94560;
--home-text: #e8e8f0;
--home-text-dim: #9aa0b5;
--home-radius: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: radial-gradient(1200px 600px at 50% -10%, #1f2c52 0%, var(--home-bg) 55%, var(--home-bg-deep) 100%) fixed;
color: var(--home-text);
min-height: 100%;
display: flex;
flex-direction: column;
}
a { color: var(--home-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ============ 页头（文档页返回首页） ============ */
.site-header {
flex: none;
padding: 3vh 6vw;
display: flex;
align-items: center;
gap: 2vw;
border-bottom: 1px solid var(--home-border);
}
.site-header .site-logo {
font-size: clamp(16px, 2vw, 22px);
font-weight: 700;
color: var(--home-text);
}
.site-header .site-logo:hover { text-decoration: none; color: var(--home-accent); }
.site-header .site-back {
font-size: clamp(13px, 1.5vw, 15px);
color: var(--home-text-dim);
}
/* ============ 主页主体（flex:1 使页脚贴底） ============ */
.site-main {
flex: 1;
width: 88vw;
max-width: 1080px;
margin: 0 auto;
padding: 6vh 0;
}
/* 主视觉区 */
.home-hero {
text-align: center;
padding: 4vh 0 6vh;
}
.home-title {
font-size: clamp(30px, 6vw, 60px);
font-weight: 800;
letter-spacing: 0.04em;
background: linear-gradient(135deg, #fff 0%, var(--home-accent) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-slogan {
margin-top: 2vh;
font-size: clamp(15px, 2vw, 20px);
color: var(--home-text-dim);
}
.btn-play {
display: inline-block;
margin-top: 5vh;
padding: 2.2vh 7vw;
font-size: clamp(17px, 2.4vw, 24px);
font-weight: 700;
color: #04121a;
background: linear-gradient(135deg, var(--home-accent) 0%, var(--home-accent-deep) 100%);
border-radius: 999px;
box-shadow: 0 1.5vh 4vh rgba(72, 219, 251, 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-play:hover {
transform: translateY(-2px);
box-shadow: 0 2vh 5vh rgba(72, 219, 251, 0.5);
text-decoration: none;
}
.btn-play:active { transform: translateY(0); }
/* 玩法简介卡片 */
.home-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2vw;
margin-top: 2vh;
}
.feature-card {
background: var(--home-card);
border: 1px solid var(--home-border);
border-radius: var(--home-radius);
padding: 3.5vh 2vw;
}
.feature-card .feature-icon { font-size: clamp(24px, 3vw, 36px); }
.feature-card h3 {
margin-top: 1.6vh;
font-size: clamp(16px, 2vw, 22px);
color: var(--home-accent);
}
.feature-card p {
margin-top: 1.4vh;
font-size: clamp(13px, 1.5vw, 16px);
line-height: 1.8;
color: var(--home-text-dim);
}
/* 手机端：三卡片改单列纵向 */
html.mobile .home-features { grid-template-columns: 1fr; gap: 3vh; }
html.mobile .feature-card { padding: 3vh 4vw; }
/* ============ 文档页（隐私政策 / 用户协议） ============ */
.doc-wrap { flex: 1; }
.doc-content {
width: 86vw;
max-width: 820px;
margin: 0 auto;
padding: 6vh 0 8vh;
}
.doc-content h1 {
font-size: clamp(24px, 3.6vw, 36px);
font-weight: 800;
padding-bottom: 2.4vh;
border-bottom: 1px solid var(--home-border);
}
.doc-content .doc-meta {
margin-top: 2vh;
font-size: clamp(12px, 1.4vw, 14px);
color: var(--home-text-dim);
}
.doc-content h2 {
margin-top: 5vh;
font-size: clamp(17px, 2.4vw, 24px);
font-weight: 700;
color: var(--home-accent);
}
.doc-content h3 {
margin-top: 3vh;
font-size: clamp(15px, 2vw, 19px);
font-weight: 700;
}
.doc-content p,
.doc-content li {
margin-top: 1.6vh;
font-size: clamp(14px, 1.7vw, 17px);
line-height: 1.9;
color: var(--home-text);
}
.doc-content ul, .doc-content ol {
padding-left: 1.4em;
}
.doc-content strong { color: #fff; }
/* ============ 页脚 ============ */
.site-footer {
flex: none;
border-top: 1px solid var(--home-border);
padding: 3vh 6vw 4vh;
text-align: center;
font-size: clamp(12px, 1.4vw, 14px);
color: var(--home-text-dim);
}
.site-footer .footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1vw 2.4vw;
margin-bottom: 1.6vh;
}
.site-footer .footer-links a { color: var(--home-text-dim); }
.site-footer .footer-links a:hover { color: var(--home-accent); }
/* 备案号链接与页脚其他文字同色，hover 时高亮（避免 footer 里突兀的强调色） */
.site-footer .footer-beian a { color: var(--home-text-dim); }
.site-footer .footer-beian a:hover { color: var(--home-accent); }