* {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /* 避免padding撑大元素，关键！ */
    }

html {
  width: 100%;
  height:  100%;
  margin: auto auto;  /* 水平居中，垂直居中 */

  display: flex; /* 启用 Flex 布局 */
  align-items: center; /* 子元素（body）垂直居中 */
  justify-content: center; /* 子元素（body）水平居中 */
  overflow: hidden; /* 禁止窗口滚动（可选，避免小屏出现滚动条） */
  }

body {
  /* height:  min(100vh, 400px);
  width: calc(min(100vh, 400px) * 59 / 61); */
  height: 370px;
  width: 357px;
  position: relative;
  margin: auto auto;  /* 水平居中，垂直居中 */
  /* 禁止出现滚动条（可选，若内容未超出窗口） */
  overflow: hidden; /* hidden = 隐藏滚动条，auto = 自动显示（默认） */

  display: flex; /* 启用 Flex 布局 */
  flex-direction: column; /* 子元素垂直排列（保持原有上下顺序） */
  align-items: center; /* 所有子元素水平居中（关键） */
  justify-content: center; /* 可选：同时水平居中 */
  background: rgba(0,0,0,0.5); 
  max-width: 357px; /* 把原来的固定 width 改成 max-width，逻辑不变但更灵活 */
}

/* 子元素自适应（避免内部内容溢出） */
body > * {
  max-width: 100%; /* 子元素宽度不超过body */
  max-height: 100%; /* 子元素宽度不超过body */
}

/* 极简样式，适配游戏界面 */
.login_xh {
  width: 100%;
  height: 100%;
  margin: auto auto;  /* 水平居中，垂直居中 */
  /* background: rgba(0,0,0,0.5);  */
  background-image: url("../img/ui_denglu_db02.png"); 
  background-size: contain; /* 完整显示背景图，不裁剪 */
  background-position: center center; /* 背景图在 Div 内居中 */
  background-repeat: no-repeat; /* 禁止平铺 */

  position: relative;
  display: flex; /* 启用 Flex 布局 */
  flex-direction: column; /* 子元素垂直排列（保持原有上下顺序） */
  align-items: center; /* 所有子元素水平居中（关键） */
  justify-content: center; /* 可选：同时水平居中 */
}

.xh_top_div {
  width: 100%;
  height: 18%;
  /* background: rgba(230, 9, 9, 1); */
  display: flex; /* 启用 Flex 布局 */
  flex-direction: row; /* 子元素水平排列 */
  align-items: center; /* 所有子元素水平居中（关键） */
  justify-content: flex-start; /* 同时向左靠齐 */
}

.xh_user_div {
  width: 78%;
  height: 50%;
  /* background: rgba(0,0,0,0.4); */
  margin-top: 14%;  /*外边距*/
  margin-bottom: 12%;  /*外边距*/
  padding-left: 13%;     /*内边距*/
  
  display: flex; /* 启用 Flex 布局 */
  flex-direction: column; /* 子元素垂直排列（保持原有上下顺序） */
  align-items: center; /* 所有子元素水平居中（关键） */
  justify-content: center; /* 可选：同时水平居中 */
  gap: 26%; /* 子元素之间统一间距，替代原有的 margin-bottom，布局更整洁 */
}

.xh_buttom_div {
  width: 100%;
  height: 32%;
  /* background: rgb(7, 198, 33, 0.5); */
  /* opacity: 0; 0 = 100% 透明，1 = 0% 透明 */
  
  display: flex; /* 启用 Flex 布局 */
  flex-direction: column; /* 子元素垂直排列（保持原有上下顺序） */
  align-items: center; /* 所有子元素水平居中（关键） */
  justify-content: center; /* 可选：同时水平居中 */
}

.xh_btn_div {
  width: 86%;
  height: 100%;
  /* background: rgb(7, 198, 33, 0.5); */
  /* opacity: 0; 0 = 100% 透明，1 = 0% 透明 */
  
  padding-top: 4%;     /*内边距*/
  padding-bottom: 7%;     /*内边距*/
  display: flex; /* 启用 Flex 布局 */
  flex-direction: row; /* 子元素水平排列 */
  align-items: center; /* 所有子元素水平居中（关键） */
  justify-content: space-between; /* 两端对齐 */
}

.back-btn {
    height: 100%;
    width: 17%;
    opacity: 0; /*  0 = 100% 透明，1 = 0% 透明 */
    border: none;
    background: #2f54eb;
    cursor: pointer;
}

/* 输入框组样式 */
.input-group {
    height: 29%;
    width: 100%;
    margin-bottom: 0%;
    margin-top: 0%;
}

/* 输入框样式 */
.input-group input {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgb(207, 192, 192);
  border-radius: 8px;
  color: #0b0b0b;
  font-size: 18;
  outline: none;
  padding-left: 8%;     /*内边距*/
}

/* 输入框聚焦效果 */
.input-group input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 输入框占位符样式 */
.input-group input::placeholder {
  color: rgb(181, 171, 171);
}


/* 注册按钮样式 */
.login_btn {
  width: 47%;
  height: 95%;
  opacity: 0; /* 0 = 100% 透明，1 = 0% 透明 */
  border: null;
  background: rgb(210, 18, 18);
  border-radius: 8px;
  cursor: pointer;
}

.toast {
      /* 默认隐藏 */
      display: none;
      /* 固定居中 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* 样式美化 */
      padding: 2% 4%;
      background: rgba(0, 0, 0, 0.8); /* 半透明黑底 */
      color: #fff; /* 白色文字 */
      font-size: 14px;
      border-radius: 8px;
      z-index: 9999; /* 层级最高，不被遮挡 */
    }

/* 提示框显示状态 */
.toast.show {
  display: block;
  /* 可选：添加淡入动画 */
  animation: fadeIn 0.3s ease;
}

/* 登录中遮罩层 - 全屏覆盖，半透明背景 */
.mask-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7); /* 半透明黑色遮罩 */
  z-index: 9998; /* 确保在所有元素之上（Toast 是 9999） */
  display: none; /* 默认隐藏 */
  justify-content: center;
  align-items: center;
  /* 禁止遮罩层内的点击穿透 */
  pointer-events: auto;
}

/* 登录中提示框 */
.mask-content {
  background: rgba(0, 0, 0, 0.9);
  padding: 3vw 5vw;
  border-radius: 12px;
  color: #fff;
  font-size: clamp(14px, 3vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vw;
}

/* 加载动画（可选，增强体验） */
.loading-spinner {
  width: clamp(20px, 5vw, 40px);
  height: clamp(20px, 5vw, 40px);
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #4fc3f7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 关键：原有界面元素默认允许点击，遮罩显示时屏蔽底层交互 */
body.mask-active .page-container {
  pointer-events: none; /* 屏蔽底层所有元素点击 */
  opacity: 0.5; /* 可选：底层元素变灰，增强遮罩感知 */
}