/* 页面级样式：托盘 / 图鉴 / 物品 / 标题 / 剧情 / 羊圈 / 引导 / 反馈
 * 依赖 styles.css 里的 :root token，必须在其后加载。
 */

  /* ================= 星球页：飞船与火焰 =================
   * 飞船、火焰、牵引口共用同一个 rig（宽高与 SVG 一致），
   * 这样火焰一定挂在推进器口上，光柱也一定从船体正中落下 */
  .sky-ship {
    position: relative;
    z-index: 2;                      /* 火焰会稍微溢出到地表上，不能被地表盖住 */
    flex: 0 0 auto; display: flex; justify-content: center;
    padding: 6px 0 0;
    background: #FFF8EC;
    touch-action: none;              /* 长按蓄能时不要触发浏览器手势 */
    cursor: grab;
  }
  .sky-ship:active { cursor: grabbing; }
  .ship-rig {
    position: relative;
    width: 96px; height: 61px;       /* viewBox 120×76 按 96 宽等比缩放 */
    pointer-events: none;
  }
  .ship-art { display: block; width: 96px; height: auto; }
  /* 喷口火焰：从左右推进器口往下喷，长度由 JS 写 --jet（scaleY）
   * 底部渐隐到全透明，不会被元素边界切平；星球页与星域共用同一套外观 */
  .jet, .home-jet {
    position: absolute; top: 47px;
    width: 18px; height: 30px;
    border-radius: 50% 50% 46% 46% / 34% 34% 66% 66%;
    background: linear-gradient(180deg,
      #fff8d6 0%, #ffd166 34%, #ff8a3d 66%, rgba(255,110,50,0) 100%);
    filter: blur(.6px) drop-shadow(0 0 8px rgba(255,150,60,.65));
    transform-origin: 50% 0%;
    transform: rotate(var(--tilt, 0deg)) scaleY(var(--jet, .38));
    opacity: .6;
    will-change: transform, opacity;
  }
  .jet-l { left: 23px; --tilt: 9deg; }
  .jet-r { left: 55px; --tilt: -9deg; }
  /* 星域飞船宽 92（星球页 rig 96）：火焰按实际推进器口微调；
     滚动结束没有逐帧写入，所以用 transition 平滑收回悬停火苗 */
  .home-jet { transition: transform .2s ease-out, opacity .2s ease-out; }
  .home-jet-l { left: 21px; --tilt: 7deg; }
  .home-jet-r { left: 53px; --tilt: -7deg; }
  /* 火焰跳动：小幅度忽长忽短，别像一根棍子 */
  .jet.firing, .home-jet.firing { animation: jetFlicker .16s steps(2) infinite; }
  @keyframes jetFlicker {
    0% { filter: blur(.6px) drop-shadow(0 0 8px rgba(255,150,60,.7)) brightness(1); }
    100% { filter: blur(.9px) drop-shadow(0 0 12px rgba(255,170,70,.9)) brightness(1.12); }
  }
  /* 船底牵引口到光柱之间的过渡光：让船和光柱连成一条，不留缝 */
  .ship-emitter {
    position: absolute; left: 50%; top: 44px;
    width: 14px; height: 26px; margin-left: -7px;
    border-radius: 50%;
    background: linear-gradient(180deg,
      rgba(255,233,198,.95) 0%, rgba(255,214,140,.5) 45%, rgba(255,214,140,0) 100%);
    filter: blur(2px);
    pointer-events: none;
  }

  /* ================= 底部托盘 ================= */
  .tray {
    flex: 0 0 auto;
    background: var(--white);
    box-shadow: 0 -4px 14px rgba(201,98,46,.08);
    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); }
  /* ---------- 物品图标：内联 SVG，按物品换主色 ---------- */
  .item-ico { width: 20px; height: 20px; flex: 0 0 auto; }
  .item-ico .fg { fill: #E8C9A8; }
  .item-ico .ln {
    fill: none; stroke: #7A5232; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
  }
  [data-item="strawberry"] .item-ico .fg { fill: #E8607A; }
  [data-item="dandelion"] .item-ico .fg { fill: #F2D9A0; }
  [data-item="ice"] .item-ico .fg { fill: #A8D8E8; }
  [data-item="snow"] .item-ico .fg { fill: #DCEFF6; }
  [data-item="mushroom"] .item-ico .fg { fill: #E89A7A; }
  [data-item="dew"] .item-ico .fg { fill: #B8DCD4; }
  [data-item="rust"] .item-ico .fg { fill: #C08A5A; }
  [data-item="sandthorn"] .item-ico .fg { fill: #E2A54E; }
  [data-item="mist"] .item-ico .fg { fill: #C4D8DE; }
  [data-item="moss"] .item-ico .fg { fill: #8FB87A; }
  [data-item="shard"] .item-ico .fg { fill: #B8A898; }
  [data-item="aurora"] .item-ico .fg { fill: #9FE0C4; }
  [data-item="starlight"] .item-ico .fg { fill: #FFD84D; }
  .chip .item-ico { width: 20px; height: 20px; }
  .slot .item-ico { width: 20px; height: 20px; }
  .bait .item-ico { width: 14px; height: 14px; }
  /* 图标 + 名称的横排（物品图鉴 / 拖拽替身 / 首获介绍卡） */
  .di-head, .dg-head, .ii-head { display: flex; align-items: center; gap: 6px; }
  .item-intro .ii-head { margin-top: 2px; }
  .item-intro .ii-head .ii-name { margin-top: 0; }
  /* 拖拽替身是深色底，图标描边换成暖白 */
  .drag-ghost .item-ico .ln { stroke: #FFE9C6; }

  /* 背包物品：小方块瓷贴（图标 + 名字 + 数量角标）。
   * 13 种物品用胶囊会占三四行，把地表压得很矮；46px 方块 7 个一行、最多两行 */
  .chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; }
  .chip {
    position: relative;
    flex: 0 0 auto;
    width: 46px; min-height: 46px;
    padding: 2px 2px 3px;
    flex-direction: column; justify-content: center; gap: 0;
    border: 1.5px solid var(--line); border-radius: 13px;
    font-size: 10px; line-height: 1.15;
    display: inline-flex; align-items: center;
    background: var(--white); cursor: pointer;
    touch-action: none;               /* 拖拽放诱饵时不要触发浏览器手势 */
    overflow: hidden;
  }
  .chip:active { background: var(--accent-deep); color: #fff; }
  .chip-name {
    max-width: 42px;
    color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 数量角标：贴右上角，白描边保证压在地表 / 图标上也能读 */
  .chip-n {
    position: absolute; top: 1px; right: 3px;
    font-size: 10px; font-weight: 700; line-height: 1;
    color: var(--accent-deep);
    text-shadow: 0 1px 0 #fff, 0 0 3px #fff;
  }
  .chip:active .chip-name,
  .chip:active .chip-n { color: #fff; text-shadow: none; }
  /* 拖拽中的物品替身：名字 + 一句话说明 */
  .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; align-self: center; }
  .slots { display: flex; gap: 8px; margin-top: 8px; }
  .slot {
    flex: 1; height: 46px;
    border: 1.5px dashed var(--line);
    border-radius: 16px;
    background: var(--surface-2);
    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(--accent); color: var(--ink); background: var(--white); }
  .slot:disabled { cursor: default; }
  .recipe-hint { margin-top: 6px; font-size: 11px; color: var(--ink-2); }

  /* ================= 图鉴 ================= */
  .dex-list { flex: 1; overflow-y: auto; padding: 12px 12px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
  /* 星球分组头：跨两列，帮玩家先定位"现在这颗星球" */
  .dex-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 2px 8px;
    margin: 14px 2px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
  }
  .dex-group:first-child { margin-top: 0; }
  .dex-group .dg-name { font-size: 13px; font-weight: 600; }
  .dex-group .dg-count { font-size: 11px; color: var(--ink-3); }
  .dex-group .dg-desc { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); line-height: 1.4; }
  .dex-group .dg-now {
    margin-left: 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--ink);
    border: 1px solid var(--ink-3);
    border-radius: 999px;
    padding: 1px 6px;
    vertical-align: 1px;
  }
  .dex-group.here { border-bottom-color: var(--ink-3); }
  .dex-card { border: 0; border-radius: 20px; background: var(--white); padding: 12px; box-shadow: var(--shadow-1); }
  .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 { box-shadow: 0 0 0 1.5px var(--accent-2), var(--shadow-1); }
  .dex-card .d-sheep { opacity: .25; }
  .dex-card.got .d-sheep { opacity: 1; }
  /* 图鉴立绘：固定 92×68 的框，contain 不裁切，每只羊占位一致（不随原图比例跳） */
  .d-art {
    display: block;
    width: 92px; height: 68px;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
  }
  /* 没抓到的羊：只留剪影 */
  .silhouette { filter: brightness(0); opacity: .3; }
  .dex-card.locked { border: 1.5px dashed var(--line); box-shadow: none; }
  .dex-card.locked .d-sheep { opacity: 1; }
  .dex-card.locked .d-name { color: var(--ink-3); font-weight: 500; }
  .dex-card .d-hint {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 6px;
    line-height: 1.45;
  }
  .dex-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ink-3);
    font-size: 12px;
    line-height: 1.9;
    padding: 56px 0;
  }

  /* 物品说明（独立页） */
  .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: 0; border-radius: 20px;
    background: var(--white); padding: 12px;
    box-shadow: var(--shadow-1);
  }
  .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; }
  /* 未发现的物品：灰色问号占位，保持卡片视觉平衡 */
  .dex-item.locked .di-name { display: flex; align-items: center; gap: 6px; }
  .dex-item.locked .di-name::before {
    content: "?";
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--line-soft);
    color: var(--ink-3);
    font-size: 12px; font-weight: 600;
  }

  /* 首次获得物品的介绍卡：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: 0;
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow-2);
    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%, #2A2150 0%, #171330 72%);
    color: #FFF1DD;
    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: #B9A9D6; }
  .t-logo { font-size: 40px; font-weight: 600; letter-spacing: .12em; margin-top: 14px; color: #FFD84D; }
  .t-sub { font-size: 13px; color: #C9BEE0; margin-top: 10px; }
  .t-progress { font-size: 12px; color: #B9A9D6; 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,.08);
    color: #FFF1DD;
    box-shadow: none;
  }
  #screen-title .btn:active { background: rgba(255,255,255,.16); }
  #screen-title .btn-primary {
    background: linear-gradient(180deg, #FF9B4D, #FF7A2E);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(255,122,46,.35);
  }
  #screen-title .btn.locked { opacity: .55; }
  #screen-title .t-debug { margin: 0 auto; color: #7E7399; font-size: 11px; min-height: 32px; }
  /* 声音开关：整行按钮 + 右侧拨动开关，状态一眼可见 */
  #screen-title .sound-btn {
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px 10px 14px;
  }
  #screen-title .sound-btn .sound-ico { display: inline-flex; color: #FFD84D; }
  #screen-title .sound-btn .sound-text { flex: 1; text-align: left; font-size: 13px; }
  #screen-title .sound-btn .sound-slash { opacity: 0; }
  #screen-title .sound-btn .sound-pill {
    flex: 0 0 auto; position: relative;
    width: 40px; height: 22px; border-radius: 999px;
    background: #FFD84D;
    transition: background .16s ease;
  }
  #screen-title .sound-btn .sound-pill i {
    position: absolute; top: 2px; left: 20px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #2A2150;
    transition: left .16s ease, background .16s ease;
  }
  #screen-title .sound-btn.off { opacity: .72; }
  #screen-title .sound-btn.off .sound-ico { color: #C9BEE0; }
  #screen-title .sound-btn.off .sound-slash { opacity: 1; }
  #screen-title .sound-btn.off .sound-pill { background: rgba(255,241,221,.28); }
  #screen-title .sound-btn.off .sound-pill i { left: 2px; background: #FFF1DD; }
  [hidden] { display: none !important; }

  /* ================= 剧情 ================= */
  #screen-story { background: #1B1630; color: #F2E9DC; }
  .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: #fff; background: var(--accent);
    padding: 5px 10px; border-radius: 999px;
  }
  .story-head .link-btn { color: #B9A9D6; }
  .story-text { flex: 1; overflow-y: auto; margin-top: 16px; }
  .story-line {
    margin: 0 0 12px;
    font-size: 15px; line-height: 1.75; color: #F2E9DC;
    animation: storyIn .22s ease-out;
  }
  .story-line.story-guide {
    color: #D9CFF0; font-size: 14px;
    background: rgba(255,255,255,.06);
    border-left: 2px solid var(--accent-2);
    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: #B9A9D6; padding-top: 10px; }

  /* ================= 羊圈 ================= */
  #screen-pen { background: #14102A; }
  .pen-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .pen-stage canvas { display: block; touch-action: none; }   /* 拖动羊时不要触发页面滚动 */
  .pen-tip {
    flex: 0 0 auto; text-align: center;
    font-size: 11px; color: #B9A9D6;
    padding: 8px 14px calc(12px + env(safe-area-inset-bottom));
  }

  /* ================= 测试入口 ================= */
  .test-list {
    flex: 1; overflow-y: auto;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 10px;
  }
  .test-card {
    display: flex; flex-direction: column; gap: 4px;
    text-align: left;
    padding: 14px 16px;
    min-height: 62px;
    border-radius: 18px;
    border: 1.5px solid var(--line);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
  }
  .test-card:active { background: var(--surface-2); }
  .test-card .tc-name { font-size: 14px; font-weight: 600; }
  .test-card .tc-desc { font-size: 11px; line-height: 1.55; color: var(--ink-3); }
  /* 测试页的快捷操作：重置 / 收齐 / 清除记录 */
  .test-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
  .test-mini {
    min-height: 44px; border-radius: 14px;
    border: 1.5px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
  }
  .test-mini:active { background: var(--surface-2); }
  .test-mini.danger { color: #C0392B; border-color: rgba(192,57,43,.35); }
  .test-note { margin: 8px 4px 0; font-size: 11px; line-height: 1.6; color: var(--ink-3); }
  /* 测试场景的悬浮重置：只在测试模式的星球 / 羊圈等场景里出现，
     放在 topbar 下方右上角，避开飞船、背包与收羊弹窗 */
  .test-float {
    position: absolute; right: 12px;
    top: calc(62px + env(safe-area-inset-top));
    z-index: 55;                        /* 高于场景 UI，低于收羊展示（60） */
    min-height: 44px;                   /* 触摸目标 ≥ 44px */
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.7);
    background: rgba(27,22,48,.86);
    color: #FFF1DD;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .test-float[hidden] { display: none; }
  .test-float:active { transform: translateY(1px); background: rgba(27,22,48,.96); }

  /* ================= 收羊展示：放射金光 ================= */
  .reveal {
    position: absolute; inset: 0;
    z-index: 60;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,16,36,.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .2s ease;
  }
  .reveal[hidden] { display: none; }
  .reveal.on { opacity: 1; }
  .reveal-card {
    position: relative;
    width: 258px;
    padding: 26px 20px 18px;
    border-radius: 26px;
    text-align: center;
    background: radial-gradient(circle at 50% 32%, #3A2E66 0%, #241C44 70%);
    border: 1px solid rgba(255,214,102,.34);
    box-shadow: 0 18px 50px rgba(0,0,0,.42), 0 0 0 6px rgba(255,214,102,.08);
    opacity: 0;                                  /* 过场音乐期间卡片藏着 */
    transform: translateY(10px) scale(.96);
    transition: transform .26s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
  }
  .reveal.show .reveal-card { opacity: 1; transform: translateY(0) scale(1); }
  /* 放射金光：一圈金色光条慢转 + 中心光晕 */
  .reveal-rays {
    position: absolute; left: 50%; top: 96px;
    width: 300px; height: 300px;
    margin: -150px 0 0 -150px;
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(255,236,170,.9) 0%, rgba(255,214,102,.34) 36%, rgba(255,214,102,0) 66%),
      repeating-conic-gradient(from 0deg,
        rgba(255,214,102,.55) 0deg 6deg,
        rgba(255,214,102,0) 6deg 24deg);
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    animation: raysSpin 10s linear infinite;
    pointer-events: none;
  }
  @keyframes raysSpin { to { transform: rotate(360deg); } }
  .reveal-art {
    position: relative;
    z-index: 1;
    width: 132px; height: auto;
    aspect-ratio: 256 / 190;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(255,214,102,.95)) drop-shadow(0 0 40px rgba(255,190,60,.5));
    pointer-events: none;
  }
  /* 每次展示都重新播放入场动画 */
  .reveal.show .reveal-art { animation: revealPop .46s cubic-bezier(.2,1.35,.4,1) both; }
  @keyframes revealPop {
    0% { transform: scale(.35); opacity: 0; }
    62% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .reveal-name {
    position: relative; z-index: 1;
    margin-top: 4px;
    font-size: 21px; font-weight: 700; letter-spacing: .04em;
    color: #FFF1DD;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
  .reveal-sub {
    position: relative; z-index: 1;
    margin-top: 2px;
    font-size: 11px; letter-spacing: .22em;
    color: #F0C87A;
  }
  .reveal-btn {
    position: relative; z-index: 1;
    width: 100%; height: 46px;
    margin-top: 16px;
    border: 0; border-radius: 999px;
    background: linear-gradient(180deg, #FFD166, #FFA53D);
    color: #5E3826;
    font-size: 15px; font-weight: 700; letter-spacing: .04em;
    box-shadow: 0 6px 16px rgba(255,140,60,.4);
    cursor: pointer;
  }
  .reveal-btn:active { transform: translateY(1px) scale(.99); }
  .reveal-btn:focus { outline: none; }
  .reveal-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 6px 16px rgba(255,140,60,.4);
  }
  /* 过场：卡片出现前，中心先有一团金色光晕在蓄力 */
  #capture-reveal.on:not(.show)::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 230px; height: 230px;
    margin: -115px 0 0 -115px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,214,102,.4), rgba(255,214,102,0) 68%);
    animation: revealCharge .68s ease-out forwards;
    pointer-events: none;
  }
  @keyframes revealCharge {
    0% { opacity: 0; transform: scale(.5); }
    70% { opacity: .95; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.18); }
  }
  .reveal-hint {
    position: relative; z-index: 1;
    margin-top: 8px;
    font-size: 10px; color: rgba(255,241,221,.5);
  }
  /* 收入瞬间：卡片内容淡出，只留下羊飞向图鉴 */
  .reveal.flying .reveal-card {
    box-shadow: 0 0 0 0 rgba(255,214,102,0);
    border-color: rgba(255,214,102,0);
    background: transparent;
  }
  .reveal.flying .reveal-rays,
  .reveal.flying .reveal-name,
  .reveal.flying .reveal-sub,
  .reveal.flying .reveal-btn,
  .reveal.flying .reveal-hint {
    opacity: 0;
    transition: opacity .16s ease;
  }

  /* 收齐 13 只：羊圈开门卡片 */
  .pen-card { width: 276px; }
  .pen-card .reveal-rays { top: 76px; opacity: .82; }
  .pen-card .reveal-name { font-size: 22px; margin-top: 2px; }
  /* 一个简单的栅栏图标 */
  .pen-lock {
    position: relative;
    width: 92px; height: 42px;
    margin: 0 auto 8px;
    border: 3px solid rgba(255,214,102,.85);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    z-index: 1;
  }
  .pen-lock::before,
  .pen-lock::after {
    content: "";
    position: absolute; left: -9px; right: -9px;
    height: 2px;
    background: rgba(255,214,102,.62);
  }
  .pen-lock::before { top: 12px; }
  .pen-lock::after { top: 27px; }
  .pen-text {
    position: relative; z-index: 1;
    margin-top: 8px;
    font-size: 12px; line-height: 1.7;
    color: rgba(255,241,221,.82);
  }
  .pen-later {
    position: relative; z-index: 1;
    display: block;
    margin: 8px auto 0;
    color: rgba(255,241,221,.5);
    font-size: 11px;
  }

  /* 图鉴抖一抖：把"已收入"落到按钮上，顺手引导去看 */
  .btn.dex-bump { animation: dexBump .6s cubic-bezier(.3,1.4,.4,1); }
  @keyframes dexBump {
    0% { transform: scale(1); }
    25% { transform: scale(1.16) rotate(-4deg); }
    45% { transform: scale(.96) rotate(3deg); }
    65% { transform: scale(1.08) rotate(-2deg); }
    100% { transform: scale(1) rotate(0); }
  }
  .dex-count-pop { display: inline-block; animation: dexCountPop .55s ease-out; }
  @keyframes dexCountPop {
    0% { transform: scale(1); color: var(--ink); }
    35% { transform: scale(1.5); color: #D9821F; }
    100% { transform: scale(1); color: var(--ink); }
  }

  /* ================= 反馈 ================= */
  #toast {
    position: absolute; left: 50%; top: 66%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(27,22,48,.94); color: #FFF6E8;
    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; }
  }