/* ==========================================================================
   PartituraMaster - Estilos da Pauta Musical (SVG Sheet Notation)
   ========================================================================== */

/* Linhas principais da pauta */
.stave-line {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: stroke 0.3s ease;
}

/* Linhas suplementares (ledger lines) */
.ledger-line {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: fadeInLedger 0.2s ease-out;
}

/* Símbolo vetorial da clave */
.clef-symbol {
  fill: #f1f5f9;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Cabeça da nota (Notehead) */
.note-group {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}

.note-head {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  transition: fill 0.2s ease, filter 0.2s ease;
}

/* Haste da nota (Stem) */
.note-stem {
  stroke: #ffffff;
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke 0.2s ease;
}

/* Símbolo do acidente (♯, ♭, ♮) */
.accidental-text {
  fill: #38bdf8;
  font-family: 'JetBrains Mono', serif;
  font-size: 26px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  filter: drop-shadow(0 2px 5px rgba(56, 189, 248, 0.5));
}

/* Feedback de acerto e erro no SVG */
.note-group.correct .note-head {
  fill: #10b981 !important;
  stroke: #059669 !important;
  filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.8)) !important;
}

.note-group.correct .note-stem {
  stroke: #10b981 !important;
}

.note-group.wrong {
  animation: shakeNote 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.note-group.wrong .note-head {
  fill: #f43f5e !important;
  stroke: #e11d48 !important;
  filter: drop-shadow(0 0 16px rgba(244, 63, 94, 0.8)) !important;
}

.note-group.wrong .note-stem {
  stroke: #f43f5e !important;
}

/* Rótulo com nome da nota no modo de dica / pós-erro */
.note-helper-label {
  fill: #38bdf8;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.note-helper-label.visible {
  opacity: 1;
}

/* Balão flutuante de pontuação (+100, COMBO x2) */
.floating-score-badge {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.1rem;
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
  pointer-events: none;
  animation: floatUpAndFade 0.7s forwards ease-out;
  z-index: 50;
}

@keyframes fadeInLedger {
  from { opacity: 0; transform: scaleX(0.7); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes shakeNote {
  10%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 80% { transform: translate3d(5px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}

@keyframes floatUpAndFade {
  0% { opacity: 1; transform: translateY(0) scale(0.9); }
  50% { transform: translateY(-20px) scale(1.15); opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) scale(1); }
}