body{

margin:0;
font-family:'Fredoka', sans-serif;
text-align:center;
background-position: center center;

background:url("bg.webp");
background-size:cover;

}

/* overlay */

body::before{

content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255,255,255,0.7);
z-index:-1;

}

/* MENU */

.menu{

padding:40px;

}

.title{

font-size:45px;
color:#ff6b00;

}

.subtitle{

font-size:18px;
margin-bottom:30px;

}

.menu-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:20px;
max-width:800px;
margin:auto;

}

.card{

background:white;
border-radius:20px;
padding:25px;
box-shadow:0 8px 16px rgba(0,0,0,0.2);
cursor:pointer;
transition:0.2s;

}

.card:hover{

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

}

.icon{

font-size:40px;

}

.card.coming{

opacity:0.6;

}

/* GAME */

.options{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
max-width:500px;
margin:20px auto;

}

.options img{

width:100%;
border-radius:15px;
cursor:pointer;
box-shadow:0 6px 12px rgba(0,0,0,0.2);
transition:0.2s;

}

.options img:hover{

transform:scale(1.05);

}

#result{

font-size:24px;
font-weight:bold;
color:#ff6b00;

}

.next-btn{

padding:14px 25px;
border:none;
border-radius:12px;
background:#ff6b00;
color:white;
font-size:16px;
cursor:pointer;

}

.next-btn:hover{

background:#ff7f2a;

}

/* STAR ANIMATION */

.star{

position:fixed;
color:gold;
font-size:25px;
animation:fall 2s linear;

}

@keyframes fall{

0%{transform:translateY(-50px);}
100%{transform:translateY(600px);}

}