* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: #1a1a1a;
  font-family: "Sarasa Gothic SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.stage {
  position: relative;
  width: 1920px; height: 1080px;
  margin: 0 auto; overflow: hidden; background: #000;
}
.page { position: absolute; inset: 0; width: 1920px; height: 1080px; }

/* 每个图层：绝对定位，尺寸由内联 style 控制 */
.layer {
  position: absolute;
  display: block;
}
.layer img { width: 100%; height: 100%; display: block; object-fit: fill; }

/* 文字层 */
.txt { line-height: normal; white-space: normal; }

/* 导航/跳转链接始终置于最上层，避免被白条或其他图层遮挡导致点不动 */
.navcap, .link { z-index: 60; }
.vlabel { line-height: 39px; letter-spacing: 0; text-align: center; }
.vlabel br { display: block; }

/* ===== 滚动数字选择器（0-50） ===== */
.picker {
  overflow-y: scroll; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; z-index: 40;
  scrollbar-width: none; box-sizing: border-box;
  -webkit-user-select: none; user-select: none;
}
.picker::-webkit-scrollbar { display: none; }
#pick-left  .picker-item { height: 78px; line-height: 78px; }
#pick-right .picker-item { height: 65px; line-height: 65px; }
.picker-item {
  text-align: center; font-size: 24px; color: #9aa7b4;
  scroll-snap-align: center; cursor: pointer;
  transition: font-size .15s, color .15s;
}
.picker-item.on { font-size: 36px; font-weight: 700; color: #1565C0; }
#pick-left  .picker-strip { padding: 78px 0; }
#pick-right .picker-strip { padding: 65px 0; }

/* 链接文字层（覆盖在按钮底图上，透明背景可点） */
.link {
  text-decoration: none;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pill {
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  z-index: 50;
  color: #817C7C;
}
.pill.active,
.pill:hover { color: #1565C0; }

/* 导航胶囊文字 */
.navcap {
  text-decoration: none;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* 成分气泡（径向渐变，自由飘荡） */
.bubwrap { position: absolute; inset: 0; z-index: 5; }
.bubble {
  position: absolute; left: 0; top: 0;
  width: 220px; height: 220px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 14px; box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  cursor: pointer; user-select: none; font-weight: 700;
  will-change: transform;
}
.bubble span { line-height: 1.3; font-size: 26px; }
.b-yellow  { background: radial-gradient(circle, rgba(255,255,204,.9) 0%, rgba(255,230,51,.6) 90%, rgba(255,204,0,0) 100%); color: #4a7c59; font-size: 24px; }
.b-green   { background: radial-gradient(circle, rgba(230,255,230,.9) 0%, rgba(51,255,102,.6) 90%, rgba(0,230,51,0) 100%); color: #2e7d32; font-size: 28px; }
.b-blue    { background: radial-gradient(circle, rgba(217,242,255,.9) 0%, rgba(51,179,255,.6) 90%, rgba(0,128,255,0) 100%); color: #1565C0; font-size: 28px; }
.b-red     { background: radial-gradient(circle, rgba(255,230,230,.9) 0%, rgba(255,51,51,.6) 90%, rgba(255,26,26,0) 100%); color: #b71c1c; font-size: 28px; }
.b-purple  { background: radial-gradient(circle, rgba(242,230,255,.9) 0%, rgba(153,51,255,.6) 90%, rgba(128,26,255,0) 100%); color: #6a1b9a; font-size: 28px; }
.b-cyan    { background: radial-gradient(circle, rgba(230,255,255,.9) 0%, rgba(26,204,204,.6) 90%, rgba(0,179,179,0) 100%); color: #00695c; font-size: 28px; }
.b-pink    { background: radial-gradient(circle, rgba(255,230,242,.9) 0%, rgba(255,77,153,.6) 90%, rgba(255,51,128,0) 100%); color: #c2185b; font-size: 28px; }
.b-lgreen  { background: radial-gradient(circle, rgba(242,255,230,.9) 0%, rgba(128,230,51,.6) 90%, rgba(102,204,26,0) 100%); color: #558b2f; font-size: 28px; }
.b-brown   { background: radial-gradient(circle, rgba(255,242,230,.9) 0%, rgba(179,102,51,.6) 90%, rgba(153,77,26,0) 100%); color: #5d4037; font-size: 28px; }
.b-orange  { background: radial-gradient(circle, rgba(255,237,204,.9) 0%, rgba(255,153,51,.6) 90%, rgba(255,128,0,0) 100%); color: #b5480a; }
.b-teal    { background: radial-gradient(circle, rgba(230,255,250,.9) 0%, rgba(38,208,180,.6) 90%, rgba(0,179,153,0) 100%); color: #00695c; }
.b-indigo  { background: radial-gradient(circle, rgba(232,234,255,.9) 0%, rgba(92,107,255,.6) 90%, rgba(63,81,255,0) 100%); color: #283593; }
.b-magenta { background: radial-gradient(circle, rgba(255,224,245,.9) 0%, rgba(233,30,182,.6) 90%, rgba(216,27,96,0) 100%); color: #ad1457; }
.b-lime    { background: radial-gradient(circle, rgba(244,255,214,.9) 0%, rgba(180,230,40,.6) 90%, rgba(150,204,26,0) 100%); color: #558b2f; }
.b-rose    { background: radial-gradient(circle, rgba(255,228,232,.9) 0%, rgba(255,99,132,.6) 90%, rgba(244,67,54,0) 100%); color: #c62828; }

/* 分页点 */
.dot { border-radius: 50%; background: rgba(179,179,179,.5); }
.dot.on { background: #2e8cff; }

/* ===== 单页 4 面板切换 ===== */
#content { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.panel { position: absolute; inset: 0; width: 1920px; height: 1080px; display: none; }
.panel.active { display: block; }
/* 切换导航时：面板从右侧滑入（戒烟有益除外，由内部5张卡片逐张从右到左滑入） */
.panel.active:not(#panel-benefit) {
  animation: panelSlideIn .35s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes panelSlideIn {
  from { transform: translateX(1920px); opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}

/* ===== 底部 4 导航：图标+文字成组，选中整组缩放+文字变色 ===== */
.bot-nav {
  position: absolute;
  display: block;
  cursor: pointer;
  text-decoration: none;
  pointer-events: auto;
  transform-origin: 50% 100%;
  transition: transform .2s;
  z-index: 30;
}
.bot-nav .nav-icon { position: absolute; display: block; }
.bot-nav .nav-text {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  font-family: "Sarasa Gothic SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #818181;
  transition: color .2s;
}
.bot-nav.active { transform: scale(1.12); }
.bot-nav.active .nav-text { color: #1565C0; font-weight: 700; }

/* ===== 戒烟有益：卡片轮播 + 详情卡 ===== */
.bwrap { position: absolute; left: 0; top: 0; width: 1920px; height: 820px; pointer-events: none; }
.btrack { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

.bcard {
  position: absolute; left: 960px; top: 560px;
  width: 300px; height: 450px;
  border-radius: 32px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  pointer-events: auto; cursor: pointer; user-select: none;
  transform: translate(-50%,-50%);
  transition: transform .35s ease, opacity .35s;
}
.bcard-blue { background: #2E8CFF; }
.bcard-gray { background: #D9D9D9; }

/* 雷达圆：白色同心圆 */
.radar {
  border-radius: 50%; background: #fff; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; margin-top: 60px;
}
.r1 { width: 180px; height: 180px; }
.r2 { width: 150px; height: 150px; }
.r3 { width: 165px; height: 165px; }
.radar span {
  width: 60%; height: 60%; background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 60px; font-weight: 700; color: #333;
}
.b-unit { font-size: 28px; color: #fff; margin-top: 40px; }
.b-tip  { font-size: 20px; color: #fff; margin-top: 12px; }

/* 白色详情卡（与吸烟评估白卡同尺寸 1057×568） */
.bdetail[hidden] { display: none; }
.bdetail {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
}
.bdetail-card {
  position: relative; width: 1057px; height: 568px;
  background: #fff; border-radius: 40px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  padding: 64px 72px; box-sizing: border-box; overflow: hidden;
}
.bdetail-close {
  position: absolute; right: 30px; top: 22px;
  width: 60px; height: 60px; font-size: 48px; color: #999;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bdetail-time { font-size: 46px; font-weight: 700; color: #1565C0; text-align: center; }
.bdetail-body {
  margin-top: 30px; font-size: 28px; line-height: 1.8; color: #333;
  max-height: 370px; overflow-y: auto; padding-right: 12px;
}
.bdetail-body::-webkit-scrollbar { width: 6px; }
.bdetail-body::-webkit-scrollbar-thumb { background: #cbd9e8; border-radius: 3px; }

/* 危害页 - 用 点位图标.png 作为点位标记（点击变红）+ 附近白色详情卡（358×485） */
/* 点位层提到卡片之上(z80)，保证已展开卡片覆盖区域下的其他点位仍可点击切换；
   本层透明且 pointer-events:none，不挡视觉也不挡卡片内关闭/滚动交互 */
#dotBox { position: absolute; inset: 0; z-index: 80; pointer-events: none; }
.ddot {
  position: absolute; display: block;
  width: 40px; height: 40px;
  transform: translate(-50%,-50%);
  cursor: pointer; pointer-events: auto; user-select: none;
  transition: transform .18s, filter .18s;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.ddot:hover { transform: translate(-50%,-50%) scale(1.15); }
.ddot.active {
  transform: translate(-50%,-50%) scale(1.2);
  filter: drop-shadow(0 0 6px #E53935) drop-shadow(0 0 12px #E53935);
}

.ddetail {
  position: absolute; z-index: 60; width: 358px; height: 485px;
  background: #fff; border-radius: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
  padding: 34px 32px; box-sizing: border-box; overflow: hidden;
  transform: scale(0); transform-origin: left center;
  opacity: 0; pointer-events: none;
}
/* 视觉动画由 Web Animations API 驱动，去掉 CSS transition 避免冲突；.show 仅控制可交互 */
.ddetail.show { pointer-events: auto; }

/* 从点位展开到卡片的直线：长 238，描边宽度 4，白色 */
.dline { position: absolute; height: 4px; width: 0; z-index: 55; background: #ffffff; pointer-events: none; border-radius: 2px; box-shadow: 0 0 5px rgba(0,0,0,.45); }
.ddetail-close {
  position: absolute; right: 14px; top: 8px;
  width: 44px; height: 44px; font-size: 38px; color: #999;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ddetail-time { font-size: 30px; font-weight: 700; color: #1565C0; text-align: center; }
.ddetail-body {
  margin-top: 18px; font-size: 19px; line-height: 1.7; color: #333;
  max-height: 382px; overflow-y: auto; padding-right: 8px;
}
.ddetail-body::-webkit-scrollbar { width: 5px; }
.ddetail-body::-webkit-scrollbar-thumb { background: #cbd9e8; border-radius: 3px; }

/* 吸烟评估 - 卡片容器 */
.a-card-input { position: absolute; left: 488px; top: 187px; width: 1057px; height: 568px; }
.a-card-bg {
  position: absolute; inset: 0;
  background: #fff; border-radius: 40px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.a-input-inner,
.a-result-inner { position: absolute; inset: 0; }
/* 默认显示输入态，隐藏结果态 */
.a-result-inner { display: none; }
.a-card-input.is-result .a-input-inner  { display: none; }
.a-card-input.is-result .a-result-inner { display: block; }

.a-el { position: absolute; }
.a-title { font-size: 48px; font-weight: 700; color: #1565C0; text-align: center; line-height: 48px; }
.a-label { font-size: 32px; color: #333; text-align: center; line-height: 40px; }
.a-digit-box { background: #F2FAFF; border: 2px solid #CCE6FF; border-radius: 10px; overflow: hidden; cursor: ns-resize; touch-action: none; }
.a-digit-box::before,
.a-digit-box::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; pointer-events: none; z-index: 2;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
}
.a-digit-box::before { top: 5px; border-bottom: 8px solid #9CC4EE; }
.a-digit-box::after  { bottom: 5px; border-top: 8px solid #9CC4EE; }
.a-wheel { will-change: transform; }
.a-wheel span { display: flex; align-items: center; justify-content: center; height: 140px; font-size: 80px; font-weight: 700; color: #1565C0; }
.a-mul { font-size: 72px; color: #999; display: flex; align-items: center; justify-content: center; }
.a-test-btn { background: #1A80F2; border-radius: 35px; cursor: pointer; transition: background .2s; }
.a-test-btn:hover { background: #1565C0; }
.a-test-txt { font-size: 34px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }

/* 结果态：左侧仪表盘 + 右侧文字 */
.a-gauge { position: absolute; left: 75px; top: 120px; width: 300px; height: 300px; }
.a-gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.a-gauge-track { fill: none; stroke: #EAF2FB; stroke-width: 18; }
.a-gauge-fill {
  fill: none; stroke: #E74C3C; stroke-width: 18; stroke-linecap: round;
  stroke-dasharray: 527.8; stroke-dashoffset: 527.8;
  transition: stroke-dashoffset 1s ease, stroke .4s;
}
.a-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.a-gauge-val { font-size: 72px; font-weight: 700; color: #E74C3C; line-height: 1; }
.a-gauge-unit { font-size: 22px; color: #888; margin-top: 4px; }
.a-gauge-level { font-size: 28px; font-weight: 700; margin-top: 10px; color: #E74C3C; }

.a-result-text { position: absolute; left: 400px; top: 64px; width: 605px; height: 348px; overflow-y: auto; padding-right: 12px; }
.a-result-head { font-size: 40px; font-weight: 700; margin-bottom: 18px; color: #E74C3C; }
.a-result-risks { font-size: 23px; line-height: 1.7; color: #444; }
.a-result-risks .rk { font-weight: 700; color: #222; margin-right: 6px; }
.a-result-advice { margin-top: 16px; font-size: 23px; line-height: 1.7; color: #1A80F2; }
.a-result-advice .at { font-weight: 700; }
.a-result-text::-webkit-scrollbar { width: 6px; }
.a-result-text::-webkit-scrollbar-thumb { background: #cbd9e8; border-radius: 3px; }

/* 去除可点击元素的默认焦点蓝色边框(focus outline)与点击高亮 */
*:focus { outline: none !important; }
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: none !important; }
button::-moz-focus-inner { border: 0 !important; }
* { -webkit-tap-highlight-color: transparent; }

/* ===== 8 个内容板块按钮：左右各 4 个，橙色胶囊 + 图标文字（与『科普动画』一致） ===== */
.info-btn {
  position: absolute; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg,#ff8f3d,#ff5e62);
  color: #fff; font-size: 19px; font-weight: 700; letter-spacing: 1px;
  border-radius: 28px; padding: 0 14px; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(255,94,98,.45);
  cursor: pointer; user-select: none;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.info-btn .b-ico { font-size: 24px; line-height: 1; }
.info-btn:hover { transform: scale(1.05); filter: brightness(1.08); }
.info-btn:active { transform: scale(.98); }

/* 切换底部导航时，左右按钮从两侧滑入（左→从左侧进，右→从右侧进） */
@keyframes slideInLeft  { from { opacity: 0; transform: translateX(-150px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(150px);  } to { opacity: 1; transform: translateX(0); } }
.enter-left  { animation: slideInLeft .5s cubic-bezier(.2,.8,.25,1.05) both; }
.enter-right { animation: slideInRight .5s cubic-bezier(.2,.8,.25,1.05) both; }

/* ===== 居中弹窗 ===== */
.info-modal {
  position: absolute; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
}
.info-modal[hidden] { display: none; }
.info-mask { position: absolute; inset: 0; background: rgba(0,0,0,.45); cursor: pointer; }
.info-dialog {
  position: relative; width: 1440px; height: 820px;
  background: #fff; border-radius: 40px;
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
  padding: 60px 64px; box-sizing: border-box; overflow: hidden;
  transform-origin: center center;
}

/* ===== 弹窗出现/收起动画（酷炫） ===== */
@keyframes maskIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes maskOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes dialogIn {
  0%   { opacity: 0; transform: scale(.5) translateY(40px) rotateX(16deg);   filter: blur(6px); }
  55%  { opacity: 1; transform: scale(1.05) translateY(0) rotateX(-4deg);    filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotateX(0);          filter: blur(0); }
}
@keyframes dialogGlow {
  0%   { box-shadow: 0 0 0 rgba(33,150,243,0); }
  50%  { box-shadow: 0 0 70px rgba(33,150,243,.75), 0 0 150px rgba(33,150,243,.4); }
  100% { box-shadow: 0 16px 60px rgba(0,0,0,.35); }
}
@keyframes dialogOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.92) translateY(24px); }
}
@keyframes titleIn {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardExpand {
  0%   { opacity: 0; transform: scale(.04); }
  55%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.info-modal.show .info-mask   { animation: maskIn .3s ease both; }
.info-modal.show .info-dialog {
  animation: cardExpand .5s cubic-bezier(.22,.9,.27,1.12) both,
             dialogGlow .7s ease-out .1s both;
}
.info-modal.show .info-title  { animation: titleIn .5s ease .18s both; }
.info-modal.closing .info-mask   { animation: maskOut .22s ease both; }
.info-modal.closing .info-dialog { animation: dialogOut .24s ease-in both; }

/* ===== 左侧『科普动画』胶囊（区别于普通文本胶囊） ===== */
.info-btn-video {
  background: linear-gradient(135deg,#ff8f3d,#ff5e62) !important;
  color: #fff !important; font-weight: 700; letter-spacing: 1px;
  box-shadow: 0 8px 22px rgba(255,94,98,.45);
}
.info-btn-video:hover { filter: brightness(1.08); }

/* ===== 科普动画视频弹窗 ===== */
.video-dialog {
  position: relative; width: 1000px; max-width: 92vw;
  background: #0c0f16; border-radius: 28px; overflow: hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,.5);
  padding: 0; transform-origin: center center;
}
.video-player { display: block; width: 100%; height: auto; background: #000; max-height: 72vh; }
.video-title { color: #fff; font-size: 30px; padding: 22px 28px 14px; }
.video-close {
  position: absolute; top: 16px; right: 18px; z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff;
  font-size: 40px; line-height: 50px; text-align: center; cursor: pointer;
}
.info-modal.show .video-dialog {
  animation: dialogIn .55s cubic-bezier(.2,.85,.25,1.15) both,
             dialogGlow .7s ease-out .12s both;
}
.info-modal.closing .video-dialog { animation: dialogOut .24s ease-in both; }
.info-modal.show .video-title { animation: titleIn .5s ease .18s both; }
.info-close {
  position: absolute; right: 28px; top: 18px;
  width: 60px; height: 60px; font-size: 48px; color: #999;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.info-title {
  font-size: 48px; font-weight: 700; color: #1565C0;
  text-align: center; letter-spacing: 4px;
}
.info-body {
  margin-top: 28px; font-size: 23px; line-height: 1.75; color: #333;
  max-height: 640px; overflow-y: auto; padding-right: 16px;
}
.info-body p { margin: 0 0 14px; }
.info-body::-webkit-scrollbar { width: 8px; }
.info-body::-webkit-scrollbar-thumb { background: #cbd9e8; border-radius: 4px; }

/* ===== 科普内容表格 ===== */
.pest-table {
  width: 100%; border-collapse: collapse; margin: 16px 0 22px;
  font-size: 21px; line-height: 1.6; color: #2a2a2a;
  table-layout: fixed; word-break: break-word;
}
.pest-table th, .pest-table td {
  border: 1px solid #cdd7e3; padding: 11px 14px;
  text-align: left; vertical-align: top;
}
.pest-table th {
  background: #1565C0; color: #fff; font-weight: 700; text-align: center;
}
.pest-table tr:nth-child(even) td { background: #f3f7fc; }
.pest-table tr:hover td { background: #e8f0fb; }