/* 材料名称浮层动画 */
.material-tip {
  position: absolute;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 18px;
  border-radius: 16px;
  font-size: 12px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  animation: tipIn 0.5s;
}

.fade-slide-enter-active, .fade-slide-leave-active {
  transition: all 0.5s cubic-bezier(.55,0,.1,1);
}
.fade-slide-enter, .fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}
@keyframes tipIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 步骤内容淡入动画 */
.step-animate {
  animation: fadeInStep 0.8s;
}
@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 人物出场动画 */
.character-animate {
  animation: characterIn 0.5s;
}
@keyframes characterIn {
  from { opacity: 0; transform:  translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 小青吃人动画 */
@keyframes characterIn0 {
  0% { opacity: 0; transform: scale(0.5) translateX(80%) translateY(50vw) }
  80% { opacity: 1; transform: scale(1.2) translateY(0%) translateX(0%); }
  100% { opacity: 1; transform: scale(1) translateY(0%) translateX(0%); }
}

.character-animate0 {
  animation: characterIn0 .3s;
}

.character-animate1 {
  animation: characterIn1 0.8s;
}
@keyframes characterIn1 {
  from { opacity: 0; transform: scale(0.8) translateY(100%) translateX(-50%); }
  to { opacity: 1; transform: scale(1) translateY(0%) translateX(-50%); }
}
.character-animate2 {
  animation: characterIn2 0.8s;
}
@keyframes characterIn2 {
  from { opacity: 0; transform: scale(0.8) translateY(100%) translateX(-50%); }
  to { opacity: 1; transform: scale(1) translateY(-50%) translateX(-50%); }
}
@keyframes fadein-sahua {
  from { opacity: 0; }
  to { opacity: 1;}
}
.fadein-sahua {
  animation: fadein-sahua 0.5s;
}
/* 人物一直动 */
/* 特别轻微、较慢的弹簧效果 */
@keyframes moveInfinit {
  0%   { transform: scale(1); }
  25%  { transform: scaleX(0.997) scaleY(1.003); } /* 轻微下压 */
  50%  { transform: scaleX(1.003) scaleY(0.997); } /* 轻微回弹 */
  75%  { transform: scaleX(0.999) scaleY(1.001); } /* 次级回弹 */
  100% { transform: scale(1); }
}
.moveInfinit {
  transform-origin: center bottom; /* 从脚底模拟弹簧效果 */
  animation: moveInfinit 2.4s cubic-bezier(.2,.8,.2,1) infinite;
  will-change: transform;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .moveInfinit {
    animation: none;
    transform: none;
  }
}

@keyframes moveInfinit1 {
  from { transform:  translateX(-1px);   }
  to { transform:  translateX(0);  }
}
.moveInfinit1 {
  animation: moveInfinit1 1s infinite;
}

@keyframes moveInfinit2 {
  from { transform:  translateY(-1px);   }
  to { transform:  translateY(0);  }
}
.moveInfinit2 {
  animation: moveInfinit2 1s infinite;
}
@keyframes moveInfinit3 {
  from { transform:  scale(0.98) translateX(-50%)  }
  to { transform:  scale(1) translateX(-50%) }
}
.moveInfinit3 {
  animation: moveInfinit3 1s infinite;
}
.game-page {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  
}
.loading {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url('https://qwshop-1256412556.cos.ap-chongqing.myqcloud.com/static/img/index_bg.png') no-repeat center top;
  background-size: 100% 100%;
}
.loading .loading-logo {
  margin-top: 25vh;
  width: 60vw;
  height: auto;
  margin-bottom: 40px;
}
.loading-bar-bg {
  display: flex;
  align-items: center;
  width: 284px;
  height: 12px;
  background: #F5F5F5;
  box-shadow: 0px 4px 4px 0px rgba(89,170,42,0.25);
  border-radius: 24px 24px 24px 24px;
}

.loading-progress {
  margin: 0 2px;
  height: 8px;
  background: #FCCB0D;
  border-radius: 24px 24px 24px 24px;
}
.loading-text {
  margin-bottom: 10px;
  color: #FFFFFF;
  font-size: 14px;
  text-align: center;
}

/* youxi */
.game {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.house {
  position: relative;
  flex: 1;
  width: 100vw;
}
.house-bg {
  background: url('https://qwshop-1256412556.cos.ap-chongqing.myqcloud.com/static/img/house1.png') no-repeat center top;
  background-size: 100% 100%;
  height: 100%;
}
.kongren {
  position: absolute;
}
.kongren-img {
  height: 30vw;
  width: auto; 
} 
.kongren-mingpai {
  position: absolute;
  /* height: 20px;
  width: auto; */
  left: 10%;
  width: 15vw;
}
.notice2 {
  position: absolute;
  left: 0px;
  width: 92px;
  height: 38px;
  font-size: 12px;
  /* transform: scale(.9); */
  color: #613101;
  text-align: center;
  background: url('https://qwshop-1256412556.cos.ap-chongqing.myqcloud.com/static/img/notice2.png') no-repeat center top;
  background-size: 100% 100%;
}
.notice2 .content {
  margin: 15% 0% 0% 0;
  text-align: center;
  line-height: 1.5;
}
.kongren-sleeping {
  position: absolute;
  width: 10vw;
  height: auto;
}

.xiaoqing {
  position: absolute;
  bottom: 1vw;
  right: 1vw;
}

.notice1 {
  position: absolute;
  bottom: 18vw;
  right: 19vw;
  width: 150px;
  height: 60px;
  font-size: 12px;
  /* transform: scale(0.9); */
  color: #339627;
  text-align: center;
  background: url('https://qwshop-1256412556.cos.ap-chongqing.myqcloud.com/static/img/notice.png') no-repeat center top;
  background-size: 100% 100%;
}
.mingpai-wraper {
  position: absolute;
  top: -14px;
  right: 20px;
  width: 43px;
  height: 23px;
}
.mingpai-wraper1 {
  right: 10px;
}
.mingpai-wraper1 .mingpai-text {
  color: #613101;
}
.mingpai-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.mingpai-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #339627;
}
.xiaoqing-img {
  width: auto;
  height: 36vw;
}

.notice1-2 {
  width: 200px;
  height: 90px;
}
.notice1-1.notice1-2 {
  bottom: 25vw;
  width: 110px;
  height: 40px;
}
.notice1 .content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 8% 0;
}
.fonts {
  font-family: 'qingyuan';
}


/* 材料 */
.cailiao-wraper {
  width: 100vw;
  overflow: hidden;
}
.cailiao {
  background: #1E2D36;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  height: 17vh;
}

.cailiao-item-wraper{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 8px 4px;
  width: 8vh;
  vertical-align: top;
}
.cailiao-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8vh;
  height: 8vh;
  border-radius: 4px;
}
.cailiao-item .checked {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  color: #339627;
  font-size: 10px;
}
.cailiao-item .cailiao-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cailiao-title {
  width: 100%;
  font-family: 'qingyuan';
  font-size: 12px;
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* limit to 2 lines */
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  margin-top: 6px;
}
/* 标题可拖动滚动提示（独立规则，避免嵌套） */
.cailiao-title {
  cursor: grab;
  -webkit-user-drag: none;
}
.cailiao-title:active {
  cursor: grabbing;
}
/* 平滑滚动支持 */
.cailiao {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Allow native horizontal pan and momentum scrolling on touch devices */
.cailiao {
  touch-action: pan-x;
}

/* Move content slightly away from screen edges so edge-swipe navigation is less likely */
.cailiao {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  /* overscroll-behavior-x: contain;  */
}

/* Hide webkit scrollbar for cleaner look on mobile */
.cailiao::-webkit-scrollbar {
  display: none;
}

/* Respect device safe area (iPhone X and similar) so titles are not blocked by home indicator */
.cailiao-item-wraper {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Add a little extra bottom padding for devices with UI overlays */
body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.time-wraper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 10px;
  position: absolute;
  top: 1vh;
  left: 0;
  right: 0;
  z-index: 99;
}

.time-wraper .time {
  position: relative;
  width: 104px;
  height: 22px;
  background: #F6EAD5;
  box-shadow: inset 0px 0px 4px 2px #D5A25D;
  border-radius: 100px 100px 100px 100px;
  border: 1px solid #F5E9D1;
}
.time-icon {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 28px;
  height: 28px;
}
.time-text {
  flex: 1;
  font-family: 'qingyuan';
  font-size: 12px;
  color: #895A06;
  margin-left: 26px;
}
.audio-wraper {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.progress-wraper {
  /* height: 68px;
  padding: 0 10px;
  background: rgba(255,255,255,0.61);
  box-shadow: inset 0px 0px 4px 2px #FFFFFF;
  border-radius: 100px 0px 0px 100px;
  font-family: 'qingyuan'; */
}
.progress-icon {
  margin-right: 4px;
  width: 24px;
  height: 24px;
}
.game-bar-bg {
  width: 100px;
  height: 12px;
  background: rgba(87,58,22,0.7);
  border-radius: 24px 24px 24px 24px;  
  border: 1px solid rgba(225, 183, 63, 1);
  /* border-image: linear-gradient(90deg, rgba(225, 183, 63, 1), rgba(246, 168, 29, 1)) 1 1; */
  display: flex;
  align-items: center;
}
.game-progress {
  margin: 0 2px;
  height: 8px;
  background: linear-gradient(#DDF69B, #C2EC6A, #9EDF47);
  border-radius: 24px 24px 24px 24px;  
}
.progress-text {
  font-size: 12px;
  color: #FF5154;
  margin-bottom: 6px;
}
.progress-text1 {
  justify-content: space-between;
  align-items: center;
}
/* 建材 */
.roof-materials {
  position: absolute;

}
.roof-materials-img {
  width: 100%;
  height: 100%;
}
.roof-materials-img1 {
  position: absolute;
}
.drag-preview-img {
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  border-radius: 8px;
  background: #fff;
}

/* 结果 */
.success-xiaoqing {
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  z-index: 2;
}
.success-xiaoqing .xiaoqing-img {
  position: absolute;
  bottom: 3vw;
  left: 17.5vw;
  width: 65vw;
  height: auto;
}
.success-xiaoqing .notice1 {
  bottom: 118vw;
  left: 20vw;
  z-index: 1;
}
.success-xiaoqing .notice1 .content {
  line-height: 1.5;
  margin: 0 10px;
  line-height: 1.5;
}
.success-xiaoqing .xiaoqing-heart {
  position: absolute;
  bottom: 120vw;
  left: 50%;
  width: 20vw;
  height: auto;
}

.success-xiaoqing .xiaoqing-sahua{
  position: absolute;
  bottom: 90vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: auto;
}

/* 失败  */
.house-bg1 {
  background-image:  url('/static/img/house_shui.png');
}
.leak-img {
  position: absolute;
}
.over-tips {
  position: absolute;
  width: 253px;
  height: 50px;
  background: url('/static/img/notice1.png') no-repeat;
  background-size: 100% 100%;
  /* background: rgba(0,0,0,0.4);
  border-radius: 100px 100px 100px 100px;
  border: 1px solid #3BD99C; */
  left: 50%;
  transform: translateX(-50%);
  bottom: 110vw;
  font-size: 18px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.yezhu {
  position: absolute;
  background: url('/static/img/notice4.png') no-repeat center top;
  background-size: 100% 100%;
  width: 120px;
  height: 58px;
}
.yezhu .content {
  padding: 8px 10px;
  color: #FF7F24;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}

.xiaoqing2 {
  bottom: 3vw;
  left: 17.5vw;
}
.xiaoqing2 .xiaoqing-img {
  width: 55vw;
  height: auto;
}
.xiaoqing1 .notice1 {
  bottom: 25vw;
  width: 130px;
  height: 50px;
}

.projecter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 2;
}
.projecter-img {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 55vw;
  height: auto;
}
.projecter .notice3 {
  position: fixed;
  bottom: 110vw;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 54px;
  font-size: 16px;
  color: #000;
  text-align: center;
  background: url('/static/img/notice1.png') no-repeat center top;
  background-size: 100% 100%;
}
.projecter .notice3 .content {
  padding: 16px 12px;
  line-height: 1.2;
}
.projecter-mingpai {
  position: fixed;
  bottom: 38vh;
  left: 12vw;
  width: 24px;
  height: 94px;
  z-index: 1;
}
.house-bg2 {
  background-image:  url('/static/img/house_tu.png');
}

.submit-btn {
  margin-top: 8px;
  width: 120px;
  height: 28px;
  font-family: 'qingyuan';

  font-size: 12px;

  display: flex;
  align-items: center;
  justify-content: center;
  color: #9A5801;
  width: 70px;
  height: 26px;
  background: url('/static/img/sub-bg.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 100px 100px 100px 100px;

}
.drag-preview-img {
 position: fixed;
  width: 8vh;
  height: 8vh;
  pointer-events: none;
  opacity: 0.8;
  z-index: 9999;
  transform: translate(-50%, -50%);
  border-radius: 2vh;
}
.audio-icon {
  width: 20px;
  height: 20px;
}

.blackbg {
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;
}
.xiaoqing, .over-tips {
  z-index: 9999;
}