@font-face {
  font-family: Silkscreen;
  font-style: normal;
  font-weight: 400;
  src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
  unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  position: relative;
  font-family: Silkscreen;
  font-size: 16px;
  color: #fff;
  background: #000;
  max-height: 100%;
  overflow: hidden;
}

.snake-content {
  position: relative;
  width: 576px;
  height: 576px;
  /* border: 1px solid #fff; */
  margin: 0 auto;
  transform-origin: top left;
  /* overflow: hidden; */
}

.game-title {
  font-size: 66px;
  color: #FFC400;
  margin-top: 82px;
  line-height: 66px;
}

.start-button {
  width: 160px;
  height: 52px;
  position: relative;
  background: #FF920E;
  cursor: pointer;
  font-size: 20px;
  color: #FF920E;
  transition: all .2s;
}

.start-button:hover {
  opacity: .8;
}
.start-button.loading .lds-ring{
  display: inline-block;
}

/* 初始化像素盒子样式 */
.pixel-box:before,
.pixel-box:after,
.pixel-box-child:before,
.pixel-box-child:after {
  position: absolute;
  content: '';
  display: block;
  background: #000;
  width: 5px;
  height: 5px;
}

.pixel-box:before {
  top: 0;
  left: 0;
}

.pixel-box:after {
  top: 0;
  right: 0;
}

.pixel-box .pixel-box-child {
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  background: #000;
}

.pixel-box .pixel-box-child:before {
  bottom: -5px;
  left: -5px;
}

.pixel-box .pixel-box-child:after {
  bottom: -5px;
  right: -5px;
}

/* head */
.header {
  display: flex;
  width: 452px;
  height: 90px;
  align-items: center;
  margin: 0 auto;
  position: relative;
}

.header .header-item {
  flex: 1;
  text-align: center;
  position: relative;
}

.header .header-item .food-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #FFC400;
  position: relative;
  top: 1px;
}

.header .header-item span {
  margin-top: 5px;
}
.header .header-item .fee-add-count{
  position: absolute;
  left: 64px;
  top: 13px;
  font-size: 14px;
  color: #FF920E;
  transform: translateY(5px);
  visibility: hidden;
}
.header .header-item .fee-add-count.show{
  visibility: initial;
  transform: translateY(-3px);
  transition: all .4s;
}
.header .food-hash{
  position: absolute;
  bottom: 5px;
  font-size: 12px;
  left: 0;
  /* transform: translateX(-50%);
  left: 50%; */
}
.header .food-hash .value{
  transform: scale(.7) translateY(0px);
  transform-origin: left bottom;
  white-space: nowrap;
  /* opacity: 1; */
}
.header .food-hash .value.active{
  color: #FF920E;
  transition: transform .4s;
  transform: scale(.7) translateY(-8px);
}


/* 游戏界面 */
.game-content {
  width: 452px;
  height: 452px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #fff;
  position: relative;
}

.game-content .horizontal {
  position: absolute;
  left: 0;
  right: 0;
  height: 0px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.game-content .vertical {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.game-content .map {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transform-origin: bottom left;
}
.game-content .map .food{
  /* opacity: .6; */
  animation: flashing-animation .5s infinite;
}
.game-content .map .food .food-sats{
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  line-height: 12px;
}
.game-content .map .food .food-sats{
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  line-height: 12px;
}
.game-content .map .food .food-sats-left{
  left: -10px;
  transform: translateX(-100%);
  bottom: -2px;
}
.game-content .map .food .food-sats-right{
  left: 100%;
  transform: translateX(10px);
  bottom: -2px;
}

/* 欢迎页 */
.start-interface {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  z-index: 999;
  top: 88px;
  left: 0;
  right: 0;
  height: 455px;
  background: #000;
}

.start-interface .email-input {
  width: 450px;
  height: 50px;
  position: relative;
  background-color: #2E2C2C;
  margin-top: 82px;
}

.start-interface .email-input .pixel-box-child {
  background: #000;
  padding: 0 14px;
}

.start-interface .email-input .email-icon {
  width: 5px;
  height: 12px;
  background: #FFC400;
  margin-right: 6px;
}

.start-interface .email-input input {
  flex: 1;
  height: 100%;
  outline: none;
  border: none;
  background: transparent;
  color: #fff;
  font-family: 'Silkscreen', sans-serif;
  font-size: 16px;
}

.start-interface .email-input input::placeholder {
  color: #bbbcbb;
}

.start-interface .start-button {
  margin-top: 76px;
}

/* 结束 */
.replay-content {
  position: absolute;
  z-index: 999;
  top: 88px;
  left: 0px;
  right: 0;
  height: 455px;
  background-color: #000;
  flex-direction: column;
  align-items: center;
  display: none;
}
.replay-content .claim-tips{
  text-align: center;
  line-height: 2em;
}
.replay-content .game-title {
  margin-top: 72px;
  font-size: 66px;
}
.game-over .start-button{
  margin: 70px 0 60px;
}

/* copy-list */
.copy-list {
  width: 452px;
  font-size: 20px;
  margin-top: 55px;
}
.copy-list .info-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 44px;
  line-height: 44px;
  color: #FF920E;
  cursor: pointer;
}
.copy-list .info-item .label {
  cursor: initial;
  color: #fff;
  margin-right: 8px;
}
.copy-list .start-button {
  margin-top: 56px;
}


/* 游戏状态 */
.game-start .first-show {
  display: none;
}
.address-interface {
  display: none;
}
.address-block .address-interface {
  display: flex;
}
.replay-block .game-over {
  display: flex;
}
.win-block .game-win {
  display: flex;
}

/* first-show */
.first-show .game-title{
  margin-top: 72px;
}
.first-show .email-input{
  margin-top: 62px;
}
.first-show .copy-list{
  margin-top: 20px;
}
.first-show .copy-list .info-item{
  font-size: 13px;
  height: 26px;
  line-height: 26px;
}
.first-show .start-button {
  margin-top: 45px;
}

/* address-interface */
.address-interface{

}
.address-interface .block-number{
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  padding-left: 60px;
  margin-top: 70px;
}
.address-interface .email-input{
  margin-top: 20px;
}
/* game-win */
.game-win{}
.game-win .game-title{
  text-align: center;
  width: 450px;
}
.game-win .start-button{
  margin-top: 50px;
}


/* utils */
#copyI {
  width: 10px;
  height: 1px;
  z-index: -9;
  opacity: 0;
  position: absolute;
}

.message-tips {
  background: #de5927;
  position: absolute;
  top: 2em;
  z-index: 5;
  padding: 0 0.8em;
  line-height: 1.5em;
  border-radius: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  transition: top .3s;
  opacity: 0;
}

.message-tips.show {
  opacity: 1;
  top: 3em;
}



.lds-ring {
  display: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 0.4em;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #FF920E;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #FF920E transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes flashing-animation {
  0% {
    box-shadow: 0px 0px 5px 0px #ffc400;
  }
  50% {
    box-shadow: 0px 0px 5px 1px #ffc400;
  }
  100% {
    box-shadow: 0px 0px 5px 0px #ffc400;
  }
}


.canvas-content{
  width: 450px;
  height: 450px;
  position: absolute;
  top: 91px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
#webgl-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* z-index: 2 */
}

#webgl-canvas.hide {
  display: none;
  width: 100%;
  height: 100%;
  /* opacity: .5; */
}