/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #000;
    color: #fff;
    overflow-x: hidden;
    min-height: 100vh;
    scroll-behavior: smooth;
}

/* 背景星空效果 */
.cosmic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 200px white, 300px 100px white, 500px 300px white,
        700px 250px white, 900px 150px white, 1100px 350px white,
        200px 400px white, 400px 500px white, 600px 450px white,
        800px 550px white, 1000px 600px white, 1200px 650px white,
        150px 700px white, 350px 750px white, 550px 800px white,
        750px 850px white, 950px 900px white, 1150px 950px white;
    animation: twinkle 5s infinite;
}

.stars::after {
    animation-delay: 2.5s;
    box-shadow: 
        50px 150px white, 250px 50px white, 450px 250px white,
        650px 200px white, 850px 100px white, 1050px 300px white,
        150px 350px white, 350px 450px white, 550px 400px white,
        750px 500px white, 950px 550px white, 1150px 600px white,
        100px 650px white, 300px 700px white, 500px 750px white,
        700px 800px white, 900px 850px white, 1100px 900px white;
}

@keyframes twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.nebula {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 119, 198, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
    animation: nebulaFloat 30s infinite alternate;
    z-index: -1;
}

@keyframes nebulaFloat {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(10deg) scale(1.1); }
}

/* 导航栏 */
.nav-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    position: relative;
    z-index: 1;
}

.logo-text {
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.logo-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    filter: blur(10px);
    animation: logoGlow 3s infinite alternate;
}

@keyframes logoGlow {
    0% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

.nav-menu {
    display: flex;
    gap: 30px;
}

.nav-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
}

.nav-link:hover {
    color: #fff;
    transform: translateY(-2px);
}

.nav-link:hover::before {
    width: 100%;
    height: 100%;
}

.cosmic-nav:hover { background: rgba(120, 119, 198, 0.3); }
.ocean-nav:hover { background: rgba(78, 205, 196, 0.3); }
.beasts-nav:hover { background: rgba(255, 107, 107, 0.3); }
.imagination-nav:hover { background: rgba(150, 206, 180, 0.3); }
.metal-nav:hover { background: rgba(192, 192, 192, 0.3); }
.microcosm-nav:hover { background: rgba(255, 195, 113, 0.3); }

/* 主标题区 */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
    position: relative;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
}

.title-line {
    display: block;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 1s ease forwards;
}

.title-line:nth-child(1) { animation-delay: 0.2s; }
.title-line:nth-child(2) { animation-delay: 0.4s; }
.title-line:nth-child(3) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.title-line.highlight {
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.title-line.highlight::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1);
    animation: lineGlow 2s infinite alternate;
}

@keyframes lineGlow {
    0% { box-shadow: 0 0 5px rgba(255, 107, 107, 0.5); }
    100% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.8); }
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeIn 1s ease 0.8s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.explore-btn {
    position: relative;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    border: none;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeIn 1s ease 1s forwards;
}

.btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    animation: btnRotate 3s linear infinite;
}

@keyframes btnRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.explore-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.5);
}

/* 按钮容器 */
.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeIn 1s ease 1s forwards;
}

/* 游戏按钮 */
.game-btn {
    position: relative;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(45deg, #667eea, #764ba2);
    border: none;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.game-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
}

/* 浮动图片 */
.floating-images {
    flex: 1;
    position: relative;
    height: 600px;
}

.float-image {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    animation: floatIn 1s ease forwards;
}

.float-1 {
    top: 10%;
    right: 20%;
    animation-delay: 0.3s, 0.3s;
    animation: floatIn 1s ease 0.3s forwards, floatGentle 4s ease-in-out 1.3s infinite;
}

.float-2 {
    top: 40%;
    right: 40%;
    animation-delay: 0.5s, 0.5s;
    animation: floatIn 1s ease 0.5s forwards, floatGentle 4.5s ease-in-out 1.5s infinite;
}

.float-3 {
    top: 70%;
    right: 15%;
    animation-delay: 0.7s, 0.7s;
    animation: floatIn 1s ease 0.7s forwards, floatGentle 5s ease-in-out 1.7s infinite;
}

.float-4 {
    top: 20%;
    right: 60%;
    animation-delay: 0.9s, 0.9s;
    animation: floatIn 1s ease 0.9s forwards, floatGentle 4.2s ease-in-out 1.9s infinite;
}

.float-5 {
    top: 50%;
    right: 10%;
    animation-delay: 1.1s, 1.1s;
    animation: floatIn 1s ease 1.1s forwards, floatGentle 5.5s ease-in-out 2.1s infinite;
}

.float-6 {
    top: 30%;
    right: 5%;
    animation-delay: 1.3s, 1.3s;
    animation: floatIn 1s ease 1.3s forwards, floatGentle 4.8s ease-in-out 2.3s infinite;
}

@keyframes floatIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 简化的浮动效果 - 不干扰页面滚动 */
@keyframes floatGentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 网站介绍区域 */
.about-section {
    padding: 80px 40px;
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 30px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 80px;
}

.about-header {
    text-align: center;
    margin-bottom: 60px;
}

.about-title {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff6b6b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 15px;
}

.about-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: start;
}

.about-text h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.about-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-item h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff;
}

.feature-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.about-stats {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: scale(1.1);
}

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

/* 画廊区域 */
.gallery-section {
    padding: 100px 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 80px;
}

.section-title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
}

/* 分类网格 */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
}

.category-card {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    transition: all 0.5s ease;
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.category-card:hover .card-bg {
    opacity: 0.6;
    transform: scale(1.1);
}

.cosmic-card .card-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.ocean-card .card-bg { background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); }
.beasts-card .card-bg { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); }
.imagination-card .card-bg { background: linear-gradient(135deg, #96ceb4 0%, #88d8b0 100%); }
.metal-card .card-bg { background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%); }
.microcosm-card .card-bg { background: linear-gradient(135deg, #ffc371 0%, #ff5f6d 100%); }

.card-content {
    position: relative;
    z-index: 2;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.category-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff;
}

.category-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
}

.image-preview-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 200px;
}

.preview-grid img {
    width: 100%;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.preview-grid img:hover {
    opacity: 1;
    transform: scale(1.1);
}

.view-more-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    text-decoration: none;
}

.view-more-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
    color: #fff;
    text-decoration: none;
}

.arrow-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.view-more-btn:hover .arrow-icon {
    transform: translateX(5px);
}

/* 模态框 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    z-index: 1;
}

.modal-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 10px;
}

.modal-info {
    text-align: center;
    margin-top: 20px;
}

.modal-info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.modal-info p {
    color: rgba(255, 255, 255, 0.7);
}

/* 分类视图 */
.category-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1500;
    overflow-y: auto;
    display: none;
}

.category-view.active {
    display: block;
}

.category-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    z-index: 1600;
    display: flex;
    align-items: center;
    gap: 20px;
}

.back-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.image-grid {
    padding: 120px 40px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.image-grid img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-header {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .hero-section {
        flex-direction: column;
        padding: 0 20px;
        text-align: center;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .explore-btn,
    .game-btn {
        padding: 15px 35px;
        font-size: 15px;
    }
    
    .floating-images {
        margin-top: 50px;
        height: 400px;
    }
    
    .gallery-section {
        padding: 50px 20px;
    }
    
    .about-section {
        padding: 50px 25px;
        margin: 40px 20px 60px;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .about-title {
        font-size: 2.2rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about-stats {
        flex-direction: row;
        justify-content: space-around;
        padding: 30px 20px;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .category-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}