/* ============================================================
 * style.css —— 弹特钢琴
 * ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  overscroll-behavior: none;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: #0f1115; color: #e8ebf2;
  -webkit-user-select: none; user-select: none;
}
body { touch-action: manipulation; }

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

/* ---------------- 状态栏 ---------------- */
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  background: linear-gradient(#1a1e26, #14171e);
  border-bottom: 1px solid #262b36;
  flex: 0 0 auto;
  z-index: 30;
}
.brand { display: flex; align-items: baseline; gap: 7px; flex: 0 0 auto; }
.brand b { font-size: 15px; letter-spacing: .5px; }
.brand .sub { font-size: 10.5px; color: #7f8ba3; }

#status { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.chip {
  font-size: 11.5px; line-height: 1; padding: 5px 8px;
  background: #1e2330; border: 1px solid #2b3242; border-radius: 999px;
  color: #9aa6bd; white-space: nowrap; flex: 0 0 auto;
}
.chip.badge { background: #14304d; border-color: #2a6fb0; color: #bfe0ff; }
.chip.badge b { color: #fff; font-size: 12px; margin-right: 5px; }
.chip.badge span { color: #79b8ef; }
.chip.key { color: #8fd8b0; border-color: #274a3a; background: #14261f; }
.chip.next { color: #d8c98f; border-color: #4a4327; background: #262314; }
.chip.warn { color: #ff9d94; border-color: #5a2b26; background: #2c1614; }
.chip.warn[data-kind="out"] { color: #ffca8a; border-color: #5a4526; background: #2c2314; }
.chip.voice.hot { color: #ffca8a; border-color: #5a4526; }
.chip[data-state="synth"] { color: #ffca8a; border-color: #5a4526; background: #2c2314; }
.chip[data-state="ok"] { color: #8fd8b0; border-color: #274a3a; background: #14261f; }
/* 顶栏力度：按下的瞬间出现，松键后短暂保留 */
.chip.vel {
  display: inline-flex; align-items: center; gap: 6px;
  background: #16202e; border-color: #2b3d55; color: #8fa3c0; min-width: 96px;
}
.chip.vel b { font-size: 12.5px; color: #fff; font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
.chip.vel i { display: block; height: 4px; width: 0; border-radius: 2px; background: #5aa2ff; transition: width .07s linear; }
.chip.vel[data-level="mid"] { border-color: #5a4526; }
.chip.vel[data-level="mid"] i { background: #e8b45a; }
.chip.vel[data-level="hi"] { border-color: #6b2f26; }
.chip.vel[data-level="hi"] i { background: #ff8a5c; }

#pedalChips { display: flex; gap: 5px; flex: 0 0 auto; }
.pchip {
  font-size: 11px; padding: 5px 8px; border-radius: 6px;
  background: #1a1e27; border: 1px solid #2a3040;
  color: #6d7890; transition: all .15s;
}
.pchip.on { background: #173a2a; border-color: #2f7d55; color: #8ff0bd; }
.pchip.half { background: #17303a; border-color: #2f6d7d; color: #8fd8ff; }
.pchip.locked { box-shadow: inset 0 0 0 1px #3fbf7f; }

/* ---------------- 琴键区 ---------------- */
#stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#kb {
  display: block; width: 100%; height: 100%;
  touch-action: none; cursor: pointer;
}
#progress {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: rgba(255,255,255,.06); opacity: 1; transition: opacity .5s;
  pointer-events: none; z-index: 5;
}
#progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #4a9eff, #7ce0b0);
  box-shadow: 0 0 8px rgba(90,170,255,.7);
  transition: width .2s;
}
#progress.done i { background: #43c98a; }

#hint {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  max-width: min(720px, 94%); padding: 9px 14px;
  background: rgba(12,14,19,.86); border: 1px solid #2a3141; border-radius: 10px;
  color: #aab4c8; font-size: 12px; line-height: 1.65; text-align: center;
  backdrop-filter: blur(6px); z-index: 6; pointer-events: none;
  transition: opacity .5s, transform .5s;
}
#hint p { margin: 2px 0; }
#hint em { color: #8fd8ff; font-style: normal; }
#hint .fine { color: #6d7890; font-size: 11px; }
#hint.gone { opacity: 0; transform: translate(-50%, -8px); }

/* 旋律识别中心卡片（利用琴键上方的大片留白） */
#stageCard {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  min-width: min(360px, 80%); padding: 16px 26px;
  text-align: center; pointer-events: none;
  background: rgba(16, 20, 28, .82);
  border: 1px solid #2b3446; border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .35s, transform .35s;
}
#stageCard.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#stageCard .mel { font-size: clamp(17px, 3vw, 22px); font-weight: 700; color: #fff; letter-spacing: 1px; }
#stageCard .conf { font-size: 12px; color: #7fc8ff; margin-top: 3px; }
#stageCard .nx { display: flex; gap: 7px; justify-content: center; margin-top: 11px; flex-wrap: wrap; }
#stageCard .nx i {
  font-style: normal; font-size: 14px; font-weight: 700; color: #d8c98f;
  background: #262314; border: 1px solid #4a4327; border-radius: 7px; padding: 4px 9px;
}
#stageCard .nx i:first-child { color: #fff; background: #3a3218; }

/* ---------------- 踏板 ---------------- */
#pedals {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(16px, 6vw, 56px);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(#12151b, #0d0f13);
  border-top: 1px solid #232833;
  z-index: 30;
}
.pedal {
  --tilt: 0deg;
  position: relative;
  width: clamp(54px, 12vw, 80px);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding-top: 4px;
  touch-action: none;
}
.pedal::after {                 // 落地阴影
  content: ''; position: absolute; left: 6%; right: 6%; bottom: 24px; height: 9px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.62), rgba(0,0,0,0) 72%);
  filter: blur(1px); pointer-events: none;
}
.pedal .pbody {
  position: relative;
  width: 100%; height: clamp(32px, 6.4vw, 46px);
  border-radius: 5px 5px 12px 12px / 4px 4px 14px 14px;
  background: linear-gradient(165deg, #fdf3cd 0%, #e6cc7e 22%, #c19d43 55%, #8a6d21 86%, #6a5212 100%);
  box-shadow: 0 7px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7),
              inset 0 -3px 6px rgba(70,50,8,.55);
  transform: perspective(320px) rotateX(var(--tilt));
  transform-origin: 50% 0%;
  transition: filter .15s;
}
.pedal .pstem {
  position: absolute; left: 50%; top: -12px; width: 8px; height: 14px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #5d5a52, #b9b4a6, #4a4740);
  border-radius: 3px;
}
.pedal.active .pbody { filter: brightness(1.12); }
.pedal.locked .pbody { box-shadow: 0 5px 10px rgba(0,0,0,.55), 0 0 0 2px rgba(70,220,150,.8), inset 0 1px 0 rgba(255,255,255,.55); }
.pedal.half .pbody { box-shadow: 0 5px 10px rgba(0,0,0,.55), 0 0 0 2px rgba(90,190,255,.75), inset 0 1px 0 rgba(255,255,255,.55); }

.pedal .meter {
  position: absolute; right: -11px; top: 9px;
  width: 5px; height: clamp(30px, 6vw, 42px);
  background: #1c212c; border: 1px solid #2c3342; border-radius: 3px;
  overflow: hidden;
}
.pedal .meter i {
  display: block; width: 100%; height: 0; position: absolute; bottom: 0;
  background: linear-gradient(#79e6b4, #3fa8ff);
}
.plab { font-size: 10.5px; color: #8b95ab; white-space: nowrap; }
.pval { font-size: 10px; color: #7ee0ae; height: 12px; }
.pedal.half .pval { color: #7fc8ff; }

/* ---------------- 底部署名 ---------------- */
#credit {
  flex: 0 0 auto; text-align: center;
  font-size: 10.5px; color: #5d6577;
  padding: 3px 8px calc(5px + env(safe-area-inset-bottom));
  background: #0d0f13;
}
#credit a { color: #7fa8d8; text-decoration: none; }

/* ---------------- 设置 ---------------- */
.set-toggle {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 11px; border: 1px solid #384054; border-radius: 999px;
  background: linear-gradient(#242a38, #1a1f2b); color: #d7ddef;
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  cursor: pointer;
}
.set-toggle .caret { font-style: normal; color: #8fa3c8; font-size: 11px; transition: transform .2s; }
.set-toggle.open .caret { color: #7ee0ae; }

/* 遮罩：设置侧边栏之外压暗，点击收起 */
.set-back {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(5,7,10,.5);
  opacity: 0; pointer-events: none; transition: opacity .24s;
}
.set-back.open { opacity: 1; pointer-events: auto; }

/* 设置 = 右侧全高侧边栏 */
.set-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  z-index: 59;
  width: min(430px, 100vw);
  max-height: none;
  display: flex; flex-direction: column;
  background: rgba(17,20,27,.985);
  border: 0; border-left: 1px solid #2d3546; border-radius: 0;
  box-shadow: -18px 0 48px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  transform: translateX(103%);
  opacity: 1; pointer-events: auto;
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.set-panel.open { transform: none; }
.set-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 13px 14px 10px; border-bottom: 1px solid #262d3c;
  background: #151922;
  padding-top: calc(13px + env(safe-area-inset-top));
}
.set-head b { font-size: 14px; }
.set-sub { font-size: 11px; color: #7b869d; flex: 1 1 auto; min-width: 0; }
.set-close {
  flex: 0 0 auto; margin-left: auto;
  font-size: 13px; line-height: 1;
  padding: 7px 10px; border-radius: 9px;
  background: #212736; border: 1px solid #333c50; color: #aab4c8; cursor: pointer;
}
.set-close:hover { background: #29303f; color: #e8ebf2; }
.set-body { overflow-y: auto; padding: 4px 14px calc(16px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; flex: 1 1 auto; }

.set-group { border: 0; margin: 10px 0 0; padding: 0; }
.set-group legend {
  font-size: 11.5px; color: #7ea6d8; font-weight: 700;
  padding: 4px 0 6px; letter-spacing: .4px;
}
.set-row {
  display: grid; grid-template-columns: 1fr auto 116px;
  align-items: center; gap: 8px;
  padding: 5px 0; min-height: 34px;
}
.set-label { font-size: 12.5px; color: #c3cbdb; }
.set-val { font-size: 11.5px; color: #7ee0ae; min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.set-hint { font-size: 10.5px; color: #667089; line-height: 1.5; margin: -1px 0 6px; }

.set-row input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 116px; height: 22px; background: transparent; margin: 0;
}
.set-row input[type=range]::-webkit-slider-runnable-track {
  height: 4px; background: #2c3446; border-radius: 3px;
}
.set-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5.5px;
  background: linear-gradient(#8fd0ff, #4a9eff); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.6); border: 0;
}
.set-row input[type=range]::-moz-range-track { height: 4px; background: #2c3446; border-radius: 3px; }
.set-row input[type=range]::-moz-range-thumb { width: 15px; height: 15px; background: #4a9eff; border: 0; border-radius: 50%; }

.set-row select {
  grid-column: 3; justify-self: end;
  background: #1c212c; color: #d7ddef; font-size: 12px;
  border: 1px solid #323a4d; border-radius: 7px; padding: 5px 6px; max-width: 116px;
}
.sw { position: relative; display: inline-block; grid-column: 3; justify-self: end; width: 42px; height: 23px; }
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw i {
  position: absolute; inset: 0; border-radius: 20px; background: #2b3140;
  border: 1px solid #3a4256; transition: .16s;
}
.sw i::after {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 17px; height: 17px; border-radius: 50%; background: #97a2b8; transition: .16s;
}
.sw input:checked + i { background: #1d5c40; border-color: #2f9a6b; }
.sw input:checked + i::after { transform: translateX(19px); background: #7ee0ae; }

.set-row.btnrow { grid-template-columns: 1fr auto; }
.btns { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.mini {
  font-size: 11px; padding: 5px 9px; border-radius: 7px;
  background: #212736; border: 1px solid #333c50; color: #c3cbdb; cursor: pointer;
}
.mini:hover { background: #29303f; }
.mini.warn { color: #ff9d94; border-color: #5a2b26; }

/* ---------------- 音符瀑布流（音条画在 #kb 画布里，位于琴键下层） ---------------- */
.wf-bar {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  display: none; align-items: center; gap: 7px;
  padding: 6px 8px 6px 13px;
  background: rgba(13,16,22,.88); border: 1px solid #2b3446; border-radius: 999px;
  backdrop-filter: blur(6px); z-index: 7;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  max-width: 94%;
}
.wf-bar.on { display: flex; }
.wf-title {
  font-size: 12px; color: #dfe6f3; font-weight: 600;
  max-width: min(320px, 40vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-time { font-size: 11px; color: #7ee0ae; font-variant-numeric: tabular-nums; }
.wf-btn {
  font-size: 12px; line-height: 1; padding: 6px 9px; border-radius: 999px;
  background: #212736; border: 1px solid #333c50; color: #c3cbdb; cursor: pointer;
}
.wf-btn:hover { background: #29303f; }

.wf-picker {
  position: fixed; inset: 0; z-index: 90;
  display: none; flex-direction: column;
  background: rgba(8,10,14,.96);
  backdrop-filter: blur(8px);
}
.wf-picker.open { display: flex; }
.wf-p-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid #262d3c; background: #12151d;
  flex: 0 0 auto;
}
.wf-p-head b { font-size: 15px; flex: 0 0 auto; }
.wf-p-search {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; padding: 9px 13px;
  background: #1a1f2b; border: 1px solid #323a4d; border-radius: 10px; color: #e8ebf2;
}
.wf-p-search:focus { outline: none; border-color: #4a9eff; }
.wf-p-list { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 14px; -webkit-overflow-scrolling: touch; }
.wf-p-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
}
.wf-p-row:hover { background: #1c2331; }
.wf-p-row b { font-size: 13.5px; color: #dde5f2; font-weight: 600; }
.wf-p-row span { font-size: 11.5px; color: #7b869d; white-space: nowrap; }
.wf-p-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #262d3c; background: #12151d;
  flex: 0 0 auto;
}
.wf-p-file { cursor: pointer; }
.wf-p-info { font-size: 11.5px; color: #667089; }

/* ---------------- 深色琴床（设置项） ---------------- */
body.dark #stage { background: #07080b; }

/* ---------------- 窄屏 ---------------- */
@media (max-width: 760px) {
  #topbar { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  #status { order: 3; width: 100%; overflow-x: auto; }
  #pedalChips { margin-left: auto; }
  .brand .sub { display: none; }
  .set-panel { width: min(430px, 100vw); }
  #hint { font-size: 11px; padding: 7px 10px; }
}
@media (max-height: 560px) {
  #credit { display: none; }
  #pedals { padding-top: 4px; padding-bottom: 4px; }
}