/* hands.css —— 手型指法图的 5 套皮肤（老师 2026-10-12）
 * ============================================================================
 * 同一套 SVG 几何（hands.js），这里只换视觉：
 *   [data-v="A"] 剪影高亮  [data-v="B"] 线描关节  [data-v="C"] 立体皮肤
 *   [data-v="D"] 卡通手    [data-v="E"] 分区配色
 * ★ 高亮统一是 `.hd-fg.is-on`，各版本自己决定"亮成什么样"。
 * ========================================================================== */

.hd-pair {
  display: flex; align-items: flex-end; justify-content: center;
  /* ★ 2026-10-12：拇指改成朝内以后，两只手要**挨近一点**（真手的两个拇指靠得很近） */
  gap: 10px; padding: 10px 6px 4px;
}
.hd-svg { width: 190px; height: 215px; flex: none; overflow: visible; }
.hd-pair.is-compact .hd-svg { width: 140px; height: 158px; }

/* 手指默认用的形状类（颜色由各版本覆盖） */
.hd-skin, .hd-palm { }
.hd-nail { }
.hd-joint { fill: none; stroke-linecap: round; }
.hd-crease { fill: none; stroke-linecap: round; }

/* 高亮时轻轻抬起（所有版本共用的一点动效，幅度很小，不晃眼） */
.hd-fg { transition: transform .16s ease-out; transform-origin: center bottom; }
.hd-fg.is-on { transform: translateY(-5px); }

/* ==========================================================================
   A · 剪影高亮 —— 整手淡灰，用到的那根实心蓝
   ========================================================================== */
[data-v="A"] .hd-skin, [data-v="A"] .hd-palm { fill: #e3e8ef; stroke: #cdd5e0; stroke-width: 1; }
[data-v="A"] .hd-nail { fill: #f4f7fb; }
[data-v="A"] .hd-joint { stroke: #d3dae4; stroke-width: 2; }
[data-v="A"] .hd-crease { stroke: #d3dae4; stroke-width: 2; }
[data-v="A"] .hd-fg.is-on .hd-skin { fill: #2f6fed; stroke: #1b4fc0; }
[data-v="A"] .hd-fg.is-on .hd-nail { fill: #9dc0ff; }
[data-v="A"] .hd-fg.is-on .hd-joint { stroke: #16357f; }

/* ==========================================================================
   B · 线描关节 —— 白底细线 + 指甲 + 指节，像教材插图
   ========================================================================== */
[data-v="B"] .hd-skin, [data-v="B"] .hd-palm { fill: #ffffff; stroke: #8b95a3; stroke-width: 2.2; }
[data-v="B"] .hd-nail { fill: #ffffff; stroke: #8b95a3; stroke-width: 1.6; }
[data-v="B"] .hd-joint { stroke: #b6bec9; stroke-width: 1.6; }
[data-v="B"] .hd-crease { stroke: #b6bec9; stroke-width: 1.6; }
[data-v="B"] .hd-fg.is-on .hd-skin { fill: #fff3da; stroke: #e8a020; stroke-width: 2.6; }
[data-v="B"] .hd-fg.is-on .hd-nail { fill: #ffe6b0; stroke: #e8a020; }
[data-v="B"] .hd-fg.is-on .hd-joint { stroke: #d99a1e; stroke-width: 2; }

/* ==========================================================================
   C · 立体皮肤 —— 渐变 + 投影的"肉手"
   ========================================================================== */
[data-v="C"] .hd-skin, [data-v="C"] .hd-palm {
  fill: url(#hdSkinGrad); stroke: #d9a884; stroke-width: 1.4;
}
[data-v="C"] .hd-nail { fill: #fdeee4; stroke: #e3bc9d; stroke-width: 1; }
[data-v="C"] .hd-joint { stroke: #e2b295; stroke-width: 2.2; opacity: .85; }
[data-v="C"] .hd-crease { stroke: #dcae90; stroke-width: 2.4; opacity: .8; }
[data-v="C"] .hd-fg.is-on .hd-skin {
  fill: url(#hdOnGrad); stroke: #2f6fed; filter: url(#hdGlow);
}
[data-v="C"] .hd-fg.is-on .hd-nail { fill: #eaf2ff; stroke: #6f9ef0; }
[data-v="C"] .hd-fg.is-on .hd-joint { stroke: #4b7fd6; }

/* ==========================================================================
   D · 卡通手 —— 圆润、指甲白、指节深，亲和
   ========================================================================== */
[data-v="D"] .hd-skin, [data-v="D"] .hd-palm {
  fill: #ffe2c4; stroke: #f0b483; stroke-width: 2.4;
}
[data-v="D"] .hd-nail { fill: #fffdf8; stroke: #eec19a; stroke-width: 1.4; }
[data-v="D"] .hd-joint { stroke: #f0b483; stroke-width: 2.6; opacity: .9; }
[data-v="D"] .hd-crease { stroke: #f0b483; stroke-width: 2.6; opacity: .8; }
[data-v="D"] .hd-fg.is-on .hd-skin { fill: #ffd0a1; stroke: #e2632c; stroke-width: 3; }
[data-v="D"] .hd-fg.is-on .hd-nail { fill: #fff; stroke: #e2632c; }
[data-v="D"] .hd-fg.is-on .hd-joint { stroke: #d9561f; }

/* ==========================================================================
   E · 分区配色 —— 每指一色（与键盘键位分区同色系）
   ========================================================================== */
[data-v="E"] .hd-skin, [data-v="E"] .hd-palm { fill: #f4f6fa; stroke: #d3dae4; stroke-width: 1.2; }
[data-v="E"] .hd-nail { fill: #ffffff; stroke: #d3dae4; stroke-width: 1; }
[data-v="E"] .hd-joint { stroke: #d3dae4; stroke-width: 2; }
[data-v="E"] .hd-crease { stroke: #d3dae4; stroke-width: 2; }
[data-v="E"] .hd-fg[data-f="lp"] .hd-skin { fill: #fdecea; stroke: #e8a9a2; }
[data-v="E"] .hd-fg[data-f="lr"] .hd-skin { fill: #fff4e5; stroke: #e8c08a; }
[data-v="E"] .hd-fg[data-f="lm"] .hd-skin { fill: #fdfbe3; stroke: #d8cd84; }
[data-v="E"] .hd-fg[data-f="li"] .hd-skin { fill: #eaf7ea; stroke: #98c99a; }
[data-v="E"] .hd-fg[data-f="ri"] .hd-skin { fill: #e8f4fb; stroke: #92c2de; }
[data-v="E"] .hd-fg[data-f="rm"] .hd-skin { fill: #eeecfb; stroke: #aaa3dd; }
[data-v="E"] .hd-fg[data-f="rr"] .hd-skin { fill: #f9eaf6; stroke: #d69ed4; }
[data-v="E"] .hd-fg[data-f="rp"] .hd-skin { fill: #fdeaf3; stroke: #e3a0c0; }
[data-v="E"] .hd-fg[data-f="th"] .hd-skin { fill: #f0f2f6; stroke: #c3cad4; }
[data-v="E"] .hd-fg.is-on .hd-skin { stroke-width: 3.4; filter: url(#hdGlow); }
[data-v="E"] .hd-fg[data-f="lp"].is-on .hd-skin { fill: #d9534f; stroke: #a83a36; }
[data-v="E"] .hd-fg[data-f="lr"].is-on .hd-skin { fill: #e08a2e; stroke: #b06a1c; }
[data-v="E"] .hd-fg[data-f="lm"].is-on .hd-skin { fill: #c9b132; stroke: #96831d; }
[data-v="E"] .hd-fg[data-f="li"].is-on .hd-skin { fill: #4c9a51; stroke: #35743a; }
[data-v="E"] .hd-fg[data-f="ri"].is-on .hd-skin { fill: #3d86bd; stroke: #2a6394; }
[data-v="E"] .hd-fg[data-f="rm"].is-on .hd-skin { fill: #6b63c9; stroke: #4d47a0; }
[data-v="E"] .hd-fg[data-f="rr"].is-on .hd-skin { fill: #b763ad; stroke: #8d4785; }
[data-v="E"] .hd-fg[data-f="rp"].is-on .hd-skin { fill: #d2699a; stroke: #a94c77; }
[data-v="E"] .hd-fg[data-f="th"].is-on .hd-skin { fill: #7b8797; stroke: #5b6673; }
[data-v="E"] .hd-fg.is-on .hd-nail { fill: #ffffff; }