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;
  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: 100;
}
.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: 1;
}
.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;
  background-size: 300% 200%;
  border: none;
  display: inline-block;
  padding-top: 35%;
  width: 35%;
}
.btn + .btn {
  margin-left: 5%;
}
.btn-start {
  background-position: 0 0;
}
.btn-howto {
  background-position: 50% 0;
}
.btn-back {
  background-position: 100% 0;
}
.btn-senkou {
  background-position: 0 100%;
}
.btn-koukou {
  background-position: 50% 100%;
}
.btn-reload {
  background-position: 100% 100%;
}


/**
Message
*/
.message {
  background: url(../img/messages.png) no-repeat;
  background-size: 100% 300%;
  position: absolute;
  bottom: 6%;
  left: 0;
  width: 100%;
  padding-top: 26.8%;
}
.message[data-type="yourturn"] {
  background-position: 0 0;
}
.message[data-type="wait"] {
  background-position: 0 50%;
}
.message[data-type="pass"] {
  background-position: 0 100%;
}


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


/**
Piece
*/
.piece {
  background-image: url(../img/pieces.png);
  background-size: 700% 200%;
  padding-top: calc(100% / 8);
  width: calc(100% / 8);
}
.board .piece[data-piece="black"] {
  background-position: 0 0;
}
.board .piece[data-piece="white"] {
  background-position: 0 100%;
}
.board .piece[data-piece="empty"] {
  background-image: none;
}
.board .piece[data-put="true"] {
  background: #b4ff93;
}
.board .piece[data-piece="black"][data-frame="0"] {
  background-position: 0 100%;
}
.board .piece[data-piece="black"][data-frame="1"] {
  background-position: calc(100% / 6) 100%;
}
.board .piece[data-piece="black"][data-frame="2"] {
  background-position: calc(100% / 6 * 2) 100%;
}
.board .piece[data-piece="black"][data-frame="3"] {
  background-position: calc(100% / 6 * 3) 100%;
}
.board .piece[data-piece="black"][data-frame="4"] {
  background-position: calc(100% / 6 * 4) 100%;
}
.board .piece[data-piece="black"][data-frame="5"] {
  background-position: calc(100% / 6 * 5) 100%;
}
.board .piece[data-piece="black"][data-frame="6"] {
  background-position: 100% 100%;
}
.board .piece[data-piece="white"][data-frame="0"] {
  background-position: 0 0;
}
.board .piece[data-piece="white"][data-frame="1"] {
  background-position: calc(100% / 6) 0;
}
.board .piece[data-piece="white"][data-frame="2"] {
  background-position: calc(100% / 6 * 2) 0;
}
.board .piece[data-piece="white"][data-frame="3"] {
  background-position: calc(100% / 6 * 3) 0;
}
.board .piece[data-piece="white"][data-frame="4"] {
  background-position: calc(100% / 6 * 4) 0;
}
.board .piece[data-piece="white"][data-frame="5"] {
  background-position: calc(100% / 6 * 5) 0;
}
.board .piece[data-piece="white"][data-frame="6"] {
  background-position: 100% 0;
}


/**
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;
}


/**
Rule View
*/
.rule-view {
  background: url(../img/bg_rule.png) center/cover;
}

/**
Play View
*/
.play-view {
  background: url(../img/bg_play.png) center/cover;
}
.board {
  background: #ace5ca;
  border: 3px solid #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
}
.board:before {
  background: url(../img/board_border.png) center/cover;
  content: '';
  display: block;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.board .pieces {
  display: flex;
  flex-wrap: wrap;
}
.turn-count {
  position: absolute;
  padding-top: 10%;
  width: 100%;
}
.turn-count .numbers {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 8%;
}
.turn-count .numbers [data-number] {
  margin: 1px 0;
}
.turn-count .numbers [data-number="1"] {
  background-position: 100% 0;
  background-size: 200% 1560%;
}
.turn-count .numbers [data-number="1"]:before {
  padding-top: 52.08333333%;
}
.turn-count .numbers [data-number="2"] {
  background-position: 100% 11.06382979%;
  background-size: 200% 1040%;
}
.turn-count .numbers [data-number="2"]:before {
  padding-top: 78.125%;
}
.turn-count .numbers [data-number="3"] {
  background-position: 100% 22.12765957%;
  background-size: 200% 1040%;
}
.turn-count .numbers [data-number="3"]:before {
  padding-top: 78.125%;
}
.turn-count .numbers [data-number="4"] {
  background-position: 100% 33.33%;
  background-size: 200% 1000%;
}
.turn-count .numbers [data-number="4"]:before {
  padding-top: 81.25%;
}
.turn-count .numbers [data-number="5"] {
  background-position: 100% 44.1301273%;
  background-size: 200% 1068.493151%;
}
.turn-count .numbers [data-number="5"]:before {
  padding-top: 76.04166667%;
}
.turn-count .numbers [data-number="6"] {
  background-position: 100% 55.39772727%;
  background-size: 200% 1026.315789%;
}
.turn-count .numbers [data-number="6"]:before {
  padding-top: 79.16666667%;
}
.turn-count .numbers [data-number="7"] {
  background-position: 100% 66.38297872%;
  background-size: 200% 1040%;
}
.turn-count .numbers [data-number="7"]:before {
  padding-top: 78.125%;
}
.turn-count .numbers [data-number="8"] {
  background-position: 100% 77.66714083%;
  background-size: 200% 1012.987013%;
}
.turn-count .numbers [data-number="8"]:before {
  padding-top: 80.20833333%;
}
.turn-count .numbers [data-number="9"] {
  background-position: 100% 88.5106383%;
  background-size: 200% 1040%;
}
.turn-count .numbers [data-number="9"]:before {
  padding-top: 78.125%;
}
.turn-count .numbers [data-number="0"] {
  background-position: 100% 99.85775249%;
  background-size: 200% 1012.987013%;
}
.turn-count .numbers [data-number="0"]:before {
  padding-top: 80.20833333%;
}
.score {
  position: absolute;
  top: 11.5%;
  width: 100%;
  height: 8%;
}
.score-black {
  padding-top: 10%;
  position: absolute;
  left: 22%;
  top: 12%;
  width: 20%;
}
.score-white {
  padding-top: 10%;
  position: absolute;
  right: 22%;
  top: 12%;
  width: 20%;
}
.score .numbers {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 40%;
}
.score .numbers [data-number] {
  margin: 5px 0;
}
.score .numbers .tenth[data-number="0"] {
  display: none;
}
.score .numbers [data-number="1"] {
  background-position: 0 0;
  background-size: 200% 1950%;
}
.score .numbers [data-number="1"]:before {
  padding-top: 41.66666667%;
}
.score .numbers [data-number="2"] {
  background-position: 0 10.90909091%;
  background-size: 200% 1200%;
}
.score .numbers [data-number="2"]:before {
  padding-top: 67.70833333%;
}
.score .numbers [data-number="3"] {
  background-position: 0 21.8487395%;
  background-size: 200% 1181.818182%;
}
.score .numbers [data-number="3"]:before {
  padding-top: 68.75%;
}
.score .numbers [data-number="4"] {
  background-position: 0 32.95774648%;
  background-size: 200% 1114.285714%;
}
.score .numbers [data-number="4"]:before {
  padding-top: 72.91666667%;
}
.score .numbers [data-number="5"] {
  background-position: 0 43.57541899%;
  background-size: 200% 1218.75%;
}
.score .numbers [data-number="5"]:before {
  padding-top: 66.66666667%;
}
.score .numbers [data-number="6"] {
  background-position: 0 54.62184874%;
  background-size: 200% 1181.818182%;
}
.score .numbers [data-number="6"]:before {
  padding-top: 68.75%;
}
.score .numbers [data-number="7"] {
  background-position: 0 65.54621849%;
  background-size: 200% 1181.818182%;
}
.score .numbers [data-number="7"]:before {
  padding-top: 68.75%;
}
.score .numbers [data-number="8"] {
  background-position: 0 76.68539326%;
  background-size: 200% 1147.058824%;
}
.score .numbers [data-number="8"]:before {
  padding-top: 70.83333333%;
}
.score .numbers [data-number="9"] {
  background-position: 0 87.51753156%;
  background-size: 200% 1164.179104%;
}
.score .numbers [data-number="9"]:before {
  padding-top: 69.79166667%;
}
.score .numbers [data-number="0"] {
  background-position: 0 98.59550562%;
  background-size: 200% 1147.058824%;
}
.score .numbers [data-number="0"]:before {
  padding-top: 70.83333333%;
}
.dialog-pass {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.dialog-pass:before {
  background: url(../img/pass.png) center/cover no-repeat;
  content: '';
  display: block;
  padding-top: 60%;
  width: 60%;
}
.message[data-type="pass"] + .dialog-pass {
  display: flex;
}


/**
Result View
*/
.dialog-result {
  background: rgba(0, 0, 0, .6);
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.dialog-result.show {
  display: block;
}
.dialog-result .result {
  background: center/cover no-repeat;
  opacity: 0;
  padding-top: 76.75%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) scale(1.5);
  width: 100%;
}
.dialog-result.show .result {
  animation: show-result 150ms;
  animation-fill-mode: forwards;
}
.dialog-result .result[data-type="win"] {
  background-image: url(../img/result_win.png);
}
.dialog-result .result[data-type="lose"] {
  background-image: url(../img/result_lose.png);
}
.dialog-result .result[data-type="draw"] {
  background-image: url(../img/result_draw.png);
}

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