/* ==========================================================================
   手机购彩页 —— 对齐参考站 /mobile 的结构与尺寸
   参考站做法（mobile-DssZHP1a.css）：
     .mobileCon  背景图 bg.png 1920x655 居中，高 655
     .mobile     .container(1000px) 居中，position:relative，padding 105/68
     其余元素全部相对 .mobile 绝对定位：
       APP 图标  90x90，内容区左上角(left 68 / top 105)
       网址      h2 26px #e4393c，top 230
       二维码    img 114x114 + 8px 白边，left 70 / top 359
       手指      finger.png，left 444 / top 250，z-index 2（压在手机前面）
       手机      .mobileSlide right:-84 top:41 内 .slideTxtBox left:134 top:-12
                 => 412x595 的整机贴图落在 left 68 / top 29（相对容器中心）
   标题「手机购彩」「手机输入以下网址…」「建议使用浏览器…」都烤在背景图里，
   所以这里只叠加上面 5 个元素。
   1000px 容器居中 = 视口居中 = 背景图居中，故一律用 calc(50% ± Npx) 定位。
   ========================================================================== */
.mref{
  position:relative;
  min-height:655px;
  color:#fff;
  background-color:#150c0a;
  background-image:url(/resources/images/bg-ref.jpg?v=1);
  background-position:center top;
  background-size:3200px 100%;
  background-repeat:no-repeat;
  overflow:hidden;
}
.mref-stage{position:relative;max-width:1920px;height:655px;margin:0 auto}

/* ---- APP 图标：参考站是一张 90x90 的图，这里用站内 logo 现拼，任何分辨率都清晰 ---- */
.mref-appicon{
  position:absolute;
  left:calc(50% - 432px);
  top:105px;
  z-index:2;
  width:90px;height:90px;
  box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8px 5px 6px;
  border-radius:19px;
  background:linear-gradient(150deg,#f52639,#be0c27);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  text-decoration:none !important;
}
.mref-appicon img{width:76px;height:auto;display:block}
.mref-appicon span{
  display:block;
  padding:1px 5px;
  border-radius:8px;
  background:linear-gradient(180deg,#fff3aa,#e9bf66);
  color:#8c1414 !important;
  font-size:9px;line-height:1.3;font-weight:700;
  letter-spacing:-.2px;white-space:nowrap;
}
.mref-appicon:hover{filter:brightness(1.06)}

/* ---- 手机：mref-phone-1/2/3 是整机贴图（机身+屏幕），412x595 ---- */
.mref-phone{
  position:absolute;
  left:calc(50% + 68px);
  top:29px;
  z-index:1;
  width:412px;
  height:595px;
}
.mref-phone img{
  position:absolute;left:0;top:0;width:412px;height:595px;
  opacity:0;
  animation:mrefSlides 15s ease-in-out infinite;
}
.mref-phone img:nth-child(1){animation-delay:0s}
.mref-phone img:nth-child(2){animation-delay:5s}
.mref-phone img:nth-child(3){animation-delay:10s}
@keyframes mrefSlides{
  0%      {opacity:0}
  4%,30%  {opacity:1}
  34%,100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .mref-phone img{animation:none;opacity:0}
  .mref-phone img:nth-child(1){opacity:1}
}

/* ---- 网址 ---- */
.mref-url{
  position:absolute;
  left:calc(50% - 432px);
  top:248px;   /* 与参考站红字基线对齐（实测 ref 253 / 原 230 时为 235）*/
  z-index:2;
  margin:0;
  font-size:26px;
  line-height:1.25;
  font-weight:700;
  color:#e4393c !important;
  text-decoration:none;
  letter-spacing:.3px;
}
.mref-url:hover{text-decoration:underline}

/* ---- 手指：盖在手机前面，制造“手指点屏幕”的层次 ---- */
.mref-finger{
  position:absolute;
  left:calc(50% - 56px);
  top:250px;
  z-index:2;
  width:242px;height:408px;
  pointer-events:none;
  -webkit-user-select:none;user-select:none;
}

/* ---- 二维码：114x114 图 + 8px 白边 ---- */
.mref-qr{
  position:absolute;
  left:calc(50% - 430px);
  top:359px;
  z-index:2;
  display:block;
  border:8px solid #fff;
  background:#fff;
  line-height:0;
}
.mref-qr img{width:114px;height:114px;display:block}

/* ---- 窄屏：背景图版式无法缩放，改为纵向排列的简洁样式 ---- */
@media(max-width:1100px){
  .mref{
    min-height:0;padding:34px 16px;
    background-image:linear-gradient(140deg,#2b1d18,#4a372c);
    background-size:cover;
  }
  .mref-stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
  .mref-appicon,.mref-url,.mref-qr{position:static;left:auto;top:auto}
  /* .mref-phone 必须保留 position:relative，否则里面绝对定位的三张图会跑到页面左上角 */
  .mref-phone{position:relative;left:auto;top:auto}
  .mref-finger{display:none}
  /* 纵向排列的先后顺序：标题 → APP图标 → 网址 → 二维码 → 浏览器提示 → 手机 */
  .mref-stage::before{order:0}
  .mref-appicon{order:1}
  .mref-url{order:2}
  .mref-qr{order:3}
  .mref-stage::after{order:4}
  .mref-phone{order:5}
  .mref-stage::before{
    content:"手机购彩";display:block;font-size:30px;font-weight:600;color:#fff;
  }
  .mref-url{font-size:clamp(22px,7vw,30px);color:#ff5661 !important}
  .mref-qr{border-width:6px}
  .mref-qr img{width:150px;height:150px}
  .mref-phone{width:280px;height:404px}
  .mref-phone img{width:280px;height:404px}
  .mref-stage::after{
    content:"建议使用浏览器：Safari / Google Chrome";
    display:block;font-size:13px;color:#d8c9c0;
  }
}