/* =========================================================
   特殊收容 · 一颗牙齿（modules/archive/special/games/tooth/tooth.js）
   ---------------------------------------------------------
   舞台里只有三样东西：一颗牙（一条路径填色）、一层牙床、一条横线。
   没有进度条、没有力度条、没有金区、没有百分比，也没有抖动和闪红。

   牙的位置就是进度。一松手，牙缩回牙床 —— 那就是全部反馈。

   版面按像素对死，改数字要一起改：
     舞台高 240px　横线在 152px
     牙齿 96×144、顶在 92px（SVG 的 y=40 是牙冠底边，缩放 1.5 后 60px）
     → 牙冠底边正好压在横线上，牙根整根埋在横线以下
   往上拔（TUNE.tooth.lift = 88）的时候整颗牙抬起来，
   牙根从横线下面一点点抽出来，拔满时牙根整根落在横线以上。
   暗底和横线都是纯色平面，不用渐变。
   ========================================================= */

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

.tooth-stage.grabbing {
  cursor: grabbing;
}

/* ================= 牙齿 ================= */
/* 用 margin-left 居中而不是 translateX(-50%)：
   transform 整个留给「拔出来多少」这一件事，别跟别的抢 */
.ts-tooth {
  position: absolute;
  left: 50%;
  top: 92px;
  width: 96px;
  height: 144px;
  margin-left: -48px;
  z-index: 2;
}

.ts-tooth-in {
  width: 100%;
  height: 100%;
  will-change: transform;
}

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

/* 一条路径，一个填充色。描边同色，只是把边缘收干净 */
.ts-shape {
  fill: #c8cfd8;
  stroke: #c8cfd8;
  stroke-width: 1;
  stroke-linejoin: round;
}

/* ================= 牙床 ================= */
/* 横线以下压一层纯色暗底，牙根埋在里面只剩个影子。
   牙一往上走，牙根就从这层下面抽出来。 */
.ts-gum {
  position: absolute;
  left: 0;
  right: 0;
  top: 153px;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  background: rgba(11, 12, 14, 0.72);
}

/* ================= 横线 ================= */
.ts-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 152px;
  height: 1px;
  z-index: 4;
  background: #6a727e;
}