/* ---------- 灰盒基调：只用灰阶 ---------- */
  :root {
    --ink: #1a1a1a;
    --ink-2: #4a4a4a;
    --ink-3: #8a8a8a;
    --line: #c9c9c9;
    --line-soft: #e2e2e2;
    --surface: #f4f4f4;
    --surface-2: #ebebeb;
    --white: #fbfbfb;
    --space: #191a1c;
    --space-2: #232427;
    --radius: 10px;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; }
  body {
    background: #dcdcdc;
    color: var(--ink);
    font: 14px/1.5 "PingFang SC", -apple-system, "Helvetica Neue", sans-serif;
    display: flex; align-items: center; justify-content: center;
  }
  #app {
    position: relative;
    width: min(100vw, 430px);
    height: min(100vh, 860px);       /* 旧浏览器兜底 */
    height: min(100dvh, 860px);      /* 移动端地址栏收缩时不抖动 */
    background: var(--surface);
    overflow: hidden;
    border: 1px dashed var(--line);
  }
  .screen { position: absolute; inset: 0; display: none; flex-direction: column; }
  .screen.active { display: flex; }

  .topbar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px;
    padding-top: calc(12px + env(safe-area-inset-top));
    border-bottom: 1px solid var(--line-soft);
    background: var(--white);
    flex: 0 0 auto;
  }
  .topbar .title { font-weight: 600; font-size: 15px; }
  .topbar .spacer { flex: 1; }
  .btn {
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    border-radius: 999px;
    padding: 10px 14px;
    min-height: 44px;                 /* 触摸目标 ≥ 44px */
    display: inline-flex; align-items: center;
    font-size: 13px;
    cursor: pointer;
  }
  .btn:active { background: var(--surface-2); }

  /* ================= 首页：宇宙空间 ================= */
  #screen-home { background: var(--space); }
  .space {
    position: relative;
    flex: 1;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
  }
  .space.dragging { cursor: grabbing; }
  /* 远景星点：两层不同速度制造纵深 */
  .starfield {
    position: absolute; inset: -20% 0;
    will-change: transform;
  }
  .starfield.far {
    background-image:
      radial-gradient(1.5px 1.5px at 30px 40px, rgba(255,255,255,.55) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 120px 180px, rgba(255,255,255,.35) 50%, transparent 51%),
      radial-gradient(1px 1px at 200px 90px, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 260px 240px, rgba(255,255,255,.3) 50%, transparent 51%);
    background-size: 320px 320px;
  }
  .starfield.near {
    background-image:
      radial-gradient(2px 2px at 60px 120px, rgba(255,255,255,.7) 50%, transparent 51%),
      radial-gradient(2.5px 2.5px at 210px 60px, rgba(255,255,255,.45) 50%, transparent 51%);
    background-size: 420px 420px;
  }
  .world {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 0;                     /* 星球用负 top 排在上方，容器本身不需要高度 */
    will-change: transform;
  }
  .hud {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px 26px;
    padding-top: calc(12px + env(safe-area-inset-top));
    color: #ededed;
    z-index: 8;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(25,26,28,1) 58%, rgba(25,26,28,0));
  }
  .hud .title { font-weight: 600; font-size: 15px; }
  .hud .spacer { flex: 1; }
  .hud .btn {
    pointer-events: auto;
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.28);
    color: #f2f2f2;
  }
  .hud .btn:active { background: rgba(255,255,255,.2); }

  .ship-fixed {
    position: absolute;
    left: 18px; bottom: 88px;
    transform: translateY(0);
    z-index: 7;
    pointer-events: none;
    opacity: .95;
    animation: hover 3.6s ease-in-out infinite;
  }
  @keyframes hover {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  .planet-node {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer;
    color: #d8d8d8;
    background: none; border: none; padding: 0;
  }
  .planet-node .disc {
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.45);
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.10), rgba(255,255,255,.10) 5px, rgba(255,255,255,.03) 5px, rgba(255,255,255,.03) 12px),
      radial-gradient(circle at 34% 30%, #4a4b4f, #2a2b2e 70%);
    box-shadow: inset -10px -12px 22px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.03);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .planet-node:active .disc { transform: scale(.96); }
  .planet-node.near .disc { box-shadow: inset -16px -18px 30px rgba(0,0,0,.6), 0 0 0 10px rgba(255,255,255,.04); }
  .planet-node .p-label {
    font-size: 12px; letter-spacing: .04em; white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
  }
  .planet-node.done .p-label::after { content: " ✓"; }
  .planet-node .p-sub { font-size: 11px; color: #9a9a9a; }

  /* 底部压暗，让"半颗星球"沉入画面边缘，同时托住提示条 */
  .space::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 150px;
    background: linear-gradient(to top, rgba(25,26,28,.95), rgba(25,26,28,0));
    pointer-events: none;
    z-index: 4;
  }

  .space-hint {
    position: absolute; left: 14px; bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(25,26,28,.78);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 12px; color: #a8a8a8;
    white-space: nowrap;
    z-index: 8; pointer-events: none;
    transition: opacity .2s ease;
  }

  /* ================= 星球内：球面弧线 ================= */
  .sky-ship {
    position: relative;
    flex: 0 0 auto; display: flex; justify-content: center;
    padding: 6px 0 0;
    background: linear-gradient(#fbfbfb, #f4f4f4);
    touch-action: none;              /* 长按蓄能时不要触发浏览器手势 */
    cursor: grab;
  }
  .sky-ship:active { cursor: grabbing; }
  /* 只圈住中间的飞船，不要整条横幅 */
  .sky-ship.tut-focus { box-shadow: none; animation: none; }
  .sky-ship.tut-focus::after {
    content: ""; position: absolute; left: 50%; top: 4px;
    width: 108px; height: 76px; margin-left: -54px;
    border-radius: 16px;
    box-shadow: 0 0 0 2px rgba(26,26,26,.85), 0 0 0 6px rgba(255,255,255,.75);
    animation: tutPulse 1.4s ease-in-out infinite;
    pointer-events: none;
  }
  .surface {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background: #fafafa;
    touch-action: none;
    cursor: grab;
  }
  .surface.dragging { cursor: grabbing; }
  .surface svg.ground { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .spot {
    position: absolute;
    left: 0; top: 0;                 /* 位置全部由 transform 决定，避免每帧改布局属性 */
    will-change: transform, opacity;
    transform-origin: 50% 50%;
    border: 1px dashed var(--ink-3);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    color: var(--ink-2);
    font-size: 12px;
    padding: 11px 14px;
    min-height: 44px;                /* 触摸目标 ≥ 44px */
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .18s, background .18s, color .18s;
    display: flex; align-items: center; gap: 5px;
  }
  /* 地表装饰：节点复用，只更新 transform */
  .deco {
    position: absolute;
    left: 0; top: 0;
    width: 14px; height: 8px;
    border-radius: 50%;
    background: #c2c2c2;
    pointer-events: none;
    will-change: transform, opacity;
  }
  .deco.d1 { width: 6px; height: 15px; border-radius: 3px; background: #b6b6b6; }
  .deco.d2 { width: 8px; height: 8px; background: #cbcbcb; }
  .spot .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-3);
    transition: background .18s;
  }
  .spot:active { transform-origin: 50% 50%; }
  .spot.dug {
    border-style: solid;
    border-color: var(--ink-2);
    background: var(--ink);
    color: #fff;
    opacity: .78;
  }
  .spot.dug .dot { background: #fff; }
  .spot.dug::after { content: "已翻找"; font-size: 11px; opacity: .85; }
  .spot.dug .name { display: none; }

  /* 羊的入口：灰窝。做成被压塌的坑而不是草，避免和"风动草"混淆 */
  .den {
    position: absolute; left: 0; top: 0;
    width: 64px; height: 58px;
    padding: 0; border: 0; background: none;
    cursor: pointer; z-index: 2;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
  }
  .den-hole {
    position: absolute; left: 6px; top: 22px;
    width: 52px; height: 20px; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 30%, #9a9a9a, #555 72%);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.45);
  }
  .den-head {
    position: absolute; left: 21px; top: 26px;
    width: 22px; height: 17px; border-radius: 50% 50% 44% 44%;
    background: #ededed; border: 1px solid #b5b5b5;
    transform: translateY(10px) scale(.6); opacity: 0;
  }
  /* 探头：冒头 → 张望 → 缩回，0.6s */
  .den.probe .den-head { animation: denProbe .6s ease-in-out; }
  @keyframes denProbe {
    0%   { transform: translateY(10px) scale(.6); opacity: 0; }
    25%  { transform: translateY(-2px) scale(1) rotate(0deg); opacity: 1; }
    45%  { transform: translateY(-2px) scale(1) rotate(-7deg); opacity: 1; }
    65%  { transform: translateY(-2px) scale(1) rotate(7deg); opacity: 1; }
    100% { transform: translateY(10px) scale(.6); opacity: 0; }
  }
  .den-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    font-size: 11px; color: var(--ink-3); text-align: center;
  }
  /* 收齐 13 只后，灰窝变金色 */
  .den.golden .den-hole { background: radial-gradient(ellipse at 50% 30%, #f7e6a9, #c99b2e 72%); }
  .den.golden .den-label { color: #a9821f; }

  /* 地表的诱饵：可以拖着换位置；轻点看说明 */
  .bait {
    position: absolute; left: 0; top: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--ink-3);
    font-size: 11px; color: var(--ink-2);
    white-space: nowrap;
    cursor: grab;
    touch-action: none;
    z-index: 2;
    will-change: transform, opacity;
  }
  /* 视觉上保持小胶囊，用伪元素把命中区撑到 44px 以上 */
  .bait::before { content: ""; position: absolute; inset: -11px; }
  .bait.dragging { cursor: grabbing; z-index: 4; border-color: var(--ink); }

  /* 香味圈：拖拽时跟着手指，放下后亮一下再淡出 */
  .scent {
    position: absolute; left: 0; top: 0;
    border-radius: 50%;
    border: 2px dashed #9a9a9a;
    background: radial-gradient(circle, rgba(120,120,120,.16) 0%, rgba(120,120,120,.05) 68%, rgba(120,120,120,0) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity .18s ease;
    will-change: transform, opacity;
  }
  .scent.on { opacity: .85; }
  .scent.preview { border-style: solid; border-color: #6f6f6f; }

  .drop-float {
    position: absolute;
    font-size: 13px; font-weight: 600; color: var(--ink);
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
  }
  @keyframes floatUp {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, -56px); }
  }
  /* 羊：站在地表，可点击；底部中心对齐弧线 */
  .sheep {
    position: absolute; left: 0; top: 0;
    padding: 10px 10px 0;                   /* 去掉底部内边距，让脚贴住弧线 */
    background: none; border: 0;
    cursor: pointer;
    z-index: 3;
    will-change: transform, opacity;
    transform-origin: 50% 100%;
  }
  .sheep img {
    display: block;
    width: 92px; height: auto;
    aspect-ratio: 256 / 190;        /* 图片未加载时也预留高度，避免点击区先塌陷 */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
    animation: sheepIdle 2.6s ease-in-out infinite;
  }
  @keyframes sheepIdle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-1deg); }
  }

  /* 被点击后发抖 */
  .sheep.tremble img { animation: sheepTremble .18s ease-in-out 2; }
  /* 走路时被翻找声惊到：抬头停一下 */
  .sheep.startled img { animation: sheepStartle .32s ease-out; }
  @keyframes sheepStartle {
    0%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-6px) scale(1.04); }
  }
  @keyframes sheepTremble {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-3px, 1px) rotate(-2.5deg); }
    40% { transform: translate(3px, -1px) rotate(2.5deg); }
    60% { transform: translate(-2px, 1px) rotate(-1.5deg); }
    80% { transform: translate(2px, 0) rotate(1.5deg); }
  }

  /* 飞船投下的牵引光束：暖金色锥体（白色在浅色地表上不可见） */
  .beam {
    position: absolute; top: 0;
    width: 92px; margin-left: -46px;
    transform-origin: top center;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%);
    background:
      repeating-linear-gradient(180deg,
        rgba(255,255,255,.45) 0 6px,
        rgba(255,255,255,0) 6px 14px),
      linear-gradient(180deg,
        rgba(255,214,102,.95) 0%,
        rgba(255,186,58,.55) 45%,
        rgba(255,186,58,.18) 100%);
    filter: drop-shadow(0 0 10px rgba(255,196,80,.7));
    transition: transform .18s ease-out, opacity .18s ease-out;
  }
  .beam.on { transform: scaleY(1); opacity: 1; }
  /* 光最强的一瞬：外发光明显变亮，提示"就是现在松手" */
  .beam.peak { filter: drop-shadow(0 0 18px rgba(255,214,110,.95)); }

  /* 沿光束上升的碎光粒子 */
  .beam-spark {
    position: absolute;
    width: 5px; height: 5px; border-radius: 50%;
    background: #fff6cf;
    box-shadow: 0 0 8px rgba(255,214,110,.95);
    pointer-events: none;
    z-index: 2;
    animation: sparkUp .9s ease-out forwards;
  }
  @keyframes sparkUp {
    0%   { transform: translateY(0) scale(.6); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(-130px) scale(1); opacity: 0; }
  }

  /* ================= 底部托盘 ================= */
  .tray {
    flex: 0 0 auto;
    border-top: 1px solid var(--line-soft);
    background: var(--white);
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  }
  .tray-label { font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  /* 托盘里的文字按钮：次要控件，36px 起 */
  .link-btn {
    border: 0; background: none; padding: 8px 2px;
    min-height: 36px;
    font-size: 12px; color: var(--ink-2);
    display: inline-flex; align-items: center;
    cursor: pointer;
  }
  .link-btn:active { color: var(--ink); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
  .chip {
    border: 1px solid var(--line); border-radius: 999px;
    padding: 9px 12px; font-size: 12px;
    min-height: 36px;                 /* 次要控件，36px 起（主控件仍要求 44px） */
    display: inline-flex; align-items: center;
    background: var(--surface); cursor: pointer;
    touch-action: none;               /* 拖拽放诱饵时不要触发浏览器手势 */
  }
  .chip:active { background: var(--ink); color: #fff; }
  /* 拖拽中的物品替身：名字 + 一句话说明 */
  .drag-ghost {
    position: absolute; left: 0; top: 0;
    display: flex; flex-direction: column;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--ink); color: #fff;
    pointer-events: none;
    z-index: 60;
    will-change: transform;
  }
  .drag-ghost .dg-name { font-size: 12px; font-weight: 600; }
  .drag-ghost .dg-desc { font-size: 11px; opacity: .78; white-space: nowrap; margin-top: 2px; }
  .chips .empty { color: var(--ink-3); font-size: 12px; }
  .slots { display: flex; gap: 8px; margin-top: 10px; }
  .slot {
    flex: 1; height: 46px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--ink-3);
    cursor: pointer;
  }
  .slot.filled { border-style: solid; border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); }
  .slot:disabled { cursor: default; }
  .recipe-hint { margin-top: 8px; font-size: 12px; color: var(--ink-2); }

  /* ================= 图鉴 ================= */
  .dex-list { flex: 1; overflow-y: auto; padding: 12px 12px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .dex-card { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--white); padding: 10px; }
  .dex-card .d-name { font-weight: 600; font-size: 13px; }
  .dex-card .d-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
  .dex-card .d-recipe { font-size: 11px; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }
  .dex-card.got { border-color: var(--ink-2); }
  .dex-card .d-sheep { opacity: .25; }
  .dex-card.got .d-sheep { opacity: 1; }

  /* 物品说明（独立页） */
  .item-list {
    flex: 1; overflow-y: auto;
    padding: 12px 12px 28px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    align-content: start;
  }
  .item-list .dex-item {
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: var(--white); padding: 10px;
  }
  .item-list .di-name { font-size: 13px; font-weight: 600; }
  .item-list .di-desc { font-size: 11px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
  .item-list .di-from { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
  .item-list .dex-item.locked { opacity: .5; }

  /* 首次获得物品的介绍卡：3 秒自动消失，点一下也能关 */
  .item-intro {
    position: absolute; left: 50%;
    bottom: calc(176px + env(safe-area-inset-bottom));
    width: min(300px, 78%);
    transform: translateX(-50%) translateY(10px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,.14);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 45;
    cursor: pointer;
  }
  .item-intro.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .item-intro .ii-tag { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; }
  .item-intro .ii-name { font-size: 15px; font-weight: 600; margin-top: 2px; }
  .item-intro .ii-desc { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
  .item-intro .ii-hint { font-size: 11px; color: var(--ink-3); margin-top: 8px; }

  /* ================= 标题页 ================= */
  #screen-title {
    background: radial-gradient(120% 90% at 50% 18%, #26282d 0%, #151618 72%);
    color: #ececec;
    align-items: center; justify-content: center;
  }
  .title-wrap { width: 100%; padding: 0 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .t-kicker { font-size: 11px; letter-spacing: .18em; color: #8f949b; }
  .t-logo { font-size: 40px; font-weight: 600; letter-spacing: .12em; margin-top: 14px; }
  .t-sub { font-size: 13px; color: #a9aeb5; margin-top: 10px; }
  .t-progress { font-size: 12px; color: #8f949b; margin-top: 22px; }
  .t-actions { width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
  #screen-title .btn {
    justify-content: center;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
    color: #e8e8e8;
  }
  #screen-title .btn:active { background: rgba(255,255,255,.14); }
  #screen-title .btn-primary { background: #f2f2f2; color: #1a1a1a; border-color: #f2f2f2; font-weight: 600; }
  #screen-title .btn.locked { opacity: .55; }
  #screen-title .t-reset { margin: 4px auto 0; color: #7d838b; }
  #screen-title .t-debug { margin: 0 auto; color: #6f757d; font-size: 11px; min-height: 32px; }
  [hidden] { display: none !important; }

  /* ================= 剧情 ================= */
  #screen-story { background: #1b1d21; color: #e9e9e9; }
  .story {
    flex: 1; display: flex; flex-direction: column;
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  .story-head { display: flex; align-items: center; }
  .story-who {
    font-size: 12px; color: #1a1a1a; background: #cfd3d8;
    padding: 5px 10px; border-radius: 999px;
  }
  .story-head .link-btn { color: #9aa0a8; }
  .story-text { flex: 1; overflow-y: auto; margin-top: 16px; }
  .story-line {
    margin: 0 0 12px;
    font-size: 15px; line-height: 1.75; color: #e6e6e6;
    animation: storyIn .22s ease-out;
  }
  .story-line.story-guide {
    color: #cfd3d8; font-size: 14px;
    background: rgba(255,255,255,.05);
    border-left: 2px solid #8f949b;
    padding: 10px 12px; border-radius: 6px;
  }
  .story-sep { height: 10px; }
  @keyframes storyIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  .story-foot { text-align: center; font-size: 12px; color: #8f949b; padding-top: 10px; }

  /* ================= 羊圈 ================= */
  #screen-pen { background: #14161a; }
  .pen-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .pen-stage canvas { display: block; }
  .pen-tip {
    flex: 0 0 auto; text-align: center;
    font-size: 11px; color: #8f949b;
    padding: 8px 14px calc(12px + env(safe-area-inset-bottom));
  }

  /* ================= 新手引导 ================= */
  /* 提示条放在飞船下方的天空区：不能挡住要点的东西 */
  .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(26,26,26,.94);
    color: #f2f2f2;
    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: #b9bec5; pointer-events: auto; }
  /* 高亮：深色内圈 + 白色外光，浅色地表和星空上都看得见 */
  .tut-focus {
    box-shadow: 0 0 0 2px rgba(26,26,26,.85), 0 0 0 6px rgba(255,255,255,.75);
    border-radius: 10px;
    animation: tutPulse 1.4s ease-in-out infinite;
  }
  /* 羊的点击区是个透明大方块：改成贴着羊的圆环，别看起来像张卡片 */
  .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(26,26,26,.85), 0 0 0 6px rgba(255,255,255,.75);
    animation: tutPulse 1.4s ease-in-out infinite;
    pointer-events: none;
  }
  /* 光束最亮时，羊身上也亮一下 */
  .sheep.lit img { filter: drop-shadow(0 0 14px rgba(255,214,102,.95)); }

  /* 教程用的"放这里"圈 */
  .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; }
  @keyframes tutPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(26,26,26,.85), 0 0 0 6px rgba(255,255,255,.75); }
    50% { box-shadow: 0 0 0 2px rgba(26,26,26,.3), 0 0 0 6px rgba(255,255,255,.25); }
  }

  /* ================= 反馈 ================= */
  #toast {
    position: absolute; left: 50%; top: 66%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(26,26,26,.92); color: #fff;
    font-size: 13px; padding: 8px 14px; border-radius: 999px;
    opacity: 0; pointer-events: none;
    transition: opacity .18s, transform .18s;
    z-index: 40; max-width: 80%; text-align: center;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* 无效操作反馈：轻微左右摇，替代"点了没反应" */
  @keyframes shakeX {
    0%, 100% { translate: 0; }
    25% { translate: -3px; }
    75% { translate: 3px; }
  }
  .shake { animation: shakeX .18s ease-in-out 2; }

  /* 尊重系统"减少动态效果"：关闭位移/缩放动画，仅保留即时状态变化 */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .ship-fixed { animation: none !important; }
  }