*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#090f1f;
    color:#fff;
    font-family:
    "Microsoft YaHei",
    sans-serif;
}

.container{
    width:1200px;
    max-width:95%;
    margin:auto;
}

/* ==================== */
/* 导航 */
/* ==================== */

.header{

    position:fixed;

    top:0;

    width:100%;

    z-index:1000;

    backdrop-filter:blur(10px);

    background:
    rgba(0,0,0,.3);
}

.nav{

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.brand{

    display:flex;

    align-items:center;

    gap:12px;
}

.nav-logo{

    width:42px;

    height:42px;

    object-fit:contain;
}

.logo{

    font-size:22px;

    font-weight:700;
}

.menu{

    display:flex;

    gap:30px;
}

.menu a{

    color:white;

    text-decoration:none;

    transition:.3s;
}

.menu a:hover{

    color:#59c4ff;
}

/* ==================== */
/* HERO */
/* ==================== */

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;
}

.hero::after{

	content:"";

	position:absolute;

	inset:0;

	background:
	linear-gradient(
		to bottom,
		rgba(0,0,0,.15),
		rgba(0,0,0,.45)
	);

	z-index:2;
}

/* 模糊背景视频 */

.hero-video-bg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.25);

    filter:
    blur(50px)
    brightness(.35);

    z-index:1;
}

/* 中间主视频 */
.hero-video{

    position:absolute;

    width:min(82vw,1400px);

    max-height:72vh;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:24px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.5);

    filter:
    blur(10px)
    brightness(.7);

    transition:.5s;

    z-index:3;

    cursor:pointer;
}

/* 内容 */

.hero-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:5;

    width:90%;

    max-width:900px;

    text-align:center;

    transition:.5s;
}
.official-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:34px;

    padding:0 18px;

    border-radius:999px;

    background:#2f89ff;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

    box-shadow:
    0 0 20px rgba(47,137,255,.35);
}
.hero-content h1{

    font-size:88px;

    line-height:1;

    margin-bottom:20px;

    text-shadow:
    0 4px 30px rgba(0,0,0,.5);
}

.hero-content p{

    font-size:22px;

    margin-bottom:40px;

    color:#d8e3f0;

    text-shadow:
    0 2px 10px rgba(0,0,0,.4);
}

.hero-content button{

    border:none;

    padding:16px 40px;

    border-radius:40px;

    cursor:pointer;

    font-size:18px;

    background:#2f89ff;

    color:white;

    transition:.3s;
}

.hero-content button:hover{

    transform:translateY(-2px);
}

.hero-actions{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;
}
/* 播放状态 */

.hero.playing .hero-video{

    filter:none;

    transform:scale(1.02);
}

.hero.playing .hero-content{

    opacity:0;

    pointer-events:none;
}

/* ==================== */
/* SECTION */
/* ==================== */

.section{

    padding:120px 0;

    text-align:center;
}

.section h2{

    font-size:42px;

    margin-bottom:30px;
}

.section p{

    opacity:.8;

    line-height:1.8;
}

.watch-btn,
.download-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    height:56px;

    padding:0 32px;

    border-radius:999px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.3s;
}

.download-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    background:
        rgba(255,255,255,.12);

    border:
        1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

}

.platform-icon{

    width:32px;

    height:32px;

    object-fit:contain;

    margin-right:10px;

    flex-shrink:0;
}

/* ==================== */
/* GAME */
/* ==================== */

.game-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(320px,1fr)
    );

    gap:30px;

    margin-top:50px;
}

.game-card{

    background:#121b30;

    border-radius:20px;

    overflow:hidden;
}

.game-image{

    height:220px;

    background:#26324d;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#aaa;
}

.game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-card h3{

    padding:20px 20px 10px;
}

.game-card p{

    padding:0 20px 20px;
}

/* ==================== */

footer{

    padding:40px;

    text-align:center;

    opacity:.5;
}

/* ==================== */
/* 手机 */
/* ==================== */
@media(max-width:768px){

    .menu{
        display:none;
    }

    .hero-video{
        width:96%;
    }

    .hero-content h1{
        font-size:52px;
    }

    .hero-content p{
        font-size:16px;
    }

    .hero-actions{

        flex-direction:column;

        align-items:center;
    }

    .watch-btn,
    .download-btn{

        width:260px;
    }
}