* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(135deg, #e8eaf6, #f3f4f8);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px;
  color: #37474f;
  touch-action: pan-y;
}

#ToggleMenuBtn, .close-menu { display: none; }

.controls { width: 100%; display: flex; flex-direction: column; align-items: center; max-width: 600px; margin-bottom: 5px; }
.main-area { width: 100%; display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 1000px; }

h1 { font-size: 1.4rem; margin-bottom: 2px; }
.sub { color: #78909c; font-size: 0.8rem; margin-bottom: 8px; }
#midiStatus { text-align: center; font-size: 0.8rem; font-weight: bold; margin-bottom: 8px; color: #546e7a; }

.rb { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; }
.rb button {
  padding: 6px 16px; border: 2px solid #90a4ae; background: #fff; border-radius: 20px;
  cursor: pointer; font-size: 0.8rem; color: #546e7a; transition: 0.2s; font-weight: bold;
}
.rb button:hover { background: #eceff1; }
.rb button.on { background: #37474f; color: #fff; border-color: #37474f; }

.sc { display: flex; gap: 20px; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; }
.sc div { text-align: center; }
.sc .v { font-size: 1.3rem; font-weight: 700; color: #263238; }
.sc .l { font-size: 0.7rem; color: #90a4ae; }

.fb {
  height: 36px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; font-size: 0.95rem; font-weight: 600; border-radius: 8px; transition: 0.3s; width: 100%; min-width: 250px; text-align: center;
}
.fb.ok { background: #e8f5e9; color: #2e7d32; animation: pop 0.3s; }
.fb.no { background: #fce4ec; color: #c62828; animation: shk 0.4s; }

.sb {
  background: #fff; border-radius: 14px; padding: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07); margin-bottom: 8px;
  width: 100%; display: flex; flex-direction: column; align-items: center;
}
canvas#S {
  display: block; width: 100%; max-width: 600px; height: auto; max-height: 100%; aspect-ratio: 60/26;
  border-radius: 8px; margin: 0 auto; object-fit: contain;
}
.hint { text-align: center; font-size: 0.9rem; color: #546e7a; margin-top: 5px; font-weight: 600; min-height: 20px; }

/* Piano Container */
.pw {
  background: linear-gradient(180deg, #4a4a4a, #333); border-radius: 8px;
  padding: 6px 6px 6px 6px; box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  width: fit-content; max-width: calc(100% - 10px); margin: 0 auto;
}

/* 琴键绝对完美自适应弹性布局，无需JS测量，不会溢出，绝不滚动 */
.piano { 
  display: flex; 
  width: 100%; 
  justify-content: center; /* 允许按键总宽度不足时剧中，而非散开 */
  user-select: none;
}

.wk {
  flex: 0 0 42px; /* ★致命修复★：固定宽度，为 fit-content 容器提供真实的物理宽度支撑 */
  height: 180px;
  background: linear-gradient(180deg, #fafafa, #eee);
  border: 1px solid #999; border-right: none; border-radius: 0 0 4px 4px;
  cursor: pointer; position: relative; 
  /* 取消了 z-index: 1; 防止黑键被下一个白键遮盖切断的一半！ */
  touch-action: none; 
}
.wk:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.wk:last-child { border-right: 1px solid #999; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.wk:hover { background: linear-gradient(180deg, #f0f0f0, #ddd); }
.wk:active { background: linear-gradient(180deg, #ddd, #ccc); }

.wk .lb {
  position: absolute; bottom: 8px; left: 0; right: 0; text-align: center;
  font-size: 0.6rem; color: #888; font-weight: 600; pointer-events: none;
}

/* 黑键挂载于其属的白键内 */
.bk {
  position: absolute; 
  left: 70%; /* 在白键右侧偏出跨越 */
  top: 0;
  width: 60%; /* 理想的黑键相对比例 */
  height: 60%;
  background: linear-gradient(180deg, #2a2a2a, #111);
  border-radius: 0 0 4px 4px; cursor: pointer; z-index: 2;
  box-shadow: 0 4px 6px rgba(0,0,0,0.4);
  touch-action: none; 
}
.bk:hover { background: linear-gradient(180deg, #3a3a3a, #222); }
.bk:active { height: 58%; }
.bk .lb {
  position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
  font-size: 0.5rem; color: #ccc; font-weight: 500; pointer-events: none;
}

.wk.ch { background: linear-gradient(180deg, #c8e6c9, #a5d6a7) !important; border-color: #66bb6a !important; }
.wk.wh { background: linear-gradient(180deg, #ffcdd2, #ef9a9a) !important; border-color: #ef5350 !important; }
.bk.ch { background: linear-gradient(180deg, #388e3c, #2e7d32) !important; }
.bk.wh { background: linear-gradient(180deg, #b71c1c, #8e0000) !important; }
.kd { pointer-events: none; }

@keyframes pop { 0% { transform: scale(0.93) } 50% { transform: scale(1.04) } 100% { transform: scale(1) } }
@keyframes shk { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }

/* === 横屏特殊优化模式：绝对专注，隐藏多余控件 === */
@media (max-height: 500px) and (orientation: landscape) {
  body { padding: 0; }
  
  /* 在屏幕左上角唤出手柄 */
  #ToggleMenuBtn {
    display: block; position: fixed; top: 10px; right: 10px; z-index: 100;
    padding: 8px 12px; background: rgba(55,71,79, 0.8); color: #fff; border-radius: 8px; border: none; font-weight: bold;
    backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  
  .close-menu {
    display: inline-block; padding: 10px 24px; font-size: 1.1rem; border: none; background: #c62828; color: white; border-radius: 8px; margin-top: 10px; cursor: pointer;
  }
  
  /* 唤出的面板覆盖全屏居中显示 */
  .controls {
    position: fixed; inset: 0; background: rgba(255,255,255,0.92); z-index: 110;
    flex-direction: column; justify-content: center; align-items: center; max-width: none;
    display: none; /* 默认隐藏 */
  }
  .controls.open { display: flex; }
  
  /* 主体拉伸至充满当前微小垂直屏幕 */
  .main-area { flex-direction: column; justify-content: space-between; height: 100vh; overflow: hidden; max-width: none; }
  .fb { height: 20px; font-size: 0.75rem; margin-bottom: 2px; order: -1; }
  .sb { flex: 1; min-height: 0; margin-bottom: 0px; padding: 2px; border-radius: 0; box-shadow: none; background: none; }
  canvas#S { max-height: 100%; aspect-ratio: auto; } 
  .hint { font-size: 0.75rem; margin-top: 2px; }

  /* 键盘占屏幕一半高度，去掉深色壳子背景，保持原本修长比例 */
  .pw { padding: 0; border-radius: 0; background: transparent; box-shadow: none; height: 48vh; display: flex; width: fit-content; margin: 0 auto; }
  .piano { height: 100%; flex: none; justify-content: center; } 
  .wk { height: 100%; flex: 0 0 34px; border-radius: 0 0 5px 5px; } 
  .wk:last-child { border-right: 1px solid #999; }
}