/* ===== 基础与背景 ===== */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,system-ui;
  color:#fff;
  background:#000 url('../images/bg-mobile.jpg') center center / cover no-repeat;
}

/* 桌面用横图 */
@media (min-width:768px){
  body{ background-image:url('../images/bg-desktop.jpg'); }
}

/* ===== 居中容器 ===== */
.wrap{
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}

/* ===== 卡片基础样式 ===== */
.card{
  width:min(640px,94vw);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:saturate(120%) blur(10px);
  border-radius:18px;
  padding:20px 22px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.title{margin:2px 0 2px; font-size:1.6rem; font-weight:800; letter-spacing:.3px}
.sub{margin:.1rem 0 1rem; color:#e9edf7; opacity:.85; font-size:.95rem}

/* ===== 三个按钮 ===== */
.links{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pill{
  display:block; padding:14px 16px; border-radius:14px;
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(92deg,#8A3AB9 0%, #FF5E9A 50%, #FF9349 100%);
  box-shadow:0 10px 24px rgba(255,120,160,.28);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pill:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(255,120,160,.35); }
.pill:active{ transform:translateY(0); opacity:.96; }

/* ===== 提示文字 ===== */
.tip{ margin:12px 0 0; color:#eef1fb; opacity:.9; font-size:.9rem }

/* ===== 小屏优化 ===== */
@media (max-width:480px){
  .title{font-size:1.45rem}
  .pill{padding:13px 14px}
}

/* === 桌面端 (≥980px) === */
@media (min-width:980px){
  .wrap{ position:relative !important; min-height:100dvh !important; }

  .card{
    position:absolute !important;
    left:65.5% !important;     /* 桌面左右位置 */
    top:46% !important;        /* 桌面上下位置 */
    transform:translate(-50%,-50%) !important;
    width:520px !important;    /* 桌面卡片宽度 */
    max-width:94vw !important;
  }

  .links{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .pill{
    width:340px !important;    /* 桌面按钮宽度 */
    max-width:90% !important;
    padding:13px 14px !important;
  }
}

/* === 手机端 (≤767px) === */
@media (max-width:767px){
  .wrap{ position:relative !important; min-height:100svh !important; }

  .card{
    position:absolute !important;
    left:64% !important;       /* 手机左右 */
    top:55% !important;        /* 手机上下 */
    transform:translate(-50%,-50%) scale(0.8) !important; /* 手机缩放 */
    width:90vw !important;     /* 手机卡片宽度 */
    padding:18px !important;
    border-radius:14px !important;
    z-index:10 !important;
  }

  /* 手机背景：伪元素全屏铺满，可缩放 */
  body{ background:none !important; min-height:100svh !important; overflow:hidden !important; }
  body::before{
    content:""; position:fixed; left:50%; top:50%;
    width:220vmax; height:220vmax;
    transform:translate(-50%,-50%) scale(0.41) !important;
    transform-origin:55% 50% !important;
    background:url('../images/bg-mobile.jpg') no-repeat center/cover;
    z-index:-1; pointer-events:none;
  }
}
@media (max-width: 767px){
  .card{
    background: rgba(255, 255, 255, 0.1); /* 提高透明度，看起来更白 */
    border: 1px solid rgba(255,255,255,0.2); /* 边框稍微明显一点 */
    backdrop-filter: saturate(120%) blur(10px);
  }
}