/**
 * VirtualKeyboard - Virtual piano keyboard styles
 *
 * Uses NotationFont for key labels displaying pitch names in selected notation system.
 * Supports Number (1-7), Western (CDEFGAB), Sargam (SrRgGmMPdDnN), and Doremi (drmfslt).
 */

.virtual-keyboard-container {
  background: #1a1a2e;
  border-top: 2px solid #333;
  padding: 8px 16px 12px;
  user-select: none;
}

.virtual-keyboard-container.hidden {
  display: none;
}

/* Header with title and controls */
.virtual-keyboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}

.virtual-keyboard-title {
  color: #00d4ff;
  font-size: 12px;
  font-weight: 500;
}

.virtual-keyboard-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.virtual-keyboard-label {
  color: #888;
  font-size: 11px;
}

.virtual-keyboard-select {
  background: #16213e;
  color: #eee;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

.virtual-keyboard-select:hover {
  border-color: #00d4ff;
}

.virtual-keyboard-select:focus {
  outline: none;
  border-color: #00d4ff;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

.virtual-keyboard-close {
  background: transparent;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.virtual-keyboard-close:hover {
  color: #ff6b6b;
}

/* Piano container */
.virtual-keyboard-piano {
  position: relative;
  display: flex;
  height: 100px;
  background: #0f0f1a;
  border-radius: 4px;
  overflow: hidden;
}

/* White keys container */
.virtual-keyboard-white-keys {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Individual white key */
.virtual-key-white {
  flex: 1;
  background: linear-gradient(to bottom, #fafafa 0%, #e8e8e8 100%);
  border: 1px solid #bbb;
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  cursor: pointer;
  transition: background 0.1s, transform 0.05s;
  position: relative;
}

.virtual-key-white:hover {
  background: linear-gradient(to bottom, #fff 0%, #f5f5f5 100%);
}

.virtual-key-white.active {
  background: linear-gradient(to bottom, #00d4ff 0%, #00a8cc 100%) !important;
  transform: translateY(2px);
}

/* Black keys container */
.virtual-keyboard-black-keys {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  pointer-events: none;
}

/* Individual black key */
.virtual-key-black {
  position: absolute;
  width: 5.5%;
  height: 100%;
  background: linear-gradient(to bottom, #333 0%, #111 100%);
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  cursor: pointer;
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 1;
  transition: background 0.1s, transform 0.05s;
}

.virtual-key-black:hover {
  background: linear-gradient(to bottom, #444 0%, #222 100%);
}

.virtual-key-black.active {
  background: linear-gradient(to bottom, #0099cc 0%, #006688 100%) !important;
  transform: translateX(-50%) translateY(2px);
}

/* Key labels - using NotationFont */
.virtual-key-label {
  font-family: 'NotationFont', monospace;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

.virtual-key-white .virtual-key-label {
  color: #333;
}

.virtual-key-black .virtual-key-label {
  color: #fff;
  font-size: 14px;
}

/* Active key label color */
.virtual-key.active .virtual-key-label {
  color: #fff;
}

/* Tonic key (1st degree) - gold/amber highlight */
.virtual-key-white.virtual-key-tonic {
  background: linear-gradient(to bottom, #fff8dc 0%, #ffe4a0 100%);
  border-color: #daa520;
}

.virtual-key-white.virtual-key-tonic:hover {
  background: linear-gradient(to bottom, #fffaeb 0%, #ffebb0 100%);
}

.virtual-key-black.virtual-key-tonic {
  background: linear-gradient(to bottom, #8b6914 0%, #5c4510 100%);
  border-color: #daa520;
}

.virtual-key-black.virtual-key-tonic:hover {
  background: linear-gradient(to bottom, #9a7818 0%, #6b5012 100%);
}

/* 5th degree key - subtle blue highlight */
.virtual-key-white.virtual-key-fifth {
  background: linear-gradient(to bottom, #e8f4ff 0%, #c8e0ff 100%);
  border-color: #6699cc;
}

.virtual-key-white.virtual-key-fifth:hover {
  background: linear-gradient(to bottom, #f0f8ff 0%, #d8e8ff 100%);
}

.virtual-key-black.virtual-key-fifth {
  background: linear-gradient(to bottom, #2a4a6a 0%, #1a3050 100%);
  border-color: #4477aa;
}

.virtual-key-black.virtual-key-fifth:hover {
  background: linear-gradient(to bottom, #345580 0%, #243a58 100%);
}

/* Responsive adjustments */
@media (max-width: 800px) {
  .virtual-keyboard-piano {
    height: 80px;
  }

  .virtual-key-label {
    font-size: 14px;
  }

  .virtual-key-black .virtual-key-label {
    font-size: 11px;
  }
}

/* High DPI screens - larger labels */
@media (min-resolution: 2dppx) {
  .virtual-key-label {
    font-size: 20px;
  }

  .virtual-key-black .virtual-key-label {
    font-size: 16px;
  }
}