/**
 * Created by Dean on 2018/3/5.
 */
html,body{height:100%;margin:0;}
body{background: #092756;display:flex;flex-direction: column;justify-content: center;align-items:center;
    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%)}
.head{display:flex;justify-content: center;}
.scroebox,.manubox,.mainbox{position:relative;color:lightyellow;overflow: hidden;
    -webkit-box-shadow:  0 0 2px white;-moz-box-shadow:  0 0 2px white;box-shadow:  0 0 2px white;
    -webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}
.scroebox{line-height:14px;text-align: center;font-size:12px;margin:20px 10px;}
.score{font-size:30px;line-height:30px;height:30px;color:tan;padding-bottom:10px}
.fadescore{position:absolute;left:0;right:0;top:50%;text-align: center;font-size:20px;color:gold;}
.manubox{margin-top:20px;auto;padding:0 10px;font-size:12px;color:darkgray;}
.mainbox{width:90%;max-width:480px;max-height:480px;}
.cell,.cellbg{width:20%;height:20%;color:palegoldenrod;
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
    -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.cellbg{float:left;margin:2.085%;border:1px dashed white;position:relative;background:#ddd;opacity: .025;width:20.835%;height:20.835%;}
.cell{position:absolute;text-align: center;font-size:30px;font-weight:bolder;text-shadow: 0 0 3px white;overflow:hidden;
    -webkit-box-shadow: inset 0 0 2px white;-moz-box-shadow: inset 0 0 2px white;box-shadow: inset 0 0 2px white;
    -webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);
    -webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;transition: .3s;}
.mainbox:before,.cell:before,.cell:after,.scroebox:before,.manubox:before,.newGame:before{
    position:absolute;content:"";background:white;top:0;bottom:0;left:0;right:0;opacity: .05;z-index: -1}
.cell:after{opacity: .05;left:-30%;right:60%;top:-50%;bottom:-37%;
    -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
.row1{top:4%;}
.row2{top:28%;}
.row3{top:52%;}
.row4{top:76%;}
.col1{left:4%;}
.col2{left:28%;}
.col3{left:52%;}
.col4{left:76%;}
.step{-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.tt{font-size:14px;}
.newGame{color:lightblue;cursor:pointer;float:right;font-size:14px;padding:4px 15px;border:1px solid lightslategray;position:absolute;overflow: hidden;right:5px;top:5px;
    -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
.newGame,.newGame:before{-webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;transition: .3s;}
.newGame:hover{color:aqua;}
.newGame:hover:before{opacity: .1}
@-webkit-keyframes scoreadd0 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(-45px,-100%); transform: translate(-45px,-100%);}
}
@keyframes scoreadd0 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(-45px,-100%); transform: translate(-45px,-100%); }
}

@-webkit-keyframes scoreadd1 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(-35px,-100%); transform: translate(-35px,-100%);}
}
@keyframes scoreadd1 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(-35px,-100%); transform: translate(-35px,-100%); }
}

@-webkit-keyframes scoreadd2 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(-25px,-100%); transform: translate(-25px,-100%);}
}
@keyframes scoreadd2 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(-25px,-100%); transform: translate(-25px,-100%); }
}

@-webkit-keyframes scoreadd3 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(-15px,-100%); transform: translate(-15px,-100%);}
}
@keyframes scoreadd3 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(-15px,-100%); transform: translate(-15px,-100%); }
}

@-webkit-keyframes scoreadd4 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(-5px,-100%); transform: translate(-5px,-100%);}
}
@keyframes scoreadd4 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(-5px,-100%); transform: translate(-5px,-100%); }
}

@-webkit-keyframes scoreadd5 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(5,-100%); transform: translate(5,-100%);}
}
@keyframes scoreadd5 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(5,-100%); transform: translate(5,-100%); }
}

@-webkit-keyframes scoreadd6 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(15px,-100%); transform: translate(15px,-100%);}
}
@keyframes scoreadd6 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(15px,-100%); transform: translate(15px,-100%); }
}

@-webkit-keyframes scoreadd7 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(25px,-100%); transform: translate(25px,-100%);}
}
@keyframes scoreadd7 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(25px,-100%); transform: translate(25px,-100%); }
}

@-webkit-keyframes scoreadd8 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(35px,-100%); transform: translate(35px,-100%);}
}
@keyframes scoreadd8 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(35px,-100%); transform: translate(35px,-100%); }
}

@-webkit-keyframes scoreadd9 {
    from {opacity: 1;}to {opacity: 0;-webkit-transform: translate(45px,-100%); transform: translate(45px,-100%);}
}
@keyframes scoreadd9 {
    from {opacity: 1;}to { opacity: 0;-webkit-transform: translate(45px,-100%); transform: translate(45px,-100%); }
}

.scoreadd0 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd0;animation-name: scoreadd0;}
.scoreadd1 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd1;animation-name: scoreadd1;}
.scoreadd2 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd2;animation-name: scoreadd2;}
.scoreadd3 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd3;animation-name: scoreadd3;}
.scoreadd4 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd4;animation-name: scoreadd4;}
.scoreadd5 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd5;animation-name: scoreadd5;}
.scoreadd6 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd6;animation-name: scoreadd6;}
.scoreadd7 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd7;animation-name: scoreadd7;}
.scoreadd8 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd8;animation-name: scoreadd8;}
.scoreadd9 {-webkit-animation-duration: 1s; animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: scoreadd9;animation-name: scoreadd9;}