/* =========================================================
   特殊收容 · 一撮头发（modules/archive/special/games/hair/hair.js）
   ---------------------------------------------------------
   深底上散落着几根头发，一笔一根，歪七扭八。
   没有进度条、没有力度条、没有横线、没有百分比，也没有说明。

   玩法就是点：点掉的那根淡掉消失，点完画面就空了。
   纯色平面，不用渐变。
   ========================================================= */

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

/* ================= 一根头发 =================
   48×72 的一块，整块都是判定 —— 发丝只有一根线的粗细，
   判定跟着线走手指点不着。根数、间距在 TUNE.hair，落点在 JS 里随机。 */
.hs-hair {
  position: absolute;
  width: 48px;
  height: 72px;
  transform: rotate(var(--r, 0deg));
  cursor: pointer;
  transition: opacity 0.28s ease, transform 0.28s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 点掉了：往旁边一歪，淡没 */
.hs-hair.gone {
  opacity: 0;
  transform: rotate(var(--r, 0deg)) translate(10px, 14px);
  pointer-events: none;
}

.hs-svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 一笔描出来的发丝 */
.hs-strand {
  fill: none;
  stroke: #c8cfd8;
  stroke-width: 1.4;
  stroke-linecap: round;
}