html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.container > .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.view {
  background: #fff;
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
}
.view .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
  bottom: 5%;
  left: 0;
  width: 100%;
}


/**
Transition
*/
.view.over-layer {
  animation: open-view 750ms linear 300ms;
  animation-fill-mode: forwards;
  clip-path: circle(0% at center);
  display: flex;
  z-index: 200;
}
.view.under-layer {
  display: flex;
  z-index: 99;
}
.view.under-layer:after {
  animation: open-view 750ms;
  animation-fill-mode: forwards;
  /* background: #ff8a00; */
  background: #FFB866;
  clip-path: circle(0% at center);
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 150;
}
.loading-view {
  display: flex;
  z-index: 1;
}

@keyframes open-view {
  0% {
    clip-path: circle(0% at center);
  }
  100% {
    clip-path: circle(100% at center);
  }
}


/**
Button
*/
.btn {
  background: url(../img/btns.png) no-repeat;
  border: none;
  display: inline-block;
  padding-top: 35%;
  width: 35%;
}
.btn + .btn {
  margin-left: 5%;
}
.btn-select {
  background-position: 0 0;
  background-size: 300% 582.4%;
}
.btn-howto {
  background-position: 50% 0;
  background-size: 300% 582.4%;
}
.btn-back {
  background-position: 100% 0;
  background-size: 300% 582.4%;
}
.btn-next {
  background-position: 0 100%;
}
.btn-end {
  background-position: 50% 100%;
}
.btn-reload {
  background-position: 100% 20.72%;
  background-size: 300% 582.4%;
}
.btn-other {
  background-position: 100% 39.70%;
  background-size: 100% 740.55%;
  margin-left: 0 !important;
  margin-top: 5%;
  padding: 0;
  width: 75%;
}
.btn-other:before {
  content: '';
  display: block;
  padding-top: 26.21%;
}
.btn-next {
  background-position: 0 20.72%;
  background-size: 225.22% 582.98%;
  padding-top: 33.33%;
  width: 44.44%;
}
.btn-play-easy {
  background-position: 0 57.95%;
  background-size: 100% 574.85%;
  padding-top: 24.44%;
  width: 71.66%;
}
.btn-play-normal {
  background-position: 0 78.98%;
  background-size: 100% 574.85%;
  padding-top: 24.44%;
  width: 71.66%;
}
.btn-play-hard {
  background-position: 0 100%;
  background-size: 100% 574.85%;
  padding-top: 24.44%;
  width: 71.66%;
}


/**
Number
*/
.numbers [data-number] {
  background-image: url(../img/sprite.png);
  background-repeat: no-repeat;
  position: relative;
}
.numbers [data-number]:before {
  content: '';
  display: block;
}


/**
Quota Number
*/
.quota .numbers > * + * {
  margin-top: -5%;
}
.quota .numbers [data-number] {
  background-position-x: 100%;
}
.quota .numbers [data-number="1"] {
  background-position-y: 0;
  background-size: 246.10% 1277.33%;
}
.quota .numbers [data-number="1"]:before {
  padding-top: 48.70%;
}
.quota .numbers [data-number="2"] {
  background-position-y: 9.26%;
  background-size: 246.10% 1019.15%;
}
.quota .numbers [data-number="2"]:before {
  padding-top: 61.04%;
}
.quota .numbers [data-number="3"] {
  background-position-y: 20.44%;
  background-size: 246.10% 987.63%;
}
.quota .numbers [data-number="3"]:before {
  padding-top: 62.99%;
}
.quota .numbers [data-number="4"] {
  background-position-y: 31.93%;
  background-size: 246.10% 958.00%;
}
.quota .numbers [data-number="4"]:before {
  padding-top: 64.94%;
}
.quota .numbers [data-number="5"] {
  background-position-y: 43.44%;
  background-size: 246.10% 987.63%;
}
.quota .numbers [data-number="5"]:before {
  padding-top: 62.99%;
}
.quota .numbers [data-number="6"] {
  background-position-y: 55.41%;
  background-size: 246.10% 967.68%;
}
.quota .numbers [data-number="6"]:before {
  padding-top: 64.29%;
}
.quota .numbers [data-number="7"] {
  background-position-y: 65.56%;
  background-size: 246.10% 1182.72%;
}
.quota .numbers [data-number="7"]:before {
  padding-top: 52.60%;
}
.quota .numbers [data-number="8"] {
  background-position-y: 76.28%;
  background-size: 246.10% 977.55%;
}
.quota .numbers [data-number="8"]:before {
  padding-top: 63.64%;
}
.quota .numbers [data-number="9"] {
  background-position-y: 88.26%;
  background-size: 246.10% 977.55%;
}
.quota .numbers [data-number="9"]:before {
  padding-top: 63.64%;
}
.quota .numbers [data-number="0"] {
  background-position-y: 100%;
  background-size: 246.10% 997.92%;
}
.quota .numbers [data-number="0"]:before {
  padding-top: 62.34%;
}


/**
Warning Number
*/
.warning .numbers > * + * {
  margin-top: -5%;
}
.warning .numbers [data-number] {
  background-position-x: 32%;
}
.warning .numbers [data-number="1"] {
  background-position-y: 0;
  background-size: 246.10% 1277.33%;
}
.warning .numbers [data-number="1"]:before {
  padding-top: 48.70%;
}
.warning .numbers [data-number="2"] {
  background-position-y: 9.26%;
  background-size: 246.10% 1019.15%;
}
.warning .numbers [data-number="2"]:before {
  padding-top: 61.04%;
}
.warning .numbers [data-number="3"] {
  background-position-y: 20.44%;
  background-size: 246.10% 987.63%;
}
.warning .numbers [data-number="3"]:before {
  padding-top: 62.99%;
}
.warning .numbers [data-number="4"] {
  background-position-y: 31.93%;
  background-size: 246.10% 958.00%;
}
.warning .numbers [data-number="4"]:before {
  padding-top: 64.94%;
}
.warning .numbers [data-number="5"] {
  background-position-y: 43.44%;
  background-size: 246.10% 987.63%;
}
.warning .numbers [data-number="5"]:before {
  padding-top: 62.99%;
}
.warning .numbers [data-number="6"] {
  background-position-y: 55.41%;
  background-size: 246.10% 967.68%;
}
.warning .numbers [data-number="6"]:before {
  padding-top: 64.29%;
}
.warning .numbers [data-number="7"] {
  background-position-y: 65.56%;
  background-size: 246.10% 1182.72%;
}
.warning .numbers [data-number="7"]:before {
  padding-top: 52.60%;
}
.warning .numbers [data-number="8"] {
  background-position-y: 76.28%;
  background-size: 246.10% 977.55%;
}
.warning .numbers [data-number="8"]:before {
  padding-top: 63.64%;
}
.warning .numbers [data-number="9"] {
  background-position-y: 88.26%;
  background-size: 246.10% 977.55%;
}
.warning .numbers [data-number="9"]:before {
  padding-top: 63.64%;
}
.warning .numbers [data-number="0"] {
  background-position-y: 100%;
  background-size: 246.10% 997.92%;
}
.warning .numbers [data-number="0"]:before {
  padding-top: 62.34%;
}


/**
Loading View
*/
.loading-view {
  background: rgb(255,242,239);
  background: -moz-linear-gradient(0deg, rgba(255,242,239,1) 0%, rgba(212,212,212,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,242,239,1) 0%, rgba(212,212,212,1) 100%);
  background: linear-gradient(0deg, rgba(255,242,239,1) 0%, rgba(212,212,212,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff2ef",endColorstr="#d4d4d4",GradientType=1);
  display: block;
}
.loading-view.hide {
  display: none;
}
.loading-view:before {
  background: url(../img/loading_text.png) center/cover no-repeat;
  content: '';
  display: block;
  opacity: 0;
  position: relative;
  transition: opacity 1s;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.loading-view .indicator {
  animation: 1.5s identifier linear infinite;
  padding-top: 45%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -73%);
  width: 45%;
}
.loading-view .indicator:before {
  border-radius: 50%;
  border: 1.5rem solid #ff8a00;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.loading-view .indicator:after {
  background: #ff8a00;
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -25%);
  width: 3.5rem;
  height: 3.5rem;
}
.loading-view.fade:before {
  opacity: 1;
}
.dialog-reload {
  background: url(../img/bg_reload.png) center/cover no-repeat;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.dialog-reload.show {
  display: block;
}
.dialog-reload .menu {
  top: 50%;
  bottom: auto;
  transform: translate(0, 40%);
}

@keyframes identifier {
  0% {
    transform: translate(-50%, -73%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -73%) rotate(359.9deg);
  }
}


/**
Title View
*/
.title-view {
  background: url(../img/bg_title.png) center/cover;
}


/**
Howto View
*/
.howto-view {
  background: url(../img/bg_howto.png) center/cover;
}


/**
First Signal View
*/
.first-signal-view {
  background: url(../img/bg_signal1.png) center/cover;
}


/**
Second Signal View
*/
.second-signal-view {
  background: url(../img/bg_signal2.png) center/cover;
}


/**
Select View
*/
.select-view {
  background: url(../img/bg_select.png) center/cover;
}
.select-mode {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 39%;
  width: 100%;
}
.select-mode .btn + .btn {
  margin-left: 0;
  margin-top: 5%;
}


/**
Play View
*/
.play-view {
  background-repeat: no-repeat;
  background-size: cover;
}
.play-view[data-mode="easy"] {
  background-image: url(../img/bg_play_easy.png);
}
.play-view[data-mode="normal"] {
  background-image: url(../img/bg_play_normal.png);
}
.play-view[data-mode="hard"] {
  background-image: url(../img/bg_play_hard.png);
}
.cover, .cover > * {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.cover > * {
  background: url(../img/cover.png) center/cover no-repeat;
  display: none;
}
.cover .left-top {
  transform: rotateX(0deg) rotateY(0deg);
}
.cover .left-bottom {
  transform: rotateX(180deg) rotateY(0deg);
}
.cover .right-top {
  transform: rotateX(0deg) rotateY(180deg);
}
.cover .right-bottom {
  transform: rotateX(180deg) rotateY(180deg);
}
/* 直進 */
.play-view[data-route="left-top-right-bottom"] .cover .left-bottom,
.play-view[data-route="left-top-right-bottom"] .cover .right-top {
  display: block;
}
.play-view[data-route="left-bottom-right-top"] .cover .left-top,
.play-view[data-route="left-bottom-right-top"] .cover .right-bottom {
  display: block;
}
/* 右折(左上左下) */
.play-view[data-route="left-top-left-bottom"] .cover .right-top,
.play-view[data-route="left-top-left-bottom"] .cover .right-bottom {
  display: block;
}
/* 右折(左下右下) */
.play-view[data-route="left-bottom-right-bottom"] .cover .left-top,
.play-view[data-route="left-bottom-right-bottom"] .cover .right-top {
  display: block;
}
/* 右折(右下右上) */
.play-view[data-route="right-bottom-right-top"] .cover .left-top,
.play-view[data-route="right-bottom-right-top"] .cover .left-bottom {
  display: block;
}
/* 右折(右上左上) */
.play-view[data-route="right-top-left-top"] .cover .left-bottom,
.play-view[data-route="right-top-left-top"] .cover .right-bottom {
  display: block;
}
/* 中央の警官 */
.cover:after {
  background-image: url(../img/sprite.png);
  background-repeat: no-repeat;
  background-position: 0 53.77%;
  background-size: 676.79% 1710.71%;
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 5.19%;
  height: 2.92%;
}
.play-view[data-route="left-top-right-bottom"] .cover:after,
.play-view[data-route="left-top-left-bottom"] .cover:after,
.play-view[data-route="right-bottom-right-top"] .cover:after {
  transform: translate3d(-50%, -50%, 0) rotate(90deg);
}
.warning {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.warning > * {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.warning > *:before {
  background: url(../img/cover_red.png) center/cover no-repeat;
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.warning > *:after {
  background-image: url(../img/sprite.png);
  background-repeat: no-repeat;
  background-position: 0 46.67%;
  background-size: 526.39% 1349.30%;
  content: '';
  display: block;
  position: absolute;
  width: 6.66%;
  height: 3.69%;
  z-index: 1;
}
.play-view[data-warning*="left-top"] .warning .left-top,
.play-view[data-warning*="left-bottom"] .warning .left-bottom,
.play-view[data-warning*="right-top"] .warning .right-top,
.play-view[data-warning*="right-bottom"] .warning .right-bottom {
  display: block;
}
.play-view[data-warning*="left-top"] .warning .left-top:before {
  transform: rotateX(0deg) rotateY(0deg);
}
.play-view[data-warning*="left-bottom"] .warning .left-bottom:before {
  transform: rotateX(180deg) rotateY(0deg);
}
.play-view[data-warning*="right-top"] .warning .right-top:before {
  transform: rotateX(0deg) rotateY(180deg);
}
.play-view[data-warning*="right-bottom"] .warning .right-bottom:before {
  transform: rotateX(180deg) rotateY(180deg);
}
.play-view[data-warning*="left-top"] .warning .left-top:after {
  left: 26.20%;
  top: 33.28%;
}
.play-view[data-warning*="left-bottom"] .warning .left-bottom:after {
  left: 25.18%;
  top: 64.68%;
}
.play-view[data-warning*="right-top"] .warning .right-top:after {
  left: 81.20%;
  top: 33.28%;
}
.play-view[data-warning*="right-bottom"] .warning .right-bottom:after {
  left: 82.12%;
  top: 64.68%;
}
.warning .numbers {
  transform: translate(-50%, -50%) rotate(-90deg);
  position: absolute;
  width: 11%;
  z-index: 1;
}
.warning .left-top .numbers {
  left: 21%;
  top: 34%;
}
.warning .left-bottom .numbers {
  left: 19.5%;
  top: 65.5%;
}
.warning .right-top .numbers {
  left: 75.5%;
  top: 34%;
}
.warning .right-bottom .numbers {
  left: 76.5%;
  top: 65.5%;
}
.quota {
  background: url(../img/remaining.png) center/cover no-repeat;
  position: absolute;
  left: 26.38%;
  top: 7.76%;
  width: 47.5%;
  height: 18.125%;
}
.quota .numbers {
  transform: translate(-50%, -50%) rotate(-90deg);
  position: absolute;
  left: 56%;
  top: 28%;
  width: 30%;
}
.police {
  background-image: url(../img/police.png);
  background-repeat: no-repeat;
  background-size: 400% 200%;
  padding: 0;
  position: absolute;
  left: 50%;
  bottom: 6.04%;
  transform: translate(-50%, 0);
  width: 40%;
}
.police:before {
  content: '';
  display: block;
  padding-top: 140.2%;
}
/* 直進 */
.play-view[data-route="left-top-right-bottom"] .police {
  background-position: 0 100%;
}
.play-view[data-route="left-bottom-right-top"] .police {
  background-position: 0 0;
}
/* 右折 */
.play-view[data-route="left-top-left-bottom"] .police {
  background-position: 66.67% 100%;
}
.play-view[data-route="right-top-left-top"] .police {
  background-position: 66.67% 0;
}
.play-view[data-route="right-bottom-right-top"] .police {
  background-position: 100% 100%;
}
.play-view[data-route="left-bottom-right-bottom"] .police {
  background-position: 100% 0;
}
.btn-navs {
  position: absolute;
  left: 50%;
  bottom: 2.18%;
  transform: translateX(-50%);
  width: 81.66%;
  height: 13.02%;
}
.btn-navs > * {
  background-color: transparent;
  background-image: url(../img/navigation.png);
  background-size: 600% 300%;
  border: none;
  padding: 0;
  position: absolute;
  width: 22.67%;
}
.btn-navs > *:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.btn-nav-1 {
  left: 0;
  bottom: 0;
}
.btn-nav-2 {
  left: 25.673%;
  top: 0;
}
.btn-nav-3 {
  right: 25.73%;
  top: 0;
}
.btn-nav-4 {
  right: 0;
  bottom: 0;
}
/* 直進 (左上右下) */
.play-view[data-route="left-top-right-bottom"] .btn-nav-1 {
  background-position: 0 0;
}
.play-view[data-route="left-top-right-bottom"] .btn-nav-2 {
  background-position: 40% 50%;
}
.play-view[data-route="left-top-right-bottom"] .btn-nav-3 {
  background-position: 60% 100%;
}
.play-view[data-route="left-top-right-bottom"] .btn-nav-4 {
  background-position: 100% 0;
}
/* 直進 (左下右上) */
.play-view[data-route="left-bottom-right-top"] .btn-nav-1 {
  background-position: 20% 0;
}
.play-view[data-route="left-bottom-right-top"] .btn-nav-2 {
  background-position: 40% 100%;
}
.play-view[data-route="left-bottom-right-top"] .btn-nav-3 {
  background-position: 60% 50%;
}
.play-view[data-route="left-bottom-right-top"] .btn-nav-4 {
  background-position: 80% 0;
}
/* 右折 (左上左下) */
.play-view[data-route="left-top-left-bottom"] .btn-nav-1 {
  background-position: 0 50%;
}
.play-view[data-route="left-top-left-bottom"] .btn-nav-2 {
  background-position: 40% 0;
}
.play-view[data-route="left-top-left-bottom"] .btn-nav-3 {
  background-position: 60% 100%;
}
.play-view[data-route="left-top-left-bottom"] .btn-nav-4 {
  background-position: 100% 0;
}
/* 右折 (右上左上) */
.play-view[data-route="right-top-left-top"] .btn-nav-1 {
  background-position: 20% 0;
}
.play-view[data-route="right-top-left-top"] .btn-nav-2 {
  background-position: 40% 100%;
}
.play-view[data-route="right-top-left-top"] .btn-nav-3 {
  background-position: 60% 0;
}
.play-view[data-route="right-top-left-top"] .btn-nav-4 {
  background-position: 80% 50%;
}
/* 右折 (右下右上) */
.play-view[data-route="right-bottom-right-top"] .btn-nav-1 {
  background-position: 0 0;
}
.play-view[data-route="right-bottom-right-top"] .btn-nav-2 {
  background-position: 40% 0;
}
.play-view[data-route="right-bottom-right-top"] .btn-nav-3 {
  background-position: 60% 100%;
}
.play-view[data-route="right-bottom-right-top"] .btn-nav-4 {
  background-position: 100% 50%;
}
/* 右折 (左下右下) */
.play-view[data-route="left-bottom-right-bottom"] .btn-nav-1 {
  background-position: 20% 50%;
}
.play-view[data-route="left-bottom-right-bottom"] .btn-nav-2 {
  background-position: 40% 100%;
}
.play-view[data-route="left-bottom-right-bottom"] .btn-nav-3 {
  background-position: 60% 0;
}
.play-view[data-route="left-bottom-right-bottom"] .btn-nav-4 {
  background-position: 80% 0;
}


/**
Car
*/
.cars {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.car {
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
}
.car:before {
  animation: winker-motion 1s linear infinite;
  background-image: url(../img/sprite.png);
  background-position: 8.08% 100%;
  background-size: 842.22% 2128.89%;
  content: '';
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate3d(70%, -70%, 0) rotate(-90deg);
}
.car:after {
  background-image: url(../img/sprite.png);
  content: '';
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.car[data-winker="true"]:before {
  display: block;
}
.car[data-color="blue"] {
  width: 5.09%;
  height: 5.67%;
}
.car[data-color="blue"]:before {
  width: 81.82%;
  height: 41.28%;
}
.car[data-color="blue"]:after {
  background-position: 4.63% 0;
  background-size: 689.09% 878.90%;
}
.car[data-color="yellow"] {
  width: 5.37%;
  height: 4.58%;
}
.car[data-color="yellow"]:before {
  width: 77.59%;
  height: 51.14%;
}
.car[data-color="yellow"]:after {
  background-position: 4.05% 12.53%;
  background-size: 653.45% 1088.64%;
}
.car[data-color="red"] {
  width: 5.27%;
  height: 5.67%;
}
.car[data-color="red"]:before {
  width: 78.95%;
  height: 41.28%;
}
.car[data-color="red"]:after {
  background-position: 4.35% 23.20%;
  background-size: 664.91% 878.90%;
}
.car[data-color="orange"] {
  width: 5.55%;
  height: 5.62%;
}
.car[data-color="orange"]:before {
  width: 75.00%;
  height: 41.67%;
}
.car[data-color="orange"]:after {
  background-position: 3.76% 36.00%;
  background-size: 631.67% 887.04%;
}

@keyframes winker-motion {
  50% {
    opacity: 0;
  }
}


/**
Result View
*/
.dialog-result {
  background: rgba(0, 0, 0, .6);
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.dialog-result.show {
  display: block;
}
.dialog-result .result {
  background: center/cover no-repeat;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(1.5);
  width: 100%;
  height: 100%;
}
.dialog-result.show .result {
  animation: show-result 150ms;
  animation-fill-mode: forwards;
}
.dialog-result[data-type="clear"] .result {
  background-image: url(../img/clear_message.png);
}
.dialog-result[data-type="danger"] .result {
  background-image: url(../img/danger_message.png);
}
.dialog-result[data-type="traffic-jam"] .result {
  background-image: url(../img/traffic_jam_message.png);
}

@keyframes show-result {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}