@-webkit-keyframes flash {
  0%,50%,100%{
    opacity:1;
  }
  25%,75% {
    opacity:0.3;
  }
}
@keyframes flash {
  0%,50%,100%{
    opacity:1;
  }
  25%,75% {
    opacity:0.3;
  }
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.game-bg-mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.86);
    z-index: 500;
}
.drag-ball {
    left: 0;
}
.time-bar {
    position: absolute;
    width: 89%;
    height: 0.35%;
    left: 0;
    right: 0;
    top: 0;
    margin: 43.9% auto 0;
    /* outline: 1px solid #f00; */
}
.time-bar>div {
    height: 100%;
    width: 0%;
    background-color: #7f5c32;
}
.game-tuts-box {
    width: 100%;
    height: 100%;
    z-index: 510;
}
.tut-count {
    width: 20%;
    left: 20%;
    margin-top: 82.5%;
    text-align: center;
    font-size: 1.5em;
    color: #f1e6dc;
    font-family: sans-serif;
    /* outline: 1px solid #f00; */
    font-weight: bold;
}
.game-tuts {
    width: 92.96875%;
    margin-top: 4%;
}
.game-tuts-gif {
    width: 77%;
    left: 14%;
    margin-top: 13%;
}
.btn-play {
    width: 34.375%;
    margin-top: 121%;
}
.btn-sound {
    position: absolute;
    width: 10.15625%;
    top: 0;
    right: 4.6875%;
    margin-top: 3.375%;
    z-index: 110;
    overflow: hidden;
}
.btn-sound>img {
    position: relative;
    width: 200%;
    top: 0;
    left: 0;
}
.btn-sound.is-mute>img {
    left: -100%;
}
.chicken-walk,
.chicken-egg {
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: -1%;
    /* outline: 1px solid #f00; */
}
.chicken-walk.hide,
.chicken-egg.hide {
    display: none;
}
.freeze {
    width: 100%;
    height: 100%;
}
.game-canvas {
    /* outline: 1px solid #f00; */
    width: 88%;
    /* height: 33.37%; */
    left: 6%;
    margin-top: 46%;
}
.game-txt-ui {
    color: #512d05;
    font-family: sans-serif;
    /* outline: 1px solid #f00; */
    font-weight: bold;
    font-size: 1.7em;
    
}
.game-ui-mask-1 { /* 擋住分數和秒數不被使用者點到 */
    width: 100%;
    left: 0;
    margin-top: 20%;
    padding-top: 22%;
    /* outline: 1px solid #2ecc71; */
}
.game-ui-mask-2 { /* 擋住combo分數不被使用者點到 */
    width: 40%;
    left: 0;
    right: 0;
    margin: 8% auto 0;
    padding-top: 15%;
    /* outline: 1px solid #2ecc71; */
}
.game-score {
    width: 27.5%;
    left: 6.5%;
    margin-top: 26%;
    text-align: center;
}
.game-time {
    width: 16%;
    left: 67%;
    margin-top: 26%;
    text-align: right;
}
.game-count {
    display: none;
    width: 33%;
    right: 0;
    left: 0;
    margin: 10% auto 0;
    color: #fff;
    opacity: 0;
    /* outline: 1px solid #2ecc71; */
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    -webkit-text-shadow:0 0 2px black, 0 0 2px black;
    text-shadow:0 0 2px black, 0 0 2px black;
    font-family: sans-serif;
}
.game-slogan {
    display: none;
    width: 100%;
    left: 0;
    margin-top: 104%;
}
.time-up {
    width: 100%;
    margin-top: 74%;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    color: #fff;
    font-size: 3em;
}
.count-down {
    width: 100%;
    margin-top: 55%;
    overflow: hidden;
}
.cd-txt {
    position: relative;
    width: 100%;
    font-size: 10em;
    font-weight: bold;
    font-family: sans-serif;
    color: #fff;
    text-align: center;
    margin: auto;
}