* {
    margin: 0;
    padding: 0;
    border: 0;
}

html,
body {
    -ms-touch-action: none
}

html {
    background: rgba(0, 0, 0, 0.85);
    overflow: hidden
}

img {
    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: 900px;
    height: 600px;
    margin: 0 auto;
}

.wrapper .game-box {
    position: relative;
    width: 100%;
}

.wrapper .game-box .toolbar {
    font-size: 24px;
    line-height: 104px;
    position: relative;
    width: 100%;
    height: 104px;
    background: url('images/toolbar3.png') center no-repeat;
    background-size: cover;
}

.wrapper .game-box .toolbar .time {
    line-height: 34px;
    position: absolute;
    top: 32px;
    left: 80px;
}

.wrapper .game-box .toolbar .more {
    /* line-height: 34px; */
    position: absolute;
    top: 0px;
    left: 180px;
    width: 68px;
    height: 74px;
    cursor: pointer;
}

.wrapper .game-box .toolbar .pause {
    line-height: 34px;
    position: absolute;
    top: 0px;
    left: 280px;
    width: 70px;
    height: 74px;
    cursor: pointer;
}

.wrapper .game-box .toolbar .level {
    line-height: 34px;
    position: absolute;
    top: 20px;
    left: 380px;
    height: 34px;
}

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

.wrapper .game-box .toolbar .disorder {
    position: absolute;
    left: 471px;
    width: 65px;
    height: 74px;
    cursor: pointer;
}

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

.wrapper .game-box .toolbar .scoring {
    line-height: 34px;
    position: absolute;
    top: 30px;
    left: 695px;
    width: 205px;
    height: 34px;
}

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

.wrapper .game-box .toolbar .hint {
    position: absolute;
    left: 555px;
    width: 65px;
    height: 74px;
    cursor: pointer;
}

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

.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 td {
    width: 65px;
    height: 80px;
    text-align: center;
    vertical-align: middle;
}

.wrapper .game-box .game-area table#game .game-row td .pic-box {
    line-height: 78px;
    display: inline-block;
    width: 65px;
    height: 78px;
    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: 65px;
    height: 78px;
    display: inline-block;
    /* border-radius: 16px;  */
    background: url('images/active.png') center no-repeat;
    background-size: contain;
}

.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: 900px;
    height: 560px;
}

.wrapper .game-over {
    position: absolute;
    top: 0;
    width: 900px;
    height: 600px;
    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: 180px;
    left: 300px;
    width: 350px;
    height: 60px;
    text-align: center;
}

.wrapper .game-over .history-score {
    font-size: 20px;
    position: absolute;
    top: 300px;
    left: 400px;
    width: 350px;
    height: 60px;
    color: #999;
}

.wrapper .game-over .over-replay-btn {
    position: absolute;
    top: 387px;
    left: 301px;
    width: 104px;
    height: 100px;
    cursor: pointer;
}

.wrapper .game-over .over-more-btn {
    position: absolute;
    top: 387px;
    left: 494px;
    width: 104px;
    height: 100px;
    cursor: pointer;
}

.wrapper .game-pause {
    position: absolute;
    top: 0;
    width: 900px;
    height: 600px;
    background: rgba(0, 0, 0, .4) url('images/game-pause.png') center no-repeat;
    /* background-size: auto; */
}

.wrapper .game-pause .pause-resume-btn {
    position: absolute;
    top: 180px;
    left: 397px;
    width: 104px;
    height: 100px;
    cursor: pointer;
}

.wrapper .game-pause .pause-home-btn {
    position: absolute;
    top: 315px;
    left: 300px;
    width: 104px;
    height: 100px;
    cursor: pointer;
}

.wrapper .game-pause .pause-more-btn {
    position: absolute;
    top: 315px;
    left: 496px;
    width: 104px;
    height: 100px;
    cursor: pointer;
}

.empty {
    opacity: 0;
}

.hidden {
    display: none;
}

.number {
    display: inline-block;
    width: 34px;
    height: 34px;
    background-size: contain;
}

#loading {
    z-index: 1;
    background: #fff
}

#gameContainer {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0
}

#rotateHint {
    background: rgba(255, 255, 255, 0.85);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    display: none;
    z-index: 99999;
    font-family: Arial, Helvetica, Sans-serif;
    padding: 2em;
    color: #000
}

#rotateHint h2 {
    font-size: 20px
}

#rotateHint img.rotate {
    width: 80%;
    max-width: 400px
}

#rotateHint #rotateClose {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer
}

.backPos {
    position: absolute;
    left: 0;
    top: 0
}

.progressbar {
    position: absolute;
    top: 300px;
    left: 150px;
    width: 600px;
    border-radius: 8px;
    padding: 4px;
    background-color: #fff;
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4) inset;
    border-collapse: separate
}

.progressbar>div {
    width: 0;
    height: 15px;
    border-radius: 10px;
    background: #b61515;
    background: -moz-linear-gradient(top, hsl(120, 98%, 48%) 0, #096d1c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #096d1c), color-stop(100%, #096d1c));
    background: -webkit-linear-gradient(top, #096d1c 0, #096d1c 100%);
    background: -o-linear-gradient(top, #096d1c 0, #096d1c 100%);
    background: -ms-linear-gradient(top, #096d1c 0, #096d1c 100%);
    background: linear-gradient(to bottom, #096d1c 0, #096d1c 100%)
}

.mouse2Div {
    cursor: pointer
}

#title {
    animation-name: flyIn;
    animation-duration: 2s;
}

@-webkit-keyframes flyIn {
    0% {
        top: -100px;
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes flyIn {
    0% {
        top: -100px;
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flyUp {
    0% {
        -webkit-transform: translateY(600px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes flyUp {
    0% {
        transform: translateY(600px);
    }
    100% {
        transform: translateY(0);
    }
}

.flyUp {
    -webkit-animation-name: flyUp;
    animation-name: flyUp;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}