*{
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:500px;

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:15px;

flex-wrap:wrap;

margin:20px 0;

}



.stats div{

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

padding:15px;

border-radius:20px;

min-width:90px;

box-shadow:0 0 15px cyan;

}



#gameArea{

display:flex;

justify-content:center;

margin:20px 0;

}



canvas{

background:#111;

border:3px solid cyan;

border-radius:20px;

box-shadow:
0 0 25px cyan;

}



button{

padding:14px 22px;

margin:5px;

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 20px cyan;

}



.controls{

margin:20px;

}



#message{

margin-top:20px;

padding:15px;

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

border-radius:20px;

font-size:18px;

}



@media(max-width:500px){


canvas{

width:90vw;

height:90vw;

}


h1{

font-size:32px;

}

}