/* ---------- 垂直切片 · 明亮糖果（B 方向，色值取自羊立绘） ---------- */
  :root {
    --ink: #33241F;
    --ink-2: #6B5346;
    --ink-3: #A08A7A;
    --line: #F0D9C0;
    --line-soft: #F7E8D8;
    --surface: #FFF8EC;
    --surface-2: #FFEFD8;
    --white: #FFFFFF;
    --space: #1B1630;
    --space-2: #2A2150;
    --accent: #FF8A3D;
    --accent-2: #FFD84D;
    --accent-deep: #C9622E;
    --radius: 22px;
    --shadow-1: 0 4px 12px rgba(201,98,46,.14);
    --shadow-2: 0 8px 20px rgba(255,122,46,.32);
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; }
  body {
    background: #F3E2CA;
    color: var(--ink);
    font: 14px/1.5 "PingFang SC", -apple-system, "Helvetica Neue", sans-serif;
    display: flex; align-items: center; justify-content: center;
    /* 长按不要选中文字 / 弹复制菜单：所有手势都留给游戏 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  #app {
    position: relative;
    width: min(100vw, 430px);
    height: min(100vh, 860px);       /* 旧浏览器兜底 */
    height: min(100dvh, 860px);      /* 移动端地址栏收缩时不抖动 */
    background: var(--surface);
    overflow: hidden;
  }
  .screen { position: absolute; inset: 0; display: none; flex-direction: column; }
  .screen.active { display: flex; }

  /* 启动遮罩：脚本没就绪前挡着点击；脚本来就绪后淡出 */
  .boot {
    position: absolute; inset: 0;
    z-index: 50;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    background: var(--space);
    color: #FFE9D6;
    font-size: 13px;
    letter-spacing: .04em;
    transition: opacity .28s ease, visibility .28s;
  }
  .boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
  .boot-spin {
    width: 26px; height: 26px;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: #f0d089;
    border-radius: 50%;
    animation: bootSpin .9s linear infinite;
  }
  @keyframes bootSpin { to { transform: rotate(360deg); } }
  .boot .btn {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.28);
    color: #f2f2f2;
  }

  .topbar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px;
    padding-top: calc(12px + env(safe-area-inset-top));
    background: var(--white);
    box-shadow: 0 2px 10px rgba(201,98,46,.08);
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
  }
  .topbar .title { font-weight: 600; font-size: 15px; }
  .topbar .spacer { flex: 1; }
  .btn {
    border: 0;
    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;
    box-shadow: var(--shadow-1);
    cursor: pointer;
  }
  .btn:active { background: var(--surface-2); box-shadow: none; }
  /* 未解锁的按钮：仍然显示（让玩家知道后面有内容），但明确是灰的、点不动 */
  .btn:disabled { opacity: .45; box-shadow: none; cursor: default; }

  /* ================= 首页：宇宙空间 ================= */
  #screen-home {
    background: radial-gradient(120% 90% at 50% 0%, #33265C 0%, #211A40 50%, #171330 100%);
  }
  .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: #FFF1DD;
    z-index: 8;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(27,22,48,.96) 58%, rgba(27,22,48,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;
    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: #FFF2DE;
    background: none; border: none; padding: 0;
  }
  .planet-node .disc {
    border-radius: 50%;
    border: 2px solid #FFD84D;
    background:
      repeating-linear-gradient(45deg, rgba(255,216,77,.14), rgba(255,216,77,.14) 7px, rgba(255,216,77,.03) 7px, rgba(255,216,77,.03) 16px),
      radial-gradient(circle at 32% 28%, #FFB25C, #C9622E 72%);
    box-shadow: inset -12px -14px 26px rgba(90,30,0,.45), 0 0 0 8px rgba(255,216,77,.08), 0 0 28px rgba(255,138,61,.25);
    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(90,30,0,.5), 0 0 0 12px rgba(255,216,77,.1), 0 0 36px rgba(255,138,61,.3);
  }
  .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-desc {
    font-size: 10px;
    line-height: 1.4;
    color: rgba(255,230,200,.6);
    margin-top: 2px;
    max-width: 132px;
    margin-left: auto;
    margin-right: auto;
  }

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

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

  /* ================= 星球内：球面弧线 ================= */
  /* 飞船 / 火焰 / 牵引口的样式在 styles-screens.css 的「星球页：飞船」一节 */
  /* 只圈住中间的飞船，不要整条横幅 */
  .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: #FFF8EC;
    touch-action: none;
    cursor: grab;
  }
  .surface.dragging { cursor: grabbing; }
  /* 地表浮尘：缓慢横移，为 W5b 的"风向"先做出视觉铺垫 */
  .dust {
    position: absolute;
    inset: 0 -220px 0 0;            /* 右侧多铺一屏，位移时不会露边 */
    pointer-events: none;
    background-image:
      radial-gradient(2px 2px at 22% 28%, rgba(196,150,104,.34) 50%, transparent 51%),
      radial-gradient(1.6px 1.6px at 64% 46%, rgba(196,150,104,.26) 50%, transparent 51%),
      radial-gradient(1.6px 1.6px at 38% 66%, rgba(196,150,104,.22) 50%, transparent 51%),
      radial-gradient(2.4px 2.4px at 82% 18%, rgba(196,150,104,.18) 50%, transparent 51%);
    background-size: 220px 220px;
    animation: dustDrift 18s linear infinite;
    will-change: transform;
  }
  @keyframes dustDrift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-220px, 0, 0); }
  }
  /* 阵风层：warn 时变浓预告 1 秒，on 时快速横移 2.2 秒 */
  .dust-gust {
    position: absolute;
    inset: 0 -140px 0 0;
    pointer-events: none;
    opacity: 0;
    background-image:
      radial-gradient(2px 2px at 18% 24%, rgba(176,124,78,.42) 50%, transparent 51%),
      radial-gradient(1.6px 1.6px at 56% 52%, rgba(176,124,78,.34) 50%, transparent 51%),
      radial-gradient(2.4px 2.4px at 82% 34%, rgba(176,124,78,.3) 50%, transparent 51%),
      radial-gradient(1.6px 1.6px at 34% 72%, rgba(176,124,78,.26) 50%, transparent 51%);
    background-size: 140px 140px;
    transition: opacity .5s ease;
  }
  .dust-gust.warn { opacity: .5; }
  .dust-gust.on { opacity: 1; animation: gustDrift .8s linear infinite; }
  @keyframes gustDrift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-140px, 0, 0); }
  }
  .surface svg.ground { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  /* 景物与地表装饰的样式见 styles-spots.css */
  /* 羊的入口：灰窝。坑口贴住地表弧线，标签放在坑的下方，不再悬空 */
  .den {
    position: absolute; left: 0; top: 0;
    width: 64px; height: 44px;       /* 44 高保证触摸目标；坑落在按钮底边 */
    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; bottom: 0;
    width: 52px; height: 20px; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 30%, #B08A63, #6B4A32 72%);
    box-shadow:
      inset 0 3px 6px rgba(90,50,20,.4),
      0 0 0 3px rgba(217,190,156,.55);   /* 坑口隆起的土沿 */
  }
  /* 坑边的两颗小石子，让灰窝不像纯椭圆 */
  .den-hole::after {
    content: "";
    position: absolute; left: -8px; right: -8px; top: 12px; height: 12px;
    background:
      radial-gradient(circle at 8% 45%, #C09A72 0 3px, transparent 3.5px),
      radial-gradient(circle at 94% 62%, #B08A63 0 2.5px, transparent 3px);
  }
  /* 探头的羊头：直接用羊立绘裁出头部，放在坑的下层，冒出时下半截被坑口挡住。
   * 立绘 256×190，头在左侧约 (78, 92)、宽约 105：放大到 84px 再把头对到容器中心 */
  .den-head {
    position: absolute; left: 15px; bottom: 3px;
    width: 34px; height: 28px;
    overflow: hidden;               /* 只留头部，其余裁掉 */
    transform-origin: 50% 100%;
    transform: translateY(9px) scale(.7);
    opacity: 0;
    filter: drop-shadow(0 2px 2px rgba(110,72,40,.45));   /* 浅色地表上靠影子脱开 */
  }
  .den-head img {
    position: absolute; left: -9px; top: -16px;
    width: 84px; height: auto; max-width: none;
    pointer-events: none;
    -webkit-user-drag: none;
  }
  /* 探头：冒头 → 张望 → 缩回；只露出大半个头，下半截留在洞里 */
  .den.probe .den-head { animation: denProbe .8s ease-in-out; }
  @keyframes denProbe {
    0%   { transform: translateY(9px) scale(.7); opacity: 0; }
    25%  { transform: translateY(-8px) scale(1) rotate(0deg); opacity: 1; }
    45%  { transform: translateY(-8px) scale(1) rotate(-7deg); opacity: 1; }
    65%  { transform: translateY(-8px) scale(1) rotate(7deg); opacity: 1; }
    100% { transform: translateY(9px) scale(.7); opacity: 0; }
  }
  .den-label {
    position: absolute; left: 0; right: 0; top: calc(100% + 1px);
    font-size: 11px; color: var(--ink-3); text-align: center;
    pointer-events: none;
  }
  /* 收齐 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: var(--white);
    border: 1.5px solid var(--accent);
    font-size: 11px; color: var(--ink-2);
    white-space: nowrap;
    cursor: grab;
    touch-action: none;
    z-index: 5;                      /* 压在景物之上，和景物重叠时也能看清 */
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 3px 9px rgba(94,56,38,.22);
    will-change: transform, opacity;
  }
  /* 视觉上保持小胶囊，用伪元素把命中区撑到 44px 以上 */
  .bait::before { content: ""; position: absolute; inset: -11px; }
  .bait.dragging { cursor: grabbing; z-index: 4; border-color: var(--ink); }
  /* 草莓捏开：虚线 + 更淡，表示"不再当诱饵，只留香味" */
  .bait.mode-spread {
    border-style: dashed;
    border-color: var(--accent-2);
    background: rgba(255,248,236,.72);
    color: var(--ink-3);
  }
  /* 锈铁压住：加深，表示"镇住诱饵，让羊吃慢点" */
  .bait.mode-press {
    border-color: var(--ink-2);
    background: var(--surface-2);
    color: var(--ink);
  }

  /* 香味圈：拖拽时跟着手指，放下后亮一下再淡出 */
  .scent {
    position: absolute; left: 0; top: 0;
    border-radius: 50%;
    border: 2px dashed rgba(255,138,61,.72);
    background: radial-gradient(circle, rgba(255,138,61,.16) 0%, rgba(255,138,61,.05) 68%, rgba(255,138,61,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: rgba(201,98,46,.9); }

  .drop-float {
    position: absolute;
    font-size: 13px; font-weight: 600; color: var(--ink);
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
  }
  /* 掉落物：从景物处弹出来的物品图标（配色跟背包共用 data-item 规则） */
  .drop-item {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    z-index: 4;
    filter: drop-shadow(0 3px 5px rgba(120,80,45,.35));
  }
  .drop-item .item-ico { width: 30px; height: 30px; }
  @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%;
  }
  /* 朝向与身体前倾贴在外层，内层 img 的动画不受影响 */
  .sheep .art {
    position: relative;
    display: block;
    transform-origin: 50% 100%;
    transform: scaleX(var(--flip, 1));
    transition: transform .14s ease-out;
  }
  .sheep.walking .art { transform: scaleX(var(--flip, 1)) rotate(3deg); }
  /* 预瞄：羊进入光柱范围时脚下亮一圈，不按飞船也能确认已经对准 */
  .sheep .art::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 16px;
    border-radius: 50%;
    border: 2px dashed rgba(230,160,40,.85);
    background: radial-gradient(ellipse at center, rgba(255,214,102,.28), rgba(255,214,102,0) 70%);
    opacity: 0;
    transform: scale(.88);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
  }
  .sheep.aimed .art::after { opacity: 1; transform: scale(1); }
  /* 光柱落点光环：不管有没有对准都会出现，填满一圈 = 峰值 = 可以松手
   * 圈里有羊 → 金色锁定；没羊 → 灰色（一眼看出"还没对准"） */
  .beam-ring {
    position: absolute;
    width: 132px; height: 132px;
    margin: -66px 0 0 -66px;
    border-radius: 50%;
    transform: scaleY(.42);
    /* 四层叠加（先写的在上层）：白色提亮 → 变蓝 → 已填部分加深 → 灰/金底色。
     * 加深层必须压在蓝色下面，否则命中区的蓝会被一层棕色糊住 */
    background:
      conic-gradient(from 180deg, rgba(255,255,255,var(--glow, 0)) 0 100%),
      conic-gradient(from 180deg, rgba(120,200,255,var(--hit, 0)) 0 100%),
      conic-gradient(from 180deg,
        rgba(94,56,38, var(--shade, 0)) 0deg calc(var(--p, 0) * 360deg),
        transparent calc(var(--p, 0) * 360deg) 360deg),
      conic-gradient(from 180deg,
        var(--ring, rgba(255,230,175,.95)) calc(var(--p, 0) * 360deg),
        rgba(94,56,38,.18) 0);
    /* 环带做厚一点：浅色地表上细线根本看不出进度 */
    -webkit-mask-image: radial-gradient(closest-side, transparent 76%, #000 82%);
    mask-image: radial-gradient(closest-side, transparent 76%, #000 82%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .12s ease;
  }
  .beam-ring.on { opacity: 1; }
  .beam-ring.locked { --ring: rgba(255,196,80,.98); }
  /* 命中区：环上最后一段预先画成蓝色（--hit-from 由 JS 按星球难度写）。
   * 只有被填充扫过的部分（到 --hit-to）才点亮，后面的保持暗蓝——
   * 这样标记是"跟着进度一段段亮起来"，不是整段一起亮 */
  .beam-ring::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 180deg,
      transparent 0deg var(--hit-from, 306deg),
      rgba(215,247,255,.98) var(--hit-from, 306deg) var(--hit-to, 306deg),
      rgba(120,200,255,.42) var(--hit-to, 306deg) 360deg);
    -webkit-mask-image: radial-gradient(closest-side, transparent 76%, #000 82%);
    mask-image: radial-gradient(closest-side, transparent 76%, #000 82%);
    pointer-events: none;
  }
  /* 填充快转到命中区时，未扫过的那段也亮一档，做预告 */
  .beam-ring.near::after {
    background: conic-gradient(from 180deg,
      transparent 0deg var(--hit-from, 306deg),
      rgba(230,250,255,1) var(--hit-from, 306deg) var(--hit-to, 306deg),
      rgba(150,220,255,.62) var(--hit-to, 306deg) 360deg);
  }
  .beam-ring.warn { animation: ringWarn .2s ease-out; }
  @keyframes ringWarn {
    0%, 100% { transform: scaleY(.42) scale(1); }
    50% { transform: scaleY(.42) scale(1.1); }
  }
  /* 蓄能时藏起虚线瞄准圈，只留落点光环，避免两个圈抢注意力 */
  .sheep.charging .art::after { opacity: 0; }
  .sheep img {
    display: block;
    width: 92px; height: auto;
    aspect-ratio: 256 / 190;        /* 图片未加载时也预留高度，避免点击区先塌陷 */
    object-fit: contain;            /* 各羊立绘比例略有差异，contain 保证不变形 */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
    transform-origin: 50% 100%;       /* 所有形变都锚在脚底，挤压/呼吸才像踩在地上 */
    will-change: transform;
    animation: sheepIdle 1.8s ease-in-out infinite;
  }
  /* 静止：脚底锚定的呼吸，幅度 ≤2%，和走路互斥 */
  @keyframes sheepIdle {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    50% { transform: translateY(-1px) scale(0.994, 1.012); }
  }
  /* 走路：落地挤压 / 腾空拉伸（0.36s 对应 12°/s 的步速） */
  .sheep.walking img { animation: sheepWalk .36s ease-in-out infinite; }
  @keyframes sheepWalk {
    0%, 100% { transform: translateY(0) scale(1.025, 0.97) rotate(0deg); }
    25% { transform: translateY(-6px) scale(0.99, 1.02) rotate(-2.5deg); }
    50% { transform: translateY(0) scale(1.025, 0.97) rotate(0deg); }
    75% { transform: translateY(-4px) scale(0.99, 1.02) rotate(2deg); }
  }

  /* 进食进度条：吃完羊就走，这就是还能收走它的窗口 */
  .feed-bar {
    position: absolute;
    left: 50%; top: -6px;
    width: 58px; height: 5px; margin-left: -29px;
    border-radius: 999px;
    background: rgba(26,26,26,.32);
    box-shadow: 0 0 0 1px rgba(255,255,255,.6);
    overflow: hidden;
    display: none;
    pointer-events: none;
  }
  .sheep.feeding .feed-bar { display: block; }
  .feed-bar i {
    display: block; width: 100%; height: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, #ffd166, #ffa53d);
  }
  /* 最后 30% 转红：它快吃完了 */
  .feed-bar.hurry i { background: linear-gradient(90deg, #ff8a5c, #ee4b3c); }
  /* 进食时低头一口一口吃（被光照亮时发抖优先，见下方 tremble） */
  .sheep.feeding img { animation: sheepEat .9s ease-in-out infinite; }
  @keyframes sheepEat {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    30% { transform: translateY(2px) rotate(-3deg) scale(1.01, 0.98); }
    60% { transform: translateY(1px) rotate(2deg) scale(1.005, 0.99); }
  }
  /* 吃完 / 受惊跑走：原地留一团静态烟尘（不做位移，慢慢淡出）
   * 形似"近端浓、尾巴渐隐"，尾巴方向就是羊跑走的反方向 */
  .flee-dust {
    position: absolute;
    height: 30px;
    pointer-events: none;
    z-index: 3;
    filter: blur(2px);
    opacity: 0;
    animation: dustFade 1.8s ease-out forwards;
  }
  .flee-dust.right {
    background: linear-gradient(270deg,
      rgba(140,94,56,.7) 0%,
      rgba(148,102,64,.28) 48%,
      rgba(148,102,64,0) 100%);
  }
  .flee-dust.left {
    background: linear-gradient(90deg,
      rgba(140,94,56,.7) 0%,
      rgba(148,102,64,.28) 48%,
      rgba(148,102,64,0) 100%);
  }
  /* 羊脚下那团云 + 尾段一小团：让烟尘有"团"的体积，不只是一条渐变 */
  .flee-dust::after {
    content: "";
    position: absolute; top: -12px;
    width: 74px; height: 52px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
      rgba(140,94,56,.7) 0%,
      rgba(148,102,64,.34) 55%,
      rgba(148,102,64,0) 78%);
  }
  .flee-dust::before {
    content: "";
    position: absolute; top: 2px;
    width: 36px; height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
      rgba(148,102,64,.34) 0%,
      rgba(148,102,64,0) 72%);
  }
  .flee-dust.right::after { right: -22px; }
  .flee-dust.left::after { left: -22px; }
  .flee-dust.right::before { right: 42px; }
  .flee-dust.left::before { left: 42px; }
  @keyframes dustFade {
    0% { opacity: .95; }
    30% { opacity: .85; }
    100% { opacity: 0; }
  }

  /* 几片落叶：从羊的位置边转边飘落 */
  .flee-leaf {
    position: absolute;
    width: 12px; height: 16px;
    border-radius: 0 72% 0 72%;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    box-shadow: inset 0 0 0 1px rgba(110,60,15,.22);
    animation: leafFall var(--dur, 1.4s) cubic-bezier(.25,.4,.6,1) forwards;
    animation-delay: var(--delay, 0ms);
  }
  @keyframes leafFall {
    0% { opacity: 0; transform: translate3d(0, -4px, 0) rotate(0deg) scale(.8); }
    12% { opacity: 1; }
    55% { opacity: 1; transform: translate3d(calc(var(--lx) * .6), calc(var(--ly) * .55), 0) rotate(calc(var(--rot) * .55)) scale(1); }
    100% { opacity: 0; transform: translate3d(var(--lx), var(--ly), 0) rotate(var(--rot)) scale(.9); }
  }

  /* 抓住了才发抖（松手成功后的 0.4s）；按住期间只是被照亮，不抖 */
  .sheep.tremble img { animation: sheepTremble .18s ease-in-out 3; }
  /* 走路时被翻找声惊到：抬头停一下 */
  .sheep.startled img { animation: sheepStartle .36s ease-out; }
  /* 被惊：向上拉伸 → 落地挤压 → 回正（squash & stretch） */
  @keyframes sheepStartle {
    0% { transform: translateY(0) scale(1, 1); }
    30% { transform: translateY(-9px) scale(0.94, 1.06); }
    65% { transform: translateY(1px) scale(1.05, 0.95); }
    100% { transform: translateY(0) scale(1, 1); }
  }
  @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); }
  }

  /* 收羊失败后的冷却提示：明确告诉玩家"过一会儿还能再来" */
  .scare-notice {
    position: absolute; left: 10px; top: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(94,56,38,.84);
    color: #FFF1DD;
    font-size: 12px; white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    animation: noticeIn .2s ease-out;
  }
  .scare-notice.done { background: rgba(84,140,70,.9); }
  @keyframes noticeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* 飞船投下的牵引光束：暖金色锥体
   * 底宽 132px 与判定 BEAM.aimHalfWidth=66 对齐：看到罩住就一定收得到 */
  .beam {
    position: absolute; top: 0;
    width: 132px; margin-left: -66px;
    transform-origin: top center;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    clip-path: polygon(45% 0%, 55% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(180deg,
      rgba(255,240,190,.95) 0%,
      rgba(255,214,102,.58) 40%,
      rgba(255,186,58,.16) 100%);
    filter: drop-shadow(0 0 12px rgba(255,196,80,.75));
    transition: opacity .22s ease-out, filter .2s ease-out;
  }
  /* 命中区逐渐盖上的冷色层：--hit 0→1 就是"变蓝"的进度 */
  .beam-cool {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(240,252,255,.98) 0%,
      rgba(150,222,255,.72) 40%,
      rgba(86,180,255,.22) 100%);
    opacity: var(--hit, 0);
    pointer-events: none;
  }
  /* 向上流动的能量纹 */
  .beam::before {
    content: "";
    position: absolute; inset: -30px 0 0 0;
    background: repeating-linear-gradient(180deg,
      rgba(255,255,255,0) 0 12px,
      rgba(255,255,240,.42) 12px 16px,
      rgba(255,255,255,0) 16px 30px);
    animation: beamFlow .6s linear infinite;
  }
  @keyframes beamFlow {
    from { transform: translateY(0); }
    to { transform: translateY(-30px); }
  }
  /* 中央亮带：让光束有"核心" */
  .beam::after {
    content: "";
    position: absolute; top: 0; bottom: 0;
    left: 50%; width: 30px; margin-left: -15px;
    background: linear-gradient(90deg,
      rgba(255,255,240,0) 0%,
      rgba(255,255,245,.8) 50%,
      rgba(255,255,240,0) 100%);
    filter: blur(2px);
  }
  .beam.on { transform: scaleY(1); opacity: 1; }
  /* 进入命中区：外发光转冷；柱体的蓝色由 .beam-cool 的 --hit 逐渐盖上来 */
  .beam.peak {
    filter: drop-shadow(0 0 24px rgba(140,215,255,.95)) brightness(1.18);
  }

  /* 沿光束上升的碎光粒子 */
  .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; }
  }

  /* 页面级样式（托盘 / 图鉴 / 物品 / 标题 / 剧情 / 羊圈 / 引导 / 反馈）见 styles-screens.css */