body{
font-family:Arial, Helvetica, sans-serif;
text-align:center;
background:#fff;
}

.score{
font-size:20px;
margin-bottom:10px;
}

.honeycomb{
position:relative;
width:300px;
height:260px;
margin:auto;
}

.hex{
position:absolute;
width:90px;
height:90px;
background:#facc15;
border:none;
font-size:26px;
cursor:pointer;

clip-path: polygon(
25% 5%,
75% 5%,
100% 50%,
75% 95%,
25% 95%,
0% 50%
);
}

.center{
background:#f59e0b;
top:85px;
left:105px;
}

.hex1{ top:0; left:105px; }
.hex2{ top:40px; left:185px; }
.hex3{ top:40px; left:25px; }
.hex4{ top:130px; left:185px; }
.hex5{ top:170px; left:105px; }
.hex6{ top:130px; left:25px; }

.controls{
margin-top:20px;
}

input{
padding:10px;
font-size:18px;
width:200px;
text-align:center;
}

button{
padding:8px 14px;
margin:4px;
cursor:pointer;
}

ul{
list-style:none;
padding:0;
margin-top:20px;
}