/* Go Ball H5：整页长图 + Google Play 点击热区 */

:root {
  --page-w: 375px;
  --play: #113f2c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #eef5e4;
  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.page {
  position: relative;
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  /* 底部留给粘性 Dock，避免挡住长图末尾可点区 */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px);
}

.page-art {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 热区：按设计稿 375 宽百分比定位，盖在长图上 */
.hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  border-radius: 12px;
  /* 调试时可开：background: rgba(255,0,0,.2); */
}

/* 热区百分比按裁掉 Dock 后的内容高度（约 5254）计算 */
.hotspot--hero {
  left: 5.866%;
  top: 12.314%;
  width: 88.267%;
  height: 1.294%;
  border-radius: 19px;
}

.hotspot--footer {
  left: 6.4%;
  top: 96.765%;
  width: 45.07%;
  height: 1.237%;
  border-radius: 10px;
}

/* 粘性底部 Dock：始终可点去 Google Play（长图已裁掉内嵌 Dock，只留这一条） */
.dock-sticky {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 20;
  width: min(347px, calc(100% - 28px));
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 7px 13px rgba(20, 76, 53, 0.2);
}

.dock-sticky img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 480px) {
  body {
    background: #dfead3;
  }

  .page {
    box-shadow: 0 0 0 1px rgba(17, 63, 44, 0.06), 0 24px 60px rgba(17, 63, 44, 0.12);
  }
}

/* 电脑端屏蔽：藏落地内容，只留提示层 */
html.desktop-blocked,
html.desktop-blocked body {
  height: 100%;
  overflow: hidden;
  background: #eef5e4;
}

html.desktop-blocked .page,
html.desktop-blocked .dock-sticky {
  display: none !important;
}

.mobile-only-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(17, 63, 44, 0.08), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(17, 63, 44, 0.06), transparent 45%),
    #eef5e4;
}

.mobile-only-gate__card {
  width: min(360px, 100%);
  text-align: center;
  color: #113f2c;
}

.mobile-only-gate__title {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.mobile-only-gate__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.78;
}