/**
 * iOS PWA 专用微调 —— 单独成文件，不改 30KB 的主样式表
 *
 * 只在「添加到主屏幕」以独立模式运行时才有变化：
 * 那时 status bar 是 black-translucent（见 index.html 的 meta），页面会铺到刘海下面，
 * 顶部内容必须自己让出 safe-area-inset-top。
 *
 * 普通 Safari 浏览时 env(safe-area-inset-top) 是 0，加载这个文件不产生任何视觉变化。
 */

/* ---------- 顶部安全区 ---------- */

/* 首页标题行 */
.hero {
  padding-top: calc(40 * var(--u) + env(safe-area-inset-top));
}

/* 对比页：只有上面那台的机头要避开刘海，下面那台保持原样 */
.page-compare .slot:first-child .slot-head {
  padding-top: calc(16 * var(--u) + env(safe-area-inset-top));
}

/* 大图页的计数器 */
.counter {
  top: calc(24 * var(--u) + env(safe-area-inset-top));
}

/* 关于页 */
.page-about {
  padding-top: calc(34 * var(--u) + env(safe-area-inset-top));
}

/* ---------- 应用内返回键 ---------- */

/**
 * 独立模式下没有浏览器工具栏，也就没有返回键 —— 从首页进机型页就出不来了。
 * 小程序那边靠导航栏的「<」解决，H5 这里必须自己补一个。
 * 普通 Safari 里浏览器自带返回，所以默认不显示。
 */
.back-btn {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: calc(14px + env(safe-area-inset-left));
  width: 38px;
  height: 38px;
  /* 默认就一直显示：JS 只在非首页注入，所以首页本来也不会有。
     微信内置浏览器、App 内嵌 webview 里没有单独的浏览器返回栏，
     Safari 普通模式里它只是和工具栏重复，不影响使用。 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(23, 14, 19, 0.58);
  border: 1px solid rgba(255, 226, 236, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text, #f9eef2);
  font-size: 24px;
  line-height: 1;
  font-family: -apple-system, "PingFang SC", sans-serif;
  z-index: 99;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.back-btn:active {
  background: rgba(45, 27, 35, 0.8);
}