/* The console and its physical keys: glass keys with depth, lit a cool white from beneath.
   main.js sets --pressed-level (0-1) per key from velocity. Linked right after base.css. */
/* ---- the console: rail + keyboard, one instrument body ---- */
#console {
  position: fixed;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--note-dur-frame) var(--note-ease), opacity var(--note-dur) var(--note-ease);
}
body.kb-min #console { transform: translateY(130%); opacity: 0; pointer-events: none; }
/* ---- the keyboard keeps its own material: physical glass keys (pre-redesign values) ---- */
#keyboard {
  height: var(--kb-h);
  display: flex;
  gap: 6px;
  align-items: stretch;
}
#keys { position: relative; flex: 1; height: 100%; }


.octave-btn {
  flex: 0 0 34px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.octave-btn:active { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); }
.octave-btn:disabled { opacity: 0.25; cursor: default; }

/* one 'keyboard' button in the bottom-right corner: whichever of the two
   halves of the toggle applies to the current state is the one on show */
#kb-restore { display: none; }
body.kb-min #kb-restore { display: flex; }
body.kb-min #kb-collapse { display: none; }
/* scale lock: out-of-key keys recede */
.white-key.out { background: rgba(255,255,255,0.015); }
.black-key.out { opacity: 0.4; }
body.light-ground .white-key.out { background: rgba(255,255,255,0.18); }
/* ---- the keys: real glass keys with depth. A played key is lit from underneath
   in one cool white, never the note's ink; main.js sets --pressed-level from velocity. ---- */
.key-label {
  position: absolute;
  z-index: 1;
  bottom: 9px; left: 0; right: 0;
  text-align: center;
  font-size: var(--note-text-xs);
  color: rgba(255,255,255,0.28);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: color 220ms ease-out;
}

.key {
  position: absolute;
  border-radius: 7px 7px 12px 12px;
  cursor: pointer;
}
.white-key {
  top: 0; height: 100%;
  background: rgba(255,255,255,0.055);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 6px 18px rgba(0,0,0,0.35);
}
.black-key {
  top: 0; height: 58%;
  background: rgba(10,10,14,0.55);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 5px 14px rgba(0,0,0,0.5);
  z-index: 2;
  border-radius: 5px 5px 9px 9px;
}
.key { transition: transform 0.05s ease; }
/* The backlight: strongest at the front edge, fading up the key, with a cool bloom
   that spills into the seams. It fades in over ~30ms and out over ~220ms. Its
   strength reads --pressed-level (0-1) if a script sets one per key from velocity. */
.key::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to top, rgb(238 245 255 / .94) 0%, rgb(222 236 255 / .62) 30%, rgb(196 218 248 / .26) 72%, rgb(180 206 240 / .12) 100%);
  box-shadow: inset 0 -12px 18px -8px rgb(255 255 255 / .8), inset 0 1px 0 rgb(255 255 255 / .35),
              0 6px 18px -4px rgb(214 232 255 / .55), 0 0 22px rgb(214 232 255 / .22);
  transition: opacity 220ms ease-out;
}
.black-key::after {
  background: linear-gradient(to top, rgb(214 232 255 / .46) 0%, rgb(170 200 240 / .16) 42%, rgb(170 200 240 / 0) 78%);
  box-shadow: inset 0 0 0 1px rgb(214 232 255 / .5), inset 0 -8px 14px -6px rgb(236 244 255 / .6),
              0 6px 18px -4px rgb(214 232 255 / .6), 0 0 16px rgb(214 232 255 / .26);
}
.key.pressed { transform: translateY(1px); }
.white-key.pressed { z-index: 1; }
.key.pressed::after { opacity: calc(.6 + .4 * var(--pressed-level, 1)); transition-duration: 30ms; }
.white-key.pressed .key-label { color: #24324a; transition-duration: 30ms; }
/* ---- light ground: the same instrument in daylight ---- */
body.light-ground .white-key {
  background: rgba(255,255,255,0.55);
  border-color: rgba(20,22,30,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 6px 18px rgba(20,22,30,0.12);
}
body.light-ground .black-key {
  background: rgba(38,40,48,0.85);
  border-color: rgba(255,255,255,0.12);
}
body.light-ground .octave-btn {
  background: rgba(255,255,255,0.5);
  color: rgba(30,32,42,0.5);
  border-color: rgba(20,22,30,0.10);
}
body.light-ground .key-label { color: rgba(24,26,34,0.35); }
body.light-ground .key.pressed .key-label { color: #24324a; }