/* css/style.css */

/* --- 基础设定保持不变 --- */
:root {
    --primary-color: #fff;
    --text-color: #333;
    --miku-color: #39C5BB; /* 蓝色点缀，参考参考图 */
    --glass-bg: rgba(255, 255, 255, 0.3); /* 卡片背景稍微白一点 */
    --hover-bg: rgba(255, 255, 255, 0.6);
    --miku-bg: rgba(57, 197, 187, 0.39);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    /* 背景图设置 */
    background: url('../assets/background.jpg') no-repeat center center fixed;
    background-size: cover;
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* 改为纵向布局以便放置Footer */
    align-items: center;
    position: relative;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }

/* --- 首页特定样式 --- */
.home-container {
    flex: 1; /* 撑开高度 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 60px; /* 给Footer留位置 */
}

/* 头像区域 */
.profile-section {
    text-align: center;
    margin-bottom: 60px;
}

/* --- 找到 .avatar 这一块 --- */
.avatar {
    /* [修改] 动态尺寸控制 */
    /* clamp(最小值, 推荐值, 最大值) */
    /* 下面这行意思是：最小120px，平时占屏幕宽度的15%，最大限制在180px */
    width: clamp(100px, 18vw, 300px); 
    height: clamp(100px, 18vw, 300px);
    
    /* 保持原有的圆角和边框 */
    border-radius: 50%;
/*    border: 4px solid #fff; /* [可选调整] 边框宽度：4px */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 15px;
*/
    /* [修改] 去掉实体边框 */
    border: none; 
    /* [修改] 使用双层阴影制造光晕 */
    /* 第一层：清晰的白色轮廓 (0 0 0 2px) 模拟极细边框 */
    /* 第二层：扩散的光晕 (0 0 20px) 模拟发光 */
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.5), 
        0 0 20px rgba(255, 255, 255, 0.6);
    transition: transform 0.5s;
    object-fit: cover; /* 保证图片不被拉伸变形 */
}
.avatar:hover { transform: rotate(360deg); }

.name { 
    font-size: 6.9rem; /* [修改] 字号变大 */
    margin-bottom: 15px; 
    font-weight: 439; /* [修改] 字体加粗程度 (100-900) */
    
    /* [修改] 字体颜色 */
    color: #39C5BB; /* 深蓝色，比纯黑更柔和 */
    
    /* [修改] 字体样式，按顺序优先使用 */
    font-family: "Imperial Script", cursive;
    
    /* text-shadow: 2px 2px 0px rgba(255,255,255,0.5); /* [可选] 给文字加一点白色投影增加立体感 */
}
.quote-box { 
    height: 30px; 
    font-size: 1.3rem; /* [修改] 介绍文字号 */
    
    /* [修改] 介绍文颜色 */
    color: #333; /* 黑色 */
    
    font-family: "Times New Roman", Times, monospace; /* [修改] 使用等宽字体，更有代码感 */
    font-weight: bold;
}

/* --- 迷你社交图标 (名字下方) --- */
.mini-social {
    margin-top: 15px;
    display: flex;
    gap: 15px;
    justify-content: center;
}
.mini-social a { color: #888; font-size: 1.1rem; }
.mini-social a:hover { color: var(--miku-color); }

/* --- 六宫格导航 (核心修改) --- */
.grid-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 15px;
    max-width: 600px;
    width: 90%;
}

.grid-item {
    background: var(--glass-bg);/* rgba(红, 绿, 蓝, 透明度) */
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    color: #444;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 针对移动端的适配 */
@media (max-width: 600px) {
    .grid-menu {
        grid-template-columns: repeat(2, 1fr); /* 手机变为2列 */
    }
}

.grid-item:hover {
    background: var(--hover-bg);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px var(--miku-bg);
    color: var(--miku-color);
}

/* --- 底部 Footer --- */
.footer {
    position: absolute;
    bottom: 15px;
    text-align: center;
    font-size: 0.75rem;
    color: #888;
    width: 100%;
    /*text-shadow: 0 1px 2px rgba(255,255,255,0.8);*/
}

.footer span { margin: 0 5px; }

/* --- 详情页兼容样式 (保留之前的样式) --- */
.about-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 之前的 .glass-container 等样式请保留在文件中... */
/* 为了节省篇幅，这里假设你保留了之前关于 about.html 的所有CSS */