*{
  box-sizing:border-box;
}
html,body{
  margin:0;
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  background:#f7f3ea;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
a{
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
img{
  display:block;
  max-width:100%;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* ==========================================================
   默认：电脑端
   1025px 及以上使用横向 PC 布局
   ========================================================== */
.page{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:
    #f7f3ea
    url("../images/background.webp")
    center center / cover
    no-repeat;
}

/* PC 主按钮：横向居中 */
.enter-area{
  position:absolute;
  z-index:10;
  left:50%;
  top:48%;
  width:min(62vw,1120px);
  transform:translate(-50%,-50%);
  display:block;
  outline:none;
  transition:transform .14s ease,opacity .14s ease,filter .14s ease;
}
.enter-area img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 9px 16px rgba(89,58,14,.18));
}
.enter-area:hover{
  filter:brightness(1.03);
}
.enter-area:active{
  transform:translate(-50%,-50%) scale(.988);
}

/* PC 在线客服：右侧固定 */
.service-area{
  position:absolute;
  z-index:20;
  right:1.8vw;
  top:50%;
  width:clamp(95px,7vw,145px);
  transform:translateY(-20%);
  display:block;
  transition:transform .14s ease,filter .14s ease;
}
.service-area img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 7px 12px rgba(70,45,10,.22));
}
.service-area:hover{
  transform:translateY(-20%) scale(1.03);
}
.service-area:active{
  transform:translateY(-20%) scale(.97);
}

/* ==========================================================
   平板
   ========================================================== */
@media (min-width:769px) and (max-width:1024px){
  .enter-area{
    width:78vw;
    top:47%;
  }
  .service-area{
    width:105px;
    right:2%;
    top:55%;
  }
}

/* ==========================================================
   手机端 H5
   768px 及以下使用竖向 H5 排版
   ========================================================== */
@media (max-width:768px){
  html,body{
    background:#f7f3ea;
  }

  .page{
    width:100vw;
    height:100vh;
    height:100dvh;
    background:
      #f7f3ea
      url("../images/background.webp")
      center center / cover
      no-repeat;
  }

  /* 参考图：按钮在中上部 */
  .enter-area{
    left:7.5%;
    top:39.5%;
    width:85%;
    transform:translateY(-50%);
  }
  .enter-area:hover{
    filter:none;
  }
  .enter-area:active{
    transform:translateY(-50%) scale(.985);
  }

  /* 参考图：客服在右侧中下部 */
  .service-area{
    right:2.5%;
    top:61%;
    width:28%;
    max-width:116px;
    transform:none;
  }
  .service-area:hover{
    transform:none;
  }
  .service-area:active{
    transform:scale(.97);
  }
}

/* 小屏手机 */
@media (max-width:360px){
  .enter-area{
    left:6.5%;
    width:87%;
    top:39%;
  }
  .service-area{
    width:27%;
    right:2%;
    top:61.5%;
  }
}

/* 高屏手机 */
@media (max-width:768px) and (min-height:780px){
  .enter-area{
    top:39%;
  }
  .service-area{
    top:60.5%;
  }
}

/* 横屏手机单独适配 */
@media (max-width:768px) and (orientation:landscape){
  .enter-area{
    left:50%;
    top:48%;
    width:min(66vw,620px);
    transform:translate(-50%,-50%);
  }
  .enter-area:active{
    transform:translate(-50%,-50%) scale(.985);
  }
  .service-area{
    width:82px;
    right:2%;
    top:50%;
    transform:translateY(-25%);
  }
  .service-area:hover{
    transform:translateY(-25%);
  }
  .service-area:active{
    transform:translateY(-25%) scale(.97);
  }
}

/* iOS Safari 可视区域兼容 */
@supports (height:100svh){
  @media (max-width:768px){
    .page{
      height:100svh;
    }
  }
}

/* 检测状态 */
.enter-area.is-checking{
  pointer-events:none;
  opacity:.92;
}
.enter-area.is-checking img{
  animation:checkingPulse .9s ease-in-out infinite alternate;
}
@keyframes checkingPulse{
  from{filter:drop-shadow(0 6px 12px rgba(89,58,14,.16)) brightness(.97)}
  to{filter:drop-shadow(0 8px 18px rgba(89,58,14,.28)) brightness(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .enter-area,.service-area{
    transition:none;
  }
  .enter-area.is-checking img{
    animation:none;
  }
}