/* Luxury Concert Grand Piano Stylesheet */

/* Background Mahogany Wood Grain Effect */
body {
  background-color: #120805;
  background-image: 
    radial-gradient(ellipse at top, #2d140c 0%, #120805 70%),
    linear-gradient(to right, rgba(0,0,0,0.4), transparent 30%, transparent 70%, rgba(0,0,0,0.4));
  touch-action: manipulation;
}

/* Grand Piano Wood Enclosure */
.piano-enclosure {
  background: linear-gradient(180deg, #33150c 0%, #200c06 40%, #170804 100%);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(212, 175, 55, 0.4),
    inset 0 0 40px rgba(0, 0, 0, 0.8);
}

/* Keyboard Horizontal Container */
.keyboard-wrapper {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: none;
}

.piano-keys-bed {
  height: 230px;
  width: max-content;
  min-width: 100%;
  justify-content: center;
  padding: 0 4px;
}

@media (max-width: 640px) {
  .piano-keys-bed {
    height: 190px;
  }
}

/* ---------------------------------------------
   WHITE KEYS (Ivory Gloss Texture & 3D Lighting)
   --------------------------------------------- */
.white-key {
  position: relative;
  width: 44px;
  height: 100%;
  background: linear-gradient(to bottom, #ede9e0 0%, #fdfcf9 20%, #f7f4ed 85%, #dcd6c8 100%);
  border-radius: 0 0 6px 6px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  border-bottom: 3px solid #b3aba0;
  box-shadow: 
    inset 0 -8px 12px rgba(0, 0, 0, 0.08),
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    1px 4px 6px rgba(0, 0, 0, 0.45);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 12px;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.08s ease, box-shadow 0.06s ease;
  user-select: none;
  touch-action: none;
}

@media (max-width: 640px) {
  .white-key {
    width: 36px;
    padding-bottom: 8px;
  }
}

.white-key:hover {
  background: linear-gradient(to bottom, #f3f0e8 0%, #fffff8 20%, #faf8f2 85%, #e4dfd3 100%);
}

.white-key.active, .white-key:active {
  background: linear-gradient(to bottom, #e4dfd3 0%, #ebe7dc 50%, #f2ede2 100%);
  border-bottom: 1px solid #999;
  transform: translateY(3px) scaleY(0.99);
  box-shadow: 
    inset 0 -2px 6px rgba(0, 0, 0, 0.15),
    inset 0 4px 10px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.6);
}

.white-key.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: radial-gradient(ellipse at bottom, rgba(212, 175, 55, 0.45) 0%, transparent 80%);
  pointer-events: none;
}

/* ---------------------------------------------
   BLACK KEYS (Ebony Matte Texture & Floating 3D)
   --------------------------------------------- */
.black-key {
  position: absolute;
  width: 28px;
  height: 60%;
  background: linear-gradient(to right, #242424 0%, #151515 25%, #2a2a2a 70%, #111111 100%);
  border-radius: 0 0 4px 4px;
  border-left: 1px solid #3d3d3d;
  border-right: 1px solid #1a1a1a;
  border-bottom: 4px solid #080808;
  box-shadow: 
    2px 5px 8px rgba(0, 0, 0, 0.7),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -4px 6px rgba(0, 0, 0, 0.8);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 8px;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.06s ease;
  user-select: none;
  touch-action: none;
}

@media (max-width: 640px) {
  .black-key {
    width: 22px;
    height: 59%;
    padding-bottom: 6px;
  }
}

.black-key:hover {
  background: linear-gradient(to right, #2c2c2c 0%, #1c1c1c 25%, #353535 70%, #191919 100%);
}

.black-key.active, .black-key:active {
  background: linear-gradient(to right, #1a1a1a 0%, #0d0d0d 50%, #181818 100%);
  border-bottom: 1px solid #000;
  transform: translateY(3px) scaleY(0.985);
  box-shadow: 
    1px 2px 4px rgba(0, 0, 0, 0.9),
    inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

.black-key.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: radial-gradient(ellipse at bottom, rgba(230, 198, 101, 0.6) 0%, transparent 80%);
  pointer-events: none;
}

/* Key Labels & Typography */
.key-label-primary {
  font-weight: 700;
  font-size: 11px;
  pointer-events: none;
}

.white-key .key-label-primary {
  color: #3b281f;
}

.black-key .key-label-primary {
  color: #f3e5ab;
  font-size: 9px;
}

.key-label-hint {
  font-size: 9px;
  opacity: 0.65;
  font-family: monospace;
  pointer-events: none;
}

.white-key .key-label-hint {
  color: #6d5448;
}

.black-key .key-label-hint {
  color: #c9ab67;
  font-size: 8px;
}

/* Active Highlight Glow */
.key-highlight-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.85);
  opacity: 0;
  transition: opacity 0.05s ease;
}

.active .key-highlight-glow {
  opacity: 1;
}

/* Sustain Pedal Active State */
.pedal-btn.active {
  background: linear-gradient(135deg, #421e11 0%, #592916 100%);
  border-color: #D4AF37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.pedal-btn.active #sustain-led {
  background-color: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

/* Custom Scrollbar */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}