/* ---- Notation / Sight Reading Training ---- */

/* SMuFL music notation fonts */
@font-face {
  font-family: 'Bravura';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/Bravura.woff2') format('woff2');
}
@font-face {
  font-family: 'Leland';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/Leland.woff2') format('woff2');
}

/* Canvas (no box, matches page background) */
.sp-canvas-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
  min-width: 0;
}
#sp-canvas, #sp-construct-canvas {
  display: block; max-width: 100%; height: auto; border-radius: 10px;
}
#sp-construct-area { width: 100%; min-width: 0; }
#sp-construct-canvas { cursor: crosshair; }

/* Clear text link under construction canvas */
.sp-clear-wrap {
  text-align: center;
  margin-bottom: 0.5rem;
}
.sp-clear-link {
  color: #666;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s;
}
.sp-clear-link:hover { color: #aaa; }

/* Play button row */
.sp-play-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.8rem;
}

/* Construction controls (Natural / Sharp / Flat) */
.sp-construct-btns {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 1rem;
}
.sp-construct-btn {
  padding: 8px 14px; border: 1.5px solid #2a2d3a; border-radius: 10px;
  background: #1a1d27; color: #ccc; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.sp-construct-btn:hover { border-color: #555; color: #fff; background: #252836; }
.sp-construct-btn.active { background: #2a2d3a; border-color: #3a3d4a; color: #ccc; }

/* Center the main panel */
#ph-staff-practice {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Answer grid centering override */
#ph-staff-practice .et-answer-grid {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* Consistent spacing */
#ph-staff-practice .et-prompt { margin-bottom: 1rem; text-align: center; }
#ph-staff-practice .et-answer-grid { margin-bottom: 0; }
#ph-staff-practice .et-feedback { text-align: center; }
#ph-staff-practice .et-feedback:empty { display: none; }
#ph-staff-practice .et-bottom-actions { margin-bottom: 0.5rem; }

/* Shake animation for construction controls */
#sp-construct-controls.shake {
  animation: et-shake 0.45s ease;
}
#sp-construct-controls.shake .sp-construct-btn {
  border-color: #ff9800 !important;
  color: #ffb74d !important;
}