/* kbd-skins.css —— 键帽皮肤（老师 2026-10-12）
 * ============================================================================
 * 来源：老师给的 10 张机械键盘键帽实拍/渲染图
 *   E:\A-WD SHIT\雅思\打字键盘\*.png
 *   （Alhambra / Alhambra kit / GMK CYL GAT-X105 Strike / GMK Yeewti 雪怪 /
 *     Grass Valley / PBS-Kids Typewriter / SAZABI / SP DCS NOTD / SWG Beige / 无信号）
 * ★ 做法：把每一套的**主色、字符色、修饰键色、强调色**用程序从图里提取出来，
 *   再落成 CSS 变量 —— 不直接嵌图（图是设计师的作品，且体积大、缩放会糊）。
 * ★ 变量约定（所有皮肤只改这 10 个变量）：
 *     --kc-base / --kc-legend      普通字母键：底色 / 字符色
 *     --kc-mod  / --kc-mod-legend  修饰键（Tab Caps Shift Enter Backspace）：底色 / 字符色
 *     --kc-num  / --kc-num-legend  数字行：底色 / 字符色
 *     --kc-space                    空格
 *     --kc-border / --kc-edge      键帽描边 / 底边（做出"厚键帽"的立体感）
 *     --kc-gloss                    键帽顶面高光强度（浅色键更亮、深色键更暗）
 * ========================================================================== */

/* ---- 底座：一律从变量取值，没选皮肤时就是当前这套（浅灰） ---- */
.kbd {
  --kc-base: #ffffff;
  --kc-legend: #33404f;
  --kc-mod: #eef1f5;
  --kc-mod-legend: #33404f;
  --kc-num: #ffffff;
  --kc-num-legend: #33404f;
  --kc-space: #ffffff;
  --kc-border: #ccd3dd;
  --kc-edge: #b9c1cd;
  --kc-gloss: .22;
}

/* ==========================================================================
   1 · Alhambra —— 米白字母键 + 深灰修饰键 + 棕/枣红点缀
   ========================================================================== */
.kbd[data-skin="alhambra"] {
  --kc-base: #e9e4da; --kc-legend: #2b2623;
  --kc-mod: #6b6764; --kc-mod-legend: #f2efe9;
  --kc-num: #e9e4da; --kc-num-legend: #2b2623;
  --kc-space: #6b6764;
  --kc-border: #b9b4ac; --kc-edge: #948d84;
  --kc-gloss: .18;
}

/* ==========================================================================
   2 · Alhambra Kit —— 同族，整体更冷更灰
   ========================================================================== */
.kbd[data-skin="alhambra-kit"] {
  --kc-base: #bdbab4; --kc-legend: #212120;
  --kc-mod: #928c85; --kc-mod-legend: #f5f3f0;
  --kc-num: #c2bfba; --kc-num-legend: #212120;
  --kc-space: #928c85;
  --kc-border: #a09a93; --kc-edge: #837c74;
  --kc-gloss: .16;
}

/* ==========================================================================
   3 · GMK CYL GAT-X105 Strike —— 白字母 + 红数字行 + 蓝修饰键 + 黄点缀
   ========================================================================== */
.kbd[data-skin="strike"],
/* ★ strike-photo（原设计贴图）的 CSS 键盘回落母版配色（贴图只在浮层 canvas 上） */
.kbd[data-skin="strike-photo"] {
  /* ★ 2026-10-19 对图重校（老师：抓原设计）：数字行红 + 白字；修饰键亮蓝；
     字母键暖白；字体换圆体（--kc-font）。 */
  --kc-base: #f4f2ee; --kc-legend: #33333b;
  --kc-mod: #2b4fc0; --kc-mod-legend: #ffffff;
  --kc-num: #c22b30; --kc-num-legend: #f5f3ef;
  --kc-space: #dedcd8;
  --kc-border: #cfcfcb; --kc-edge: #a9a9a4;
  --kc-gloss: .3;
  --kc-font: "Arial Rounded MT Bold", "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ==========================================================================
   4 · GMK Yeeti 雪怪 —— 白→冰蓝跨行渐变（2026-10-19 老师纠色：
       「这个原色是白到蓝的渐变」—— 原来整副灰蓝是错的）
   数字行近白，往下逐行偏蓝；修饰键板岩蓝、空格中蓝。
   ========================================================================== */
.kbd[data-skin="yeeti"] {
  --kc-base: #b5d2e5; --kc-legend: #283e56;
  --kc-mod: #577d99; --kc-mod-legend: #ffffff;
  --kc-num: #f6fafd; --kc-num-legend: #283e56;
  --kc-space: #6f95b3;
  --kc-border: #b7c9d6; --kc-edge: #93aec2;
  --kc-gloss: .3;
}
/* 行级渐变覆盖（kbd.js::mount 给每行写了 data-row；变量按继承落到键帽）：
   row0 数字行走 --kc-num（近白），row1~3 走 --kc-base 逐行加深。 */
.kbd[data-skin="yeeti"] .kbd-row[data-row="1"] { --kc-base: #e4eef5; }
.kbd[data-skin="yeeti"] .kbd-row[data-row="2"] { --kc-base: #cfe1ee; }
.kbd[data-skin="yeeti"] .kbd-row[data-row="3"] { --kc-base: #b5d2e5; }

/* ==========================================================================
   5 · Grass Valley —— 草绿灰 + 米色
   ========================================================================== */
.kbd[data-skin="grass-valley"] {
  --kc-base: #eadfc5; --kc-legend: #49473c;
  --kc-mod: #62736e; --kc-mod-legend: #f0ede4;
  --kc-num: #80a09f; --kc-num-legend: #ffffff;
  --kc-space: #8d806d;
  --kc-border: #b7ac97; --kc-edge: #9b8f7c;
  --kc-gloss: .18;
}

/* ==========================================================================
   6 · PBS-Kids Typewriter —— 橄榄绿 + 蓝绿，圆润童趣
   ========================================================================== */
.kbd[data-skin="kids-typewriter"] {
  --kc-base: #d2dcd5; --kc-legend: #4b5e4f;
  --kc-mod: #77a1a3; --kc-mod-legend: #ffffff;
  --kc-num: #b6c4af; --kc-num-legend: #3f4d42;
  --kc-space: #7c8e61;
  --kc-border: #a9b7ab; --kc-edge: #8d9c90;
  --kc-gloss: .2;
}

/* ==========================================================================
   7 · SAZABI —— 深枣红 + 明红
   ========================================================================== */
.kbd[data-skin="sazabi"] {
  /* ★ 2026-10-19 对图重校（老师：抓原设计）：字母键正红 + 白字（原来错做成
     灰底深字）；数字行银灰 + 深字；修饰键近黑；字体换圆体（--kc-font）。 */
  --kc-base: #c3252c; --kc-legend: #f2ecec;
  --kc-mod: #262223; --kc-mod-legend: #d8d2d0;
  --kc-num: #b7b5b3; --kc-num-legend: #35302f;
  --kc-space: #b3b0ae;
  --kc-border: #5a5354; --kc-edge: #4a4344;
  --kc-gloss: .3;
  --kc-font: "Arial Rounded MT Bold", "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ==========================================================================
   8 · SP DCS NOTD —— 全黑 + 红字符（夜间行动）
   ========================================================================== */
.kbd[data-skin="notd"] {
  --kc-base: #363434; --kc-legend: #e8e2e2;
  --kc-mod: #020202; --kc-mod-legend: #c03839;
  --kc-num: #c03839; --kc-num-legend: #ffffff;
  --kc-space: #0f0e0e;
  --kc-border: #4a4646; --kc-edge: #242121;
  --kc-gloss: .1;
}

/* ==========================================================================
   9 · SWG Beige —— 复古米棕
   ========================================================================== */
.kbd[data-skin="swg-beige"] {
  --kc-base: #ebdad2; --kc-legend: #514339;
  --kc-mod: #b5a396; --kc-mod-legend: #3a3129;
  --kc-num: #dcc9c0; --kc-num-legend: #514339;
  --kc-space: #998678;
  --kc-border: #c5b3a6; --kc-edge: #a8968a;
  --kc-gloss: .2;
}

/* ==========================================================================
   10 · 无信号 —— 冷灰 + 暖粉，一点赛博味
   ========================================================================== */
.kbd[data-skin="no-signal"] {
  --kc-base: #cdb7af; --kc-legend: #3a2a2a;
  --kc-mod: #a6a5a7; --kc-mod-legend: #1c1715;
  --kc-num: #967475; --kc-num-legend: #f0eae8;
  --kc-space: #1c1715;
  --kc-border: #b0a09b; --kc-edge: #93827d;
  --kc-gloss: .18;
}

/* ==========================================================================
   11 · GMK Purple Night 紫夜（2026-10-19 新增，老师点名）
   —— 整副紫罗兰 + 白字符（设计图：GMK Purple Night 紫夜.png）
   ========================================================================== */
.kbd[data-skin="purple-night"],
.kbd[data-skin="purple-night-photo"] {
  --kc-base: #6a58b5; --kc-legend: #f2f0fa;
  --kc-mod: #53429c; --kc-mod-legend: #e8e4f8;
  --kc-num: #7a68c5; --kc-num-legend: #ffffff;
  --kc-space: #53429c;
  --kc-border: #8d7fd0; --kc-edge: #6f5fb0;
  --kc-gloss: .2;
}

/* ==========================================================================
   12 · Maxkey 紫二色（2026-10-19 新增，老师点名）
   —— 奶白字母键 + 紫字符 + 亮紫修饰键（设计图：Maxkey 紫二色.png）
   ========================================================================== */
.kbd[data-skin="maxkey-purple"] {
  --kc-base: #f2f0eb; --kc-legend: #8a35c9;
  --kc-mod: #a13ce0; --kc-mod-legend: #ffffff;
  --kc-num: #f2f0eb; --kc-num-legend: #8a35c9;
  --kc-space: #e8e4de;
  --kc-border: #d8c2e8; --kc-edge: #b89ace;
  --kc-gloss: .26;
}

/* ==========================================================================
   键帽外观：按上面的变量上色 + 顶面高光 + 厚边
   ========================================================================== */
.kbd-cap {
  position: relative;
  background: var(--kc-base);
  color: var(--kc-legend);
  border-color: var(--kc-border);
  border-bottom-color: var(--kc-edge);
  overflow: hidden;
}
/* 修饰键（Tab / Caps / Shift / Enter / Backspace）与空格走另一套颜色 */
.kbd-cap.kbd-wide { background: var(--kc-mod); color: var(--kc-mod-legend); }
.kbd-cap[data-key="Space"] { background: var(--kc-space); }
/* 数字行 */
.kbd-cap.kbd-num { background: var(--kc-num); color: var(--kc-num-legend); }
/* 键帽的"上表面"高光：一层很淡的白，做出 CYL/SA 那种鼓面感 */
.kbd-cap:after {
  content: '';
  position: absolute; left: 3px; right: 3px; top: 2px; height: 46%;
  border-radius: 7px 7px 12px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, var(--kc-gloss)), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* 深色皮肤的高光要收一点，否则像塑料 */
.kbd[data-skin="notd"] .kbd-cap:after { opacity: .5; }

/* ---- 按手指分区上色：改成**半透明叠加**，这样皮肤底色仍然透出来 ---- */
.kbd.is-zone .kbd-cap:before {
  content: '';
  position: absolute; inset: 0; opacity: .34; pointer-events: none;
}
.kbd.is-zone .kbd-cap.kbd-f-lp:before { background: #f6b8b2; }
.kbd.is-zone .kbd-cap.kbd-f-lr:before { background: #f6cf9c; }
.kbd.is-zone .kbd-cap.kbd-f-lm:before { background: #efe49a; }
.kbd.is-zone .kbd-cap.kbd-f-li:before { background: #a9d9ab; }
.kbd.is-zone .kbd-cap.kbd-f-ri:before { background: #a3cde6; }
.kbd.is-zone .kbd-cap.kbd-f-rm:before { background: #b9b3e6; }
.kbd.is-zone .kbd-cap.kbd-f-rr:before { background: #e0aede; }
.kbd.is-zone .kbd-cap.kbd-f-rp:before { background: #eeb0cd; }
.kbd.is-zone .kbd-cap.kbd-f-th:before { background: #c9cfd8; }
/* 未开分区时，把旧的浅色底彻底压掉（皮肤生效） */
.kbd:not(.is-zone) .kbd-cap { background: var(--kc-base); }
.kbd:not(.is-zone) .kbd-cap.kbd-wide { background: var(--kc-mod); }
.kbd:not(.is-zone) .kbd-cap.kbd-num { background: var(--kc-num); }
.kbd:not(.is-zone) .kbd-cap[data-key="Space"] { background: var(--kc-space); }

/* 按下/提示态在皮肤下仍然要显眼 */
.kbd-cap.is-down { background: #2f6fed !important; color: #fff !important; }
.kbd-cap.is-err { background: #c0392b !important; color: #fff !important; }
.kbd-cap.is-target { outline-color: #f0a020; }

/* ==========================================================================
   皮肤选择器（学生自己挑）
   ========================================================================== */
.kbd-skins { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.kbd-skins-lab { font-size: 12.5px; color: var(--t-muted, #6b7280); margin-right: 2px; }
.kbd-skin {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid #d7dbe2; background: #fff; font-size: 12.5px; color: #33404f;
}
.kbd-skin:hover { border-color: #2f6fed; }
.kbd-skin.is-on { border-color: #2f6fed; box-shadow: 0 0 0 2px rgba(47, 111, 237, .18); font-weight: 700; }
.kbd-skin i { display: inline-flex; gap: 2px; }
.kbd-skin i b {
  display: block; width: 11px; height: 16px; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .18);
}