body{
margin:0;
font-family:Arial;
background:#050518;
color:white;
text-align:center;
overflow-x:hidden;
}

.title{
margin:25px;
font-size:36px;
text-shadow:0 0 25px cyan;
animation:title 3s infinite alternate;
}

@keyframes title{
from{letter-spacing:2px;}
to{letter-spacing:6px;}
}

.container{
display:flex;
flex-direction:column;
align-items:center;
gap:30px;
}

.card{
width:80%;
padding:30px;
border-radius:25px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(10px);
box-shadow:0 0 25px cyan;
transition:.4s;
}

.card:hover{
transform:perspective(800px) rotateX(6deg) scale(1.03);
}

.game{
overflow:hidden;
font-size:32px;
text-decoration:underline;
text-shadow:0 0 15px cyan;
}

.game span{
display:inline-block;
white-space:nowrap;
animation:move 4s linear infinite;
}

@keyframes move{
0%{transform:translateX(-10px);}
50%{transform:translateX(10px);}
100%{transform:translateX(-10px);}
}

.btnbox{
display:flex;
justify-content:center;
gap:25px;
margin-top:20px;
}

button{
padding:15px 40px;
border:none;
border-radius:40px;
font-weight:bold;
background:#00ffff;
cursor:pointer;
box-shadow:0 0 15px cyan;
transition:.3s;
position:relative;
}

button::before{
content:"👉";
margin-right:8px;
display:inline-block;
animation:finger .6s infinite alternate;
}

@keyframes finger{
from{transform:translateX(0);}
to{transform:translateX(6px);}
}

button:hover{
transform:scale(1.1);
background:white;
}

.float{
position:fixed;
right:15px;
bottom:25px;
padding:10px;
border-radius:50%;
background:#0088cc;
box-shadow:0 0 20px cyan;
}

.float img{
width:35px;
}

canvas{
position:fixed;
top:0;
left:0;
z-index:-1;
}

@media(max-width:768px){
.card{width:90%;}
.game{font-size:26px;}
.btnbox{flex-direction:column;}
button{width:100%;}
}