*{
  box-sizing:border-box;
}
#demo{
  width:100vmin;
  margin:0 auto;
  position:relative;
  left:0;
  top:0;
  user-select:none;
}
ul{
	display: flex;
	flex-wrap: wrap;
  max-width:100%;
  overflow:hidden;
  user-select:none;
}
li{
  width:20vmin;
  height:20vmin;
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  cursor:pointer;
}
li i{
  display:block;
  width:100%;
  height:100%;
}
li i{
  border:8px solid rgba(0,0,0,0.1);
}
li:hover i{
  border:8px solid #00f;
}
li.open i{
  border:8px solid #000;
  background-color:rgba(0,0,0,0.6);
  cursor:crosshair
}
li.select i{
  border:8px solid #0f0;
}

li i span{
  display:block;
  color:transparent;
  padding:4px;
  font-size:9px;
}
.clear li i span,
.gameover i span{
  color:#0f0;
  background-color:rgba(0,0,0,0.6);
}
.clear li i span.user,
.gameover li i span.user{
  color:#eee;
  background-color:rgba(0,0,0,0.6);
}

h1{
  font-size:24px;
  font-weight:bold;
}

#words{
  display:none;
}
#wordWrap{
	display: flex;
	flex-wrap: wrap;
}
#timer{
  color:#666;
  position:absolute;
  right:0;
  top:0;
  font-size:48px;
  width:20vmin;
  height:20vmin;
  line-height:20vmin;
  font-weight:bold;
  text-align:center;
}
#life{
  position:absolute;
  left:0;
  top:15vmin;
}
#life i{
  display:inline-block;
  width:5vmin;
  height:5vmin;
  background-image:url(img/life.png);
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
}
#stage{
  position:absolute;
  left:0;
  top:0;
  font-size:24px;
  font-weight:bold;
}
#wordEnd{
  border:8px solid #000;
  width:20vmin;
  height:20vmin;
  font-size:64px;
  text-align:center;
  line-height:20vmin;
  font-weight:bold;
}
#wordEnd.gameover{
  border:8px solid #f00;
  color:#f00;
}
#lastWord{
  width:60vmin;
  height:20vmin;
  font-size:24px;
  line-height:20vmin;
  text-align:right;
  padding-right:8%;
}
#under{
  position:relative;
  right:0;
  top:0;
}

#stars{
  position:absolute;
  left:0;
  top:0;
  text-align:center;
  width:100%;
}
#stars i{
  display:inline-block;
  width:5vmin;
  height:5vmin;
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
}
#stars i.star{
  background-image:url(img/star.png);
}
#stars i.star0{
  display:inline-block;
  background-image:url(img/star0.png);
}

#wordLog{
  padding:24px;
}
#btn{
  position:absolute;
  right:0;
  top:0;
  z-index:5;
  width:10vmin;
  height:10vmin;
  text-align:center;
  line-height:10vmin;
  margin:5vmin;
  border-radius:50%;
  font-weight:bold;
  font-size:32px;
  background-image:url(img/next.png);
  background-size:contain;
  background-position:50%;
  background-repeat:no-repeat;
  cursor:pointer;
  border-radius:50%;
  display:none;
}

#btn:hover{
  background-color:rgba(0,255,0,0.2);
}
#btn.show{
  display:block;
}

#correctLog{
  padding:24px;
  color:transparent;
}
#correctLog.show{
  color:#0a0;
}

#message{
  color:#666;
  font-size:32px;
  line-height:20vh;
  text-align:center;
}
.gameover #message{
  color:#f00;
}
.clear #message{
  color:#0f0;
}


.beat-ani{
display:inline-block;
  animation-name: beat;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}

@keyframes beat{
  0%{transform:scale(1,1);}
  5%{transform:scale(0.9,0.9);}
  10%{transform:scale(1.4,1.4);}
  30%{transform:scale(1.05,1.05);
  60%{transform:scale(1,1);}
}