/* =========================================================
   特殊收容 · 一对指甲（modules/archive/special/games/nail/nail.js）
   ---------------------------------------------------------
   舞台上只有两样东西：六根从画面底边伸上来的竖条，其中两根带指甲。
   没有手，没有横线，没有底，没有进度条，没有次数，也没有说明。

   指甲是整块画面上唯一发亮的东西。按住往上拖，它跟着手走；一松手缩回去。
   指甲露出来多少，就是拖到多少。

   版面按像素对死（JS 里也有一份，改要一起改）：
     竖条宽 34、间距 14，从画面底边伸上来（下面多长 40px，被底边切掉）
     指甲 20×22，落在竖条顶上，左右各留 7；甲根那条横线画在指甲自己身上
     拖满时整枚上移（TUNE.nail.lift = 34），悬在竖条上方
   暗底、竖条、指甲都是纯色平面，不用渐变。
   ========================================================= */

/* ================= 舞台 ================= */
.nail-stage {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #0b0c0e;
  border-bottom: 1px solid var(--border);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ================= 竖条 =================
   一块纯色的东西，没有描边：它的边界就是色块自己的边。
   上圆下平 —— 圆的那头是指甲要出去的地方；平的那头一直伸到画面底边，
   被底边切掉，所以它不悬空，是从下面伸上来的。 */
.ns-bar {
  position: absolute;
  z-index: 2;
  border-radius: 22px 22px 0 0;
  background: #262b33;
}

/* ================= 指甲 =================
   埋在竖条顶端。transform 整个留给「拖出来多少」这一件事，
   所以这里不能有过渡：它必须跟手，落到哪就是哪。 */
.ns-nail {
  position: absolute;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.ns-nail.pulling {
  cursor: grabbing;
}

.ns-nail-in {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.ns-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 一条路径，一个填充色。它是整个画面唯一的亮面 */
.ns-shape {
  fill: #c8cfd8;
  stroke: #c8cfd8;
  stroke-width: 0.6;
  stroke-linejoin: round;
}

/* 线以下的甲根：一层跟竖条同色的底，压住指甲的下半截。
   它不是遮挡层，它就是这个竖条本身 —— 甲根在里面，看不见。 */
.ns-mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  background: #262b33;
}

/* 那道分割线：从竖条左边穿到右边，横过指甲。
   线以下是甲根，线以上是甲面 —— 拖的时候指甲从这条线里往外走，线不动。 */
.ns-slot {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 4;
  pointer-events: none;
  background: #262b33;
}

/* 出来了：不再吃指针，也不该再有手型 */
.ns-nail.out {
  pointer-events: none;
  cursor: default;
}