/* ocarina.css — el instrumento y el libro de canciones */

.ocarina-pantalla {
  display: grid;
  place-items: center;
  min-height: 4.5rem;
  margin-bottom: var(--e4);
  padding: var(--e3);
  border: 2px solid var(--dialogo-borde);
  border-radius: var(--r-lg);
  background: linear-gradient(to bottom, rgba(18,32,63,.9), rgba(10,20,44,.9));
}

.ocarina-notas {
  display: flex;
  gap: var(--e2);
  font-size: var(--t-lg);
  letter-spacing: .1em;
}
.ocarina-nota { animation: nota-entra 220ms var(--curva); }
@keyframes nota-entra {
  from { opacity: 0; scale: .5; translate: 0 8px; }
  to   { opacity: 1; scale: 1; translate: 0 0; }
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.ocarina-botones {
  display: flex;
  justify-content: center;
  gap: var(--e3);
  margin-bottom: var(--e3);
}

.ocarina-boton {
  display: grid;
  place-items: center;
  width: clamp(3.25rem, 15vw, 4.5rem);
  height: clamp(3.25rem, 15vw, 4.5rem);
  border: 3px solid var(--color);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--color) 35%, transparent),
    rgba(0,0,0,.45));
  color: var(--color);
  font-size: clamp(1.3rem, 6vw, 1.9rem);
  line-height: 1;
  /* Sin transición en la escala: una ocarina tiene que responder al instante. */
  transition: box-shadow var(--rapido), background var(--rapido);
}

.ocarina-boton.pulsado {
  background: radial-gradient(circle at 35% 30%,
    color-mix(in srgb, var(--color) 75%, transparent),
    color-mix(in srgb, var(--color) 30%, transparent));
  box-shadow: 0 0 22px color-mix(in srgb, var(--color) 65%, transparent);
  scale: .93;
}

.ocarina-boton:disabled { opacity: .35; }

.ocarina-ayuda {
  margin-bottom: var(--e4);
  text-align: center;
  font-size: var(--t-xs);
  color: #8b93b5;
}

/* ── Libro de canciones ─────────────────────────────────────────────────── */

.ocarina-lista { display: flex; flex-direction: column; gap: var(--e2); }

.ocarina-cancion {
  padding: var(--e3);
  border: 1px solid var(--panel-borde);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.25);
  font-size: var(--t-sm);
}
.ocarina-cancion[data-sabida='false'] { opacity: .5; }
.ocarina-cancion[data-sabida='true'] { cursor: pointer; }
.ocarina-cancion[data-sabida='true']:active { scale: .99; }

.ocarina-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: #9aa2c0;
}

.ocarina-patron {
  flex: 0 0 auto;
  color: var(--oro-claro);
  font-size: var(--t-base);
  letter-spacing: .12em;
}

.ocarina-pista {
  display: block;
  margin-top: 2px;
  color: var(--oro-oscuro);
  font-style: italic;
  line-height: 1.4;
}

.ocarina-candado {
  flex: 0 0 auto;
  opacity: .5;
  animation: candado-respira 3s ease-in-out infinite;
}
@keyframes candado-respira {
  0%, 100% { opacity: .35; }
  50%      { opacity: .7; }
}

/* ── Duelo de Ocarina ───────────────────────────────────────────────────── */

.duelo {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: var(--e4) 0;
}

.duelo-marcador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--fuente-titulo);
  font-size: var(--t-sm);
  color: #9aa2c0;
}
.duelo-ronda strong { color: var(--oro-claro); font-size: var(--t-md); }
.duelo-estado { color: var(--oro-claro); }

.duelo-secuencia {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e2);
  min-height: 3rem;
  padding: var(--e3);
  border: 1px solid var(--panel-borde);
  border-radius: var(--r-md);
  background: rgba(0,0,0,.3);
  font-size: var(--t-md);
}
.duelo-nota { transition: color var(--rapido); }
.duelo-nota.hecha { text-shadow: 0 0 10px currentColor; }
.duelo-nota--error { color: var(--peligro); font-size: var(--t-sm); }

.duelo-botones { flex-wrap: wrap; }