*{border:0;box-sizing:border-box;text-decoration:none;margin:0;padding:0;}
body{position:relative;}
ul{list-style:none;}
header{position:relative;padding:5px;}
#menu{position:absolute;display:flex;gap:5px;}
#menu button{width:2em;height:2em;border:1px solid #333;background-color:#eee;}
#stats{display:none;}
#start{position:absolute;right:5px;display:none;}
#start button{height:2em;border:1px solid #333;padding:0 5px;}
h1{text-align:center;font-size:1.5em;}
.tile{border:1px solid transparent;width:2em;height:2em;display:inline-block;text-align:center;line-height:1em;padding-top:0.5em;font-weight:bold;}
.word{display:flex;gap:5px;}
button.close{position:absolute;right:0;width:2em;height:2em;border:1px solid #333;}
#help,#stats{position:absolute;background-color:#fff;display:none;padding:10px;top:0;width:calc(100% - 10px);}
#help p{margin-bottom:1em;}
.tile{border:1px solid #999;color:#333;}
.null{color:transparent;}
.hit,#keyboard button.hit{ background-color:#009442;color:#fff;transition: all 1s ease;}
.false,#keyboard button.false{background-color:#666;color:#fff;transition: all 1s ease;}
.blow,#keyboard button.blow{background-color: #bd9c01;color:#fff;transition: all 1s ease;}
#share a{border-radius:2px;background-color:#009442;color:#fff;padding:5px 10px;}
#answer{text-align:center;}
#answer > ul{display:inline-block;height:2em;}
#answer ul >li{margin-bottom:5px;height:2em;}
#keyboard{margin:1em auto 0 auto;max-width:640px;}
#keyboard ul{display:flex;flex-wrap:wrap;gap:5px;justify-content: center;}
#keyboard ul li{width:calc(10% - 5px); text-align:center;}
#keyboard ul li.key{width:calc(20% - 10px); text-align:center;}
#keyboard button{height:3em;border-radius:2px;width:100%;background-color:#eee;}#result{height:0;position:absolute;top:2em;left:1em;margin:1em auto;text-align:center;background-color:#fff;width:calc(100% - 2em);}
#result button{display:none;}
#result.open{height:20em;max-height:100%;padding:5px 5px 2em 5px;border:1px solid #333;transition: all 1s ease;}
#result.open button{display:inline-block;}

#result h1{margin:1em auto 2em auto;}
#result #mes{margin:1em auto 2em auto;}
#result button.close{right:5px;}
.shake{
 animation:shake 1s infinite;
}

@keyframes shake {
  50% {transform: scale(1, 1);}
  52% {transform: scale(0.98, 0.95)}
  54% {transform: scale(1, 1);}
  56% {transform: scale(0.98, 0.95)}
  58% {transform: scale(1, 1);}
  60% {transform: scale(0.98, 0.95)}
}