/* ============================================================
   白纸蓝线 · 游戏化互动层（可单独移除）
   轻量进度 HUD / 线稿导游小人 / 点击反馈（叮 · 涟漪 · 探索值）
   机制全部复用站内设计令牌（--ink 等），保持浅色编辑风。
   ============================================================ */

/* ---- 顶部进度细线 ---- */
.play-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;
  background:var(--ink-faint);pointer-events:none}
.play-progress__fill{height:100%;width:0;
  background:linear-gradient(90deg,var(--ink),#7EA6F5);
  box-shadow:0 0 10px rgba(29,78,216,.45);transition:width .12s linear}
.play-progress__dot{position:absolute;top:50%;left:0;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--ink);transform:translate(-50%,-50%);
  box-shadow:0 0 8px rgba(29,78,216,.5);transition:left .12s linear}

/* ---- 探索 HUD 小卡（左下） ---- */
.play-hud{position:fixed;left:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:10px;
  padding:8px 14px;border:1px solid var(--ink-soft);border-radius:999px;
  background:rgba(253,253,251,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:12px;color:var(--ink-deep);letter-spacing:.04em;
  box-shadow:0 8px 22px -12px rgba(29,78,216,.4)}
.play-hud__count{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.play-hud__count b{font-variant-numeric:tabular-nums;min-width:14px;text-align:right;color:var(--ink)}
.play-hud__sep{width:1px;height:14px;background:var(--ink-soft)}
.play-hud__mute{cursor:pointer;border:none;background:transparent;color:var(--ink);
  font-size:15px;line-height:1;padding:2px 5px;border-radius:7px;transition:background .2s}
.play-hud__mute:hover{background:var(--ink-wash)}
.play-hud__mute.is-muted{text-decoration:line-through;opacity:.45}
@media(max-width:860px){.play-hud{display:none}}

/* ---- 导游小人（行走 + 欢呼 hop） ---- */
.mascot-wrap{position:fixed;right:24px;bottom:22px;z-index:60;width:84px;pointer-events:none}
.mascot-wrap.is-cheer{animation:playHop .55s ease}
@keyframes playHop{0%,100%{transform:translateY(0)}42%{transform:translateY(-16px)}}
.mascot__bubble{position:fixed;right:116px;bottom:44px;z-index:79;max-width:196px;
  padding:10px 14px;border:1.5px solid var(--ink);border-radius:14px 14px 4px 14px;
  background:#fff;color:var(--ink-deep);font-size:13px;line-height:1.5;
  box-shadow:0 12px 28px -14px rgba(29,78,216,.45);opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .35s;pointer-events:none}
.mascot__bubble.show{opacity:1;transform:translateY(0)}
.mascot__bubble::after{content:"";position:absolute;right:-7px;bottom:14px;width:13px;height:13px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:#fff;
  transform:rotate(-45deg)}
@media(max-width:860px){.mascot-wrap,.mascot__bubble{display:none}}

/* ---- 点击涟漪 ---- */
.play-ripple{position:fixed;z-index:78;border-radius:50%;pointer-events:none;
  border:2px solid var(--ink);transform:translate(-50%,-50%) scale(0);opacity:.5;
  animation:playRipple .6s ease-out forwards}
@keyframes playRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---- 顶栏当前分区高亮（scrollspy） ---- */
.topnav a{position:relative}
.topnav a.is-active{color:var(--ink)}
.topnav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--ink);border-radius:2px}

@media (prefers-reduced-motion: reduce){
  .play-ripple{display:none}
  .mascot-wrap.is-cheer{animation:none}
}