*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; background: #000; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
img { user-select: none; }

.landing {
  min-height: 100vh;
  background: #000;
}
.landing[data-layout="pending"] { visibility: hidden; }
.landing[data-layout="pc"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-shell {
  position: relative;
  background: #000;
  overflow: hidden;
}
.poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.poster-hot {
  position: absolute;
  display: block;
  z-index: 3;
  background: transparent;
  border: 0;
  outline: 0;
  text-decoration: none;
  cursor: pointer;
}
.landing.debug-hotspots .poster-hot {
  outline: 2px solid rgba(255, 32, 32, .7);
  background: rgba(255, 32, 32, .12);
}

.poster-pc {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  display: none;
}
.landing[data-layout="pc"] .poster-pc { display: block; }
.landing[data-layout="pc"] .poster-mobile { display: none; }

/* 二维码浮层只作展示，点击穿透到底下的 .hot-download 热区。 */
.qr-overlay {
  position: absolute;
  background: #fff;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
}
.qr-overlay canvas,
.qr-overlay img,
.qr-overlay table,
.qr-overlay svg {
  width: 100% !important;
  height: 100% !important;
}

/* max-width 必须 >= landing.js detectDevice 的 isMobile 阈值（innerWidth <= 960），
   否则 751~960 这档窗口宽度会被判成 h5、却只画 750px 宽的海报，左右露出黑底。
   960 仍小于海报原图宽 1080，放大不会糊。 */
.poster-mobile {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: none;
}
.landing[data-layout="h5"] {
  min-height: 100vh;
}
.landing[data-layout="h5"] .poster-mobile { display: block; }
.landing[data-layout="h5"] .poster-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
body.landing-h5 {
  overflow-x: hidden;
  overflow-y: auto;
}

/* ========== 热区坐标 ==========
   两套海报共用同一份热区 HTML，坐标按 .landing[data-style] 切换。
   百分比相对各自 .poster-shell，与设计稿等比，换分辨率不用重标。
   a 套：landing-pc-a.jpg 1920x1080 / landing-mobile-a.jpg 1080x1920
   b 套：landing-pc-b.jpg 1920x1080 / landing-mobile-b.jpg 1080x1920
   第 4 个联络入口两套不同：a 是官方客服，b 是官方邮箱，另一个隐藏。

   坐标全部从原始设计稿（5760x3240 / 3240x5760）逐像素扫描得出，不是目测：
   顶部入口取图标与文字的并集再左右各留 0.4~0.5% 余量，保证相邻入口不重叠；
   hot-qr 严格等于设计稿上白色二维码占位的边界，不留余量，否则会压住
   「扫一扫 点我下载」那行字或溢出到卡片的紫色描边外。 */
.landing[data-style="a"] .hot-email   { display: none; }
.landing[data-style="b"] .hot-service { display: none; }

/* ---- a 套：黄黑波普「老司机强烈推荐」---- */
.landing[data-style="a"] .poster-pc .hot-business { left: 41.0%; top: 1.8%; width:  7.6%; height: 4.9%; }
.landing[data-style="a"] .poster-pc .hot-channel  { left: 49.9%; top: 1.8%; width:  7.7%; height: 4.9%; }
.landing[data-style="a"] .poster-pc .hot-service  { left: 58.8%; top: 1.8%; width:  8.5%; height: 4.9%; }
.landing[data-style="a"] .poster-pc .hot-group    { left: 68.5%; top: 1.8%; width:  7.7%; height: 4.9%; }
/* 左下黄色卡片整体可点，二维码浮层盖在卡片的白框上。 */
.landing[data-style="a"] .poster-pc .hot-download { left: 27.9%; top: 80.6%; width: 10.7%; height: 19.4%; }
.landing[data-style="a"] .poster-pc .hot-qr       { left: 29.2%; top: 86.9%; width:  6.6%; height: 11.7%; }
.landing[data-style="a"] .poster-pc .hot-risk     { left: 38.8%; top: 79.5%; width: 33.7%; height: 19.0%; }

.landing[data-style="a"] .poster-mobile .hot-business { left: 34.2%; top: 1.2%; width: 12.6%; height: 5.0%; }
.landing[data-style="a"] .poster-mobile .hot-channel  { left: 50.0%; top: 1.2%; width: 12.8%; height: 5.0%; }
.landing[data-style="a"] .poster-mobile .hot-service  { left: 65.8%; top: 1.2%; width: 14.2%; height: 5.0%; }
.landing[data-style="a"] .poster-mobile .hot-group    { left: 83.0%; top: 1.2%; width: 12.8%; height: 5.0%; }
.landing[data-style="a"] .poster-mobile .hot-download { left: 11.0%; top: 64.0%; width: 24.0%; height: 13.5%; }
.landing[data-style="a"] .poster-mobile .hot-qr       { left: 14.4%; top: 67.9%; width: 14.0%; height:  8.0%; }
.landing[data-style="a"] .poster-mobile .hot-risk     { left: 36.0%; top: 63.5%; width: 38.0%; height: 13.5%; }

/* ---- b 套：粉紫「求你们来看糖心涩漫」---- */
.landing[data-style="b"] .poster-pc .hot-group    { left: 68.4%; top: 3.0%; width: 5.7%; height: 11.2%; }
.landing[data-style="b"] .poster-pc .hot-business { left: 75.2%; top: 3.0%; width: 7.0%; height: 11.2%; }
.landing[data-style="b"] .poster-pc .hot-channel  { left: 83.1%; top: 3.0%; width: 7.0%; height: 11.2%; }
.landing[data-style="b"] .poster-pc .hot-email    { left: 91.3%; top: 3.0%; width: 6.8%; height: 11.2%; }
.landing[data-style="b"] .poster-pc .hot-download { left: 80.9%; top: 56.4%; width: 11.4%; height:  5.4%; }
.landing[data-style="b"] .poster-pc .hot-risk     { left: 80.4%; top: 64.0%; width: 11.9%; height:  3.9%; }
.landing[data-style="b"] .poster-pc .hot-qr       { left: 80.3%; top: 69.6%; width: 12.7%; height: 22.5%; }

.landing[data-style="b"] .poster-mobile .hot-group    { left: 47.5%; top: 1.6%; width: 7.0%; height: 8.7%; }
.landing[data-style="b"] .poster-mobile .hot-business { left: 60.8%; top: 1.6%; width: 7.0%; height: 8.7%; }
.landing[data-style="b"] .poster-mobile .hot-channel  { left: 75.0%; top: 1.6%; width: 7.0%; height: 8.7%; }
.landing[data-style="b"] .poster-mobile .hot-email    { left: 89.1%; top: 1.6%; width: 7.0%; height: 8.7%; }
/* b 套移动稿没画下载区，整屏兜底：z-index 压在顶部联络热区之下。 */
.landing[data-style="b"] .poster-mobile .hot-download { left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.landing[data-style="b"] .poster-mobile .hot-risk,
.landing[data-style="b"] .poster-mobile .hot-qr       { display: none; }

/* ========== a 套 PC 的下载按钮 ==========
   a 套设计稿只画了扫码卡片，没画下载按钮，PC 端整页没有可见的下载入口；
   按运营要求补两个，配色（#f84888 → #e81858 渐变 + 白字）取自旧版海报里
   画着的那两个按钮。位置是海报右下角人物区的空白处。
   只在 a 套 PC 出现：b 套右侧有自己的免费下载区，移动端暂不加。
   字号用 min(1.02vw, 1.81vh) —— 等于海报宽度的 1%，因为 .poster-pc 的宽是
   min(100vw, 100vh*16/9)，这样按钮随海报等比缩放，不会在窄窗口里涨破。 */
.dl-pair { display: none; }
.landing[data-style="a"] .poster-pc .dl-pair {
  position: absolute;
  /* 左边界 72.6% 是被 hot-risk（到 72.5%）顶住的下限，右边留 2.6% 余量；
     这个宽度让单个按钮占 11.8% 海报宽，与旧版海报里那两个按钮的 11.6% 基本一致。 */
  left: 72.6%;
  top: 83.2%;
  width: 24.8%;
  height: 11.4%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5%;
}
.dl-btn {
  flex: 1 1 0;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  border-radius: 999px;
  background: linear-gradient(180deg, #f84888 0%, #e81858 100%);
  /* 按钮落在浅色人物上，靠深色投影 + 白色描边把边界拉出来，否则粉底白字发飘。 */
  border: .1em solid rgba(255, 255, 255, .92);
  box-shadow: 0 .2em .55em rgba(0, 0, 0, .45), inset 0 .08em 0 rgba(255, 255, 255, .4);
  color: #fff;
  font-size: min(1.5vw, 2.67vh);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 .06em .12em rgba(0, 0, 0, .3);
}
.dl-btn:active { filter: brightness(.9); }
.dl-ico {
  width: 1.18em;
  height: 1.18em;
  flex: none;
  fill: currentColor;
}

/* ========== a 套 H5 的下载按钮 ==========
   手机上扫码卡片没有意义，海报又没画按钮，用户只能盲点整张图。
   位置取扫码黑卡下缘（逐行扫描 landing-mobile-a.jpg 得出：黑卡到 79.2%）
   到下排人物之间那条空带，两侧各留 5%。
   字号 min(4vw, 30px) —— 等于海报宽的 4%，.poster-mobile 宽是
   min(100vw, 750px)，750px 处两值正好相等，宽屏不会继续涨。 */
.landing[data-style="a"] .poster-mobile .dl-pair {
  position: absolute;
  left: 5%;
  top: 80.4%;
  width: 90%;
  height: 5.8%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4%;
}
.landing[data-style="a"] .poster-mobile .dl-btn {
  height: 100%;
  font-size: min(4vw, 30px);
}
.landing.debug-hotspots .dl-pair {
  outline: 2px solid rgba(32, 160, 255, .7);
}

/* ========== 安卓「安装包报毒解决方案」弹层 ========== */
.android-modal {
  position: fixed; inset: 0;
  background: #f5f5f5;
  color: #222;
  z-index: 100;
  overflow-y: auto;
}
.android-modal[hidden] { display: none; }
.android-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky; top: 0; z-index: 2;
}
.android-modal-back {
  width: 32px; height: 32px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.android-modal-back img { width: 100%; height: 100%; object-fit: contain; }
.android-modal-title { font-size: 16px; font-weight: 600; flex: 1; text-align: center; }
.android-modal-spacer { width: 32px; }

.android-modal-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.android-modal-cell {
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}
.android-modal-cell img { width: 100%; display: block; }

.android-modal-detail { padding: 12px; }
.android-modal-detail[hidden] { display: none; }
.android-modal-pic { background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.android-modal-pic img { width: 100%; display: block; }

.auto-download-fallback {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(20, 20, 20, .88);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .32);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  transform: translateX(-50%);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.auto-download-fallback[hidden] { display: none; }
.auto-download-fallback button {
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: #08b857;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.auto-download-fallback button:active { opacity: .78; }