* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            overflow-x: hidden;
        }
        .page {
            position: fixed;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: translateX(100%);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding-top: 70px;
        }
        .page.active {
            opacity: 1;
            transform: translateX(0);
            z-index: 1;
        }
        .page.exit {
            transform: translateX(-100%);
        }

        /* 导航样式 */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(0,0,0,0.9);
            padding: 15px;
            z-index: 1000;
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        .navbar a {
            color: white;
            text-decoration: none;
            padding: 10px;
            transition: 0.3s;
        }
        .navbar a:hover {
            color: #ff6666;
        }

        /* 各页面样式 */
        #home video {
            width: 100%;
            height: 100vh;
            object-fit: cover;
        }
        .characters-container {
            display: flex;
            height: calc(100vh - 70px);
            background: rgba(0,0,0,0.8);
        }
        .character-portrait {
            width: 50%;
            transition: transform 0.3s;
            cursor: pointer;
        }

        /* 各页面背景 */
#points {
    background-image: url('../images/points-bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#world {
    background-image: url('../images/world-bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#characters {
    background-image: url('../images/characters-bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

        /* 半透明遮罩 */
        .page > div {
            background: rgba(0,0,0,0.6);
            height: 100%;
        }