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


body{

height:100vh;

background:
radial-gradient(circle at top,#25205c,#080a12);

font-family:Arial;

color:white;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}



main{

width:90%;

}



h1{

font-size:45px;

margin-bottom:20px;

}



.score-box{

font-size:22px;

margin-bottom:20px;

}



#board{

width:360px;

height:360px;

margin:auto;

padding:10px;

background:#111827;

border-radius:20px;

display:grid;

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

gap:10px;

box-shadow:
0 0 30px rgba(0,220,255,.2);

}



.tile{

height:77px;

border-radius:12px;

background:#182238;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

font-weight:bold;

transition:.15s;

}



.tile.pop{

animation:pop .2s;

}



@keyframes pop{

from{

transform:scale(0);

}

to{

transform:scale(1);

}

}



button{

margin-top:25px;

padding:12px 35px;

border:none;

border-radius:12px;

font-size:18px;

cursor:pointer;

}



.back{

position:absolute;

top:25px;

left:25px;

color:white;

text-decoration:none;

}



#message{

margin-top:20px;

color:#00eaff;

}



@media(max-width:450px){

#board{

width:320px;

height:320px;

}


.tile{

height:67px;

font-size:25px;

}

}