body{
margin:0;
padding:0;
font-family:Arial;
background:url("assets/bg.png") center/cover no-repeat;
height:100vh;
overflow:hidden;
}

.overlay{
text-align:center;
padding-top:10px;
}

.title{
color:#ffd700;
font-size:22px;
margin-bottom:10px;
}

.boxes{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:8px;
width:92%;
margin:auto;
}

.box{
background:linear-gradient(#ffb300,#ff8c00);
height:60px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
color:white;
box-shadow:0 0 10px #ffae00;
transition:0.2s;
}

.box:hover{
transform:scale(1.1);
}

.spinBtn{
margin-top:12px;
background:#ff0000;
color:white;
border:none;
padding:10px 25px;
font-size:16px;
border-radius:8px;
cursor:pointer;
box-shadow:0 0 15px red;
}

#result{
margin-top:10px;
color:#00ffd5;
font-size:18px;
font-weight:bold;
}

/* MOBILE */
@media (max-width:768px){

.title{
font-size:18px;
}

.boxes{
grid-template-columns:repeat(1,1fr);
gap:6px;
}

.box{
height:48px;
font-size:11px;
}

.spinBtn{
font-size:14px;
padding:8px 20px;
}

#result{
font-size:16px;
}

}