/* 卡片容器基础样式 */
    
    margin: 2rem auto;
    padding: 0 2rem;
    max-width: 1400px;
}

/* 超大屏幕布局 (1600px+) */
@media (min-width: 1600px) {
    .character-cards {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .equipment-cards {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grimoire-cards {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2rem;
    }
}

/* 大屏幕布局 (1200px-1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .character-cards {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .equipment-cards {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grimoire-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* 中等屏幕布局 (992px-1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .character-cards {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .equipment-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grimoire-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* 平板布局 (768px-991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .character-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .equipment-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grimoire-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* 移动端布局 (480px-767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .character-cards {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
    
    .equipment-cards {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
    
    .grimoire-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 1rem;
    }
    /* 移动端卡片调整为横向布局 */
    
    .character-card {
        flex-direction: row;
        height: 150px;
        .equipment-image {
            width: 120px;
            height: 120px;
        }
        .grimoire-card {
            width: 100%;
            height: 250px;
        }
    }
    /* 小屏幕移动端布局 (<480px) */
    
    @media (max-width: 479px) {
        .character-cards,
        .equipment-cards,
        .grimoire-cards {
            grid-template-columns: 1fr;
            padding: 0 1rem;
            gap: 1rem;
        }
        .grimoire-cards {
            display: grid;
        }
        /* 小屏幕卡片恢复纵向布局 */
        .character-card {
            flex-direction: column;
            height: auto;
        }
        .character-image {
            width: 100%;
            height: 200px;
        }
        .equipment-card {
            flex-direction: column;
            height: auto;
        }
        .equipment-image {
            width: 100%;
            height: 160px;
        }
        .grimoire-card {
            width: 100%;
            max-width: 280px;
            height: 300px;
            margin: 0 auto;
        }
    }
    /* 卡片加载动画 */
    
    @keyframes cardEntrance {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .character-card,
    .equipment-card,
    .grimoire-card {
        animation: cardEntrance 0.5s ease-out;
        animation-fill-mode: backwards;
    }
    
    .character-card:nth-child(1) {
        animation-delay: 0.1s;
    }
    
    .character-card:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .character-card:nth-child(3) {
        animation-delay: 0.3s;
    }
    
    .character-card:nth-child(4) {
        animation-delay: 0.4s;
    }
    
    .equipment-card:nth-child(1) {
        animation-delay: 0.1s;
    }
    
    .equipment-card:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .equipment-card:nth-child(3) {
        animation-delay: 0.3s;
    }
    
    .grimoire-card:nth-child(1) {
        animation-delay: 0.1s;
    }
    
    .grimoire-card:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .grimoire-card:nth-child(3) {
        animation-delay: 0.3s;
    }
    
    .grimoire-card:nth-child(4) {
        animation-delay: 0.4s;
    }