*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

background:#101014;

color:white;

font-family:
"Microsoft YaHei";

}




/* 顶部图片 */

.banner{

width:100%;

aspect-ratio:16 / 6;

display:flex;

overflow:hidden;

scroll-behavior:smooth;

position:relative;

scroll-snap-type:x mandatory;

}


.banner img{

width:100%;

height:100%;

object-fit:cover;

flex:0 0 100%;

scroll-snap-align:start;

}




/* 公告 */

.notice{

margin:15px;

height:45px;

background:#191922;

border-radius:15px;

display:flex;

align-items:center;

overflow:hidden;

backdrop-filter:blur(10px);

}


.notice span{

font-size:25px;

margin:0 15px;

}



.notice-content{

flex:1;

overflow:hidden;

height:100%;

display:flex;

align-items:center;

}



.notice-text{

white-space:nowrap;

animation:move 12s linear infinite;

}


@keyframes move{


from{

transform:translateX(100%);

}


to{

transform:translateX(-120%);

}


}









h2{

margin:20px;

font-size:28px;

color:white;

font-weight:700;


/* 蓝色柔光 */

text-shadow:

0 0 5px rgba(0,170,255,.5),

0 0 15px rgba(0,170,255,.5),

0 0 30px rgba(0,170,255,.35);


animation:blueGlow 3s infinite alternate;

}




@keyframes blueGlow{


from{


text-shadow:

0 0 5px rgba(0,170,255,.4),

0 0 15px rgba(0,170,255,.4);


}



to{


text-shadow:

0 0 10px rgba(0,200,255,.7),

0 0 25px rgba(0,200,255,.5),

0 0 40px rgba(0,150,255,.3);


}


}








/* 推荐卡片 */


.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

padding:20px;

}



.card{

background:

rgba(255,255,255,.08);


border-radius:15px;


padding:15px;


backdrop-filter:blur(15px);


box-shadow:

0 0 20px rgba(0,0,0,.6);


transition:.15s ease;


}

.card:hover{

transform:translateY(-5px);


box-shadow:

0 0 15px rgba(255,245,220,.8),

0 0 35px rgba(255,240,200,.5);

}



.card:hover{

transform:translateY(-5px);

}



.card img{

width:100%;

height:160px;

object-fit:cover;

border-radius:12px;

}



/* 信誉推荐按钮 */

.card button{

width:48%;

padding:10px;

margin-top:12px;


border-radius:12px;


/* 深色磨砂 */

background:

linear-gradient(

135deg,

#252a35,

#151820

);



/* 蓝色细边框 */

border:

1px solid rgba(0,200,255,.45);



color:white;


font-size:14px;


cursor:pointer;


transition:.15s ease;


}


/* 鼠标经过 */

.card button:hover{


transform:translateY(-3px);



background:

linear-gradient(

135deg,

#303746,

#1b202b

);



border-color:

rgba(0,220,255,.9);



box-shadow:

0 0 12px rgba(0,200,255,.45);



}




/* 游戏 */

.games{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:15px;

padding:20px;

}


@media(max-width:900px){

.games{

grid-template-columns:repeat(3,1fr);

}

}


@media(max-width:600px){

.games{

grid-template-columns:repeat(2,1fr);

}

}


.game{

height:180px;

border-radius:15px;

overflow:hidden;

transition:.15s ease;

cursor:pointer;

}


.game:hover{

transform:scale(1.08);

box-shadow:

0 0 15px rgba(255,245,220,.8),

0 0 35px rgba(255,240,200,.5);

}



.game img{

width:100%;

height:100%;

object-fit:cover;

}







/* 弹窗 */

.popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:
rgba(0,0,0,.7);

display:none;

align-items:center;

justify-content:center;

}



.popup-box{

width:320px;

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

backdrop-filter:
blur(20px);

padding:30px;

border-radius:20px;

text-align:center;

position:relative;

}



.close{

position:absolute;

right:10px;

top:10px;

width:35px!important;

height:35px;

background:#333!important;

}





/* 手机适配 */


@media(max-width:600px){


h2{

font-size:20px;

}

}
@media(max-width:900px){

.cards{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:600px){

.cards{

grid-template-columns:repeat(1,1fr);

}

}

/* 标题区域 */

.title-box{

text-align:center;

margin:20px;

}



/* 标题 */

.title-box h2{

margin:0;

font-size:28px;

color:white;

font-weight:700;


text-shadow:

0 0 8px rgba(0,180,255,.6),

0 0 20px rgba(0,180,255,.4);

}



/* 蓝色横线 */

.title-line{

margin:10px auto 0;

height:3px;

width:180px;

background:

linear-gradient(

90deg,

#00bfff,

transparent

);


position:relative;

overflow:hidden;

}






/* 流光 */

.title-line::after{


content:"";


position:absolute;


top:0;

left:-60px;


width:60px;

height:100%;


background:white;


opacity:.8;


animation:

lineMove 2s infinite;


}



@keyframes lineMove{


0%{

left:-60px;

}


100%{

left:120px;

}

}