/* #region  */
 *{
  padding: 0%;
  margin: 0%;
 }
body{
  width: 100vw;
  height: 100vh;
}
/* #region header */
header{
  height: 10vh;
  /* background-color: rgb(25, 24, 38); */
  background-image: url(https://static.igem.wiki/teams/5840/figure/header.webp);
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 0.5vh rgb(235, 160, 10) solid;
}
.health,.magic{
  display: flex;
  align-items: center;
  font-size: 25px;
  font-weight: 600;
}
.health,.magic span{
  color: rgb(245, 151, 0);
  overflow: hidden;
}
.Health,.Magic{
  width: 330px;
  background-color: rgb(156, 155, 154);
  border-radius: 15px;
  overflow: hidden;
}
.health-bar,.magic-bar{
  height: 35px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 35px;
  color: white;
  width: 0%;
  transition: all 0.4s ease-in-out;
  overflow: unset;
}
.magic-bar{
  background-color: rgb(30, 157, 220);
}

/* #endregion */

.body{
  height: 60vh;
  display: flex;
}

/* #region left*/
.left{
  width: 23vw;
  /* background-color: rgb(36, 39, 56); */
  border-right: 0.5vw solid rgb(238, 167, 13);
  display: flex;
  flex-direction: column;
  position: relative;
}
.left-top1{
  height: 10vh;
  width: 23vw;
  background-image: url(https://static.igem.wiki/teams/5840/figure/lt2.webp);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.left-top2,.left-top3,.left-top4{
  height: 10vh;
  width: 23vw;
  background-image: url(https://static.igem.wiki/teams/5840/figure/lt1.webp);
  background-size: cover;
  position: absolute;
  opacity: 1;
  transition: all 0.1s linear;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.left-mid{
  height: 20vh;
  width: 23vw;
  /* background-color: rgb(93, 67, 1); */
  background-image: url(https://static.igem.wiki/teams/5840/figure/wea-equ.webp);
  background-size: cover;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.left-bottom{
  height: 30vh;
  width: 23vw;
  /* background-color: rgb(160, 131, 59); */
  background-image: url(https://static.igem.wiki/teams/5840/figure/prop.webp);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.left span{
  color: rgb(235, 44, 31);
  font-size: 30px;
  font-weight: 600;
}
.left li{
  color: white;
  font-size: 15px;
}
.left-top1-top{
  color: rgb(255, 255, 255);
  width: 80%;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  justify-content: space-evenly;
}
.left-top1-bottom{
  width: 80%;
  background-color: rgb(209, 208, 208);
  border-radius: 8px;
  overflow: hidden;
}
.experience-bar{
  height: 22px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 24px;
  color: white;
  width: 0%;
  transition: all 0.4s ease-in-out; 
  overflow:unset;
}
.left-mid img{
  width: 30%;
  height: auto;
  border-radius: 25%;
}
.left-bottom div{
  display: inline-block;
  height: auto;
  width: 15%;
}
.left-bottom img{
  height: 90%;
  width: 90%;
  border-radius: 20%;
}
/* #endregion */

/* #region screen*/
.screen{
  width: 53vw;
  background-image: url(https://static.igem.wiki/teams/5840/figure/screen.webp);
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.move {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  width: 53vw;
  height: 40px;
  opacity: 0;
  transition: all 1s linear;
}
.cloud1{
  width: 170px; /* 贴图宽度 */
  height: 70px; /* 贴图高度 */
  top: 5%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/cloud1.webp);
  animation: move 6s linear infinite;
}
.cloud2{
  width: 170px; /* 贴图宽度 */
  height: 70px; /* 贴图高度 */
  top: 10%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/cloud4.webp);
  animation: move 7s linear infinite;
}
.cloud3{
  width: 170px; /* 贴图宽度 */
  height: 70px; /* 贴图高度 */
  top: 16%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/cloud3.webp);
  animation: move 9s linear infinite;
}
.cloud4{
  width: 170px; /* 贴图宽度 */
  height: 70px; /* 贴图高度 */
  top: 9%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/cloud4.webp);
  animation: move 13s linear infinite;
}
.cloud5{
  width: 170px; /* 贴图宽度 */
  height: 70px; /* 贴图高度 */
  top: 12%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/cloud5.webp);
  animation: move 11s linear infinite;
}
.cloud6{
  width: 170px; /* 贴图宽度 */
  height: 70px; /* 贴图高度 */
  top: 7%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/cloud6.webp);
  animation: move 15s linear infinite; 
 }
.cloud7{
  width: 170px; /* 贴图宽度 */
  height: 70px; /* 贴图高度 */
  top: 15%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/cloud7.webp);
  animation: move 3s linear infinite; 
 }
.cloud8{
  width: 170px; /* 贴图宽度 */
  height: 70px; /* 贴图高度 */
  top: 18%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/cloud8.webp);
  animation: move 10s linear infinite; 
 }

 .stone1{
  top: 83%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/stone1.webp);
  animation: move 8s linear infinite; 
 }
 .stone2{
  top: 85%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/stone1.webp);
  animation: move 8s 3.8s linear infinite; 
 }
 .stone3{
  top: 82%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/stone1.webp);
  animation: move 8s 3s linear infinite; 
 }
 .stone4{
  top: 90%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/stone1.webp);
  animation: move 8s 2s linear infinite; 
 }
 .stone5{
  top: 93%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/stone1.webp);
  animation: move 8s 1.5s linear infinite; 
 }
 .stone6{
  top: 86%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/stone1.webp);
  animation: move 8s 4.3s linear infinite; 
 }
 .turn{
  position: absolute;
  font-size: 25px;
  font-weight: 600;
  width: 120px;
  height: 35px;
  border: 3px solid rgb(230, 214, 158);
  border-radius: 8px;
  text-align: center;
  top: 6px;
  left: 50%;
  transform: translate(-50%);
  opacity: 0;
  transition: all 0.5s;
  animation: background-a 2s infinite;
 }
 .player-turn{
  background: linear-gradient(45deg, rgb(86, 239, 89),rgb(243, 243, 69), rgb(109, 237, 92));
  background-size: 300% 300%;
 }
 .mon-turn{
  background: linear-gradient(45deg, rgb(232, 88, 40),rgb(243, 243, 69), rgb(235, 46, 17));
  background-size: 300% 300%;
 }
 .player{
  position: absolute;
  top: 55%;
  left: 10%;
  opacity: 0;
  transition: 1.5s opacity linear;
  width: 10vw;
 }
 .mon{
  overflow: hidden;
  width: 10vw;
  background-color: rgb(209, 208, 208);
  border-radius: 8px;
  position: absolute;
  top: 45%;
  right: 12%;
  opacity: 0;
  transition: 2s all linear;
  display: flex;
  font-weight: 500;
  font-size: larger;
 }
 .mon_hp_bar{
  height: 22px;
  background-color: #f13737;
  text-align: center;
  line-height: 24px;
  color: white;
  width: 0%;
  transition: all 0.4s ease-in-out; 
  overflow:unset;

 }
 .monster{
  position: absolute;
  top: 50%;
  right: 10%;
  opacity: 0;
  transition: 2s opacity linear;
  transform: scaleX(-1);
  width: 12vw;
 }
 .event{
  position: absolute;
  top: 50%;
  right: 10%;
  opacity: 0;
  transition: 2s opacity linear;
  width: 12vw;
 }
 .walk{
  position: absolute;
  width: 100px;
  height: 50px;
  bottom: 2%;
  right: 2%;
  border-radius: 15px;
 }
 .start{
  position: absolute;
  width: 20%;
  height: 20%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 15px;
  font-size: 20px;
  font-weight: 500;
 }
 .start:hover{
  background-color: #4CAF50;
 }
 .start:active{
  background-color: #6ba56d;
 }
  .walk:hover{
  background-color: cadetblue;
  transform: scale(1.05);
}
  .walk:active{
  background-color: rgb(54, 92, 94);
}
/* #endregion */

/* #region right*/
.right{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23vw;
  background-image: url(https://static.igem.wiki/teams/5840/figure/right.webp);
  background-position: center;
  border-left: 0.5vw solid rgb(238, 167, 13);
  position: relative;
}
.attribute{
  width: 90%;
  height: 90%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/r.webp);
  background-size: cover;
  color: rgb(233, 232, 232);
  font-size: large;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
}
.attribute-box1,.attribute-box2{
  display: flex;
  width: 90%;
}
.attribute-box1 span{
  display: inline-block;
  width: 150px;
  height: 50px;
}
.attribute-box2 span{
  display: inline-block;
  width: 300px;
  height: 50px;
}
hr{
  width: 90%;
}
.attribute2{
  height: 90%;
  width: 90%;
  
  background-image: url(https://static.igem.wiki/teams/5840/figure/300.webp);
  background-size: cover;
  color: rgb(233, 232, 232);
  font-size: 13px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  position: absolute;
  opacity: 0;
  transition: all 0.2s linear;
}
.attribute2-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.attribute2-box span{
  width: 100%;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  opacity: 0;
  pointer-events: none;
  border-radius: 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s linear;
}
.box button{
  width: 80px;
  height: 20px;
  border-radius: 10px;
}
.role{
  height: 400px;
  width: 700px;
  background: linear-gradient(45deg, red,rgb(242, 242, 100), rgb(225, 6, 189));
  animation: background-a 3s infinite;
  background-size: 400% 400%;
/* display: flex; */
}
.weapon{
  height: 400px;
  width: 700px;
  background: linear-gradient(45deg, red,rgb(215, 215, 204), rgb(225, 6, 189));
  animation: background-a 3s infinite;
  background-size: 400% 400%;
/* display: flex; */
}
.equipment{
  height: 400px;
  width: 700px;
  background: linear-gradient(45deg, rgb(30, 30, 169),rgb(242, 242, 100), rgb(227, 95, 205));
  animation: background-a 3s infinite;
  background-size: 400% 400%;
/* display: flex; */
}
.blessings{
  height: 400px;
  width: 700px;
  background: linear-gradient(45deg, rgb(55, 182, 35),rgb(32, 99, 225), rgb(211, 120, 0));
  animation: background-a 3s infinite;
  background-size: 400% 400%;
/* display: flex; */
}
.skill{
  height: 400px;
  width: 700px;
  background: linear-gradient(45deg, rgb(1, 73, 34),rgb(227, 197, 30), rgb(225, 6, 189));
  animation: background-a 3s infinite;
  background-size: 400% 400%;
/* display: flex; */
}
.prop{
  height: 400px;
  width: 700px;
  background: linear-gradient(45deg, rgb(199, 6, 6),rgb(216, 159, 190), rgb(225, 6, 189));
  animation: background-a 3s infinite;
  background-size: 400% 400%;
/* display: flex; */
}
.inbox{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 700px;
}
.inbox1,
.inbox2,
.inbox3{
  background-color: rgb(239, 171, 0);
  width: 170px;
  height: 300px;
  border: 5px solid rgb(70, 57, 57);
  border-radius: 15px;
  animation: selector 0.5s infinite;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.box .title{
  color: white;
  font-size: 36px;
  font-weight: bold;
  background-color: antiuewhite;
}
.inbox img{
  height: 100px;
  width: 100px;
  border-radius: 10px;
}
.inbox .text1{
  font-size: 30px;
  font-weight: 600;
}
.inbox .text2{
  font-size: 18px;
  font-weight: 500;
}
.inbox .text3{
  font-size: 16px;
  font-weight: 500;
}
/* #endregion */

/* #region bottom */
.bottom{
  border-top: 0.5vh  rgb(238, 167, 13) solid;
  width: 100vw;
  height: 29vh;
  /* background-color: rgb(19, 39, 61); */
  background-image: url(https://static.igem.wiki/teams/5840/figure/bottom.webp);
  background-size:cover;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}
.debug{
  position: absolute;
  top: -100%;
  width: 10%;
  height: 80%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/attack.webp);
  border-radius: 20px;
  border: darkblue solid 5px;
  color: white;
  font-size: 30px;
}
.debugbutton{
  width: 50px;
  height: 30px;
  position: absolute;
  opacity: 0.8;
  top: 10px;
  left: 10px;
}
/* #endregion */

/* #region animation*/
@keyframes background-a {
  0% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
@keyframes selector {
0% {
    transform: rotate(0deg) scale(1.01) ;
}
50%{
   transform: rotate(-0.7deg);
}
75% {
  transform: rotate(0.7deg);
}
100%{
  transform: rotate(0deg);
}
}
@keyframes jumpingtext {
 0%{
  transform: scale(1.3)
 }
 100%{
  transform: translate(0,300px) scale(1) ;
 }
}
@keyframes move{
  0%{
      left: 100%; /* 初始和结束位置都在容器右侧之外 */
  }
  99.999% {
      left: -170px; /* 云移动到容器的可见部分内 */
  }
  100%{
      left: -100%
  }
}
.running{
  animation: player-running 1s linear 5 ;

}
@keyframes player-running {
  0%,100%{
    transform: rotate(0deg);
  }
  25%{
    transform: rotate(8deg);
  }
  50%{
    transform: rotate(0deg);
  }
  75%{
    transform: rotate(-8deg);
  }  
}
.monhit {
  animation: monhitAnimation 0.5s ease-in-out forwards;
}
@keyframes monhitAnimation {
  0% { transform: scale(1) scaleX(-1); opacity: 1; }
  25% { transform: scale(0.9) translateX(20px) scaleX(-1); opacity: 0.7; }
  50% { transform: scale(1.1) translateX(30px) scaleX(-1); opacity: 0.5; }
  75% { transform: scale(1) translateX(20px) scaleX(-1); opacity: 0.7; }
  100% { transform: scale(1) scaleX(-1); opacity: 1; }
}
.playerhit {
  animation: playerhitAnimation 0.5s ease-in-out forwards;
}
@keyframes playerhitAnimation {
  0% { transform: scale(1); opacity: 1; }
  25% { transform: scale(0.9) translateX(-20px); opacity: 0.7; }
  50% { transform: scale(1.1) translateX(-30px); opacity: 0.5; }
  75% { transform: scale(1) translateX(-20px); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
/* #endregion */

button{
  height: 30px;
  width: 100px;
}
.body .jumping-text {
  animation: jumpingtext 1.5s cubic-bezier(.11,-1.03,.83,.67) infinite paused;
  opacity: 0;
  position: absolute;
  left:43%;
  top:20%;
  z-index: 1;
  transition: all 0.2s linear;
}

.hide{
  opacity: 0;
  pointer-events: none;
}
.button-locked{
  pointer-events: none;
  opacity: 0.5;
}
.show{
  opacity: 1;
  pointer-events: all;
}
.button-unlocked{
  pointer-events: all;
  opacity: 1;
}
.typing-text {
position: absolute;
white-space: nowrap;
overflow: hidden;
top: 10%;
left: 50%;
transform: translate(-50%,-10%);
font-size: 30px;
font-weight: 500;
z-index: 10;
}

/* #endregion */
/* #region 战斗 */
.fight2{
  width: 16%;
  height: 75%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/attack.webp);
  border-radius: 20px;
  border: darkblue solid 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items:center;
}
.fight2 button{
  width: 45%;
  height: 35%;
  border-radius: 10px;
  color: rgb(63, 67, 71);
  font-size: 15px;
  font-weight: 600;
}
.bottom button:hover{
  background-color: cadetblue;
  transform: scale(1.05);
}
.bottom button:active{
  background-color: rgb(54, 92, 94);
}
.fight3{
  width: 50%;
  height: 75%;
  background-image: url(https://static.igem.wiki/teams/5840/figure/attack.webp);
  border-radius: 20px;
  border: darkblue solid 5px;
  display: flex;
  align-items:center;
  justify-content: space-evenly;
  position: relative;
}
.fight-skill{
  width: 60%;
  height: 75%;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
.button-wrapper{
  position: relative;
  width: 40%;
  height: 45%;
  margin: 6px 10px;
}
.fight-skill button{
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 10px;
  font-size: larger;
  font-weight: bold;
  z-index: 1;
}
.wrapper{
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: all;
}

.fight1{
  height: 75%;
  width: 20%;
  border-radius: 20px;
  color: white;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: darkblue solid 5px;
  background-image: url(https://static.igem.wiki/teams/5840/figure/attack.webp);
}
.skills-text{
  transition: all 0.2s linear;
  opacity: 0;
  color: white;
  font-size: 20px;
  height: 80%;
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border: rgb(44, 44, 130) solid 5px;
  border-radius: 20px;
  background-image: url(https://static.igem.wiki/teams/5840/figure/r.webp);
  z-index: 1;
  pointer-events: none;
}
.delete{
  position: absolute;
  height: 60%;
  width: 25%;
  top: 20%;
  right: 7%;
}
.delete-button{
  height: 100%;
  width: 35%;
  border-radius: 15px;
  opacity: 0.8;
}
.delete-button:hover{
  background-color: cadetblue;
  transform: scale(1.05);
}
.delete-button:active{
  background-color: rgb(54, 92, 94);
}
.delete2{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  background-color: cadetblue;
  border-radius: 12px;
  height: 60%;
  width: 16%;
  top: 20%;
  right: 7%;
}
.number{
  width: 35%;
}
.submit{
  width: 30%;
  height: 30%;
}
/* #endregion */

@media (orientation:portrait){
  header{
    height: 15vh;  
    flex-direction: column;
    justify-content: space-evenly;
  }
  .health,.magic{
    flex-direction: column;
    font-size: 50px;
  }
  .Health,.Magic{
    width: 75vw;
    height: 3vh;
    border-radius: 20px;
  }
  .health-bar,.magic-bar{
    height: 3vh;
    line-height: 3vh;
  }
  .body{
    height: 65vh;
    flex-direction: column;
  }
  .bottom{
    height: 18vh;
  }
  .left{
    width: 100vw;
    height: 15vh;
    border-bottom: 0.5vh solid rgb(238, 167, 13);
    border-right: none;
  }
  .left-top1,
  .left-top2,
  .left-top3,
  .left-top4,
  .left-top1-bottom,
  .left-top1-top,
  .left-mid,
  .left-bottom{
    width: 100vw;
  }
  .left-top1{
    height: 6vh;
  }
  .left-top1-top{
    font-size: 40px;
  }
  .left-top1-bottom{
    width: 80vw;
  }
  .left-top2,
  .left-top3,
  .left-top4{
    height: 6vh;
  }
  .left-mid{
    height: 5vh;
  }
  .left-mid img{
    width: 4vh;
  }
  .left-bottom{
    height: 4vh;
  }
  .left-bottom img{
    height: 3vh;
    width: 3vh;
  }
  .screen{
    width: 100vw;
    height: 40vh;
  }
  .inbox{
    width: 90%;
    height: 70%;
  }
  .inbox1,
  .inbox2,
  .inbox3{
    width: 25%;
    height: 90%;
  }
  .inbox img{
    width: 70%;
    height: auto;
  }
  .typing-text{
    top: 20%;
  }
  .box .title.title{
    font-size: 55px;
  }
  .box button{
    width: 15%;
    height: 6%;
    font-size: 25px;
  }
  .inbox .text1{
    font-size: 45px;
  }
  .inbox .text2{
    font-size: 30px;
  }
  .inbox .text3{
    font-size: 25px;
  }
  .turn{
    top: 5%;
    width: 20vw;
    height: 3vh;
    font-size: 40px;
    line-height: 3vh;
    border-radius: 25px;
  }
  .walk{
    width: 20vw;
    height: 5vh;
    right: 10%;
    bottom: 10%;
    font-size: 50px;
  }
  .event{
    width: 20vw;
  }
  .box{
    height: 65%;
    width: 80%;
  }
  .player,.mon{
    width: 12vh;
    top: 45%;
  }
  .monster{
    width: 14vh;
    top: 40%;
  }
  .mon{
    height: 1.5vh;
    border-radius: 40px;
    top: 35%;
  }
  .mon_hp_bar{
    height: 1.5vh;
    line-height: 1.5vh;
    font-size: 30px;
  }
  .right{
    width: 100vw;
    height: 10vh;
    border: none;
    border-top: 0.5vh solid rgb(238, 167, 13);
  }
  .attribute,.attribute2{
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .attribute{
    flex-direction:row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
  }
  .attribute-box1,.attribute-box2{
    width: 30%;
    font-size: 22px;
  }
  .attribute2{
    display: none;
  }
  .fight1{
    display:none;
  }
  .fight2{
    width: 30%;
  }
  .fight3{
    width: 60%;
  }
  .fight2 button{
    font-size: 30px;
  }
  .fight3 button{
    font-size: 30px;
  }
  .delete-button{
    font-size: 30px;
    text-wrap: wrap;
  }
}