*{
box-sizing:border-box;
}

body{
margin:0;
height:100vh;
background:#fff;
font-family:Arial, sans-serif;
display:flex;
justify-content:center;
align-items:center;
}

.google-box{
width:95%;
max-width:420px;
text-align:center;
}

h1{
font-size:32px;
font-weight:600;
margin-bottom:40px;
}

.dice-area{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
}

.dice{
width:70px;
height:70px;
background:white;
border-radius:12px;
box-shadow:0 3px 12px rgba(0,0,0,.18);
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
font-weight:bold;
}

.rolling{
animation:shake .25s infinite;
}

@keyframes shake{
0%{transform:rotate(0deg)}
25%{transform:rotate(8deg)}
50%{transform:rotate(-8deg)}
75%{transform:rotate(8deg)}
100%{transform:rotate(0deg)}
}

#status{
margin-top:35px;
font-size:20px;
}

#total{
font-size:42px;
font-weight:bold;
margin-top:10px;
}

@media(max-width:480px){
h1{
font-size:28px;
}
.dice{
width:58px;
height:58px;
font-size:26px;
}
}