/* =====================================================================
   首页「萌宠指路」引导区（站长 2026-10-17 需求 1）
   =====================================================================
   【站长要求原文】
     「帮我把首页空白处，抠图 1 中的吉祥物，右边四个词汇作为四个跳转栏目，
       每一个单独做成立体悬浮的视觉效果，可以点击跳转：
       纪念→灵堂注册，音乐→新的页面，游戏→治愈星球，养宠→宠物乐园养宠领养界面。
       整体不要做成图 1 那种带边框的样式，要透明化，这样显得是一个拟人宠物
       在哪里指引玩家。如果你能帮我做成狗狗开口说话介绍这几个栏目更好。」

   【设计要点】
   1. **透明无边框**：容器不设背景、不描边；只有卡片自身带"玻璃拟态"质感
      （半透明白 + 背景模糊 + 柔和投影），视觉上是"悬浮"而非"贴框"；
   2. **立体悬浮**：每张卡片独立 Z 轴 —— hover 时 translateY(-6px) + scale(1.02)
      + 加深投影，并让对应的引导线亮起；三层光影（外投影/内高光/底反光）；
   3. **狗狗开口说话**：气泡逐字打印 + 浏览器语音合成朗读（见 index-guide.js），
      hover/focus 任一卡片即介绍该栏目，自动轮流播报；
   4. 无 JS 时降级为静态可读文案（气泡里有默认一句）。
   ===================================================================== */

/* =====================================================================
   【布局方式：绝对定位填充空白区，**不改动任何原有版式尺寸**】
   =====================================================================
   站长要求原文：「原样式不要动，就在我指出的空白处布局即可，不要乱动，
                 这样显得界面拉伸很大，破坏了原来的美观度」，
   并给了标注图：
     · **红框空白区**（标题右侧、榜单左侧）→ 放吉祥物；
     · **榜单下方的大片空白** → 放四个栏目卡片。
   https 实测（1440 视口）：
     hero 容器 1180px 宽、两列（文案 614px / 榜单 482px）；
     红框区约 x=327..472 之间、y=139..331；
     榜单底 671、容器底 1213 → 右侧下方有约 542px 高的空白。
   做法：把指路区放进 `.pm-guide-slot`，用**绝对定位**分别把吉祥物与卡片
   摆到空白处。绝对定位元素**不参与文档流**，因此
   **不会把 hero 撑高一个像素**，原版式的宽高完全保持不变。
   ===================================================================== */

/* =====================================================================
   【布局：绝对定位放进红框，紧凑横排，不撑大版面】
   =====================================================================
   站长第 4 次明确要求：
     「我要的是在红框区域，**不需要那么大的宠物悬浮，做成稍微缩小版，
       有指向的四个板块就行**，搞这么大，画面都撑坏了。」
   实测红框约 **314×192px**，位于 hero 文案列右上方的留白内
   （hero 容器 1180×532；文案列 x148..762，标题 y236..308）。
   做法：
     · `.pm-guide-strip` **绝对定位**在红框坐标 → 不参与文档流，
       **hero 高度一个像素都不变**（实测仍 707px）；
     · 吉祥物缩小到 **112px**，贴在红框左侧，探出一点指向右侧板块；
     · 四个板块做成**一列小胶囊**（每个高 32px）贴在右侧；
     · 总占位 ≈ 300×190，正好落进红框。
   ===================================================================== */

/* 插槽：绝对定位到**站长标注的 A 位置（标题右侧空白）**
 * ---------------------------------------------------------------------
 * 【定位依据：带坐标网格的标注图 shots/layout-options.png】
 *   hero 容器 x130..1310（宽 1180）；文案列 x148..762（标题 x148..762）。
 * 【2026-10-17 第 5 次修正（站长标注：红框=现在，蓝框=目标；要求"下移并左移，
 *   与周围对齐"）】
 *   ⚠️ 按铁律 E24：这次**先测量再改**，不再猜。
 *   实测（1440 视口，容器 x130..1310 y139..671）：
 *     文案列 x148..762（标题同宽）｜活跃榜 x810..1292
 *     改前吉祥物：x444..594 y94..284（容器内 left=314 top=-45）
 *     问题：① 上边界 y94 比容器顶 y139 还高（站在页头外面，不平齐）；
 *           ② 左边界 x444 落在标题列右侧半空，与任何元素都不对齐。
 * 【2026-10-17 第 6 次修正｜按铁律 E24：像素级读取标注图，不再肉眼估算】
 *   用 read-annotation2.py 对站长标注图做**长直线检测**（页面本身没有这种长直线，
 *   可排除浅蓝底/红 logo 干扰），得到：
 *     红框（= 现在位置）：标注图 x872..1115 y136..337
 *                       → 站点 x654..836 y102..253
 *     蓝框（= 目标位置）：标注图 x697..1014 y138..333
 *                       → 站点 **x523..760 y104..250**
 *   结论：需要**左移约 137px、上移约 35px**。
 *   换算到容器内偏移（容器左 130 / 上 139）：
 *     left: 660 → 523  ⇒ 393px
 *     top :   0 → -35  ⇒ -35px
 */
.pm-guide-strip {
  position: absolute;
  left: 393px;         /* 容器内偏移 → x523（蓝框左边界）*/
  top: -17px;          /* 容器内偏移 → y122；气泡从 y122 开始（页头底边 y65 之下）*/
  width: 237px;        /* 蓝框宽 238，取 237 贴齐 */
  height: 358px;
  /* 要压过 hero 正文与侧栏（它们没设 z-index），但低于固定页头 */
  z-index: 40;
  /*
   * 🚨 必须让**整块**都能接收指针事件（站长 2026-10-17 反馈"无法拖拽修改"）
   * =====================================================================
   * 【之前的错误】这里写的是 pointer-events: none（本意是让空白处"点击穿透"），
   *   于是只有内部少数子元素能收事件。**CDP elementFromPoint 实测**：
   *     模块区域 x523..760 y122..480，4 个测试点有 3 个命中的是别的元素 ——
   *       模块左上   → .pm-container
   *       吉祥物头部 → .pm-hero__text（标题文字盖在上面）
   *       模块右下   → .pm-hero__actions（按钮行）
   *   结果：鼠标一按就选到外面的大框/标题，模块既拖不动、也选不中。
   * 【正确做法】整块设 pointer-events: auto，并靠上面的 z-index:40
   *   **压过 hero 文字**、接收全部指针事件 ——
   *   模块内任何位置都能按下去拖动，空白处也不会被下面元素抢走。
   *   内部四张卡片本身是 <a>，依旧可正常点击跳转。
   */
  pointer-events: auto;
}

.pm-guide {
  position: relative;
  display: inline-flex;        /* 宽度贴合内容，不撑满整列 */
  align-items: flex-end;       /* 吉祥物与四个短条**底部齐平**（站长示例图就是这样） */
  justify-content: flex-start;
  gap: 4px;
  max-width: 100%;
  padding: 0;
  /*
   * 纵向让出气泡高度：气泡绝对定位在 strip 顶部（页头下方），
   * 因此本行整体下移 96px，避免宠物与气泡重叠。
   */
  padding-top: 96px;
}

/* ---- 吉祥物：**禁止拖动/选中/点击跳转**（站长反馈拖动会跳画面） ---- */
.pm-guide__pet {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  align-self: flex-start;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.pm-guide__mascot {
  width: 132px;
  max-width: 132px;
  height: auto;
  display: block;
  /* 装饰性图片：不接收指针事件，从根本上避免拖拽/点击跳转 */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* ---- 四个指向板块：**一列纵排**，收进蓝框宽度内 ---- */
/*
 * 【2026-10-17 第 6 次修正】蓝框宽 238px，宠物占 132px，
 * 右侧只剩约 100px → 短条必须**单列纵排**（每条约 72px）才收得进去。
 * 之前用两列（136px）会超出蓝框右边界（实测到 x795，超出 35px）。
 */
.pm-guide__cards {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding-top: 22px;      /* 与宠物头部视觉错开一点，整体仍收在蓝框内 */
  pointer-events: auto;
}

/* 单个短条：宽度 = 图标 + 文字（fit-content），不再撑满 */
.pm-guide__card {
  position: relative;
  display: inline-flex;      /* inline-flex 让宽度贴合内容 */
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px 4px 7px;
  min-height: 24px;
  border-radius: 999px;      /* 胶囊形，短条更好看 */
  text-decoration: none;
  color: inherit;
  background: linear-gradient(140deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  border: 0;
  box-shadow:
    0 1px 2px rgba(22, 33, 30, .05),
    0 5px 12px -7px rgba(22, 33, 30, .30),
    inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
  will-change: transform;
}
/* 左侧向吉祥物方向的"指向"小箭头（体现"被宠物指引"） */
.pm-guide__card::before {
  content: "";
  position: absolute;
  left: -3px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 2px;
  background: var(--pm-guide-accent, #2f7d5d);
  opacity: .6;
  transform: rotate(45deg);
}
.pm-guide__card:hover,
.pm-guide__card:focus-visible {
  transform: translateX(3px) scale(1.02);
  box-shadow:
    0 2px 4px rgba(22, 33, 30, .06),
    0 10px 20px -9px rgba(22, 33, 30, .40),
    inset 0 1px 0 rgba(255,255,255,.96);
  outline: none;
}

/* 小图标 */
.pm-guide__icon {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff;
}

.pm-guide__body { min-width: 0; flex: 1; }
.pm-guide__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #1f2b41;
  line-height: 1.2;
}
.pm-guide__desc { display: none; }   /* 站长要求：不要注解词 */

/* 指向色（用于卡片左侧小箭头） */
.pm-guide__card--memorial { --pm-guide-accent: #e8a33d; }
.pm-guide__card--music    { --pm-guide-accent: #3d7ee0; }
.pm-guide__card--games    { --pm-guide-accent: #7c5cd6; }
.pm-guide__card--pet      { --pm-guide-accent: #2f9e63; }

/* ---- 说话气泡：悬停时浮在吉祥物**上方**（站长标注箭头指向处） ---- */
/*
 * 【2026-10-17 修正】站长反馈「气泡文字看不到了，被遮挡」，并在图上用红箭头
 * 指定了气泡应出现的位置（吉祥物上方、页头之下）。
 * 原因：气泡原先用 bottom: calc(100% + 4px) 贴在整块顶部，
 * 而这块又被上移到 top:-22px（y117），气泡因此跑到 y65 以上——
 * **正好被固定页头盖住**，所以看不见。
 * 修法：把气泡固定在**宠物头顶上方**（相对 strip 顶部 y117 往上），
 * 并控制宽度（288px）保证不超出页头下沿。
 */
.pm-guide__bubble {
  position: absolute;
  left: 0;
  top: 0;                /* strip 顶 y122（容器 -17）之上，气泡在页头下方开始 */
  bottom: auto;
  max-width: 300px;
  padding: 8px 11px;
  border-radius: 12px 12px 12px 4px;
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 10px 24px -10px rgba(22,33,30,.36), inset 0 1px 0 #fff;
  font-size: 12.5px;
  line-height: 1.6;
  color: #24333f;
  /*
   * 层级要压过 hero 正文（正文在普通流里，无 z-index，但 DOM 靠后）；
   * 实测气泡被"动物星球提供…"那行文字穿过，所以给足 z-index，
   * 并显式声明 position:absolute 已在上方（叠加上下文成立）。
   */
  z-index: 60;
  isolation: isolate;
}
.pm-guide__bubble[hidden] { display: none; }
/*
 * 气泡小尾巴：气泡在宠物**上方**，所以尾巴从气泡底边向下伸、
 * 指向下方的宠物头部（宠物 x523..655，气泡 left 与宠物左边对齐，
 * 故尾巴放在气泡左侧 130px 处 ≈ 宠物头部中心）。
 */
.pm-guide__bubble::after {
  content: "";
  position: absolute;
  left: 130px; bottom: -7px;
  width: 14px; height: 14px;
  background: rgba(255,255,255,.99);
  transform: rotate(45deg);
  border-radius: 0 0 4px 0;
}
.pm-guide__caret {
  display: inline-block;
  width: 2px; height: 1em;
  vertical-align: -2px;
  margin-left: 2px;
  background: #2f7d5d;
  animation: pmCaret .8s steps(1) infinite;
}
@keyframes pmCaret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* 朗读按钮：贴在吉祥物脚下 */
.pm-guide__speak {
  position: absolute;
  left: 6px; bottom: 2px;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 5px 12px -5px rgba(22,33,30,.42);
  font-size: 13px;
  cursor: pointer;
  display: grid; place-items: center;
  pointer-events: auto;
  z-index: 6;
}
.pm-guide__speak:hover { transform: scale(1.08); background: #fff; }
.pm-guide__speak[aria-pressed="true"] { background: #eaf6f2; }

/* ---- 响应式：窄屏放不下绝对定位 → 隐藏整块（不破坏原版式） ---- */
@media (max-width: 1180px) {
  .pm-guide-strip { display: none; }
}

/*
 * 吉祥物：**不抠图、不悬浮**
 * =====================================================================
 * 站长要求原文（2026-10-17）：
 *   「不抠图了，不要悬浮，宠物底色与网站版面一致就行，
 *     我要的是表现的看上去动态，不是做成阿飘。」
 * 因此：
 *   · **不再使用抠出的透明 PNG**（mascot-dog.png），改回**原始设计图**，
 *     图与版面同色系（浅蓝白），四周用与版面一致的底色衔接，
 *     看不出"一块图贴上去"的接缝；
 *   · **去掉上下浮动的 animation** —— 那正是"阿飘"感的来源；
 *   · 改为**克制的动态**：入场时轻微上滑淡入 + 悬停时轻微右移（像在招呼），
 *     让它看得见"活着"，但脚是落地的。
 *
 * 【注意】上面 .pm-guide__mascot 已经定义了尺寸与"禁止拖拽"的
 * pointer-events/user-select/-webkit-user-drag；这里只补充
 * "与版面融为一体"的柔化与动效，避免拆成两条规则后互相覆盖。
 */
.pm-guide__mascot {
  /*
   * 【与版面融为一体的关键】不要圆角、不要边框、不要重投影 ——
   * 那会让它看起来像"贴了一张卡片"。
   * 图片本身已经从设计稿取了与 hero 同色系的浅蓝白底（rgb 242,247,253），
   * 这里再用一层**径向遮罩**把四个角柔化掉，让图片边界消失，
   * 视觉上就是吉祥物直接站在版面背景里。
   */
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(118% 112% at 50% 54%, #000 72%, transparent 100%);
  mask-image: radial-gradient(118% 112% at 50% 54%, #000 72%, transparent 100%);
  /* 入场：轻微上滑淡入（一次性，不是持续悬浮） */
  animation: pmPetIn .6s cubic-bezier(.2,.7,.3,1) both;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
@keyframes pmPetIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 悬停时轻轻前倾，像宠物凑过来招呼（不是浮起来） */
.pm-guide:hover .pm-guide__mascot { transform: translateX(3px); }
/* 尊重"减少动效"偏好 */
@media (prefers-reduced-motion: reduce) {
  .pm-guide__mascot { animation: none; transition: none; }
}