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

  /* ================= 底部托盘 ================= */
  .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="stardust"] .item-ico .fg { fill: #FFD84D; }
  [data-item="ice"] .item-ico .fg { fill: #A8D8E8; }
  [data-item="fungus"] .item-ico .fg { fill: #E89A7A; }
  [data-item="rust"] .item-ico .fg { fill: #C08A5A; }
  [data-item="dew"] .item-ico .fg { fill: #B8DCD4; }
  [data-item="shard"] .item-ico .fg { fill: #B8A898; }
  .chip .item-ico { width: 18px; height: 18px; }
  .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; }

  .chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
  .chip {
    border: 1.5px 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(--white); cursor: pointer;
    touch-action: none;               /* 拖拽放诱饵时不要触发浏览器手势 */
  }
  .chip:active { background: var(--accent-deep); 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: 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: 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; 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-reset { margin: 4px auto 0; color: #8E82A8; }
  #screen-title .t-debug { margin: 0 auto; color: #7E7399; font-size: 11px; min-height: 32px; }
  [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; }
  .pen-tip {
    flex: 0 0 auto; text-align: center;
    font-size: 11px; color: #B9A9D6;
    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(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-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; }
  @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); }
  }

  /* ================= 反馈 ================= */
  #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; }
  }