:root {
  /* 1 个 375 设计稿的像素：375 视口宽下 = 1 真 px；
     视口超过 430px 后用 1.1467 真 px 锁顶；其余按 0.2667vw 等比缩放 */
  --u: min(0.2667vw, 1.1467px);
}

/* V2 · 圆润3D萌系 — 渐变光感 / 软投影 / 毛绒·橡皮泥质感 */

.v2 { font-family: var(--font-round); }

.v2.phone {
  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;
}

.v2-card {
  background: #fff;
  border-radius: calc(16 * var(--u));
  box-shadow:
    0 calc(1 * var(--u)) 0 rgba(255,255,255,.9) inset,
    0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-6 * var(--u)) rgba(70,50,0,.14),
    0 calc(4 * var(--u)) calc(10 * var(--u)) calc(-2 * var(--u)) rgba(70,50,0,.08);
  padding: calc(16 * var(--u));
  position: relative;
}
.v2-btn-primary {
  background: linear-gradient(180deg, #FFE066 0%, #FFC93C 100%);
  color: var(--qlg-ink);
  border-radius: 999px;
  box-shadow:
    0 calc(-2 * var(--u)) 0 rgba(255,255,255,.6) inset,
    0 calc(3 * var(--u)) 0 #E09A0E,
    0 calc(8 * var(--u)) calc(16 * var(--u)) calc(-4 * var(--u)) rgba(224,154,14,.4);
  font-weight: 700;
}
.v2-btn-secondary {
  background: linear-gradient(180deg, #ffffff 0%, #F2EEDE 100%);
  color: var(--qlg-ink);
  border-radius: 999px;
  box-shadow:
    0 calc(-1 * var(--u)) 0 rgba(255,255,255,.9) inset,
    0 calc(3 * var(--u)) 0 #D8CFAF,
    0 calc(6 * var(--u)) calc(12 * var(--u)) calc(-2 * var(--u)) rgba(170,140,40,.18);
  font-weight: 700;
}
.v2-chip {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(calc(8 * var(--u)));
  border-radius: 999px;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 700;
  white-space: nowrap;
  font-family: var(--font-round);
  color: var(--qlg-ink);
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(180,140,30,.12);
  flex-shrink: 0;
}
.v2-chip.active {
  background: linear-gradient(180deg, #FFE066 0%, #FFC93C 100%);
  box-shadow:
    0 calc(-1 * var(--u)) 0 rgba(255,255,255,.6) inset,
    0 calc(2 * var(--u)) 0 #E09A0E,
    0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(224,154,14,.35);
}
.v2-pill-stat {
  background: var(--qlg-cream);
  border-radius: calc(14 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  font-size: calc(11 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  color: var(--qlg-ink-soft);
  font-weight: 600;
}

/* Hero 软泥球装饰 */
.v2-blob {
  position: absolute; border-radius: 50%;
  filter: blur(calc(0.5 * var(--u)));
  box-shadow:
    inset calc(-10 * var(--u)) calc(-20 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.06),
    inset calc(10 * var(--u)) calc(14 * var(--u)) calc(24 * var(--u)) rgba(255,255,255,.6);
}

/* V2 顶部圆形图标按钮 */
.v2-iconbtn {
  width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(170,140,30,.18), 0 calc(-1 * var(--u)) 0 #fff inset;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.v2-iconbtn.sm { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }

/* V2 Tab bar */
.v2 .tabbar {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(calc(20 * var(--u)));
  border-top: calc(1 * var(--u)) solid rgba(255,210,63,.3);
  box-shadow: 0 calc(-8 * var(--u)) calc(24 * var(--u)) rgba(180,140,30,.08);
}
.v2 .tab-ico {
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%;
}
.v2 .tab-item.active .tab-ico {
  width: calc(38 * var(--u)); height: calc(38 * var(--u));
  background: linear-gradient(180deg, #FFE066 0%, #FFC93C 100%);
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.6) inset, 0 calc(3 * var(--u)) 0 #E09A0E, 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(224,154,14,.4);
  transform: translateY(calc(-8 * var(--u)));
}
.v2 .tab-item.active span { font-weight: 700; margin-top: calc(-4 * var(--u)); }

/* ════════════════════════════════════════════
   Route 详情页组件
   主题色通过 --rt-color / --rt-color-soft / --rt-color-cc / --rt-color-66 等
   CSS 变量在外层容器注入，子组件全部走 var() 取色，不再 ${r.color} 拼字符串。
   ════════════════════════════════════════════ */
.rt-root { --rt-ink: #2D2A4A; --rt-ink-soft: #6C6890; }

/* — 顶栏（返回 / 标题 / 更多） — */
.rt-topbar {
  padding: calc(2 * var(--u)) calc(12 * var(--u)) 0; position: relative; z-index: 5;
  display: flex; align-items: center; gap: calc(8 * var(--u));
}
.rt-topbar-title {
  flex: 1; text-align: center;
  font-family: var(--font-round); font-size: calc(15 * var(--u)); font-weight: 800;
}
.rt-topbar-id { color: var(--rt-color); font-size: calc(14 * var(--u)); margin-left: calc(4 * var(--u)); }

/* — 顶部线路切换 chips — */
.rt-chips {
  margin-top: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u));
  position: relative; z-index: 4;
  display: flex; gap: calc(8 * var(--u)); overflow-x: auto;
}
.rt-chip {
  flex-shrink: 0; display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u)); border-radius: 999px; border: none;
  background: rgba(255,255,255,.85); color: var(--rt-ink);
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(180,140,30,.12);
  font-family: var(--font-round); font-weight: 800;
  font-size: calc(14 * var(--u)); cursor: pointer; backdrop-filter: blur(calc(6 * var(--u)));
}
.rt-chip.active {
  padding: calc(5 * var(--u)) calc(14 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  background: linear-gradient(180deg, var(--rt-color), var(--rt-color-dd));
  color: #fff;
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.5) inset,
              0 calc(4 * var(--u)) calc(10 * var(--u)) var(--rt-color-55);
}
.rt-chip-char {
  width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%;
  background: #fff; color: var(--rt-color);
  font-weight: 800; font-size: calc(14 * var(--u));
  display: flex; align-items: center; justify-content: center;
}

/* — 滚动容器 — */
.rt-scroll {
  position: relative; z-index: 2;
  overflow-x: hidden; overflow-y: auto;
}

/* — Hero 卡片 — */
.rt-hero-wrap { position: relative; padding: calc(12 * var(--u)) calc(16 * var(--u)) 0; }
.rt-hero {
  background: linear-gradient(165deg, var(--rt-color) 0%, var(--rt-color-cc) 100%);
  padding: calc(18 * var(--u)) calc(20 * var(--u)); position: relative; overflow: hidden;
  color: #fff; min-height: calc(172 * var(--u));
}
.rt-hero-watermark {
  position: absolute; right: calc(-20 * var(--u)); top: calc(-30 * var(--u));
  font-family: var(--font-round); font-weight: 800; font-size: calc(200 * var(--u));
  color: rgba(255,255,255,.15); line-height: 1; pointer-events: none;
}
.rt-hero-body { position: relative; z-index: 2; }
.rt-hero-en {
  background: rgba(255,255,255,.25); backdrop-filter: blur(calc(8 * var(--u)));
  font-size: calc(14 * var(--u)); font-weight: 800;
  padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px;
  letter-spacing: calc(1 * var(--u)); color: #fff;
}
.rt-hero-title {
  font-family: var(--font-round); font-size: calc(34 * var(--u)); font-weight: 800;
  color: #fff; margin-top: calc(10 * var(--u)); line-height: 1.05;
  text-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.25);
}
.rt-hero-tagline {
  font-size: calc(14 * var(--u)); color: rgba(255,255,255,.95);
  margin-top: calc(4 * var(--u)); font-weight: 600;
}
.rt-hero-meta { display: flex; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.rt-hero-meta span {
  background: rgba(255,255,255,.95); color: var(--rt-ink);
  border-radius: 999px; padding: calc(4 * var(--u)) calc(12 * var(--u));
  font-size: calc(14 * var(--u)); font-weight: 800;
  box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.12);
}

/* — Section 通用：标题 + 角徽 — */
.rt-section { position: relative; padding: calc(22 * var(--u)) calc(16 * var(--u)) 0; }
.rt-section.tight { padding-top: calc(34 * var(--u)); }
.rt-section-head {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  margin-bottom: calc(12 * var(--u)); position: relative; z-index: 2;
}
.rt-section-title {
  font-family: var(--font-round); font-size: calc(18 * var(--u));
  font-weight: 800; color: var(--rt-ink); margin: 0;
}
.rt-section-badge {
  background: linear-gradient(180deg, #FDEB00, #F5C518);
  color: var(--rt-ink);
  font-size: calc(14 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 999px;
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(194,154,0,.3); font-weight: 800;
}

/* — 简介卡 — */
.rt-intro {
  font-size: calc(14 * var(--u)); color: var(--rt-ink);
  line-height: 1.75; letter-spacing: calc(.2 * var(--u)); padding-right: calc(30 * var(--u));
}

/* — 亮点列表 — */
.rt-highlights {
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  position: relative; z-index: 2;
}
.rt-highlight {
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  display: flex; align-items: center; gap: calc(12 * var(--u));
  background: linear-gradient(85deg, var(--rt-color-soft), #fff);
}
.rt-highlight:nth-child(even) {
  background: linear-gradient(95deg, var(--rt-color-soft), #fff);
  margin-left: calc(14 * var(--u));
}
.rt-highlight:nth-child(3) { margin-right: calc(14 * var(--u)); }
.rt-highlight-num {
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(160deg, var(--rt-color), var(--rt-color-cc));
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.5) inset,
              0 calc(4 * var(--u)) calc(8 * var(--u)) var(--rt-color-55);
  color: #fff; font-weight: 800; font-size: calc(14 * var(--u));
  display: flex; align-items: center; justify-content: center;
}
.rt-highlight-text {
  flex: 1; font-size: calc(14 * var(--u)); color: var(--rt-ink);
  line-height: 1.65; letter-spacing: calc(.2 * var(--u));
}

/* — Day 块 — */
.rt-day { position: relative; padding: calc(24 * var(--u)) 0 0; }
.rt-day-head {
  padding: 0 calc(16 * var(--u)) calc(12 * var(--u));
  display: flex; align-items: center; gap: calc(10 * var(--u));
}
.rt-day-tag {
  background: linear-gradient(160deg, var(--rt-color), var(--rt-color-cc));
  color: #fff; font-family: var(--font-round); font-weight: 800;
  font-size: calc(14 * var(--u)); padding: calc(5 * var(--u)) calc(14 * var(--u)); border-radius: 999px;
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.5) inset,
              0 calc(4 * var(--u)) calc(10 * var(--u)) var(--rt-color-55);
  letter-spacing: calc(1 * var(--u));
}
.rt-day-title { font-size: calc(14 * var(--u)); color: var(--rt-ink); font-weight: 700; }
.rt-day-stops { padding: 0 calc(16 * var(--u)); position: relative; }

/* — Stop（站点）— */
.rt-stop { position: relative; }
.rt-stop + .rt-stop { margin-top: calc(22 * var(--u)); }
.rt-stop-body {
  display: flex; gap: calc(14 * var(--u)); align-items: flex-start;
  position: relative; z-index: 2;
}
.rt-stop.right .rt-stop-body { flex-direction: row-reverse; }

/* calc(60 * var(--u)) 序号水印，落在文字列右上空白 */
.rt-stop-pop {
  position: absolute; top: calc(-4 * var(--u));
  font-family: var(--font-round); font-weight: 800; font-size: calc(60 * var(--u));
  background: linear-gradient(160deg, var(--rt-color), var(--rt-color-66));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .5; z-index: 1; line-height: 1; pointer-events: none;
}
.rt-stop.left .rt-stop-pop { right: calc(-6 * var(--u)); }
.rt-stop.right .rt-stop-pop { right: calc(126 * var(--u)); left: auto; }

/* 112×112 圆角图标 */
.rt-stop-thumb {
  width: calc(112 * var(--u)); height: calc(112 * var(--u)); flex-shrink: 0;
  background: linear-gradient(160deg, var(--rt-color-soft), #fff);
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.6) inset,
              0 calc(12 * var(--u)) calc(22 * var(--u)) calc(-4 * var(--u)) var(--rt-color-30);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.rt-stop.left .rt-stop-thumb {
  border-radius: 42% 50% 38% 45% / 50% 42% 48% 40%;
  transform: rotate(-3deg);
}
.rt-stop.right .rt-stop-thumb {
  border-radius: 50% 38% 45% 42% / 45% 50% 40% 48%;
  transform: rotate(3deg);
}
.rt-stop-photo {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit;
}
.rt-stop-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rt-stop-badge {
  position: absolute; top: calc(-4 * var(--u));
  background: linear-gradient(180deg, var(--rt-color), var(--rt-color-dd));
  color: #fff; font-size: calc(14 * var(--u)); font-weight: 800;
  padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 999px;
  box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) var(--rt-color-55);
  font-family: var(--font-round);
}
.rt-stop.left .rt-stop-badge { right: calc(-4 * var(--u)); }
.rt-stop.right .rt-stop-badge { left: calc(-4 * var(--u)); }

/* 文字列 */
/* 左列：thumb 缩略图 + 其下方的 nav 按钮（垂直堆叠） */
.rt-stop-side {
  display: flex; flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
  flex-shrink: 0;
}
.rt-stop-info { flex: 1; padding-top: calc(6 * var(--u)); min-width: 0; }
.rt-stop-meta { font-size: calc(14 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.rt-stop-meta-row {
  display: flex; align-items: center; gap: calc(4 * var(--u));
}
.rt-stop-name {
  color: var(--rt-color); font-weight: 800;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(2 * var(--u));
}
.rt-stop-tag { color: var(--rt-ink-soft); margin-top: calc(2 * var(--u)); }
.rt-stop-heading {
  font-family: var(--font-round); font-weight: 800;
  font-size: calc(16 * var(--u)); color: var(--rt-ink); line-height: 1.2;
}
.rt-stop-desc {
  font-size: calc(14 * var(--u)); color: var(--rt-ink);
  margin-top: calc(6 * var(--u)); line-height: 1.75; letter-spacing: calc(.2 * var(--u));
}
.rt-stop-nav {
  /* 与 thumb 112u 同宽 + 垂直 gap 由 .rt-stop-side 提供 */
  width: calc(112 * var(--u));
  background: linear-gradient(180deg, #FDEB00 0%, #F5C518 100%);
  color: var(--rt-ink); border: none; border-radius: 999px;
  padding: calc(5 * var(--u)) calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 800;
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.6) inset,
              0 calc(3 * var(--u)) 0 #C29A00, 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(194,154,0,.4);
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(4 * var(--u)); cursor: pointer;
}
.rt-stop-tip {
  margin-top: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u));
  background: var(--rt-color-soft); border-radius: calc(14 * var(--u));
  font-size: calc(14 * var(--u)); color: var(--rt-ink);
  display: flex; align-items: flex-start; gap: calc(6 * var(--u));
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.7) inset;
}
.rt-stop.left .rt-stop-tip { margin-left: calc(14 * var(--u)); }
.rt-stop.right .rt-stop-tip { margin-right: calc(14 * var(--u)); }
.rt-stop-tip-text { flex: 1; line-height: 1.5; }

/* ════════════════════════════════════════════
   景点详情页（spot.html）
   ════════════════════════════════════════════ */
.spot-hero {
  position: relative;
  margin: calc(12 * var(--u)) calc(16 * var(--u)) 0;
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  background: var(--rt-color-soft);
  aspect-ratio: 16 / 10;
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(170,140,30,.18);
}
.spot-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.spot-hero-age {
  position: absolute;
  top: calc(10 * var(--u));
  left: calc(10 * var(--u));
  background: linear-gradient(160deg, var(--rt-color), var(--rt-color-cc));
  color: #fff;
  font-size: calc(13 * var(--u)); font-weight: 800;
  padding: calc(4 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) var(--rt-color-55);
}
.spot-info {
  padding: calc(20 * var(--u)) calc(20 * var(--u)) 0;
}
.spot-meta {
  display: flex; align-items: center; gap: calc(4 * var(--u));
  font-size: calc(15 * var(--u));
}
.spot-meta-name {
  color: var(--rt-color);
  font-weight: 800;
  letter-spacing: calc(1 * var(--u));
}
.spot-tag {
  margin-top: calc(4 * var(--u));
  font-size: calc(13 * var(--u));
  color: var(--rt-ink-soft);
}
.spot-heading {
  margin-top: calc(10 * var(--u));
  font-family: var(--font-round); font-weight: 800;
  font-size: calc(20 * var(--u));
  color: var(--rt-ink);
  line-height: 1.3;
}
.spot-desc {
  margin-top: calc(10 * var(--u));
  font-size: calc(14 * var(--u));
  color: var(--rt-ink);
  line-height: 1.75;
  letter-spacing: calc(.2 * var(--u));
}
.spot-info .rt-stop-tip {
  margin-left: 0; margin-right: 0;
}
.spot-nav {
  margin-top: calc(18 * var(--u));
  width: 100%;
  height: calc(48 * var(--u));
  background: linear-gradient(180deg, #FDEB00 0%, #F5C518 100%);
  color: var(--rt-ink);
  border: none;
  border-radius: 999px;
  font-family: var(--font-round); font-weight: 800;
  font-size: calc(16 * var(--u));
  letter-spacing: calc(1 * var(--u));
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(6 * var(--u));
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.6) inset,
              0 calc(3 * var(--u)) 0 #C29A00,
              0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(194,154,0,.4);
  cursor: pointer;
}

/* ════════════════════════════════════════════
   玩在龙岗 景点卡片（renderCard）
   主题色通过 --pc / --pc-soft / --pc-cc / --pc-50 inline 注入，
   渲染时 a.play-card style="--pc:..." 即可。
   ════════════════════════════════════════════ */
.play-card {
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}
.play-card-thumb {
  height: calc(96 * var(--u));
  position: relative;
  background: var(--pc-soft);
}
.play-card-img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
/* play-card-age 同时承担"图片左上角徽章"职责（取代原 play-card-route） */
.play-card-body {
  padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
}
.play-card-name {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: calc(13 * var(--u));
  color: #2D2A4A;
  line-height: 1.2;
  min-height: calc(32 * var(--u));
}
.play-card-desc {
  font-size: calc(11 * var(--u));
  color: #6C6890;
  line-height: 1.5;
  margin-top: calc(4 * var(--u));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.play-card-tags {
  display: flex;
  gap: calc(4 * var(--u));
  margin-top: calc(6 * var(--u));
  flex-wrap: wrap;
}
.play-card-tag {
  font-size: calc(9.5 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: 999px;
  font-weight: 700;
}
/* age 胶囊：浮在 thumb 左上角（原 play-card-route 位置） */
.play-card-age {
  position: absolute;
  top: calc(6 * var(--u));
  left: calc(6 * var(--u));
  z-index: 2;
  font-size: calc(11 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  font-weight: 800;
  background: linear-gradient(160deg, var(--pc), var(--pc-cc));
  color: #fff;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) var(--pc-50);
}
.play-card-tag {
  background: #F0EDE3;
  color: #6C6890;
}
.play-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: calc(8 * var(--u));
}
.play-card-nav {
  background: linear-gradient(180deg, #FFE066 0%, #FFC93C 100%);
  border: none;
  border-radius: 999px;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 700;
  color: #2D2A4A;
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.6) inset,
              0 calc(2 * var(--u)) 0 #E09A0E,
              0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(224,154,14,.35);
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  cursor: pointer;
}

/* — 首页年龄分组小卡片（home 5 大路线上方一行） — */
.age-group-row {
  padding: 0 calc(16 * var(--u)) calc(28 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(8 * var(--u));
}
.age-card {
  background: linear-gradient(160deg, var(--ac-soft), #fff 80%);
  border-radius: calc(16 * var(--u));
  padding: calc(10 * var(--u)) calc(4 * var(--u));
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.9) inset,
              0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(170,140,30,.12);
  display: flex; flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease;
}
.age-card:active { transform: scale(.96); }
.age-card-icon {
  width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border-radius: 50%;
  background: linear-gradient(160deg, var(--ac), var(--ac-dd));
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.5) inset,
              0 calc(3 * var(--u)) calc(8 * var(--u)) var(--ac-55);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.age-card-label {
  font-family: var(--font-round); font-weight: 800;
  font-size: calc(13 * var(--u));
  color: #2D2A4A;
  white-space: nowrap;
}

/* — 友好餐厅 / 友好酒店 板块（参考 detail-v2.html .rec-card 风格） — */
.rt-friendly {
  position: relative; padding: calc(22 * var(--u)) calc(16 * var(--u)) 0;
}
.rt-friendly-list {
  display: flex; flex-direction: column;
  gap: calc(10 * var(--u));
  position: relative; z-index: 2;
}
.rt-friendly-card {
  display: flex; gap: calc(12 * var(--u));
  padding: calc(10 * var(--u));
  align-items: stretch;
}
.rt-friendly-img {
  width: calc(96 * var(--u)); height: calc(96 * var(--u));
  flex-shrink: 0; border-radius: calc(18 * var(--u));
  background: var(--rt-color-soft);
  object-fit: cover; display: block;
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(170,140,30,.15);
}
.rt-friendly-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-friendly-name {
  font-family: var(--font-round); font-weight: 800;
  font-size: calc(15 * var(--u)); color: var(--rt-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rt-friendly-tag {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  background: var(--rt-color-soft); color: var(--rt-color);
  font-size: calc(12 * var(--u)); font-weight: 700;
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: 999px; margin-top: calc(4 * var(--u));
}
.rt-friendly-desc {
  font-size: calc(13 * var(--u)); color: var(--rt-ink-soft);
  line-height: 1.5; margin-top: calc(4 * var(--u));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rt-friendly-btns {
  display: flex; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u));
}
.rt-friendly-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: calc(4 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: 999px; border: none;
  font-family: var(--font-round); font-weight: 800;
  font-size: calc(12 * var(--u));
  cursor: pointer;
  background: linear-gradient(180deg, #FDEB00 0%, #F5C518 100%);
  color: var(--rt-ink);
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.6) inset,
              0 calc(2 * var(--u)) 0 #C29A00;
}
.rt-friendly-btn--phone {
  background: rgba(255,255,255,.95);
  color: var(--rt-color);
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.6) inset,
              0 calc(2 * var(--u)) 0 var(--rt-color-55);
}

/* — 组团 secrets — */
.rt-secrets {
  padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  background: linear-gradient(135deg, #2D2A4A 0%, #4A3F70 100%);
  color: #fff; position: relative; overflow: hidden;
}
.rt-secrets-deco {
  position: absolute; right: calc(-20 * var(--u)); top: calc(-20 * var(--u));
  width: calc(120 * var(--u)); height: calc(120 * var(--u));
  opacity: .12; pointer-events: none;
}
.rt-secrets-deco svg { width: 100%; height: 100%; }
.rt-secrets-body { position: relative; z-index: 2; }
.rt-secrets-head { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.rt-secrets-title {
  font-family: var(--font-round); font-weight: 800; font-size: calc(16 * var(--u));
  color: #fff; margin: 0;
}
.rt-secrets-badge {
  background: linear-gradient(180deg, #FDEB00, #F5C518);
  color: var(--rt-ink); font-size: calc(14 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 999px; font-weight: 800;
}
.rt-secrets-list {
  display: flex; flex-direction: column; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u));
}
.rt-secrets-item {
  display: flex; align-items: flex-start; gap: calc(8 * var(--u));
  font-size: calc(14 * var(--u)); color: rgba(255,255,255,.92);
  line-height: 1.7; letter-spacing: calc(.2 * var(--u));
}
.rt-secrets-bullet { color: #FDEB00; }
.rt-secrets-text { flex: 1; }
/* 组团二维码：参考原 detail-v2.html .d-group-qr 风格 */
.rt-secrets-qr-wrap {
  display: flex; flex-direction: column;
  align-items: center;
  margin-top: calc(16 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid rgba(255,255,255,.18);
}
.rt-secrets-qr-hint {
  font-size: calc(13 * var(--u));
  color: rgba(255,255,255,.85);
  margin-bottom: calc(8 * var(--u));
  letter-spacing: calc(1 * var(--u));
}
.rt-secrets-qr {
  width: calc(112 * var(--u));
  height: auto;
}

/* — CTA / Footer — */
.rt-footer { position: relative; padding: calc(26 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u)); }
.rt-cta-wrap { padding: 0 calc(50 * var(--u)); position: relative; z-index: 2; }
.rt-cta {
  width: 100%; height: calc(54 * var(--u));
  background: linear-gradient(180deg, #FDEB00 0%, #F5C518 100%);
  color: var(--rt-ink); border: none; border-radius: 999px;
  font-family: var(--font-round); font-weight: 800; font-size: calc(16 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  cursor: pointer;
}
.rt-disclaimer {
  text-align: center; font-size: calc(14 * var(--u)); color: var(--rt-ink-soft);
  margin-top: calc(12 * var(--u)); padding: 0 calc(16 * var(--u)); line-height: 1.6;
}
.rt-copyright {
  text-align: center; font-size: calc(14 * var(--u));
  color: var(--rt-ink-soft); margin-top: calc(16 * var(--u));
}


/* ════════════════════════════════════════════
   通用页面顶栏（home / intro 共用）
   ════════════════════════════════════════════ */
.page-header {
  padding: calc(4 * var(--u)) calc(20 * var(--u)) 0;
  position: relative;
  z-index: 2;
}
.page-header-row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.brand-logo {
  height: calc(24 * var(--u));
  width: auto;
  display: block;
  /* home 顶栏只有 brand-logo + actions，logo flex auto + actions 推到右 */
  margin-right: auto;
}
/* 子页面顶栏：返回 + 标题 + 计数副文 + actions */
.page-header-title {
  flex: 1;
  font-family: var(--font-round);
  font-size: calc(18 * var(--u));
  font-weight: 800;
  color: #2D2A4A;
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
  min-width: 0;
  overflow: hidden;
}
.page-header-sub {
  font-size: calc(12 * var(--u));
  color: #6C6890;
  font-weight: 400;
  white-space: nowrap;
}
.page-header-actions {
  display: flex;
  gap: calc(10 * var(--u));
}
.page-header-actions .v2-iconbtn { cursor: pointer; }

/* ════════════════════════════════════════════
   Intro 引导页组件
   ════════════════════════════════════════════ */
.phone.intro-root {
  background: linear-gradient(180deg, #FFF6A8 0%, #FDEB00 35%, #FFD23F 65%, #FFB94D 100%);
  /* 图片铺满整个 phone（含状态栏区），header 改为 absolute 浮于图片上 */
  padding-top: 0;
}
/* intro 顶栏脱离 flex 流，覆盖在图片之上 */
.intro-root .page-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  padding-top: calc(20 * var(--u) + env(safe-area-inset-top, 0px));
}
/* 飘落彩带：浮在背景图之上、header/CTA 之下；pointer-events:none 已在基类设置不挡点击 */
.intro-root .qlg-confetti { z-index: 3; }
/* 引导页背景大图：按容器宽 100% + 高度自适应，可在 phone-scroll 内下滑看完整 */
.intro-bg { display: block; width: 100%; }
.intro-bg-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.intro-decor {
  position: absolute; inset: 0;
  overflow: hidden; z-index: 1; pointer-events: none;
}
.intro-scroll {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
}

.intro-title-block {
  padding: calc(18 * var(--u)) calc(22 * var(--u)) 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.intro-badge {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  background: rgba(45,42,74,.92);
  color: #FDEB00;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: calc(14 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  letter-spacing: 1px;
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.18);
}
.intro-badge-dot {
  width: calc(5 * var(--u)); height: calc(5 * var(--u));
  border-radius: 50%; background: #FF6B6B;
}
.intro-title-main {
  height: calc(84 * var(--u)); width: auto;
  max-width: 100%; display: block;
  margin-top: calc(14 * var(--u));
  filter: drop-shadow(0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(155,110,0,.22));
}
.intro-title-sub {
  height: calc(30 * var(--u)); width: auto; display: block;
  margin-top: calc(8 * var(--u));
  filter: drop-shadow(0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(155,110,0,.18));
}

.intro-hero-block {
  padding: calc(8 * var(--u)) calc(16 * var(--u)) 0;
  position: relative;
}
.intro-mascot {
  position: absolute; right: calc(18 * var(--u)); top: calc(-22 * var(--u));
  z-index: 3;
  filter: drop-shadow(0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(120,80,0,.3));
}
.intro-mascot img {
  width: calc(90 * var(--u)); height: auto; display: block;
}
.intro-hero-img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 calc(12 * var(--u)) calc(20 * var(--u)) rgba(120,80,0,.18));
}

.intro-features {
  padding: calc(24 * var(--u)) calc(16 * var(--u)) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(10 * var(--u));
}
.intro-feature {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(calc(10 * var(--u)));
  border-radius: calc(18 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.9) inset,
              0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(170,140,30,.15);
  display: flex; align-items: center; gap: calc(8 * var(--u));
}
.intro-feature-icon {
  width: calc(36 * var(--u)); height: calc(36 * var(--u));
  flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(160deg, var(--fc-soft), var(--fc-55));
  box-shadow: 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.7) inset,
              0 calc(4 * var(--u)) calc(8 * var(--u)) var(--fc-45);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(18 * var(--u));
}
.intro-feature-text { min-width: 0; flex: 1; }
.intro-feature-title {
  font-family: var(--font-round); font-weight: 800;
  font-size: calc(14 * var(--u)); color: #2D2A4A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.intro-feature-desc {
  font-size: calc(14 * var(--u)); color: #6C6890;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.intro-spacer { flex: 1; }

.intro-cta-wrap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(14 * var(--u)) calc(22 * var(--u))
           calc(24 * var(--u) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(255,185,77,.95) 35%, #FFB94D 100%);
  z-index: 7;
}
.intro-cta {
  width: 100%; height: calc(56 * var(--u));
  background: linear-gradient(180deg, #FFE066 0%, #FFC93C 100%);
  color: #2D2A4A;
  border: none; border-radius: 999px;
  font-family: var(--font-round); font-weight: 800;
  font-size: calc(18 * var(--u));
  letter-spacing: calc(2 * var(--u));
  display: flex; align-items: center; justify-content: center;
  gap: calc(8 * var(--u));
  text-decoration: none;
}
.intro-copyright {
  text-align: center;
  margin-top: calc(10 * var(--u));
  font-size: calc(14 * var(--u));
  color: #5A4A2A; font-weight: 600;
}

/* ════════════════════════════════════════════
   Tab bar 缩高覆盖（覆盖前面 .v2 .tab-ico 默认 36u→30u）
   ════════════════════════════════════════════ */