/* 
    你可以将以下 CSS 代码复制并粘贴到 <head> 标签内已有的 <style> 标签的末尾，
    或者新建一个 <style> 标签来存放这些代码，以进一步美化页面。
*/

/* 引入更具奇幻风格的谷歌字体 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

/* 定义动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 215, 0, 0.3);
    }
    50% {
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.6);
    }
}

/* 应用字体和入场动画 */
body {
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif; /* 保留基础中文字体 */
}

.main-panel {
    animation: fadeIn 0.8s ease-out forwards;
}

h1, .character-name {
    font-family: 'Cinzel', serif; /* 为标题和角色名应用艺术字体 */
}

h1 {
    animation: titleGlow 4s infinite ease-in-out; /* 为主标题添加呼吸发光效果 */
}

/* 增强角色卡片交互效果 */
.character-card {
    position: relative;
    overflow: hidden;
    /* 为每个卡片添加入场动画，并设置延迟以产生依次出现的效果 */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease-out forwards;
}
/* 为网格中的每个元素设置不同的动画延迟，这需要您在HTML中为每个卡片添加 style="--i: N;" N从0开始递增 */
/* 如果不方便修改HTML，可以移除下面这行，所有卡片会同时出现 */
.character-grid .character-card {
    animation-delay: calc(var(--i, 0) * 80ms);
}

.character-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(135, 206, 235, 0.2), transparent 40%);
    transform: scale(0);
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    opacity: 0;
    pointer-events: none;
}

.character-card:hover::before {
    transform: scale(1);
    opacity: 1;
}

.character-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #FFD700;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #141928;
}

::-webkit-scrollbar-thumb {
    background: #87CEEB;
    border-radius: 5px;
    border: 2px solid #141928;
}

::-webkit-scrollbar-thumb:hover {
    background: #FFD700;
}

/* 响应式设计：针对移动设备优化 */
@media (max-width: 768px) {
    .main-panel {
        padding: 20px 15px;
    }
    h1 {
        font-size: 2.2em;
    }
    h3 {
        font-size: 1.5em;
    }
    .form-grid {
        grid-template-columns: 1fr; /* 在小屏幕上，表单项变为单列 */
    }
    .character-grid {
        grid-template-columns: 1fr; /* 角色卡片也变为单列 */
    }
    #previewModal {
        padding: 20px;
    }
}