/* 新手引导：提示条 / 高亮 / 放这里圈 / 松手气泡 / 手势动画
 * 依赖 styles.css 的 token，必须在其后加载。
 */

  /* ================= 新手引导 ================= */
  /* 提示条放在飞船下方的天空区：不能挡住要点的东西 */
  .tut-bar {
    position: absolute; left: 12px; right: 12px;
    top: calc(148px + env(safe-area-inset-top));
    display: none; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: rgba(27,22,48,.94);
    color: #FFF1DD;
    font-size: 12px;
    z-index: 35;
    pointer-events: none;            /* 整条不拦点击，只有"跳过"可点 */
  }
  .tut-bar.show { display: flex; }
  .tut-bar #tut-text { flex: 1; }
  .tut-bar .link-btn { color: #C9BEE0; pointer-events: auto; }
  /* 教程辅助：光柱停在命中区时，提示条变成金色并轻轻呼吸 */
  .tut-bar.urgent {
    background: #FFD84D;
    color: #3A2B22;
    animation: tutUrgent .5s ease-in-out infinite alternate;
  }
  .tut-bar.urgent .link-btn { color: #6B4326; }
  @keyframes tutUrgent {
    from { box-shadow: 0 0 0 0 rgba(255,216,77,.55); }
    to { box-shadow: 0 0 0 6px rgba(255,216,77,0); }
  }
  /* 高亮：深色内圈 + 白色外光，浅色地表和星空上都看得见 */
  .tut-focus {
    box-shadow: 0 0 0 2px rgba(51,36,31,.85), 0 0 0 6px rgba(255,255,255,.75);
    border-radius: 10px;
    animation: tutPulse 1.4s ease-in-out infinite;
  }
  /* 教程第 2 步高亮整块地表：告诉玩家"按住空白也能放光柱" */
  .surface.tut-focus {
    border-radius: 0;
    animation: tutPulseInset 1.4s ease-in-out infinite;
  }
  @keyframes tutPulseInset {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(51,36,31,.7), inset 0 0 0 7px rgba(255,255,255,.42); }
    50% { box-shadow: inset 0 0 0 2px rgba(51,36,31,.25), inset 0 0 0 7px rgba(255,255,255,.12); }
  }
  /* 羊的点击区是个透明大方块：改成贴着羊的圆环，别看起来像张卡片 */
  .sheep.tut-focus { box-shadow: none; animation: none; }
  .sheep.tut-focus::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 106px; height: 106px; margin: -53px 0 0 -53px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(51,36,31,.85), 0 0 0 6px rgba(255,255,255,.75);
    animation: tutPulse 1.4s ease-in-out infinite;
    pointer-events: none;
  }
  /* 被照亮时整体上浮 3px（形变交给 img，外层 .art 只做位移） */
  .sheep.lit .art { transform: translateY(-3px) scaleX(var(--flip, 1)); }
  /* 光束最亮（淡蓝平台）时，羊身上也亮起来 */
  .sheep.lit img {
    filter:
      brightness(1.14)
      drop-shadow(0 0 16px rgba(150,222,255,.95))
      drop-shadow(0 0 34px rgba(96,180,255,.55));
  }

  /* 教程用的"放这里"圈 */
  .drop-guide {
    position: absolute; left: 0; top: 0;
    border-radius: 50%;
    border: 2px dashed #c99b2e;
    background: radial-gradient(circle, rgba(240,200,90,.18) 0%, rgba(240,200,90,.05) 65%, rgba(240,200,90,0) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity .2s ease;
    will-change: transform, opacity;
  }
  .drop-guide.show { opacity: 1; }
  /* 教程辅助：环停在命中区时，落点右侧冒一个"松手"气泡 */
  .beam-release {
    position: absolute; left: 0; top: 0;
    transform: translate(0, -50%) scale(.94);
    padding: 6px 12px;
    border-radius: 999px;
    background: #3A2B22;
    color: #FFF8EC;
    font-size: 13px; font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(42,30,22,.35);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity .12s ease, transform .12s ease;
  }
  /* 小箭头指向光柱落点 */
  .beam-release::before {
    content: "";
    position: absolute; left: -5px; top: 50%; margin-top: -5px;
    border: 5px solid transparent;
    border-right-color: #3A2B22;
  }
  .beam-release.show {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
    animation: releasePop .46s ease-in-out infinite alternate;
  }
  @keyframes releasePop {
    from { box-shadow: 0 4px 12px rgba(42,30,22,.35); }
    to { box-shadow: 0 0 0 6px rgba(255,216,77,.3), 0 4px 12px rgba(42,30,22,.35); }
  }
  @keyframes tutPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(51,36,31,.85), 0 0 0 6px rgba(255,255,255,.75); }
    50% { box-shadow: 0 0 0 2px rgba(51,36,31,.3), 0 0 0 6px rgba(255,255,255,.25); }
  }

  /* ---------- 引导手势：手指 + 水波（点 / 长按 / 拖） ----------
   * 用 fixed 定位在上一步算好的目标点；三种动作各一套动画 */
  .tut-gesture {
    position: fixed; left: 0; top: 0;
    width: 0; height: 0;
    z-index: 46;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
  }
  .tut-gesture.show { opacity: 1; }
  .tut-gesture .tg-finger {
    position: absolute; left: -16px; top: -33px;
    width: 32px; height: 32px;
    filter: drop-shadow(0 2px 4px rgba(42,30,22,.32));
  }
  .tut-gesture .tg-finger svg { display: block; width: 100%; height: 100%; }
  /* 线稿手势：奶油白填充 + 深棕描边，和场景里的物件同一套描边语言 */
  .tut-gesture .tg-finger path {
    fill: #FFF8EC;
    stroke: #3A2B22;
    stroke-width: .6;
    stroke-linejoin: round;
  }
  /* 指节线：让"握拳 + 伸食指"读得出来，不是一团白 */
  .tut-gesture .tg-finger .tg-line {
    fill: none;
    stroke-width: .4;
    opacity: .55;
  }
  .tut-gesture .tg-ripple {
    position: absolute; left: 0; top: 0;
    width: 54px; height: 54px; margin: -27px 0 0 -27px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.95);
    box-shadow: 0 0 0 2px rgba(51,36,31,.35) inset;
    opacity: 0;
  }
  /* 点：手指往下压一下，水波同时扩散 */
  .tut-gesture.type-tap .tg-finger { animation: tgTap .9s ease-in-out infinite; }
  .tut-gesture.type-tap .tg-ripple { animation: tgRipple .9s ease-out infinite; }
  /* 长按：手指压住不动，水波一圈圈扩散（提示"别松手"） */
  .tut-gesture.type-hold .tg-finger { transform: translateY(4px) scale(.95); }
  .tut-gesture.type-hold .tg-ripple { animation: tgRipple 1.2s ease-out infinite; }
  /* 拖：手指从起点滑到金色圈，再淡回起点（--dx / --dy 由 JS 写） */
  .tut-gesture.type-drag .tg-finger { animation: tgDrag 1.7s ease-in-out infinite; }
  .tut-gesture.type-drag .tg-ripple { display: none; }
  @keyframes tgTap {
    0%, 100% { transform: translateY(0); }
    38% { transform: translateY(6px) scale(.94); }
    62% { transform: translateY(0); }
  }
  @keyframes tgRipple {
    0% { transform: scale(.45); opacity: .95; }
    70%, 100% { transform: scale(1.25); opacity: 0; }
  }
  @keyframes tgDrag {
    0%, 10% { transform: translate(0, 0); opacity: 1; }
    55%, 72% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; }
    84%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tut-gesture .tg-finger,
    .tut-gesture .tg-ripple { animation: none !important; }
    .tut-gesture.type-hold .tg-ripple { opacity: .7; }
    .tut-bar.urgent,
    .beam-release.show { animation: none !important; }
  }