/* Shared chrome for exercise tool pages (/practice/, /perfect-pitch-test/, and
   future /ear-training/ exercises). Loaded alongside the Tailwind CDN script;
   pairs with /js/exerciseShell.js which injects the lesson header and speaker.
   Page-specific styles (stars, dialogs, result cards) stay in each page. */

body { font-family: 'Inter', sans-serif; }

.piano-key {
  transition: transform 0.1s, background-color 0.15s;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.piano-key:not(.disabled):not(.locked):hover {
  filter: brightness(0.95);
}
.piano-key:not(.disabled):not(.locked):active {
  transform: scaleY(0.97) translateY(2px);
}
.piano-key.disabled {
  cursor: default;
  pointer-events: none;
}
.piano-key.disabled.white-key {
  background: #d1d5db !important;
}
.dark .piano-key.disabled.white-key {
  background: #4b5563 !important;
}
.piano-key.disabled.black-key {
  background: #6b7280 !important;
}
.dark .piano-key.disabled.black-key {
  background: #374151 !important;
}

.shell-pill {
  transition: background-color 0.2s, color 0.2s, transform 0.1s, border-color 0.2s;
}
.shell-pill:hover:not(.selected) {
  transform: scale(1.03);
}
.dark .shell-pill:hover:not(.selected) {
  background-color: rgba(59, 130, 246, 0.2);
}
.shell-pill:hover:not(.selected) {
  background-color: rgba(59, 130, 246, 0.1);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes progress-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.progress-endless-pulse {
  animation: progress-pulse 2.2s ease-in-out infinite;
}

.screen {
  display: none;
}
.screen.active {
  display: flex;
}

#speaker-container {
  transition: transform 0.1s;
}
#speaker-container:hover {
  transform: scale(1.02);
}
#speaker-container:active {
  transform: scale(0.98);
}