main.css

* {
  margin: 0;
  padding: 0;

  border: 0;
}

body {
  padding-top: 100px;
  /*火狐*/

  -webkit-user-select: none;
     -moz-user-select: none;
  /*webkit浏览器*/
      -ms-user-select: none;
  /*早期浏览器*/
          user-select: none; 

  background: #000;
  /*IE10*/

   -khtml-user-select: none;
}

.wrapper {
  position: relative;

  width: 800px;
  height: 660px;
  /*border: 1px solid #ccc;*/
  margin: 0 auto;

  background: url('images/game-bg.png') center no-repeat;
  background-size: cover;
}

.wrapper .init-box {
  position: relative; 

  width: 100%;
  height: 100%;

  background: url('images/start-cover.png') center no-repeat;
  background-size: cover;
}

.wrapper .init-box .start-btn {
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;

  width: 149px;
  height: 208px;
  margin: 0 auto;

  cursor: pointer;
}

.wrapper .game-box {
  position: relative; 

  width: 100%;
}

.wrapper .game-box .toolbar {
  font-size: 24px;
  line-height: 92px;

  position: relative; 

  width: 100%;
  height: 92px;

  background: url('images/toolbar3.png') center no-repeat;
  background-size: cover;
}

.wrapper .game-box .toolbar .time {
  line-height: 34px; 

  position: absolute;
  top: 15px;
  left: 110px;
}

.wrapper .game-box .toolbar .level {
  line-height: 34px; 

  position: absolute;
  top: 12px;
  left: 294px;

  height: 34px;
}

.wrapper .game-box .toolbar .level img {
  height: 34px;
}

.wrapper .game-box .toolbar .disorder {
  position: absolute;
  left: 341px;

  width: 120px;
  height: 84px;

  cursor: pointer;
}

.wrapper .game-box .toolbar .disorder img {
  position: absolute;
  top: 40px; 
  right: 0;
}

.wrapper .game-box .toolbar .scoring {
  line-height: 34px;

  position: absolute;
  top: 15px;
  left: 530px;

  width: 251px;
  height: 34px;

  cursor: pointer;
}

.wrapper .game-box .toolbar .scoring img {
  height: 34px;
}

.wrapper .game-box .game-area {
  position: relative;
}

.wrapper .game-box .game-area table#game {
  border-spacing: 0; 
  border-collapse: collapse;
}

.wrapper .game-box .game-area table#game .game-row {
  height: 80px;
}

.wrapper .game-box .game-area table#game .game-row td {
  width: 80px;
  height: 80px;

  text-align: center;
  vertical-align: middle;
}

.wrapper .game-box .game-area table#game .game-row td .pic-box {
  line-height: 64px;

  display: inline-block;

  width: 64px;
  height: 64px;

  cursor: pointer;

  background: url('images/pic-bg.png') center no-repeat;
  background-size: contain;
}

.wrapper .game-box .game-area table#game .game-row td .pic-box.active {
  width: 80px;
  height: 80px;

  border-radius: 16px; 
  background: url(images/active.png) center no-repeat;
  background-size: 124%;
}

.wrapper .game-box .game-area table#game .game-row td .pic-box img {
  vertical-align: middle;
}

.wrapper .game-box .game-area #canvas {
  position: absolute;
  left: 0;
  top: 0;

  width: 800px;
  height: 560px;
}

.wrapper .game-over {
  position: absolute;
  top: 0;

  width: 800px;
  height: 660px;

  background: rgba(0, 0, 0, .4) url(images/game-over.png) center no-repeat;
  background-size: auto;
}

.wrapper .game-over .current-score {
  position: absolute;
  top: 320px;
  left: 241px;

  width: 350px;
  height: 60px;

  text-align: center;
}

.wrapper .game-over .history-score {
  font-size: 20px; 

  position: absolute;
  top: 436px;
  left: 411px;

  width: 200px;
  height: 30px;

  color: #999;
}

.wrapper .game-over .replay-btn {
  position: absolute;
  top: 396px;
  left: 300px;

  width: 200px;
  height: 30px;

  cursor: pointer;
}

.empty {
  opacity: 0;
}

.hidden {
  display: none;
}

.number {
  display: inline-block;

  width: 34px; 
  height: 34px;

  background-size: contain;
}

/*# sourceMappingURL=index.css.map */