#screen-dex, #screen-test { padding-top: calc(58px + env(safe-area-inset-top)); }

  .dex-tabs { flex: 0 0 auto; display: flex; gap: 6px; padding: 0 12px 10px; }
  .dex-tab {
    flex: 1;
    min-height: 40px;
    padding: 0 8px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, .55);
    color: var(--ink-2);
    font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer;
  }
  .dex-tab.active {
    background: var(--white);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--shadow-1);
  }
  .dt-count {
    min-width: 22px; height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(201, 98, 46, .1);
    color: var(--ink-2);
    font-size: 11px; font-weight: 600; line-height: 20px;
    text-align: center;
  }
  .dex-tab.active .dt-count { background: var(--accent-2); color: var(--ink); }
  .dex-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }

  .dex-list { flex: 1; overflow-y: auto; padding: 6px 12px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
  .dex-card {
    width: 100%;
    border: 0; border-radius: 20px;
    background: var(--white);
    padding: 12px;
    box-shadow: var(--shadow-1);
    font: inherit; color: var(--ink);
    text-align: center;
    -webkit-appearance: none; appearance: none;
    cursor: pointer;
  }
  .dex-card:active { background: #FFF3D6; }
  .dex-card .d-sheep { display: block; }
  .dex-card .d-name { display: block; font-weight: 600; font-size: 13px; text-align: center; }
  .dex-card .d-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
  .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; }
  .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-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ink-3);
    font-size: 12px;
    line-height: 1.9;
    padding: 56px 0;
  }

  .dex-zoom {
    position: absolute; inset: 0;
    z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: calc(12px + env(safe-area-inset-top)) max(16px, 4vw) calc(12px + env(safe-area-inset-bottom));
    background: rgba(38, 24, 16, .55);
    opacity: 0;
    transition: opacity .15s ease;   /* 开合都走轻量淡入淡出 */
  }
  .dex-zoom[hidden] { display: none; }
  .dex-zoom.open { opacity: 1; }
  .dex-zoom:not(.open) { pointer-events: none; }
  .dz-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    overflow-y: auto;
    padding: 50px 16px 18px;        /* 顶部留出关闭按钮的位置，避免压住立绘 */
    border-radius: 24px;
    background: var(--white);
    box-shadow: var(--shadow-2);
    text-align: center;
    transform: scale(.97);
    transition: transform .15s ease;
  }
  .dex-zoom.open .dz-card { transform: scale(1); }
  @media (prefers-reduced-motion: reduce) {
    .dex-zoom, .dz-card { transition: none; }
  }
  #dex-zoom .dz-card { background: #FFF6D2; }
  #dex-zoom .dz-close { color: var(--ink-2); }
  .dz-close {
    position: absolute; top: 4px; right: 4px;
    display: grid; place-items: center;
    width: 44px; height: 44px; min-height: 44px;
    margin: 0; padding: 0;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    z-index: 1;
  }
  .dz-close:active { background: var(--surface-2); color: var(--ink); }
  .dz-art { position: relative; display: flex; justify-content: center; }
  .dz-art .d-art {
    width: min(78vw, 100%);
    height: auto;                   /* 跟随原图比例，避免 13/14 号羊被旧比例轻微拉伸 */
    margin: 0;
  }
  /* 高清立绘加载进度：覆盖在立绘底部，不占布局高度 */
  .dz-progress {
    position: absolute; left: 11%; right: 11%; bottom: 6px;
    height: 5px; border-radius: 999px; overflow: hidden;
    background: rgba(94, 56, 38, .16);
  }
  .dz-progress[hidden] { display: none; }
  .dz-progress i {
    display: block; height: 100%; width: 0;
    border-radius: inherit;
    background: var(--accent-deep, #C9862F);
    transition: width .12s linear;
  }
  /* 服务端未给 content-length 时退化为不确定进度动画 */
  .dz-progress.indeterminate i {
    width: 38%;
    animation: dzProgressSlide 1.1s ease-in-out infinite;
  }
  @keyframes dzProgressSlide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(300%); }
  }
  .dz-name { margin-top: 10px; font-size: 21px; font-weight: 600; }
  .dz-desc { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }

  .item-list {
    flex: 1; overflow-y: auto;
    padding: 6px 12px 28px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-content: start;
  }
  .item-list .dex-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    min-height: 74px;
    padding: 8px 2px 7px;
    border: 0; border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-1);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
  }
  .item-list .di-ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
  .item-list .di-ico .item-ico { width: 32px; height: 32px; }
  .item-list .di-name { font-size: 10px; font-weight: 600; line-height: 1.15; text-align: center; }
  .item-list .di-from {
    display: inline-flex; align-items: center; gap: 3px;
    max-width: 100%;
    font-size: 9px; font-weight: 500; line-height: 1.1;
    color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .di-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(74, 42, 24, .12); }
  .item-list .dex-item:active { background: #fff3d6; }
  .item-list .dex-item.locked {
    border: 1.5px dashed var(--line);
    box-shadow: none;
    background: var(--surface-2);
    cursor: default;
  }
  .dex-item.locked .di-name { color: var(--ink-3); font-weight: 500; }
  .dex-item.locked .di-sil .item-ico { filter: brightness(0); opacity: .18; }

  /* 物品放大视图：与羊图鉴同一族卡片（共用 .dex-zoom / .dz-card / .dz-close），
   * 图标居中放大、名字 / 产地 / 描述全部居中；320 宽下也不横向溢出。
   * 图标用 itemIcon 输出，图案保持素材原色；变体只体现在名字后缀数字的颜色上。 */
  /* 物品卡与羊卡共用同一层浅黄底（#FFF6D2），描边用同色系的暗金虚线：
   * 1.5px 与全站卡片线宽一致、圆角沿用 .dz-card 的 24px，不刺眼但能看清虚线段 */
  #item-zoom .dz-card {
    background: #FFF6D2;
    border: 1.5px dashed #D8B04E;
  }
  #item-zoom .dz-close { color: var(--ink-2); }
  .iz-card {
    width: 88%;
    max-width: 400px;
    padding: 44px 14px 14px;
  }
  .iz-art { display: flex; justify-content: center; }
  .iz-art .item-ico {
    width: min(36vw, 132px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
  }
  .iz-card .dz-name { margin-top: 8px; font-size: 18px; }
  .iz-from {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 4px;
    font-size: 12px; color: var(--ink-2);
  }
  .iz-from .iz-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
  .iz-card .dz-desc { margin-top: 8px; font-size: 14px; line-height: 1.6; }

  /* 限定壁纸导流：壁纸 tab 顶部一行可点击文字，新窗口打开周边商店 */
  .wall-promo {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    min-height: 44px;
    margin: 2px 12px 0;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(240, 160, 60, .12);
    color: var(--accent-deep, #C9862F);
    font-size: 12.5px; font-weight: 600; line-height: 1.4;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
  }
  .wall-promo:active { background: rgba(240, 160, 60, .2); }
  @media (prefers-reduced-motion: reduce) {
    .dz-progress i { transition: none; }
  }

  .wall-list {
    flex: 1; overflow-y: auto;
    padding: 6px 12px 14px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    align-content: start;
    /* 卡片 overflow:hidden + 图片靠 aspect-ratio 撑高，auto 行会按 min-content 塌陷，
     * 必须显式按内容撑开，否则竖版卡片只剩标题条高度 */
    grid-auto-rows: max-content;
  }
  .wall-card {
    border-radius: 18px; overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-1);
    display: flex; flex-direction: column;
  }
  /* 竖版原比例 1206:2622（与构建产物 720×1565 一致）：卡片高度跟着图走，画面零裁切 */
  .wall-card .wall-art {
    display: block; width: 100%; height: auto;
    aspect-ratio: 1206 / 2622;
    object-fit: cover;
    background: var(--surface-2);
  }
  .wall-card.got { cursor: pointer; }
  .wall-card.got:active { transform: scale(.985); }
  .wall-card .wc-name { flex: 0 0 auto; padding: 7px 8px; font-size: 12px; text-align: center; }
  .wall-card.locked {
    border: 1.5px dashed var(--line);
    box-shadow: none;
    background: var(--surface-2);
    color: var(--ink-3);
  }
  /* 未解锁占位：与已解锁图同比例，两种卡片高度对齐 */
  .wall-lock {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 1206 / 2622;
  }
  .wall-card.locked .wc-name { color: var(--ink-3); }

  /* 壁纸全屏查看：图片节点直接从卡片搬进来复用，打开不产生新的图片请求 */
  .wall-view {
    position: absolute; inset: 0;
    z-index: 70;
    display: flex; align-items: center; justify-content: center;
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
    background: rgba(24, 16, 10, .93);
    opacity: 0;
    transition: opacity .15s ease;
  }
  .wall-view[hidden] { display: none; }
  .wall-view.open { opacity: 1; }
  .wall-view:not(.open) { pointer-events: none; }
  .wv-stage {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 0;
  }
  /* 完整显示不裁切；body 全局关了长按菜单，这里显式打开，长按 / 右键才能「存储图像」 */
  .wv-stage .wall-art {
    display: block;
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 14px;
    -webkit-user-select: auto; user-select: auto;
    -webkit-touch-callout: default;
  }
  .wv-close {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top)); right: 10px;
    display: grid; place-items: center;
    width: 44px; height: 44px; min-height: 44px;
    margin: 0; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    color: #FFF6D2;
    z-index: 1;
  }
  .wv-close:active { background: rgba(0, 0, 0, .62); }
  .wv-tip {
    position: absolute;
    left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 24px);
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);      /* 图片可能是浅色，垫底保证文案可读 */
    text-align: center;
    font-size: 12px;
    color: rgba(255, 246, 210, .95);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .wall-view { transition: none; }
  }
  .wall-redeem {
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-soft);
    background: rgba(255, 248, 236, .94);
  }
  .wall-code-row { display: flex; gap: 8px; min-width: 0; }
  .wall-redeem .wall-scan-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 46px; height: 46px;
    border: 1.5px solid var(--accent); border-radius: 14px;
    background: transparent; color: var(--accent-deep);
    font-size: 14px; font-weight: 600;
  }
  .wall-redeem .wall-scan-btn:active { background: rgba(201, 154, 61, .12); }
  .wall-msg {
    margin: 0; min-height: 17px;
    font-size: 12px; line-height: 1.45; text-align: center;
    color: var(--ink-3);
  }
  .wall-msg.err { color: #b4442f; }
  .wall-msg.ok { color: var(--accent-deep); }
  .wall-redeem input {
    flex: 1; min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid var(--line); border-radius: 14px;
    background: var(--white);
    color: var(--ink);
    font-size: 14px;
    -webkit-user-select: text;
    user-select: text;
  }
  .wall-redeem input::placeholder { color: var(--ink-3); }
  .wall-redeem button {
    flex: 0 0 auto;
    min-width: 76px; height: 44px;
    padding: 0 14px;
    border: 0; border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
  }
  .wall-redeem button:active { background: var(--accent-deep); }

  .wall-scan {
    position: fixed; inset: 0;
    z-index: 70;
    display: flex; align-items: center; justify-content: center;
    padding: calc(12px + env(safe-area-inset-top)) max(16px, 4vw) calc(12px + env(safe-area-inset-bottom));
    background: rgba(38, 24, 16, .62);
    opacity: 0;
    transition: opacity .15s ease;
  }
  .wall-scan[hidden] { display: none; }
  .wall-scan.open { opacity: 1; }
  .wall-scan:not(.open) { pointer-events: none; }
  .ws-card {
    position: relative;
    width: 100%; max-width: 420px; max-height: 100%;
    overflow-y: auto;
    padding: 48px 16px 18px;
    border-radius: 22px;
    background: var(--white);
    box-shadow: var(--shadow-2);
    text-align: center;
    transform: scale(.97);
    transition: transform .15s ease;
  }
  .wall-scan.open .ws-card { transform: scale(1); }
  .ws-close {
    position: absolute; top: 4px; right: 4px;
    display: grid; place-items: center;
    width: 44px; height: 44px; min-height: 44px;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--ink-3);
    cursor: pointer;
  }
  .ws-close:active { background: var(--surface-2); }
  .ws-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
  .ws-video-wrap {
    position: relative;
    width: 100%; aspect-ratio: 1 / 1;
    border-radius: 16px; overflow: hidden;
    background: #18130f;
  }
  .ws-video-wrap[hidden] { display: none; }
  #wall-scan-video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ws-freeze {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .ws-freeze[hidden] { display: none; }
  .ws-frame {
    position: absolute; inset: 16%;
    border: 2px solid rgba(255, 255, 255, .9); border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .26);
    pointer-events: none;
  }
  .ws-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
  .ws-hint.found { color: #3f7d4c; font-weight: 600; }
  .ws-hint.error { color: #b4442f; font-weight: 600; }
  .ws-video-wrap.ws-found .ws-frame {
    border-color: #5fbf7a;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .22), 0 0 0 3px rgba(95, 191, 122, .35);
  }
  .ws-result {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    text-align: center;
  }
  .ws-result[hidden] { display: none; }
  .ws-result.ok { background: #f0f8f1; border-color: #cfe6d4; }
  .ws-result.err { background: #fdf1ed; border-color: #eed5cd; }
  .ws-result-art {
    display: block;
    width: 54px; height: 96px;
    margin: 0 auto 8px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--line-soft);
  }
  .ws-result-art[hidden] { display: none; }
  .ws-result-name { font-size: 15px; font-weight: 700; }
  .ws-result.ok .ws-result-name { color: #3f7d4c; }
  .ws-result.err .ws-result-name { color: #b4442f; }
  .ws-result-id { margin-top: 2px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); }
  .ws-result-msg { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
  /* 识别到码后的确认卡片：先让用户看清码再决定收下 */
  .ws-found {
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #f0f8f1;
    border: 1px solid #cfe6d4;
  }
  .ws-found[hidden] { display: none; }
  .ws-found-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #dff0e2; color: #3f7d4c;
    font-size: 12px; font-weight: 700;
  }
  .ws-found-code {
    margin-top: 8px;
    font: 600 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ws-found-meta { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
  .ws-found-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
  .ws-accept, .ws-rescan, .ws-go-wall {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; height: 44px; padding: 0 20px;
    border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .ws-accept, .ws-go-wall { border: 0; background: var(--accent); color: #fff; }
  .ws-accept:active, .ws-go-wall:active { background: var(--accent-deep); }
  .ws-rescan { border: 1.5px solid var(--line); background: var(--white); color: var(--ink-2); }
  .ws-rescan:active { background: var(--surface-2); }
  .ws-accept[disabled], .ws-rescan[disabled] { opacity: .6; pointer-events: none; }
  .ws-go-wall { margin-top: 10px; }
  .ws-go-wall[hidden] { display: none; }
  .ws-retry {
    margin-top: 10px;
    min-height: 44px; height: 44px;
    padding: 0 20px;
    border: 1.5px solid var(--accent);
    border-radius: 12px;
    background: transparent;
    color: var(--accent-deep);
    font-size: 14px; font-weight: 600;
  }
  .ws-retry[hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .wall-scan, .ws-card { transition: none; }
  }
  .ws-fallback { margin-top: 10px; }
  .ws-fallback[hidden] { display: none; }
  .ws-fallback p { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
  .ws-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  /* 手动兜底常驻在相机/降级两种状态下都可见 */
  .ws-foot { margin-top: 10px; }
  .ws-manual {
    min-height: 46px; height: 46px; padding: 0 18px;
    border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--white); color: var(--ink-2);
    font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .ws-manual:active { background: var(--surface-2); }
  .ws-actions button, .ws-upload {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; height: 46px; padding: 0 16px;   /* 触摸目标 ≥44，留 2px 余量避免小数取整变 43 */
    border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .ws-actions button { border: 0; background: var(--accent); color: #fff; }
  .ws-actions button:active { background: var(--accent-deep); }
  .ws-upload { border: 1.5px solid var(--line); background: var(--white); color: var(--ink); }
  .ws-upload[hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .wall-scan, .ws-card { transition: none; }
  }