/* ====== Piano virtual ====== */
.piano-wrapper{
  background:linear-gradient(180deg,#1a1a2e,#0f0f1e);
  padding:18px;border-radius:14px;margin-top:18px;display:none;
  overflow-x:auto;box-shadow:inset 0 2px 8px rgba(0,0,0,.4);
}
.piano-wrapper.active{display:block;}
.piano-keys{position:relative;display:flex;justify-content:center;height:140px;min-width:max-content;}
.key-white{
  background:linear-gradient(180deg,#fff 0%,#e8e8e8 100%);
  border:1px solid #333;border-radius:0 0 6px 6px;
  width:38px;height:140px;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
  font-size:.62rem;color:#999;transition:all .08s;user-select:none;
  position:relative;z-index:1;
}
.key-white:active,.key-white.pressed{background:linear-gradient(180deg,#3498db,#2980b9);color:#fff;transform:translateY(2px);}
.key-white.correct{background:linear-gradient(180deg,#27ae60,#229954);color:#fff;}
.key-white.wrong{background:linear-gradient(180deg,#e74c3c,#c0392b);color:#fff;}
.key-black{
  position:absolute;background:linear-gradient(180deg,#333,#111);
  border:1px solid #000;border-radius:0 0 4px 4px;
  width:24px;height:88px;cursor:pointer;z-index:2;
  transition:all .08s;user-select:none;
}
.key-black:active,.key-black.pressed{background:linear-gradient(180deg,#3498db,#2980b9);transform:translateY(2px);}
.key-black.correct{background:linear-gradient(180deg,#27ae60,#229954);}
.key-black.wrong{background:linear-gradient(180deg,#e74c3c,#c0392b);}