@charset "UTF-8";
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* outline: 1px solid rgba(255, 0, 0, 0.5) !important; */
}
/* div,
a,
header,
footer,
nav,
section,
aside,
img,
canvas {
  outline: 0.5px solid rgba(255, 0, 0, 0.5);
} */
html {
  height: 100%;
  font-size: 100%;
}
body {
  height: 100%;
  font-family: Arial, 'Heiti TC', '微軟正黑體', 'Microsoft JhengHei', '新細明體',
    'PMingLiU', sans-serif;
  letter-spacing: 1px;
  /* background: url(../images/bg.png) top center repeat; */
}
a {
  color: #fff;
  text-decoration: none;
}
.img img {
  display: block;
  width: 100%;
}
.tac {
  text-align: center;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clear {
  clear: both;
}
.img > img {
  display: block;
  width: 100%;
}
.hide {
  display: none !important;
}
.btn {
  cursor: pointer;
}
.wrapper {
  width: 100%;
  height: 100%;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
.abs-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  position: absolute;
  left: 0%;
  top: 0%;
  margin-left: 5%;
  margin-top: 6%;
  width: 20.3%;
  z-index: 90;
}
/* 選單 */
.btn-menu {
  width: 9%;
  position: absolute;
  right: 0%;
  top: 0%;
  margin-right: 5%;
  margin-top: 5%;
  z-index: 90;
}
.btn-menu .icon-menu-open {
  display: block;
}
.btn-menu .icon-menu-close {
  display: none;
}
.js-menu-open.btn-menu .icon-menu-open {
  display: none;
}
.js-menu-open.btn-menu .icon-menu-close {
  display: block;
}
/* 選單頁 */
.menu-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 80;
  width: 100%;
  height: 100%;
  /* opacity: 0.2; */
}
#menuIndex {
  width: 55.6%;
  margin-top: 95%;
}
#menuRank {
  width: 55.6%;
  margin-top: 115%;
}
.head {
  width: 77.5%;
  margin-top: 17.5%;
}

/* 首頁 */
#pageIndex {
  position: relative;
}
.index-head {
  width: 77.5%;
  margin-top: 30%;
}

#btnLogin {
  width: 55.6%;
  margin-top: 107%;
  animation: jump 200ms ease-in-out 0ms Infinite alternate;
}
.hunter {
  width: 24.4%;
  margin-top: 162%;
}

/* 遊戲頁 */
#pageGame {
  position: absolute;
  left: 0;
  top: 0;
}
#pageGame > canvas {
  width: 100%;
}
#tipLayer {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}
#tutorial {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 94.2%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12%;
}
#btnStart {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 55.6%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 112%;
  animation: jump 200ms ease-in-out 0ms Infinite alternate;
}

@keyframes jump {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

#pageResult {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
}
#headerResult {
  width: 91.1%;
  margin-top: 5%;
}
#resultScore {
  position: absolute;
  left: 0;
  top: 0;
  width: 30%;
  margin-top: 51%;
  margin-left: 44%;
  font-size: 12vw;
  font-weight: bold;
  color: #fb730f;
  text-align: center;
}
.top5-list {
  width: 80%;
  margin-top: -7%;
  margin-bottom: 2%;
}
.top5-list li {
  position: relative;
  background: url(../images/box_rank_top10.png) 0 0 scroll no-repeat;
  background-size: 100%;
  width: 100%;
  padding-top: 13.73%;
  margin-top: -1%;
}
.top5-list li.my-rank {
  background: url(../images/box_rank_self.png) 0 0 scroll no-repeat;
  background-size: 100%;
}
.top5-list .list-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 1%;
  display: flex;
  /* justify-content: space-between; */
  align-items: flex-end;
}
.top5-list .no {
  width: 13%;
  margin: 0 3%;
}
.top5-list .photo {
  width: 10%;
  margin-right: 4%;
}
.top5-list .name {
  flex: 0 0 43%;
  margin-right: 2%;
  margin-bottom: 3%;
  font-size: 4vw;
}
.top5-list .score {
  width: 19%;
  font-size: 6vw;
  font-weight: bold;
  color: #fb730f;
  margin-bottom: 2%;
  text-align: right;
}
.btn-share {
  width: 55.62%;
  margin-bottom: 2%;
}
.green-btns {
  width: 100%;
  display: flex;
  justify-content: center;
}
.btn-again {
  width: 42%;
  margin: 0 1%;
}
.btn-website {
  width: 42%;
  margin: 0 1%;
}

/* 排行榜頁 */
#pageRank {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #99e4f7;
}
#headerRank {
  width: 51%;
  margin-top: 10%;
}
.top10-list {
  width: 80%;
  margin-top: -6%;
  margin-bottom: 2%;
}
.top10-list li {
  position: relative;
  background: url(../images/box_rank_top10.png) 0 0 scroll no-repeat;
  background-size: 100%;
  width: 100%;
  padding-top: 13.73%;
  margin-top: 0%;
}
.top10-list li.my-rank {
  background: url(../images/box_rank_self.png) 0 0 scroll no-repeat;
  background-size: 100%;
}
.top10-list .list-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 1%;
  display: flex;
  /* justify-content: space-between; */
  align-items: flex-end;
}
.top10-list .no {
  width: 13%;
  margin: 0 3%;
}
.top10-list .photo {
  width: 10%;
  margin-right: 4%;
}
.top10-list .name {
  flex: 0 0 43%;
  margin-right: 2%;
  margin-bottom: 3%;
  font-size: 4vw;
}
.top10-list .score {
  width: 19%;
  font-size: 6vw;
  font-weight: bold;
  color: #fb730f;
  margin-bottom: 2%;
  text-align: right;
}
.btn-home {
  width: 42.2%;
  margin-top: 2%;
}
/* @media (min-width: 640px) {
  手機版css
} */

@media (min-width: 640px) {
  #resultScore {
    font-size: 78px;
  }
  .list-item > .name {
    font-size: 26px;
  }
  .list-item > .score {
    font-size: 38px;
  }
}

#shareCanvas {
  position: fixed;
  left: 0;
  top: 5%;
  width: 100%;
}
#loading {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: #fff
    url('https://content.ad2iction.com/tools/images/loading-1.gif') no-repeat
    scroll center center;
  z-index: 9998;
}