/* =========================================
   小小打字侠 · 小学生打字游戏 · 样式
   ========================================= */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#f2f4ff;
  background:#080b22;
  overflow:hidden;
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
button{font-family:inherit;color:inherit}
.hidden{display:none !important}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ---------- 顶部状态栏 ---------- */
#hud{
  flex:0 0 auto;z-index:6;
  display:flex;align-items:center;gap:clamp(4px,1.6vw,16px);
  padding:6px clamp(8px,2.4vw,18px);
  background:linear-gradient(180deg,#151b41,#0f1434);
  border-bottom:1px solid #2a3167;
}
.hud-cell{display:flex;flex-direction:column;align-items:center;line-height:1.12;min-width:clamp(40px,12vw,74px)}
.hud-label{font-size:clamp(9px,2.5vw,12px);color:#a9b0e0;letter-spacing:.08em}
.hud-value{
  display:block;
  font-size:clamp(15px,4.4vw,22px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  transition:color .2s;
}
.hud-value.pop{animation:pop .28s ease}
.hud-value.hot{color:#ffd166}
.hud-value.urgent{color:#ff8080}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}

.hud-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;
  border-radius:12px;border:1px solid #3a4489;background:#1d2456;
  cursor:pointer;transition:background .12s,transform .08s;
}
.icon-btn:active{transform:scale(.94);background:#2a3270}
.icon-btn svg{width:20px;height:20px}
.icon-btn .ic-off{display:none}
.icon-btn[data-muted="true"] .ic-on{display:none}
.icon-btn[data-muted="true"] .ic-off{display:block}
.icon-btn.wide{font-size:clamp(12px,3.2vw,14px);font-weight:700;padding:0 12px}

/* ---------- 游戏舞台 ---------- */
#stage{
  position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 0%,#1c2458 0%,#0e1234 55%,#070a1f 100%);
}
#game-canvas{display:block;width:100%;height:100%;touch-action:none}

/* ---------- 弹层通用 ---------- */
.overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vw,26px);
  background:rgba(7,10,31,.74);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  overflow-y:auto;
}
.panel{
  width:min(460px,100%);margin:auto;
  background:linear-gradient(180deg,#242c60,#1a2050);
  border:1px solid #3a4489;border-radius:22px;
  padding:clamp(16px,4.4vw,28px) clamp(14px,4vw,26px);
  text-align:center;
  box-shadow:0 26px 70px rgba(0,0,0,.6);
}
.hero{margin-bottom:4px}
.hero svg{
  width:clamp(66px,19vw,100px);height:auto;
  filter:drop-shadow(0 8px 18px rgba(255,159,67,.45));
  animation:float 3.2s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.panel h1{font-size:clamp(22px,6.6vw,30px);letter-spacing:.06em;margin:4px 0 2px}
.panel h2{font-size:clamp(19px,5.6vw,24px);margin:2px 0 12px}
.subtitle{color:#a9b0e0;font-size:clamp(12px,3.4vw,14px);margin-bottom:14px}

/* ---------- 难度选择 ---------- */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,2vw,10px);margin:6px 0 16px}
.diff-btn{
  appearance:none;-webkit-appearance:none;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 4px;border-radius:16px;border:2px solid #39427e;background:#1d2456;
  cursor:pointer;
  transition:transform .12s,border-color .12s,background .12s,box-shadow .12s;
}
.diff-btn svg{width:clamp(20px,5.6vw,28px);height:auto;stroke:#ffd166;stroke-width:1.8}
.diff-btn strong{font-size:clamp(11px,3.1vw,14px)}
.diff-btn small{color:#a9b0e0;font-size:clamp(9px,2.7vw,12px)}
.diff-btn.is-active{
  border-color:#ffd166;background:#2b356f;
  box-shadow:0 0 0 3px rgba(255,209,102,.16);
  transform:translateY(-2px);
}
.diff-btn:active{transform:scale(.96)}

/* ---------- 按钮 ---------- */
.btn-primary{
  width:100%;appearance:none;-webkit-appearance:none;border:none;border-radius:16px;
  padding:14px 18px;font-size:clamp(16px,4.6vw,19px);font-weight:800;color:#3d2700;
  background:linear-gradient(180deg,#ffe08a,#ffb337);
  cursor:pointer;
  box-shadow:0 5px 0 #b5761a,0 12px 26px rgba(255,159,67,.35);
  transition:transform .09s,box-shadow .09s;
}
.btn-primary:active{transform:translateY(4px);box-shadow:0 1px 0 #b5761a,0 6px 14px rgba(255,159,67,.3)}
.btn-secondary{
  width:100%;margin-top:10px;appearance:none;-webkit-appearance:none;
  border-radius:16px;padding:12px 18px;
  font-size:clamp(14px,4vw,16px);font-weight:700;color:#e8ebff;
  background:#2a3270;border:2px solid #414c96;
  cursor:pointer;box-shadow:0 4px 0 #1a2050;
  transition:transform .09s,box-shadow .09s;
}
.btn-secondary:active{transform:translateY(3px);box-shadow:0 1px 0 #1a2050}

.best-line{margin-top:12px;color:#a9b0e0;font-size:clamp(11px,3.2vw,13px)}
.best-line b{color:#ffd166;font-size:1.15em}
.tips{margin-top:10px;color:#8b93cb;font-size:clamp(10px,2.9vw,12px);line-height:1.65}

/* ---------- 结算面板 ---------- */
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}
.result-cell{
  display:flex;flex-direction:column;gap:3px;
  background:#151b41;border:1px solid #333c78;border-radius:14px;padding:10px 6px;
}
.result-cell span{color:#a9b0e0;font-size:clamp(10px,2.9vw,12px)}
.result-cell b{font-size:clamp(17px,5vw,22px);color:#ffe08a;font-variant-numeric:tabular-nums}
.newbest{
  color:#ffd166;font-weight:800;font-size:clamp(13px,3.8vw,15px);
  margin-bottom:8px;animation:blink 1.1s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- 屏幕键盘 ---------- */
#keyboard-wrap{
  flex:0 0 auto;
  padding:6px clamp(6px,2vw,16px) calc(8px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#111637,#0a0e29);
  border-top:1px solid #2a3167;
}
.kb-legend{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,2.4vw,16px);
  font-size:clamp(9px,2.5vw,11px);color:#9aa2d8;margin-bottom:5px;
}
.kb-legend span{display:inline-flex;align-items:center;gap:4px}
.kb-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.kb-legend em{font-style:normal;color:#6f77b0}

#keyboard{display:flex;flex-direction:column;gap:clamp(4px,1.1vw,7px);max-width:700px;margin:0 auto}
.kb-row{display:flex;justify-content:center;gap:clamp(3px,1vw,7px)}
.key{
  position:relative;flex:1 1 0;min-width:0;max-width:62px;
  height:clamp(36px,8vh,52px);
  border-radius:11px;border:1px solid #3c467f;
  background:linear-gradient(180deg,#2b3470,#21295a);
  font-weight:800;font-size:clamp(12px,3.4vw,17px);
  cursor:pointer;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  padding-bottom:5px;
  transition:transform .06s,background .1s,box-shadow .12s;
}
.key::before{
  content:"";position:absolute;left:12%;right:12%;bottom:3px;height:3px;
  border-radius:2px;background:var(--fc,#5a67b8);opacity:.85;
}
.key:active{transform:translateY(2px);background:#39447f}
.key.wrong{background:#5a2340;border-color:#ff6b6b;color:#ffdada;transform:translateY(2px)}
.key.hint{
  background:linear-gradient(180deg,#ffdf8f,#ffb94f);
  border-color:#ffe6a6;color:#4a2c00;
  animation:hintPulse 1s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,209,102,.28),0 0 14px rgba(255,183,77,.45)}
  50%{box-shadow:0 0 0 5px rgba(255,209,102,.5),0 0 26px rgba(255,183,77,.9)}
}

@media (max-width:520px){
  .kb-legend em{display:none}
  .hud-actions{gap:4px}
  .icon-btn{min-width:34px;height:34px;padding:0 8px}
  .icon-btn svg{width:18px;height:18px}
}
@media (max-height:560px){
  .kb-legend{display:none}
  .hero{display:none}
}