/* kbd.css —— 屏幕软键盘 + 实时按键高亮（老师 2026-10-12）
 * ============================================================================
 * 老师原话：「做一个打字的实时查看器。在界面上显示键盘的数字排列（英文键盘），
 *   按那个字母的时候，键盘上对应的那个键就会亮起来，类似于打字的手指的提示。」
 * ★ 纯 CSS 画键帽：无图片、无外链字体、零外部依赖。
 * ★ 配色按**标准指法**把键分成手指区（左小指→右小指），一眼看出该用哪根手指。
 * ========================================================================== */

.kbd {
  --kbd-gap: 7px;
  display: flex; flex-direction: column; gap: var(--kbd-gap);
  padding: 14px 14px 16px;
  background: #f2f4f8;
  border: 1px solid var(--c-line, #d7dbe2);
  border-radius: 14px;
  max-width: 1040px;
}
.kbd.is-compact { --kbd-gap: 5px; padding: 10px 10px 12px; max-width: 900px; }

.kbd-row { display: flex; gap: var(--kbd-gap); }

/* ★ 2026-10-19 二轮（ANSI 错位排布）：行首缩进占位 —— kbd.js::mount 画的
   空档 div（不占键位、不吃点击，flex 权重由 JS 按占位宽度写入）。 */
.kbd-gap { display: block; min-width: 0; }

.kbd-cap {
  flex: 1 1 0%;
  min-width: 0;
  height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #ccd3dd;
  border-bottom-width: 2px;
  border-radius: 9px;
  /* ★ 皮肤可换字体（--kc-font）：strike/sazabi 用圆体还原原设计 */
  font: 600 15.5px/1 var(--kc-font, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  color: #33404f;
  user-select: none;
  -webkit-user-select: none;
  transition: background .08s, box-shadow .08s, transform .05s;
}
.kbd.is-compact .kbd-cap { height: 43px; font-size: 13.5px; border-radius: 8px; }
.kbd-wide {
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
}
.kbd.is-compact .kbd-wide { font-size: 11.5px; }

/* ---- 标准指法配色（淡底 + 同色描边）---- */
.kbd-f-lp { background: #fdecea; border-color: #f2b8b2; }   /* 左小指 */
.kbd-f-lr { background: #fff4e5; border-color: #f3cfa0; }   /* 左无名指 */
.kbd-f-lm { background: #fdfbe3; border-color: #e6dc9a; }   /* 左中指 */
.kbd-f-li { background: #eaf7ea; border-color: #a9d9ab; }   /* 左食指 */
.kbd-f-ri { background: #e8f4fb; border-color: #a3cde6; }   /* 右食指 */
.kbd-f-rm { background: #eeecfb; border-color: #b9b3e6; }   /* 右中指 */
.kbd-f-rr { background: #f9eaf6; border-color: #e0aede; }   /* 右无名指 */
.kbd-f-rp { background: #fdeaf3; border-color: #eeb0cd; }   /* 右小指 */
.kbd-f-th { background: #f0f2f6; border-color: #c9cfd8; }   /* 拇指（空格） */
.kbd.is-nofinger .kbd-cap { background: #fff; border-color: #ccd3dd; }

/* ---- 按下 ⇒ 亮起来（老师要的效果）---- */
.kbd-cap.is-down {
  background: #2f6fed !important;
  border-color: #1b4fc0 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .25), 0 2px 0 #1b4fc0;
  transform: translateY(1px);
}
.kbd-cap.is-pop { animation: kbdPop .18s ease-out; }
@keyframes kbdPop {
  0% { box-shadow: 0 0 0 0 rgba(47, 111, 237, .55); }
  100% { box-shadow: 0 0 0 12px rgba(47, 111, 237, 0); }
}

/* ---- 打错 ⇒ 红一下 ---- */
.kbd-cap.is-err {
  background: #c0392b !important;
  border-color: #8e2418 !important;
  color: #fff !important;
}

/* ---- 指法提示：下一个该按的键（呼吸光圈）---- */
.kbd-cap.is-target {
  outline: 3px solid #f0a020;
  outline-offset: 1px;
  animation: kbdBreath 1.1s ease-in-out infinite;
}
@keyframes kbdBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 160, 32, 0); }
  50% { box-shadow: 0 0 0 6px rgba(240, 160, 32, .28); }
}

/* ---- Caps 常亮（2026-10-19 老师：Caps 要"真的模拟键盘上的 Caps"）----
   大写锁定开着时 Caps 键帽一直亮着（像真键盘的指示灯），
   状态在 kbd.js 的全局 caps（elp:kbcaps 广播），这里只管长相。
   ★ 用绿不是蓝：蓝色已被 is-down（按下）占用，学生要能一眼分清
     "正在按"和"锁着大写"两件事。 */
.kbd-cap.is-caps {
  background: #1f9d55 !important;
  border-color: #14683a !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(31, 157, 85, .30) inset;
}

/* ---- Shift 键帽的功能小字（2026-10-19 老师：Shift = 开关键盘的快捷键）----
   主文字 Shift 下面一行小字「隐藏/启用」，让学生知道这颗键不是打字用的。 */
.kbd-cap-sub {
  display: block;
  font-size: 9.5px;
  line-height: 1.1;
  font-weight: 400;
  opacity: .72;
  letter-spacing: .04em;
  font-style: normal;
  pointer-events: none;
}

/* ---- 键盘下方的提示条（左侧文字由 JS 写进 data-t）---- */
.kbd-bar {
  margin-top: 2px;
  display: flex; justify-content: space-between; align-items: center;
  min-height: 20px; font-size: 13px; color: var(--t-muted, #6b7280);
}
/* ★ 2026-10-12：右侧显示"下一个该按的键 + 该用哪根手指"
   （kbd.js 的 target() 把文案写在 `data-t` 上；空串时不显示） */
.kbd-bar .kbd-hint { flex: 1; }
.kbd-bar[data-t]:not([data-t=""])::after {
  content: attr(data-t);
  color: #33404f; font-weight: 600; white-space: nowrap;
}
.kbd.is-compact .kbd-bar { font-size: 12px; }
.kbd-bar:before { content: attr(data-t); color: #8a5a00; }

/* ---- 手指图例（独立预览页用）---- */
.kbd-legend {
  display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px;
  font-size: 12px; color: var(--t-muted, #6b7280);
}
.kbd-legend i {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, .12);
}

/* ============================================================================
   十指指示条（老师 2026-10-12）
   「在键盘的最下方做一个手指的指示，能直观看到所有手指，同时高亮需要使用的
    那个手指，提示学生根据高亮的手指来打字。」
   ★ 两只手各 5 指，长度按真实比例；该用的那根手指**实心高亮 + 白字**。
   ========================================================================== */
.kbd-hands {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 26px; margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed #d9dee6;
}
.kbd-hand { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kbd-hand-t { font-size: 11.5px; color: var(--t-muted, #8a93a0); }
.kbd-fgs { display: flex; align-items: flex-end; gap: 6px; }
/* 手心（把五指连起来，看起来像一只手） */
.kbd-fgs:after {
  content: ''; position: absolute;
}
.kbd-fg {
  --fgc: #8a93a0;          /* 高亮时的实心色 */
  --fgb: #eef1f5;          /* 常态底色 */
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 30px; border-radius: 8px 8px 6px 6px;
  background: var(--fgb);
  border: 1px solid rgba(0, 0, 0, .10);
  border-bottom-width: 2px;
  padding-bottom: 3px;
  transition: background .12s, transform .12s, box-shadow .12s;
}
.kbd-fg i { display: block; width: 100%; height: 100%; }
.kbd-fg-cn {
  font-size: 10px; line-height: 1.5; color: #6b7280;
  writing-mode: horizontal-tb; white-space: nowrap;
}
/* 指长按真实比例：小指最短、中指最长 */
.kbd-fg-lp, .kbd-fg-rp { height: 34px; }
.kbd-fg-lr, .kbd-fg-rr { height: 48px; }
.kbd-fg-lm, .kbd-fg-rm { height: 56px; }
.kbd-fg-li, .kbd-fg-ri { height: 50px; }
.kbd-fg-th { height: 28px; width: 34px; }
/* 各指的高亮色（与键帽分区同色系，深一号 ⇒ 一眼分得开） */
.kbd-fg-lp { --fgc: #d9534f; --fgb: #fdecea; }
.kbd-fg-lr { --fgc: #e08a2e; --fgb: #fff4e5; }
.kbd-fg-lm { --fgc: #b9a52a; --fgb: #fdfbe3; }
.kbd-fg-li { --fgc: #4c9a51; --fgb: #eaf7ea; }
.kbd-fg-ri { --fgc: #3d86bd; --fgb: #e8f4fb; }
.kbd-fg-rm { --fgc: #6b63c9; --fgb: #eeecfb; }
.kbd-fg-rr { --fgc: #b763ad; --fgb: #f9eaf6; }
.kbd-fg-rp { --fgc: #d2699a; --fgb: #fdeaf3; }
.kbd-fg-th { --fgc: #6b7280; --fgb: #f0f2f6; }
/* 该用的那根手指：实心 + 白字 + 微微抬起 */
.kbd-fg.is-on {
  background: var(--fgc);
  border-color: rgba(0, 0, 0, .18);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
  animation: kbdFinger .9s ease-in-out infinite;
}
.kbd-fg.is-on .kbd-fg-cn { color: #fff; font-weight: 700; }
@keyframes kbdFinger {
  0%, 100% { box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 0 rgba(47, 111, 237, .0); }
  50% { box-shadow: 0 6px 14px rgba(0, 0, 0, .18), 0 0 0 7px rgba(47, 111, 237, .16); }
}
.kbd.is-nofinger .kbd-fg { --fgb: #eef1f5; }
.kbd.is-compact .kbd-hands { gap: 18px; margin-top: 8px; }
.kbd.is-compact .kbd-fg { width: 24px; }
.kbd.is-compact .kbd-fg-cn { font-size: 9px; }
.kbd.is-compact .kbd-fg-lp, .kbd.is-compact .kbd-fg-rp { height: 28px; }
.kbd.is-compact .kbd-fg-lr, .kbd.is-compact .kbd-fg-rr { height: 40px; }
.kbd.is-compact .kbd-fg-lm, .kbd.is-compact .kbd-fg-rm { height: 46px; }
.kbd.is-compact .kbd-fg-li, .kbd.is-compact .kbd-fg-ri { height: 42px; }
.kbd.is-compact .kbd-fg-th { height: 24px; width: 28px; }