/* educativo */
/* =========================================================
FEEDBACK VISUAL
========================================================= */

.floating-note {
  position: absolute;
  top: 0;

  /* 🔑 ESTA ES LA LÍNEA QUE FALTABA 
  transform: translateX(-50%);*/

  transform-origin: center bottom;

  pointer-events: none;
  user-select: none;

  opacity: 1;
  z-index: var(--z-feedback, 30);

  animation: smoke-rise 2.6s linear forwards;
}

.floating-smoke {
  display: inline-block;

  /* 🔑 Da un “ancla” estable al texto */
  width: max-content;
  margin-left: 0;
  margin-right: 0;

  animation: smoke-dispersion 3.6s ease-in-out infinite;
}

.floating-rotate {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  white-space: nowrap;

  animation: smoke-rotate 2.4s ease-in-out infinite;
}

.floating-wobble {
  display: inline-block;
  animation: smoke-wobble 3.8s ease-in-out infinite;
}

@keyframes smoke-wobble {
  0%   { transform: rotate(0deg) scale(1, 1); }
  25%  { transform: rotate(-0.4deg) scale(1.02, 0.98); }
  50%  { transform: rotate(0.5deg) scale(0.99, 1.03); }
  75%  { transform: rotate(-0.3deg) scale(1.01, 0.99); }
  100% { transform: rotate(0deg) scale(1, 1); }
}

@keyframes smoke-dispersion {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(-3px);
  }

  55% {
    transform: translateX(4px);
  }

  75% {
    transform: translateX(-6px);
  }

  100% {
    transform: translateX(8px);
  }
}


@keyframes smoke-rotate {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-1.2deg); }
  50%  { transform: rotate(1.4deg); }
  75%  { transform: rotate(-0.8deg); }
  100% { transform: rotate(0deg); }
}

@keyframes smoke-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.7);
  }

  15% {
    opacity: 0.55;
  }

  55% {
    opacity: 0.45;
    transform: translateY(-45px) scale(1.05);
  }

  80% {
    opacity: 0.25;
  }

  100% {
    opacity: 0;
    transform: translateY(-90px) scale(1.3);
  }
}

/* ===============================
FLOATING NOTE – C4
=============================== */

.floating-note.floating-c4 {
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: var(--text-sm, 12px);
font-weight: 500;

color: var(--feedback-c4, rgba(255, 255, 255, 0.65));
text-shadow:
0 1px 4px rgba(0,0,0,0.6);
}

/* ===============================
FLOATING NOTE – SOLFEGEO
=============================== */

.floating-note.floating-solfege {
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: var(--text-sm, 12px);
font-weight: 500;
font-style: italic;

color: var(--feedback-solfege, rgba(220, 235, 255, 0.6));
text-shadow:
0 1px 6px rgba(0,0,0,0.55);
}


/* ===============================
KEY PULSE – limpio y estable
=============================== */

.key-pulse {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;


/* estado base = frame 0 */
box-shadow: 0 0 0 rgba(120,170,255,0);

animation: keyPulse 0.12s ease-out;

}

@keyframes keyPulse {
0% {
box-shadow: 0 0 0 rgba(120,170,255,0);
}
40% {
box-shadow: 0 0 14px rgba(120,170,255,0.9);
}
100% {
box-shadow: 0 0 0 rgba(120,170,255,0);
}
}

/* ===============================
GHOST NOTES
=============================== */

.ghost-note {
position: absolute;
border-radius: 6px;
pointer-events: none;
opacity: 0.4;
transition: opacity 0.2s ease, transform 0.2s ease;
}

.ghost-early {
background: var(--ghost-early, linear-gradient(#ffcc80, #ff9800));
}

.ghost-late {
background: var(--ghost-late, linear-gradient(#caa6ff, #8e44ad));
}

/* ===============================
FEEDBACK PRACTICE
=============================== */

.white-key.correct,
.black-key.correct {
background: var(--feedback-correct, linear-gradient(#b6f5c6, #7be495));
}

.white-key.wrong,
.black-key.wrong {
background: var(--feedback-wrong, linear-gradient(#ffb3b3, #ff4d4d));
}

/* ===============================
TIMING
=============================== */

.white-key.timing-perfect,
.black-key.timing-perfect {
background: var(--timing-perfect-bg, linear-gradient(#c8ffd4, #7dff9c));
}

.white-key.timing-early,
.black-key.timing-early {
background: var(--timing-early-bg, linear-gradient(#ffe3b3, #ffb347));
}

.white-key.timing-late,
.black-key.timing-late {
background: var(--timing-late-bg, linear-gradient(#e0c8ff, #b48cff));
}

/* PERFECT */
.synth-note.timing-perfect .synth-bg {
background: var(--timing-perfect-note, linear-gradient(#7dff9c, #2ecc71));
}

/* EARLY */
.synth-note.timing-early .synth-bg {
background: var(--timing-early-note, linear-gradient(#ffda8a, #ff9800));
}

/* LATE */
.synth-note.timing-late .synth-bg {
background: var(--timing-late-note, linear-gradient(#d2b6ff, #8e44ad));
}

/* ================================
ARCADE FEEDBACK
================================ */

.white-key.key.hit,
.black-key.key.hit {
box-shadow: 0 0 12px rgba(0, 255, 0, 0.9);
background: var(--arcade-hit, #6cff6c);
}

.white-key.key.miss,
.black-key.key.miss {
box-shadow: 0 0 12px rgba(255, 0, 0, 0.9);
background: var(--arcade-miss, #ff6c6c);
}

/* ===============================
HIT FEEDBACK
=============================== */

.hit-perfect {
background: var(--arcade-hit, #00ff99);
box-shadow: 0 0 14px var(--arcade-hit, #00ff99);
}

.hit-good {
background: var(--arcade-good, #66ff66);
box-shadow: 0 0 10px var(--arcade-good, #66ff66);
}

.hit-ok {
background: var(--arcade-ok, #ffe066);
box-shadow: 0 0 10px var(--arcade-ok, #ffe066);
}

.miss {
background: var(--arcade-miss, #ff4d4d);
box-shadow: 0 0 12px var(--arcade-miss, #ff4d4d);
}

/* ===============================
TIMING LABELS
=============================== */

.timing-label {
position: absolute;
font-size: var(--text-md, 13px);
font-weight: 600;
pointer-events: none;
opacity: 1;
transform: translate(-50%, 0);
transition:
transform 0.3s ease-out,
opacity 0.3s ease-out;
text-shadow:
0 2px 6px rgba(0,0,0,0.6);
z-index: var(--z-feedback, 30);
}

.timing-perfect {
color: var(--timing-perfect, #7dff9c);
}

.timing-early {
color: var(--timing-early, #ffb347);
}

.timing-late {
color: var(--timing-late, #b48cff);
}

.key-label.timing-perfect {
color: var(--timing-perfect, #7dff9c);
}

.key-label.timing-early {
color: var(--timing-early, #ffb347);
}

.key-label.timing-late {
color: var(--timing-late, #b48cff);
}




:root[style*="--debug-smoke"] .floating-rotate {
  outline: 2px solid red;
}

:root[style*="--debug-smoke"] .floating-smoke {
  outline: 2px solid blue;
}

:root[style*="--debug-smoke"] .floating-note {
  outline: 2px solid green;
}