@charset "utf-8";

/* ===== 字体 ===== */
@font-face { font-family: "mianhuatang"; src: url("../font/DFPYuanW9-GB.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "siyuanhei"; src: url("../font/SourceHanSansCN-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "siyuanhei"; src: url("../font/SourceHanSansCN-Medium.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: "siyuanhei"; src: url("../font/SourceHanSansCN-Bold.otf"); font-weight: 600; font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; color: inherit; cursor: pointer; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none;
  background: #bfe9fb url("../img/home/overflow_bg.webp") repeat; }
img { display: block; }
ul, li { list-style: none; }
body {
  font-family: "siyuanhei", sans-serif;
  cursor: url("../img/cursor.webp") 4 4, auto;
}

/* ================================================================
   Layer 0：全局根 — 决定整体缩放（2560 分层骨架，DESIGN=1920×1080）
   ================================================================ */
/* 参考 ttmxd：整体 contain 等比缩放，主内容始终完整显示，外侧由 body 底纹平铺填充。
   保持 top-left 锚点，居中偏移由 JS 算出的 --tx/--ty 提供（等价于居中，但锚点合规） */
#page-root {
  position: fixed; top: 0; left: 0;
  width: 2500px; height: 1080px;
  overflow: hidden;
  transform-origin: top left;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--page-scale, 1));
}

/* ===== 滚动单元：swiper + 衔接其下的页脚，整体上移露出 footer ===== */
#scroll-wrap {
  position: absolute; top: 0; left: 0;
  width: 2500px;
  transform: translateY(0);
  transition: transform 0.5s ease;
  will-change: transform;
}

/* ===== Swiper 容器（纵向翻屏，固定 1080，footer 紧接其下） ===== */
.swiper.outer-swiper { width: 2500px; height: 1080px; }
.swiper.outer-swiper > .swiper-wrapper > .swiper-slide {
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
}

/* ===== Layer 1：背景层 ===== */
.slide-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0; pointer-events: none;
}
.slide-bg video {
  position: absolute; left: 50%; top: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* ===== Layer 2：设计画布 1920×1080 ===== */
.slide-canvas {
  width: 1920px; height: 1080px;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(var(--pc-scale, 1));
  transform-origin: center center;
  z-index: 10;
}

/* ================================================================
   Layer 4：导航 Header（按 Figma：2500 画布坐标，深色导航条）
   ================================================================ */
.tab-bar {
  position: absolute; top: 0; left: 0; width: 100%;
  height: 83px; z-index: 1000;
  background: #262626 url("../img/header/tab_bg.webp") no-repeat center top / 2500px 83px;
}
.tab-bar-inner {
  position: relative; width: 2500px; height: 83px; margin: 0 auto; overflow: visible;
}
.tab-bar-inner > * { position: absolute; }
/* LOGO 159×100 @394,11 */
.nh-logo { left: 394px; top: 11px; width: 159px; height: 100px; }
.nh-logo img { width: 100%; height: 100%; object-fit: contain; }
/* 导航目录：首页 / 英雄介绍 / 玩法特色（文字 24px） */
.nh-nav-item {
  top: 22px; font-family: "mianhuatang", "siyuanhei", sans-serif;
  font-size: 24px; line-height: 42px; letter-spacing: 1.8px; color: #ffffff;
  white-space: nowrap; cursor: pointer; transition: color 0.2s ease;
}
.nh-nav-item:hover, .nh-nav-item.active { color: #a6f2ff; }
.nh-nav-item::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: 42px; width: 63px; height: 6px;
  background: url("../img/header/nav_underline.png") no-repeat center/contain;
  opacity: 0; transition: opacity 0.2s ease;
}
.nh-nav-item.active::after { opacity: 1; }
.nh-nav-home { left: 638px; }
.nh-nav-hero { left: 827px; }
.nh-nav-play { left: 1067px; }
/* 隔断 */
.nh-divider { top: 26px; height: 31px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.nh-divider.d1 { left: 748px; width: 15px; background-image: url("../img/header/divider.png"); }
.nh-divider.d2 { left: 990px; width: 13px; background-image: url("../img/header/divider2.png"); }
.nh-divider.d3 { left: 1998px; width: 15px; background-image: url("../img/header/divider3.png"); }
/* 渠道 ICON */
.nh-social { background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; transition: filter 0.2s ease, transform 0.2s ease; }
.nh-social:hover { filter: brightness(1.25); transform: translateX(var(--nav-shift, 0px)) translateY(-2px); }
.nh-xhs { left: 1579px; top: 31px; width: 62px; height: 23px; background-image: url("../img/header/social/xhs.png"); }
.nh-weixin { left: 1678px; top: 26px; width: 36px; height: 31px; background-image: url("../img/header/social/weixin.png"); }
.nh-bilibili { left: 1753px; top: 26px; width: 34px; height: 31px; background-image: url("../img/header/social/bilibili.png"); }
.nh-weibo { left: 1826px; top: 27px; width: 37px; height: 31px; background-image: url("../img/header/social/weibo.png"); }
.nh-douyin { left: 1903px; top: 24px; width: 31px; height: 36px; background-image: url("../img/header/social/douyin.png"); }
/* 扫码弹窗（hover 显示） */
.nh-qr { background: url("../img/header/qr_frame.png") no-repeat center/contain; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1001; }
.nh-qr img { position: absolute; left: 50%; transform: translateX(-50%); }
.nh-qr p { position: absolute; left: 50%; transform: translateX(-50%); top: 139px; font-family: "mianhuatang", "siyuanhei", sans-serif; color: #36a6f3; font-size: 16px; white-space: nowrap; text-align: center; }
.nh-qr-gzh { left: 1631px; top: 68px; width: 129px; height: 166px; }
.nh-qr-gzh img { top: 20px; width: 119px; height: 119px; }
.nh-qr-weibo { left: 1779px; top: 68px; width: 129px; height: 166px; }
.nh-qr-weibo img { top: 27px; width: 105px; height: 105px; }
.nh-weixin:hover ~ .nh-qr-gzh, .nh-weibo:hover ~ .nh-qr-weibo { opacity: 1; }
/* 音乐播放 */
#music_toggle { left: 2076px; top: 23px; width: 34px; height: 37px; cursor: pointer; transition: filter 0.2s ease, transform 0.2s ease; }
#music_toggle:hover { filter: brightness(1.25); transform: translateX(var(--nav-shift, 0px)) scale(1.1); }
#music_toggle img { position: absolute; left: 0; top: 0; height: 37px; width: auto; }
#music_toggle #music_bg_play { display: none; }
#music_toggle #music_bg_pause { display: block; }
#music_toggle.playing #music_bg_play { display: block; }
#music_toggle.playing #music_bg_pause { display: none; }
/* 右侧簇随立即预约按钮显隐整体平移：首屏(无按钮)靠右 shift=0；其他屏 shift=-220 给按钮腾位 */
.nh-xhs, .nh-weixin, .nh-bilibili, .nh-weibo, .nh-douyin,
.nh-divider.d3, #music_toggle, .nh-qr-gzh, .nh-qr-weibo {
  transform: translateX(var(--nav-shift, 0px));
  transition: transform 0.3s ease;
}
/* 立即下载按钮（首屏隐藏，其他屏 .show 显示）；常态/点击态两张切图叠放，按下切换 */
.nh-subscribe { left: 1953px; top: 19px; width: 181px; height: 49px; cursor: pointer; display: none; transition: transform 0.1s ease; }
.nh-subscribe.show { display: block; }
.nh-subscribe img { width: 100%; height: 100%; object-fit: contain; }
.nh-subscribe .btn-active { position: absolute; left: 0; top: 0; opacity: 0; }
.nh-subscribe:hover { transform: scale(1.06); filter: brightness(1.08); }
.nh-subscribe:active { transform: scale(0.9); filter: none; }
.nh-subscribe:active .btn-normal { opacity: 0; }
.nh-subscribe:active .btn-active { opacity: 1; }

/* ================================================================
   第1屏 首屏（按 Figma：2500×1080 画布）
   ================================================================ */
.s-home .slide-canvas { width: 2500px; }
.s-home .slide-bg { background-color: #0a1a2e; }
.hero-bg-img { position: absolute; left: 0; top: 0; width: 2500px; height: 1080px; z-index: 1; }
.hero-bg-img img, .hero-bg-img video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-slogan { position: absolute; left: 666px; top: 669px; width: 1169px; height: 245px; z-index: 5; }
.hero-slogan img { width: 100%; height: 100%; object-fit: contain; }
/* 下载按钮组：Android + App Store 两枚并排（切图 268×80，间距 61，与设计给的原始尺寸一致）。
   整组沿用原「立即下载」按钮的中心点（横向 1249 / 纵向 986.5），高度变化不影响首屏其余元素。 */
#subscribe { position: absolute; left: 951px; top: 947px; width: 597px; height: 80px; z-index: 6; display: flex; align-items: center; justify-content: space-between; }
#subscribe .dl-btn { display: block; width: 268px; height: 80px; cursor: pointer; transition: transform 0.1s ease, filter 0.1s ease; }
#subscribe .dl-btn img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 素材只有一个状态，悬停/按下用变换 + 提亮做反馈 */
#subscribe .dl-btn:hover { transform: scale(1.04); filter: brightness(1.15); }
#subscribe .dl-btn:active { transform: scale(0.92); filter: brightness(0.85); }
.hero-referral { position: absolute; left: 1795px; top: 532px; width: 374px; height: 474px; z-index: 6; }
.hero-referral .referral-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: scale-down; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); }
/* 星星层贴合底图卡片渲染框（英雄卡牌3 160×252，居中），四角对齐卡片角 */
.hero-referral .referral-stars { position: absolute; left: 50%; top: 50%; width: 160px; height: 252px; transform: translate(-50%, -50%); pointer-events: none; }
.hero-referral .referral-stars .star { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; animation: referral-twinkle 2.67s ease-in-out infinite; }
/* 四颗星拆到四个象限，各自独立错峰闪烁（仅透明度，无缩放） */
.hero-referral .referral-stars .star-1 { clip-path: inset(0 50% 50% 0);   animation-delay: 0s;    }
.hero-referral .referral-stars .star-2 { clip-path: inset(0 0 50% 50%);   animation-delay: 0.67s; }
.hero-referral .referral-stars .star-3 { clip-path: inset(50% 50% 0 0);   animation-delay: 1.33s; }
.hero-referral .referral-stars .star-4 { clip-path: inset(50% 0 0 50%);   animation-delay: 2s;    }
@keyframes referral-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1;    }
}

/* ================================================================
   第2屏 英雄介绍（Figma node 4-182，1:1 像素坐标）
   ================================================================ */
.s-roles .slide-canvas { width: 2500px; }
.hero-canvas > * { position: absolute; }
.hero-no1 { left: 593px; top: 168px; width: auto; height: 70px; z-index: 12; }
.hero-frame { left: 1196px; top: 192px; width: 757px; height: 730px; z-index: 8; }
.hero-frame img { width: 100%; height: 100%; object-fit: contain; }
.hero-char { left: 1360px; top: 281px; width: 407px; height: 522px; object-fit: contain; z-index: 9; transform: scale(2.7); transform-origin: center center; }
.hero-char[data-hero="char_zhousi"] { transform: scale(2.376); }
.hero-name {
  left: 581px; top: 215px; z-index: 11;
  font-family: "mianhuatang", "siyuanhei", sans-serif; font-size: 148px; line-height: 1;
  white-space: nowrap; color: transparent;
}
/* 外描边：::before 画蓝色粗描边(底层)，::after 画渐变填充(顶层)，本体透明。
   渐变盖在描边之上、只露文字外侧蓝边 —— 渐变与外描边都可见 */
.hero-name::before, .hero-name::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  font: inherit; line-height: inherit; white-space: nowrap;
}
.hero-name::before { color: #2e7bc6; -webkit-text-stroke: 12px #2e7bc6; }
.hero-name::after {
  background: linear-gradient(to bottom, #ffffff, #feffcc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 别名小字（如 冰女（莉莱））：紧跟大名右侧，底部与大名齐平，只有渐变填充无描边 */
.hero-alias {
  position: absolute; left: calc(100% - 4px); bottom: 1px;
  font-size: 40px; line-height: 1; white-space: nowrap;
  background: linear-gradient(to bottom, #ffffff, #feffcc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-faction { left: 903px; top: 267px; width: 72px; height: 72px; z-index: 11; }
/* 有别名时流派图标右移，让出别名占位 */
.hero-canvas.has-alias .hero-faction { left: 1025px; }
/* 技能块 */
.hero-skill { z-index: 11; }
.hero-skill.skill1 { left: 578px; top: 395px; }
.hero-skill.skill2 { left: 578px; top: 571px; }
.hero-skill > * { position: absolute; }
.hs-icon { left: 0; top: 6px; width: 73px; height: 73px; }
.hs-label { left: 94px; top: 5px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 8px;
  background-repeat: no-repeat; background-position: left center; background-size: 100% 100%; }
.hs-label1 { width: 124px; background-image: url("../img/hero/skill_label_bg1.png"); }
.hs-label2 { width: 124px; background-image: url("../img/hero/skill_label_bg1.png"); }
.hs-label span { font-family: "mianhuatang", "siyuanhei", sans-serif; font-size: 24px; color: #fff; white-space: nowrap; }
.hs-desc { left: 94px; top: 47px; width: 497px; font-size: 24px; line-height: 36px; color: #fff; font-family: "mianhuatang", "siyuanhei", sans-serif; }
.skill2 .hs-desc { width: 479px; }
/* 底部头像选择器（左对齐技能图标 x≈578；固定槽等距、底部水平对齐；选中态靠切图区分、无缩放动效） */
.hero-avatars { left: 563px; top: 750px; height: 110px; display: flex; justify-content: flex-start; align-items: flex-end; gap: 30px; z-index: 12; }
.hero-avatar { width: 92px; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.hero-avatar img { width: 92px; height: auto; display: block; transition: transform 0.2s ease, filter 0.2s ease; }
.hero-avatar:not(.active):hover img { transform: scale(1.08); filter: brightness(1.12); }
.hero-avatar.active img { width: 110px; }
/* 左右切换箭头 */
.hero-arrow { top: 482px; width: 49px; height: 81px; cursor: pointer; z-index: 13; transition: transform 0.2s ease; }
.hero-arrow img { width: 100%; height: 100%; object-fit: contain; }
.hero-arrow:hover { transform: scale(1.12); filter: brightness(1.1); }
.hero-arrow:active { transform: scale(0.88); }
.hero-arrow-left { left: 425px; }
.hero-arrow-right { left: 2025px; }

/* ================================================================
   第3屏 游戏截图轮播
   ================================================================ */
.s-game .slide-canvas { width: 2500px; transform: translate(-50%, calc(-50% - 18px)) scale(var(--pc-scale, 1)); }
#game_swiper {
  height: 707px; position: absolute; left: 50%; top: 199px;
  transform: translateX(-50%); width: calc(439px * 3); box-sizing: border-box;
}
#game_swiper .swiper-slide {
  width: 439px !important; display: flex; justify-content: center; align-items: center;
  transition: 300ms; transform: scale(0.92); opacity: 0;
}
#game_swiper .swiper-slide-prev { transform: translateY(8px) scale(0.85) rotate(-5deg); opacity: 1; }
#game_swiper .swiper-slide-next { transform: translateY(8px) scale(0.85) rotate(5deg); opacity: 1; }
#game_swiper .swiper-slide-active { transform: scale(1); opacity: 1; }
.game_kv {
  width: 405px; height: 707px; position: relative;
  border-radius: 30px; overflow: hidden;
}
.game_kv img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: contain; }
.swiper-slide-next .game_kv img,
.swiper-slide-prev .game_kv img { filter: brightness(0.7); }
/* 切换按钮（Figma node 5-2，canvas 绝对坐标 @518/1928,482） */
.game-arrow { position: absolute; top: 482px; width: 49px; height: 81px; cursor: pointer; z-index: 20; transition: transform 0.2s ease; }
.game-arrow img { width: 100%; height: 100%; object-fit: contain; }
.game-arrow:hover { transform: scale(1.12); filter: brightness(1.1); }
.game-arrow:active { transform: scale(0.88); }
.game-prev { left: 518px; }
.game-next { left: 1928px; }
/* 轮播点（普通 19×19 / 当前 35×34，@top921 居中） */
#game_dots.game-dots { position: absolute; left: 0; top: auto; bottom: 136px; width: 2500px; display: flex; justify-content: center; align-items: center; gap: 29px; z-index: 20; transform: translateY(18px); }
.game-dots .game-dot { width: 19px; height: 19px; background: url("../img/game/dot.png") no-repeat center/contain; cursor: pointer; }
.game-dots .game-dot-active { width: 35px; height: 34px; background-image: url("../img/game/dot_active.png"); }

/* ================================================================
   纵向翻屏过渡动画：直接用真实半调波点图 pot2.webp
   —— 每个波点的大小是图里天然烘焙好的（中心大、四周渐小、边缘极小），
      不做任何 CSS 生成/缩放。动画只是一个圆形蒙版从中心向外揭开：
      波点按半径一圈圈被露出（中心大点先出、四周小点后出），铺满后再收回露出下一屏。
   ================================================================ */
@property --pt-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.page-transition {
  position: absolute; inset: 0; z-index: 500;
  pointer-events: none; overflow: hidden;
}
.page-transition .pt-img {
  position: absolute; inset: 0;
  background: url("../img/home/pot2.webp?v=3") no-repeat center center / contain;
  --pt-r: 0%;
  opacity: 0; /* 基态彻底隐藏，静止时不残留任何像素 */
  transform: scale(1); transform-origin: center center;
  /* 圆形揭开蒙版：软边 6%，半径 --pt-r 从 0 扩到覆盖角落 */
  -webkit-mask-image: radial-gradient(circle at center, #000 var(--pt-r), transparent calc(var(--pt-r) + 6%));
  mask-image: radial-gradient(circle at center, #000 var(--pt-r), transparent calc(var(--pt-r) + 6%));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  will-change: --pt-r, opacity, transform;
}
/* ease-in 加速度：慢起、越来越快地胀大成单色 */
.page-transition.playing .pt-img { animation: ptZoom 0.56s cubic-bezier(0.21, 0, 1, 1) both; }
@keyframes ptZoom {
  0%   { --pt-r: 0%;   transform: scale(0.5);  opacity: 1; }   /* 前半段：缩小展示，中心一点 */
  60%  { --pt-r: 100%; transform: scale(0.72); opacity: 1; }   /* 揭开阶段延到 60%：半调波点以较小尺寸铺开展示 */
  75%  { --pt-r: 100%; transform: scale(1.5);  opacity: 1; }   /* 过渡帧：放大速度平滑爬升，消除 60% 处的速度突变 */
  90%  { --pt-r: 100%; transform: scale(4);    opacity: 1; }   /* 加速放大，实心中心胀满整屏 = 纯单色 */
  100% { --pt-r: 100%; transform: scale(4.6);  opacity: 0; }   /* 整屏单色淡出，露出下一屏（无中心残留） */
}

/* ================================================================
   页脚（独立面板：舞台底部、内容高度、第3屏向下滑出，不走波点过场）
   ================================================================ */
#site-footer {
  position: relative;
  width: 2500px;
  background: #000;
  z-index: 1;
}
.footer_cn { width: 800px; margin: 0 auto; text-align: center; color: #999999; font-size: 14.5px; line-height: 1.4; padding: 24px 14px; position: relative; z-index: 100; }
.footer_cn span, .footer_cn div { font-size: 14.5px; color: #999999; }
.footer_logo { display: block; text-align: center; margin: 0 auto; }
.footer_logo img { width: 286px; margin: 0 auto; }
.footer_text { padding: 9px 0; font-size: 14.5px; text-align: center; }
.footer_a { display: block; width: 100%; padding: 9px 0; font-size: 14.5px; text-align: center; color: #999999; transition: color 0.2s ease; }
.footer_police { padding: 9px 0; text-align: center; }
.footer_police a { display: inline-flex; align-items: center; justify-content: center; color: #999999; font-size: 14.5px; transition: color 0.2s ease; }
.footer_police img { width: 27px; margin-right: 10px; flex-shrink: 0; }
.footer_police span { font-size: 14.5px; color: #999999; }
.footer_link { display: flex; flex-wrap: wrap; justify-content: center; }
.footer_link a { padding: 9px 0; margin: 0 8px; font-size: 14.5px; color: #999999; transition: color 0.2s ease; }
.footer_link a:hover, .footer_a:hover, .footer_police a:hover { color: #fff; }
.footer_end { padding: 9px 0; display: flex; gap: 40px; justify-content: center; align-items: center; }
.footer_end img { display: inline-block; height: 62px; width: auto; }
.icon_rightage { width: 55px; height: 71px; background: url(../img/footer/rightage.webp) 0 0 / 100% auto no-repeat;
  cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.icon_rightage:hover { transform: scale(1.08); filter: brightness(1.15); }
.icon_rightage:active { transform: scale(0.95); }
.footer_end a { transition: filter 0.2s ease; }
.footer_end a:hover { filter: brightness(1.15); }

/* ================================================================
   社交浮窗（视口右侧锚定，固定不缩放）
   ================================================================ */
.consult { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 99; width: 76px; }
.consult_inner { background: #ffa800; border-radius: 12px 0 0 12px; padding: 14px 8px; display: flex; flex-direction: column; gap: 14px; box-shadow: -2px 0 12px rgba(0,0,0,0.2); }
.consult_item { width: 60px; height: 60px; position: relative; background-repeat: no-repeat; background-position: center; }
.consult_item .item_qrcode {
  display: none; width: 160px; padding: 14px; background: #fff; border-radius: 10px;
  position: absolute; top: 50%; right: calc(100% + 10px); transform: translateY(-50%);
  text-align: center; color: #d98900; font-size: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.consult_item .item_qrcode img { width: 100%; }
.consult_item .item_qrcode p { margin-top: 6px; white-space: nowrap; font-family: "mianhuatang", "siyuanhei", sans-serif; }
.consult_item:has(.item_qrcode):hover .item_qrcode { display: block; }
.consult_item.weibo { background-image: url("../img/consult/weibo.webp"); background-size: 40px 33px; }
.consult_item.weibo:hover { background-image: url("../img/consult/weibo_active.webp"); }
.consult_item.douyin { background-image: url("../img/consult/douyin.webp"); background-size: 36px 44px; }
.consult_item.douyin:hover { background-image: url("../img/consult/douyin_active.webp"); }
.consult_item.weixin { background-image: url("../img/consult/weixin.webp"); background-size: 43px 36px; }
.consult_item.weixin:hover { background-image: url("../img/consult/weixin_active.webp"); }
.consult_item.bilibili { background-image: url("../img/consult/B.webp"); background-size: 40px 36px; }
.consult_item.bilibili:hover { background-image: url("../img/consult/B_active.webp"); }
.consult_item.xhs { background-image: url("../img/consult/xhs.webp"); background-size: 40px 40px; }
.consult_item.xhs:hover { background-image: url("../img/consult/xhs_active.webp"); }
.consult_item.fuli { background-image: url("../img/consult/fuli.webp"); background-size: 40px 40px; }
.consult_item.fuli:hover { background-image: url("../img/consult/fuli_active.webp"); }

/* ================================================================
   预约弹窗
   ================================================================ */
/* ===== 预约弹窗（Figma node 30-209，底框 674×551，整体随页面等比缩放） ===== */
#subscribe_modal { display: none; position: fixed; inset: 0; z-index: 2000; }
#subscribe_modal.show { display: flex; align-items: center; justify-content: center; }
#subscribe_modal_overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
#subscribe_modal_wrapper {
  position: relative; flex: 0 0 auto;
  width: 674px; height: 551px;
  font-family: "mianhuatang", sans-serif;
}
.sub-panel { position: absolute; inset: 0; }
.sub-bg { position: absolute; inset: 0; width: 674px; height: 551px; pointer-events: none; }
.sub-title { position: absolute; left: 0; right: 0; top: 22px; text-align: center; color: #dad8dc; font-size: 36px; line-height: 1;
  text-shadow: 2px 0 0 #141318, -2px 0 0 #141318, 0 2px 0 #141318, 0 -2px 0 #141318, 1.5px 1.5px 0 #141318, -1.5px 1.5px 0 #141318, 1.5px -1.5px 0 #141318, -1.5px -1.5px 0 #141318; }

/* 平台单选（Android / iOS） */
.sub-plat { position: absolute; top: 92px; display: flex; align-items: center; gap: 9px; height: 26px; cursor: pointer; user-select: none; }
.sub-plat-android { left: 185px; }
.sub-plat-ios { left: 415px; }
.sub-plat-label { color: #dad8dc; font-size: 20px; line-height: 1; white-space: nowrap;
  text-shadow: 2px 0 0 #141318, -2px 0 0 #141318, 0 2px 0 #141318, 0 -2px 0 #141318, 1.5px 1.5px 0 #141318, -1.5px 1.5px 0 #141318, 1.5px -1.5px 0 #141318, -1.5px -1.5px 0 #141318; }
.sub-radio { width: 22px; height: 22px; display: inline-block; flex: 0 0 auto;
  background: url("../img/subscribe/radio_off.svg") center/contain no-repeat; }
.sub-plat.selected .sub-radio { background-image: url("../img/subscribe/radio_on.webp"); }

/* 输入框（横条框为背景图，input 透明覆盖） */
.sub-input { position: absolute; height: 64px; }
.sub-input-phone { left: 33px; top: 150px; width: 603px; background: url("../img/subscribe/input_phone.webp") center/100% 100% no-repeat; }
.sub-input-code { left: 33px; top: 245px; width: 380px; background: url("../img/subscribe/input_code.webp") center/100% 100% no-repeat; }
.sub-input input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent;
  padding: 0 34px; font-family: inherit; font-size: 24px; color: #fffce7;
  text-shadow: 2px 0 0 #20202e, -2px 0 0 #20202e, 0 2px 0 #20202e, 0 -2px 0 #20202e, 1.5px 1.5px 0 #20202e, -1.5px 1.5px 0 #20202e, 1.5px -1.5px 0 #20202e, -1.5px -1.5px 0 #20202e; }
.sub-input input::placeholder { color: #fffce7; opacity: 1;
  text-shadow: 2px 0 0 #20202e, -2px 0 0 #20202e, 0 2px 0 #20202e, 0 -2px 0 #20202e, 1.5px 1.5px 0 #20202e, -1.5px 1.5px 0 #20202e, 1.5px -1.5px 0 #20202e, -1.5px -1.5px 0 #20202e; }
/* 聚焦/输入时提示文案消失 */
.sub-input input:focus::placeholder { color: transparent; text-shadow: none; }
/* 浏览器自动填充：Chrome 会强制白底+默认字体，覆盖回透明背景与站点字体 */
.sub-input input:-webkit-autofill,
.sub-input input:-webkit-autofill:hover,
.sub-input input:-webkit-autofill:focus,
.sub-input input:-webkit-autofill:active {
  -webkit-text-fill-color: #fffce7; caret-color: #fffce7;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 99999s ease-in-out 0s;
  font-family: inherit; font-size: 24px;
  text-shadow: 2px 0 0 #20202e, -2px 0 0 #20202e, 0 2px 0 #20202e, 0 -2px 0 #20202e, 1.5px 1.5px 0 #20202e, -1.5px 1.5px 0 #20202e, 1.5px -1.5px 0 #20202e, -1.5px -1.5px 0 #20202e; }

/* 获取验证码按钮 */
.sub-codebtn { position: absolute; left: 425px; top: 245px; width: 211px; height: 64px; cursor: pointer;
  background: url("../img/subscribe/btn_code.webp") center/100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; line-height: 1; transition: filter .15s ease, transform .1s ease;
  text-shadow: 2px 0 0 #865229, -2px 0 0 #865229, 0 2px 0 #865229, 0 -2px 0 #865229, 1.5px 1.5px 0 #865229, -1.5px 1.5px 0 #865229, 1.5px -1.5px 0 #865229, -1.5px -1.5px 0 #865229; }
.sub-codebtn:hover { filter: brightness(1.08); }
.sub-codebtn:active { transform: scale(0.96); }
.sub-codebtn.counting { cursor: default; filter: grayscale(0.1) brightness(0.95); }

/* 协议勾选 */
.sub-protocol { position: absolute; left: 37px; top: 340px; display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.sub-protocol .sub-radio { width: 20px; height: 20px; }
.sub-protocol.checked .sub-radio { width: 20px; height: 20px; background-image: url("../img/subscribe/radio_on.webp"); }
.sub-protocol-text { color: #fffce7; font-size: 22px; line-height: 1;
  text-shadow: 2px 0 0 #20202e, -2px 0 0 #20202e, 0 2px 0 #20202e, 0 -2px 0 #20202e, 1.5px 1.5px 0 #20202e, -1.5px 1.5px 0 #20202e, 1.5px -1.5px 0 #20202e, -1.5px -1.5px 0 #20202e; }
.sub-protocol-text a { color: #9e98cd; text-decoration: underline; }

/* 注册并预约按钮 */
.sub-submit { position: absolute; left: 232px; top: 403px; width: 211px; height: 64px; cursor: pointer;
  background: url("../img/subscribe/btn_submit.webp") center/100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; line-height: 1; transition: filter .15s ease, transform .1s ease;
  text-shadow: 2px 0 0 #865229, -2px 0 0 #865229, 0 2px 0 #865229, 0 -2px 0 #865229, 1.5px 1.5px 0 #865229, -1.5px 1.5px 0 #865229, 1.5px -1.5px 0 #865229, -1.5px -1.5px 0 #865229; }
.sub-submit:hover { filter: brightness(1.08); }
.sub-submit:active { transform: scale(0.96); }

/* 关闭按钮（底框下方居中悬出） */
.sub-close { position: absolute; left: 292px; top: 502px; width: 90px; height: 95px; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.sub-close:hover { transform: scale(1.08); filter: brightness(1.08); }
.sub-close:active { transform: scale(0.94); }

/* 预约成功态（复用底框，坐标以 674×551 底板为基准） */
.sub-success { display: none; position: absolute; inset: 0; }
.suc-title { position: absolute; left: 0; right: 0; top: 20px; text-align: center; color: #dad8dc; font-size: 36px; line-height: 1;
  text-shadow: 2px 0 0 #141318, -2px 0 0 #141318, 0 2px 0 #141318, 0 -2px 0 #141318, 1.5px 1.5px 0 #141318, -1.5px 1.5px 0 #141318, 1.5px -1.5px 0 #141318, -1.5px -1.5px 0 #141318; }
.suc-sub { position: absolute; left: 0; right: 0; top: 119px; text-align: center; color: #dad8dc; font-size: 24px; line-height: 1;
  text-shadow: 2px 0 0 #20202e, -2px 0 0 #20202e, 0 2px 0 #20202e, 0 -2px 0 #20202e, 1.5px 1.5px 0 #20202e, -1.5px 1.5px 0 #20202e, 1.5px -1.5px 0 #20202e, -1.5px -1.5px 0 #20202e; }

.suc-icon { position: absolute; }
.suc-icon-weibo { left: 127px; top: 197px; width: 89px; height: 74px; }
.suc-icon-wechat { left: 295px; top: 198px; width: 88px; height: 71px; }
.suc-icon-xhs { left: 468px; top: 196px; width: 78px; height: 77px; }
.suc-icon-xhs img { display: block; width: 100%; height: 100%; }

.suc-qr { position: absolute; top: 283px; width: 129px; height: 166px; }
.suc-qr-weibo { left: 105px; }
.suc-qr-official { left: 274px; }
.suc-qr-frame { position: absolute; inset: 0; width: 129px; height: 166px; pointer-events: none; }
.suc-qr-code { position: absolute; left: 12px; top: 27px; width: 105px; height: 105px; }
.suc-qr-official .suc-qr-code { left: 7px; top: 24px; width: 115px; height: 115px; }
.suc-qr-label { position: absolute; left: 0; right: 0; top: 139px; text-align: center; font-family: "mianhuatang", "siyuanhei", sans-serif; color: #7983b1; font-size: 16px; line-height: 1; letter-spacing: -0.8px; white-space: nowrap; }

#subscribe_modal.success .sub-title,
#subscribe_modal.success .sub-plat,
#subscribe_modal.success .sub-input,
#subscribe_modal.success .sub-codebtn,
#subscribe_modal.success .sub-protocol,
#subscribe_modal.success .sub-submit { display: none; }
#subscribe_modal.success .sub-success { display: block; }

/* ================================================================
   适龄提示弹窗（点页脚 16+ 标识打开，正文按 pre-line 保留原文换行）
   ================================================================ */
#age_tip_modal { display: none; position: fixed; inset: 0; z-index: 2100; }
#age_tip_modal.show { display: flex; align-items: center; justify-content: center; }
#age_tip_overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.age-tip-panel { position: relative; flex: 0 0 auto; width: 820px; max-height: 80vh; padding: 32px 36px 34px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #2b3050 0%, #1a1d2e 100%);
  border: 3px solid #6f7ba8; border-radius: 20px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55); }
.age-tip-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.age-tip-title { font-family: "mianhuatang", "siyuanhei", sans-serif; font-size: 36px; line-height: 1; color: #dad8dc;
  text-shadow: 2px 0 0 #141318, -2px 0 0 #141318, 0 2px 0 #141318, 0 -2px 0 #141318, 1.5px 1.5px 0 #141318, -1.5px 1.5px 0 #141318, 1.5px -1.5px 0 #141318, -1.5px -1.5px 0 #141318; }
.age-tip-body { flex: 1 1 auto; overflow-y: auto; padding-right: 14px; }
.age-tip-body p { color: #d5d7e4; font-size: 17px; line-height: 1.85; white-space: pre-line; text-align: justify; margin-bottom: 16px; }
.age-tip-body p:last-child { margin-bottom: 0; }
.age-tip-body::-webkit-scrollbar { width: 8px; }
.age-tip-body::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 4px; }
.age-tip-body::-webkit-scrollbar-thumb { background: #6f7ba8; border-radius: 4px; }
/* 关闭按钮放面板右上角外沿：避开正文，也不会压到页面首屏元素 */
.age-tip-close { position: absolute; right: -26px; top: -26px; width: 64px; height: 68px;
  cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.age-tip-close:hover { transform: scale(1.08); filter: brightness(1.08); }
.age-tip-close:active { transform: scale(0.94); }