/* --- 全局样式 --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #101010; /* 深邃的背景色 */
    font-family: 'KaiTi', 'STKaiti', '楷体', serif; /* 使用楷体，更具中国风 */
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- 主题切换按钮 --- */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.theme-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-icon {
    transform: rotate(20deg);
}

/* --- 汉字容器 --- */
.char-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 90vw;
    text-align: center;
}

/* --- 单个汉字的样式 --- */
.char {
    color: #dedede;
    font-size: 12vw; /* 调整字体大小，避免超出屏幕 */
    font-weight: bold;
    margin: 0 1vw;
    cursor: pointer;
    position: relative;
    
    /* 动画初始状态：模糊、缩小、透明 */
    opacity: 0;
    filter: blur(18px);
    transform: scale(0.7);
    
    transition: transform 0.3s ease, color 0.3s ease; /* 用于悬停效果的平滑过渡 */
}

/* --- 核心！加载时的浮现动画 --- */
.char.animate {
    animation: fadeInFocus 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes fadeInFocus {
    from {
        opacity: 0;
        filter: blur(18px);
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

/* --- 核心！鼠标悬停时的彩虹光晕效果 --- */
.char:hover {
    color: #fff;
    transform: scale(1.1); /* 悬停时放大 */
}

.char::before {
    content: attr(data-char); /* 复制一个汉字用于做光晕效果 */
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; /* 把它放在原始汉字的后面 */
    
    /* 彩虹渐变背景 */
    background-image: linear-gradient(
        90deg, 
        #ff00de, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff00de
    );
    background-size: 200% 100%; /* 背景尺寸是宽度的两倍，用于实现流动效果 */
    background-clip: text;
    -webkit-background-clip: text;
    
    color: transparent; /* 让文字透明，从而显示出背景的渐变色 */
    opacity: 0; /* 默认隐藏 */
    
    filter: blur(15px); /* 关键！高斯模糊创造光晕感 */
    transition: opacity 0.4s ease;
    animation: shimmer 4s linear infinite; /* 无限循环的流动动画 */
}

.char:hover::before {
    opacity: 1; /* 悬停时显示光晕 */
}

/* 光晕流动动画 */
@keyframes shimmer {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 200% 50%;
    }
}

/* --- 移动端适配 --- */
@media screen and (max-width: 768px) {
    .char {
        font-size: 10vw; /* 移动端进一步缩小字体 */
        margin: 0 0.5vw; /* 减少字符间距 */
    }
    
    .char-container {
        max-width: 95vw; /* 移动端增加可用宽度 */
    }
}

@media screen and (max-width: 480px) {
    .char {
        font-size: 8vw; /* 小屏幕设备进一步缩小 */
        margin: 0 0.3vw;
    }
    
    .char:hover {
        transform: scale(1.05); /* 移动端减少悬停放大效果 */
    }
    
    .theme-toggle {
        width: 45px;
        height: 45px;
        top: 15px;
        right: 15px;
    }
    
    .theme-icon {
        font-size: 20px;
    }
}

/* --- 横屏模式优化 --- */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .char {
        font-size: 8vh; /* 横屏时使用视窗高度作为参考 */
        margin: 0 1vh;
    }
}

/* --- 浅色主题 --- */
body.light-theme {
    background-color: #f8f9fa; /* 浅色背景 */
}

body.light-theme .char {
    color: #2c3e50; /* 深色文字 */
}

body.light-theme .char:hover {
    color: #1a252f; /* 悬停时更深的颜色 */
}

body.light-theme .theme-toggle {
    background-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

/* 浅色主题下的彩虹光晕效果调整 */
body.light-theme .char::before {
    /* 浅色主题下使用更鲜艳的渐变 */
    background-image: linear-gradient(
        90deg, 
        #e91e63, #ff5722, #ff9800, #4caf50, #2196f3, #3f51b5, #9c27b0, #e91e63
    );
    filter: blur(12px); /* 稍微减少模糊效果 */
}