/* PC 宽屏居中 */
@media screen and (min-width:750px){
  .center{
    width:750px;
    margin-left:-375px;
    left:50%;
  }
}

/* 中黑色层-不可删除 */
.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1000;
}

/* 上黑色层-不可删除 */
.message{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  padding: 20px;
  background: #333;
  text-align: center;
  border-radius: 5px;
  display: flex;
  flex-direction: column;           /* 垂直排列子元素 */
  align-items: center;              /* 水平居中 */
  justify-content: center;          /* 垂直居中 */
  width: 80%;                       /* 确保.message有足够的宽度 */
  box-sizing: border-box;           /* 边框计算在内 */
}

/* 弹窗按钮容器 */
.button-container{
  display: flex;                    /* 使用flex布局来排列按钮 */
  margin-top: 20px;                 /* 与上方文本的间隔 */
}


/* 最初版本按钮（后来被统一渐变覆盖；如果只用后面的统一样式，可以删掉这段）
.button{
  margin: 0 5px;
  padding: 10px 20px;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
}
.button:hover{
  background-color: #0056b3;
}
*/

/* 定义抖动动画的关键帧 */
@keyframes shake{
  0%,3%{ transform: translateX(0); }
  1%{ transform: translateX(-10px); }
  2%{ transform: translateX(10px); }
  3%{ transform: translateX(-10px); }
}

/* 将抖动动画应用到文字 */
.shake-text{
  animation: shake 0.5s infinite;   /* 动画持续时间可以根据需要调整 */
  display: inline-block;
}

/* qx 覆盖层，整页图片 */
#wechat-background{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: none;                    /* 默认不显示 */
}

/* 生成二维码容器 */
.qrcodeContainer{
  display: block;
  border-radius: 20px;              /* 设置圆角大小 */
  overflow: hidden;                 /* 确保图片不会超出圆角范围 */
}

/* 小屏隐藏 PC 弹窗 */
@media screen and (max-width: 768px){
  .overlay,
  .message{
    display: none !important;
  }
}

@media screen and (max-width: 600px){
  html{
    font-size: 60px !important;  /* 可以按效果改成 56/64 等 */
  }
}
/* GM 特权按钮 */
.gm-button{
  padding: 10px 20px;
  border-radius: 6px;
  background: #ff4d4f;              /* 红色背景，很显眼 */
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.6);
  animation: gm-bounce 0.8s infinite alternate ease-in-out,
             gm-glow 1.2s infinite ease-in-out;
}

/* GM 按钮 hover */
.gm-button:hover{
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(255, 77, 79, 0.8);
}

/* GM 按钮上下跳动 */
@keyframes gm-bounce{
  from{ transform: translateY(0); }
  to{   transform: translateY(-6px); }
}

/* GM 按钮发光 */
@keyframes gm-glow{
  0%{
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.6);
    background: #ff4d4f;
  }
  50%{
    box-shadow: 0 6px 18px rgba(255, 120, 117, 1);
    background: #ff7875;
  }
  100%{
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.6);
    background: #ff4d4f;
  }
}

/* 闪烁动画（极无双2 链接用） */
@keyframes blink{
  0%  { opacity: 1; }
  50% { opacity: 0; }
  100%{ opacity: 1; }
}

/* 跳动动画（极无双2 链接用） */
@keyframes bounce{
  0%  { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100%{ transform: translateY(0); }
}



/* 弹窗卡片微磨砂+柔和光影（覆盖上面 .message 的原样式） */
.message{
  background: rgba(60, 60, 60, 0.76) !important;
  box-shadow: 0 6px 32px 0 rgba(64,158,255,.2);
  backdrop-filter: blur(12px);
  border-radius: 14px !important;
  border: 2px solid #409eff1a !important;
}

/* 二维码卡片轻白底+阴影（覆盖上面的 .qrcodeContainer） */
.qrcodeContainer{
  background: #fff;
  box-shadow: 0 2px 18px #409eff29;
  border-radius: 14px !important;
  padding: 13px;
  display: flex;
  justify-content: center;
  max-width: 260px;
  margin: 10px auto 8px auto;
}

/* pc 标签透明 & 描边 */
.pc-tag{
  background: transparent !important;
  color: #409eff !important;
  border: 1px solid #409eff55;
  border-radius: 5px;
  font-weight: bold;
  padding: 2px 8px;
  margin-left: 6px;
}

/* 标题内 PC 标签高亮（写在 HTML 内的那段） */
.title .pc-tag{
  background: #409eff !important;
  color: #fff !important;
  border: none !important;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.95em;
  margin-left: 6px;
  font-weight: bold;
}

/* strong.title 高亮 */
strong.title{
  color: #ff69b4 !important;
  font-weight: bold !important;
}

/* 彩色闪烁文字加强可见度（问答区） */
.blink-text{
  animation: multicolor-blink 1.1s linear infinite;
  font-size: 1.08em;
  font-weight: bold;
  letter-spacing: 0.06em;
}

@keyframes multicolor-blink{
  0%  { color: #e74c3c; }
  20% { color: #f39c12; }
  40% { color: #27ae60; }
  60% { color: #4d80bf; }
  80% { color: #8e44ad; }
  100%{ color: #e74c3c; }
}

/* 弹窗内 span 留白，减少拥挤 */
.message span{
  margin: 2px 0 2px 0;
}

/* 手机端弹窗按钮竖排排列+宽度增长 */
@media screen and (max-width: 600px){
  .button-container{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .qrcodeContainer{
    max-width: 90vw;
    padding: 5vw 0;
  }
}

/* 美化弹窗等所有 .button 按钮：字体、圆角、渐变统一 */
.button{
  display: inline-block;
  min-width: 120px;
  padding: 10px 24px;
  background: linear-gradient(90deg, #409eff 60%, #3ae374 100%);
  color: #fff;
  border: none;
  border-radius: 22px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  margin: 0 7px 12px 0;
  box-shadow: 0 2px 9px #409eff22;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.18s, transform 0.1s;
  vertical-align: middle;
  line-height: 1.25;
  box-sizing: border-box;
}

.button:hover{
  background: linear-gradient(90deg,#3ae374 10%, #409eff 90%);
  box-shadow: 0 4px 18px #409eff33;
  transform: translateY(-1px) scale(1.03);
}


/* 顶部“最小化”按钮样式 */
.minimize-btn{
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 15px;
  width: 32px;
  height: 32px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.8;
  box-shadow: 0 2px 8px #409eff33;
  transition: background .18s;
}

.minimize-btn:hover{
  background: #176fdc;
  opacity: 1;
}

/* 顶部“最小化”按钮样式 */
.minimize-btn{
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 15px;
  width: 32px;
  height: 32px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  opacity: 0.8;
  box-shadow: 0 2px 8px #409eff33;
  transition: background .18s;
}

/* 悬停本身变深色 */
.minimize-btn:hover{
  background: #176fdc;
  opacity: 1;
}

/* 只给右上角的 #minimizeMsg 加提示 */
#minimizeMsg::after {
  content: "点我缩小";
  position: absolute;
  top: 50%;
  left: 110%;                /* 提示在按钮右侧，如果想在左边就改成 right:110% */
  transform: translateY(-50%);
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: #FA0103;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
  animation: minimize-hint-pulse 0.6s ease-in-out infinite;
}

/* 悬停时停止晃动，避免太晃眼 */
#minimizeMsg:hover::after {
  animation: none;
}

/* 轻微左右晃动的动画 */
@keyframes minimize-hint-pulse {
  0%   { transform: translate(0px, -50%);   opacity: 0.7; }
  50%  { transform: translate(2px, -50%);   opacity: 1;   }
  100% { transform: translate(0px, -50%);   opacity: 0.7; }
}

/* 右下角“更多下载地址”按钮额外样式 */
#restoreMsg{
  width: auto;
  padding: 0 18px;
  border-radius: 22px;
  font-size: 16px;
}

/* “点我看教程”按钮本体：更大、更醒目（不闪烁） */
.button-tutorial{
  min-width: 140px;
  padding: 12px 30px !important;
  font-size: 18px !important;
  font-weight: 700;
}

/* 只让里面这段文字多种颜色闪烁 */
.tutorial-text{
  display: inline-block;
  animation: tutorial-text-rainbow 1s linear infinite;
}

/* 文字多彩闪烁关键帧 */
@keyframes tutorial-text-rainbow{
  0%  { color: #ffffff; text-shadow: 0 0 6px rgba(255,255,255,0.9); }
  20% { color: #ff4d4f; text-shadow: 0 0 8px rgba(255,77,79,0.9); }
  40% { color: #fadb14; text-shadow: 0 0 8px rgba(250,219,20,0.9); }
  60% { color: #52c41a; text-shadow: 0 0 8px rgba(82,196,26,0.9); }
  80% { color: #40a9ff; text-shadow: 0 0 8px rgba(64,169,255,0.9); }
  100%{ color: #ffffff; text-shadow: 0 0 6px rgba(255,255,255,0.9); }
}

/* 打字机动画 */
@keyframes typewriter{
  from{ width: 0; }     /* 初始时，宽度为0，文本不可见 */
  to  { width: 100%; }  /* 动画结束时，宽度为100%，文字显示完全 */
}

@keyframes cursor-blink{
  0%,50%{
    border-right: 2px solid black;  /* 显示光标 */
  }
  100%{
    border-right: 2px solid transparent; /* 隐藏光标 */
  }
}

.typewriter-wrapper{
  display: inline-block;
  border-right: 2px solid transparent;    /* 初始状态下光标透明，隐藏 */
  white-space: nowrap;                    /* 保持文本在一行内 */
  overflow: hidden;                       /* 隐藏超出部分 */
  animation-name: typewriter;
  animation-duration: 4s;                 /* 动画持续时间 */
  animation-fill-mode: forwards;          /* 动画完成后保持最后一帧的状态 */
  font-size: 14px;                        /* 字体大小 */
  display: block;                         /* 使每行文字独占一行 */
  width: 0;                               /* 初始时，文字宽度为0，隐藏 */
}

.cursor{
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: black;                /* 光标颜色 */
  animation: cursor-blink 1s step-end infinite; /* 光标闪烁动画 */
  visibility: hidden;                     /* 初始时隐藏光标 */
}

.typewriter-link{
  color: inherit;                         /* 继承链接颜色 */
  text-decoration: none;                  /* 去除下划线 */
  display: inline-block;                  /* 整体可点击 */
}

/* 为每一行设置不同的延时动画 */
.line-1{
  animation-delay: 0s;                    /* 第一行动画从0秒开始 */
}

.line-2{
  animation-delay: 4s;                    /* 第二行动画从4秒开始 */
}

/* 当每行文字完成时，光标隐藏（你原代码里只是占位，这里保持一致） */
.line-1:after,
.line-2:after{
  content: "";
  display: block;
  visibility: visible;
}

/* 右下角“更多下载地址”按钮：更大、更亮、带轻微跳动 */
.restore-btn {
  min-width: 130px;
  padding: 8px 20px;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(90deg, #ff9f43, #ff4d4f);
  box-shadow: 0 4px 14px rgba(255, 77, 79, 0.6);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  animation: restore-bounce 1s ease-in-out infinite;
}

/* 悬停时更亮，动画停一下，避免太晃眼 */
.restore-btn:hover {
  animation: none;
  filter: brightness(1.1);
}

/* 轻微上下跳动 + 呼吸效果 */
@keyframes restore-bounce {
  0%   { transform: translateY(0);    opacity: 0.9; }
  50%  { transform: translateY(-3px); opacity: 1;   }
  100% { transform: translateY(0);    opacity: 0.9; }
}

/* 右下角二次元风格提示卡片 */
.dev-tip {
  position: fixed;
  right: 12px;
  bottom: 16px;
  z-index: 9999;

  display: flex;
  align-items: center;
  padding: 8px 12px;
  max-width: 260px;

  background: rgba(21, 24, 35, 0.96);
  border-radius: 14px;
  border: 2px solid #ff9fdb;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);

  color: #fff;
  font-size: 13px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft Yahei",sans-serif;

  animation: dev-tip-pop 0.3s ease-out, dev-tip-wiggle 1.5s ease-in-out infinite;
}

/* 小头像：用你自己的 chao5.gif，当二次元头像用 */
.dev-tip-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  background-image: url("img/chao5.gif");
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 2px #ff9fdb, 0 0 10px rgba(255, 159, 219, 0.9);
}

/* 文本区域 */
.dev-tip-content {
  display: flex;
  flex-direction: column;
}

.dev-tip-name {
  font-size: 12px;
  color: #ff9fdb;
  margin-bottom: 2px;
}

.dev-tip-text {
  font-size: 13px;
  line-height: 1.4;
}

/* 出场动画：轻微弹出 */
@keyframes dev-tip-pop {
  0%   { transform: translateY(10px) scale(0.9); opacity: 0; }
  60%  { transform: translateY(0)    scale(1.05); opacity: 1; }
  100% { transform: translateY(0)    scale(1); }
}

/* 停留时轻微上下晃一下 */
@keyframes dev-tip-wiggle {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}