:root {
  --design-h: 900; /* 设计稿高度基准 */
  --design-w: 1900; /* 设计稿宽度基准 */
  --min-screen-w: 1200px; /* 你想要的最小屏幕宽度 */
  
  /* 核心：限制--vw最小值 → 当屏幕<--min-screen-w时，--vw取最小值，元素不再缩小 */
  --vw: max(
    calc(100vw / var(--design-w)), /* 正常适配：屏幕宽/设计稿宽 */
    calc(var(--min-screen-w) / var(--design-w)) /* 最小值：最小宽度/设计稿宽 */
  );
  --ratio: calc(var(--design-w) / var(--design-h)); 
  --visual-height: 100vh;
}

body {  
  /* background-color: #FFFFFF !important; */
  overflow-x: auto;
  overflow-y: auto;
  width: 100%;
  min-width: var(--min-screen-w);
  height: (calc(1010 * var(--vw))+40px);
  margin: auto auto;
  position: relative;
}


/* ========== 背景色块：pagebg1/pagebg2 精准显示 ========== */
.pagebg0 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: calc(890 * var(--vw));
  z-index: 0;
  background-color: #3CA5FF;
}

.pagebg1 {
  position: absolute;
  top: calc(300 * var(--vw));
  left: 0px;
  width: 100%;
  height: calc(595 * var(--vw));
  z-index: 1;
  background: url("../../images/index/jianbian.png") no-repeat center / 100% 100%;
}
.pagebg2 { position: absolute;
  top:0px; 
  right:0px; 
  width: 70%;
  height: calc(890 * var(--vw));
  z-index:2; 
  object-fit: fill;
  /* pointer-events: none; */
}


/* 主体结构尺寸 */

.content{
  width: 100%;
  /* height: calc(740 * var(--vw)); */
  height: calc(900 * var(--vw));
  z-index: 3;
  position: relative;
}

.pagebottom{
  width: 100%;
  background-color: #FFFFFF;
  /* 1. 按设计比例计算理论高度 */
  --calc-height: calc(900 * var(--vw)); 
  /* 3. 最终高度：min(最大高度, max(最小值0, 适配高度)) */
  height: min(
    40px,/* 上限：最大高度 */
    max(
      0px, /*最小值0，确保高度≥0 */
      calc(var(--visual-height) - var(--calc-height)) /* 差值适配 */
    )
  );
}
.footer{
  width: 100%;
  height: calc(270 * var(--vw));
  z-index: 2;
  background-color: #FFFFFF;
  text-align: center;
  color: #070606;
  font-size: calc(16 * var(--vw));
  line-height: calc(24 * var(--vw));
  position: relative;
}




/* 具体组件定义 */

/*1.导航栏定义 */
.nav {
  position: fixed;
  top: calc(20 * var(--vw)); 
  right: calc(70 * var(--vw)) ;
  width: calc(560 * var(--vw));
  height: calc(39 * var(--vw));
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 紧凑排列 */
  gap: 0; /* 无额外间距 */
  z-index: 999; /* 超高层级，确保不被任何元素覆盖 */
  background: transparent; /* 兜底：背景透明，避免遮挡 */
}
.nav-wrap {
  width: calc(140 * var(--vw)); /* 每个导航项固定140px */
  height:calc(38 * var(--vw));;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.nav-wrap::after {
  content: "";
  position: absolute;
  right: 0px;
  top: calc(11 * var(--vw));;
  width: calc(1 * var(--vw));;
  height: calc(16 * var(--vw));;
  background-color: #c2cacf;
}
.nav-wraplast {
  width: calc(180 * var(--vw));;
  height: calc(38 * var(--vw));;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav1 {
  width: calc(120 * var(--vw));; /* 按钮宽度104px */
  height: 100%;
  font-size: calc(18 * var(--vw));;
  line-height:calc(38 * var(--vw));; /* 垂直居中 */
  text-align: center;
  color: #070606;
  background-color: transparent ; /* 强制白色背景，确保可见 */
  border-radius: calc(20 * var(--vw));;
  cursor: pointer;
  text-decoration: none;
  display: block; /* 强制块级显示 */
}
.nav1:hover {
  color: #FFFFFF;
  background-color: #070606 ;
}
.navbg { 
  position: fixed; 
  top:0; 
  right:0; 
  width:calc(664 * var(--vw));; 
  height:calc(145 * var(--vw));; 
  z-index:3; 
  object-fit:contain; 
}

/* 2.logo定义 */
.logo {
  position: absolute;
  top: calc(20 * var(--vw)) ;
  left: calc(20 * var(--vw));
  width:calc(234 * var(--vw));
  height: calc(124 * var(--vw));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  object-fit: contain;
}


/* 3.content内部组件的定义位置设置 */
/* 欢迎图片 */
.welcometowodi {
  position: absolute;
  top: calc(150 * var(--vw));
  left: calc(90 * var(--vw));
  width: calc(1123 * var(--vw)); /* 匹配图片实际宽度1123px */
  height: calc(190 * var(--vw)); /* 匹配图片实际高度190px */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  object-fit: contain; /* 强制图片完整显示，不变形 */
}



/* 开始游戏模块 */
.begingame {
  position: absolute;
  top: calc(500 * var(--vw));
  left: calc(394 * var(--vw));
  width: calc(492 * var(--vw));
  height: calc(140 * var(--vw));
  padding: calc(9 * var(--vw));
  background-color: #FC9122;
  border-radius: calc(80 * var(--vw));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.begingame1 {
  width: 100%;
  height: 100%;
  background-color: #FBBB29;
  border-radius: calc(71 * var(--vw));
  display: flex;
  align-items: center;
  justify-content: center;
}

.beginbtn {
  width: calc(450 * var(--vw));
  height: calc(100 * var(--vw));
  border: none;
  background: url('../../images/index/startgame.png') no-repeat center / calc(353 * var(--vw)) calc(56 * var(--vw));
  cursor: pointer;
  animation: breath 10s ease-in-out infinite;
}
@keyframes breath {
  0% { opacity: 1; transform: scale(1); }
  5% { opacity: 0.8; transform: scale(0.98); }
  10% { opacity: 1; transform: scale(1.1); }
  15% { opacity: 0.8; transform: scale(0.98); }
  20% { opacity: 1; transform: scale(1.1); }
  25% { opacity: 0.8; transform: scale(0.98); }
  30% { opacity: 1; transform: scale(1.1); }
  35% { opacity: 0.8; transform: scale(0.98); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}


/* 下载游戏模块 */
.download {
  position: absolute;
  top: calc(670 * var(--vw));
  left: calc(435 * var(--vw));
  width: calc(316 * var(--vw));
  height: calc(125 * var(--vw));
  background-color: #FFFFFF;
  border-radius: calc(20 * var(--vw));
  display: flex;
  align-items: center;
  padding: 0 calc(11 * var(--vw));
  z-index: 10;
}

/* 竖排文字：精准尺寸 */
.vertical-paragraph {
  width: calc(40 * var(--vw));
  height: calc(100 * var(--vw));
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: calc(18 * var(--vw));
  color: #070606;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 二维码：精准尺寸 */
.erweima {
  width: calc(100 * var(--vw));
  height: calc(100 * var(--vw));
  margin: 0 calc(11 * var(--vw));
}

.erweima img {
  width: 100%;
  height: 100%;
}

/* 安卓/苹果按钮外层容器：上边距 */
.appandapk {
  width: calc(160 * var(--vw));
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: calc(25 * var(--vw)); /* 外层上边距 */
}

/* 安卓按钮：保留间距 */
.apk {
  width: 100%;
  height: calc(50 * var(--vw));
  background-color: #1593ff;
  background-image: url('../../images/index/apk.png');
  background-repeat: no-repeat;
  background-position: calc(20 * var(--vw)) center;
  background-size: calc(25 * var(--vw)) calc(25 * var(--vw));
  border-radius: calc(10 * var(--vw));
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* 苹果按钮 */
.app {
  width: 100%;
  height: calc(50 * var(--vw));
  background-color: #070606;
  background-image: url('../../images/index/app.png');
  background-repeat: no-repeat;
  background-position: calc(23 * var(--vw)) center;
  background-size: calc(20 * var(--vw)) calc(20 * var(--vw));
  border-radius: calc(10 * var(--vw));
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: calc(3 * var(--vw));
}

/* 按钮hover效果 */
.apk:hover {
  background-size: calc(30 * var(--vw)) calc(30 * var(--vw));
  background-position: calc(17.5 * var(--vw)) center;
}

.app:hover {
  background-size: calc(23 * var(--vw)) calc(23 * var(--vw));
  background-position: calc(20.5 * var(--vw)) center;
}

/* 按钮文字：精准位置 */
.appdescription {
  margin-left: calc(40 * var(--vw));
  font-size: calc(20 * var(--vw));
  color: #FFFFFF;
  text-align: center;
  width: 100%;
  line-height: calc(50 * var(--vw));
}

.apk:hover .appdescription,
.app:hover .appdescription {
  font-size: calc(22 * var(--vw));
}
/* 小人图片 */
.xiaoren {
  position: absolute;
  top: calc(353 * var(--vw));
  left: calc(440 * var(--vw));
  width: calc(152 * var(--vw));
  height: calc(187 * var(--vw));
  aspect-ratio: 150/171;
  pointer-events: none;
  z-index: 11;
}

/* 泡泡图片 */
.paopao {
  position: absolute;
  top: calc(355 * var(--vw));
  left: calc(600 * var(--vw));
  width: calc(266 * var(--vw));
  height: calc(110 * var(--vw));
  aspect-ratio: 266/110;
  z-index: 6;
}

/* 静态背景图片 */
.bg0 { position: absolute; 
  top:calc(110 * var(--vw)); 
  right:calc(380 * var(--vw)); 
  width:calc(349 * var(--vw)); 
  height:calc(174 * var(--vw)); 
  z-index:32; 
  object-fit:contain; 
}
.bg1 { position: absolute; 
  bottom:5px; 
  right:70px; 
  width:calc(603 * var(--vw)); 
  height:calc(730 * var(--vw)); 
  z-index:30; 
  object-fit:contain; 
  pointer-events: none;
}
.bg2 { 
  position: absolute; 
  bottom:0; 
  left:0; 
  width:100%; 
  height:auto;  
  object-fit:cover; 
  z-index:31;
  pointer-events: none;
}
.bg3 { 
  position: absolute; 
  bottom:calc(165 * var(--vw)); 
  left:0; width:calc(184 * var(--vw)); 
  height:calc(121 * var(--vw)); 
  z-index:2; 
  object-fit:contain; 
}

.yazi { 
  position: absolute; 
  top:calc(100 * var(--vw)); 
  right:calc(750 * var(--vw)); 
  width:calc(105 * var(--vw)); 
  height:calc(100 * var(--vw)); 
  z-index:6; 
  object-fit:contain; 
}
.shiling { 
  position: absolute; 
  top:calc(668 * var(--vw)); 
  left:calc(780 * var(--vw)); 
  width:calc(97 * var(--vw)); 
  height:calc(125 * var(--vw)); 
  z-index:11; 
  object-fit:contain; 
}
.plumetop { 
  position: absolute; 
  top:calc(100 * var(--vw)); 
  left:calc(510 * var(--vw)); 
  width:calc(83 * var(--vw)); 
  height:calc(55 * var(--vw));
  z-index:6; 
  object-fit:contain; 
}
.plumeright { 
  position: absolute; 
  top:calc(450 * var(--vw)); 
  left:calc(950 * var(--vw));
  width:calc(111 * var(--vw)); 
  height:calc(135 * var(--vw)); 
  z-index:6; 
  object-fit:contain; 
}
.plumeleft { 
  position: absolute; 
  top:calc(260 * var(--vw)); 
  left:calc(234 * var(--vw)); 
  width:calc(115 * var(--vw)); 
  height:calc(170 * var(--vw));
  z-index:6;
  object-fit:contain; 
}

.star1 { 
  position: absolute; 
  top:calc(270 * var(--vw)); 
  right:calc(140 * var(--vw)); 
  width:calc(57 * var(--vw)); 
  height:calc(73 * var(--vw)); 
  transform:rotate(72deg); 
  z-index:6; 
  object-fit:contain; 
}
.star2 { 
  position: absolute; 
  top:calc(455 * var(--vw)); 
  right:calc(690 * var(--vw)); 
  width:calc(57 * var(--vw)); 
  height:calc(73 * var(--vw)); 
  z-index:6; 
  object-fit:contain; 

}
.star3 { 
  position: absolute; 
  bottom:calc(97 * var(--vw)); 
  left:calc(1033 * var(--vw)); 
  width:calc(36 * var(--vw)); 
  height:calc(36 * var(--vw)); 
  z-index:6; 
  object-fit:contain; 
}
.star4 { 
  position: absolute; 
  bottom:calc(56 * var(--vw)); 
  left:calc(776 * var(--vw)); 
  width:calc(20 * var(--vw)); 
  height:calc(20 * var(--vw)); 
  z-index:6; 
  object-fit:contain; 
}


/* 底部元素定义 */
.footer a { color: #070606; text-decoration: none; font-size: calc(16 * var(--vw)); }
.footer a:hover { text-decoration: underline; }
.beianIcon{
  width:calc(14 * var(--vw)) ;
  height:calc(14 * var(--vw));
}

/* ========== 弹窗 ========== */
#layer { 
  display: none;
  position: fixed; 
  top:0; 
  left:0; 
  right:0; 
  bottom:0; 
  background:rgba(0,0,0,.7); 
  z-index:9999; 
}
#popCadpa {
  display: none;
  position: fixed;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  width: calc(782 * var(--vw));
  height: calc(633 * var(--vw));
  background: url(../../../resources/images/index/shilingtipspic.png) no-repeat center / 100% 100%;
  z-index:9999;
}
#popCadpa .pop-close {
  display: none;
  position: absolute;
  top:calc(30 * var(--vw));
  right:calc(40 * var(--vw));
  width:calc(40 * var(--vw));
  height:calc(40 * var(--vw));
  background: url(../../../resources/images/index/shilingtipsclosepic.png) no-repeat center / 50% 50%;
  cursor: pointer;
  z-index:10;
}