#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-picker {
    flex: none;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(10, 14, 18, .92);
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .pp-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 0 2px 6px;
  }
  .pp-title { font-size: 12px; color: rgba(235, 240, 245, .9); }
  .pp-title b { color: #f0c24a; font-weight: 600; }
  .pp-list {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pp-list::-webkit-scrollbar { display: none; }
  .pen-pick {
    flex: none; width: 66px; min-height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 4px 2px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: rgba(235, 240, 245, .7);
    font-size: 10px;
    cursor: pointer;
    transition: transform .12s, border-color .16s, background .16s;
  }
  .pen-pick img {
    width: 42px; height: 32px; object-fit: contain;
    filter: grayscale(.7) opacity(.55);
  }
  .pen-pick .pp-name {
    max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .pen-pick.on {
    border-color: #f0c24a;
    background: rgba(240, 194, 74, .14);
    color: #ffe6a6;
  }
  .pen-pick.on img { filter: none; }
  .pen-pick:active { transform: scale(.96); }
  .pp-empty { padding: 8px 2px; font-size: 12px; color: rgba(190, 200, 210, .6); }


.pen-gait {
  position: fixed; left: -2400px; top: 0;
  width: 0; height: 0; overflow: visible;
  pointer-events: none;
}
.pen-gait .sheep { position: static; }