/* 趣龙岗 H5 — 公共样式与设计 token（V1 / V2 共用） */

/* ════════════════════════════════════════════
   加载策略：避免「色块先渲染、文字图片后到」的撕裂感
   1) .qlg-pageload  — 全屏 loader 遮罩，HTML 一加载就显示
                       JS 渲染完后 markReady() 淡出移除
   2) .phone opacity:0 — 容器默认透明，markReady() 后加 .ready 淡入
   3) 配合 zcool-kuaile.css 的 font-display:swap（已修正）
   ════════════════════════════════════════════ */
.qlg-pageload {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(circle at 20% 0%, #FFE56A 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, #FFD1F0 0%, transparent 45%),
    radial-gradient(circle at 0% 80%, #C6E5FF 0%, transparent 40%),
    #FFF5D6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity .35s ease;
}
.qlg-pageload.fade { opacity: 0; pointer-events: none; }
.qlg-pageload-spin {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 5px solid rgba(45, 42, 74, .12);
  border-top-color: #2D2A4A;
  border-right-color: #FDEB00;
  animation: qlg-spin .9s linear infinite;
  box-shadow: 0 8px 18px rgba(170, 140, 30, .25);
}
.qlg-pageload-text {
  font-family: var(--font-round, system-ui);
  font-weight: 800;
  font-size: 14px;
  color: #2D2A4A;
  letter-spacing: 2px;
  opacity: .8;
}
@keyframes qlg-spin { to { transform: rotate(360deg); } }

/* phone 容器默认透明，markReady 后 .ready 淡入 */
.phone {
  opacity: 0;
  transition: opacity .3s ease .05s;
}
.phone.ready { opacity: 1; }

/* ── 图片渐入：opt-in 模式（默认显示，不阻塞）
   只对显式带 .fade-in 类的 <img> 启用 opacity 渐入。
   v1 项目无 forced opacity:0，切换流畅；v2 同此策略避免 onload 时序坑。 */
.phone img.fade-in {
  opacity: 0;
  transition: opacity .35s ease;
}
.phone img.fade-in.img-loaded { opacity: 1; }

/* ── Reveal-on-scroll：滚到视口才出现
   元素加 .reveal 默认隐藏 + 微移，IntersectionObserver 触发加 .visible 淡入归位 */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 兜底：若 JS 异常未调 markReady，5s 后强制显示，避免卡白 */
@keyframes qlg-phone-failsafe { to { opacity: 1; } }
.phone:not(.ready) {
  animation: qlg-phone-failsafe 0s ease 5s forwards;
}

:root {
  /* 主黄系（来自 龙岗文体局 官方品牌色） */
  --qlg-yellow:        #FDEB00;
  --qlg-yellow-deep:   #FFB627;
  --qlg-yellow-soft:   #FFF6A8;
  --qlg-cream:         #FFF8E1;

  /* 五彩童趣副色 */
  --qlg-coral:   #FF6B6B;
  --qlg-pink:    #FF8FB1;
  --qlg-apple:   #6BCB77;
  --qlg-sky:     #4D96FF;
  --qlg-purple:  #B388FF;
  --qlg-orange:  #FF9E3B;

  /* 文字 */
  --qlg-ink:       #2D2A4A;
  --qlg-ink-soft:  #6C6890;
  --qlg-line:      #2D2A4A;

  /* 字体 */
  --font-round:  'ZCOOL KuaiLe','Fredoka','M PLUS Rounded 1c','PingFang SC','Hiragino Sans GB',sans-serif;
  --font-hand:   'Ma Shan Zheng','Caveat','ZCOOL KuaiLe','PingFang SC',sans-serif;
  --font-std:    'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-std);
  color: var(--qlg-ink);
  background: #f0eee9;
  overscroll-behavior: none;
  /* 不要用 display:flex 居中 .phone —— 当 fixed 定位的弹窗遮罩 append 到 body 时，
     flex container 会触发 reflow + backdrop-filter 让底部区域出现扭曲拉宽。
     改用 margin:auto 直接居中，弹窗就稳了。 */
}

/* =================  Phone Frame（真机：铺满视口，桌面：居中列）  ================= */
.phone {
  width: 100%;
  /* 手机壳物理上限：真 px 锁定，不随 --u 缩放（否则大屏下会撑到 493px） */
  max-width: 430px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  background: var(--qlg-cream);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: calc(14 * var(--u));
  /* 顶部留白：取代被移除的伪状态栏；有刘海时吃安全区，否则给 12px */
  padding-top: max(env(safe-area-inset-top), calc(12 * var(--u)));
}
.phone-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 留出 tabbar 64u + active 图标 translateY -8u 突出 + 一点呼吸 */
  padding-bottom: calc(76 * var(--u));
}
.phone-scroll::-webkit-scrollbar { display: none; }

/* iOS-style 状态栏 */
.statusbar {
  height: calc(44 * var(--u));
  padding: 0 calc(22 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(15 * var(--u));
  font-weight: 600;
  font-family: var(--font-std);
  color: var(--qlg-ink);
  position: relative;
  z-index: 5;
  flex-shrink: 0;
}
.statusbar .si { display: flex; gap: calc(5 * var(--u)); align-items: center; }
.statusbar svg { display: block; }

/* 底部 Tab Bar */
.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(64 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  z-index: 6;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(3 * var(--u));
  font-size: calc(11 * var(--u));
  font-family: var(--font-round);
  color: var(--qlg-ink-soft);
  cursor: pointer;
  text-decoration: none;
}
.tab-item.active { color: var(--qlg-ink); }
.tab-ico {
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}

/* 通用工具类 */
.row { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; }
.screen-pad {
  padding: calc(16 * var(--u)) calc(12 * var(--u));
}

/* 操作按钮 — 一键拨号 / 一键导航 */
.act-btn {
  flex: 1; height: calc(38 * var(--u)); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  font-family: var(--font-round);
  font-size: calc(14 * var(--u)); font-weight: 600;
  cursor: pointer; border: none;
  text-decoration: none;
  color: var(--qlg-ink);
}

/* =================  导航 / 拨号 弹窗（V1·V2 共用）  ================= */
.qlg-modal-mask {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(45, 42, 74, .45);
  backdrop-filter: blur(calc(3 * var(--u)));
  display: flex; align-items: flex-end; justify-content: center;
  animation: qlg-mask-in .2s ease;
}
@keyframes qlg-mask-in { from { opacity: 0; } to { opacity: 1; } }
.qlg-modal {
  /* 与 .phone 同步：物理 430px 锁定，不随 --u 缩放 */
  width: 100%; max-width: 430px;
  background: #fff;
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
  padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u) + env(safe-area-inset-bottom));
  text-align: center;
  box-shadow: 0 calc(-10 * var(--u)) calc(40 * var(--u)) rgba(45, 42, 74, .25);
  animation: qlg-sheet-up .28s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes qlg-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.qlg-modal-icon { font-size: calc(34 * var(--u)); line-height: 1; }
.qlg-modal-title { font-family: var(--font-round); font-weight: 800; font-size: calc(18 * var(--u)); color: var(--qlg-ink); margin-top: calc(8 * var(--u)); }
.qlg-modal-sub { font-size: calc(13 * var(--u)); color: var(--qlg-ink-soft); margin-top: calc(4 * var(--u)); }
.qlg-map-list { display: flex; flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); }
.qlg-map-btn {
  height: calc(48 * var(--u)); border: none; border-radius: calc(14 * var(--u));
  background: var(--qlg-cream); color: var(--qlg-ink);
  font-family: var(--font-round); font-weight: 700; font-size: calc(15 * var(--u));
  cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.qlg-map-btn:active { transform: scale(.97); background: var(--qlg-yellow-soft); }
.qlg-modal-row { display: flex; gap: calc(12 * var(--u)); margin-top: calc(18 * var(--u)); }
.qlg-modal-cancel, .qlg-modal-go {
  height: calc(48 * var(--u)); border: none; border-radius: calc(14 * var(--u));
  font-family: var(--font-round); font-weight: 700; font-size: calc(15 * var(--u)); cursor: pointer;
}
.qlg-modal-cancel { width: 100%; margin-top: calc(14 * var(--u)); background: #F0EDE3; color: var(--qlg-ink-soft); }
.qlg-modal-row .qlg-modal-cancel { margin-top: 0; }
.qlg-modal-go { background: linear-gradient(180deg, #FFE066, #FFC93C); color: var(--qlg-ink); box-shadow: 0 calc(3 * var(--u)) 0 #E09A0E; }
.qlg-modal-go:active, .qlg-modal-cancel:active { transform: scale(.97); }

/* 评分星 */
.stars { color: #FFB627; font-size: calc(11 * var(--u)); letter-spacing: calc(1 * var(--u)); }
.stars .rate-num { color: var(--qlg-ink); font-family: var(--font-round); margin-left: calc(4 * var(--u)); }
.stars .dim { opacity: .25; }