*{
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}


body{

margin:0;

min-height:100vh;

background:
radial-gradient(circle at top,#4b0082,#050014 60%,#000);

color:white;

text-align:center;

}



.container{

max-width:600px;

margin:auto;

padding:20px;

}



h1{

font-size:40px;

background:linear-gradient(
90deg,
cyan,
magenta,
yellow
);

-webkit-background-clip:text;

color:transparent;

}



.stats{

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

margin:20px 0;

}



.stats div{

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

padding:12px;

border-radius:20px;

min-width:90px;

box-shadow:0 0 15px rgba(0,255,255,.5);

}



#gameBox{

position:relative;

width:100%;

height:400px;

margin:20px auto;

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

border:2px solid cyan;

border-radius:30px;

overflow:hidden;

box-shadow:

0 0 30px cyan;

}




#orb{

position:absolute;

width:55px;

height:55px;

border-radius:50%;

background:

radial-gradient(circle,white,cyan,magenta);

box-shadow:

0 0 30px cyan,
0 0 60px magenta;

cursor:pointer;

display:none;

}



button{

padding:15px 30px;

border:none;

border-radius:50px;

font-size:18px;

font-weight:bold;

cursor:pointer;

background:linear-gradient(
45deg,
cyan,
magenta
);

color:black;

}



button:hover{

transform:scale(1.08);

box-shadow:0 0 25px cyan;

}



#message{

margin-top:20px;

padding:15px;

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

border-radius:20px;

font-size:18px;

}



@media(max-width:600px){

h1{

font-size:32px;

}


#gameBox{

height:350px;

}

}