@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');


*{
box-sizing:border-box;
}


body{

margin:0;
min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

font-family:'Fredoka',sans-serif;

background:
radial-gradient(circle at top,#667eea,#141e30);

color:white;

overflow:hidden;

}




#app{

width:95%;
max-width:420px;

min-height:90vh;

padding:20px;

border-radius:35px;

background:
rgba(255,255,255,0.15);

backdrop-filter:blur(15px);

box-shadow:
0 15px 40px rgba(0,0,0,.4);

text-align:center;

}




h1{

font-size:34px;

margin:10px 0;

font-weight:700;

text-shadow:
0 5px 15px rgba(0,0,0,.3);

}




button{

width:100%;

max-width:330px;

height:55px;

margin:10px auto;

display:block;

border:none;

border-radius:25px;

font-family:'Fredoka';

font-size:19px;

font-weight:600;

background:white;

color:#333;

box-shadow:
0 8px 20px rgba(0,0,0,.25);

transition:.2s;

cursor:pointer;

}



button:hover{

transform:translateY(-3px) scale(1.03);

}


button:active{

transform:scale(.94);

}






.score{

display:flex;

justify-content:space-around;

gap:10px;

margin:20px 0;

}



.score p{

background:white;

color:#333;

padding:10px;

border-radius:20px;

font-size:18px;

min-width:80px;

box-shadow:
0 8px 20px rgba(0,0,0,.2);

}





.board{

width:100%;

max-width:330px;

margin:20px auto;

display:grid;

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

gap:12px;

}





.board button{


aspect-ratio:1;

margin:0;

padding:0;

font-size:55px;

border-radius:25px;

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

color:#222;


}




.board button.pop{

animation:pop .2s ease;

}




@keyframes pop{

0%{

transform:scale(.5);

}


100%{

transform:scale(1);

}

}





#status{

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

padding:12px;

border-radius:20px;

font-size:20px;

}





#loadingScreen{

position:fixed;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:
linear-gradient(135deg,#667eea,#764ba2);

z-index:10;

}




#loadingScreen h1{

font-size:80px;

animation:float 1s infinite alternate;

}





@keyframes float{


from{

transform:translateY(0);

}


to{

transform:translateY(-15px);

}


}





@media(max-height:700px){


#app{

min-height:auto;

padding:15px;

}


h1{

font-size:26px;

}



.board button{

font-size:42px;

}


}