/* ============================================================
   键盘英雄 KeyboardHero —— 拉布布潮玩风样式表
   深色波点底 + 奶油贴纸面板 + 阳光黄主按钮 + 大圆角 + 3px 深描边 + 硬阴影
   ============================================================ */

:root{
  --ink:#2b3a4a;          /* 深描边 / 主文字 */
  --sky1:#4FACFE;         /* 天蓝渐变上 */
  --sky2:#38B2AC;         /* 天蓝渐变下 */
  --yellow:#FFC93C;       /* 阳光黄主按钮 */
  --green:#7ED321;        /* 草绿 */
  --red:#FF6B6B;          /* 橙红警示 */
  --purple:#9B5DE5;       /* 紫点缀 */
  --orange:#FF9F43;
  --cream:#FFF9EC;        /* 奶油面板底 */
  --dim:#7a8aa0;          /* 次要文字 */
  --mono:Consolas,'Courier New',monospace;
  --cartoon:'Microsoft YaHei','PingFang SC',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{height:100%;}

body{
  font-family:var(--cartoon);
  /* 拉布布潮玩风（提亮版）：暮紫灰→雾蓝→灰绿渐变 + 细波点，奶油面板浮在上面 */
  background:
    radial-gradient(rgba(255,255,255,.12) 2px,transparent 2.6px),
    linear-gradient(165deg,#6B5B78 0%,#4A5B6E 55%,#4A6B62 100%);
  background-size:26px 26px,100% 100%;
  background-attachment:fixed;
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- 屏幕切换 ---------- */
.screen{display:none;min-height:100vh;padding:24px;}
.screen.active{display:block;}

/* ---------- pop-in 回弹动画 ---------- */
.pop{animation:popIn .35s cubic-bezier(.68,-.55,.27,1.55);}
@keyframes popIn{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ---------- 卡通 3D 按钮 ---------- */
.btn{
  font-family:var(--cartoon);
  font-weight:bold;
  font-size:16px;
  letter-spacing:1px;
  color:var(--ink);
  background:#fff;
  border:3px solid var(--ink);
  border-radius:14px;
  padding:12px 24px;
  cursor:pointer;
  box-shadow:0 5px 0 rgba(43,58,74,.9);
  transition:transform .1s,box-shadow .1s;
}
.btn:hover{transform:translateY(-2px) scale(1.03);}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(43,58,74,.9);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.btn-primary{background:var(--yellow);}
.btn-danger{background:var(--red);color:#fff;margin-top:28px;}
.btn-back{padding:8px 14px;font-size:14px;}

.mute-btn{
  position:fixed;top:14px;right:16px;z-index:100;
  background:#fff;border:3px solid var(--ink);border-radius:12px;
  font-size:18px;padding:6px 10px;cursor:pointer;
  box-shadow:0 4px 0 rgba(43,58,74,.9);
}
.mute-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(43,58,74,.9);}

/* ---------- 顶部条 ---------- */
.bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-bottom:3px solid rgba(43,58,74,.2);
  padding-bottom:14px;margin-bottom:24px;
}
.bar h2{
  font-size:24px;letter-spacing:3px;color:#fff;font-weight:bold;
  text-shadow:2px 2px 0 var(--ink);
}

/* ---------- 主菜单 ---------- */
.menu-box{
  max-width:620px;margin:6vh auto 0;text-align:center;
  background:var(--cream);
  border:3px solid var(--ink);border-radius:24px;
  box-shadow:0 8px 0 rgba(43,58,74,.35);
  padding:42px 40px;
}
.game-title{
  font-size:58px;font-weight:bold;letter-spacing:8px;color:var(--yellow);
  text-shadow:3px 3px 0 var(--ink);
}
.title-en{
  font-size:20px;font-weight:bold;letter-spacing:10px;color:var(--sky2);
  margin-top:6px;
}
.game-sub{color:var(--dim);letter-spacing:8px;margin:12px 0 32px;font-size:16px;font-weight:bold;}
.menu-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:340px;margin:0 auto 32px;}
.menu-btns .btn{font-size:16px;padding:12px;}
.menu-btns .btn-primary{grid-column:1 / -1;font-size:18px;padding:14px;}

/* ---------- 段位徽章 / 杯数进度 ---------- */
.tier-box{display:flex;align-items:center;gap:16px;text-align:left;border-top:3px dashed rgba(43,58,74,.2);padding-top:18px;}
.tier-box.wide{
  max-width:640px;margin:0 auto 8px;background:var(--cream);
  border:3px solid var(--ink);border-radius:18px;padding:16px 20px;
  box-shadow:0 5px 0 rgba(43,58,74,.3);
}
.tier-badge{
  width:72px;height:72px;flex:none;border-radius:50%;
  border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:18px;color:var(--ink);
  background:#C9853F;
  box-shadow:0 4px 0 rgba(43,58,74,.4);
}
.tier-info{flex:1;min-width:180px;}
.tier-line{font-size:16px;font-weight:bold;}
.tier-line span{color:var(--orange);font-size:18px;}
.tier-line b{color:var(--ink);}
.xpbar{
  height:14px;border:2px solid var(--ink);border-radius:8px;
  background:#e8e0cf;margin-top:6px;overflow:hidden;
}
.xpbar-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--yellow),var(--orange));
  transition:width .4s;
}
.cup-text{color:var(--dim);font-size:12px;margin-top:4px;}

/* ---------- 面板（浮层 / 通用） ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(43,58,74,.55);
  display:flex;align-items:center;justify-content:center;
}
.hidden{display:none !important;}
.panel{
  background:var(--cream);
  border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 8px 0 rgba(43,58,74,.4);
  padding:34px 46px;text-align:center;min-width:340px;
}
.panel h3{font-size:24px;letter-spacing:4px;margin-bottom:12px;}
.panel-lite{
  background:var(--cream);border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 5px 0 rgba(43,58,74,.3);padding:20px 24px;
}
.stars{font-size:46px;letter-spacing:10px;margin:8px 0 16px;color:var(--yellow);text-shadow:2px 2px 0 #d99a00;}
.stars.s0{color:#c9bfa8;text-shadow:none;}
.result-rows{font-size:16px;line-height:2.1;margin-bottom:22px;text-align:left;}
.result-rows b{color:var(--sky2);}
.unlock-msg.ok{color:#4CAF1D;font-weight:bold;}
.unlock-msg.no{color:var(--red);font-weight:bold;}
.panel-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- 指法图解 ---------- */
.finger-layout{display:flex;gap:28px;flex-wrap:wrap;max-width:1200px;margin:0 auto;align-items:flex-start;}
.finger-left{
  flex:1 1 560px;min-width:320px;
  background:var(--cream);border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 5px 0 rgba(43,58,74,.3);padding:22px;
}
.finger-side{flex:1 1 320px;min-width:280px;}
.finger-side h3{color:var(--orange);letter-spacing:2px;margin:14px 0 8px;font-size:16px;}
.finger-side p,.finger-side li{font-size:14px;line-height:1.9;}
.key-inline{
  display:inline-block;border:2px solid var(--ink);border-radius:6px;background:#fff;
  font-family:var(--mono);font-weight:bold;padding:0 6px;margin:0 2px;
}
.finger-legend,.posture-list{list-style:none;}
.posture-list li::before{content:"▸ ";color:var(--sky2);font-weight:bold;}
.kb-note{margin-top:12px;color:var(--dim);font-size:13px;}

/* 手指颜色变量（键盘键位与图例共用，柔和不刺眼的配色）。
   注意：默认色必须早于本组规则声明，同优先级下后者生效，f-* 才能盖过默认色。 */
.key,.fz{--fc:#8fa3bd;}
.f-lp{--fc:#DE5B57;}   /* 左小指 砖红 */
.f-lr{--fc:#E08A3C;}   /* 左无名指 赭橙 */
.f-lm{--fc:#D9A62E;}   /* 左中指 土黄 */
.f-li{--fc:#6FA53F;}   /* 左食指 橄榄绿 */
.f-ri{--fc:#3D948B;}   /* 右食指 深青 */
.f-rm{--fc:#4A7FC9;}   /* 右中指 靛蓝 */
.f-rr{--fc:#8260C4;}   /* 右无名指 黛紫 */
.f-rp{--fc:#CE62A8;}   /* 右小指 玫红 */
.f-thumb{--fc:#8b99a8;}/* 拇指 灰 */
.chip{
  display:inline-block;width:14px;height:14px;border-radius:4px;
  background:var(--fc);border:2px solid var(--ink);
  margin-right:8px;vertical-align:-2px;
}

/* ---------- 虚拟键盘（奶油白复古主机底座 + 悬浮白键：高级、克制、简洁） ---------- */
/* 键盘底座：暖白渐变 + 柔和投影，顶部留白放左右分区标注 */
.kb{
  user-select:none;position:relative;
  background:linear-gradient(180deg,#F5F1E7 0%,#E8E1CE 100%);
  border:2px solid #C9C0A8;border-radius:18px;
  padding:26px 12px 12px;
  box-shadow:0 12px 28px rgba(0,0,0,.3),inset 0 1px 0 #fff;
}
.kb-row{display:flex;gap:8px;justify-content:center;margin-bottom:8px;}
/* 键帽：纯白渐变 + 底部承托边 + 柔和悬浮投影 */
.key{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:bold;font-size:15px;color:#3a3f4d;
  background:linear-gradient(180deg,#ffffff 0%,#f2f1ec 60%,#e2e0d8 100%);
  border:none;border-radius:9px;
  box-shadow:0 4px 0 #c6bfae,0 6px 10px rgba(90,80,60,.22),inset 0 1px 0 #fff;
  position:relative;
  transition:transform .1s;
}
/* 手指归属提示：键帽底部一小条归属色（不整键荧光描边） */
.key::before{
  content:"";position:absolute;left:7px;right:7px;bottom:2px;height:4px;
  border-radius:2px;background:var(--fc);
}
/* 功能键：暖灰，与白键拉开层次 */
.key-mod{
  font-size:11px;color:#8a8272;
  background:linear-gradient(180deg,#ece7d9,#ddd5c2);
  box-shadow:0 4px 0 #c7bfab,0 6px 10px rgba(90,80,60,.2),inset 0 1px 0 #fff;
}
.key-mod::before{display:none;}
.key-space{width:320px;}
.kb-big .key{width:52px;height:52px;font-size:17px;}
.kb-big .key-space{width:380px;}
.w15{width:68px;}.w18{width:84px;}.w23{width:108px;}
.kb-big .w15{width:78px;}.kb-big .w18{width:96px;}.kb-big .w23{width:126px;}
/* 训练页键盘提示：键帽与字号加大一号，方便练习时辨认 */
#train-keyboard .key{width:52px;height:52px;font-size:18px;}
#train-keyboard .key-mod{font-size:12px;}
#train-keyboard .key-space{width:380px;}
#train-keyboard .w15{width:78px;}#train-keyboard .w18{width:96px;}#train-keyboard .w23{width:126px;}
#train-keyboard .key-jp{font-size:10px;}
#train-keyboard .kb-zoneline text{font-size:13px;}
/* F/J 定位凸点：键帽上的深色触觉小横线 */
.key.bump::after{
  content:"";position:absolute;bottom:9px;left:50%;transform:translateX(-50%);
  width:14px;height:3px;border-radius:2px;background:#8a8272;
}
/* 下一键高亮：整键按下为归属色（下沉 + 投影收浅 = 按压感，不用荧光发光） */
.key.next{
  color:#fff;background:var(--fc);
  transform:translateY(3px);
  box-shadow:0 1px 0 #c6bfae,0 3px 6px rgba(90,80,60,.3);
  animation:keyPress .7s ease-in-out infinite;
}
.key.next::before{display:none;}
.key.next .key-jp{color:#fff;}
@keyframes keyPress{
  0%,100%{transform:translateY(3px);}
  50%{transform:translateY(1px);}
}
/* 左右手分区虚线（JS 按实际键位间隙绘制） */
.kb-zoneline{position:absolute;left:0;top:0;pointer-events:none;}
.kb-zoneline path{
  fill:none;stroke:#A79E89;stroke-width:2.5;stroke-dasharray:8 7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8;
}
.kb-zoneline text{
  font-size:12px;font-weight:bold;fill:#8A8272;letter-spacing:3px;
}
/* 音符模式：键帽右上角的简谱小标注（低调不喧宾夺主） */
.key-jp{
  position:absolute;right:3px;top:2px;
  font-family:var(--mono);font-size:9px;line-height:1;font-weight:normal;
  color:#9a937f;
}
body.music-off .key-jp{display:none;}

/* ---------- 手指指示区（键盘下方，颜色与键帽一致） ---------- */
.fzones{display:flex;gap:6px;justify-content:center;margin-top:12px;user-select:none;}
.fz{
  min-width:44px;padding:4px 8px;text-align:center;
  font-size:12px;font-weight:bold;color:var(--fc);
  background:#fff;border:2px solid var(--fc);border-bottom-width:4px;border-radius:8px;
  box-shadow:0 2px 0 rgba(43,58,74,.2);
  opacity:.55;transition:transform .1s;
}
.fz-thumb{min-width:64px;}
/* 左右手分组：食指与拇指之间留缝，暗示两手分界 */
.fz.f-li{margin-right:10px;}
.fz.f-ri{margin-left:10px;}
.fz.on{
  opacity:1;transform:translateY(-2px);
  background:var(--fc);color:#fff;border-color:var(--ink);
  box-shadow:0 3px 0 rgba(43,58,74,.25);
}
.kb-big + .fzones .fz{min-width:52px;font-size:13px;}
/* 音符开关关闭态 */
.btn.off{filter:grayscale(1);opacity:.6;}
/* 音符模式小彩蛋提示（虚拟键盘下方，低调一行） */
.music-hint{
  max-width:900px;margin:14px auto 0;text-align:center;
  color:rgba(255,255,255,.8);font-size:12px;font-weight:bold;
  text-shadow:1px 1px 0 rgba(43,58,74,.4);
}

/* ---------- 关卡选择 ---------- */
.level-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;max-width:1100px;margin:0 auto;
}
.level-card{
  font-family:var(--cartoon);
  position:relative;text-align:left;cursor:pointer;
  background:#fff;border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 4px 0 rgba(43,58,74,.3);
  color:var(--ink);padding:16px 14px;transition:transform .12s,box-shadow .12s;
}
.level-card:hover:not(.locked){transform:translateY(-3px) scale(1.02);box-shadow:0 7px 0 rgba(43,58,74,.3);}
.level-card.locked{filter:grayscale(1);opacity:.5;cursor:not-allowed;}
.lv-num{color:var(--dim);font-size:12px;font-weight:bold;letter-spacing:2px;}
.lv-name{color:var(--sky2);font-size:17px;font-weight:bold;margin:6px 0 4px;}
.lv-keys{color:var(--orange);font-family:var(--mono);font-weight:bold;font-size:13px;letter-spacing:2px;}
.lv-stars{color:var(--yellow);font-size:17px;margin-top:8px;letter-spacing:3px;text-shadow:1px 1px 0 #d99a00;}
.lv-lock{position:absolute;top:10px;right:12px;font-size:14px;}

/* ---------- 训练界面 ---------- */
/* 顶栏：奶油贴纸盒式横条（与其他面板统一），居中限宽 */
#screen-train .bar{
  max-width:1060px;margin:0 auto 18px;
  background:var(--cream);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 5px 0 rgba(43,58,74,.3);padding:10px 16px;
}
#screen-train .train-head h2{color:var(--ink);text-shadow:none;}
#screen-train .train-tip{color:var(--dim);}
.train-head{flex:1;min-width:220px;}
.train-head h2{font-size:20px;color:#fff;text-shadow:2px 2px 0 var(--ink);}
.train-tip{color:rgba(255,255,255,.85);font-size:13px;margin-top:4px;font-weight:bold;}
.hidekb{
  color:#fff;font-size:13px;font-weight:bold;cursor:pointer;
  background:rgba(43,58,74,.35);border-radius:10px;padding:8px 12px;
}
.hidekb input{accent-color:var(--yellow);cursor:pointer;}

/* 数据条：键盘下方一行（参照参考版式），胶囊 + 进度条同行 */
.train-stats{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  max-width:900px;margin:16px auto 0;
}
.ts-item{
  background:#fff;border:3px solid var(--ink);border-radius:999px;
  padding:8px 20px;box-shadow:0 4px 0 rgba(0,0,0,.35);
  font-size:15px;font-weight:bold;color:var(--ink);white-space:nowrap;
}
.ts-item b{color:var(--sky2);font-size:20px;margin-left:6px;}
.progress{
  flex:1;min-width:160px;height:14px;
  border:3px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.9);
  overflow:hidden;
}
#train-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--yellow));transition:width .15s;}

.train-text{
  max-width:900px;margin:0 auto 18px;
  font-family:var(--mono);
  font-size:28px;line-height:1.6;letter-spacing:0;
  background:var(--cream);
  border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 5px 0 rgba(43,58,74,.3);
  padding:18px 24px;
  white-space:nowrap;overflow:hidden;text-align:center;
}
.train-text.flash-bad{animation:flashBad .3s;}
@keyframes flashBad{50%{border-color:var(--red);background:#ffe3e3;}}

/* 音符模式：字符格 = 字符在上、简谱标注在下，等宽居中排列 */
.ch{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-width:22px;margin:0 1px;
  color:#9aa7b8;
}
.ch-key{line-height:1.15;}
.ch-jp{
  font-family:var(--mono);font-size:13px;line-height:1.2;min-height:16px;
  font-weight:normal;opacity:.6;
}
body.music-off .ch-jp{display:none;} /* 音符模式关闭：与旧版外观一致 */
.ch.done{color:#4CAF1D;font-weight:bold;}
.ch.cur{color:var(--ink);box-shadow:inset 0 -4px 0 var(--yellow);animation:curBlink 1s step-end infinite;}
@keyframes curBlink{50%{box-shadow:inset 0 -4px 0 transparent;}}
.ch.badflash{color:#fff;background:var(--red);border-radius:6px;}

/* 「下一键」大提示：巨型立体键帽 + 手指胶囊标签 */
.next-hero{
  display:flex;align-items:center;justify-content:center;gap:20px;
  max-width:900px;margin:0 auto 16px;min-height:100px;
}
.nk-cap{
  --fc:#8fa3bd;
  width:92px;height:92px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:bold;font-size:46px;color:#4a4336;
  background:linear-gradient(#fffdf7,#eee7d6);
  border:3px solid var(--ink);border-bottom-width:8px;border-radius:20px;
  box-shadow:0 6px 0 rgba(0,0,0,.35),0 0 0 5px var(--fc); /* 外圈 = 手指归属色 */
}
.nk-meta{text-align:left;}
.nk-label{color:rgba(255,255,255,.8);font-size:13px;font-weight:bold;letter-spacing:6px;text-shadow:1px 1px 0 rgba(43,58,74,.5);}
.nk-finger{
  --fc:#8fa3bd;
  display:inline-block;margin-top:8px;padding:8px 22px;border-radius:999px;
  background:var(--fc);color:#fff;font-size:22px;font-weight:bold;letter-spacing:3px;
  border:3px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.nk-shift{margin-top:10px;color:var(--yellow);font-weight:bold;font-size:15px;letter-spacing:1px;}
/* 键盘区域：金属底座本身就是面板，外层只是限宽容器（参照参考版式 1060px） */
.train-kb-wrap{max-width:1060px;margin:0 auto;}

/* ---------- 英雄选择 / 英雄墙 ---------- */
.heroes-tip{
  max-width:900px;margin:0 auto 20px;text-align:center;
  color:#fff;font-weight:bold;font-size:15px;
  text-shadow:1px 1px 0 rgba(43,58,74,.5);
}
.hero-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px;max-width:1000px;margin:0 auto;
}
.hero-grid.small{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:900px;}
.hero-card{
  font-family:var(--cartoon);
  text-align:center;cursor:pointer;
  background:#fff;border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 5px 0 rgba(43,58,74,.3);
  color:var(--ink);padding:24px 16px;transition:transform .12s,box-shadow .12s;
}
.hero-card:hover:not(.locked){transform:translateY(-4px) scale(1.03);box-shadow:0 9px 0 rgba(43,58,74,.3);}
.hero-card.locked{filter:grayscale(1);opacity:.55;cursor:not-allowed;}
.hero-card.mini{padding:14px 10px;cursor:default;}
.hero-emoji{font-size:52px;}
.mini .hero-emoji{font-size:34px;}
.hero-name{font-size:20px;font-weight:bold;margin:8px 0 6px;}
.mini .hero-name{font-size:15px;}
.hero-desc{color:var(--dim);font-size:12px;line-height:1.8;}
.hero-best{margin-top:10px;color:var(--orange);font-weight:bold;font-size:14px;}
.hero-lock{margin-top:10px;color:var(--dim);font-weight:bold;font-size:13px;}

/* ---------- 保卫战 HUD ---------- */
.battle-hud{font-size:14px;font-weight:bold;color:#fff;text-shadow:1px 1px 0 rgba(43,58,74,.5);}
.hud-item b{color:var(--yellow);font-size:18px;margin-left:4px;}
.hpbar{
  display:inline-block;width:130px;height:14px;vertical-align:-2px;
  border:2px solid var(--ink);border-radius:8px;background:rgba(255,255,255,.6);
  overflow:hidden;
}
#battle-hp-fill{display:block;height:100%;width:100%;transition:width .2s;}
#battle-hp-fill.hp-ok{background:var(--green);}
#battle-hp-fill.hp-warn{background:var(--yellow);}
#battle-hp-fill.hp-low{background:var(--red);}

/* ---------- 保卫战战场（5 条草坪道） ---------- */
.battle-field{
  position:relative;overflow:hidden;
  height:calc(100vh - 110px);min-height:400px;
  border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 5px 0 rgba(43,58,74,.3);
  /* 两条深浅绿交替条纹（5 路 = 5 个 20% 色带） */
  background:linear-gradient(180deg,
    #93D94E 0%,#93D94E 20%,
    #82C93F 20%,#82C93F 40%,
    #93D94E 40%,#93D94E 60%,
    #82C93F 60%,#82C93F 80%,
    #93D94E 80%,#93D94E 100%);
}
.battle-field.shake{animation:shake .4s;}
.battle-field.bitten{animation:biteFlash .45s;}
.battle-field.shake.bitten{animation:shake .4s,biteFlash .45s;}
@keyframes shake{
  10%{transform:translate(-8px,2px);}30%{transform:translate(7px,-3px);}
  50%{transform:translate(-5px,1px);}70%{transform:translate(4px,2px);}
  90%{transform:translate(-2px,-1px);}
}
@keyframes biteFlash{
  0%{box-shadow:inset 0 0 0 999px rgba(255,60,60,.35);}
  100%{box-shadow:inset 0 0 0 999px rgba(255,60,60,0);}
}

/* 左端基地列 */
.base-col{
  position:absolute;left:0;top:0;bottom:0;width:64px;z-index:2;
  display:flex;flex-direction:column;justify-content:space-around;align-items:center;
  background:linear-gradient(90deg,#C68E5F,#B37A4B);
  border-right:3px solid var(--ink);
  font-size:30px;
}
.base-col span{transition:transform .2s;}
.base-col .b-hurt{animation:hurtHouse .5s;}

/* 敌人 */
.enemy{
  position:absolute;left:0;top:0;text-align:center;z-index:3;
  will-change:transform;pointer-events:none;
}
.e-label{
  display:inline-block;
  background:#fff;border:2px solid var(--ink);border-radius:10px;
  font-family:var(--mono);font-weight:bold;font-size:15px;
  padding:0 8px;margin-bottom:2px;
}
.e-emoji{
  font-size:38px;
  animation:sway .55s ease-in-out infinite;
  transform-origin:bottom center;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.3));
}
.e-elite .e-emoji{font-size:44px;}
.e-boss .e-emoji{font-size:68px;} /* BOSS 体型 ×1.8 */
.e-boss .e-label{font-size:17px;}
/* 快速虫：细长小体型 */
.e-fast .e-emoji{font-size:28px;}
.e-fast .e-label{font-size:13px;background:#FFF3C4;}
/* 盾牌兵：盾键胶囊 */
.e-shield .shield-key{
  display:inline-block;margin-right:6px;padding:0 6px;
  background:var(--red);color:#fff;border:2px solid var(--ink);
  border-radius:8px;font-family:var(--mono);font-weight:bold;
}
.e-shield.shield-on .e-emoji{animation:shieldGlow 1s ease-in-out infinite;}
@keyframes shieldGlow{
  0%,100%{filter:drop-shadow(0 3px 2px rgba(0,0,0,.3)) drop-shadow(0 0 0 rgba(255,80,80,0));}
  50%{filter:drop-shadow(0 3px 2px rgba(0,0,0,.3)) drop-shadow(0 0 10px rgba(255,80,80,.8));}
}
/* 诱饵：紫雾感，需仔细辨认 */
.e-bait .e-label{background:#EDE7FF;border-color:#9B6BE8;}
.e-bait .e-emoji{opacity:.85;}
.e-bait .bait-mark{
  position:absolute;right:-4px;top:-14px;font-size:13px;
  transform:rotate(12deg);
  animation:baitBlink 1.2s steps(2) infinite;
}
@keyframes baitBlink{0%{opacity:1;}100%{opacity:.25;}}
/* 危险预警：进入警戒区红色警告 */
.enemy.danger .e-label{
  border-color:var(--red);
  animation:dangerPulse .5s ease-in-out infinite;
}
.enemy.danger .e-emoji{
  animation:sway .55s ease-in-out infinite,dangerPulse .5s ease-in-out infinite;
}
@keyframes dangerPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,60,60,0);}
  50%{box-shadow:0 0 0 6px rgba(255,60,60,.45);}
}
@keyframes sway{
  0%,100%{transform:rotate(-7deg);}
  50%{transform:rotate(7deg);}
}
.enemy.locked .e-label{
  border-color:var(--orange);
  box-shadow:0 0 0 3px var(--yellow),0 0 14px var(--yellow);
}
/* 锁定准星：悬在敌人上方 */
.enemy.locked .lock-reticle{
  display:block;
}
.lock-reticle{
  display:none;margin:0 auto 2px;width:0;height:0;position:relative;
}
.lock-reticle::before{
  content:'🎯';position:absolute;left:50%;top:0;font-size:20px;
  transform:translateX(-50%);
  animation:reticleSpin 1.4s ease-in-out infinite;
}
@keyframes reticleSpin{
  0%,100%{transform:translateX(-50%) rotate(-8deg);}
  50%{transform:translateX(-50%) rotate(8deg);}
}
.e-ch.hit{color:#4CAF1D;}
/* 冰冻：敌人整体青蓝 + 减速 */
.enemy.frozen{filter:drop-shadow(0 0 8px #7CD8FF) saturate(.6) hue-rotate(150deg);}
/* 击杀：弹跳缩放消失 */
.enemy.dying .e-emoji,.enemy.dying .e-label{animation:diePop .22s forwards;}
.enemy.dying .shield-key{animation:diePop .22s forwards;}
@keyframes diePop{
  0%{transform:scale(1);}
  50%{transform:scale(1.4);}
  100%{transform:scale(0);opacity:0;}
}
/* 击杀碎屑：字母碎片飞散 */
.debris{
  position:absolute;z-index:5;pointer-events:none;
  font-family:var(--mono);font-weight:bold;font-size:15px;color:#fff;
  text-shadow:1px 1px 0 var(--ink);
  animation:debrisFly .6s ease-out forwards;
}
@keyframes debrisFly{
  0%{transform:translate(0,0) rotate(0);opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0;}
}

/* 爆分小字 / COMBO 大字 */
.pop-text{
  position:absolute;z-index:5;pointer-events:none;
  font-weight:bold;font-size:18px;color:#fff;
  text-shadow:2px 2px 0 var(--ink);
  animation:floatUp .8s forwards;
}
@keyframes floatUp{
  0%{transform:translateY(0);opacity:1;}
  100%{transform:translateY(-50px);opacity:0;}
}
.combo-pop{
  position:absolute;left:50%;top:16%;z-index:6;pointer-events:none;
  transform:translateX(-50%);
  font-size:42px;font-weight:bold;color:var(--yellow);
  text-shadow:3px 3px 0 var(--ink);
  animation:comboBounce .9s forwards;
}
@keyframes comboBounce{
  0%{transform:translateX(-50%) scale(0);}
  40%{transform:translateX(-50%) scale(1.3);}
  60%{transform:translateX(-50%) scale(1);}
  100%{transform:translateX(-50%) scale(1) translateY(-30px);opacity:0;}
}

/* 波次横幅 / 暂停浮层 */
.battle-overlay{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:rgba(43,58,74,.35);pointer-events:none;
}
/* 暂停浮层可点击恢复（波次横幅保持穿透） */
#battle-pause-overlay{pointer-events:auto;cursor:pointer;}
.battle-overlay span{
  font-size:36px;font-weight:bold;letter-spacing:6px;color:var(--ink);
  background:var(--yellow);
  border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 6px 0 rgba(43,58,74,.4);
  padding:16px 40px;
  animation:bannerIn .45s cubic-bezier(.68,-.55,.27,1.55);
}
@keyframes bannerIn{
  from{transform:scale(0) rotate(-6deg);opacity:0;}
  to{transform:scale(1) rotate(0);opacity:1;}
}

/* ---------- 保卫战 · 技能能量条 ---------- */
.hud-item.energy{display:inline-flex;align-items:center;gap:4px;}
.ebar{
  display:inline-block;width:70px;height:12px;vertical-align:-2px;
  border:2px solid var(--ink);border-radius:8px;background:rgba(255,255,255,.6);
  overflow:hidden;
}
#battle-energy-fill{display:block;height:100%;width:0;background:var(--yellow);transition:width .15s;}
.hud-item.energy.full{animation:energyBlink .6s steps(2) infinite;}
@keyframes energyBlink{0%{opacity:1;}100%{opacity:.55;}}

/* ---------- 保卫战 · 技能提示 / 道具横幅 ---------- */
.skill-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:8;
  background:var(--cream);border:3px solid var(--ink);border-radius:14px;
  padding:10px 18px;font-size:15px;font-weight:bold;color:var(--ink);
  box-shadow:0 5px 0 rgba(43,58,74,.35);
  animation:bannerIn .45s cubic-bezier(.68,-.55,.27,1.55);
  pointer-events:none;
}
.skill-hint b{color:var(--orange);font-size:17px;margin:0 2px;}
.item-banner{
  position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:9;
  font-size:30px;font-weight:bold;color:var(--yellow);
  text-shadow:3px 3px 0 var(--ink);
  animation:comboBounce .9s forwards;
  pointer-events:none;
}

/* ---------- 保卫战 · 局内升级三选一 ---------- */
.upgrade-overlay{
  position:absolute;inset:0;z-index:11;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(43,58,74,.55);pointer-events:auto;
}
.upgrade-title{
  font-size:30px;font-weight:bold;color:var(--yellow);
  text-shadow:3px 3px 0 var(--ink);margin-bottom:22px;letter-spacing:4px;
}
.upgrade-cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.upgrade-card{
  width:190px;background:var(--cream);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 6px 0 rgba(43,58,74,.4);
  padding:18px 14px;text-align:center;cursor:pointer;
  transition:transform .12s;
}
.upgrade-card:hover{transform:translateY(-5px) scale(1.04);}
.upgrade-card .u-icon{font-size:38px;margin-bottom:8px;}
.upgrade-card .u-name{font-size:17px;font-weight:bold;color:var(--ink);margin-bottom:8px;}
.upgrade-card .u-desc{font-size:13px;color:var(--dim);font-weight:bold;line-height:1.5;}
.upgrade-card .u-key{display:inline-block;margin-top:10px;font-size:12px;color:var(--orange);font-weight:bold;}
.upgrade-skip{
  margin-top:22px;font-size:14px;font-weight:bold;color:#fff;cursor:pointer;
  text-shadow:1px 1px 0 var(--ink);opacity:.8;
}
.upgrade-skip:hover{opacity:1;}

/* ---------- 完美防守 · 全屏金色特效 ---------- */
.battle-field.perfect-flash{animation:perfectFlash .8s;}
@keyframes perfectFlash{
  0%{box-shadow:inset 0 0 0 999px rgba(255,201,60,.55);}
  100%{box-shadow:inset 0 0 0 999px rgba(255,201,60,0);}
}
.perfect-pop{
  position:absolute;left:50%;top:30%;z-index:7;pointer-events:none;
  transform:translateX(-50%);
  font-size:64px;font-weight:bold;color:var(--yellow);
  text-shadow:4px 4px 0 var(--ink);letter-spacing:8px;
  animation:perfectPop 1.4s forwards;
}
@keyframes perfectPop{
  0%{transform:translateX(-50%) scale(0) rotate(-10deg);opacity:0;}
  30%{transform:translateX(-50%) scale(1.25) rotate(2deg);opacity:1;}
  60%{transform:translateX(-50%) scale(1);}
  100%{transform:translateX(-50%) scale(1) translateY(-40px);opacity:0;}
}

/* ---------- 基地被咬 ---------- */
@keyframes hurtHouse{
  0%,100%{transform:scale(1);}
  40%{transform:scale(1.3) rotate(-10deg);}
  70%{transform:scale(.9);}
}

/* ---------- 每日挑战卡 ---------- */
.daily-card{
  max-width:760px;margin:14px auto 20px;padding:14px 22px;
  background:linear-gradient(135deg,#FFF3C4,#FFE28A);
  border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 5px 0 rgba(43,58,74,.35);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  color:var(--ink);
}
.daily-card .dc-icon{font-size:40px;}
.daily-card .dc-info{flex:1;min-width:220px;text-align:left;}
.daily-card .dc-title{font-size:16px;font-weight:bold;margin-bottom:4px;}
.daily-card .dc-desc{font-size:13px;color:#6B5B2E;font-weight:bold;}
.daily-card .dc-state{font-size:14px;font-weight:bold;color:var(--green);}

/* ---------- 成就 toast ---------- */
.ach-toast{
  position:fixed;top:16px;right:16px;z-index:100;
  background:var(--cream);border:3px solid var(--ink);border-radius:14px;
  box-shadow:0 5px 0 rgba(43,58,74,.4);
  padding:12px 20px;display:flex;align-items:center;gap:12px;
  animation:toastIn .4s cubic-bezier(.68,-.55,.27,1.55);
}
.ach-toast .at-icon{font-size:30px;}
.ach-toast .at-name{font-size:16px;font-weight:bold;color:var(--ink);}
.ach-toast .at-desc{font-size:12px;color:var(--dim);font-weight:bold;margin-top:2px;}
.ach-toast .at-cups{font-size:14px;font-weight:bold;color:var(--orange);}
@keyframes toastIn{
  from{transform:translateX(120%);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}

.over-panel{margin:10vh auto 0;max-width:460px;}
.newbest{
  color:var(--orange);font-size:18px;font-weight:bold;letter-spacing:3px;margin-bottom:10px;
  animation:comboBounce2 1s infinite;
}
@keyframes comboBounce2{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

/* ---------- 战绩页 ---------- */
.sec-title{
  max-width:900px;margin:26px auto 14px;color:#fff;font-size:18px;letter-spacing:3px;
  text-shadow:2px 2px 0 var(--ink);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;max-width:900px;margin:0 auto;
}
.stat-card{
  background:var(--cream);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 4px 0 rgba(43,58,74,.3);
  padding:18px 12px;text-align:center;
}
.stat-num{color:var(--sky2);font-size:24px;font-weight:bold;margin-bottom:6px;}
.stat-label{color:var(--dim);font-size:13px;font-weight:bold;letter-spacing:2px;}
#screen-stats{text-align:center;}
#screen-stats .bar{text-align:left;}

/* 成就墙 */
.ach-wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;max-width:900px;margin:0 auto;
}
.ach-card{
  background:var(--cream);border:3px solid var(--ink);border-radius:14px;
  box-shadow:0 4px 0 rgba(43,58,74,.3);
  padding:14px 10px;text-align:center;
}
.ach-card .ach-icon{font-size:30px;margin-bottom:6px;}
.ach-card .ach-name{font-size:14px;font-weight:bold;color:var(--ink);margin-bottom:4px;}
.ach-card .ach-desc{font-size:11px;color:var(--dim);font-weight:bold;margin-bottom:6px;line-height:1.4;}
.ach-card .ach-cups{font-size:12px;font-weight:bold;color:var(--orange);}
.ach-card.locked{opacity:.55;filter:grayscale(.7);}

/* ---------- 窄屏适配 ---------- */
@media (max-width:720px){
  .game-title{font-size:38px;letter-spacing:5px;}
  .train-text{font-size:20px;letter-spacing:2px;padding:14px;}
  .key{width:30px;height:38px;font-size:12px;border-width:2px;}
  .key-space{width:160px;}
  .w15{width:44px;}.w18{width:56px;}.w23{width:72px;}
  /* 训练页键盘在窄屏也相应缩小（覆盖上面加大一号的规则） */
  #train-keyboard .key{width:34px;height:42px;font-size:13px;}
  #train-keyboard .key-space{width:180px;}
  #train-keyboard .w15{width:50px;}#train-keyboard .w18{width:62px;}#train-keyboard .w23{width:80px;}
  .combo-pop{font-size:30px;}
  .battle-overlay span{font-size:26px;padding:12px 24px;}
}